diff --git a/public/locale/en.json b/public/locale/en.json
index 758ef1965db..1305ee92c98 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1112,7 +1112,7 @@
   "patient_consultation__treatment__summary__spo2": "SpO2",
   "patient_consultation__treatment__summary__temperature": "Temperature",
   "patient_created": "Patient Created",
-  "patient_details": "Patient Details",
+  "patient_details": "Details of Patient",
   "patient_details_incomplete": "Patient Details Incomplete",
   "patient_face": "Patient Face",
   "patient_name": "Patient name",
diff --git a/src/components/Common/AuthorizedButton.tsx b/src/components/Common/AuthorizedButton.tsx
index 2b611a0c9f2..944ff89532a 100644
--- a/src/components/Common/AuthorizedButton.tsx
+++ b/src/components/Common/AuthorizedButton.tsx
@@ -1,14 +1,18 @@
-import { Button, ButtonProps } from "@headlessui/react";
+import * as React from "react";
 
 import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
-import { AuthorizedElementProps } from "@/Utils/AuthorizeFor";
+import { Button, ButtonProps } from "@/components/ui/button";
 
-export const AuthorizedButton: React.FC<
-  AuthorizedElementProps & ButtonProps
-> = ({ authorizeFor = () => true, ...props }) => {
+import { AuthorizedElementProps, AuthorizedForCB } from "@/Utils/AuthorizeFor";
+
+type AuthorizedButtonProps = Omit<AuthorizedElementProps, "authorizeFor"> & {
+  authorizeFor: AuthorizedForCB;
+} & ButtonProps;
+
+const AuthorizedButton: React.FC<AuthorizedButtonProps> = (props) => {
   return (
-    <AuthorizedChild authorizeFor={authorizeFor}>
+    <AuthorizedChild authorizeFor={props.authorizeFor}>
       {({ isAuthorized }) => (
         <Button {...props} disabled={props.disabled || !isAuthorized}>
           {props.children}
@@ -17,3 +21,5 @@ export const AuthorizedButton: React.FC<
     </AuthorizedChild>
   );
 };
+
+export default AuthorizedButton;
diff --git a/src/components/Patient/PatientDetailsTab/Demography.tsx b/src/components/Patient/PatientDetailsTab/Demography.tsx
index 95811be7361..8837b93c9e2 100644
--- a/src/components/Patient/PatientDetailsTab/Demography.tsx
+++ b/src/components/Patient/PatientDetailsTab/Demography.tsx
@@ -101,7 +101,7 @@ export const Demography = (props: PatientProps) => {
   const EmergencyContact = (props: { number?: string; name?: string }) => (
     <div className="sm:col-span-2">
       <div className="mr-6 flex flex-col items-start justify-between rounded-md border border-orange-300 bg-orange-50 p-4 sm:flex-row">
-        {/* Emergency Contact Section */}
+        {/* Emergency contact Section */}
         <div className="flex-1">
           <div className="text-sm font-normal leading-5 text-gray-600">
             {t("emergency_contact")}
@@ -226,7 +226,7 @@ export const Demography = (props: PatientProps) => {
         },
         {
           label: t("state"),
-          value: patientData.state,
+          value: patientData?.state_object?.name,
         },
         {
           label: t("district"),
diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx
index b50c73ece88..de6da0bdc00 100644
--- a/src/components/Patient/PatientHome.tsx
+++ b/src/components/Patient/PatientHome.tsx
@@ -2,14 +2,23 @@ import { Link, navigate } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
-import { AuthorizedButton } from "@/components/Common/AuthorizedButton";
+import AuthorizedButton from "@/components/Common/AuthorizedButton";
+import { Avatar } from "@/components/Common/Avatar";
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
+import Loading from "@/components/Common/Loading";
+import Page from "@/components/Common/Page";
 import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
+import { patientTabs } from "@/components/Patient/PatientDetailsTab";
+import {
+  AssignedToObjectModel,
+  PatientModel,
+} from "@/components/Patient/models";
+import { SkillModel, UserBareMinimum } from "@/components/Users/models";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -26,7 +35,6 @@ import dayjs from "@/Utils/dayjs";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
-
 import {
   formatDateTime,
   formatName,
@@ -35,14 +43,7 @@ import {
   isAntenatal,
   isPostPartum,
   relativeDate,
-} from "../../Utils/utils";
-import { Avatar } from "../Common/Avatar";
-import Loading from "../Common/Loading";
-import Page from "../Common/Page";
-import { SkillModel, UserBareMinimum } from "../Users/models";
-import { patientTabs } from "./PatientDetailsTab";
-import { isPatientMandatoryDataFilled } from "./Utils";
-import { AssignedToObjectModel, PatientModel } from "./models";
+} from "@/Utils/utils";
 
 export const parseOccupation = (occupation: string | undefined) => {
   return OCCUPATION_TYPES.find((i) => i.value === occupation)?.text;
@@ -208,7 +209,7 @@ export const PatientHome = (props: {
                       >
                         {patientData.name}
                       </h1>
-                      <h3 className="text-sm font-medium text-gray-600">
+                      <h3 className="text-sm font-medium text-secondary-800">
                         {formatPatientAge(patientData, true)},{"  "}
                         {patientGender},{"  "} {patientData.blood_group || "-"}
                       </h3>
@@ -273,180 +274,161 @@ export const PatientHome = (props: {
                 </div>
               </div>
 
-              <div>
-                <div className="ml-auto mt-4 flex flex-wrap gap-3">
-                  {isPatientMandatoryDataFilled(patientData) &&
-                    (!patientData.last_consultation ||
-                      patientData.last_consultation?.facility !==
-                        patientData.facility ||
-                      (patientData.last_consultation?.discharge_date &&
-                        patientData.is_active)) && (
-                      <span className="relative inline-flex">
-                        <Chip
-                          size="small"
-                          variant="danger"
-                          startIcon="l-notes"
-                          text={t("no_consultation_filed")}
-                        />
-                        <span className="absolute -right-1 -top-1 flex h-3 w-3 items-center justify-center">
-                          <span className="center absolute inline-flex h-4 w-4 animate-ping rounded-full bg-red-400"></span>
-                          <span className="relative inline-flex h-3 w-3 rounded-full bg-red-600"></span>
+              <div className="mt-4 flex gap-4 justify-between flex-wrap">
+                <div className="flex gap-4">
+                  <div>
+                    <p className="text-xs font-normal leading-tight text-secondary-800">
+                      {t("facility")}:
+                    </p>
+                    <p className="mt-1 flex text-sm font-semibold leading-tight text-gray-900">
+                      {patientData.facility_object?.name || "-"}
+                    </p>
+                  </div>
+
+                  {patientData?.last_consultation
+                    ?.treating_physician_object && (
+                    <div>
+                      <h4 className="text-xs font-normal leading-tight text-secondary-800">
+                        {t("treating_doctor")}:
+                      </h4>
+                      <div className="mt-1 flex space-x-2">
+                        <p className="flex text-sm font-semibold leading-tight text-gray-900">
+                          {formatName(
+                            patientData.last_consultation
+                              .treating_physician_object,
+                          )}
+                        </p>
+                        <span className="tooltip text-xs text-secondary-800 flex items-end  font-normal leading-tight">
+                          {!!skillsQuery.data?.results?.length &&
+                            formatSkills(skillsQuery.data?.results)}
+                          {(skillsQuery.data?.results?.length || 0) > 3 && (
+                            <ul
+                              className="tooltip-text tooltip-bottom flex flex-col text-xs font-medium"
+                              role="tooltip"
+                            >
+                              {skillsQuery.data?.results.map((skill) => (
+                                <li key={skill.skill_object.id}>
+                                  {skill.skill_object.name}
+                                </li>
+                              ))}
+                            </ul>
+                          )}
                         </span>
-                      </span>
-                    )}
-                  {patientData.is_vaccinated && (
-                    <Chip
-                      variant="custom"
-                      size="small"
-                      className="bg-blue-100 text-blue-800"
-                      startIcon="l-syringe"
-                      text={t("vaccinated")}
-                    />
-                  )}
-                  {patientData.allow_transfer ? (
-                    <Chip
-                      variant="warning"
-                      size="small"
-                      startIcon="l-unlock"
-                      text={t("transfer_allowed")}
-                    />
-                  ) : (
-                    <Chip
-                      startIcon="l-lock"
-                      size="small"
-                      text={t("transfer_blocked")}
-                    />
+                      </div>
+                    </div>
                   )}
-
-                  {patientData.gender === 2 && (
-                    <>
-                      {patientData.is_antenatal &&
-                        isAntenatal(
-                          patientData.last_menstruation_start_date,
-                        ) && (
-                          <Chip
-                            variant="custom"
-                            size="small"
-                            className="border-pink-300 bg-pink-100 text-pink-600"
-                            startIcon="l-baby-carriage"
-                            text={t("antenatal")}
-                          />
+                  {patientData?.last_consultation?.assigned_to_object && (
+                    <div>
+                      <p className="text-xs font-normal leading-tight text-secondary-800">
+                        {t("assigned_doctor")}:
+                      </p>
+                      <div className="mt-1 flex space-x-2 text-sm font-semibold leading-tight text-gray-900">
+                        <p>
+                          {formatName(
+                            patientData.last_consultation.assigned_to_object,
+                          )}
+                        </p>
+                        {patientData?.last_consultation?.assigned_to_object
+                          .alt_phone_number && (
+                          <a
+                            href={`https://wa.me/${patientData.last_consultation.assigned_to_object.alt_phone_number.replace(/\D+/g, "")}`}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="flex items-center space-x-1 text-xs text-primary-500"
+                          >
+                            <CareIcon icon="l-whatsapp" />{" "}
+                            <span>{t("video_call")}</span>
+                          </a>
                         )}
-                      {isPostPartum(patientData.date_of_delivery) && (
-                        <Chip
-                          variant="custom"
-                          size="small"
-                          className="border-pink-300 bg-pink-100 text-pink-600"
-                          startIcon="l-baby-carriage"
-                          text={t("post_partum")}
-                        />
-                      )}
-                    </>
+                      </div>
+                    </div>
                   )}
-                  {patientData.last_consultation?.is_telemedicine && (
-                    <Chip
-                      variant="alert"
-                      size="small"
-                      startIcon="l-phone"
-                      text={t("TELEMEDICINE")}
-                    />
+
+                  {patientData.assigned_to_object && (
+                    <div>
+                      <p className="text-xs font-normal leading-tight text-secondary-800">
+                        {t("assigned_volunteer")}:
+                      </p>
+                      <p className="mt-1 text-sm font-semibold leading-tight text-gray-900">
+                        {formatName(patientData.assigned_to_object)}
+                      </p>
+                    </div>
                   )}
-                  {patientData.allergies &&
-                    patientData.allergies.trim().length > 0 && (
-                      <Chip
-                        variant="danger"
-                        size="small"
-                        text={t("has_allergies")}
-                      />
-                    )}
                 </div>
-              </div>
 
-              <div className="mt-4 flex gap-4">
                 <div>
-                  <p className="text-xs font-normal leading-tight text-gray-600">
-                    {t("facility")}:
-                  </p>
-                  <p className="mt-1 flex text-sm font-semibold leading-tight text-gray-900">
-                    {patientData.facility_object?.name || "-"}
-                  </p>
-                </div>
+                  <div className="ml-auto mt-2 flex flex-wrap gap-3">
+                    {!patientData?.last_consultation && (
+                      <Badge
+                        variant="custom"
+                        className="bg-blue-100 text-blue-800"
+                      >
+                        {t("Initial visit")}
+                      </Badge>
+                    )}
+                    {patientData.is_vaccinated && (
+                      <Badge
+                        variant="custom"
+                        className="bg-blue-100 text-blue-800"
+                      >
+                        <CareIcon icon="l-syringe" className="mr-1" />
+                        {t("vaccinated")}
+                      </Badge>
+                    )}
 
-                {patientData?.last_consultation?.treating_physician_object && (
-                  <div>
-                    <h4 className="text-xs font-normal leading-tight text-gray-600">
-                      {t("treating_doctor")}:
-                    </h4>
-                    <div className="mt-1 flex space-x-2">
-                      <p className="flex text-sm font-semibold leading-tight text-gray-900">
-                        {formatName(
-                          patientData.last_consultation
-                            .treating_physician_object,
-                        )}
-                      </p>
-                      <span className="tooltip text-xs text-secondary-800 flex items-end  font-normal leading-tight">
-                        {!!skillsQuery.data?.results?.length &&
-                          formatSkills(skillsQuery.data?.results)}
-                        {(skillsQuery.data?.results?.length || 0) > 3 && (
-                          <ul
-                            className="tooltip-text tooltip-bottom flex flex-col text-xs font-medium"
-                            role="tooltip"
+                    {patientData.gender === 2 && (
+                      <>
+                        {patientData.is_antenatal &&
+                          isAntenatal(
+                            patientData.last_menstruation_start_date,
+                          ) && (
+                            <Badge
+                              variant="custom"
+                              className="border-pink-300 bg-pink-100 text-pink-600"
+                            >
+                              <CareIcon
+                                icon="l-baby-carriage"
+                                className="mr-1"
+                              />
+                              {t("antenatal")}
+                            </Badge>
+                          )}
+                        {isPostPartum(patientData.date_of_delivery) && (
+                          <Badge
+                            variant="custom"
+                            className="border-pink-300 bg-pink-100  text-pink-600"
                           >
-                            {skillsQuery.data?.results.map((skill: any) => (
-                              <li key={skill.skill_object.id}>
-                                {skill.skill_object.name}
-                              </li>
-                            ))}
-                          </ul>
+                            <CareIcon icon="l-baby-carriage" className="mr-1" />
+                            {t("post_partum")}
+                          </Badge>
                         )}
-                      </span>
-                    </div>
-                  </div>
-                )}
-                {patientData?.last_consultation?.assigned_to_object && (
-                  <div>
-                    <p className="text-xs font-normal leading-tight text-gray-600">
-                      {t("assigned_doctor")}:
-                    </p>
-                    <div className="mt-1 flex space-x-2 text-sm font-semibold leading-tight text-gray-900">
-                      <p>
-                        {formatName(
-                          patientData.last_consultation.assigned_to_object,
-                        )}
-                      </p>
-                      {patientData?.last_consultation?.assigned_to_object
-                        .alt_phone_number && (
-                        <a
-                          href={`https://wa.me/${patientData.last_consultation.assigned_to_object.alt_phone_number.replace(/\D+/g, "")}`}
-                          target="_blank"
-                          rel="noreferrer"
-                          className="flex items-center space-x-1 text-xs text-green-500"
-                        >
-                          <CareIcon icon="l-whatsapp" />{" "}
-                          <span>{t("video_call")}</span>
-                        </a>
+                      </>
+                    )}
+                    {patientData.last_consultation?.is_telemedicine && (
+                      <Badge variant="alert">
+                        <CareIcon icon="l-phone" className="mr-1" />
+                        {t("TELEMEDICINE")}
+                      </Badge>
+                    )}
+                    {patientData.allergies &&
+                      patientData.allergies.trim().length > 0 && (
+                        <Badge variant="danger">{t("has_allergies")}</Badge>
+                      )}
+                    {patientData.state_object &&
+                      patientData.district_object && (
+                        <Badge variant="secondary">
+                          {`${t("Location: ")} ${patientData?.district_object?.name}, ${patientData?.state_object?.name}`}
+                        </Badge>
                       )}
-                    </div>
-                  </div>
-                )}
-
-                {patientData.assigned_to_object && (
-                  <div>
-                    <p className="text-xs font-normal leading-tight text-gray-600">
-                      {t("assigned_volunteer")}:
-                    </p>
-                    <p className="mt-1 text-sm font-semibold leading-tight text-gray-900">
-                      {formatName(patientData.assigned_to_object)}
-                    </p>
                   </div>
-                )}
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         <div
-          className="sticky top-0 z-10 mt-4 w-full overflow-x-auto border-b bg-gray-50"
+          className="sticky top-0 z-10 mt-4 w-full overflow-x-auto border-b bg-secondary-50"
           role="navigation"
         >
           <div className="flex flex-row" role="tablist">
@@ -456,8 +438,8 @@ export const PatientHome = (props: {
                 href={`/facility/${facilityId}/patient/${id}/${tab.route}`}
                 className={`whitespace-nowrap px-4 py-2 text-sm font-medium ${
                   page === tab.route
-                    ? "border-b-4 border-green-800 text-green-800 md:border-b-2"
-                    : "rounded-t-lg text-gray-600 hover:bg-gray-100"
+                    ? "border-b-4 border-primary-800 text-primary-800 md:border-b-2"
+                    : "rounded-t-lg text-secondary-800 hover:bg-secondary-200"
                 }`}
                 role="tab"
                 aria-selected={page === tab.route}
@@ -487,10 +469,12 @@ export const PatientHome = (props: {
                   {t("actions")}
                 </div>
                 <div className="mt-2 h-full space-y-2">
-                  <div className="space-y-3 border-b border-dashed text-left text-lg font-semibold text-secondary-900">
+                  <div className="space-y-2 border-b border-dashed text-left text-lg font-semibold text-secondary-900">
                     <div>
                       <Button
-                        className="w-full bg-white font-semibold text-green-800 hover:bg-secondary-200"
+                        className="w-full"
+                        size="lg"
+                        variant="outline_primary"
                         onClick={() =>
                           navigate(`/patient/${id}/investigation_reports`)
                         }
@@ -506,8 +490,10 @@ export const PatientHome = (props: {
                     </div>
                     <div>
                       <Button
-                        className="w-full bg-white font-semibold text-green-800 hover:bg-secondary-200"
+                        className="w-full"
+                        variant="outline_primary"
                         id="upload-patient-files"
+                        size="lg"
                         onClick={() =>
                           navigate(
                             `/facility/${patientData?.facility}/patient/${id}/files`,
@@ -525,10 +511,12 @@ export const PatientHome = (props: {
                       <div>
                         <AuthorizedButton
                           id="assign-volunteer"
+                          variant="outline_primary"
+                          className="w-full"
                           onClick={() => setOpenAssignVolunteerDialog(true)}
                           disabled={false}
                           authorizeFor={NonReadOnlyUsers}
-                          className="w-full bg-white font-semibold text-green-800 hover:bg-secondary-200"
+                          size="lg"
                         >
                           <span className="flex w-full items-center justify-start gap-2">
                             <CareIcon icon="l-users-alt" className="text-lg" />{" "}
@@ -543,7 +531,8 @@ export const PatientHome = (props: {
                     <div>
                       <AuthorizedButton
                         id="patient-allow-transfer"
-                        className="flex w-full flex-row bg-white font-semibold text-green-800 hover:bg-secondary-200"
+                        className="w-full"
+                        variant="outline_primary"
                         disabled={
                           !patientData.last_consultation?.id ||
                           !patientData.is_active
@@ -570,7 +559,19 @@ export const PatientHome = (props: {
                 </div>
               </div>
             </section>
-            <hr />
+            <hr className="mb-2" />
+            {patientData.allow_transfer ? (
+              <Badge variant="primary">
+                <CareIcon icon="l-unlock" className="mr-1" />
+                {t("transfer_allowed")}
+              </Badge>
+            ) : (
+              <Badge variant="warning">
+                <CareIcon icon="l-lock" className="mr-1" />
+                {t("transfer_blocked")}
+              </Badge>
+            )}
+
             <div
               id="actions"
               className="my-2 flex h-full flex-col justify-between space-y-2"
@@ -602,7 +603,7 @@ export const PatientHome = (props: {
                 <div className="rounded-sm px-2">
                   <div className="my-1 flex justify-between">
                     <div>
-                      <div className="text-xs font-normal leading-5 text-gray-600">
+                      <div className="text-xs font-normal leading-5 text-secondary-800">
                         {t("last_discharge_reason")}
                       </div>
                       <div className="text-sm font-semibold text-gray-900">
@@ -636,7 +637,7 @@ export const PatientHome = (props: {
                 </div>
                 <div className="my-1 rounded-sm p-2">
                   <div>
-                    <div className="text-xs font-normal text-gray-600">
+                    <div className="text-xs font-normal text-secondary-800">
                       {t("last_updated_by")}{" "}
                       <span className="font-semibold text-gray-900">
                         {patientData.last_edited?.first_name}{" "}
@@ -657,7 +658,7 @@ export const PatientHome = (props: {
                     </div>
                   </div>
                   <div className="mt-4">
-                    <div className="text-xs font-normal leading-5 text-gray-600">
+                    <div className="text-xs font-normal leading-5 text-secondary-800">
                       {t("patient_profile_created_by")}{" "}
                       <span className="font-semibold text-gray-900">
                         {patientData.created_by?.first_name}{" "}
@@ -686,6 +687,7 @@ export const PatientHome = (props: {
                     <Button
                       id="death-report"
                       className="my-2 w-full"
+                      variant="outline_primary"
                       name="death_report"
                       onClick={() => navigate(`/death_report/${id}`)}
                     >
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 99b8f3bbda4..77897be0384 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -10,13 +10,18 @@ const badgeVariants = cva(
       variant: {
         default:
           "border-transparent bg-gray-900 text-gray-50 shadow hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80",
+        primary:
+          "bg-primary-700 text-white shadow hover:bg-primary-700/90 dark:bg-primary-100 dark:text-primary-900 dark:hover:bg-primary-100/90",
         secondary:
           "border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
         destructive:
           "border-transparent bg-red-500 text-gray-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80",
+        alert: "border-alert-300 bg-alert-100 text-alert-900",
+        danger: "border-danger-300 bg-danger-100 text-danger-900",
         warning:
           "border-transparent bg-yellow-400 text-gray-900 shadow hover:bg-yellow-500 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-500",
         outline: "text-gray-950 dark:text-gray-50",
+        custom: "",
       },
     },
     defaultVariants: {