diff --git a/public/locale/en.json b/public/locale/en.json
index 2a485441d4f..910baca98cf 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -328,6 +328,7 @@
   "add_new_patient": "Add New Patient",
   "add_new_user": "Add New User",
   "add_notes": "Add notes",
+  "add_patient_updates": "Add Patient Updates",
   "add_policy": "Add Insurance Policy",
   "add_prescription_medication": "Add Prescription Medication",
   "add_prescription_to_consultation_note": "Add a new prescription to this consultation.",
diff --git a/src/CAREUI/display/Callout.tsx b/src/CAREUI/display/Callout.tsx
index 0983d66f298..c1d4b05a88f 100644
--- a/src/CAREUI/display/Callout.tsx
+++ b/src/CAREUI/display/Callout.tsx
@@ -2,10 +2,8 @@ import React from "react";
 
 import { cn } from "@/lib/utils";
 
-import { ButtonVariant } from "@/components/Common/ButtonV2";
-
 interface CalloutProps {
-  variant?: ButtonVariant;
+  variant?: "primary" | "secondary" | "warning" | "alert" | "danger";
   className?: string;
   badge: string;
   children: React.ReactNode;
diff --git a/src/CAREUI/display/Chip.tsx b/src/CAREUI/display/Chip.tsx
deleted file mode 100644
index e501bf26f90..00000000000
--- a/src/CAREUI/display/Chip.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
-
-import { ButtonVariant } from "@/components/Common/ButtonV2";
-
-import { classNames } from "@/Utils/utils";
-
-interface Props {
-  size?: "small" | "medium" | "large";
-  hideBorder?: boolean;
-  variant?: ButtonVariant | "custom";
-  startIcon?: IconName;
-  endIcon?: IconName;
-  text: string;
-  tooltip?: string;
-  className?: string;
-  id?: string;
-}
-
-export default function Chip({
-  size = "medium",
-  hideBorder = false,
-  variant = "primary",
-  ...props
-}: Props) {
-  return (
-    <span
-      id={props?.id}
-      className={classNames(
-        "inline-flex items-center gap-2 font-medium",
-
-        {
-          small: "rounded px-2 py-1 text-xs",
-          medium: "rounded-lg px-3 py-2 text-xs",
-          large: "rounded-lg px-4 py-3 text-sm",
-        }[size],
-
-        !hideBorder && "border",
-        {
-          primary: "border-primary-300 bg-primary-100 text-primary-900",
-          secondary: "border-secondary-300 bg-secondary-100 text-secondary-900",
-          success: "border-success-300 bg-success-100 text-success-900",
-          danger: "border-danger-300 bg-danger-100 text-danger-900",
-          warning: "border-warning-300 bg-warning-100 text-warning-900",
-          alert: "border-alert-300 bg-alert-100 text-alert-900",
-          custom: "",
-        }[variant],
-
-        props.className,
-      )}
-      title={props.tooltip}
-    >
-      {props.startIcon && <CareIcon icon={props.startIcon} />}
-      <span>{props.text}</span>
-      {props.endIcon && <CareIcon icon={props.endIcon} />}
-    </span>
-  );
-}
diff --git a/src/CAREUI/display/PopupModal.tsx b/src/CAREUI/display/PopupModal.tsx
deleted file mode 100644
index 6410addbcc2..00000000000
--- a/src/CAREUI/display/PopupModal.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
-import DialogModal from "@/components/Common/Dialog";
-
-import useBreakpoints from "@/hooks/useBreakpoints";
-
-import { classNames } from "@/Utils/utils";
-
-type Props = {
-  show: boolean;
-  onHide: () => void;
-  children: ReactNode;
-  anchorRef: React.RefObject<HTMLElement>;
-  className?: string;
-  onSubmit?: () => void;
-};
-
-type Position =
-  | { left: number; top: number }
-  | { right: number; bottom: number }
-  | { left: number; bottom: number }
-  | { right: number; top: number };
-
-export default function PopupModal(props: Props) {
-  const { t } = useTranslation();
-  const isMobile = useBreakpoints({ default: true, lg: false });
-
-  if (!isMobile) {
-    return <DesktopView {...props} />;
-  }
-
-  return (
-    <DialogModal
-      title=""
-      show={props.show}
-      onClose={props.onHide}
-      className="!p-4 !pt-0"
-    >
-      <div className="space-y-6">
-        {props.children}
-        <div className="cui-form-button-group px-4">
-          <Cancel onClick={props.onHide} label={t("close")} shadow={false} />
-          {props.onSubmit && (
-            <Submit onClick={props.onSubmit} label={t("save")} shadow={false} />
-          )}
-        </div>
-      </div>
-    </DialogModal>
-  );
-}
-
-const DesktopView = (props: Props) => {
-  const { t } = useTranslation();
-  const [position, setPosition] = useState<Position>({ left: 0, top: 0 });
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const modal = useRef<HTMLDivElement>(null);
-  const [children, setChildren] = useState(props.children);
-
-  useEffect(() => {
-    // just to make sure the animation runs smoothly
-    if (props.show) {
-      setChildren(props.children);
-    }
-  }, [props.children, props.show]);
-
-  useEffect(() => {
-    const handleOutsideClick = (e: MouseEvent) => {
-      const isModalClicked =
-        modal.current && modal.current.contains(e.target as Node);
-      if (!isModalClicked) {
-        props.onHide();
-      }
-    };
-
-    if (props.show) {
-      const currentMousePosition = mousePosition;
-      const modalHeight = modal.current?.clientHeight || 0;
-      const modalWidth = modal.current?.clientWidth || 0;
-      const clickX = currentMousePosition.x;
-      const clickY = currentMousePosition.y;
-      const windowHeight = window.innerHeight;
-      const windowWidth = window.innerWidth;
-
-      const anchorPosition = props.anchorRef.current?.getBoundingClientRect();
-      const anchorX = anchorPosition?.x || 0;
-      const anchorY = anchorPosition?.y || 0;
-      const verticalCenter = windowHeight / 2;
-      const horizontalCenter = windowWidth / 2;
-      const mountLeft = clickX - anchorX;
-      const mountTop = clickY - anchorY;
-
-      let position;
-      if (clickX > horizontalCenter) {
-        position = { left: mountLeft - modalWidth };
-      } else {
-        position = { left: mountLeft };
-      }
-      if (clickY > verticalCenter) {
-        position = { ...position, top: mountTop - modalHeight };
-      } else {
-        position = { ...position, top: mountTop };
-      }
-      setPosition(position);
-    }
-
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => {
-      document.removeEventListener("mousedown", handleOutsideClick);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.show]);
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
-
-  const positionAttributes = Object.entries(position).reduce(
-    (acc, [key, value]) => {
-      return { ...acc, [key]: `${value}px` };
-    },
-    {},
-  );
-
-  return (
-    <div
-      ref={modal}
-      style={positionAttributes}
-      className={classNames(
-        "absolute z-10 rounded-lg border border-secondary-400 bg-white text-black shadow-lg transition-all",
-        props.show ? "visible opacity-100" : "invisible opacity-0",
-        props.className,
-      )}
-    >
-      {children}
-      <div className="flex w-full items-center justify-end gap-2 rounded-b-lg border-t border-t-secondary-300 bg-secondary-100 p-2">
-        <Cancel onClick={props.onHide} label={t("close")} shadow={false} />
-        {props.onSubmit && (
-          <Submit onClick={props.onSubmit} label={t("save")} shadow={false} />
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/src/CAREUI/interactive/FiltersSlideover.tsx b/src/CAREUI/interactive/FiltersSlideover.tsx
index 6e4feeaf852..b3c11fcd035 100644
--- a/src/CAREUI/interactive/FiltersSlideover.tsx
+++ b/src/CAREUI/interactive/FiltersSlideover.tsx
@@ -6,8 +6,6 @@ import SlideOver from "@/CAREUI/interactive/SlideOver";
 
 import { Button } from "@/components/ui/button";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
-
 import useFilters from "@/hooks/useFilters";
 
 type AdvancedFilter = ReturnType<typeof useFilters>["advancedFilter"];
@@ -35,18 +33,17 @@ export default function FiltersSlideover({
         <div className="flex items-center justify-between">
           <span className="text-lg font-bold">{t("filters")}</span>
           <div className="mr-2 flex items-center justify-end gap-1">
-            <ButtonV2
-              variant="danger"
-              ghost
-              onClick={onClear}
-              id="clear-filter"
-            >
+            <Button variant="ghost" onClick={onClear} id="clear-filter">
               <CareIcon icon="l-filter-slash" className="text-lg" />
               <span>{t("clear")}</span>
-            </ButtonV2>
-            <ButtonV2 ghost onClick={onApply} id="apply-filter">
+            </Button>
+            <Button
+              variant="outline_primary"
+              onClick={onApply}
+              id="apply-filter"
+            >
               {t("apply")}
-            </ButtonV2>
+            </Button>
           </div>
         </div>
       }
diff --git a/src/CAREUI/interactive/Zoom.tsx b/src/CAREUI/interactive/Zoom.tsx
index 0d6513efbba..d97300d36cb 100644
--- a/src/CAREUI/interactive/Zoom.tsx
+++ b/src/CAREUI/interactive/Zoom.tsx
@@ -2,7 +2,7 @@ import { ReactNode, createContext, useContext, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
 
 type ProviderValue = {
   scale: number;
@@ -69,31 +69,25 @@ export const ZoomControls = (props: { disabled?: boolean }) => {
 
   return (
     <div className="absolute bottom-8 right-8 flex flex-col items-center justify-center gap-1 rounded-full border border-secondary-400 bg-white p-0.5 shadow-lg md:flex-row-reverse md:gap-2">
-      <ButtonV2
+      <Button
         disabled={props.disabled}
-        circle
-        variant="secondary"
-        size="small"
-        shadow={false}
-        className="p-2.5"
+        variant="ghost"
+        className="p-2.5 rounded-full"
         onClick={ctx.zoomIn}
       >
         <CareIcon icon="l-search-plus" className="text-lg" />
-      </ButtonV2>
+      </Button>
       <span className="text-sm font-semibold text-secondary-800">
         {Math.round(ctx.scale * 100)}%
       </span>
-      <ButtonV2
+      <Button
         disabled={props.disabled}
-        circle
-        variant="secondary"
-        size="small"
-        shadow={false}
-        className="p-2.5"
+        variant="ghost"
+        className="p-2.5 rounded-full"
         onClick={ctx.zoomOut}
       >
         <CareIcon icon="l-search-minus" className="text-lg" />
-      </ButtonV2>
+      </Button>
     </div>
   );
 };
diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
index 6379b8b7ad8..9cefca73aac 100644
--- a/src/CAREUI/misc/PaginatedList.tsx
+++ b/src/CAREUI/misc/PaginatedList.tsx
@@ -2,7 +2,8 @@ import { createContext, useContext, useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2, { CommonButtonProps } from "@/components/Common/ButtonV2";
+import { Button, ButtonProps } from "@/components/ui/button";
+
 import Pagination from "@/components/Common/Pagination";
 
 import { PaginatedResponse, QueryRoute } from "@/Utils/request/types";
@@ -118,13 +119,16 @@ const WhenLoading = <TItem extends object>(props: WhenEmptyProps) => {
 
 PaginatedList.WhenLoading = WhenLoading;
 
+interface CommonButtonProps extends ButtonProps {
+  label?: string;
+}
+
 const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
   const { loading, refetch } = useContextualized<object>();
 
   return (
-    <ButtonV2
+    <Button
       variant="secondary"
-      border
       {...props}
       onClick={() => refetch()}
       disabled={loading}
@@ -134,7 +138,7 @@ const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
         className={classNames("text-lg", loading && "animate-spin")}
       />
       <span>{label}</span>
-    </ButtonV2>
+    </Button>
   );
 };
 
diff --git a/src/components/Auth/ResetPassword.tsx b/src/components/Auth/ResetPassword.tsx
index 95155c1eea6..6986331e6f8 100644
--- a/src/components/Auth/ResetPassword.tsx
+++ b/src/components/Auth/ResetPassword.tsx
@@ -2,7 +2,8 @@ import { navigate } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import TextFormField from "@/components/Form/FormFields/TextFormField";
 import { validateRule } from "@/components/Users/UserFormValidations";
 
@@ -173,8 +174,20 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 )}
             </div>
             <div className="grid p-4 sm:flex sm:justify-between">
-              <Cancel onClick={() => navigate("/login")} />
-              <Submit onClick={(e) => handleSubmit(e)} label="reset" />
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => navigate("/login")}
+              >
+                <span>{t("cancel")}</span>
+              </Button>
+              <Button
+                variant="primary"
+                type="submit"
+                onClick={(e) => handleSubmit(e)}
+              >
+                <span>{t("reset")}</span>
+              </Button>
             </div>
           </form>
         </div>
diff --git a/src/components/Common/AvatarEditModal.tsx b/src/components/Common/AvatarEditModal.tsx
index dc044264c4d..47163532b84 100644
--- a/src/components/Common/AvatarEditModal.tsx
+++ b/src/components/Common/AvatarEditModal.tsx
@@ -10,7 +10,8 @@ import Webcam from "react-webcam";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2, { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import DialogModal from "@/components/Common/Dialog";
 
 import useDragAndDrop from "@/hooks/useDragAndDrop";
@@ -253,49 +254,56 @@ const AvatarEditModal = ({
 
               <div className="flex flex-col gap-2 pt-4 sm:flex-row">
                 <div>
-                  <label
-                    id="upload-cover-image"
-                    className="button-size-default button-shape-square button-primary-default inline-flex h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium shadow outline-offset-1 transition-all duration-200 ease-in-out enabled:hover:shadow-md disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500"
-                  >
-                    <CareIcon icon="l-cloud-upload" className="text-lg" />
-                    {t("upload_an_image")}
-                    <input
-                      title="changeFile"
-                      type="file"
-                      accept="image/*"
-                      className="hidden"
-                      onChange={onSelectFile}
-                    />
-                  </label>
+                  <Button id="upload-cover-image" variant="primary" asChild>
+                    <label className="cursor-pointer">
+                      <CareIcon
+                        icon="l-cloud-upload"
+                        className="text-lg mr-1"
+                      />
+                      {t("upload_an_image")}
+                      <input
+                        title="changeFile"
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={onSelectFile}
+                      />
+                    </label>
+                  </Button>
                 </div>
-                <ButtonV2
+                <Button
+                  variant="primary"
                   onClick={() => {
                     setConstraint(() => VideoConstraints.user);
                     setIsCameraOpen(true);
                   }}
                 >
                   {`${t("open")} ${t("camera")}`}
-                </ButtonV2>
+                </Button>
                 <div className="sm:flex-1" />
-                <Cancel
+                <Button
+                  variant="outline"
                   onClick={(e) => {
                     e.stopPropagation();
                     closeModal();
                     dragProps.setFileDropError("");
                   }}
                   disabled={isProcessing}
-                />
+                >
+                  {t("cancel")}
+                </Button>
                 {imageUrl && (
-                  <ButtonV2
-                    variant="danger"
+                  <Button
+                    variant="destructive"
                     onClick={deleteAvatar}
                     disabled={isProcessing}
                   >
                     {t("delete")}
-                  </ButtonV2>
+                  </Button>
                 )}
-                <ButtonV2
+                <Button
                   id="save-cover-image"
+                  variant="outline"
                   onClick={uploadAvatar}
                   disabled={isProcessing || !selectedFile}
                 >
@@ -310,7 +318,7 @@ const AvatarEditModal = ({
                   <span>
                     {isProcessing ? `${t("uploading")}...` : `${t("save")}`}
                   </span>
-                </ButtonV2>
+                </Button>
               </div>
             </>
           ) : (
@@ -346,29 +354,35 @@ const AvatarEditModal = ({
               <div className="flex flex-col gap-2 pt-4 sm:flex-row">
                 {!previewImage ? (
                   <>
-                    <ButtonV2 onClick={handleSwitchCamera}>
+                    <Button variant="primary" onClick={handleSwitchCamera}>
                       <CareIcon icon="l-camera-change" className="text-lg" />
                       {`${t("switch")} ${t("camera")}`}
-                    </ButtonV2>
-                    <ButtonV2
+                    </Button>
+                    <Button
+                      variant="primary"
                       onClick={() => {
                         captureImage();
                       }}
                     >
                       <CareIcon icon="l-capture" className="text-lg" />
                       {t("capture")}
-                    </ButtonV2>
+                    </Button>
                   </>
                 ) : (
                   <>
-                    <ButtonV2
+                    <Button
+                      variant="primary"
                       onClick={() => {
                         setPreviewImage(null);
                       }}
                     >
                       {t("retake")}
-                    </ButtonV2>
-                    <Submit disabled={isProcessing} onClick={uploadAvatar}>
+                    </Button>
+                    <Button
+                      variant="primary"
+                      disabled={isProcessing}
+                      onClick={uploadAvatar}
+                    >
                       {isCaptureImgBeingUploaded ? (
                         <>
                           <CareIcon
@@ -380,19 +394,22 @@ const AvatarEditModal = ({
                       ) : (
                         <> {t("submit")}</>
                       )}
-                    </Submit>
+                    </Button>
                   </>
                 )}
                 <div className="sm:flex-1"></div>
-                <Cancel
+                <Button
+                  type="button"
+                  variant="outline"
                   onClick={() => {
                     setPreviewImage(null);
                     setIsCameraOpen(false);
                     webRef.current.stopCamera();
                   }}
-                  label={t("close")}
                   disabled={isProcessing}
-                />
+                >
+                  {t("close")}
+                </Button>
               </div>
             </>
           )}
diff --git a/src/components/Common/ButtonV2.tsx b/src/components/Common/ButtonV2.tsx
deleted file mode 100644
index cf1299d29bf..00000000000
--- a/src/components/Common/ButtonV2.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import { Link } from "raviger";
-import { useTranslation } from "react-i18next";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
-
-import { AuthorizedElementProps } from "@/Utils/AuthorizeFor";
-import { classNames } from "@/Utils/utils";
-
-export type ButtonSize = "small" | "default" | "large";
-export type ButtonShape = "square" | "circle";
-export type ButtonVariant =
-  | "primary"
-  | "secondary"
-  | "danger"
-  | "warning"
-  | "alert";
-
-export type RawButtonProps = Omit<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >,
-  "style"
->;
-
-export type ButtonStyleProps = {
-  /**
-   * - `"small"` has small text and minimal padding.
-   * - `"default"` has small text with normal padding.
-   * - `"large"` has base text size with large padding.
-   */
-  size?: ButtonSize;
-  /**
-   * - `"square"` gives a button with minimally rounded corners.
-   * - `"circle"` gives a button with fully rounded corners. Ideal when only
-   * icons are present.
-   */
-  circle?: boolean | undefined;
-  /**
-   * - `"primary"` is ideal for form submissions, etc.
-   * - `"secondary"` is ideal for things that have secondary importance.
-   * - `"danger"` is ideal for destructive or dangerous actions, such as delete.
-   * - `"warning"` is ideal for actions that require caution such as archive.
-   * - `"alert"` is ideal for actions that require alert.
-   */
-  variant?: ButtonVariant;
-  /** If set, gives an elevated button with hover effects. */
-  shadow?: boolean | undefined;
-  /** If set, removes the background to give a simple text button. */
-  ghost?: boolean | undefined;
-  /**
-   * If set, applies border to the button.
-   */
-  border?: boolean | undefined;
-};
-
-export type ButtonProps = RawButtonProps &
-  AuthorizedElementProps &
-  ButtonStyleProps & {
-    /**
-     * Whether the button is disabled or not.
-     * This is overriden to `true` if `loading` is `true`.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Whether the button should be disabled and show a loading animation.
-     */
-    loading?: boolean | undefined;
-    /**
-     * A button will convert to a link if the `href` prop is set.
-     */
-    href?: string | undefined;
-    /**
-     * Link target. Only applicable if `href` is set.
-     */
-    target?: string | undefined;
-    /**
-     * Whether the button should be having a Id.
-     */
-    id?: string | undefined;
-    /**
-     * Tooltip showed when hovered over.
-     */
-    tooltip?: string;
-    /**
-     * Class for tooltip
-     */
-    tooltipClassName?: string;
-  };
-
-export const buttonStyles = ({
-  size = "default",
-  circle = false,
-  variant = "primary",
-  ghost = false,
-  border = false,
-  shadow = !ghost,
-}: ButtonStyleProps) => {
-  return classNames(
-    "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500",
-    `button-size-${size}`,
-    `button-shape-${circle ? "circle" : "square"}`,
-    ghost ? `button-${variant}-ghost` : `button-${variant}-default`,
-    border && `button-${variant}-border`,
-    shadow && "shadow enabled:hover:shadow-md",
-  );
-};
-
-/**
- * @deprecated Use `Button` instead.
- */
-const ButtonV2 = ({
-  authorizeFor,
-  size,
-  variant,
-  circle,
-  shadow,
-  ghost,
-  border,
-  disabled,
-  loading,
-  children,
-  href,
-  target,
-  tooltip,
-  tooltipClassName,
-  ...props
-}: ButtonProps) => {
-  shadow ??= !ghost;
-
-  const className = classNames(
-    buttonStyles({ size, circle, variant, ghost, border, shadow }),
-    tooltip && "tooltip",
-    props.className,
-  );
-
-  if (tooltip) {
-    children = (
-      <>
-        {tooltip && (
-          <span className={classNames("tooltip-text", tooltipClassName)}>
-            {tooltip}
-          </span>
-        )}
-        {children}
-      </>
-    );
-  }
-
-  if (href && !(disabled || loading)) {
-    return (
-      <Link href={href} target={target} className={props.className}>
-        <button {...props} disabled={disabled || loading} className={className}>
-          {children}
-        </button>
-      </Link>
-    );
-  }
-
-  if (authorizeFor) {
-    return (
-      <AuthorizedChild authorizeFor={authorizeFor}>
-        {({ isAuthorized }) => (
-          <button
-            {...props}
-            disabled={disabled || !isAuthorized || loading}
-            className={className}
-          >
-            {children}
-          </button>
-        )}
-      </AuthorizedChild>
-    );
-  }
-
-  return (
-    <button {...props} disabled={disabled || loading} className={className}>
-      {children}
-    </button>
-  );
-};
-
-export default ButtonV2;
-
-// Common buttons
-
-export type CommonButtonProps = ButtonProps & { label?: string };
-
-/**
- * @deprecated Use `Button` with the `type="submit"` prop instead.
- */
-export const Submit = ({ label = "Submit", ...props }: CommonButtonProps) => {
-  const { t } = useTranslation();
-  return (
-    <ButtonV2
-      id="submit"
-      type="submit"
-      children={
-        <>
-          <CareIcon icon="l-check-circle" className="text-lg" />
-          <span className="whitespace-pre-wrap">{t(label)}</span>
-        </>
-      }
-      {...props}
-      className={classNames("w-full md:w-auto", props.className)}
-    />
-  );
-};
-
-/**
- * @deprecated Use `Button` instead.
- */
-export const Cancel = ({ label = "Cancel", ...props }: CommonButtonProps) => {
-  const { t } = useTranslation();
-  return (
-    <ButtonV2
-      id="cancel"
-      type="button"
-      variant="secondary"
-      border
-      children={
-        <>
-          <CareIcon icon="l-times-circle" className="text-lg" />
-          {label && <span className="whitespace-pre-wrap">{t(label)}</span>}
-        </>
-      }
-      {...props}
-      className={classNames("w-full md:w-auto", props.className)}
-    />
-  );
-};
-
-export type ButtonWithTimerProps = CommonButtonProps & {
-  initialInverval?: number;
-  interval?: number;
-};
diff --git a/src/components/Common/ConfirmDialog.tsx b/src/components/Common/ConfirmDialog.tsx
index 5fff5d9f8fb..78cebe23f8e 100644
--- a/src/components/Common/ConfirmDialog.tsx
+++ b/src/components/Common/ConfirmDialog.tsx
@@ -1,4 +1,5 @@
-import { ButtonVariant, Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button, ButtonVariant } from "@/components/ui/button";
+
 import DialogModal from "@/components/Common/Dialog";
 
 type ConfirmDialogProps = {
@@ -30,15 +31,18 @@ const ConfirmDialog = ({
     <DialogModal {...props}>
       {children}
       <div className="mt-6 flex w-full flex-col justify-end gap-2 md:flex-row">
-        <Cancel onClick={props.onClose} label={cancelLabel} />
-        <Submit
+        <Button variant="outline" type="button" onClick={props.onClose}>
+          {cancelLabel}
+        </Button>
+        <Button
+          type="submit"
+          variant={variant}
           name={name ?? "submit"}
           onClick={onConfirm}
-          variant={variant}
           disabled={disabled}
         >
           {action}
-        </Submit>
+        </Button>
       </div>
     </DialogModal>
   );
diff --git a/src/components/Common/ExcelFIleDragAndDrop.tsx b/src/components/Common/ExcelFIleDragAndDrop.tsx
index d868e03f2a4..86902a9b189 100644
--- a/src/components/Common/ExcelFIleDragAndDrop.tsx
+++ b/src/components/Common/ExcelFIleDragAndDrop.tsx
@@ -4,7 +4,8 @@ import * as XLSX from "xlsx";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import ExcelViewer from "@/components/Common/ExcelViewer";
 
 import useDragAndDrop from "@/hooks/useDragAndDrop";
@@ -248,7 +249,9 @@ export default function ExcelFileDragAndDrop({
           Upload a file
         </label>
         <div className="sm:flex-1" />
-        <Cancel
+        <Button
+          type="button"
+          variant="outline"
           onClick={() => {
             closeModal();
             setErrors([]);
@@ -257,8 +260,12 @@ export default function ExcelFileDragAndDrop({
             dragProps.setFileDropError("");
           }}
           disabled={loading}
-        />
-        <Submit
+        >
+          {t("close")}
+        </Button>
+        <Button
+          type="submit"
+          variant="primary"
           data-testid="import-btn"
           onClick={() => handleSubmit(validData)}
           disabled={loading || !selectedFile || validData.length === 0}
@@ -273,7 +280,7 @@ export default function ExcelFileDragAndDrop({
               ? "Importing..."
               : `Import ${validData.length} valid fields`}
           </span>
-        </Submit>
+        </Button>
       </div>
     </div>
   );
diff --git a/src/components/Common/ExcelViewer.tsx b/src/components/Common/ExcelViewer.tsx
index d35c98a6cc8..e77dc0132da 100644
--- a/src/components/Common/ExcelViewer.tsx
+++ b/src/components/Common/ExcelViewer.tsx
@@ -1,8 +1,10 @@
+import { t } from "i18next";
 import { ReactNode, useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2, { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import DialogModal from "@/components/Common/Dialog";
 import Pagination from "@/components/Common/Pagination";
 
@@ -76,16 +78,16 @@ const ExcelViewer = ({
           </p>
           <div className="flex gap-4">
             {downloadURL && downloadURL.length > 0 && (
-              <ButtonV2>
+              <Button>
                 <a
                   href={downloadURL}
                   className="text-white"
                   download={selectedFile.name}
                 >
                   <CareIcon icon="l-file-download" className="h-4 w-4" />
-                  <span>Download</span>
+                  <span>{t("download")}</span>
                 </a>
-              </ButtonV2>
+              </Button>
             )}
           </div>
         </div>
@@ -261,8 +263,12 @@ const ExcelViewer = ({
         </div>
       </>
       <div className="flex flex-wrap-reverse justify-end gap-5">
-        <Cancel onClick={onClose} label="Close" />
-        <Submit
+        <Button variant="outline" type="button" onClick={onClose}>
+          {t("close")}
+        </Button>
+        <Button
+          variant="primary"
+          type="submit"
           onClick={() => {
             handleSubmit(selectedRowsData);
             handleClose();
@@ -272,7 +278,7 @@ const ExcelViewer = ({
         >
           <CareIcon icon="l-file-import" className="text-lg" />
           <span>Import {selectedRows.length} selected fields</span>
-        </Submit>
+        </Button>
       </div>
     </DialogModal>
   );
diff --git a/src/components/Common/FilePreviewDialog.tsx b/src/components/Common/FilePreviewDialog.tsx
index 95155fcc9d9..4d6709d427d 100644
--- a/src/components/Common/FilePreviewDialog.tsx
+++ b/src/components/Common/FilePreviewDialog.tsx
@@ -14,12 +14,12 @@ import { useTranslation } from "react-i18next";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2, { Cancel } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import CircularProgress from "@/components/Common/CircularProgress";
 import DialogModal from "@/components/Common/Dialog";
 import { StateInterface } from "@/components/Files/FileUpload";
-
-import { FileUploadModel } from "../Patient/models";
+import { FileUploadModel } from "@/components/Patient/models";
 
 const PDFViewer = lazy(() => import("@/components/Common/PDFViewer"));
 
@@ -211,24 +211,27 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
             <div className="flex gap-4 mt-2 md:mt-0">
               {downloadURL && downloadURL.length > 0 && (
-                <ButtonV2>
+                <Button variant="primary">
                   <a
                     href={downloadURL}
                     className="text-white"
                     download={`${file_state.name}.${file_state.extension}`}
                   >
                     <CareIcon icon="l-file-download" className="h-4 w-4" />
-                    <span>Download</span>
+                    <span>{t("download")}</span>
                   </a>
-                </ButtonV2>
+                </Button>
               )}
-              <Cancel onClick={onClose} label="Close" />
+              <Button variant="outline" type="button" onClick={onClose}>
+                {t("close")}
+              </Button>
             </div>
           </div>
           <div className="flex flex-1 items-center justify-center">
             {uploadedFiles && uploadedFiles.length > 1 && (
-              <ButtonV2
-                className="cursor-pointer bg-primary-500 rounded-md mr-4"
+              <Button
+                variant="primary"
+                className="mr-4"
                 onClick={() => handleNext(index - 1)}
                 disabled={index <= 0}
                 aria-label="Previous file"
@@ -237,7 +240,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 }
               >
                 <CareIcon icon="l-arrow-left" className="h-4 w-4" />
-              </ButtonV2>
+              </Button>
             )}
             <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
               {file_state.isImage ? (
@@ -279,8 +282,9 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
 
             {uploadedFiles && uploadedFiles.length > 1 && (
-              <ButtonV2
-                className="cursor-pointer bg-primary-500 rounded-md ml-4"
+              <Button
+                variant="primary"
+                className="ml-4"
                 onClick={() => handleNext(index + 1)}
                 disabled={index >= uploadedFiles.length - 1}
                 aria-label="Next file"
@@ -289,7 +293,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 }
               >
                 <CareIcon icon="l-arrow-right" className="h-4 w-4" />
-              </ButtonV2>
+              </Button>
             )}
           </div>
           <div className="flex items-center justify-between">
@@ -330,9 +334,8 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                       false,
                     ],
                   ].map((button, index) => (
-                    <ButtonV2
-                      border
-                      ghost
+                    <Button
+                      variant="ghost"
                       key={index}
                       onClick={button[2] as () => void}
                       className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
@@ -345,7 +348,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                         />
                       )}
                       {button[0] as string}
-                    </ButtonV2>
+                    </Button>
                   ))}
                 </>
               )}
@@ -366,9 +369,8 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                       page === numPages,
                     ],
                   ].map((button, index) => (
-                    <ButtonV2
-                      border
-                      ghost
+                    <Button
+                      variant="ghost"
                       key={index}
                       onClick={button[2] as () => void}
                       className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
@@ -381,7 +383,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                         />
                       )}
                       {button[0] as string}
-                    </ButtonV2>
+                    </Button>
                   ))}
                 </>
               )}
diff --git a/src/components/Common/Menu.tsx b/src/components/Common/Menu.tsx
index aa647a3dedb..6568e5b143c 100644
--- a/src/components/Common/Menu.tsx
+++ b/src/components/Common/Menu.tsx
@@ -3,7 +3,7 @@ import { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { ButtonSize, ButtonVariant } from "@/components/Common/ButtonV2";
+import { buttonVariants } from "@/components/ui/button";
 
 import { useIsAuthorized } from "@/hooks/useIsAuthorized";
 
@@ -13,8 +13,6 @@ import { classNames } from "@/Utils/utils";
 interface DropdownMenuProps {
   id?: string;
   title: string;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
   icon?: JSX.Element | undefined;
   children: ReactNode | ReactNode[];
   disabled?: boolean | undefined;
@@ -23,11 +21,11 @@ interface DropdownMenuProps {
   containerClassName?: string | undefined;
 }
 
-export default function DropdownMenu({
-  variant = "primary",
-  size = "default",
-  ...props
-}: DropdownMenuProps) {
+/**
+ * @deprecated This component will be replaced with ShadCN's dropdown.
+ */
+
+export default function DropdownMenu({ ...props }: DropdownMenuProps) {
   return (
     <div
       id={props.id}
@@ -36,21 +34,13 @@ export default function DropdownMenu({
       <Menu as="div" className="relative inline-block w-full text-left">
         <MenuButton
           disabled={props.disabled}
-          className={`button-size-${size} button-${variant}-default button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500 lg:justify-between ${props.className}`}
+          className={`inline-flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500 lg:justify-between ${props.className} ${buttonVariants({ variant: "primary", size: "default" })}`}
         >
-          <div
-            className={classNames(
-              "flex items-center gap-2 whitespace-nowrap",
-              size === "small" ? "h-5" : "h-6",
-            )}
-          >
+          <div className="flex items-center gap-2 whitespace-nowrap h-6">
             {props.icon}
             {props.title || "Dropdown"}
           </div>
-          <CareIcon
-            icon="l-angle-down"
-            className={size === "small" ? "text-base" : "text-lg"}
-          />
+          <CareIcon icon="l-angle-down" className="text-lg" />
         </MenuButton>
 
         <MenuItems
@@ -71,14 +61,12 @@ type RawDivProps = DetailedHTMLProps<
 
 export type DropdownItemProps = RawDivProps &
   AuthorizedElementProps & {
-    variant?: ButtonVariant;
     icon?: ReactNode | undefined;
     disabled?: boolean | undefined;
   };
 
 export function DropdownItem({
   authorizeFor = Anyone,
-  variant = "primary",
   className,
   icon,
   children,
@@ -92,26 +80,12 @@ export function DropdownItem({
         {...props}
         className={classNames(
           "m-2 flex items-center justify-start gap-3 rounded border-0 px-4 py-2 text-sm font-normal transition-all duration-200 ease-in-out",
-          `dropdown-item-${variant}`,
+          `dropdown-item-primary`,
           isAuthorized ? "pointer-events-auto cursor-pointer" : "!hidden",
           className,
         )}
       >
-        <i
-          className={classNames(
-            "text-lg",
-            {
-              primary: "text-primary-500",
-              secondary: "text-secondary-500",
-              success: "text-success-500",
-              warning: "text-warning-500",
-              danger: "text-danger-500",
-              alert: "text-alert-500",
-            }[variant],
-          )}
-        >
-          {icon}
-        </i>
+        <i className="text-lg text-primary-500">{icon}</i>
         {children}
       </div>
     </MenuItem>
diff --git a/src/components/Common/Pagination.tsx b/src/components/Common/Pagination.tsx
index fb12ff66efa..6db267ed9c7 100644
--- a/src/components/Common/Pagination.tsx
+++ b/src/components/Common/Pagination.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
 
 import { statusType, useAbortableEffect } from "@/common/utils";
 
@@ -171,18 +171,17 @@ interface NavButtonProps {
 
 const NavButton = (props: NavButtonProps) => {
   return (
-    <ButtonV2
+    <Button
       id={props.id}
       disabled={props.disabled}
       onClick={props.onClick}
-      ghost={!props.selected}
-      variant={props.selected === undefined ? "secondary" : "primary"}
+      variant={props.selected ? "primary" : "secondary"}
       className="tooltip rounded-none text-sm font-bold"
     >
       {props.children}
       <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs font-normal">
         {props.tooltip}
       </span>
-    </ButtonV2>
+    </Button>
   );
 };
diff --git a/src/components/Common/UpdatableApp.tsx b/src/components/Common/UpdatableApp.tsx
index d27c778830f..c623c2c10a3 100644
--- a/src/components/Common/UpdatableApp.tsx
+++ b/src/components/Common/UpdatableApp.tsx
@@ -3,7 +3,7 @@ import { ReactNode, useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
 
 import { classNames } from "@/Utils/utils";
 
@@ -136,14 +136,9 @@ const UpdateAppPopup = ({ onUpdate }: UpdateAppPopupProps) => {
               A new version of CARE is available
             </p>
           </span>
-          <ButtonV2
-            disabled={isUpdating}
-            onClick={updateApp}
-            variant="alert"
-            className="bg-alert-500 enabled:hover:bg-alert-400"
-          >
+          <Button disabled={isUpdating} onClick={updateApp} variant="alert">
             {isUpdating ? "Updating..." : "Update"}
-          </ButtonV2>
+          </Button>
         </div>
       </Popover>
     </AlertTransition>
diff --git a/src/components/Facility/FacilityHome.tsx b/src/components/Facility/FacilityHome.tsx
index 7f33dec2b1b..3eba20f4765 100644
--- a/src/components/Facility/FacilityHome.tsx
+++ b/src/components/Facility/FacilityHome.tsx
@@ -190,7 +190,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
           </span>
         }
         action="Delete"
-        variant="danger"
+        variant="destructive"
         show={openDeleteDialog}
         onClose={handleDeleteClose}
         onConfirm={handleDeleteSubmit}
diff --git a/src/components/Files/CameraCaptureDialog.tsx b/src/components/Files/CameraCaptureDialog.tsx
index f81d854c559..0a9e3fc39ad 100644
--- a/src/components/Files/CameraCaptureDialog.tsx
+++ b/src/components/Files/CameraCaptureDialog.tsx
@@ -4,7 +4,8 @@ import Webcam from "react-webcam";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2, { Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import DialogModal from "@/components/Common/Dialog";
 
 import useBreakpoints from "@/hooks/useBreakpoints";
@@ -134,9 +135,13 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
       <div className="m-4 flex justify-evenly sm:hidden">
         <div>
           {!previewImage ? (
-            <ButtonV2 onClick={handleSwitchCamera} className="m-2">
+            <Button
+              variant="primary"
+              onClick={handleSwitchCamera}
+              className="m-2"
+            >
               {t("switch")}
-            </ButtonV2>
+            </Button>
           ) : (
             <></>
           )}
@@ -145,20 +150,22 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
           {!previewImage ? (
             <>
               <div>
-                <ButtonV2
+                <Button
+                  variant="primary"
                   onClick={() => {
                     captureImage();
                   }}
                   className="m-2"
                 >
                   {t("capture")}
-                </ButtonV2>
+                </Button>
               </div>
             </>
           ) : (
             <>
               <div className="flex space-x-2">
-                <ButtonV2
+                <Button
+                  variant="primary"
                   onClick={() => {
                     setPreviewImage(null);
                     onResetCapture();
@@ -166,8 +173,9 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                   className="m-2"
                 >
                   {t("retake")}
-                </ButtonV2>
-                <Submit
+                </Button>
+                <Button
+                  variant="primary"
                   onClick={() => {
                     setPreviewImage(null);
                     onHide();
@@ -175,14 +183,14 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                   className="m-2"
                 >
                   {t("submit")}
-                </Submit>
+                </Button>
               </div>
             </>
           )}
         </div>
         <div className="sm:flex-1">
-          <ButtonV2
-            variant="secondary"
+          <Button
+            variant="outline"
             onClick={() => {
               setPreviewImage(null);
               onResetCapture();
@@ -191,16 +199,16 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
             className="m-2"
           >
             {t("close")}
-          </ButtonV2>
+          </Button>
         </div>
       </div>
       {/* buttons for laptop screens */}
       <div className={`${isLaptopScreen ? " " : "hidden"}`}>
         <div className="m-4 flex lg:hidden">
-          <ButtonV2 onClick={handleSwitchCamera}>
+          <Button variant="primary" onClick={handleSwitchCamera}>
             <CareIcon icon="l-camera-change" className="text-lg" />
             {`${t("switch")} ${t("camera")}`}
-          </ButtonV2>
+          </Button>
         </div>
 
         <div className="flex justify-end gap-2 p-4">
@@ -208,42 +216,45 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
             {!previewImage ? (
               <>
                 <div>
-                  <ButtonV2
+                  <Button
+                    variant="primary"
                     onClick={() => {
                       captureImage();
                     }}
                   >
                     <CareIcon icon="l-capture" className="text-lg" />
                     {t("capture")}
-                  </ButtonV2>
+                  </Button>
                 </div>
               </>
             ) : (
               <>
                 <div className="flex space-x-2">
-                  <ButtonV2
+                  <Button
+                    variant="primary"
                     onClick={() => {
                       setPreviewImage(null);
                       onResetCapture();
                     }}
                   >
                     {t("retake")}
-                  </ButtonV2>
-                  <Submit
+                  </Button>
+                  <Button
+                    variant="primary"
                     onClick={() => {
                       onHide();
                       setPreviewImage(null);
                     }}
                   >
                     {t("submit")}
-                  </Submit>
+                  </Button>
                 </div>
               </>
             )}
           </div>
           <div className="sm:flex-1" />
-          <ButtonV2
-            variant="secondary"
+          <Button
+            variant="outline"
             onClick={() => {
               setPreviewImage(null);
               onResetCapture();
@@ -251,7 +262,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
             }}
           >
             {`${t("close")} ${t("camera")}`}
-          </ButtonV2>
+          </Button>
         </div>
       </div>
     </DialogModal>
diff --git a/src/components/Files/FileBlock.tsx b/src/components/Files/FileBlock.tsx
index 5015a67e2e1..46b6f680889 100644
--- a/src/components/Files/FileBlock.tsx
+++ b/src/components/Files/FileBlock.tsx
@@ -3,7 +3,8 @@ import { t } from "i18next";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import { FileUploadModel } from "@/components/Patient/models";
 
 import { FileManagerResult } from "@/hooks/useFileManager";
@@ -90,35 +91,37 @@ export default function FileBlock(props: FileBlockProps) {
         )}
         {!file.is_archived &&
           (fileManager.isPreviewable(file) ? (
-            <ButtonV2
+            <Button
+              variant={"secondary"}
               onClick={() => fileManager.viewFile(file, associating_id)}
               className="w-full md:w-auto"
             >
               <CareIcon icon="l-eye" />
               {t("view")}
-            </ButtonV2>
+            </Button>
           ) : (
-            <ButtonV2
+            <Button
+              variant={"secondary"}
               onClick={() => fileManager.downloadFile(file, associating_id)}
               className="w-full md:w-auto"
             >
               <CareIcon icon="l-arrow-circle-down" />
               {t("download")}
-            </ButtonV2>
+            </Button>
           ))}
         <div className="inline-flex w-full gap-2 md:w-auto">
           {!file.is_archived && editable && (
-            <ButtonV2
+            <Button
               variant={"secondary"}
               onClick={() => fileManager.editFile(file, associating_id)}
               className="flex-1 md:flex-auto"
             >
               <CareIcon icon={"l-pen"} />
               {t("rename")}
-            </ButtonV2>
+            </Button>
           )}
           {(file.is_archived || editable) && archivable && (
-            <ButtonV2
+            <Button
               variant={file.is_archived ? "primary" : "secondary"}
               onClick={() => fileManager.archiveFile(file, associating_id)}
               className="flex-1 md:flex-auto"
@@ -127,7 +130,7 @@ export default function FileBlock(props: FileBlockProps) {
                 icon={file.is_archived ? "l-info-circle" : "l-archive"}
               />
               {file.is_archived ? t("more_info") : t("archive")}
-            </ButtonV2>
+            </Button>
           )}
         </div>
       </div>
diff --git a/src/components/Files/FileUpload.tsx b/src/components/Files/FileUpload.tsx
index e28c99ce513..7a4798c5320 100644
--- a/src/components/Files/FileUpload.tsx
+++ b/src/components/Files/FileUpload.tsx
@@ -1,10 +1,12 @@
+import { Loader2 } from "lucide-react";
 import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import Pagination from "@/components/Common/Pagination";
 import Tabs from "@/components/Common/Tabs";
 import FileBlock from "@/components/Files/FileBlock";
@@ -291,25 +293,30 @@ export const FileUpload = (props: FileUploadProps) => {
                       error={fileUpload.error || undefined}
                     />
                     <div className="flex items-center gap-2">
-                      <ButtonV2
+                      <Button
+                        variant="outline_primary"
                         onClick={() =>
                           fileUpload.handleFileUpload(associatedId)
                         }
-                        loading={fileUpload.uploading}
-                        className="w-full"
+                        disabled={fileUpload.uploading} // Disable the button when loading
+                        className={`w-full ${fileUpload.uploading ? "opacity-50" : ""}`}
                         id="upload_file_button"
                       >
-                        <CareIcon icon="l-check" className="" />
+                        {fileUpload.uploading ? (
+                          <Loader2 className="animate-spin mr-2" size={16} />
+                        ) : (
+                          <CareIcon icon="l-check" className="" />
+                        )}
                         {t("upload")}
-                      </ButtonV2>
-                      <ButtonV2
-                        variant="danger"
+                      </Button>
+                      <Button
+                        variant="destructive"
                         onClick={fileUpload.clearFiles}
                         disabled={fileUpload.uploading}
                       >
                         <CareIcon icon="l-trash-alt" className="" />
                         {t("discard")}
-                      </ButtonV2>
+                      </Button>
                     </div>
                     {!!fileUpload.progress && (
                       <LinearProgressWithLabel value={fileUpload.progress} />
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 97f424f69d7..38a4cb0818b 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import { FieldValidator } from "@/components/Form/FieldValidators";
 import {
   FormContextValue,
@@ -142,19 +143,20 @@ const Form = <T extends FormDetails>({
           {(!hideCancelButton || !hideSubmitButton) && (
             <div className="flex flex-col-reverse justify-end gap-3 sm:flex-row">
               {!hideCancelButton && (
-                <Cancel
-                  onClick={handleCancel}
-                  label={props.cancelLabel ?? "Cancel"}
-                />
+                <Button type="button" variant="outline" onClick={handleCancel}>
+                  {props.cancelLabel ?? "Cancel"}
+                </Button>
               )}
               {!hideSubmitButton && (
-                <Submit
+                <Button
+                  variant="primary"
                   data-testid="submit-button"
                   type="submit"
                   disabled={disabled}
-                  label={props.submitLabel ?? "Submit"}
                   className={props?.submitButtonClassName}
-                />
+                >
+                  {props.submitLabel ?? "Submit"}
+                </Button>
               )}
             </div>
           )}
diff --git a/src/components/Patient/PatientConsentRecordBlock.tsx b/src/components/Patient/PatientConsentRecordBlock.tsx
index f46648c0bae..0378ba95819 100644
--- a/src/components/Patient/PatientConsentRecordBlock.tsx
+++ b/src/components/Patient/PatientConsentRecordBlock.tsx
@@ -1,6 +1,8 @@
+import { t } from "i18next";
 import { useEffect, useState } from "react";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import { PatientConsentModel } from "@/components/Facility/models";
 import FileBlock from "@/components/Files/FileBlock";
 import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
@@ -86,15 +88,16 @@ export default function PatientConsentRecordBlockGroup(props: {
             required
             error="Please select a patient code status type"
           />
-          <ButtonV2
+          <Button
+            variant="primary"
             onClick={() => {
               handlePCSUpdate(patientCodeStatus);
             }}
             disabled={patientCodeStatus === consentRecord.patient_code_status}
             className="h-[46px]"
           >
-            Update
-          </ButtonV2>
+            {t("update")}
+          </Button>
         </div>
       )}
       {files?.map((file: FileUploadModel, i: number) => (
diff --git a/src/components/Patient/PatientConsentRecords.tsx b/src/components/Patient/PatientConsentRecords.tsx
index 55ced7435ed..7d33487c730 100644
--- a/src/components/Patient/PatientConsentRecords.tsx
+++ b/src/components/Patient/PatientConsentRecords.tsx
@@ -1,9 +1,10 @@
 import { t } from "i18next";
+import { Loader2 } from "lucide-react";
 import { useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button, buttonVariants } from "@/components//ui/button";
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import Page from "@/components/Common/Page";
 import Tabs from "@/components/Common/Tabs";
@@ -126,7 +127,7 @@ export default function PatientConsentRecords(props: {
           setShowPCSChangeModal(null);
         }}
         action="Change Patient Code Status"
-        variant="danger"
+        variant="destructive"
         description={`Consent records exist with the "${CONSENT_PATIENT_CODE_STATUS_CHOICES.find((c) => consentRecords?.find((c) => c.type === 2 && !c.archived)?.patient_code_status === c.id)?.text}" patient code status. Adding a new record for a different type will archive the existing records. Are you sure you want to proceed?`}
         title="Archive Previous Records"
         className="w-auto"
@@ -177,7 +178,8 @@ export default function PatientConsentRecords(props: {
           <div className="flex gap-2">
             {fileUpload.files[0] ? (
               <>
-                <ButtonV2
+                <Button
+                  variant="primary"
                   onClick={() => {
                     const diffPCS = consentRecords?.find(
                       (record) =>
@@ -193,31 +195,33 @@ export default function PatientConsentRecords(props: {
                       handleUpload();
                     }
                   }}
-                  loading={fileUpload.uploading}
                   disabled={
-                    newConsent.type === 2 &&
-                    newConsent.patient_code_status === 0
+                    fileUpload.uploading ||
+                    (newConsent.type === 2 &&
+                      newConsent.patient_code_status === 0)
                   }
-                  className="flex-1"
+                  className={`flex-1 ${fileUpload.uploading ? "opacity-50" : ""}`}
                 >
-                  <CareIcon icon="l-check" className="mr-2" />
-                  Upload
-                </ButtonV2>
-                <ButtonV2
-                  variant="danger"
+                  {fileUpload.uploading ? (
+                    <Loader2 className="animate-spin mr-2" size={16} />
+                  ) : (
+                    <CareIcon icon="l-check" className="mr-2" />
+                  )}
+                  {t("upload")}
+                </Button>
+                <Button
+                  variant="destructive"
                   onClick={fileUpload.clearFiles}
                   disabled={fileUpload.uploading}
                 >
                   <CareIcon icon="l-trash" className="text-lg" />
                   <span>{t("delete")}</span>
-                </ButtonV2>
+                </Button>
               </>
             ) : (
               <>
                 <label
-                  className={
-                    "button-size-default button-shape-square button-primary-default inline-flex h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out"
-                  }
+                  className={`${buttonVariants({ variant: "primary", size: "default" })} inline-flex h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out`}
                 >
                   <CareIcon icon={"l-file-upload-alt"} className="text-lg" />
                   {t("choose_file")}
diff --git a/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx b/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx
index eb218a1aac2..c6719b4ab8b 100644
--- a/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx
+++ b/src/components/Patient/PatientDetailsTab/EncounterHistory.tsx
@@ -24,7 +24,7 @@ const EncounterHistory = (props: PatientProps) => {
       query={{ patient: id }}
       perPage={5}
     >
-      {(_) => (
+      {() => (
         <div className="mt-8">
           <PaginatedList.WhenLoading>
             <CircularProgress />
diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 989b3ed0ac3..8b0f1bf3790 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -103,7 +103,7 @@ function AddUserSheet({ patientId }: AddUserSheetProps) {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button>
+        <Button variant="outline_primary">
           <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
           {t("assign_user")}
         </Button>
diff --git a/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx b/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx
index 558b66b8de3..0cddd924e66 100644
--- a/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx
+++ b/src/components/Patient/PatientDetailsTab/ResourceRequests.tsx
@@ -60,6 +60,7 @@ export const ResourceRequests = (props: PatientProps) => {
           {t("resource_requests")}
         </h2>
         <Button
+          variant="outline_primary"
           onClick={() =>
             navigate(
               `/facility/${facilityId}/resource/new?related_patient=${patientData.id}`,
diff --git a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
index d3a2a549438..b4a2447d841 100644
--- a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
+++ b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
@@ -21,11 +21,14 @@ export const Updates = (props: PatientProps) => {
     <div className="mt-4 px-3 md:px-0">
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-2xl font-semibold leading-tight">{t("updates")}</h2>
-        <Link
-          href={`/facility/${facilityId}/patient/${patientId}/questionnaire`}
-        >
-          <Button>Add Patient Updates</Button>
-        </Link>
+        <Button asChild variant="outline_primary">
+          <Link
+            href={`/facility/${facilityId}/patient/${patientId}/questionnaire`}
+          >
+            <CareIcon icon="l-plus" className="mr-2" />
+            {t("add_patient_updates")}
+          </Link>
+        </Button>
       </div>
 
       <PaginatedList
diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx
index 1f149b82365..f2e0ea7f737 100644
--- a/src/components/Patient/PatientHome.tsx
+++ b/src/components/Patient/PatientHome.tsx
@@ -161,7 +161,7 @@ export const PatientHome = (props: {
                         (!patientData?.last_consultation ||
                           patientData?.last_consultation?.discharge_date) && (
                           <div>
-                            <ButtonV2
+                            <Button
                               id="create-consultation"
                               className="w-full"
                               size="default"
@@ -178,7 +178,7 @@ export const PatientHome = (props: {
                                 />
                                 {t("add_consultation")}
                               </span>
-                            </ButtonV2>
+                            </Button>
                           </div>
                         )} */}
                     </div>
@@ -250,7 +250,7 @@ export const PatientHome = (props: {
 
                     {/* {NonReadOnlyUsers && (
                       <div>
-                        <ButtonV2
+                        <Button
                           id="assign-volunteer"
                           onClick={() => setOpenAssignVolunteerDialog(true)}
                           disabled={false}
@@ -264,7 +264,7 @@ export const PatientHome = (props: {
                               ? t("update_volunteer")
                               : t("assign_to_volunteer")}
                           </span>
-                        </ButtonV2>
+                        </Button>
                       </div>
                     )} */}
                   </div>
diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx
index afdd9d1e92b..64b3480f925 100644
--- a/src/components/Patient/PatientIndex.tsx
+++ b/src/components/Patient/PatientIndex.tsx
@@ -156,7 +156,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
   return (
     <div>
       <div className="container max-w-5xl mx-auto py-6">
-        <div className="flex justify-end">
+        <div className="flex justify-center md:justify-end">
           <AddPatientButton />
         </div>
         <div className="space-y-6 mt-6">
diff --git a/src/components/Resource/ResourceCommentSection.tsx b/src/components/Resource/ResourceCommentSection.tsx
index 8b80bd6a27a..777284b7c7f 100644
--- a/src/components/Resource/ResourceCommentSection.tsx
+++ b/src/components/Resource/ResourceCommentSection.tsx
@@ -2,7 +2,8 @@ import { useState } from "react";
 
 import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import CircularProgress from "@/components/Common/CircularProgress";
 import TextAreaFormField from "@/components/Form/FormFields/TextAreaFormField";
 
@@ -51,14 +52,15 @@ const CommentSection = (props: { id: string }) => {
           />
 
           <div className="flex w-full justify-end">
-            <ButtonV2
+            <Button
+              variant="primary"
               onClick={async () => {
                 await onSubmitComment();
                 query.refetch();
               }}
             >
               Post Your Comment
-            </ButtonV2>
+            </Button>
           </div>
           <div className="w-full">
             <div>
diff --git a/src/components/Resource/ResourceCreate.tsx b/src/components/Resource/ResourceCreate.tsx
index d8c7e25ea97..e0f199af7ad 100644
--- a/src/components/Resource/ResourceCreate.tsx
+++ b/src/components/Resource/ResourceCreate.tsx
@@ -6,7 +6,8 @@ import { useTranslation } from "react-i18next";
 import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import { FacilitySelect } from "@/components/Common/FacilitySelect";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
@@ -316,8 +317,12 @@ export default function ResourceCreate(props: resourceProps) {
         />
 
         <div className="mt-4 flex flex-col justify-end gap-2 md:col-span-2 md:flex-row">
-          <Cancel onClick={() => goBack()} />
-          <Submit onClick={handleSubmit} />
+          <Button type="button" variant="outline" onClick={() => goBack()}>
+            {t("cancel")}
+          </Button>
+          <Button type="submit" variant="primary" onClick={handleSubmit}>
+            {t("submit")}
+          </Button>
         </div>
       </Card>
     </Page>
diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx
index e78f002e8a0..edeb252d7e0 100644
--- a/src/components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/components/Resource/ResourceDetailsUpdate.tsx
@@ -1,9 +1,11 @@
+import { t } from "i18next";
 import { navigate, useQueryParams } from "raviger";
 import { useReducer, useState } from "react";
 
 import Card from "@/CAREUI/display/Card";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import CircularProgress from "@/components/Common/CircularProgress";
 import { FacilitySelect } from "@/components/Common/FacilitySelect";
 import Loading from "@/components/Common/Loading";
@@ -280,8 +282,12 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
             </div>
 
             <div className="mt-4 flex flex-col justify-between gap-2 md:col-span-2 md:flex-row">
-              <Cancel variant="secondary" onClick={() => goBack()} />
-              <Submit onClick={handleSubmit} />
+              <Button type="button" variant="outline" onClick={() => goBack()}>
+                {t("cancel")}
+              </Button>
+              <Button type="submit" variant="primary" onClick={handleSubmit}>
+                {t("submit")}
+              </Button>
             </div>
           </div>
         </Card>
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index f2f663184c8..bdcf0929701 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -1,10 +1,10 @@
 import { Link, navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
-import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
 import { ExportButton } from "@/components/Common/Export";
@@ -90,34 +90,38 @@ export default function ListView() {
               {resource.status === "TRANSPORTATION TO BE ARRANGED" ? (
                 <dt
                   title={t("resource_status")}
-                  className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center  overflow-hidden whitespace-nowrap text-ellipsis truncate"
+                  className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center overflow-hidden whitespace-nowrap text-ellipsis truncate"
                 >
-                  <Chip
-                    size="small"
+                  <Badge
                     variant="secondary"
-                    startIcon="l-truck"
-                    text={t(`${resource.status}`)}
                     className="text-lg font-bold text-sky-600 truncate bg-gray-300 rounded-full uppercase text-center"
-                  />
+                  >
+                    <span className="mr-1">
+                      <CareIcon icon="l-truck" />
+                    </span>
+                    {t(`${resource.status}`)}
+                  </Badge>
                 </dt>
               ) : (
                 <dt
                   title={t("resource_status")}
-                  className="w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full  leading-4"
+                  className="w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full leading-4"
                 >
-                  <Chip
-                    size="small"
+                  <Badge
                     variant={
                       resource.status === "APPROVED" ? "primary" : "secondary"
                     }
-                    startIcon="l-truck"
-                    text={t(`${resource.status}`)}
                     className={`text-lg font-bold rounded-full uppercase ${
                       resource.status === "APPROVED"
                         ? "bg-sky-200"
-                        : "bg-yellow-200 "
+                        : "bg-yellow-200"
                     }`}
-                  />
+                  >
+                    <span className="mr-1">
+                      <CareIcon icon="l-truck" />
+                    </span>
+                    {t(`${resource.status}`)}
+                  </Badge>
                 </dt>
               )}
 
diff --git a/src/components/Users/ConfirmFacilityModal.tsx b/src/components/Users/ConfirmFacilityModal.tsx
index 289e576aa54..851f685fbb9 100644
--- a/src/components/Users/ConfirmFacilityModal.tsx
+++ b/src/components/Users/ConfirmFacilityModal.tsx
@@ -69,7 +69,7 @@ const ConfirmFacilityModal = ({
       action={action}
       onClose={handleCancel}
       onConfirm={handleOk}
-      variant="danger"
+      variant="destructive"
     >
       <div className="flex leading-relaxed text-secondary-800">{body}</div>
     </ConfirmDialog>
diff --git a/src/components/Users/UnlinkFacilityDialog.tsx b/src/components/Users/UnlinkFacilityDialog.tsx
index ff729150fbf..f0ba9c65704 100644
--- a/src/components/Users/UnlinkFacilityDialog.tsx
+++ b/src/components/Users/UnlinkFacilityDialog.tsx
@@ -32,7 +32,7 @@ const UnlinkFacilityDialog = (props: ConfirmDialogProps) => {
       onClose={handleCancel}
       onConfirm={handleSubmit}
       disabled={disable}
-      variant="danger"
+      variant="destructive"
     >
       <div className="flex leading-relaxed text-secondary-800">
         <div>
diff --git a/src/components/Users/UserAvatar.tsx b/src/components/Users/UserAvatar.tsx
index 74bd0789d35..e6493e526ca 100644
--- a/src/components/Users/UserAvatar.tsx
+++ b/src/components/Users/UserAvatar.tsx
@@ -2,9 +2,11 @@ import careConfig from "@careConfig";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { Button } from "@/components/ui/button";
+import { TooltipComponent } from "@/components/ui/tooltip";
+
 import { Avatar } from "@/components/Common/Avatar";
 import AvatarEditModal from "@/components/Common/AvatarEditModal";
-import ButtonV2 from "@/components/Common/ButtonV2";
 import Loading from "@/components/Common/Loading";
 
 import useAuthUser from "@/hooks/useAuthUser";
@@ -99,21 +101,32 @@ export default function UserAvatar({
               className="h-20 w-20"
             />
             <div className="my-4 ml-4 flex flex-col gap-2">
-              <ButtonV2
-                onClick={(_) => setEditAvatar(!editAvatar)}
-                type="button"
-                id="change-avatar"
-                className="border border-gray-200 bg-gray-50 text-black hover:bg-gray-100"
-                shadow={false}
-                disabled={!showAvatarEdit(authUser, userData)}
-                tooltip={
-                  !showAvatarEdit(authUser, userData)
-                    ? t("edit_avatar_permission_error")
-                    : undefined
-                }
-              >
-                {t("change_avatar")}
-              </ButtonV2>
+              {!showAvatarEdit(authUser, userData) ? (
+                <TooltipComponent
+                  content={t("edit_avatar_permission_error")}
+                  className="w-full"
+                >
+                  <Button
+                    variant="white"
+                    onClick={() => setEditAvatar(!editAvatar)}
+                    type="button"
+                    id="change-avatar"
+                    disabled
+                  >
+                    {t("change_avatar")}
+                  </Button>
+                </TooltipComponent>
+              ) : (
+                <Button
+                  variant="white"
+                  onClick={() => setEditAvatar(!editAvatar)}
+                  type="button"
+                  id="change-avatar"
+                >
+                  {t("change_avatar")}
+                </Button>
+              )}
+
               <p className="text-xs leading-5 text-gray-500">
                 {t("change_avatar_note")}
               </p>
diff --git a/src/components/Users/UserDeleteDialog.tsx b/src/components/Users/UserDeleteDialog.tsx
index 665b2ef0b4a..5a2becefe3d 100644
--- a/src/components/Users/UserDeleteDialog.tsx
+++ b/src/components/Users/UserDeleteDialog.tsx
@@ -16,7 +16,7 @@ const UserDeleteDialog = (props: ConfirmDialogProps) => {
         </span>
       }
       action="Delete"
-      variant="danger"
+      variant="destructive"
       show
       onConfirm={props.handleOk}
       onClose={props.handleCancel}
diff --git a/src/components/Users/UserResetPassword.tsx b/src/components/Users/UserResetPassword.tsx
index 5807ecd129b..2ceae7314ae 100644
--- a/src/components/Users/UserResetPassword.tsx
+++ b/src/components/Users/UserResetPassword.tsx
@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Button } from "@/components/ui/button";
+
 import Form from "@/components/Form/Form";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
 import { validateRule } from "@/components/Users/UserFormValidations";
@@ -13,8 +15,6 @@ import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import { UserBase } from "@/types/user/user";
 
-import ButtonV2 from "../Common/ButtonV2";
-
 interface PasswordForm {
   username: string;
   old_password: string;
@@ -192,16 +192,18 @@ export default function UserResetPassword({
 
   const editButton = () => (
     <div className="mb-4 flex justify-start">
-      <ButtonV2
+      <Button
+        variant="outline_primary"
         onClick={() => setIsEditing(!isEditing)}
         type="button"
         id="change-edit-password-button"
-        className="flex items-center gap-2 rounded-sm border border-gray-100 bg-white px-3 py-1.5 text-sm text-[#009D48] shadow-sm hover:bg-gray-50"
-        shadow={false}
       >
-        <CareIcon icon={isEditing ? "l-times" : "l-edit"} className="h-4 w-4" />
+        <CareIcon
+          icon={isEditing ? "l-times" : "l-edit"}
+          className="h-4 w-4 ml-2"
+        />
         {isEditing ? t("cancel") : t("change_password")}
-      </ButtonV2>
+      </Button>
     </div>
   );
 
diff --git a/src/components/Users/UserSummary.tsx b/src/components/Users/UserSummary.tsx
index 870c5f19739..397396abc8e 100644
--- a/src/components/Users/UserSummary.tsx
+++ b/src/components/Users/UserSummary.tsx
@@ -3,8 +3,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
+import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
 import LanguageSelector from "@/components/Common/LanguageSelector";
 import UserColumns from "@/components/Common/UserColumns";
 import UserAvatar from "@/components/Users/UserAvatar";
@@ -29,6 +29,8 @@ import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import { UserBase } from "@/types/user/user";
 
+import { Button } from "../ui/button";
+
 export default function UserSummaryTab({
   userData,
   refetchUserData,
@@ -172,17 +174,20 @@ export default function UserSummaryTab({
               </div>
             </div>
             <div className="w-3/4">
-              <ButtonV2
-                authorizeFor={() => deletePermitted}
-                onClick={() => setshowDeleteDialog(true)}
-                variant="danger"
-                data-testid="user-delete-button"
-                className="my-1 inline-flex"
-                disabled={isDeleting}
-              >
-                <CareIcon icon="l-trash" className="h-4" />
-                <span className="">{t("delete_account_btn")}</span>
-              </ButtonV2>
+              <AuthorizedChild authorizeFor={() => deletePermitted}>
+                {({ isAuthorized }) => (
+                  <Button
+                    onClick={() => setshowDeleteDialog(true)}
+                    variant="destructive"
+                    data-testid="user-delete-button"
+                    className="my-1 inline-flex"
+                    disabled={isDeleting || !isAuthorized}
+                  >
+                    <CareIcon icon="l-trash" className="h-4" />
+                    <span className="">{t("delete_account_btn")}</span>
+                  </Button>
+                )}
+              </AuthorizedChild>
             </div>
           </div>
         )}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 60973469121..b794b6a99fb 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -28,6 +28,10 @@ const buttonVariants = cva(
           "text-white border border-primary-900 rounded-lg font-medium relative overflow-hidden bg-gradient-to-b from-primary-700 to-primary-800 hover:from-primary-800 hover:to-primary-900 shadow-lg",
         white:
           "bg-white border border-secondary-400 text-gray-900 shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
+        warning:
+          "bg-warning-100 text-warning-900 border border-warning-300 shadow-sm hover:bg-warning-100/80 dark:bg-warning-900 dark:text-warning-50 dark:hover:bg-warning-900/80",
+        alert:
+          "bg-alert-100 text-alert-900 border border-alert-300 shadow-sm hover:bg-alert-100/80 dark:bg-alert-900 dark:text-alert-50 dark:hover:bg-alert-900/80",
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -44,6 +48,19 @@ const buttonVariants = cva(
   },
 );
 
+export type ButtonVariant =
+  | "primary"
+  | "outline"
+  | "secondary"
+  | "destructive"
+  | "primary_gradient"
+  | "ghost"
+  | "link"
+  | "white"
+  | "alert"
+  | "warning"
+  | "outline_primary";
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
diff --git a/src/hooks/useFileManager.tsx b/src/hooks/useFileManager.tsx
index b1efeaf5082..3c1660e3674 100644
--- a/src/hooks/useFileManager.tsx
+++ b/src/hooks/useFileManager.tsx
@@ -1,9 +1,11 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { t } from "i18next";
 import { useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import DialogModal from "@/components/Common/Dialog";
 import FilePreviewDialog from "@/components/Common/FilePreviewDialog";
 import { StateInterface } from "@/components/Files/FileUpload";
@@ -306,8 +308,16 @@ export default function useFileManager(
             />
           </div>
           <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
-            <Cancel onClick={() => setArchiveDialogueOpen(null)} />
-            <Submit disabled={archiving} label="Proceed" />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setArchiveDialogueOpen(null)}
+            >
+              {t("cancel")}
+            </Button>
+            <Button type="submit" variant="primary" disabled={archiving}>
+              {t("proceed")}
+            </Button>
           </div>
         </form>
       </DialogModal>
@@ -384,7 +394,13 @@ export default function useFileManager(
           ))}
         </div>
         <div className="mt-10 flex justify-end">
-          <Cancel onClick={(_) => setArchiveDialogueOpen(null)} />
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setArchiveDialogueOpen(null)}
+          >
+            {t("cancel")}
+          </Button>
         </div>
       </DialogModal>
       <DialogModal
@@ -425,15 +441,24 @@ export default function useFileManager(
             />
           </div>
           <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
-            <Cancel onClick={() => setEditDialogueOpen(null)} />
-            <Submit
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setEditDialogueOpen(null)}
+            >
+              {t("cancel")}
+            </Button>
+            <Button
+              type="submit"
+              variant="primary"
               disabled={
                 editing === true ||
                 editDialogueOpen?.name === "" ||
                 editDialogueOpen?.name?.length === 0
               }
-              label="Proceed"
-            />
+            >
+              {t("proceed")}
+            </Button>
           </div>
         </form>
       </DialogModal>
diff --git a/src/pages/Encounters/tabs/EncounterFeedTab.tsx b/src/pages/Encounters/tabs/EncounterFeedTab.tsx
index 5f5a75ee210..648ab9159fe 100644
--- a/src/pages/Encounters/tabs/EncounterFeedTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterFeedTab.tsx
@@ -14,7 +14,6 @@
 // import useOperateCamera, {
 //   PTZPayload,
 // } from "@/components/CameraFeed/useOperateCamera";
-// import ButtonV2 from "@/components/Common/ButtonV2";
 // import ConfirmDialog from "@/components/Common/ConfirmDialog";
 // import Loading from "@/components/Common/Loading";
 // import { ConsultationTabProps } from "@/components/Facility/ConsultationDetails/index";
@@ -226,7 +225,7 @@
 //                     className="animate-spin text-base text-zinc-300 md:mx-2"
 //                   />
 //                 ) : (
-//                   <ButtonV2
+//                   <Button
 //                     size="small"
 //                     variant="secondary"
 //                     disabled={cannotSaveToPreset}
@@ -243,7 +242,7 @@
 //                     onClick={() => setShowPresetSaveConfirmation(true)}
 //                   >
 //                     <CareIcon icon="l-save" className="text-lg" />
-//                   </ButtonV2>
+//                   </Button>
 //                 )}
 //               </>
 //             ) : (
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index 38baf3787d1..9efa21e64ae 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -62,7 +62,7 @@ export default function FacilityOrganizationIndex({
   if (!data?.results?.length) {
     return (
       <Page title="Organizations">
-        <div className="flex justify-end mb-4">
+        <div className="flex justify-center md:justify-end mt-2 mb-4">
           <CreateFacilityOrganizationSheet facilityId={facilityId} />
         </div>
         <Card className="border-dashed">
@@ -90,7 +90,7 @@ export default function FacilityOrganizationIndex({
 
   return (
     <Page title="Facility Organizations" hideBack={true}>
-      <div className="flex justify-end mb-4">
+      <div className="flex justify-center md:justify-end mt-2 mb-4">
         <CreateFacilityOrganizationSheet facilityId={facilityId} />
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-4">
diff --git a/src/pages/FacilityOrganization/components/CreateFacilityOrganizationSheet.tsx b/src/pages/FacilityOrganization/components/CreateFacilityOrganizationSheet.tsx
index 4e45160b495..6350a613622 100644
--- a/src/pages/FacilityOrganization/components/CreateFacilityOrganizationSheet.tsx
+++ b/src/pages/FacilityOrganization/components/CreateFacilityOrganizationSheet.tsx
@@ -93,7 +93,7 @@ export default function CreateFacilityOrganizationSheet({
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button>
+        <Button variant="primary_gradient">
           <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
           Create Organization
         </Button>
diff --git a/src/style/CAREUI.css b/src/style/CAREUI.css
index e65c2c5554e..893d16c2e4e 100644
--- a/src/style/CAREUI.css
+++ b/src/style/CAREUI.css
@@ -99,69 +99,12 @@
     @apply h-full md:h-[300px] w-full
 }
 
-.button-primary-default { @apply accent-primary-500 bg-primary-500 hover:bg-primary-400 text-white !important }
-.button-primary-ghost { @apply accent-primary-500 hover:bg-primary-100 text-primary-500 !important }
-.button-primary-border { @apply border border-primary-500 }
-
-.button-secondary-default { @apply accent-secondary-200 bg-white hover:bg-secondary-200 text-secondary-800 !important }
-.button-secondary-ghost { @apply accent-secondary-300 hover:bg-secondary-400 text-secondary-700 !important }
-.button-secondary-border { @apply border border-secondary-300 }
-
-.button-danger-default { @apply accent-danger-500 bg-danger-500 hover:bg-danger-400 text-white !important }
-.button-danger-ghost { @apply accent-danger-500 hover:bg-danger-100 text-danger-500 !important }
-.button-danger-border { @apply border border-danger-500 }
-
-.button-warning-default { @apply accent-warning-500 bg-warning-500 hover:bg-warning-400 text-white !important }
-.button-warning-ghost { @apply accent-warning-500 hover:bg-warning-100 text-warning-500 !important }
-.button-warning-border { @apply border border-warning-500 }
-
-.button-alert-default { @apply accent-alert-600 bg-alert-600 hover:bg-alert-500 text-white !important }
-.button-alert-ghost { @apply accent-alert-600 hover:bg-alert-100 text-alert-600 !important }
-.button-alert-border { @apply border border-alert-600 }
-
-.button-shape-square { @apply rounded }
-.button-shape-circle { @apply rounded-full }
-
-.button-size-small { @apply px-2 py-1 text-xs }
-.button-size-default { @apply py-2 px-4 text-sm }
-.button-size-large { @apply py-3 px-5 text-base }
-
 .dropdown-item-primary { @apply accent-primary-500 hover:bg-primary-100 text-black hover:text-primary-500 }
 .dropdown-item-secondary { @apply accent-secondary-200 hover:bg-secondary-200 text-secondary-700 }
 .dropdown-item-danger { @apply accent-danger-500 hover:bg-danger-100 text-danger-500 }
 .dropdown-item-warning { @apply accent-warning-500 hover:bg-warning-100 text-warning-500 }
 .dropdown-item-alert { @apply accent-alert-600 hover:bg-alert-100 text-alert-600 }
 
-a.button-primary-default { @apply hover:bg-primary-400 }
-a.button-primary-ghost { @apply hover:bg-primary-100 }
-
-a.button-secondary-default { @apply hover:bg-secondary-200 }
-a.button-secondary-ghost { @apply hover:bg-secondary-100 }
-
-a.button-danger-default { @apply hover:bg-danger-400 }
-a.button-danger-ghost { @apply hover:bg-danger-100 }
-
-a.button-warning-default { @apply hover:bg-warning-400 }
-a.button-warning-ghost { @apply hover:bg-warning-100 }
-
-a.button-alert-default { @apply hover:bg-alert-500 }
-a.button-alert-ghost { @apply hover:bg-alert-100 }
-
-button.button-primary-default { @apply enabled:hover:bg-primary-400 }
-button.button-primary-ghost { @apply enabled:hover:bg-primary-100 }
-
-button.button-secondary-default { @apply enabled:hover:bg-secondary-200 }
-button.button-secondary-ghost { @apply enabled:hover:bg-secondary-100 }
-
-button.button-danger-default { @apply enabled:hover:bg-danger-400 }
-button.button-danger-ghost { @apply enabled:hover:bg-danger-100 }
-
-button.button-warning-default { @apply enabled:hover:bg-warning-400 }
-button.button-warning-ghost { @apply enabled:hover:bg-warning-100 }
-
-button.button-alert-default { @apply enabled:hover:bg-alert-500 }
-button.button-alert-ghost { @apply enabled:hover:bg-alert-100 }
-
 .cui-form-button-group {
     @apply flex flex-col-reverse md:flex-row md:justify-end gap-2 w-full md:w-auto
 }