diff --git a/.env b/.env
index da48755037b..528b49e2b8d 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 # Whitelabelling envs
 
 REACT_APP_TITLE=CARE
-REACT_APP_META_DESCRIPTION=CoronaSafe Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. CoronaSafe Care is a Digital Public Good recognised by United Nations.
+REACT_APP_META_DESCRIPTION=Revolutionizing EMR with AI: Open Healthcare Network develops free, open-source tools to enhance efficiency in global healthcare delivery. Our EMR system is recognized as a Digital Public Good by the United Nations.
 REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
 REACT_PUBLIC_URL=https://care.coronasafe.in
diff --git a/.eslintrc.json b/.eslintrc.json
index a2f7b667856..0fc2f64ddaf 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -12,7 +12,6 @@
   "extends": [
     "eslint:recommended",
     "plugin:react-hooks/recommended",
-    "plugin:prettier/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:i18next/recommended",
diff --git a/cypress/e2e/patient_spec/patient_discharge.cy.ts b/cypress/e2e/patient_spec/patient_discharge.cy.ts
index 34ad423d1e8..242c936730d 100644
--- a/cypress/e2e/patient_spec/patient_discharge.cy.ts
+++ b/cypress/e2e/patient_spec/patient_discharge.cy.ts
@@ -36,6 +36,7 @@ describe("Patient Discharge based on multiple reason", () => {
     patientDischarge.clickDischarge();
     patientDischarge.selectDischargeReason(patientDischargeReason4);
     cy.submitButton("Confirm Discharge");
+    cy.submitButton("Acknowledge & Submit");
     cy.verifyNotification("Patient Discharged Successfully");
     cy.closeNotification();
     // Verify the consultation dashboard reflection
@@ -53,6 +54,7 @@ describe("Patient Discharge based on multiple reason", () => {
     patientDischarge.typeDischargeNote(patientDeathCause);
     patientDischarge.typeDoctorName(doctorName);
     cy.submitButton("Confirm Discharge");
+    cy.submitButton("Acknowledge & Submit");
     cy.verifyNotification("Patient Discharged Successfully");
     cy.closeNotification();
     // Verify the consultation dashboard reflection
@@ -77,6 +79,7 @@ describe("Patient Discharge based on multiple reason", () => {
     patientDischarge.typeReferringFacility(referringFreetextFacility);
     cy.wait(2000);
     cy.submitButton("Confirm Discharge");
+    cy.submitButton("Acknowledge & Submit");
     cy.wait(2000);
     cy.verifyNotification("Patient Discharged Successfully");
     cy.closeNotification();
@@ -108,6 +111,7 @@ describe("Patient Discharge based on multiple reason", () => {
     cy.closeNotification();
     // submit the discharge pop-up
     cy.submitButton("Confirm Discharge");
+    cy.submitButton("Acknowledge & Submit");
     cy.wait(2000);
     cy.verifyNotification("Patient Discharged Successfully");
     cy.closeNotification();
diff --git a/cypress/e2e/patient_spec/patient_registration.cy.ts b/cypress/e2e/patient_spec/patient_registration.cy.ts
index 17c9b0b3679..f94dbbe46cd 100644
--- a/cypress/e2e/patient_spec/patient_registration.cy.ts
+++ b/cypress/e2e/patient_spec/patient_registration.cy.ts
@@ -254,7 +254,7 @@ describe("Patient Creation with consultation", () => {
   });
 
   it("Patient Registration using the transfer with no consultation", () => {
-    // transfer the patient and no consulation
+    // transfer the patient with no consulation and verify the transfer to a new facility
     patientPage.createPatient();
     patientPage.selectFacility(patientTransferFacility);
     patientPage.patientformvisibility();
@@ -264,9 +264,10 @@ describe("Patient Creation with consultation", () => {
     patientTransfer.clickTransferPatientNameList(patientTransferName);
     patientTransfer.clickTransferPatientYOB(yearOfBirth);
     patientTransfer.clickTransferSubmitButton();
-    patientTransfer.verifyFacilitySuccessfullMessage();
+    cy.verifyNotification(
+      "Patient Dummy Patient 10 (Male) transferred successfully",
+    );
     patientTransfer.clickConsultationCancelButton();
-    cy.wait(3000);
     // allow the transfer button of a patient
     patientTransfer.clickAllowPatientTransferButton();
     // Verify the patient error message for the same facility
@@ -280,7 +281,9 @@ describe("Patient Creation with consultation", () => {
     patientTransfer.clickTransferPatientNameList(patientTransferName);
     patientTransfer.clickTransferPatientYOB(yearOfBirth);
     patientTransfer.clickTransferSubmitButton();
-    patientTransfer.verifyFacilityErrorMessage();
+    cy.verifyNotification(
+      "Patient - Patient transfer cannot be completed because the patient has an active consultation in the same facility",
+    );
   });
 
   it("Patient Registration using External Result Import", () => {
diff --git a/cypress/pageobject/Patient/PatientPrescription.ts b/cypress/pageobject/Patient/PatientPrescription.ts
index 8e006465e08..108fedbd676 100644
--- a/cypress/pageobject/Patient/PatientPrescription.ts
+++ b/cypress/pageobject/Patient/PatientPrescription.ts
@@ -28,7 +28,7 @@ export class PatientPrescription {
   }
 
   clickAdministerButton() {
-    cy.get("#administer-medicine").should("be.visible");
+    cy.get("#administer-medicine").scrollIntoView().should("be.visible");
     cy.verifyAndClickElement("#administer-medicine", "Administer");
   }
 
diff --git a/cypress/pageobject/Patient/PatientTransfer.ts b/cypress/pageobject/Patient/PatientTransfer.ts
index 4c884ee2427..0bdd55e9880 100644
--- a/cypress/pageobject/Patient/PatientTransfer.ts
+++ b/cypress/pageobject/Patient/PatientTransfer.ts
@@ -19,44 +19,18 @@ class PatientTransfer {
 
   clickTransferSubmitButton() {
     cy.get("#submit-transferpatient").click();
+    cy.wait(2000);
   }
 
   clickConsultationCancelButton() {
     cy.get("#cancel").scrollIntoView();
     cy.get("#cancel").click();
+    cy.wait(2000);
   }
 
   clickAllowPatientTransferButton() {
     cy.get("#patient-allow-transfer").click();
   }
-
-  verifyFacilitySuccessfullMessage() {
-    cy.get(".pnotify")
-      .should("exist")
-      .within(() => {
-        cy.get(".pnotify-text")
-          .invoke("text")
-          .then((text) => {
-            expect(text.trim()).to.match(
-              /^Patient Dummy Patient 10 \(Male\) transferred successfully$/i,
-            );
-          });
-      });
-  }
-
-  verifyFacilityErrorMessage() {
-    cy.get(".pnotify")
-      .should("exist")
-      .within(() => {
-        cy.get(".pnotify-text")
-          .invoke("text")
-          .then((text) => {
-            expect(text).to.match(
-              /Patient - Patient transfer cannot be completed because the patient has an active consultation in the same facility/,
-            );
-          });
-      });
-  }
 }
 
 export default PatientTransfer;
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index 9ddfd0c819a..c9af6a02c96 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 import "./commands";
 
 declare global {
diff --git a/package-lock.json b/package-lock.json
index b0027f9c7be..2458c891d41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "echarts-for-react": "^3.0.2",
         "eslint-mdx": "^3.1.5",
         "events": "^3.3.0",
-        "glob": "^10.3.15",
+        "glob": "^10.4.2",
         "hi-profiles": "^1.0.6",
         "i18next": "^23.11.4",
         "i18next-browser-languagedetector": "^7.2.1",
@@ -43,7 +43,7 @@
         "react-copy-to-clipboard": "^5.1.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dnd-scrolling": "^1.3.7",
+        "react-dnd-scrolling": "^1.3.8",
         "react-dom": "18.3.1",
         "react-google-recaptcha": "^3.1.0",
         "react-i18next": "^13.0.1",
@@ -72,6 +72,7 @@
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.13",
+        "@types/cypress": "^1.1.3",
         "@types/echarts": "^4.9.22",
         "@types/google.maps": "^3.55.8",
         "@types/lodash-es": "^4.17.12",
@@ -87,7 +88,7 @@
         "@typescript-eslint/parser": "^5.61.0",
         "@vitejs/plugin-react-swc": "^3.6.0",
         "autoprefixer": "^10.4.19",
-        "cypress": "^13.9.0",
+        "cypress": "^13.13.1",
         "cypress-localstorage-commands": "^2.2.5",
         "cypress-split": "^1.23.2",
         "eslint": "^8.44.0",
@@ -6222,6 +6223,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cypress": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/cypress/-/cypress-1.1.3.tgz",
+      "integrity": "sha512-OXe0Gw8LeCflkG1oPgFpyrYWJmEKqYncBsD/J0r17r0ETx/TnIGDNLwXt/pFYSYuYTpzcq1q3g62M9DrfsBL4g==",
+      "deprecated": "This is a stub types definition for cypress (https://cypress.io). cypress provides its own type definitions, so you don't need @types/cypress installed!",
+      "dev": true,
+      "dependencies": {
+        "cypress": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -9129,9 +9140,9 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/cypress": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.9.0.tgz",
-      "integrity": "sha512-atNjmYfHsvTuCaxTxLZr9xGoHz53LLui3266WWxXJHY7+N6OdwJdg/feEa3T+buez9dmUXHT1izCOklqG82uCQ==",
+      "version": "13.13.1",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.13.1.tgz",
+      "integrity": "sha512-8F9UjL5MDUdgC/S5hr8CGLHbS5gGht5UOV184qc2pFny43fnkoaKxlzH/U6//zmGu/xRTaKimNfjknLT8+UDFg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -9174,7 +9185,7 @@
         "request-progress": "^3.0.0",
         "semver": "^7.5.3",
         "supports-color": "^8.1.1",
-        "tmp": "~0.2.1",
+        "tmp": "~0.2.3",
         "untildify": "^4.0.0",
         "yauzl": "^2.10.0"
       },
@@ -13772,15 +13783,16 @@
       "dev": true
     },
     "node_modules/glob": {
-      "version": "10.3.15",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
-      "integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.6",
-        "minimatch": "^9.0.1",
-        "minipass": "^7.0.4",
-        "path-scurry": "^1.11.0"
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
@@ -15439,9 +15451,9 @@
       }
     },
     "node_modules/jackspeak": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -18160,9 +18172,9 @@
       }
     },
     "node_modules/minipass": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.0.tgz",
-      "integrity": "sha512-oGZRv2OT1lO2UF1zUcwdTb3wqUwI0kBGTgt/T7OdSj6M6N5m3o5uPf0AIW6lVxGGoiWUR7e2AwTE+xiwK8WQig==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -18959,6 +18971,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
     "node_modules/pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
@@ -19056,15 +19073,15 @@
       "dev": true
     },
     "node_modules/path-scurry": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz",
-      "integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=16 || 14 >=14.18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -20019,9 +20036,9 @@
       }
     },
     "node_modules/react-dnd-scrolling": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/react-dnd-scrolling/-/react-dnd-scrolling-1.3.7.tgz",
-      "integrity": "sha512-iLMziS6A4fxiCBpheb+B5T3I8SnZtAeAJszADLavkCvCX+gWt0ElL7Z895c1xLZOlFTWvHPfeCMYtP5ELqV8zQ==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/react-dnd-scrolling/-/react-dnd-scrolling-1.3.8.tgz",
+      "integrity": "sha512-XcvmrTsQrPNry7jkY8RkNAZ2HZIiLiUzOSUltkW6eOhNjkKfivnPEhkj9hZf1JP4C32zxDsjN26xoBy7puZXoA==",
       "dependencies": {
         "hoist-non-react-statics": "3.x",
         "lodash.throttle": "^4.1.1",
diff --git a/package.json b/package.json
index e23c97fd517..aa8d3f5df01 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "echarts-for-react": "^3.0.2",
     "eslint-mdx": "^3.1.5",
     "events": "^3.3.0",
-    "glob": "^10.3.15",
+    "glob": "^10.4.2",
     "hi-profiles": "^1.0.6",
     "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^7.2.1",
@@ -83,7 +83,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dnd-scrolling": "^1.3.7",
+    "react-dnd-scrolling": "^1.3.8",
     "react-dom": "18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^13.0.1",
@@ -112,6 +112,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
+    "@types/cypress": "^1.1.3",
     "@types/echarts": "^4.9.22",
     "@types/google.maps": "^3.55.8",
     "@types/lodash-es": "^4.17.12",
@@ -127,7 +128,7 @@
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.19",
-    "cypress": "^13.9.0",
+    "cypress": "^13.13.1",
     "cypress-localstorage-commands": "^2.2.5",
     "cypress-split": "^1.23.2",
     "eslint": "^8.44.0",
diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx
index 3b889b10e9b..997b58794eb 100644
--- a/src/CAREUI/display/Count.tsx
+++ b/src/CAREUI/display/Count.tsx
@@ -19,11 +19,11 @@ export default function CountBlock(props: Props) {
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-gray-700">
+          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (
-            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-gray-300" />
+            <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
           ) : (
             <dd id="count" className="text-5xl font-black leading-9">
               {props.count}
diff --git a/src/CAREUI/display/FilterBadge.tsx b/src/CAREUI/display/FilterBadge.tsx
index a4cd743b86a..0259439a4b8 100644
--- a/src/CAREUI/display/FilterBadge.tsx
+++ b/src/CAREUI/display/FilterBadge.tsx
@@ -16,13 +16,13 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
       data-testid={name}
       className={`${
         !value && "hidden"
-      } flex flex-row items-center rounded-full border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600`}
+      } flex flex-row items-center rounded-full border border-secondary-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600`}
     >
       {`${name}: ${value}`}
       <CareIcon
         id="removeicon"
         icon="l-times"
-        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-gray-500"
+        className="ml-2 box-content cursor-pointer rounded-full text-base hover:bg-secondary-500"
         onClick={onRemove}
       />
     </span>
diff --git a/src/CAREUI/display/NetworkSignal.tsx b/src/CAREUI/display/NetworkSignal.tsx
index 1d5f2d49623..d241a37674a 100644
--- a/src/CAREUI/display/NetworkSignal.tsx
+++ b/src/CAREUI/display/NetworkSignal.tsx
@@ -26,7 +26,7 @@ export default function NetworkSignal({ strength, children }: Props) {
         strength === 3 && "text-primary-500",
       )}
     >
-      <div className="flex items-end gap-0.5 p-2">
+      <div className="flex items-end gap-0.5 p-1.5 md:p-2">
         {strength === undefined ? (
           <CareIcon
             icon="l-exclamation-triangle"
@@ -45,7 +45,7 @@ export default function NetworkSignal({ strength, children }: Props) {
                 i === 2 && "h-[15px]",
 
                 // Whether to infill with strength color or not
-                strength > i ? "bg-current" : "bg-zinc-600",
+                strength > i ? "bg-current" : "bg-zinc-500/30",
               )}
             />
           ))
@@ -53,7 +53,7 @@ export default function NetworkSignal({ strength, children }: Props) {
         {!!strength && strength < 2 && (
           <CareIcon
             icon="l-exclamation-circle"
-            className="absolute left-0.5 top-0 animate-pulse text-sm text-danger-500"
+            className="absolute left-0.5 top-0.5 animate-pulse text-xs text-danger-500 md:top-0 md:text-sm"
           />
         )}
       </div>
diff --git a/src/CAREUI/display/SubHeading.tsx b/src/CAREUI/display/SubHeading.tsx
index a9024e83687..1161ecd8e55 100644
--- a/src/CAREUI/display/SubHeading.tsx
+++ b/src/CAREUI/display/SubHeading.tsx
@@ -13,11 +13,11 @@ export default function SubHeading(props: Props) {
   return (
     <div className="flex flex-wrap items-center justify-between py-2">
       <div className="flex items-center">
-        <span className="text-lg font-semibold leading-relaxed text-gray-900">
+        <span className="text-lg font-semibold leading-relaxed text-secondary-900">
           {props.title}
         </span>
         {props.lastModified && (
-          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
+          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-secondary-600">
             <CareIcon icon="l-history-alt" className="text-sm" />
             <RecordMeta time={props.lastModified} prefix="Last modified" />
           </div>
diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
index 3414a792398..bbbf5e24859 100644
--- a/src/CAREUI/display/Timeline.tsx
+++ b/src/CAREUI/display/Timeline.tsx
@@ -62,7 +62,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
           "absolute left-0 top-0 flex w-6 justify-center",
         )}
       >
-        <div className="w-px bg-gray-300" />
+        <div className="w-px bg-secondary-300" />
       </div>
 
       <div
@@ -81,9 +81,9 @@ export const TimelineNode = (props: TimelineNodeProps) => {
             {props.title || (
               <TimelineNodeTitle event={props.event}>
                 <div className="flex w-full justify-between gap-2">
-                  <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+                  <p className="flex-auto py-0.5 text-xs leading-5 text-secondary-600 md:w-2/3">
                     {props.event.by && (
-                      <span className="font-medium text-gray-900">
+                      <span className="font-medium text-secondary-900">
                         {props.event.by.username.startsWith("asset")
                           ? t("virtual_nursing_assistant")
                           : `${formatName(props.event.by)} ${
@@ -101,7 +101,7 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                       <TimelineNodeActions>{props.actions}</TimelineNodeActions>
                     )}
                     <RecordMeta
-                      className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                      className="flex-none py-0.5 text-xs leading-5 text-secondary-500"
                       time={props.event.timestamp}
                     />
                   </div>
@@ -131,13 +131,13 @@ export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
       <div
         className={classNames(
           props.event.iconWrapperStyle,
-          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
+          "relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-secondary-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500",
         )}
       >
         <CareIcon
           className={classNames(
             props.event.iconStyle,
-            "text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white",
+            "text-base text-secondary-700 transition-all duration-200 ease-in-out group-hover:text-white",
           )}
           aria-hidden="true"
           icon={props.event.icon}
@@ -171,9 +171,11 @@ export const TimelineNodeNotes = ({
   }
 
   return (
-    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
-      <CareIcon icon={icon} className="text-lg text-gray-700" />
-      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-secondary-200">
+      <CareIcon icon={icon} className="text-lg text-secondary-700" />
+      <div className="mt-1 flex-auto text-xs text-secondary-700">
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/CAREUI/interactive/KeyboardShortcut.tsx b/src/CAREUI/interactive/KeyboardShortcut.tsx
index 06ce149fb51..1d2bebeb316 100644
--- a/src/CAREUI/interactive/KeyboardShortcut.tsx
+++ b/src/CAREUI/interactive/KeyboardShortcut.tsx
@@ -2,32 +2,50 @@ import useKeyboardShortcut from "use-keyboard-shortcut";
 import { classNames, isAppleDevice } from "../../Utils/utils";
 
 interface Props {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   shortcut: string[];
+  altShortcuts?: string[][];
   onTrigger: () => void;
-  shortcutSeperator?: string;
   helpText?: string;
   tooltipClassName?: string;
 }
 
 export default function KeyboardShortcut(props: Props) {
-  useKeyboardShortcut(props.shortcut, props.onTrigger, {
-    overrideSystem: true,
-  });
+  useKeyboardShortcut(props.shortcut, props.onTrigger);
+
+  if (!props.children) {
+    return null;
+  }
 
   return (
     <div className="tooltip">
       {props.children}
       <span
         className={classNames(
-          "tooltip-text flex items-center gap-0.5 text-xs",
+          "tooltip-text space-x-1 text-xs",
           props.tooltipClassName || "tooltip-bottom",
         )}
       >
-        <span className="px-1 font-bold">{props.helpText}</span>
-        <kbd className="hidden items-center px-1.5 font-sans font-medium text-zinc-300 shadow md:inline-flex">
-          {getShortcutKeyDescription(props.shortcut).join(" + ")}
-        </kbd>
+        {props.helpText && (
+          <span className="pl-1 font-bold">{props.helpText}</span>
+        )}
+        {(props.altShortcuts || [props.shortcut]).map((shortcut, idx, arr) => (
+          <>
+            <kbd className="hidden items-center px-1.5 font-sans font-medium text-zinc-300 shadow lg:inline-flex">
+              {shortcut.map((key, idx, keys) => (
+                <>
+                  {SHORTCUT_KEY_MAP[key] || key}
+                  {idx !== keys.length - 1 && (
+                    <span className="px-1 text-zinc-300/60"> + </span>
+                  )}
+                </>
+              ))}
+            </kbd>
+            {idx !== arr.length - 1 && (
+              <span className="text-zinc-300/60">or</span>
+            )}
+          </>
+        ))}
       </span>
     </div>
   );
@@ -43,7 +61,3 @@ const SHORTCUT_KEY_MAP = {
   ArrowLeft: "←",
   ArrowRight: "→",
 } as Record<string, string>;
-
-export const getShortcutKeyDescription = (shortcut: string[]) => {
-  return shortcut.map((key) => SHORTCUT_KEY_MAP[key] || key);
-};
diff --git a/src/CAREUI/interactive/LegendInput.tsx b/src/CAREUI/interactive/LegendInput.tsx
index 334c4b84838..e164e4d1b4e 100644
--- a/src/CAREUI/interactive/LegendInput.tsx
+++ b/src/CAREUI/interactive/LegendInput.tsx
@@ -127,7 +127,7 @@ export default function LegendInput(props: InputProps) {
           required={props.required}
           autoComplete={props.autoComplete}
           className={classNames(
-            "cui-input w-full rounded-md border-gray-300 bg-gray-50 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-gray-100 focus:outline-none focus:ring-0",
+            "cui-input w-full rounded-md border-secondary-300 bg-secondary-50 shadow-sm focus:border-2 focus:border-primary-500 focus:bg-secondary-100 focus:outline-none focus:ring-0",
             props.size === "small" && "px-3 py-2 text-xs",
             (!props.size || !["small", "large"].includes(props.size)) &&
               "px-4 py-3",
diff --git a/src/CAREUI/interactive/ScrollOverlay.tsx b/src/CAREUI/interactive/ScrollOverlay.tsx
index 7c481495b59..7389f313e7c 100644
--- a/src/CAREUI/interactive/ScrollOverlay.tsx
+++ b/src/CAREUI/interactive/ScrollOverlay.tsx
@@ -19,7 +19,7 @@ export default function ScrollOverlay(props: Props) {
       <div ref={ref as any} />
       <div
         className={classNames(
-          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
+          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-secondary-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
           hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0",
         )}
       >
diff --git a/src/CAREUI/interactive/Switch.tsx b/src/CAREUI/interactive/Switch.tsx
index 48eca49151d..495722a0f39 100644
--- a/src/CAREUI/interactive/Switch.tsx
+++ b/src/CAREUI/interactive/Switch.tsx
@@ -26,7 +26,7 @@ export default function Switch<T extends string>({
               size === "lg" && "px-4 py-3 text-base",
               props.selected === tab
                 ? "border-primary-500 bg-primary-500 font-semibold text-white hover:bg-primary-600 focus:border-primary-500 focus:ring-primary-500"
-                : "border-gray-400 bg-gray-50 hover:bg-gray-200 focus:border-primary-500 focus:ring-primary-500",
+                : "border-secondary-400 bg-secondary-50 hover:bg-secondary-200 focus:border-primary-500 focus:ring-primary-500",
             )}
             onClick={() => props.onChange(tab as T)}
           >
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
index 35790e77b16..4a490f34e78 100644
--- a/src/Common/constants.tsx
+++ b/src/Common/constants.tsx
@@ -46,6 +46,15 @@ export const USER_TYPE_OPTIONS = [
   { id: "StateAdmin", role: "State Admin", readOnly: false },
 ] as const;
 
+export const USER_LAST_ACTIVE_OPTIONS = [
+  { id: 1, text: "24 hours" },
+  { id: 7, text: "7 days" },
+  { id: 30, text: "30 days" },
+  { id: 90, text: "90 days" },
+  { id: 365, text: "1 Year" },
+  { id: "never", text: "Never" },
+];
+
 export type UserRole = (typeof USER_TYPE_OPTIONS)[number]["id"];
 
 export const USER_TYPES = USER_TYPE_OPTIONS.map((o) => o.id);
diff --git a/src/Common/hooks/useConfirmedAction.ts b/src/Common/hooks/useConfirmedAction.ts
new file mode 100644
index 00000000000..ca88a5014ed
--- /dev/null
+++ b/src/Common/hooks/useConfirmedAction.ts
@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+export default function useConfirmedAction(action: () => Promise<void>) {
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
+  return {
+    requestConfirmation: () => setShowConfirmation(true),
+    submit: action,
+
+    confirmationProps: {
+      onClose: () => setShowConfirmation(false),
+      show: showConfirmation,
+      onConfirm: action,
+      action: "Submit",
+    },
+  };
+}
diff --git a/src/Common/hooks/useFilters.tsx b/src/Common/hooks/useFilters.tsx
index b86206c4b2d..c0919be9acc 100644
--- a/src/Common/hooks/useFilters.tsx
+++ b/src/Common/hooks/useFilters.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import GenericFilterBadge from "../../CAREUI/display/FilterBadge";
 import PaginationComponent from "../../Components/Common/Pagination";
 import useConfig from "./useConfig";
-import { classNames } from "../../Utils/utils";
+import { classNames, humanizeStrings } from "../../Utils/utils";
 import FiltersCache from "../../Utils/FiltersCache";
 
 export type FilterState = Record<string, unknown>;
@@ -87,10 +87,7 @@ export default function useFilters({
           name={name}
           value={
             value === undefined
-              ? paramKey
-                  .map((k) => qParams[k])
-                  .filter(Boolean)
-                  .join(", ")
+              ? humanizeStrings(paramKey.map((k) => qParams[k]).filter(Boolean))
               : value
           }
           onRemove={() => removeFilters(paramKey)}
@@ -187,16 +184,20 @@ export default function useFilters({
       return acc;
     }, [] as string[]);
 
+    const show = activeFilters.length > 0 || children;
+
     return (
-      <div className="col-span-3 my-2 flex w-full flex-wrap items-center gap-2">
+      <div
+        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 ${show ? "" : "hidden"}`}
+      >
         {compiledBadges.map((props) => (
           <FilterBadge {...props} name={t(props.name)} key={props.name} />
         ))}
         {children}
-        {(activeFilters.length >= 1 || children) && (
+        {show && (
           <button
             id="clear-all-filters"
-            className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
+            className="rounded-full border border-secondary-300 bg-white px-2 py-1 text-xs text-secondary-600 hover:text-secondary-800"
             onClick={() => removeFilters()}
           >
             {t("clear_all_filters")}
diff --git a/src/Common/hooks/useFullscreen.ts b/src/Common/hooks/useFullscreen.ts
index 106e657cf16..a826ff5f0ad 100644
--- a/src/Common/hooks/useFullscreen.ts
+++ b/src/Common/hooks/useFullscreen.ts
@@ -5,10 +5,7 @@ interface HTMLElementWithFullscreen extends HTMLElement {
   webkitExitFullscreen?: () => void;
 }
 
-export default function useFullscreen(): [
-  boolean,
-  (value: boolean, element?: HTMLElement) => void,
-] {
+export default function useFullscreen() {
   const [isFullscreen, _setIsFullscreen] = useState(
     !!document.fullscreenElement,
   );
@@ -39,12 +36,22 @@ export default function useFullscreen(): [
     else document.exitFullscreen();
   }
 
-  const setFullscreen = (value: boolean, element?: HTMLElement) => {
+  const setFullscreen = (
+    value: boolean,
+    element?: HTMLElement,
+    enterLandscape?: boolean,
+  ) => {
     const fullscreenElement = element ?? document.documentElement;
 
-    if (value) openFullscreen(fullscreenElement);
-    else exitFullscreen(fullscreenElement);
+    if (value) {
+      openFullscreen(fullscreenElement);
+      if (enterLandscape) {
+        (screen.orientation as any)?.lock?.("landscape");
+      }
+    } else {
+      exitFullscreen(fullscreenElement);
+    }
   };
 
-  return [isFullscreen, setFullscreen];
+  return [isFullscreen, setFullscreen] as const;
 }
diff --git a/src/Common/utils.tsx b/src/Common/utils.tsx
index 05022d8bc2e..4e14e3bf5ba 100644
--- a/src/Common/utils.tsx
+++ b/src/Common/utils.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 import { OptionsType } from "./constants";
+import { humanizeStrings } from "../Utils/utils";
 
 export interface statusType {
   aborted?: boolean;
@@ -34,14 +35,15 @@ export const parseOptionId: (
   options: readonly OptionsType[],
   id: string | string[],
 ) => string = (options, id) => {
-  const textArray = options
-    .filter((option) => {
-      return id instanceof Array
-        ? id.map((i) => String(i)).includes(String(option.id))
-        : String(option.id) === String(id);
-    })
-    .map((option) => option.text);
-  return textArray.join(", ");
+  return humanizeStrings(
+    options
+      .filter((option) => {
+        return id instanceof Array
+          ? id.map((i) => String(i)).includes(String(option.id))
+          : String(option.id) === String(id);
+      })
+      .map((option) => option.text),
+  );
 };
 
 export const deepEqual = (x: any, y: any): boolean => {
diff --git a/src/Components/ABDM/ABDMFacilityRecords.tsx b/src/Components/ABDM/ABDMFacilityRecords.tsx
index 96040905d6c..eadf39b8db7 100644
--- a/src/Components/ABDM/ABDMFacilityRecords.tsx
+++ b/src/Components/ABDM/ABDMFacilityRecords.tsx
@@ -44,13 +44,13 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               {/* eslint-disable-next-line tailwindcss/migration-from-tailwind-2 */}
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5  sm:rounded-lg">
-                <table className="min-w-full table-fixed divide-y divide-gray-300">
-                  <thead className="bg-gray-50">
+                <table className="min-w-full table-fixed divide-y divide-secondary-300">
+                  <thead className="bg-secondary-50">
                     <tr>
                       {TableHeads.map((head) => (
                         <th
                           scope="col"
-                          className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900"
+                          className="px-3 py-3.5 text-center text-sm font-semibold text-secondary-900"
                         >
                           {head}
                         </th>
@@ -62,7 +62,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                         <ButtonV2
                           onClick={() => refetch()}
                           ghost
-                          className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+                          className="max-w-2xl text-sm text-secondary-700 hover:text-secondary-900"
                         >
                           <CareIcon icon="l-refresh" /> Refresh
                         </ButtonV2>
@@ -70,12 +70,12 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-gray-200 bg-white">
+                  <tbody className="divide-y divide-secondary-200 bg-white">
                     {consentsResult?.results.map((consent) => (
                       <tr key={consent.id}>
                         <td className="px-3 py-4 text-center text-sm">
                           {consent.patient_abha_object?.name}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.patient_abha})
                           </p>
                         </td>
@@ -104,7 +104,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
 
                         {/* <td className="px-3 py-4 text-center text-sm">
                           {`${consent.requester?.first_name} ${consent.requester?.last_name}`.trim()}
-                          <p className="text-gray-600">
+                          <p className="text-secondary-600">
                             ({consent.requester.username})
                           </p>
                         </td> */}
@@ -134,7 +134,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                               consent.consent_artefacts?.[0]?.hi_types ??
                               consent.hi_types
                             )?.map((hiType) => (
-                              <span className="mb-2 mr-2 rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">
+                              <span className="mb-2 mr-2 rounded-full bg-secondary-100 px-2 py-1 text-xs font-medium text-secondary-600">
                                 {hiType}
                               </span>
                             ))}
@@ -159,7 +159,7 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                                 View
                               </Link>
                             ) : (
-                              <p className="cursor-not-allowed text-gray-600 opacity-70 ">
+                              <p className="cursor-not-allowed text-secondary-600 opacity-70 ">
                                 View
                               </p>
                             )}
diff --git a/src/Components/ABDM/ABDMRecordsTab.tsx b/src/Components/ABDM/ABDMRecordsTab.tsx
index 9100f368216..d828335cd0d 100644
--- a/src/Components/ABDM/ABDMRecordsTab.tsx
+++ b/src/Components/ABDM/ABDMRecordsTab.tsx
@@ -23,30 +23,32 @@ function ConsentArtefactCard({ artefact }: IConsentArtefactCardProps) {
     >
       <div className="flex flex-col items-center justify-between gap-4 px-4 py-5 sm:flex-row sm:gap-0 sm:px-6">
         <div className="flex flex-col items-center">
-          <h5 className="font-semibold leading-6 text-gray-900">
+          <h5 className="font-semibold leading-6 text-secondary-900">
             {artefact.hip}
           </h5>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             created {dayjs(artefact.created_date).fromNow()}
           </p>
         </div>
         <div className="flex flex-col items-center">
-          <h6 className="mt-1 leading-6 text-gray-700">{artefact.status}</h6>
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
+            {artefact.status}
+          </h6>
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {dayjs(artefact.from_time).format("MMM DD YYYY")} -{" "}
             {dayjs(artefact.to_time).format("MMM DD YYYY")}
           </h6>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             expires in {dayjs(artefact.expiry).fromNow()}
           </p>
         </div>
       </div>
-      <div className="flex flex-wrap items-center justify-center border-t border-gray-200 px-4 py-5 sm:gap-4">
+      <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
         {artefact.hi_types.map((hiType) => {
           return (
             <div
               key={hiType}
-              className="flex items-center justify-center rounded-full bg-gray-600 px-4 py-1.5 text-xs font-medium text-white"
+              className="flex items-center justify-center rounded-full bg-secondary-600 px-4 py-1.5 text-xs font-medium text-white"
             >
               {hiType}
             </div>
@@ -66,22 +68,22 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
     <div className="overflow-hidden bg-white shadow sm:rounded-lg">
       <div className="flex flex-col items-center justify-between gap-4 px-4 py-5 sm:flex-row sm:gap-0 sm:px-6">
         <div className="flex flex-col items-center">
-          <h5 className="font-semibold leading-6 text-gray-900">
+          <h5 className="font-semibold leading-6 text-secondary-900">
             {
               ABDM_CONSENT_PURPOSE.find((p) => p.value === consent.purpose)
                 ?.label
             }
           </h5>
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {consent.requester.first_name} {consent.requester.last_name}
           </h6>
         </div>
         <div className="flex flex-col items-center">
-          <h6 className="mt-1 leading-6 text-gray-700">
+          <h6 className="mt-1 leading-6 text-secondary-700">
             {dayjs(consent.from_time).format("MMM DD YYYY")} -{" "}
             {dayjs(consent.to_time).format("MMM DD YYYY")}
           </h6>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             expires in {dayjs(consent.expiry).fromNow()}
           </p>
         </div>
@@ -106,34 +108,34 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
               }
             }}
             ghost
-            className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+            className="max-w-2xl text-sm text-secondary-700 hover:text-secondary-900"
           >
             <CareIcon icon="l-refresh" /> check status
           </ButtonV2>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             created {dayjs(consent.created_date).fromNow()}
           </p>
-          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          <p className="mt-1 max-w-2xl text-sm text-secondary-500">
             modified {dayjs(consent.modified_date).fromNow()}
           </p>
         </div>
       </div>
       {consent.consent_artefacts?.length ? (
-        <div className="flex flex-wrap items-center justify-center border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4">
+        <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 bg-secondary-50 px-4 py-5 sm:gap-4">
           {consent.consent_artefacts?.map((artefact) => (
             <ConsentArtefactCard key={artefact.id} artefact={artefact} />
           ))}
         </div>
       ) : (
-        <div className="border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4">
-          <p className="text-center text-sm text-gray-800">
+        <div className="border-t border-secondary-200 bg-secondary-50 px-4 py-5 sm:gap-4">
+          <p className="text-center text-sm text-secondary-800">
             {consent.status === "REQUESTED"
               ? "Waiting for the Patient to approve the consent request"
               : "Patient has rejected the consent request"}
           </p>
         </div>
       )}
-      <div className="flex flex-wrap items-center justify-center border-t border-gray-200 px-4 py-5 sm:gap-4">
+      <div className="flex flex-wrap items-center justify-center border-t border-secondary-200 px-4 py-5 sm:gap-4">
         {consent.hi_types.map((hiType) => {
           return (
             <div
@@ -141,8 +143,8 @@ function ConsentRequestCard({ consent }: IConsentRequestCardProps) {
               className={classNames(
                 "flex items-center justify-center rounded-full px-4 py-1.5 text-xs font-medium text-white",
                 consent.consent_artefacts?.length
-                  ? "bg-gray-400"
-                  : "bg-gray-600",
+                  ? "bg-secondary-400"
+                  : "bg-secondary-600",
               )}
             >
               {hiType}
@@ -173,8 +175,8 @@ export default function ABDMRecordsTab({ patientId }: IProps) {
   if (!data?.results.length) {
     return (
       <div className="mt-12 flex flex-col items-center justify-center gap-2.5">
-        <p className="font-semibold text-gray-600">No Records found</p>
-        <p className="text-sm text-gray-600">
+        <p className="font-semibold text-secondary-600">No Records found</p>
+        <p className="text-sm text-secondary-600">
           Raise a consent request to fetch patient records over ABDM
         </p>
       </div>
diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index be991bb8f55..4853626f1ef 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -67,64 +67,17 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
       }
       show={show}
       onClose={onClose}
+      className="max-w-[500px]"
+      fixedWidth={false}
     >
       <div
         ref={printRef}
         id="section-to-print"
-        className="print flex items-center justify-around border-black p-4 print:w-full print:border"
+        className="print flex flex-col gap-4 border-black sm:flex-row print:w-full print:border"
       >
-        <>
-          <div className="flex flex-col items-center justify-evenly">
-            <div className="flex items-center justify-evenly gap-2 text-lg font-semibold">
-              {abha?.name ? (
-                <span> {abha?.name}</span>
-              ) : (
-                <>
-                  <span> {abha?.first_name}</span>
-                  <span> {abha?.middle_name} </span>
-                  <span> {abha?.last_name} </span>
-                </>
-              )}
-            </div>
-            <span className="font-bold">{abha?.abha_number}</span>
-            {abha?.health_id && (
-              <div className="flex items-center gap-1 font-bold">
-                <span>{abha.health_id.split("@")[0]}</span>
-                {/* <span className="text-gray-700 text-sm">@</span>
-                <span>{abha.health_id.split("@")[1] || "care"}</span> */}
-              </div>
-            )}
-            <div className="mt-2 flex flex-col">
-              {abha?.gender && (
-                <p className="text-sm text-gray-600">
-                  Gender:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.gender}
-                  </span>
-                </p>
-              )}
-              {abha?.date_of_birth && (
-                <p className="text-sm text-gray-600">
-                  DOB:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.date_of_birth}
-                  </span>
-                </p>
-              )}
-              {abha?.email && (
-                <p className="text-sm text-gray-600">
-                  Email:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.email}
-                  </span>
-                </p>
-              )}
-            </div>
-          </div>
-        </>
-        <>
+        <div className="flex-1 sm:aspect-square sm:h-40 sm:flex-auto">
           <QRCode
-            className="border border-black p-1"
+            className="h-full w-full border border-black p-1"
             value={JSON.stringify({
               hidn: abha?.abha_number,
               phr: abha?.health_id,
@@ -136,10 +89,32 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
               "dist name": abha?.district,
             })}
           />
-        </>
+        </div>
+        <div className="flex flex-wrap gap-4">
+          {[
+            {
+              label: "Name",
+              value:
+                abha?.name ||
+                `${abha?.first_name} ${abha?.middle_name} ${abha?.last_name}`,
+            },
+            { label: "DOB", value: abha?.date_of_birth },
+            { label: "Gender", value: abha?.gender },
+            { label: "ABHA Number", value: abha?.abha_number },
+            { label: "ABHA ID", value: abha?.health_id?.split("@")[0] },
+            { label: "Email", value: abha?.email },
+          ].map((item, index) =>
+            item.value ? (
+              <div key={index}>
+                <div className="text-xs text-secondary-700">{item.label}</div>
+                <div>{item.value}</div>
+              </div>
+            ) : null,
+          )}
+        </div>
       </div>
 
-      <div className="mt-4 flex flex-col text-sm text-gray-700">
+      <div className="mt-4 flex flex-col text-xs text-secondary-700">
         {abha?.created_date && (
           <div className="flex items-center gap-1">
             <span className="">Created On: </span>
diff --git a/src/Components/ABDM/ConfigureHealthFacility.tsx b/src/Components/ABDM/ConfigureHealthFacility.tsx
index 6f13cf01374..8259cd18a33 100644
--- a/src/Components/ABDM/ConfigureHealthFacility.tsx
+++ b/src/Components/ABDM/ConfigureHealthFacility.tsx
@@ -162,7 +162,7 @@ export const ConfigureHealthFacility = (props: any) => {
                   {state.form.health_facility?.registered ? (
                     <>
                       <div className="tooltip-text -ml-20 -mt-36 flex w-48 flex-col gap-4 whitespace-break-spaces">
-                        <span className="text-gray-100">
+                        <span className="text-secondary-100">
                           The ABDM health facility is successfully linked with
                           care{" "}
                           <strong>and registered as a service in bridge</strong>
@@ -176,7 +176,7 @@ export const ConfigureHealthFacility = (props: any) => {
                   ) : (
                     <>
                       <div className="tooltip-text -ml-20 -mt-44 flex w-48 flex-col gap-4 whitespace-break-spaces">
-                        <span className="text-gray-100">
+                        <span className="text-secondary-100">
                           The ABDM health facility is successfully linked with
                           care{" "}
                           <strong>
diff --git a/src/Components/ABDM/FetchRecordsModal.tsx b/src/Components/ABDM/FetchRecordsModal.tsx
index 950b69611c4..b457ccc453a 100644
--- a/src/Components/ABDM/FetchRecordsModal.tsx
+++ b/src/Components/ABDM/FetchRecordsModal.tsx
@@ -122,7 +122,7 @@ export default function FetchRecordsModal({ patient, show, onClose }: IProps) {
           )}
         >
           {idVerificationStatus === "in-progress" && (
-            <CircularProgress className="!h-5 !w-5 !text-gray-500" />
+            <CircularProgress className="!h-5 !w-5 !text-secondary-500" />
           )}
           {idVerificationStatus === "verified" && <CareIcon icon="l-check" />}
           {
diff --git a/src/Components/ABDM/HealthInformation.tsx b/src/Components/ABDM/HealthInformation.tsx
index ceff48a0b7d..1531f47c853 100644
--- a/src/Components/ABDM/HealthInformation.tsx
+++ b/src/Components/ABDM/HealthInformation.tsx
@@ -33,14 +33,14 @@ export default function HealthInformation({ artefactId }: IProps) {
       <div className="mt-10 flex flex-col items-center justify-center gap-6">
         {!!error?.is_archived && (
           <>
-            <h3 className="text-2xl font-semibold text-gray-700">
+            <h3 className="text-2xl font-semibold text-secondary-700">
               This record has been archived
             </h3>
-            <h5 className="mt-2 text-sm text-gray-500">
+            <h5 className="mt-2 text-sm text-secondary-500">
               This record has been archived and is no longer available for
               viewing.
             </h5>
-            <h4 className="mt-2 text-center text-gray-500">
+            <h4 className="mt-2 text-center text-secondary-500">
               This record was archived on{" "}
               {new Date(error?.archived_time as string).toLocaleString()} as{" "}
               {error?.archived_reason as string}
@@ -49,13 +49,13 @@ export default function HealthInformation({ artefactId }: IProps) {
         )}
         {error && !error?.is_archived && (
           <>
-            <h3 className="text-2xl font-semibold text-gray-700">
+            <h3 className="text-2xl font-semibold text-secondary-700">
               This record hasn't been fetched yet
             </h3>
-            <h5 className="mt-2 text-sm text-gray-500">
+            <h5 className="mt-2 text-sm text-secondary-500">
               This record hasn't been fetched yet. Please try again later.
             </h5>
-            <h4 className="mt-2 text-gray-500">
+            <h4 className="mt-2 text-secondary-500">
               Waiting for the HIP to send the record.
             </h4>
           </>
diff --git a/src/Components/ABDM/LinkABHANumberModal.tsx b/src/Components/ABDM/LinkABHANumberModal.tsx
index 2598dfa20c4..ea996ddd1da 100644
--- a/src/Components/ABDM/LinkABHANumberModal.tsx
+++ b/src/Components/ABDM/LinkABHANumberModal.tsx
@@ -158,7 +158,9 @@ const ScanABHAQRSection = ({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center gap-2">
-        <span className="text-3xl font-semibold text-gray-700">Loading</span>
+        <span className="text-3xl font-semibold text-secondary-700">
+          Loading
+        </span>
         <CircularProgress className="text-green-500" />
       </div>
     );
@@ -233,14 +235,14 @@ const ScanABHAQRSection = ({
       />
       {!txnId && (
         <div>
-          <span className="items-center text-xs text-gray-800">
+          <span className="items-center text-xs text-secondary-800">
             <input
               type="checkbox"
               checked={acceptedDisclaimer}
               onChange={(e) => {
                 setAcceptedDisclaimer(e.target.checked);
               }}
-              className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+              className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
             />
             I declare that the ABHA No. of the patient is voluntarily provided
             by the patient (or guardian or nominee of the patient).
@@ -524,7 +526,7 @@ const VerifyAadhaarSection = ({ onVerified }: VerifyAadhaarSectionProps) => {
         />
         <span
           className={classNames(
-            "ml-2 text-sm font-medium text-gray-600",
+            "ml-2 text-sm font-medium text-secondary-600",
             !aadhaarNumberError && "-mt-4",
           )}
         >
@@ -534,14 +536,14 @@ const VerifyAadhaarSection = ({ onVerified }: VerifyAadhaarSectionProps) => {
 
       {!otpSent && (
         <div className="flex flex-col gap-2">
-          <span className="items-center text-xs text-gray-800">
+          <span className="items-center text-xs text-secondary-800">
             <input
               type="checkbox"
               checked={acceptedDisclaimer1}
               onChange={(e) => {
                 setAcceptedDisclaimer1(e.target.checked);
               }}
-              className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+              className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
             />
             I declare that consent of the patient (or guardian or nominee of the
             patient) is obtained for generation of such ABHA Number as per the{" "}
@@ -551,14 +553,14 @@ const VerifyAadhaarSection = ({ onVerified }: VerifyAadhaarSectionProps) => {
             .
           </span>
 
-          <span className="items-center text-xs text-gray-800">
+          <span className="items-center text-xs text-secondary-800">
             <input
               type="checkbox"
               checked={acceptedDisclaimer2}
               onChange={(e) => {
                 setAcceptedDisclaimer2(e.target.checked);
               }}
-              className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+              className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
             />
             I declare that the Aadhaar Number and demographic details of the
             patient are shared voluntarily by the patient (or guardian or
@@ -838,7 +840,7 @@ const CreateHealthIDSection = ({
       </p>
 
       {isHealthIdInputInFocus && (
-        <div className="mb-2 pl-2 text-sm text-gray-500">
+        <div className="mb-2 pl-2 text-sm text-secondary-500">
           {validateRule(
             healthId.length >= 4,
             "Should be atleast 4 character long",
diff --git a/src/Components/ABDM/LinkCareContextModal.tsx b/src/Components/ABDM/LinkCareContextModal.tsx
index 36749ff3d23..b22189c9f2f 100644
--- a/src/Components/ABDM/LinkCareContextModal.tsx
+++ b/src/Components/ABDM/LinkCareContextModal.tsx
@@ -63,14 +63,14 @@ const LinkCareContextModal = ({
       />
 
       <div>
-        <span className="items-center text-xs text-gray-800">
+        <span className="items-center text-xs text-secondary-800">
           <input
             type="checkbox"
             checked={acceptedDisclaimer}
             onChange={(e) => {
               setAcceptedDisclaimer(e.target.checked);
             }}
-            className="mr-2 rounded border-gray-700 shadow-sm ring-0 ring-offset-0"
+            className="mr-2 rounded border-secondary-700 shadow-sm ring-0 ring-offset-0"
           />
           I declare that the data of the patient is voluntarily provided by the
           patient (or guardian or nominee of the patient).
diff --git a/src/Components/Assets/AssetImportModal.tsx b/src/Components/Assets/AssetImportModal.tsx
index 8c020e1a006..d553e30b79e 100644
--- a/src/Components/Assets/AssetImportModal.tsx
+++ b/src/Components/Assets/AssetImportModal.tsx
@@ -124,11 +124,11 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
       className="w-[48rem]"
       fixedWidth={false}
     >
-      <span className="mt-1 text-gray-700">{facility.name}</span>
+      <span className="mt-1 text-secondary-700">{facility.name}</span>
       {!loading && locations.length === 0 ? (
         <>
           <div className="flex h-full flex-col items-center justify-center">
-            <h1 className="m-7 text-2xl font-medium text-gray-700">
+            <h1 className="m-7 text-2xl font-medium text-secondary-700">
               You need at least one location to import an assest.
             </h1>
             <Link href={`/facility/${facility.id}/location/add`}>
diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 5835ad297f5..a9bb6eb78ea 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -136,24 +136,24 @@ const AssetManage = (props: AssetManageProps) => {
       setTransactionDetails(
         transactions?.results.map((transaction: AssetTransaction) => (
           <tr key={`transaction_id_${transaction.id}`}>
-            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {transaction.from_location.name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {transaction.to_location.name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {transaction.performed_by.first_name}{" "}
                 {transaction.performed_by.last_name}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-right text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-right text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {formatDateTime(transaction.modified_date)}
               </span>
             </td>
@@ -164,7 +164,7 @@ const AssetManage = (props: AssetManageProps) => {
       setTransactionDetails(
         <tr>
           <td
-            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500"
+            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500"
             colSpan={4}
           >
             <h5>No Transactions Found</h5>
@@ -179,23 +179,23 @@ const AssetManage = (props: AssetManageProps) => {
       setServiceDetails(
         services?.results.map((service: AssetService) => (
           <tr key={`service_id_${service.id}`}>
-            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {dayjs(service.serviced_on).format("DD MMM YYYY")}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="whitespace-break-spaces break-words font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="whitespace-break-spaces break-words font-medium text-secondary-900">
                 {service.note || "--"}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="font-medium text-secondary-900">
                 {formatDate(service.created_date)}
               </span>
             </td>
-            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
-              <span className="flex justify-center font-medium text-gray-900">
+            <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500">
+              <span className="flex justify-center font-medium text-secondary-900">
                 {service.edits?.length > 1 ? (
                   <RelativeDateUserMention
                     actionDate={service.edits?.[0]?.edited_on}
@@ -241,7 +241,7 @@ const AssetManage = (props: AssetManageProps) => {
       setServiceDetails(
         <tr>
           <td
-            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500"
+            className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-secondary-500"
             colSpan={4}
           >
             <h5>No Service Logs Found</h5>
@@ -271,9 +271,9 @@ const AssetManage = (props: AssetManageProps) => {
       <div className="flex grow-0 flex-col md:w-[200px]">
         <div className="flex-start flex items-center">
           <div className="w-8">
-            <CareIcon icon={item.icon} className="fill-gray-700 text-lg" />
+            <CareIcon icon={item.icon} className="fill-secondary-700 text-lg" />
           </div>
-          <div className="break-words text-gray-700">{item.label}</div>
+          <div className="break-words text-secondary-700">{item.label}</div>
         </div>
         <div
           className="ml-8 grow-0 break-words text-lg font-semibold"
@@ -358,12 +358,12 @@ const AssetManage = (props: AssetManageProps) => {
                   <div className="tooltip tooltip-bottom">
                     <CareIcon
                       icon={assetClassProp.icon}
-                      className="fill-gray-700 text-3xl"
+                      className="fill-secondary-700 text-3xl"
                     />
                     <span className="tooltip-text">{assetClassProp.name}</span>
                   </div>
                 </div>
-                <div className="mb-2 w-full text-gray-700 sm:hidden">
+                <div className="mb-2 w-full text-secondary-700 sm:hidden">
                   {asset?.description}
                 </div>
                 <div className="flex flex-wrap gap-2">
@@ -397,7 +397,7 @@ const AssetManage = (props: AssetManageProps) => {
                   )}
                 </div>
               </div>
-              <div className="mt-3 hidden text-gray-700 sm:block">
+              <div className="mt-3 hidden text-secondary-700 sm:block">
                 {asset?.description}
               </div>
             </div>
@@ -468,7 +468,7 @@ const AssetManage = (props: AssetManageProps) => {
               )}
             </div>
           </div>
-          <div className="flex shrink-0 flex-col justify-between gap-2 border-gray-300 p-6 md:border-l md:p-8">
+          <div className="flex shrink-0 flex-col justify-between gap-2 border-secondary-300 p-6 md:border-l md:p-8">
             <div>
               <div className="mb-5 text-lg font-bold">Service Details</div>
               <div className="flex flex-col gap-6">
@@ -489,7 +489,7 @@ const AssetManage = (props: AssetManageProps) => {
               </div>
             </div>
 
-            <div className="flex flex-col justify-end break-words text-sm text-gray-600">
+            <div className="flex flex-col justify-end break-words text-sm text-secondary-600">
               {asset?.created_date && (
                 <RecordMeta prefix={t("created")} time={asset?.created_date} />
               )}
@@ -522,27 +522,27 @@ const AssetManage = (props: AssetManageProps) => {
         className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
         id="service-history"
       >
-        <table className="min-w-full divide-y divide-gray-200">
+        <table className="min-w-full divide-y divide-secondary-200">
           <thead>
             <tr>
-              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Serviced on
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Note
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Created on
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Last Updated
               </th>
-              <th className="relative right-10 bg-gray-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="relative right-10 bg-secondary-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Edit
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-secondary-200 bg-white">
             {servicesDetails}
           </tbody>
         </table>
@@ -552,24 +552,24 @@ const AssetManage = (props: AssetManageProps) => {
         className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
         id="transaction-history"
       >
-        <table className="min-w-full divide-y divide-gray-200">
+        <table className="min-w-full divide-y divide-secondary-200">
           <thead>
             <tr>
-              <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved from
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved to
               </th>
-              <th className="bg-gray-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="bg-secondary-50 px-6 py-3 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved By
               </th>
-              <th className="relative right-5 bg-gray-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+              <th className="relative right-5 bg-secondary-50 px-6 py-3 text-right text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                 Moved On
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-secondary-200 bg-white">
             {transactionDetails}
           </tbody>
         </table>
diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 87bf561d471..196a902b450 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -67,7 +67,7 @@ export const AssetServiceEditModal = (props: {
       >
         <div>
           <div className="mb-4">
-            <p className="text-md mt-1 text-gray-500">
+            <p className="text-md mt-1 text-secondary-500">
               {t("update_record_for_asset")}
               <strong> {props.asset?.name}</strong>
             </p>
@@ -81,21 +81,21 @@ export const AssetServiceEditModal = (props: {
                   onClick={() => {
                     setEditRecord(edit);
                   }}
-                  className="my-2 flex cursor-pointer justify-between rounded-lg border border-gray-300 p-4 py-2 transition-colors duration-200 hover:bg-gray-100"
+                  className="my-2 flex cursor-pointer justify-between rounded-lg border border-secondary-300 p-4 py-2 transition-colors duration-200 hover:bg-secondary-100"
                 >
                   <div className="grow">
-                    <p className="text-sm font-medium text-gray-500">
+                    <p className="text-sm font-medium text-secondary-500">
                       {isLast ? "Created" : "Edited"} On
                     </p>
-                    <p className="text-sm text-gray-900">
+                    <p className="text-sm text-secondary-900">
                       {formatDateTime(edit.edited_on)}
                     </p>
                   </div>
                   <div className="grow">
-                    <p className="text-sm font-medium text-gray-500">
+                    <p className="text-sm font-medium text-secondary-500">
                       {isLast ? "Created" : "Edited"} By
                     </p>
-                    <p className="text-sm text-gray-900">
+                    <p className="text-sm text-secondary-900">
                       {edit.edited_by.username}
                     </p>
                   </div>
@@ -109,42 +109,45 @@ export const AssetServiceEditModal = (props: {
               );
             })}
           {editRecord && (
-            <div className="mb-4 rounded-lg border border-gray-300 p-4 py-2">
+            <div className="mb-4 rounded-lg border border-secondary-300 p-4 py-2">
               <div className="my-2 flex justify-between">
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("edited_on")}
                   </p>
-                  <p className="text-gray-900">
+                  <p className="text-secondary-900">
                     {formatDateTime(editRecord.edited_on)}
                   </p>
                 </div>
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("edited_by")}
                   </p>
-                  <p className="text-gray-900">
+                  <p className="text-secondary-900">
                     {editRecord.edited_by.username}
                   </p>
                 </div>
               </div>
               <div className="mt-4 flex flex-col justify-between">
                 <div className="grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("serviced_on")}
                   </p>
                   <p
-                    className="text-gray-900"
+                    className="text-secondary-900"
                     id="edit-history-asset-servicedon"
                   >
                     {formatDate(editRecord.serviced_on)}
                   </p>
                 </div>
                 <div className="mt-4 grow">
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-secondary-500">
                     {t("notes")}
                   </p>
-                  <p className="text-gray-900" id="edit-history-asset-note">
+                  <p
+                    className="text-secondary-900"
+                    id="edit-history-asset-note"
+                  >
                     {editRecord.note || "-"}
                   </p>
                 </div>
@@ -175,7 +178,7 @@ export const AssetServiceEditModal = (props: {
     >
       <div>
         <div className="mb-4">
-          <p className="text-md mt-1 text-gray-500">
+          <p className="text-md mt-1 text-secondary-500">
             {t("update_record_for_asset")}
             <strong> {props.asset?.name}</strong>
           </p>
diff --git a/src/Components/Assets/AssetWarrantyCard.tsx b/src/Components/Assets/AssetWarrantyCard.tsx
index 860fb5ab7af..cde8dfc256d 100644
--- a/src/Components/Assets/AssetWarrantyCard.tsx
+++ b/src/Components/Assets/AssetWarrantyCard.tsx
@@ -36,7 +36,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
         <div className="flex h-full w-full flex-col gap-4 md:border-r xl:w-auto  xl:border-r-0">
           {Object.keys(details).map((key) => (
             <div className="">
-              <div className="mb-1 text-xs uppercase italic tracking-widest text-gray-200">
+              <div className="mb-1 text-xs uppercase italic tracking-widest text-secondary-200">
                 {key}
               </div>
               <div className="flex items-center gap-2 font-semibold">
@@ -65,7 +65,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
         <div className="mb-2 hidden h-px w-full bg-white/40 xl:block" />
         <div className="shrink-0">
           <div>
-            <div className="mb-1 text-xs uppercase italic tracking-widest text-gray-200">
+            <div className="mb-1 text-xs uppercase italic tracking-widest text-secondary-200">
               Customer Support Details
             </div>
             <div className="font-semibold">{asset.support_name || "--"}</div>
@@ -78,7 +78,9 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
               <div className="flex items-center">
                 {item[1] && (
                   <>
-                    <div className="w-16 italic text-gray-200">{item[0]} :</div>
+                    <div className="w-16 italic text-secondary-200">
+                      {item[0]} :
+                    </div>
                     <a
                       href={
                         (item[0] === "Email" ? "mailto:" : "tel:") + item[1]
diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index f6f83e7030f..adf8dd61a8e 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -281,7 +281,7 @@ const AssetsList = () => {
   } else {
     manageAssets = (
       <div className="col-span-3 w-full rounded-lg bg-white p-2 py-8 pt-4 text-center">
-        <p className="text-2xl font-bold text-gray-600">No Assets Found</p>
+        <p className="text-2xl font-bold text-secondary-600">No Assets Found</p>
       </div>
     );
   }
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
index a74969fbfa4..68fdf2a6b67 100644
--- a/src/Components/Auth/Login.tsx
+++ b/src/Components/Auth/Login.tsx
@@ -193,13 +193,13 @@ export const Login = (props: { forgot?: boolean }) => {
               <div className="py-6">
                 <ReactMarkdown
                   rehypePlugins={[rehypeRaw]}
-                  className="max-w-xl text-gray-400"
+                  className="max-w-xl text-secondary-400"
                 >
                   {custom_description || t("goal")}
                 </ReactMarkdown>
               </div>
             ) : (
-              <div className="max-w-xl py-6 pl-1 text-base font-semibold text-gray-400 md:text-lg lg:text-xl">
+              <div className="max-w-xl py-6 pl-1 text-base font-semibold text-secondary-400 md:text-lg lg:text-xl">
                 {t("goal")}
               </div>
             )}
@@ -236,7 +236,7 @@ export const Login = (props: { forgot?: boolean }) => {
               href={coronasafe_url}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-500"
+              className="text-secondary-500"
             >
               {t("footer_body")}
             </a>
@@ -265,7 +265,7 @@ export const Login = (props: { forgot?: boolean }) => {
                     className="h-14 rounded-lg py-3"
                     alt="state logo"
                   />
-                  <div className="mx-4 h-8 w-px rounded-full bg-gray-600" />
+                  <div className="mx-4 h-8 w-px rounded-full bg-secondary-600" />
                 </>
               )}
               <img
diff --git a/src/Components/Auth/ResetPassword.tsx b/src/Components/Auth/ResetPassword.tsx
index 325a53b9c80..12a7b51ff67 100644
--- a/src/Components/Auth/ResetPassword.tsx
+++ b/src/Components/Auth/ResetPassword.tsx
@@ -124,7 +124,7 @@ export const ResetPassword = (props: any) => {
                 onBlur={() => setPasswordInputInFocus(false)}
               />
               {passwordInputInFocus && (
-                <div className="text-small mb-2 pl-2 text-gray-500">
+                <div className="text-small mb-2 pl-2 text-secondary-500">
                   {validateRule(
                     form.password?.length >= 8,
                     "Password should be atleast 8 characters long",
diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
index f970a920abc..dafb28d133f 100644
--- a/src/Components/CameraFeed/AssetBedSelect.tsx
+++ b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -3,8 +3,11 @@ import { AssetBedModel } from "../Assets/AssetTypes";
 import { Listbox, Transition } from "@headlessui/react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { classNames } from "../../Utils/utils";
+import { dropdownOptionClassNames } from "../Form/MultiSelectMenuV2";
+import ButtonV2 from "../Common/components/ButtonV2";
 
 interface Props {
+  disabled?: boolean;
   options: AssetBedModel[];
   value?: AssetBedModel;
   label?: (value: AssetBedModel) => string;
@@ -15,34 +18,44 @@ export default function CameraPresetSelect(props: Props) {
   const label = props.label ?? defaultLabel;
   return (
     <>
-      <div className="hidden gap-4 whitespace-nowrap pr-2 lg:flex lg:gap-2">
-        {/* Desktop View */}
+      {/* Desktop View */}
+      <div className="hidden gap-4 whitespace-nowrap pr-2 lg:flex lg:gap-1.5">
         {props.options
           .slice(0, props.options.length > 5 ? 4 : 5)
-          .map((option) => (
-            <button
-              className={classNames(
-                "min-w-16 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-0.5 text-base transition-all duration-200 ease-in-out hover:bg-zinc-600",
-                props.value?.id === option.id
-                  ? "border-white bg-zinc-100 font-bold text-black"
-                  : "border-zinc-700 font-medium text-zinc-300",
-              )}
-              onClick={() => props.onChange?.(option)}
-            >
-              {label(option)}
-            </button>
-          ))}
+          .map((option) => {
+            const selected = props.value?.id === option.id;
+
+            return (
+              <ButtonV2
+                key={option.id}
+                variant={selected ? "primary" : "secondary"}
+                className="min-w-16 max-w-40 text-ellipsis text-sm"
+                onClick={() => props.onChange?.(option)}
+                border
+                size="small"
+              >
+                {label(option)}
+                {selected && (
+                  <CareIcon
+                    icon="l-check"
+                    className="rounded-full bg-primary-500 text-base text-white"
+                  />
+                )}
+              </ButtonV2>
+            );
+          })}
         {props.options.length > 5 && (
           <CameraPresetDropdown
             {...props}
-            placeholder="More preset"
+            placeholder="More presets"
             options={props.options.slice(4)}
             value={props.options.slice(4).find((o) => o.id === props.value?.id)}
           />
         )}
       </div>
+
+      {/* Mobile View */}
       <div className="w-full lg:hidden">
-        {/* Mobile View */}
         <CameraPresetDropdown {...props} placeholder="Select preset" />
       </div>
     </>
@@ -62,15 +75,15 @@ export const CameraPresetDropdown = (
     <Listbox
       value={selected}
       onChange={props.onChange}
-      disabled={options.length === 0}
+      disabled={options.length === 0 || props.disabled}
     >
       <div className="relative flex-1">
         <Listbox.Button
           className={classNames(
-            "relative min-w-32 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-0.5 pr-8 text-left text-base transition-all duration-200 ease-in-out hover:bg-zinc-600 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700",
+            "button-size-small button-shape-square relative inline-flex h-min min-w-32 cursor-pointer items-center gap-2 whitespace-pre pr-12 text-left text-sm 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 md:min-w-40",
             selected
-              ? "border-white bg-zinc-100 font-bold text-black"
-              : "border-zinc-700 font-medium text-zinc-300",
+              ? "button-primary-default button-primary-border"
+              : "button-secondary-default button-secondary-border",
           )}
         >
           <span className="block truncate">
@@ -80,38 +93,32 @@ export const CameraPresetDropdown = (
                 ? label(selected)
                 : props.placeholder}
           </span>
+          {selected && (
+            <CareIcon
+              icon="l-check"
+              className="absolute inset-y-0 right-7 mt-1.5 rounded-full bg-primary-500 text-base text-white"
+            />
+          )}
           <span className="pointer-events-none absolute inset-y-0 right-0 mr-1 mt-1 flex items-center">
             <CareIcon icon="l-angle-down" className="text-xl text-zinc-400" />
           </span>
         </Listbox.Button>
         <Transition
           as={Fragment}
-          leave="transition ease-in duration-100"
+          leave="transition ease-in duration-300"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-20 mt-1 max-h-48 w-full overflow-auto rounded-b-lg bg-zinc-900/75 py-1 text-base shadow-lg ring-1 ring-white/5 backdrop-blur-sm focus:outline-none md:max-h-60">
+          <Listbox.Options className="absolute z-20 max-h-48 w-full overflow-auto rounded-b-lg bg-white py-1 text-base shadow-lg ring-1 ring-gray-500 focus:outline-none md:max-h-60">
             {options?.map((obj) => (
               <Listbox.Option
                 key={obj.id}
-                className={({ active }) =>
-                  `relative cursor-default select-none px-2 py-1 ${
-                    active ? "bg-zinc-700 text-white" : "text-zinc-400"
-                  }`
+                className={(args) =>
+                  classNames(dropdownOptionClassNames(args), "px-2 py-1.5")
                 }
                 value={obj}
               >
-                {({ selected }) => (
-                  <>
-                    <span
-                      className={`block truncate text-sm md:text-base ${
-                        selected ? "font-bold text-white" : "font-normal"
-                      }`}
-                    >
-                      {label(obj)}
-                    </span>
-                  </>
-                )}
+                <span>{label(obj)}</span>
               </Listbox.Option>
             ))}
           </Listbox.Options>
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index 1c6781ee51b..7c5cf7a8a19 100644
--- a/src/Components/CameraFeed/CameraFeed.tsx
+++ b/src/Components/CameraFeed/CameraFeed.tsx
@@ -4,21 +4,19 @@ import useOperateCamera, { PTZPayload } from "./useOperateCamera";
 import usePlayer from "./usePlayer";
 import { getStreamUrl } from "./utils";
 import ReactPlayer from "react-player";
-import { classNames, isAppleDevice, isIOS } from "../../Utils/utils";
+import { classNames, isIOS } from "../../Utils/utils";
 import FeedAlert, { FeedAlertState } from "./FeedAlert";
 import FeedNetworkSignal from "./FeedNetworkSignal";
 import NoFeedAvailable from "./NoFeedAvailable";
 import FeedControls from "./FeedControls";
-import Fullscreen from "../../CAREUI/misc/Fullscreen";
 import FeedWatermark from "./FeedWatermark";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import { Error } from "../../Utils/Notifications";
+import useFullscreen from "../../Common/hooks/useFullscreen";
+import useBreakpoints from "../../Common/hooks/useBreakpoints";
 
 interface Props {
   children?: React.ReactNode;
   asset: AssetData;
   preset?: PTZPayload;
-  silent?: boolean;
   className?: string;
   // Callbacks
   onCameraPresetsObtained?: (presets: Record<string, number>) => void;
@@ -28,17 +26,18 @@ interface Props {
   constrolsDisabled?: boolean;
   shortcutsDisabled?: boolean;
   onMove?: () => void;
-  onReset?: () => void;
+  operate: ReturnType<typeof useOperateCamera>["operate"];
 }
 
 export default function CameraFeed(props: Props) {
   const playerRef = useRef<HTMLVideoElement | ReactPlayer | null>(null);
+  const playerWrapperRef = useRef<HTMLDivElement>(null);
   const streamUrl = getStreamUrl(props.asset);
+  const inlineControls = useBreakpoints({ default: false, sm: true });
 
   const player = usePlayer(streamUrl, playerRef);
-  const operate = useOperateCamera(props.asset.id, props.silent);
 
-  const [isFullscreen, setFullscreen] = useState(false);
+  const [isFullscreen, setFullscreen] = useFullscreen();
   const [state, setState] = useState<FeedAlertState>();
   useEffect(() => setState(player.status), [player.status, setState]);
 
@@ -46,7 +45,10 @@ export default function CameraFeed(props: Props) {
   useEffect(() => {
     async function move(preset: PTZPayload) {
       setState("moving");
-      const { res } = await operate({ type: "absolute_move", data: preset });
+      const { res } = await props.operate({
+        type: "absolute_move",
+        data: preset,
+      });
       setTimeout(() => setState((s) => (s === "moving" ? undefined : s)), 4000);
       if (res?.status === 500) {
         setState("host_unreachable");
@@ -62,19 +64,19 @@ export default function CameraFeed(props: Props) {
   useEffect(() => {
     if (!props.onCameraPresetsObtained) return;
     async function getPresets(cb: (presets: Record<string, number>) => void) {
-      const { res, data } = await operate({ type: "get_presets" });
+      const { res, data } = await props.operate({ type: "get_presets" });
       if (res?.ok && data) {
         cb((data as { result: Record<string, number> }).result);
       }
     }
     getPresets(props.onCameraPresetsObtained);
-  }, [operate, props.onCameraPresetsObtained]);
+  }, [props.operate, props.onCameraPresetsObtained]);
 
   const initializeStream = useCallback(() => {
     player.initializeStream({
       onSuccess: async () => {
         props.onStreamSuccess?.();
-        const { res } = await operate({ type: "get_status" });
+        const { res } = await props.operate({ type: "get_status" });
         if (res?.status === 500) {
           setState("host_unreachable");
         }
@@ -88,43 +90,102 @@ export default function CameraFeed(props: Props) {
 
   const resetStream = () => {
     setState("loading");
-    props.onReset?.();
     initializeStream();
   };
-  return (
-    <Fullscreen
-      fullscreen={isFullscreen}
-      onExit={(reason) => {
-        setFullscreen(false);
-
-        if (reason === "DEVICE_UNSUPPORTED") {
-          // iOS webkit allows only video/iframe elements to call full-screen
-          // APIs. But we need to show controls too, not just the video element.
-          Error({
-            msg: "This device does not support viewing this content in full-screen.",
-          });
+
+  const controls = !props.constrolsDisabled && (
+    <FeedControls
+      inlineView={inlineControls}
+      shortcutsDisabled={props.shortcutsDisabled}
+      isFullscreen={isFullscreen}
+      setFullscreen={(value) => {
+        if (!value) {
+          setFullscreen(false);
+          return;
+        }
+
+        if (isIOS) {
+          const element = document.querySelector("video");
+          if (!element) {
+            return;
+          }
+          setFullscreen(true, element, true);
+          return;
         }
+
+        if (!playerRef.current) {
+          return;
+        }
+
+        setFullscreen(
+          true,
+          playerWrapperRef.current || (playerRef.current as HTMLElement),
+          true,
+        );
       }}
-    >
+      onReset={resetStream}
+      onMove={async (data) => {
+        props.onMove?.();
+        setState("moving");
+        const { res } = await props.operate({ type: "relative_move", data });
+        setTimeout(() => {
+          setState((state) => (state === "moving" ? undefined : state));
+        }, 4000);
+        if (res?.status === 500) {
+          setState("host_unreachable");
+        }
+      }}
+    />
+  );
+
+  return (
+    <div ref={playerWrapperRef} className="flex flex-col justify-center">
       <div
         className={classNames(
-          "flex flex-col overflow-clip rounded-xl bg-black md:max-h-screen",
+          "flex max-h-screen flex-col justify-center",
           props.className,
-          isAppleDevice && isFullscreen && "px-20",
+          isFullscreen ? "bg-black" : "bg-zinc-100",
+          isIOS && isFullscreen && "px-20",
         )}
       >
-        <div className="flex items-center justify-between bg-zinc-900 px-4 py-1.5 md:py-2">
-          {props.children}
-          <div className="flex w-full items-center justify-end gap-1 md:gap-4">
-            <span className="text-base font-semibold text-white">
-              <CareIcon
-                icon="l-video"
-                className="hidden pr-2 text-lg text-zinc-400 md:inline-block"
-              />
+        <div
+          className={classNames(
+            isFullscreen ? "hidden lg:flex" : "flex",
+            "items-center justify-between px-4 py-0.5 transition-all duration-500 ease-in-out lg:py-1",
+            (() => {
+              if (player.status !== "playing") {
+                return "bg-black text-zinc-400";
+              }
+
+              if (isFullscreen) {
+                return "bg-zinc-900 text-white";
+              }
+
+              return "bg-zinc-500/20 text-zinc-800";
+            })(),
+          )}
+        >
+          <div
+            className={classNames(
+              player.status !== "playing"
+                ? "pointer-events-none opacity-10"
+                : "opacity-100",
+              "transition-all duration-200 ease-in-out",
+            )}
+          >
+            {props.children}
+          </div>
+          <div className="flex w-full flex-col items-end justify-end md:flex-row md:items-center md:gap-4">
+            <span className="text-xs font-bold md:text-sm">
               {props.asset.name}
             </span>
             {!isIOS && (
-              <div className={state === "loading" ? "animate-pulse" : ""}>
+              <div
+                className={classNames(
+                  state === "loading" && "animate-pulse",
+                  "-mr-1 -mt-1 scale-90 md:mt-0 md:scale-100",
+                )}
+              >
                 <FeedNetworkSignal
                   playerRef={playerRef as any}
                   playedOn={player.playedOn}
@@ -135,8 +196,7 @@ export default function CameraFeed(props: Props) {
             )}
           </div>
         </div>
-
-        <div className="group relative aspect-video">
+        <div className="group relative aspect-video bg-black">
           {/* Notifications */}
           <FeedAlert state={state} />
           {player.status === "playing" && <FeedWatermark />}
@@ -155,7 +215,7 @@ export default function CameraFeed(props: Props) {
           {player.status === "offline" && (
             <NoFeedAvailable
               message="Offline"
-              className="text-gray-500"
+              className="text-secondary-500"
               icon="l-exclamation-triangle"
               streamUrl={streamUrl}
               asset={props.asset}
@@ -189,7 +249,7 @@ export default function CameraFeed(props: Props) {
           ) : (
             <video
               onContextMenu={(e) => e.preventDefault()}
-              className="absolute inset-x-0 mx-auto aspect-video max-h-screen w-full"
+              className="absolute inset-x-0 mx-auto aspect-video max-h-full w-full"
               id="mse-video"
               autoPlay
               muted
@@ -201,28 +261,21 @@ export default function CameraFeed(props: Props) {
             />
           )}
 
-          {/* Controls */}
-          {!props.constrolsDisabled && player.status === "playing" && (
-            <FeedControls
-              shortcutsDisabled={props.shortcutsDisabled}
-              isFullscreen={isFullscreen}
-              setFullscreen={setFullscreen}
-              onReset={resetStream}
-              onMove={async (data) => {
-                props.onMove?.();
-                setState("moving");
-                const { res } = await operate({ type: "relative_move", data });
-                setTimeout(() => {
-                  setState((state) => (state === "moving" ? undefined : state));
-                }, 4000);
-                if (res?.status === 500) {
-                  setState("host_unreachable");
-                }
-              }}
-            />
-          )}
+          {inlineControls && player.status === "playing" && controls}
         </div>
+        {!inlineControls && (
+          <div
+            className={classNames(
+              "py-4 transition-all duration-500 ease-in-out",
+              player.status !== "playing"
+                ? "pointer-events-none px-6 opacity-30"
+                : "px-12 opacity-100",
+            )}
+          >
+            {controls}
+          </div>
+        )}
       </div>
-    </Fullscreen>
+    </div>
   );
 }
diff --git a/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx b/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
index 8ce9c9ef67f..7268397b81a 100644
--- a/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
+++ b/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
@@ -5,6 +5,8 @@ import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import useSlug from "../../Common/hooks/useSlug";
 import { CameraPresetDropdown } from "./AssetBedSelect";
+import useOperateCamera from "./useOperateCamera";
+import { classNames } from "../../Utils/utils";
 
 interface Props {
   asset: AssetData;
@@ -18,24 +20,29 @@ export default function LocationFeedTile(props: Props) {
     query: { limit: 100, facility, asset: props.asset?.id },
   });
 
+  const { operate, key } = useOperateCamera(props.asset.id, true);
+
   return (
     <CameraFeed
       asset={props.asset}
-      silent
+      key={key}
       preset={preset?.meta.position}
       shortcutsDisabled
+      className="overflow-hidden rounded-lg"
+      operate={operate}
     >
-      <div className="w-64">
-        {loading ? (
-          <span>loading presets...</span>
-        ) : (
-          <CameraPresetDropdown
-            options={data?.results ?? []}
-            value={preset}
-            onChange={setPreset}
-            placeholder="Select preset"
-          />
+      <div
+        className={classNames(
+          "w-64 transition-all duration-200 ease-in-out",
+          loading && "pointer-events-none animate-pulse opacity-40",
         )}
+      >
+        <CameraPresetDropdown
+          options={data?.results ?? []}
+          value={preset}
+          onChange={setPreset}
+          placeholder={loading ? "Fetching presets..." : "Select preset"}
+        />
       </div>
     </CameraFeed>
   );
diff --git a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
index e2931a816bc..80032fc9abc 100644
--- a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
+++ b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
@@ -7,6 +7,7 @@ import useFilters from "../../../Common/hooks/useFilters";
 import { Fragment } from "react";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import useSlug from "../../../Common/hooks/useSlug";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   perPageLimit: number;
@@ -16,6 +17,7 @@ interface Props {
 }
 
 const LiveMonitoringFilters = (props: Props) => {
+  const { t } = useTranslation();
   const facilityId = useSlug("facility");
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: props.perPageLimit,
@@ -25,9 +27,9 @@ const LiveMonitoringFilters = (props: Props) => {
     <div className="flex flex-row-reverse items-center gap-4 md:flex-row">
       <Popover className="relative">
         <Popover.Button>
-          <ButtonV2 variant="secondary" border>
+          <ButtonV2 variant={qParams.location ? "primary" : "secondary"} border>
             <CareIcon icon="l-setting" className="text-lg" />
-            Settings and Filters
+            {t("settings_and_filters")}
           </ButtonV2>
         </Popover.Button>
         <Transition
@@ -40,10 +42,10 @@ const LiveMonitoringFilters = (props: Props) => {
           leaveTo="opacity-0 translate-y-1"
         >
           <Popover.Panel className="absolute z-30 mt-1 w-80 -translate-x-1/3 px-4 sm:px-0 md:w-96 md:-translate-x-1/2 lg:max-w-3xl">
-            <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
-              <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+            <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+              <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
                 <div className="flow-root rounded-md">
-                  <span className="block text-sm text-gray-800">
+                  <span className="block text-sm text-secondary-800">
                     <span className="font-bold ">{props.totalCount}</span>{" "}
                     Camera(s) present
                   </span>
@@ -73,37 +75,6 @@ const LiveMonitoringFilters = (props: Props) => {
                     />
                   </div>
                 </div>
-                {/* <CheckBoxFormField
-                  name="in_use_by_consultation"
-                  label="Hide cameras without patient"
-                  value={qParams.in_use_by_consultation === "true"}
-                  onChange={({ name, value }) => {
-                    if (value) {
-                      updateQuery({ [name]: value });
-                    } else {
-                      removeFilter(name);
-                    }
-                  }}
-                  labelClassName="text-sm"
-                  errorClassName="hidden"
-                />
-                <CheckBoxFormField
-                  name="is_working"
-                  label="Camera is Working"
-                  value={
-                    qParams.is_working === "true" ||
-                    qParams.is_working === undefined
-                  }
-                  onChange={({ name, value }) => {
-                    if (value) {
-                      updateQuery({ [name]: value });
-                    } else {
-                      removeFilter(name);
-                    }
-                  }}
-                  labelClassName="text-sm"
-                  errorClassName="hidden"
-                /> */}
                 <ButtonV2
                   variant="secondary"
                   border
diff --git a/src/Components/CameraFeed/FeedButton.tsx b/src/Components/CameraFeed/FeedButton.tsx
index f0e568d4ad4..e2ae2a8fe9e 100644
--- a/src/Components/CameraFeed/FeedButton.tsx
+++ b/src/Components/CameraFeed/FeedButton.tsx
@@ -4,7 +4,7 @@ import { classNames } from "../../Utils/utils";
 interface Props {
   className?: string;
   children?: React.ReactNode;
-  readonly shortcut?: string[];
+  shortcuts?: string[][];
   onTrigger: () => void;
   helpText?: string;
   shortcutsDisabled?: boolean;
@@ -15,7 +15,8 @@ export default function FeedButton(props: Props) {
   const child = (
     <button
       className={classNames(
-        "flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-700/50 bg-zinc-800/40 shadow-none transition hover:bg-zinc-50 hover:text-zinc-800 hover:shadow hover:backdrop-blur-xl active:shadow-2xl md:backdrop-blur-md",
+        "flex h-10 w-10 items-center justify-center rounded-lg border shadow-sm transition hover:backdrop-blur-xl sm:shadow-none sm:hover:shadow sm:active:shadow-2xl md:backdrop-blur-md",
+        "border-zinc-500/30 text-zinc-500 sm:border-zinc-700/50 sm:bg-zinc-800/40 sm:text-zinc-200 sm:hover:bg-zinc-50 sm:hover:text-zinc-800",
         props.className,
       )}
       type="button"
@@ -25,18 +26,27 @@ export default function FeedButton(props: Props) {
     </button>
   );
 
-  if (props.shortcutsDisabled || !props.shortcut) {
+  if (props.shortcutsDisabled || !props.shortcuts) {
     return child;
   }
 
   return (
-    <KeyboardShortcut
-      shortcut={props.shortcut}
-      onTrigger={props.onTrigger}
-      helpText={props.helpText}
-      tooltipClassName={props.tooltipClassName}
-    >
-      {child}
-    </KeyboardShortcut>
+    <>
+      {props.shortcuts.map((shortcut, idx) => (
+        <KeyboardShortcut
+          key={idx}
+          shortcut={shortcut}
+          onTrigger={props.onTrigger}
+          helpText={props.helpText}
+          tooltipClassName={classNames(
+            props.tooltipClassName,
+            "hidden lg:inline-flex",
+          )}
+          altShortcuts={idx === 0 ? props.shortcuts : undefined}
+        >
+          {idx === 0 && child}
+        </KeyboardShortcut>
+      ))}
+    </>
   );
 }
diff --git a/src/Components/CameraFeed/FeedControls.tsx b/src/Components/CameraFeed/FeedControls.tsx
index 46258114fc0..8cff960505a 100644
--- a/src/Components/CameraFeed/FeedControls.tsx
+++ b/src/Components/CameraFeed/FeedControls.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { isAppleDevice } from "../../Utils/utils";
 import FeedButton from "./FeedButton";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { PTZPayload } from "./useOperateCamera";
+import { isAppleDevice } from "../../Utils/utils";
 
 const Actions = {
   UP: 1 << 0,
@@ -13,18 +13,7 @@ const Actions = {
   ZOOM_OUT: 1 << 5,
 } as const;
 
-const Shortcuts = {
-  MoveUp: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowUp"],
-  MoveLeft: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowLeft"],
-  MoveDown: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowDown"],
-  MoveRight: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "ArrowRight"],
-  TogglePrecision: ["Shift", "P"],
-  ZoomIn: [isAppleDevice ? "Meta" : "Ctrl", "I"],
-  ZoomOut: [isAppleDevice ? "Meta" : "Ctrl", "O"],
-  Reset: ["Shift", "R"],
-  SavePreset: [isAppleDevice ? "Meta" : "Ctrl", "Shift", "S"],
-  Fullscreen: ["Shift", "F"],
-};
+const metaKey = isAppleDevice ? "Meta" : "Control";
 
 export type PTZAction = keyof typeof Actions;
 
@@ -62,6 +51,7 @@ interface Props {
   isFullscreen: boolean;
   setFullscreen: (state: boolean) => void;
   onReset: () => void;
+  inlineView: boolean;
 }
 
 export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
@@ -72,140 +62,187 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
     props.onMove(payload(direction, precision));
   };
 
-  return (
-    <div className="text-white opacity-0 transition-all delay-100 duration-200 ease-in-out group-hover:opacity-100 group-hover:delay-0">
-      <div className="absolute bottom-0 right-6 transition-all delay-100 duration-200 ease-in-out group-hover:bottom-1.5 group-hover:delay-0 md:left-8 md:right-auto md:group-hover:bottom-5">
-        <ul className="grid scale-75 grid-cols-5 gap-2.5 md:scale-100 md:grid-cols-3 md:gap-1">
-          <li className="order-none hidden md:order-1 md:block">
-            <FeedButton onTrigger={move(Actions.UP | Actions.LEFT)}>
-              <CareIcon icon="l-triangle" className="-rotate-45" />
-            </FeedButton>
-          </li>
-          <li className="order-1 md:order-2">
-            <FeedButton
-              onTrigger={move(Actions.UP)}
-              helpText="Up"
-              shortcut={Shortcuts.MoveUp}
-              shortcutsDisabled={shortcutsDisabled}
-              tooltipClassName="-translate-y-20 md:translate-y-0"
-            >
-              <CareIcon icon="l-triangle" className="rotate-0" />
-            </FeedButton>
-          </li>
-          <li className="order-none hidden md:order-3 md:block">
-            <FeedButton onTrigger={move(Actions.UP | Actions.RIGHT)}>
-              <CareIcon icon="l-triangle" className="rotate-45" />
-            </FeedButton>
-          </li>
-          <li className="order-3 md:order-4">
-            <FeedButton
-              onTrigger={move(Actions.LEFT)}
-              helpText="Left"
-              shortcut={Shortcuts.MoveLeft}
-              shortcutsDisabled={shortcutsDisabled}
-              tooltipClassName="-translate-y-20 -translate-x-1 md:translate-x-0 md:translate-y-0"
-            >
-              <CareIcon icon="l-triangle" className="-rotate-90" />
-            </FeedButton>
-          </li>
-
-          <li className="order-last md:order-5">
-            <FeedButton
-              onTrigger={togglePrecision}
-              helpText="Toggle Precision"
-              shortcut={Shortcuts.TogglePrecision}
-              className="font-bold"
-              shortcutsDisabled={shortcutsDisabled}
-              tooltipClassName="-translate-y-20 -translate-x-20 md:translate-x-0 md:translate-y-0"
-            >
-              {precision}x
-            </FeedButton>
-          </li>
-
-          <li className="order-4 md:order-6">
-            <FeedButton
-              onTrigger={move(Actions.RIGHT)}
-              helpText="Right"
-              shortcut={Shortcuts.MoveRight}
-              shortcutsDisabled={shortcutsDisabled}
-              tooltipClassName="-translate-y-20 -translate-x-2 md:translate-x-0 md:translate-y-0"
-            >
-              <CareIcon icon="l-triangle" className="rotate-90" />
-            </FeedButton>
-          </li>
-
-          <li className="order-none hidden md:order-7 md:block">
-            <FeedButton onTrigger={move(Actions.DOWN | Actions.LEFT)}>
-              <CareIcon icon="l-triangle" className="rotate-[-135deg]" />
-            </FeedButton>
-          </li>
-
-          <li className="order-2 md:order-8">
-            <FeedButton
-              onTrigger={move(Actions.DOWN)}
-              helpText="Down"
-              shortcut={Shortcuts.MoveDown}
-              shortcutsDisabled={shortcutsDisabled}
-              tooltipClassName="-translate-y-20 -translate-x-2 md:-translate-x-14"
-            >
-              <CareIcon icon="l-triangle" className="rotate-180" />
-            </FeedButton>
-          </li>
-
-          <li className="order-none hidden md:order-9 md:block">
-            <FeedButton onTrigger={move(Actions.DOWN | Actions.RIGHT)}>
-              <CareIcon icon="l-triangle" className="rotate-[135deg]" />
-            </FeedButton>
-          </li>
-        </ul>
-      </div>
+  const controls = {
+    position: (
+      <>
+        <FeedButton
+          onTrigger={move(Actions.UP | Actions.LEFT)}
+          shortcuts={[["Shift", "7"]]}
+          shortcutsDisabled={shortcutsDisabled}
+          helpText="Move Diagonally Up-Left"
+          tooltipClassName="-translate-y-20"
+        >
+          <CareIcon icon="l-triangle" className="-rotate-45" />
+        </FeedButton>
+
+        <FeedButton
+          onTrigger={move(Actions.UP)}
+          shortcuts={[
+            [metaKey, "Shift", "8"],
+            [metaKey, "Shift", "ArrowUp"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
+          tooltipClassName="-translate-y-20 -translate-x-11"
+          helpText="Move Up"
+        >
+          <CareIcon icon="l-triangle" className="rotate-0" />
+        </FeedButton>
+
+        <FeedButton
+          onTrigger={move(Actions.UP | Actions.RIGHT)}
+          shortcuts={[[metaKey, "Shift", "9"]]}
+          shortcutsDisabled={shortcutsDisabled}
+          helpText="Move Diagonally Up-Right"
+          tooltipClassName="-translate-y-20 -translate-x-24"
+        >
+          <CareIcon icon="l-triangle" className="rotate-45" />
+        </FeedButton>
+
+        <FeedButton
+          onTrigger={move(Actions.LEFT)}
+          shortcuts={[
+            [metaKey, "Shift", "4"],
+            [metaKey, "Shift", "ArrowLeft"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
+          helpText="Move Left"
+        >
+          <CareIcon icon="l-triangle" className="-rotate-90" />
+        </FeedButton>
+
+        <FeedButton
+          shortcuts={[["Shift", "P"]]}
+          onTrigger={togglePrecision}
+          helpText="Toggle Precision"
+          className="font-bold"
+          shortcutsDisabled={shortcutsDisabled}
+        >
+          {precision}x
+        </FeedButton>
+
+        <FeedButton
+          onTrigger={move(Actions.RIGHT)}
+          shortcuts={[
+            [metaKey, "Shift", "6"],
+            [metaKey, "Shift", "ArrowRight"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
+          helpText="Move Right"
+          tooltipClassName="-translate-y-9 translate-x-11"
+        >
+          <CareIcon icon="l-triangle" className="rotate-90" />
+        </FeedButton>
+
+        <FeedButton
+          onTrigger={move(Actions.DOWN | Actions.LEFT)}
+          shortcuts={[[metaKey, "Shift", "1"]]}
+          shortcutsDisabled={shortcutsDisabled}
+          tooltipClassName="-translate-y-20"
+          helpText="Move Diagonally Down-Left"
+        >
+          <CareIcon icon="l-triangle" className="rotate-[-135deg]" />
+        </FeedButton>
+
+        <FeedButton
+          onTrigger={move(Actions.DOWN)}
+          shortcuts={[
+            [metaKey, "Shift", "2"],
+            [metaKey, "Shift", "ArrowDown"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
+          tooltipClassName="-translate-y-20  -translate-x-14"
+          helpText="Move Down"
+        >
+          <CareIcon icon="l-triangle" className="rotate-180" />
+        </FeedButton>
+
+        <FeedButton
+          onTrigger={move(Actions.DOWN | Actions.RIGHT)}
+          shortcuts={[[metaKey, "Shift", "3"]]}
+          shortcutsDisabled={shortcutsDisabled}
+          tooltipClassName="-translate-y-9 translate-x-11"
+          helpText="Move Diagonally Down-Right"
+        >
+          <CareIcon icon="l-triangle" className="rotate-[135deg]" />
+        </FeedButton>
+      </>
+    ),
+    zoom: (
+      <>
+        <FeedButton
+          onTrigger={move(Actions.ZOOM_IN)}
+          shortcuts={[[metaKey, "I"]]}
+          shortcutsDisabled={shortcutsDisabled}
+          tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+          helpText="Zoom In"
+        >
+          <CareIcon icon="l-search-plus" />
+        </FeedButton>
+        <FeedButton
+          onTrigger={move(Actions.ZOOM_OUT)}
+          shortcuts={[[metaKey, "O"]]}
+          shortcutsDisabled={shortcutsDisabled}
+          tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+          helpText="Zoom Out"
+        >
+          <CareIcon icon="l-search-minus" />
+        </FeedButton>
+      </>
+    ),
+
+    reset: (
+      <FeedButton
+        onTrigger={props.onReset}
+        shortcuts={[["Shift", "R"]]}
+        shortcutsDisabled={shortcutsDisabled}
+        tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+        helpText="Reset"
+      >
+        <CareIcon icon="l-redo" />
+      </FeedButton>
+    ),
+    fullscreen: (
+      <FeedButton
+        onTrigger={() => props.setFullscreen(!props.isFullscreen)}
+        shortcuts={[["Shift", "F"]]}
+        shortcutsDisabled={shortcutsDisabled}
+        helpText={props.isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+        tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+      >
+        <CareIcon
+          icon={
+            props.isFullscreen ? "l-compress-arrows" : "l-expand-arrows-alt"
+          }
+        />
+      </FeedButton>
+    ),
+  };
 
-      <div className="absolute -bottom-3 right-0 scale-75 transition-all delay-100 duration-200 ease-in-out group-hover:right-2 group-hover:delay-0 md:bottom-5 md:scale-100 md:group-hover:right-8">
-        <div className="flex flex-col items-center justify-center gap-2.5 md:gap-1">
-          <FeedButton
-            shortcut={Shortcuts.ZoomIn}
-            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-            helpText="Zoom In"
-            onTrigger={move(Actions.ZOOM_IN)}
-            shortcutsDisabled={shortcutsDisabled}
-          >
-            <CareIcon icon="l-search-plus" />
-          </FeedButton>
-          <FeedButton
-            shortcut={Shortcuts.ZoomOut}
-            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-            helpText="Zoom Out"
-            onTrigger={move(Actions.ZOOM_OUT)}
-            shortcutsDisabled={shortcutsDisabled}
-          >
-            <CareIcon icon="l-search-minus" />
-          </FeedButton>
-          <FeedButton
-            shortcut={Shortcuts.Reset}
-            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-            helpText="Reset"
-            onTrigger={props.onReset}
-            shortcutsDisabled={shortcutsDisabled}
-          >
-            <CareIcon icon="l-redo" />
-          </FeedButton>
-          <FeedButton
-            shortcut={Shortcuts.Fullscreen}
-            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-            helpText={
-              props.isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"
-            }
-            onTrigger={() => props.setFullscreen(!props.isFullscreen)}
-            shortcutsDisabled={shortcutsDisabled}
-          >
-            <CareIcon
-              icon={
-                props.isFullscreen ? "l-compress-arrows" : "l-expand-arrows-alt"
-              }
-            />
-          </FeedButton>
+  if (props.inlineView) {
+    return (
+      <div className="text-white opacity-0 transition-all delay-100 duration-200 ease-in-out group-hover:opacity-100 group-hover:delay-0">
+        <div className="absolute bottom-0 left-8 transition-all delay-100 duration-200 ease-in-out group-hover:bottom-5 group-hover:delay-0">
+          <div className="grid grid-cols-3 gap-1">{controls.position}</div>
+        </div>
+        <div className="absolute  bottom-5 right-0 transition-all delay-100 duration-200 ease-in-out group-hover:right-8 group-hover:delay-0">
+          <div className="flex flex-col items-center justify-center gap-1">
+            {controls.zoom}
+            {controls.reset}
+            {controls.fullscreen}
+          </div>
         </div>
       </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex flex-col gap-2">{controls.zoom}</div>
+      <div className="grid grid-cols-3 gap-2">{controls.position}</div>
+      <div className="flex flex-col gap-2">
+        {controls.reset}
+        {controls.fullscreen}
+      </div>
     </div>
   );
 }
diff --git a/src/Components/CameraFeed/FeedNetworkSignal.tsx b/src/Components/CameraFeed/FeedNetworkSignal.tsx
index 502c61843e8..68df86bb4d5 100644
--- a/src/Components/CameraFeed/FeedNetworkSignal.tsx
+++ b/src/Components/CameraFeed/FeedNetworkSignal.tsx
@@ -34,7 +34,7 @@ export default function FeedNetworkSignal(props: Props) {
 
   return (
     <NetworkSignal strength={getStrength(props.status, videoDelay)}>
-      <span className="w-14 text-xs font-bold leading-none tracking-wide">
+      <span className="text-xs font-bold leading-none tracking-wide md:w-14">
         {videoDelay ? (
           `${(videoDelay * 1e3) | 1} ms`
         ) : (
diff --git a/src/Components/CameraFeed/FeedWatermark.tsx b/src/Components/CameraFeed/FeedWatermark.tsx
index 90ca2d15863..90b9f7cc408 100644
--- a/src/Components/CameraFeed/FeedWatermark.tsx
+++ b/src/Components/CameraFeed/FeedWatermark.tsx
@@ -47,7 +47,7 @@ const Watermark = (props: { children: string; className: string }) => {
   return (
     <span
       ref={ref}
-      className={`absolute z-10 font-bold text-white/20 md:text-2xl ${props.className}`}
+      className={`absolute z-10 text-sm font-bold text-white/20 md:text-2xl ${props.className}`}
     >
       {props.children}
     </span>
diff --git a/src/Components/CameraFeed/NoFeedAvailable.tsx b/src/Components/CameraFeed/NoFeedAvailable.tsx
index 81f70ff5d87..1c05296fad1 100644
--- a/src/Components/CameraFeed/NoFeedAvailable.tsx
+++ b/src/Components/CameraFeed/NoFeedAvailable.tsx
@@ -28,7 +28,7 @@ export default function NoFeedAvailable(props: Props) {
     >
       <CareIcon icon={props.icon} className="text-2xl" />
       <span className="text-xs font-bold">{props.message}</span>
-      <span className="hidden px-10 font-mono text-xs text-gray-500 md:block">
+      <span className="hidden px-10 font-mono text-xs text-secondary-500 md:block">
         {redactedURL}
       </span>
       <div className="mt-4 flex items-center gap-2">
diff --git a/src/Components/CameraFeed/useOperateCamera.ts b/src/Components/CameraFeed/useOperateCamera.ts
index 259e45fcc89..c0e35f90bf2 100644
--- a/src/Components/CameraFeed/useOperateCamera.ts
+++ b/src/Components/CameraFeed/useOperateCamera.ts
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import request from "../../Utils/request/request";
 import { FeedRoutes } from "./routes";
 
@@ -32,23 +33,47 @@ interface RelativeMoveOperation {
   data: PTZPayload;
 }
 
+interface ResetFeedOperation {
+  type: "reset";
+}
+
 export type OperationAction =
   | GetStatusOperation
   | GetPresetsOperation
   | GoToPresetOperation
   | AbsoluteMoveOperation
-  | RelativeMoveOperation;
+  | RelativeMoveOperation
+  | ResetFeedOperation;
 
 /**
  * This hook is used to control the PTZ of a camera asset and retrieve other related information.
  * @param id The external id of the camera asset
  */
 export default function useOperateCamera(id: string, silent = false) {
-  return (action: OperationAction) => {
-    return request(FeedRoutes.operateAsset, {
-      pathParams: { id },
-      body: { action },
-      silent,
-    });
+  const [key, setKey] = useState(0);
+
+  return {
+    key,
+    operate: (action: OperationAction) => {
+      if (action.type === "reset") {
+        setKey((prev) => prev + 1);
+
+        return request(FeedRoutes.operateAsset, {
+          pathParams: { id },
+          body: {
+            action: {
+              type: "get_status",
+            },
+          },
+          silent,
+        });
+      }
+
+      return request(FeedRoutes.operateAsset, {
+        pathParams: { id },
+        body: { action },
+        silent,
+      });
+    },
   };
 }
diff --git a/src/Components/Common/BloodPressureFormField.tsx b/src/Components/Common/BloodPressureFormField.tsx
index 95dbad02f62..53c4adf2194 100644
--- a/src/Components/Common/BloodPressureFormField.tsx
+++ b/src/Components/Common/BloodPressureFormField.tsx
@@ -65,7 +65,7 @@ export default function BloodPressureFormField(props: Props) {
             },
           ]}
         />
-        <span className="px-2 text-lg font-medium text-gray-400">/</span>
+        <span className="px-2 text-lg font-medium text-secondary-400">/</span>
         <RangeAutocompleteFormField
           name="diastolic"
           placeholder="Diastolic"
diff --git a/src/Components/Common/Breadcrumbs.tsx b/src/Components/Common/Breadcrumbs.tsx
index 307f4b4b045..bb5419bbe10 100644
--- a/src/Components/Common/Breadcrumbs.tsx
+++ b/src/Components/Common/Breadcrumbs.tsx
@@ -54,7 +54,10 @@ export default function Breadcrumbs(props: any) {
         <ol className="flex flex-wrap items-center space-x-1">
           <li>
             <div>
-              <Link href="/" className="text-gray-500 hover:text-gray-700">
+              <Link
+                href="/"
+                className="text-secondary-500 hover:text-secondary-700"
+              >
                 <CareIcon icon="l-estate" className="mr-1 text-lg" />
                 <span className="sr-only">Home</span>
               </Link>
@@ -64,7 +67,7 @@ export default function Breadcrumbs(props: any) {
             <li>
               <div className="flex cursor-pointer items-center">
                 <svg
-                  className="h-5 w-5 shrink-0 text-gray-400"
+                  className="h-5 w-5 shrink-0 text-secondary-400"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="currentColor"
                   viewBox="0 0 20 20"
@@ -74,7 +77,7 @@ export default function Breadcrumbs(props: any) {
                 </svg>
                 <span
                   onClick={() => setShowFullPath(true)}
-                  className="ml-1 mt-0.5 inline-flex items-center rounded-full bg-gray-500 px-2.5 py-1 text-xs font-medium hover:bg-gray-700"
+                  className="ml-1 mt-0.5 inline-flex items-center rounded-full bg-secondary-500 px-2.5 py-1 text-xs font-medium hover:bg-secondary-700"
                 >
                   <svg
                     className="mx-0.25 h-1.5 w-1.5 text-white"
@@ -107,13 +110,13 @@ export default function Breadcrumbs(props: any) {
                 <li
                   key={crumb.name}
                   className={classNames(
-                    "cursor-pointer text-sm font-medium text-gray-500 hover:text-gray-700",
+                    "cursor-pointer text-sm font-medium text-secondary-500 hover:text-secondary-700",
                     crumb.style,
                   )}
                 >
                   <div className="flex items-center">
                     <svg
-                      className="h-5 w-5 shrink-0 text-gray-400"
+                      className="h-5 w-5 shrink-0 text-secondary-400"
                       xmlns="http://www.w3.org/2000/svg"
                       fill="currentColor"
                       viewBox="0 0 20 20"
@@ -123,7 +126,7 @@ export default function Breadcrumbs(props: any) {
                     </svg>
                     <Link
                       href={crumb.uri}
-                      className="ml-1 block text-gray-500 hover:text-gray-700"
+                      className="ml-1 block text-secondary-500 hover:text-secondary-700"
                     >
                       {crumb.name.match(/^\w{8}-(\w{4}-){3}\w{12}$/) ? (
                         <div>
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index c68ba74a90d..2e9f99de9bc 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -263,7 +263,7 @@ const DateInputV2: React.FC<Props> = ({
                 <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
                   <CareIcon
                     icon="l-calendar-alt"
-                    className="text-lg text-gray-600"
+                    className="text-lg text-secondary-600"
                   />
                 </div>
               </Popover.Button>
@@ -287,7 +287,7 @@ const DateInputV2: React.FC<Props> = ({
                     <input
                       id="date-input"
                       autoFocus
-                      className="cui-input-base bg-gray-50"
+                      className="cui-input-base bg-secondary-50"
                       value={
                         displayValue.replace(
                           /^(\d{2})(\d{0,2})(\d{0,4}).*/,
@@ -316,7 +316,7 @@ const DateInputV2: React.FC<Props> = ({
                               datePickerHeaderDate.getMonth() - 1,
                             )
                           }
-                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-gray-300"
+                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
                           onClick={decrement}
                         >
                           <CareIcon icon="l-angle-left-b" className="text-lg" />
@@ -326,14 +326,14 @@ const DateInputV2: React.FC<Props> = ({
                           {type === "date" && (
                             <div
                               onClick={showMonthPicker}
-                              className="cursor-pointer rounded px-3 py-1 text-center font-medium text-black hover:bg-gray-300"
+                              className="cursor-pointer rounded px-3 py-1 text-center font-medium text-black hover:bg-secondary-300"
                             >
                               {dayjs(datePickerHeaderDate).format("MMMM")}
                             </div>
                           )}
                           <div
                             onClick={showYearPicker}
-                            className="cursor-pointer rounded px-3 py-1 font-medium text-black hover:bg-gray-300"
+                            className="cursor-pointer rounded px-3 py-1 font-medium text-black hover:bg-secondary-300"
                           >
                             <p className="text-center">
                               {type == "year"
@@ -350,7 +350,7 @@ const DateInputV2: React.FC<Props> = ({
                                 year.getFullYear()) ||
                             !isDateWithinConstraints(getLastDay())
                           }
-                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-gray-300"
+                          className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
                           onClick={increment}
                         >
                           <CareIcon
@@ -369,7 +369,7 @@ const DateInputV2: React.FC<Props> = ({
                                 id={`day-${i}`}
                                 className="aspect-square w-[14.26%]"
                               >
-                                <div className="text-center text-sm font-medium text-gray-800">
+                                <div className="text-center text-sm font-medium text-secondary-800">
                                   {day}
                                 </div>
                               </div>
@@ -397,11 +397,11 @@ const DateInputV2: React.FC<Props> = ({
                                     "bg-primary-500 font-bold text-white";
                                 } else {
                                   conditionalClasses =
-                                    "hover:bg-gray-300 cursor-pointer";
+                                    "hover:bg-secondary-300 cursor-pointer";
                                 }
                               } else {
                                 conditionalClasses =
-                                  "!cursor-not-allowed !text-gray-400";
+                                  "!cursor-not-allowed !text-secondary-400";
                               }
                               return (
                                 <div
@@ -433,7 +433,7 @@ const DateInputV2: React.FC<Props> = ({
                                   "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
                                   value && isSelectedMonth(i)
                                     ? "bg-primary-500 text-white"
-                                    : "text-gray-700 hover:bg-gray-300",
+                                    : "text-secondary-700 hover:bg-secondary-300",
                                 )}
                                 onClick={setMonthValue(i)}
                               >
@@ -462,7 +462,7 @@ const DateInputV2: React.FC<Props> = ({
                                     "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
                                     value && isSelectedYear(y)
                                       ? "bg-primary-500 text-white"
-                                      : "text-gray-700 hover:bg-gray-300",
+                                      : "text-secondary-700 hover:bg-secondary-300",
                                   )}
                                   onClick={setYearValue(y)}
                                 >
diff --git a/src/Components/Common/Dialog.tsx b/src/Components/Common/Dialog.tsx
index ed52920fb13..68f6d0900b9 100644
--- a/src/Components/Common/Dialog.tsx
+++ b/src/Components/Common/Dialog.tsx
@@ -59,11 +59,11 @@ const DialogModal = (props: DialogProps) => {
                 >
                   <Dialog.Title
                     as="h4"
-                    className="flex w-full flex-col text-lg font-medium leading-6 text-gray-900"
+                    className="flex w-full flex-col text-lg font-medium leading-6 text-secondary-900"
                   >
                     <div className="w-full">
                       <h4>{title}</h4>
-                      <p className="mt-2 text-sm text-gray-600">
+                      <p className="mt-2 text-sm text-secondary-600">
                         {description}
                       </p>
                     </div>
diff --git a/src/Components/Common/ExcelFIleDragAndDrop.tsx b/src/Components/Common/ExcelFIleDragAndDrop.tsx
index 750d4785279..5a6719f03df 100644
--- a/src/Components/Common/ExcelFIleDragAndDrop.tsx
+++ b/src/Components/Common/ExcelFIleDragAndDrop.tsx
@@ -144,7 +144,7 @@ export default function ExcelFileDragAndDrop({
         onDrop={onDrop}
         onClick={() => !selectedFile && fileInputRef.current?.click()}
         className={`mb-8 mt-5 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
-          dragProps.dragOver ? "border-primary-500" : "border-gray-500"
+          dragProps.dragOver ? "border-primary-500" : "border-secondary-500"
         } ${dragProps.fileDropError !== "" ? "border-red-500" : ""}`}
       >
         <svg
@@ -153,14 +153,18 @@ export default function ExcelFileDragAndDrop({
           viewBox="0 0 24 24"
           aria-hidden="true"
           className={`h-12 w-12 ${dragProps.dragOver && "text-primary-500"} ${
-            dragProps.fileDropError !== "" ? "text-red-500" : "text-gray-600"
+            dragProps.fileDropError !== ""
+              ? "text-red-500"
+              : "text-secondary-600"
           }`}
         >
           <path d="M12.71,11.29a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-2,2a1,1,0,0,0,1.42,1.42l.29-.3V17a1,1,0,0,0,2,0V14.41l.29.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42ZM20,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19l-.1,0A1.1,1.1,0,0,0,13.06,2H7A3,3,0,0,0,4,5V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V9S20,9,20,8.94ZM14,5.41,16.59,8H15a1,1,0,0,1-1-1ZM18,19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V5A1,1,0,0,1,7,4h5V7a3,3,0,0,0,3,3h3Z" />
         </svg>
         <p
           className={`text-sm ${dragProps.dragOver && "text-primary-500"} ${
-            dragProps.fileDropError !== "" ? "text-red-500" : "text-gray-700"
+            dragProps.fileDropError !== ""
+              ? "text-red-500"
+              : "text-secondary-700"
           } text-center`}
         >
           {dragProps.fileDropError !== "" && dragProps.fileDropError}
@@ -181,7 +185,7 @@ export default function ExcelFileDragAndDrop({
         />
         {selectedFile && (
           <div className="flex pt-2">
-            <p className="text-sm text-gray-700">
+            <p className="text-sm text-secondary-700">
               {selectedFile.name} - {(selectedFile.size / 1024).toFixed(2)} KB
             </p>
             <span
@@ -203,7 +207,7 @@ export default function ExcelFileDragAndDrop({
         {selectedFile ? (
           <>
             <span
-              className="focus:ring-blue mx-auto mt-4 max-w-xs cursor-pointer items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
+              className="focus:ring-blue mx-auto mt-4 max-w-xs cursor-pointer items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-secondary-50 active:text-primary-800"
               onClick={() => setPreview(true)}
             >
               <CareIcon
@@ -216,7 +220,7 @@ export default function ExcelFileDragAndDrop({
           </>
         ) : (
           <a
-            className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
+            className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-secondary-50 active:text-primary-800"
             href={sampleLink}
             target="_blank"
             download
diff --git a/src/Components/Common/ExcelViewer.tsx b/src/Components/Common/ExcelViewer.tsx
index 2d649ca42b2..643b411a9b0 100644
--- a/src/Components/Common/ExcelViewer.tsx
+++ b/src/Components/Common/ExcelViewer.tsx
@@ -68,7 +68,7 @@ const ExcelViewer = ({
     >
       <>
         <div className="mb-2 flex flex-col items-center justify-between md:flex-row">
-          <p className="text-md font-semibold text-gray-700">
+          <p className="text-md font-semibold text-secondary-700">
             {selectedFile.name}
           </p>
           <div className="flex gap-4">
@@ -87,11 +87,11 @@ const ExcelViewer = ({
           </div>
         </div>
         <div className="flex flex-1 flex-col justify-center">
-          <div className="flex w-full justify-center overflow-scroll rounded-lg border border-gray-200">
+          <div className="flex w-full justify-center overflow-scroll rounded-lg border border-secondary-200">
             {fileData && fileData[0] ? (
               <div className="overflow-x-auto">
-                <table className="w-full table-auto border-collapse rounded-lg border border-gray-300 bg-white shadow-md">
-                  <thead className="sticky top-0 bg-gray-100">
+                <table className="w-full table-auto border-collapse rounded-lg border border-secondary-300 bg-white shadow-md">
+                  <thead className="sticky top-0 bg-secondary-100">
                     <tr>
                       {showCheckbox && (
                         <th className="w-5 px-4 py-2">
@@ -133,7 +133,7 @@ const ExcelViewer = ({
                           <tr
                             key={currentRowIndex}
                             className={`
-                            ${rowIndex % 2 === 0 ? "bg-gray-50" : "bg-white"}
+                            ${rowIndex % 2 === 0 ? "bg-secondary-50" : "bg-white"}
                           `}
                           >
                             {showCheckbox && (
@@ -218,12 +218,12 @@ const ExcelViewer = ({
                 </table>
               </div>
             ) : (
-              <div className="text-gray-500">No data found</div>
+              <div className="text-secondary-500">No data found</div>
             )}
           </div>
           {fileData && fileData.length > 5 && (
             <div className="flex w-full flex-wrap items-center justify-between">
-              <p className="my-6 text-gray-600 md:w-auto">
+              <p className="my-6 text-secondary-600 md:w-auto">
                 Showing {currentPage * rowsPerPage - rowsPerPage + 1} to{" "}
                 {currentPage * rowsPerPage > fileData.length
                   ? fileData.length
@@ -242,7 +242,7 @@ const ExcelViewer = ({
                 />
               )}
               <select
-                className="my-4 ml-2 h-9 w-[4.5rem] rounded-md border border-primary-400 py-0 pl-2 pr-4 text-gray-600"
+                className="my-4 ml-2 h-9 w-[4.5rem] rounded-md border border-primary-400 py-0 pl-2 pr-4 text-secondary-600"
                 value={rowsPerPage}
                 onChange={(e) => {
                   setRowsPerPage(+e.target.value);
diff --git a/src/Components/Common/FacilitySelect.tsx b/src/Components/Common/FacilitySelect.tsx
index 2b820b40d6a..526bf6d68ac 100644
--- a/src/Components/Common/FacilitySelect.tsx
+++ b/src/Components/Common/FacilitySelect.tsx
@@ -17,7 +17,7 @@ interface FacilitySelectProps {
   district?: string;
   state?: string;
   showAll?: boolean;
-  showNOptions?: number;
+  showNOptions?: number | undefined;
   freeText?: boolean;
   selected?: FacilityModel | FacilityModel[] | null;
   setSelected: (selected: FacilityModel | FacilityModel[] | null) => void;
@@ -34,7 +34,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
     searchAll,
     disabled = false,
     showAll = true,
-    showNOptions = 10,
+    showNOptions,
     className = "",
     facilityType,
     district,
@@ -65,6 +65,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
         data?.results?.push({
           name: text,
         });
+
       return data?.results;
     },
     [searchAll, showAll, facilityType, district, exclude_user, freeText],
diff --git a/src/Components/Common/FilePreviewDialog.tsx b/src/Components/Common/FilePreviewDialog.tsx
index 3f55621e8c7..fc4345cc321 100644
--- a/src/Components/Common/FilePreviewDialog.tsx
+++ b/src/Components/Common/FilePreviewDialog.tsx
@@ -105,7 +105,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
       {fileUrl ? (
         <>
           <div className="mb-2 flex flex-col items-center justify-between md:flex-row">
-            <p className="text-md font-semibold text-gray-700">
+            <p className="text-md font-semibold text-secondary-700">
               {file_state.name}.{file_state.extension}
             </p>
             <div className="flex gap-4">
@@ -125,7 +125,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
           </div>
           <div className="flex flex-1 items-center justify-center">
-            <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-gray-200">
+            <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
               {file_state.isImage ? (
                 <img
                   src={fileUrl}
@@ -154,7 +154,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 <div className="flex h-full w-full flex-col items-center justify-center">
                   <CareIcon
                     icon="l-file"
-                    className="mb-4 text-5xl text-gray-600"
+                    className="mb-4 text-5xl text-secondary-600"
                   />
                   Can't preview this file. Try downloading it.
                 </div>
diff --git a/src/Components/Common/GLocationPicker.tsx b/src/Components/Common/GLocationPicker.tsx
index f71583c2322..bfe95735127 100644
--- a/src/Components/Common/GLocationPicker.tsx
+++ b/src/Components/Common/GLocationPicker.tsx
@@ -222,7 +222,7 @@ const Map: React.FC<MapProps> = ({
             >
               <CareIcon
                 icon="l-times-circle"
-                className="text-2xl text-gray-800"
+                className="text-2xl text-secondary-800"
               />
             </div>
           </Popover.Button>
@@ -240,7 +240,7 @@ const Map: React.FC<MapProps> = ({
           >
             <CareIcon
               icon="l-user-location"
-              className="text-2xl text-gray-800"
+              className="text-2xl text-secondary-800"
             />
           </div>
         )}
diff --git a/src/Components/Common/HeadedTabs.tsx b/src/Components/Common/HeadedTabs.tsx
index 38765431d94..33e8c96a239 100644
--- a/src/Components/Common/HeadedTabs.tsx
+++ b/src/Components/Common/HeadedTabs.tsx
@@ -20,7 +20,7 @@ export default function HeadedTabs(props: headedTabsProps) {
         <select
           id="tabs"
           name="tabs"
-          className="block w-full rounded-md border-gray-300 focus:border-primary-500 focus:ring-primary-500"
+          className="block w-full rounded-md border-secondary-300 focus:border-primary-500 focus:ring-primary-500"
           defaultValue={tabs[0].value}
           onChange={(e) => {
             handleChange(
@@ -34,7 +34,7 @@ export default function HeadedTabs(props: headedTabsProps) {
         </select>
       </div>
       <div className="hidden sm:block">
-        <div className="border-b border-gray-200">
+        <div className="border-b border-secondary-200">
           <nav
             className="-mb-px flex items-center justify-center"
             aria-label="Tabs"
@@ -46,7 +46,7 @@ export default function HeadedTabs(props: headedTabsProps) {
                 className={`${
                   tab.value === currentTabState
                     ? "border-primary-500 text-primary-600"
-                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    : "border-transparent text-secondary-500 hover:border-secondary-300 hover:text-secondary-700"
                 } w-1/4 cursor-pointer border-b-2 px-1 py-4 text-center text-sm font-medium`}
                 onClick={() => {
                   handleChange(tab.value);
diff --git a/src/Components/Common/LanguageSelectorLogin.tsx b/src/Components/Common/LanguageSelectorLogin.tsx
index 1f4e8593d2a..1fc4cf4ac77 100644
--- a/src/Components/Common/LanguageSelectorLogin.tsx
+++ b/src/Components/Common/LanguageSelectorLogin.tsx
@@ -18,7 +18,7 @@ export const LanguageSelectorLogin = () => {
   };
 
   return (
-    <div className="mt-8 flex flex-col items-center text-sm text-gray-800">
+    <div className="mt-8 flex flex-col items-center text-sm text-secondary-800">
       {t("available_in")}
       <br />
       <div className="inline-flex flex-wrap gap-3">
diff --git a/src/Components/Common/PageTitle.tsx b/src/Components/Common/PageTitle.tsx
index 990dc7b72cc..3af4c873872 100644
--- a/src/Components/Common/PageTitle.tsx
+++ b/src/Components/Common/PageTitle.tsx
@@ -70,7 +70,7 @@ export default function PageTitle({
             >
               <CareIcon
                 icon="l-angle-left"
-                className="border-box mr-1 rounded-md text-5xl hover:bg-gray-200"
+                className="border-box mr-1 rounded-md text-5xl hover:bg-secondary-200"
               />{" "}
             </button>
           )}
diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx
index abd158b2da7..9c26de9a051 100644
--- a/src/Components/Common/Sidebar/Sidebar.tsx
+++ b/src/Components/Common/Sidebar/Sidebar.tsx
@@ -223,7 +223,7 @@ interface ToggleShrinkProps {
 
 const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => (
   <div
-    className={`flex h-10 w-10 cursor-pointer items-center justify-center self-end rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
+    className={`flex h-10 w-10 cursor-pointer items-center justify-center self-end rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
       shrinked ? "mx-auto" : "mr-4"
     } transition-all duration-200 ease-in-out`}
     onClick={toggle}
diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
index 02170f453d7..69678f676d4 100644
--- a/src/Components/Common/Sidebar/SidebarUserCard.tsx
+++ b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -21,7 +21,7 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
       <div className="flex cursor-pointer justify-center" onClick={signOut}>
         <CareIcon
           icon="l-sign-out-alt"
-          className={`text-2xl text-gray-400 ${
+          className={`text-2xl text-secondary-400 ${
             shrinked ? "visible" : "hidden"
           }`}
         />
@@ -46,9 +46,9 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
         >
           <CareIcon
             icon="l-sign-out-alt"
-            className={`${shrinked ? "text-xl" : "mr-1"} text-gray-400`}
+            className={`${shrinked ? "text-xl" : "mr-1"} text-secondary-400`}
           />
-          <p className="text-gray-400 text-opacity-80">{t("sign_out")}</p>
+          <p className="text-secondary-400 text-opacity-80">{t("sign_out")}</p>
         </div>
       </div>
     </div>
diff --git a/src/Components/Common/SlideOver.res b/src/Components/Common/SlideOver.res
index dbcacbe1bad..75f1c963c6e 100644
--- a/src/Components/Common/SlideOver.res
+++ b/src/Components/Common/SlideOver.res
@@ -13,7 +13,7 @@ let make = (~show, ~setShow, ~children) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0">
           <div
-            className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+            className="absolute inset-0 bg-secondary-500 bg-opacity-75 transition-opacity"
             onClick={_ => setShow(false)}
           />
         </Transition>
diff --git a/src/Components/Common/Steps.tsx b/src/Components/Common/Steps.tsx
index e0b1e03af3f..31c5145835f 100644
--- a/src/Components/Common/Steps.tsx
+++ b/src/Components/Common/Steps.tsx
@@ -13,7 +13,7 @@ export default function Steps(props: { steps: Step[] }) {
     <nav aria-label="Progress">
       <ol
         role="list"
-        className="divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0"
+        className="divide-y divide-secondary-300 rounded-md border border-secondary-300 md:flex md:divide-y-0"
       >
         {props.steps.map((step, stepIdx) => (
           <li key={step.name} className="relative md:flex md:flex-1">
@@ -34,7 +34,7 @@ export default function Steps(props: { steps: Step[] }) {
                       aria-hidden="true"
                     />
                   </span>
-                  <span className="ml-4 text-sm font-medium text-gray-900">
+                  <span className="ml-4 text-sm font-medium text-secondary-900">
                     {step.name}
                   </span>
                 </span>
@@ -66,12 +66,12 @@ export default function Steps(props: { steps: Step[] }) {
                 }`}
               >
                 <span className="flex items-center px-6 py-4 text-sm font-medium">
-                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400">
-                    <span className="text-gray-500 group-hover:text-gray-900">
+                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-secondary-300 group-hover:border-secondary-400">
+                    <span className="text-secondary-500 group-hover:text-secondary-900">
                       {step.id}
                     </span>
                   </span>
-                  <span className="ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900">
+                  <span className="ml-4 text-sm font-medium text-secondary-500 group-hover:text-secondary-900">
                     {step.name}
                   </span>
                 </span>
@@ -85,7 +85,7 @@ export default function Steps(props: { steps: Step[] }) {
                   aria-hidden="true"
                 >
                   <svg
-                    className="h-full w-full text-gray-300"
+                    className="h-full w-full text-secondary-300"
                     viewBox="0 0 22 80"
                     fill="none"
                     preserveAspectRatio="none"
diff --git a/src/Components/Common/Uptime.tsx b/src/Components/Common/Uptime.tsx
index 9e3ba09c7fc..6883d0f3871 100644
--- a/src/Components/Common/Uptime.tsx
+++ b/src/Components/Common/Uptime.tsx
@@ -8,14 +8,14 @@ import { PaginatedResponse, QueryRoute } from "../../Utils/request/types";
 
 const STATUS_COLORS = {
   Operational: "bg-green-500",
-  "Not Monitored": "bg-gray-400",
+  "Not Monitored": "bg-secondary-400",
   Down: "bg-red-500",
   "Under Maintenance": "bg-blue-500",
 };
 
 const STATUS_COLORS_TEXT = {
   Operational: "text-green-500",
-  "Not Monitored": "text-gray-400",
+  "Not Monitored": "text-secondary-400",
   Down: "text-red-500",
   "Under Maintenance": "text-blue-500",
 };
@@ -47,12 +47,12 @@ function UptimeInfo({
   let totalMinutes = 0;
 
   return (
-    <div className="absolute z-50 w-full rounded-lg shadow-lg ring-1 ring-gray-400">
+    <div className="absolute z-50 w-full rounded-lg shadow-lg ring-1 ring-secondary-400">
       <div className="rounded-lg bg-white px-6 py-4">
         <div className="flow-root rounded-md">
-          <div className="block text-center text-sm text-gray-800">
+          <div className="block text-center text-sm text-secondary-800">
             <span className="font-bold ">{date}</span>
-            <div className="my-2 border-t border-gray-200"></div>
+            <div className="my-2 border-t border-secondary-200"></div>
             {incidents.length === 0 ? (
               <>
                 <span>No status for the day</span>
@@ -119,7 +119,7 @@ function UptimeInfo({
                     );
                   })}
                 </div>
-                <div className="my-2 border-t border-gray-200"></div>
+                <div className="my-2 border-t border-secondary-200"></div>
                 <div className="mt-1 flex justify-between">
                   <span className="font-bold">Total downtime</span>
                   <span>
@@ -372,7 +372,7 @@ export default function Uptime(
             {props.header}
             <div>
               <div className="mt-2 overflow-x-clip px-5">
-                <div className="mb-1 mt-2 flex justify-center text-xs text-gray-700 opacity-70">
+                <div className="mb-1 mt-2 flex justify-center text-xs text-secondary-700 opacity-70">
                   {getUptimePercent(numDays)}% uptime
                 </div>
                 <div
@@ -393,21 +393,21 @@ export default function Uptime(
                           <div
                             className={`h-[11px] w-3 rounded-t-sm ${
                               hoveredDay === index
-                                ? "bg-gray-700"
+                                ? "bg-secondary-700"
                                 : dayStatus[0]
                             }`}
                           ></div>
                           <div
                             className={`h-[11px] w-3 ${
                               hoveredDay === index
-                                ? "bg-gray-700"
+                                ? "bg-secondary-700"
                                 : dayStatus[1]
                             }`}
                           ></div>
                           <div
                             className={`h-[11px] w-3 rounded-b-sm ${
                               hoveredDay === index
-                                ? "bg-gray-700"
+                                ? "bg-secondary-700"
                                 : dayStatus[2]
                             }`}
                           ></div>
@@ -425,7 +425,7 @@ export default function Uptime(
                   })}
                 </div>
                 <div
-                  className={`flex text-xs text-gray-700 opacity-70 ${
+                  className={`flex text-xs text-secondary-700 opacity-70 ${
                     hoveredDay == -1 && "mt-2"
                   }`}
                 >
diff --git a/src/Components/Common/UserAutocompleteFormField.tsx b/src/Components/Common/UserAutocompleteFormField.tsx
index 9e94c5e4e68..c7694b74e4e 100644
--- a/src/Components/Common/UserAutocompleteFormField.tsx
+++ b/src/Components/Common/UserAutocompleteFormField.tsx
@@ -48,7 +48,7 @@ export default function UserAutocompleteFormField(props: Props) {
       <div className="mr-6 mt-[2px]">
         <svg
           className={`h-3 w-3 ${
-            isUserOnline(option) ? "text-green-500" : "text-gray-400"
+            isUserOnline(option) ? "text-green-500" : "text-secondary-400"
           }`}
           fill="currentColor"
           viewBox="0 0 8 8"
diff --git a/src/Components/Common/UserDetails.tsx b/src/Components/Common/UserDetails.tsx
index 16df560f07f..2e4355f98bb 100644
--- a/src/Components/Common/UserDetails.tsx
+++ b/src/Components/Common/UserDetails.tsx
@@ -7,7 +7,7 @@ function UserDetails(props: {
 }) {
   return (
     <div className="mt-2" id={props.id}>
-      <div className="font-light leading-relaxed text-gray-900">
+      <div className="font-light leading-relaxed text-secondary-900">
         {props.title}:
       </div>
       {props.children}
diff --git a/src/Components/Common/components/ButtonV2.tsx b/src/Components/Common/components/ButtonV2.tsx
index 3bc5a41e799..014a182ba94 100644
--- a/src/Components/Common/components/ButtonV2.tsx
+++ b/src/Components/Common/components/ButtonV2.tsx
@@ -100,14 +100,16 @@ const ButtonV2 = ({
   tooltipClassName,
   ...props
 }: ButtonProps) => {
+  shadow ??= !ghost;
+
   const className = classNames(
     props.className,
-    "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-gray-200 disabled:text-gray-500",
+    "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-lg",
+    shadow && "shadow enabled:hover:shadow-md",
     tooltip && "tooltip",
   );
 
diff --git a/src/Components/Common/components/ContactLink.tsx b/src/Components/Common/components/ContactLink.tsx
index 762558f5bb2..ff13433cc3b 100644
--- a/src/Components/Common/components/ContactLink.tsx
+++ b/src/Components/Common/components/ContactLink.tsx
@@ -13,7 +13,7 @@ export default function ContactLink(props: ContactLinkProps) {
       >
         <CareIcon
           icon={props.tel ? "l-outgoing-call" : "l-envelope-alt"}
-          className="h-5 fill-gray-700"
+          className="h-5 fill-secondary-700"
         />
         {props.tel ? props.tel : props.mailto}
       </a>
diff --git a/src/Components/Common/components/Menu.tsx b/src/Components/Common/components/Menu.tsx
index 1caac9edc12..a6f66ff9d2f 100644
--- a/src/Components/Common/components/Menu.tsx
+++ b/src/Components/Common/components/Menu.tsx
@@ -34,7 +34,7 @@ export default function DropdownMenu({
       <Menu as="div" className="relative inline-block w-full text-left">
         <Menu.Button
           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-gray-200 disabled:text-gray-500 lg:justify-between ${props.className}`}
+          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}`}
         >
           <div
             className={classNames(
diff --git a/src/Components/Common/components/SkeletonLoading.res b/src/Components/Common/components/SkeletonLoading.res
index 46ae08071f6..71f4f11df91 100644
--- a/src/Components/Common/components/SkeletonLoading.res
+++ b/src/Components/Common/components/SkeletonLoading.res
@@ -33,7 +33,7 @@ let userCard = () =>
     <div className="skeleton-body-wrapper px-2 lg:px-0">
       <div className="skeleton-placeholder__card px-5 py-6 bg-white rounded-lg shadow">
         <div className="flex items-center">
-          <div className="w-14 h-14 bg-gray-100 rounded-full mr-4 skeleton-animate" />
+          <div className="w-14 h-14 bg-secondary-100 rounded-full mr-4 skeleton-animate" />
           <div className="flex-1">
             <div className="skeleton-placeholder__line-sm w-2/6 skeleton-animate" />
             <div className="skeleton-placeholder__line-sm mt-4 w-3/6 skeleton-animate" />
@@ -57,7 +57,7 @@ let profileCard = () =>
   <div className="skeleton-body-container w-full pb-4 mx-auto">
     <div className="skeleton-body-wrapper max-w-sm mt-8 px-3 lg:px-0">
       <div className="flex items-center">
-        <div className="w-14 h-14 bg-gray-100 rounded-full mr-4 skeleton-animate" />
+        <div className="w-14 h-14 bg-secondary-100 rounded-full mr-4 skeleton-animate" />
         <div className="flex-1">
           <div className="skeleton-placeholder__line-sm w-3/6 skeleton-animate" />
           <div className="skeleton-placeholder__line-sm mt-4 skeleton-animate" />
diff --git a/src/Components/Common/components/Switch.tsx b/src/Components/Common/components/Switch.tsx
index 2253e95d155..7be7490f7b1 100644
--- a/src/Components/Common/components/Switch.tsx
+++ b/src/Components/Common/components/Switch.tsx
@@ -29,7 +29,7 @@ export default function SwitchV2<T>(props: SwitchProps<T>) {
           const additionalClassNames = selected
             ? (props.optionClassName && props.optionClassName(option)) ||
               "bg-primary-500 hover:bg-primary-600 text-white border-primary-500 focus:ring-primary-500 focus:border-primary-500"
-            : "bg-gray-50 hover:bg-gray-200 border-gray-400 focus:ring-primary-500 focus:border-primary-500";
+            : "bg-secondary-50 hover:bg-secondary-200 border-secondary-400 focus:ring-primary-500 focus:border-primary-500";
 
           return (
             <li
diff --git a/src/Components/Common/components/Table.tsx b/src/Components/Common/components/Table.tsx
index cd2b481fb43..ef872d511c8 100644
--- a/src/Components/Common/components/Table.tsx
+++ b/src/Components/Common/components/Table.tsx
@@ -51,7 +51,7 @@ export default function Table(props: {
                 );
               }
               return (
-                <div className="flex min-w-[24px] items-center justify-center py-[14px] text-center text-sm font-bold text-gray-900">
+                <div className="flex min-w-[24px] items-center justify-center py-[14px] text-center text-sm font-bold text-secondary-900">
                   <>{item}</>
                 </div>
               );
diff --git a/src/Components/Common/prescription-builder/InvestigationBuilder.tsx b/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
index 6de2a83f1cb..ef99a7f1acc 100644
--- a/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
+++ b/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
@@ -4,6 +4,7 @@ import { PrescriptionMultiDropdown } from "./PrescriptionMultiselect";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
+import { humanizeStrings } from "../../../Utils/utils";
 
 export type InvestigationType = {
   type?: string[];
@@ -86,9 +87,9 @@ export default function InvestigationBuilder(
     return (
       data?.results.map(
         (investigation) =>
-          `${investigation.name} -- ${investigation.groups
-            .map((group) => ` ( ${group.name} ) `)
-            .join(", ")}`,
+          `${investigation.name} -- ${humanizeStrings(
+            investigation.groups.map((group) => ` ( ${group.name} ) `),
+          )}`,
       ) ?? []
     );
   };
@@ -125,16 +126,16 @@ export default function InvestigationBuilder(
           <div
             key={i}
             className={`border-2 ${
-              activeIdx === i ? "border-primary-500" : "border-gray-500"
-            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-gray-600`}
+              activeIdx === i ? "border-primary-500" : "border-secondary-500"
+            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-secondary-600`}
           >
             <div className="mb-2 flex flex-wrap items-center gap-2 md:flex-row md:gap-4">
-              <h4 className="text-base font-medium text-gray-700">
+              <h4 className="text-base font-medium text-secondary-700">
                 Investigation No. {i + 1}
               </h4>
               <button
                 type="button"
-                className="flex h-full items-center justify-center gap-1.5 rounded-md bg-red-500 px-3 py-1 text-sm text-gray-100 transition hover:bg-red-600"
+                className="flex h-full items-center justify-center gap-1.5 rounded-md bg-red-500 px-3 py-1 text-sm text-secondary-100 transition hover:bg-red-600"
                 onClick={() =>
                   setInvestigations(
                     investigations.filter((investigation, index) => i != index),
@@ -210,7 +211,7 @@ export default function InvestigationBuilder(
                       Time<span className="text-danger-500">{" *"}</span>
                       <input
                         type="datetime-local"
-                        className="block w-[calc(100%-5px)] rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                        className="block w-[calc(100%-5px)] rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                         value={investigation.time || ""}
                         onChange={(e) => {
                           setItem(
@@ -257,7 +258,7 @@ export default function InvestigationBuilder(
         onClick={() => {
           setInvestigations([...investigations, { repetitive: false }]);
         }}
-        className="mt-4 block w-full bg-gray-200 px-4 py-2 text-left text-sm font-bold leading-5 text-gray-700 shadow-sm hover:bg-gray-300 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
+        className="mt-4 block w-full bg-secondary-200 px-4 py-2 text-left text-sm font-bold leading-5 text-secondary-700 shadow-sm hover:bg-secondary-300 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900 focus:outline-none"
       >
         + Add Investigation
       </button>
diff --git a/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx b/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx
index dbfa0749ef1..6d122d00a5a 100644
--- a/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx
+++ b/src/Components/Common/prescription-builder/PrescriptionDropdown.tsx
@@ -62,7 +62,7 @@ export function PrescriptionDropdown(props: {
                 id="frequency-interval"
                 type="button"
                 key={i}
-                className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
+                className="block w-full px-4 py-2 text-left text-sm leading-5 text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900 focus:outline-none"
                 onClick={() => {
                   setValue(option);
                   setOpen(false);
diff --git a/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx b/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx
index 79ae3356ee4..4f744bcbae7 100644
--- a/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx
+++ b/src/Components/Common/prescription-builder/PrescriptionMultiselect.tsx
@@ -84,10 +84,10 @@ export function PrescriptionMultiDropdown(props: {
                 id="investigation-group"
                 key={i}
                 className={classNames(
-                  "block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:text-gray-900 focus:text-gray-900 focus:outline-none",
+                  "block w-full px-4 py-2 text-left text-sm leading-5 text-secondary-700 hover:text-secondary-900 focus:text-secondary-900 focus:outline-none",
                   selectedValues.includes(option)
                     ? "bg-primary-100 hover:bg-primary-200"
-                    : "hover:bg-gray-100 focus:bg-gray-100",
+                    : "hover:bg-secondary-100 focus:bg-secondary-100",
                 )}
                 onClick={() => {
                   setSelectedValues(
diff --git a/src/Components/Common/prescription-builder/ProcedureBuilder.tsx b/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
index 5eca95354bf..fe7ec3cda3c 100644
--- a/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
+++ b/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
@@ -41,18 +41,18 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
           <div
             key={i}
             className={`border-2 ${
-              activeIdx === i ? "border-primary-500" : "border-gray-500"
-            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-gray-600`}
+              activeIdx === i ? "border-primary-500" : "border-secondary-500"
+            } mb-2 border-spacing-2 rounded-md border-dashed p-3 text-sm text-secondary-600`}
           >
             <div className="flex flex-col gap-2 md:flex-row">
               <div className="flex w-full flex-1 flex-col gap-2">
                 <div className="flex flex-wrap items-center gap-2 md:flex-row md:gap-4">
-                  <h4 className="text-base font-medium text-gray-700">
+                  <h4 className="text-base font-medium text-secondary-700">
                     Procedure No. {i + 1}
                   </h4>
                   <button
                     type="button"
-                    className="flex h-full items-center justify-center gap-2 rounded-md bg-red-500 px-3 py-1 text-sm text-gray-100 transition hover:bg-red-600"
+                    className="flex h-full items-center justify-center gap-2 rounded-md bg-red-500 px-3 py-1 text-sm text-secondary-100 transition hover:bg-red-600"
                     onClick={() =>
                       setProcedures(
                         procedures.filter((procedure, index) => i != index),
@@ -69,7 +69,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                   <input
                     id="procedure-name"
                     type="text"
-                    className="mt-1 block w-full rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                    className="mt-1 block w-full rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                     placeholder="Procedure"
                     maxLength={100}
                     value={procedure.procedure || ""}
@@ -138,7 +138,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                       <input
                         id="procedure-time"
                         type="datetime-local"
-                        className="block w-[calc(100%-5px)] rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                        className="block w-[calc(100%-5px)] rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                         value={procedure.time || ""}
                         onFocus={() => setActiveIdx(i)}
                         onBlur={() => setActiveIdx(null)}
@@ -160,7 +160,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                   <div className="mb-1">Notes</div>
                   <input
                     type="text"
-                    className="block w-full rounded border border-gray-400 bg-gray-100 px-4 py-2 text-sm hover:bg-gray-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
+                    className="block w-full rounded border border-secondary-400 bg-secondary-100 px-4 py-2 text-sm hover:bg-secondary-200 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-primary-500"
                     placeholder="Notes"
                     value={procedure.notes || ""}
                     onFocus={() => setActiveIdx(i)}
@@ -186,7 +186,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
         onClick={() => {
           setProcedures([...procedures, { repetitive: false }]);
         }}
-        className="mt-4 block w-full bg-gray-200 px-4 py-2 text-left text-sm font-bold leading-5 text-gray-700 shadow-sm hover:bg-gray-300 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-none"
+        className="mt-4 block w-full bg-secondary-200 px-4 py-2 text-left text-sm font-bold leading-5 text-secondary-700 shadow-sm hover:bg-secondary-300 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900 focus:outline-none"
       >
         + Add Procedures
       </button>
diff --git a/src/Components/CriticalCareRecording/CriticalCare__Index.res b/src/Components/CriticalCareRecording/CriticalCare__Index.res
index 56bc5623264..0290728fd82 100644
--- a/src/Components/CriticalCareRecording/CriticalCare__Index.res
+++ b/src/Components/CriticalCareRecording/CriticalCare__Index.res
@@ -11,17 +11,20 @@ let renderLine = (title, value) => {
 let renderIndicators = (title, value, isMin, isMax, minText, maxText) => {
   let indicator = if isMax {
     <span className="inline-block bg-red-200 rounded-full px-2 mx-3 my-1 text-xs py-1 text-red-800">
-      <CareIcon icon="l-exclamation-triangle" className="mr-2" /> {str(maxText)}
+      <CareIcon icon="l-exclamation-triangle" className="mr-2" />
+      {str(maxText)}
     </span>
   } else if isMin {
     <span
       className="inline-block bg-yellow-200 rounded-full px-2 mx-3 my-1 text-xs py-1 text-yellow-800">
-      <CareIcon icon="l-exclamation-triangle" className="mr-2" /> {str(minText)}
+      <CareIcon icon="l-exclamation-triangle" className="mr-2" />
+      {str(minText)}
     </span>
   } else {
     <span
       className="inline-block bg-green-200 rounded-full px-2 mx-3 my-1 text-xs py-1 text-green-800">
-      <CareIcon icon="l-check-circle" className="mr-2" /> {str("Normal")}
+      <CareIcon icon="l-check-circle" className="mr-2" />
+      {str("Normal")}
     </span>
   }
 
@@ -109,25 +112,25 @@ let make = (
     </div>
     <div>
       <div
-        className="bg-white px-2 md:px-6 py-5 border-b border-gray-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
+        className="bg-white px-2 md:px-6 py-5 border-b border-secondary-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
         <h1 className="text-4xl sm:text-5xl"> {str("Consultation Update")} </h1>
         <div>
           <CriticalCare__PageTitle title="General" />
           <DailyRound__General others title renderOptionalDescription />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Neurological Monitoring" />
           <DailyRound__NeurologicalMonitoring
             neurologicalMonitoring title renderLine renderOptionalDescription renderOptionalInt
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Medicines" />
           <DailyRound__Medicines prescriptions={medicine} />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Arterial Blood Gas Analysis" />
           <DailyRound__ABG
@@ -136,19 +139,19 @@ let make = (
             renderOptionalFloatWithIndicators
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Blood Sugar" />
           <DailyRound__BloodSugar
             bloodSugar renderOptionalIntWithIndicators renderOptionalFloat renderLine
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Dialysis" />
           <DailyRound__Dialysis dialysis renderOptionalInt />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Vitals" />
           <DailyRound__HemodynamicParameters
@@ -163,17 +166,17 @@ let make = (
             renderOptionalInt
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="I/O Balance" />
           <DailyRound__IOBalance ioBalance title renderOptionalDescription />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Nursing Care" />
           <DailyRound__NursingCare nursingCare renderLine />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Pressure Sore" />
           <CriticalCare__PressureSoreEditor
@@ -184,7 +187,7 @@ let make = (
             consultationId={consultationId}
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Respiratory Support" />
           <DailyRound__VentilatorParameters
@@ -195,12 +198,12 @@ let make = (
             renderLine
           />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
         <div>
           <CriticalCare__PageTitle title="Others" />
           <DailyRound__Others others renderOptionalIntWithIndicators renderOptionalBool />
         </div>
-        <div className="grow border-t border-gray-400 mt-4" />
+        <div className="grow border-t border-secondary-400 mt-4" />
       </div>
     </div>
   </div>
diff --git a/src/Components/CriticalCareRecording/DailyRound__Medicines.res b/src/Components/CriticalCareRecording/DailyRound__Medicines.res
index 4ecca39a4f5..ce143c24d29 100644
--- a/src/Components/CriticalCareRecording/DailyRound__Medicines.res
+++ b/src/Components/CriticalCareRecording/DailyRound__Medicines.res
@@ -8,20 +8,20 @@ let make = (~prescriptions) => {
       : <div className="flex flex-col">
           <div className="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
             <div
-              className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+              className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-secondary-200">
               <table className="min-w-full">
                 <thead>
                   <tr>
                     <th
-                      className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                      className="px-6 py-3 border-b border-secondary-200 bg-secondary-50 text-left text-xs leading-4 font-medium text-secondary-500 uppercase tracking-wider">
                       {str("Medicine")}
                     </th>
                     <th
-                      className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                      className="px-6 py-3 border-b border-secondary-200 bg-secondary-50 text-left text-xs leading-4 font-medium text-secondary-500 uppercase tracking-wider">
                       {str("Dosage")}
                     </th>
                     <th
-                      className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                      className="px-6 py-3 border-b border-secondary-200 bg-secondary-50 text-left text-xs leading-4 font-medium text-secondary-500 uppercase tracking-wider">
                       {str("Days")}
                     </th>
                   </tr>
@@ -29,13 +29,15 @@ let make = (~prescriptions) => {
                 <tbody> {Js.Array.mapi((p, index) => {
                     <tr className="bg-white" key={string_of_int(index)}>
                       <td
-                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-900">
+                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-secondary-900">
                         {str(Prescription__Prescription.medicine(p))}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-500">
+                      <td
+                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-secondary-500">
                         {str(Prescription__Prescription.dosage(p))}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-500">
+                      <td
+                        className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-secondary-500">
                         {str(string_of_int(Prescription__Prescription.days(p)))}
                       </td>
                     </tr>
diff --git a/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res b/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res
index 829df2aa078..47cc040440e 100644
--- a/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res
+++ b/src/Components/CriticalCareRecording/HemodynamicParameters/CriticalCare__HemodynamicParametersEditor.res
@@ -53,7 +53,7 @@ let reducer = (state, action) => {
   switch action {
   | SetPain(pain) => {
       ...state,
-      pain: pain,
+      pain,
       dirty: true,
     }
   | SetSystolic(systolic) => {
@@ -85,10 +85,10 @@ let reducer = (state, action) => {
       resp: Some(resp),
       dirty: true,
     }
-  | SetRhythm(rhythm) => {...state, rhythm: rhythm, dirty: true}
+  | SetRhythm(rhythm) => {...state, rhythm, dirty: true}
   | SetRhythmDetails(rhythmDetails) => {
       ...state,
-      rhythmDetails: rhythmDetails,
+      rhythmDetails,
       dirty: true,
     }
   | SetSaving => {...state, saving: true}
@@ -143,7 +143,11 @@ let makePayload = state => {
     Js.Dict.set(payload, "bp", Js.Json.object_(makeBpPayload(systolic, diastolic)))
   | (_, _) => ()
   }
-  Js.Dict.set(payload, "pain_scale_enhanced", Js.Json.objectArray(Js.Array.map(makePainField, state.pain)))
+  Js.Dict.set(
+    payload,
+    "pain_scale_enhanced",
+    Js.Json.objectArray(Js.Array.map(makePainField, state.pain)),
+  )
   DictUtils.setOptionalNumber("pulse", state.pulse, payload)
   DictUtils.setOptionalNumber("ventilator_spo2", state.spo2, payload)
   DictUtils.setOptionalFloat(
@@ -256,11 +260,11 @@ let make = (~hemodynamicParameter, ~updateCB, ~id, ~consultationId) => {
           hasError={ValidationUtils.isInputInRangeInt(0, 100, state.spo2)}
         />
       </div>
-      <div className="border-b border-b-gray-500 w-full my-10" />
+      <div className="border-b border-b-secondary-500 w-full my-10" />
       <Slider
         title={"Temperature"}
         titleNeighbour={<div
-          className="flex items-center ml-1 border border-gray-400 rounded px-4 h-10 cursor-pointer hover:bg-gray-200"
+          className="flex items-center ml-1 border border-secondary-400 rounded px-4 h-10 cursor-pointer hover:bg-secondary-200"
           onClick={_ => ToggleTemperatureUnit->send}>
           <span className="text-blue-700"> {state.tempInCelcius ? "C"->str : "F"->str} </span>
         </div>}
@@ -291,19 +295,19 @@ let make = (~hemodynamicParameter, ~updateCB, ~id, ~consultationId) => {
       <div className="w-full">
         <div className="mx-2">
           <h4> {str("Pain")} </h4>
-          <p>{str("Mark region and intensity of pain")}</p>
+          <p> {str("Mark region and intensity of pain")} </p>
         </div>
       </div>
       <CriticalCare__PainEditor
         previewMode={false}
         painParameter={state.pain}
         updateCB={data => {
-          send(SetPain(data));
+          send(SetPain(data))
         }}
         id={id}
         consultationId={consultationId}
       />
-      <div className="border-b border-b-gray-500 w-full mt-10" />
+      <div className="border-b border-b-secondary-500 w-full mt-10" />
       <Slider
         title={"Pulse (bpm)"}
         start={"0"}
@@ -337,7 +341,7 @@ let make = (~hemodynamicParameter, ~updateCB, ~id, ~consultationId) => {
         </label>
         <textarea
           id="description"
-          className="block w-full border-gray-500 border-2 rounded px-2 py-1 focus:outline-green-500 focus:outline-offset-0 focus:outline-1 focus:border-green-500"
+          className="block w-full border-secondary-500 border-2 rounded px-2 py-1 focus:outline-green-500 focus:outline-offset-0 focus:outline-1 focus:border-green-500"
           rows=3
           value={state.rhythmDetails}
           onChange={e => send(SetRhythmDetails(ReactEvent.Form.target(e)["value"]))}
diff --git a/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res b/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res
index 0c285cd9714..94f68240720 100644
--- a/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res
+++ b/src/Components/CriticalCareRecording/HemodynamicParameters/DailyRound__HemodynamicParameters.res
@@ -17,7 +17,7 @@ let make = (
     <div>
       {switch HemodynamicParameters.bp(hemodynamicParameter) {
       | Some(data) =>
-        <div className="px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        <div className="px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
           {title("Blood Pressure: ")}
           {renderIntWithIndicators("Systolic", data.systolic, 100, 140, "Low", "High")}
           {renderIntWithIndicators("Diastolic", data.diastolic, 50, 90, "Low", "High")}
@@ -53,12 +53,12 @@ let make = (
     )}
     <h3 className="mt-4"> {str("Pain Scale")} </h3>
     <CriticalCare__PainEditor
-        previewMode={true}
-        painParameter={HemodynamicParameters.pain(hemodynamicParameter)}
-        updateCB={_ => ()}
-        id={""}
-        consultationId={""}
-      />
+      previewMode={true}
+      painParameter={HemodynamicParameters.pain(hemodynamicParameter)}
+      updateCB={_ => ()}
+      id={""}
+      consultationId={""}
+    />
     {renderLine(
       "Rhythm",
       HemodynamicParameters.rhythmToString(HemodynamicParameters.rhythm(hemodynamicParameter)),
diff --git a/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res b/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res
index 97d1001fc61..17f6f3c34dd 100644
--- a/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res
+++ b/src/Components/CriticalCareRecording/IOBalance/DailyRound__IOBalance.res
@@ -7,81 +7,73 @@ let make = (~ioBalance, ~title, ~renderOptionalDescription) => {
     <div>
       {title("Infusions")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.infusions(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.infusions(ioBalance))->React.array}
       </table>
     </div>
     <div>
       {title("IV Fluid")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.ivFluid(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.ivFluid(ioBalance))->React.array}
       </table>
     </div>
     <div>
       {title("Feed")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.feed(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.feed(ioBalance))->React.array}
       </table>
     </div>
     <div>
       {title("Output")}
       <table
-        className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+        className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         <tr>
           <th className="text-left border p-2 w-1/2"> {str("Name")} </th>
           <th className="text-left border p-2 w-1/2"> {str("Quantity")} </th>
         </tr>
-        {Js.Array.map(
-          item =>
-            <tr>
-              <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
-              <td className="text-left border p-2 w-1/2">
-                {React.float(IOBalance.quantity(item))}
-              </td>
-            </tr>,
-          IOBalance.output(ioBalance),
-        )->React.array}
+        {Js.Array.map(item =>
+          <tr>
+            <td className="text-left border p-2 w-1/2"> {str(IOBalance.name(item))} </td>
+            <td className="text-left border p-2 w-1/2">
+              {React.float(IOBalance.quantity(item))}
+            </td>
+          </tr>
+        , IOBalance.output(ioBalance))->React.array}
       </table>
     </div>
     {renderOptionalDescription(
diff --git a/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res b/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res
index 9c59996964b..b858c19f61a 100644
--- a/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res
+++ b/src/Components/CriticalCareRecording/IOBalance/IOBalance__Summary.res
@@ -3,7 +3,7 @@ let str = React.string
 @react.component
 let make = (~leftMain, ~rightMain, ~rightSub, ~noBorder=false) => {
   <div className={"flex justify-between items-center " ++ (noBorder ? "" : "border-b-4")}>
-    <div className="text-xl font-bold text-gray-800 pt-2"> {str(leftMain)} </div>
+    <div className="text-xl font-bold text-secondary-800 pt-2"> {str(leftMain)} </div>
     <div className="flex items-center text-primary-500">
       <div className="text-sm font-bold pt-3"> {str(rightSub)} </div>
       <div className="text-4xl font-bold ml-2"> {str(rightMain)} </div>
diff --git a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res
index 780e5abd751..448b74cf726 100644
--- a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res
+++ b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitPicker.res
@@ -27,7 +27,7 @@ let renderSelectables = (selections, updateCB) =>
       type_="button"
       key={index |> string_of_int}
       onClick={_ => updateCB(selection)}
-      className="w-full block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+      className="w-full block px-4 py-2 text-sm leading-5 text-left text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:outline-none focus:bg-secondary-100 focus:text-secondary-900">
       {selection |> str}
     </button>
   )
@@ -76,9 +76,12 @@ let make = (~id, ~value, ~updateCB, ~placeholder, ~selectables) => {
       id
       value
       autoComplete="off"
-      onClick={e => {ReactEvent.Mouse.stopPropagation(e);setShowDropdown(_ => !showDropdown)}}
+      onClick={e => {
+        ReactEvent.Mouse.stopPropagation(e)
+        setShowDropdown(_ => !showDropdown)
+      }}
       onChange={e => updateCB(ReactEvent.Form.target(e)["value"])}
-      className="appearance-none h-10 mt-1 block w-full border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:ring-primary-500"
+      className="appearance-none h-10 mt-1 block w-full border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:ring-primary-500"
       placeholder
       required=true
     />
diff --git a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res
index be062f539a4..73d07909555 100644
--- a/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res
+++ b/src/Components/CriticalCareRecording/IOBalance/IOBalance__UnitSection.res
@@ -34,7 +34,7 @@ let showUnit = (name, item, params, index, send) => {
     <div className="m-1 rounded-md shadow-sm w-1/6">
       <input
         id={"value" ++ index->string_of_int}
-        className="appearance-none h-10 mt-1 block w-full border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:ring-primary-500"
+        className="appearance-none h-10 mt-1 block w-full border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:ring-primary-500"
         placeholder="Value"
         onChange={e =>
           UpdateValue(ReactEvent.Form.target(e)["value"]->Js.Float.fromString, index)->send}
@@ -46,7 +46,7 @@ let showUnit = (name, item, params, index, send) => {
     </div>
     <div
       onClick={_ => index->DeleteUnit->send}
-      className="appearance-none h-10 mt-1 block border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:border-gray-600 text-gray-600 font-bold">
+      className="appearance-none h-10 mt-1 block border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:border-secondary-600 text-secondary-600 font-bold">
       {"x"->str}
     </div>
   </div>
@@ -60,17 +60,17 @@ let make = (~name, ~items, ~collection, ~updateCB) => {
     collection,
   )
   <div className="px-2 py-5 sm:px-4 max-w-5xl  mt-4">
-    <h3 className={name === "" ? "hidden" : "text-lg leading-6 font-medium text-gray-900"}>
+    <h3 className={name === "" ? "hidden" : "text-lg leading-6 font-medium text-secondary-900"}>
       {name->str}
     </h3>
     <div className="flex justify-between mt-4">
       <div className="m-1 rounded-md shadow-sm w-8/12">
-        <label htmlFor="Field" className="block text-sm font-medium leading-5 text-gray-700">
+        <label htmlFor="Field" className="block text-sm font-medium leading-5 text-secondary-700">
           {"Field"->str}
         </label>
       </div>
       <div className="m-1 rounded-md shadow-sm w-3/12">
-        <label htmlFor="Value" className="block text-sm font-medium leading-5 text-gray-700">
+        <label htmlFor="Value" className="block text-sm font-medium leading-5 text-secondary-700">
           {"Value (ml)"->str}
         </label>
       </div>
@@ -79,11 +79,11 @@ let make = (~name, ~items, ~collection, ~updateCB) => {
       (item, index) => showUnit(name, item, selectables, index, send),
       items,
     )->React.array}
-    <div className={"m-1 rounded-md shadow-sm bg-gray-200"}>
+    <div className={"m-1 rounded-md shadow-sm bg-secondary-200"}>
       <button
         type_="button"
         onClick={_ => AddUnit->send}
-        className="w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+        className="w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:outline-none focus:bg-secondary-100 focus:text-secondary-900">
         {"+ Add a field"->str}
       </button>
     </div>
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res
index a2e12214329..0123f5088d6 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Description.res
@@ -11,7 +11,7 @@ let make = (~name, ~text, ~onChange, ~label=name) => {
     <label htmlFor={name} className="block mt-2"> {str(label)} </label>
     <textarea
       id={name}
-      className="block w-full border-gray-500 border-2 rounded px-2 py-1 mt-2"
+      className="block w-full border-secondary-500 border-2 rounded px-2 py-1 mt-2"
       rows=3
       value={text}
       onChange={handleOnChange(onChange)}
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res
index dfe0e5cc3dc..83f935cd65f 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__NeurologicalMonitoringEditor.res
@@ -479,7 +479,7 @@ let make = (~updateCB, ~neurologicalMonitoring, ~id, ~consultationId) => {
         ~name="consciousness_level",
       )}
       {ReactUtils.nullIf(renderPupil(state, send), state.inPronePosition)}
-      <div className="my-15 w-full h-1 bg-gray-300" />
+      <div className="my-15 w-full h-1 bg-secondary-300" />
       <div className="my-10">
         <div className="text-3xl font-bold"> {str("Glasgow Coma Scale")} </div>
         <div className="mt-4">
@@ -541,7 +541,7 @@ let make = (~updateCB, ~neurologicalMonitoring, ~id, ~consultationId) => {
           </div>
         </div>
       </div>
-      <div className="my-15 w-full h-1 bg-gray-300" />
+      <div className="my-15 w-full h-1 bg-secondary-300" />
       <div className="my-10">
         <div className="text-3xl font-bold"> {str("Limb Response")} </div>
         <div>
@@ -568,7 +568,7 @@ let make = (~updateCB, ~neurologicalMonitoring, ~id, ~consultationId) => {
           )}
         </div>
       </div>
-      <div className="my-15 w-full h-1 bg-gray-300" />
+      <div className="my-15 w-full h-1 bg-secondary-300" />
       <button
         disabled={state.saving || !state.dirty}
         className="btn btn-primary btn-large w-full"
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res
index eb6569fedb3..e5d1c8ff727 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/CriticalCare__Switch.res
@@ -3,10 +3,10 @@ let str = React.string
 @react.component
 let make = (~checked, ~onChange) => {
   <div
-    className="flex flex-row font-semibold leading-relaxed items-center justify-between px-4 py-2 border rounded border-gray-500">
+    className="flex flex-row font-semibold leading-relaxed items-center justify-between px-4 py-2 border rounded border-secondary-500">
     <div> {str("The patient is on prone position")} </div>
     <div>
-      <div className="relative" onClick={_ => onChange(!checked)} >
+      <div className="relative" onClick={_ => onChange(!checked)}>
         <input
           type_="checkbox"
           id="toggle"
@@ -16,13 +16,13 @@ let make = (~checked, ~onChange) => {
         />
         <div
           className={"block w-14 h-8 rounded-full " ++ (
-            checked ? "bg-green-300" : "bg-gray-400"
+            checked ? "bg-green-300" : "bg-secondary-400"
           )}
         />
         <div
           className="transition duration-150 ease-in-out dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full checked:bg-green-300"
         />
-      </div> 
+      </div>
     </div>
   </div>
 }
diff --git a/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res b/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res
index 7dd295ecb51..74b6147de59 100644
--- a/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res
+++ b/src/Components/CriticalCareRecording/NeurologicalMonitoring/DailyRound__NeurologicalMonitoring.res
@@ -17,7 +17,7 @@ let make = (
       ),
     )}
     <div className="flex md:flex-row flex-col mt-2">
-      <div className="px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+      <div className="px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         {title("Left Pupil")}
         {renderOptionalInt("Size", NeurologicalMonitoring.leftPupilSize(neurologicalMonitoring))}
         {renderOptionalDescription(
@@ -35,7 +35,7 @@ let make = (
           NeurologicalMonitoring.leftPupilLightReactionDetails(neurologicalMonitoring),
         )}
       </div>
-      <div className="px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+      <div className="px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
         {title("Right Pupil")}
         {renderOptionalInt("Size", NeurologicalMonitoring.rightPupilSize(neurologicalMonitoring))}
         {renderOptionalDescription(
@@ -73,7 +73,8 @@ let make = (
     <div>
       {title("Limb Response")}
       <div className="flex md:flex-no-wrap flex-wrap">
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Upper Left",
             NeurologicalMonitoring.limpResponseToString(
@@ -81,7 +82,8 @@ let make = (
             ),
           )}
         </div>
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Upper Right",
             NeurologicalMonitoring.limpResponseToString(
@@ -91,7 +93,8 @@ let make = (
         </div>
       </div>
       <div className="flex md:flex-no-wrap flex-wrap">
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Lower Left",
             NeurologicalMonitoring.limpResponseToString(
@@ -99,7 +102,8 @@ let make = (
             ),
           )}
         </div>
-        <div className="border md:w-1/2 w-full p-6 text-center bg-gray-100 hover:bg-gray-300">
+        <div
+          className="border md:w-1/2 w-full p-6 text-center bg-secondary-100 hover:bg-secondary-300">
           {renderLine(
             "Lower Right",
             NeurologicalMonitoring.limpResponseToString(
diff --git a/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res b/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res
index f6dc3f5ab73..d24d60a4614 100644
--- a/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res
+++ b/src/Components/CriticalCareRecording/NursingCare/CriticalCare__NursingCareEditor.res
@@ -124,7 +124,7 @@ let make = (~nursingCare, ~updateCB, ~id, ~consultationId) => {
           | Some(s) =>
             <div id={"text-area" ++ string_of_int(index)} className="px-6">
               <textarea
-                className="appearance-none mt-2 block w-full text-gray-800 border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white focus:ring-primary-500"
+                className="appearance-none mt-2 block w-full text-secondary-800 border border-secondary-400 rounded py-2 px-4 text-sm bg-secondary-100 hover:bg-secondary-200 focus:outline-none focus:bg-white focus:ring-primary-500"
                 value={NursingCare.description(s)}
                 onChange={handleOnChange(send, s)}
               />
diff --git a/src/Components/CriticalCareRecording/Others/DailyRound__General.res b/src/Components/CriticalCareRecording/Others/DailyRound__General.res
index 22c5051083e..138eb7d2241 100644
--- a/src/Components/CriticalCareRecording/Others/DailyRound__General.res
+++ b/src/Components/CriticalCareRecording/Others/DailyRound__General.res
@@ -41,7 +41,7 @@ let make = (~others, ~renderOptionalDescription, ~title) => {
     <div className="flex flex-wrap max-w-full">
       {switch additionalSymptoms {
       | Some(symptomsArray) => Js.Array.map(id => {
-          <div className="rounded-full px-4 py-2 bg-gray-400 m-1 text-sm">
+          <div className="rounded-full px-4 py-2 bg-secondary-400 m-1 text-sm">
             {str(symptoms[id - 1])}
           </div>
         }, symptomsArray)->React.array
diff --git a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res
index da041231265..1401d465558 100644
--- a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res
+++ b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainEditor.res
@@ -105,7 +105,7 @@ let reducer = (state, action) => {
   | ClearSaving => {...state, saving: false}
   | Update(parts) => {
       ...state,
-      parts: parts,
+      parts,
     }
   | SetPreviewMode => {...state, previewMode: true}
   | ClearPreviewMode => {...state, previewMode: false}
@@ -151,7 +151,7 @@ let initialState = (psp, previewMode) => {
     selectedRegion: Pain.Other,
     saving: false,
     dirty: false,
-    previewMode: previewMode,
+    previewMode,
   }
 }
 
@@ -160,7 +160,7 @@ let selectedClass = (part: option<Pain.part>) => {
   | Some(p) =>
     let score = p.scale
     if score <= 0 {
-      "text-gray-400 hover:bg-red-400 tooltip"
+      "text-secondary-400 hover:bg-red-400 tooltip"
     } else if score <= 3 {
       "text-red-200 hover:bg-red-400 tooltip"
     } else if score <= 6 {
@@ -172,7 +172,7 @@ let selectedClass = (part: option<Pain.part>) => {
     } else {
       "text-red-700 hover:bg-red-800 tooltip"
     }
-  | None => "text-gray-400 hover:text-red-200 tooltip"
+  | None => "text-secondary-400 hover:text-red-200 tooltip"
   }
 }
 // UI for each Label
@@ -181,7 +181,7 @@ let selectedLabelClass = (part: option<Pain.part>) => {
   | Some(p) =>
     let score = p.scale
     if score <= 0 {
-      "bg-gray-300 text-black hover:bg-gray-400"
+      "bg-secondary-300 text-black hover:bg-secondary-400"
     } else if score <= 3 {
       "bg-red-200 text-red-700 hover:bg-red-400"
     } else if score <= 6 {
@@ -193,7 +193,7 @@ let selectedLabelClass = (part: option<Pain.part>) => {
     } else {
       "bg-red-700 text-white hover:bg-red-200"
     }
-  | None => "bg-gray-300 text-black hover:bg-red-200"
+  | None => "bg-secondary-300 text-black hover:bg-red-200"
   }
 }
 
@@ -366,7 +366,8 @@ let make = (~painParameter, ~updateCB, ~id, ~consultationId, ~previewMode) => {
               // Toggle
 
               //Toggle Button
-              <div className="transition duration-150 ease-in-out mr-3 text-gray-700 font-medium">
+              <div
+                className="transition duration-150 ease-in-out mr-3 text-secondary-700 font-medium">
                 {str(state.previewMode ? "Preview Mode" : "Edit Mode")}
               </div>
               <div className="relative">
@@ -378,7 +379,7 @@ let make = (~painParameter, ~updateCB, ~id, ~consultationId, ~previewMode) => {
                 />
                 <div
                   className={"block w-14 h-8 rounded-full " ++ (
-                    state.previewMode ? "bg-green-300" : "bg-gray-400"
+                    state.previewMode ? "bg-green-300" : "bg-secondary-400"
                   )}
                 />
                 <div
diff --git a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
index 3ee3a2d8d2a..7ad8377bd95 100644
--- a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
+++ b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
@@ -153,12 +153,12 @@ let make = (
                             )}
                           </div>
                         </div>
-                        <div className="text-sm text-gray-700"> {str("Pain Scale")} </div>
+                        <div className="text-sm text-secondary-700"> {str("Pain Scale")} </div>
                       </div>
                     </div>
                     {state.description !== ""
                       ? <div className="mt-4">
-                          <label className="block text-sm text-gray-700 text-left">
+                          <label className="block text-sm text-secondary-700 text-left">
                             {str("Description")}
                           </label>
                           <div className="text-black"> {str(state.description)} </div>
@@ -169,7 +169,7 @@ let make = (
           </div>
         </div>
         <div
-          className="bg-gray-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
+          className="bg-secondary-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
           <div className="flex flex-col-reverse sm:flex-row-reverse w-full gap-2">
             {!previewMode
               ? <button
@@ -189,7 +189,7 @@ let make = (
             <button
               type_="button"
               onClick={hideModal}
-              className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+              className="mt-3 inline-flex w-full justify-center rounded-md border border-secondary-300 bg-white px-4 py-2 text-base font-medium text-secondary-700 shadow-sm hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
               {str(!previewMode ? "Cancel" : "Close")}
             </button>
           </div>
diff --git a/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res b/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res
index 2b3923f89d6..4695cafcbf1 100644
--- a/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res
+++ b/src/Components/CriticalCareRecording/Pain/DailyRound__Pain.res
@@ -3,9 +3,11 @@ open CriticalCare__Types
 
 @react.component
 let make = (~painParameter) => {
-  <table className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+  <table
+    className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
     <tr>
-      <th className="text-left border p-2 w-1/2"> {str("Part")} </th> <th> {str("Scale")} </th>
+      <th className="text-left border p-2 w-1/2"> {str("Part")} </th>
+      <th> {str("Scale")} </th>
     </tr>
     {Js.Array.map(pain => {
       <tr>
diff --git a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res
index de3062edeb0..c6e7bffdb14 100644
--- a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res
+++ b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreEditor.res
@@ -74,20 +74,20 @@ let reducer = (state, action) => {
   | AddSelectedPart(region) => {
       ...state,
       parts: Js.Array.concat(
-        Js.Array.filter(p => PressureSore.region(p) !== region, state.parts), 
+        Js.Array.filter(p => PressureSore.region(p) !== region, state.parts),
         [
           Belt.Option.getWithDefault(
-            Js.Array.find(p => PressureSore.region(p) === region, state.parts), 
-            PressureSore.makeDefault(region)
-          )
-        ]
+            Js.Array.find(p => PressureSore.region(p) === region, state.parts),
+            PressureSore.makeDefault(region),
+          ),
+        ],
       ),
       dirty: true,
     }
   | UpdateSelectedPart(part) => {
       ...state,
       parts: Js.Array.concat(
-        Js.Array.filter((item: PressureSore.part) => item.region != part.region, state.parts), 
+        Js.Array.filter((item: PressureSore.part) => item.region != part.region, state.parts),
         [part],
       ),
       dirty: true,
@@ -109,7 +109,7 @@ let reducer = (state, action) => {
   | ClearSaving => {...state, saving: false}
   | Update(parts) => {
       ...state,
-      parts: parts,
+      parts,
     }
   | SetPreviewMode => {...state, previewMode: true}
   | ClearPreviewMode => {...state, previewMode: false}
@@ -122,8 +122,16 @@ let makeField = p => {
   Js.Dict.set(payload, "scale", Js.Json.number(float_of_int(PressureSore.scale(p))))
   Js.Dict.set(payload, "width", Js.Json.number(p.width))
   Js.Dict.set(payload, "length", Js.Json.number(p.length))
-  Js.Dict.set(payload, "tissue_type", Js.Json.string(PressureSore.tissueTypeToString(p.tissue_type)))
-  Js.Dict.set(payload, "exudate_amount", Js.Json.string(PressureSore.extrudateAmountToString(p.exudate_amount)))
+  Js.Dict.set(
+    payload,
+    "tissue_type",
+    Js.Json.string(PressureSore.tissueTypeToString(p.tissue_type)),
+  )
+  Js.Dict.set(
+    payload,
+    "exudate_amount",
+    Js.Json.string(PressureSore.extrudateAmountToString(p.exudate_amount)),
+  )
   Js.Dict.set(payload, "description", Js.Json.string(p.description))
   payload
 }
@@ -159,35 +167,49 @@ let initialState = (psp, previewMode) => {
     selectedRegion: PressureSore.Other,
     saving: false,
     dirty: false,
-    previewMode: previewMode,
+    previewMode,
   }
 }
 
 let selectedClass = (part: option<PressureSore.part>) => {
   switch part {
   | Some(p) =>
-    let score =  PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type) 
-    if score <= 0.0 { "text-gray-400 hover:bg-red-400 tooltip" } 
-    else if score <= 3.0 { "text-red-200 hover:bg-red-400 tooltip" }
-    else if score <= 6.0 { "text-red-400 hover:bg-red-500 tooltip" }
-    else if score <= 10.0 { "text-red-500 hover:bg-red-600 tooltip" }
-    else if score <= 15.0 { "text-red-600 hover:bg-red-700 tooltip" }
-    else { "text-red-700 hover:bg-red-800 tooltip" }
-  | None => "text-gray-400 hover:text-red-200 tooltip"
+    let score = PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type)
+    if score <= 0.0 {
+      "text-secondary-400 hover:bg-red-400 tooltip"
+    } else if score <= 3.0 {
+      "text-red-200 hover:bg-red-400 tooltip"
+    } else if score <= 6.0 {
+      "text-red-400 hover:bg-red-500 tooltip"
+    } else if score <= 10.0 {
+      "text-red-500 hover:bg-red-600 tooltip"
+    } else if score <= 15.0 {
+      "text-red-600 hover:bg-red-700 tooltip"
+    } else {
+      "text-red-700 hover:bg-red-800 tooltip"
+    }
+  | None => "text-secondary-400 hover:text-red-200 tooltip"
   }
 }
 // UI for each Label
 let selectedLabelClass = (part: option<PressureSore.part>) => {
   switch part {
   | Some(p) =>
-    let score =  PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type) 
-    if score <= 0.0 { "bg-gray-300 text-black hover:bg-gray-400" }
-    else if score <= 3.0 { "bg-red-200 text-red-700 hover:bg-red-400" }
-    else if score <= 6.0 { "bg-red-400 text-white hover:bg-red-500" }
-    else if score <= 10.0 { "bg-red-500 text-white hover:bg-red-600" }
-    else if score <= 15.0 { "bg-red-600 text-white hover:bg-red-700" }
-    else { "bg-red-700 text-white hover:bg-red-200" }
-  | None => "bg-gray-300 text-black hover:bg-red-200"
+    let score = PressureSore.calculatePushScore(p.length, p.width, p.exudate_amount, p.tissue_type)
+    if score <= 0.0 {
+      "bg-secondary-300 text-black hover:bg-secondary-400"
+    } else if score <= 3.0 {
+      "bg-red-200 text-red-700 hover:bg-red-400"
+    } else if score <= 6.0 {
+      "bg-red-400 text-white hover:bg-red-500"
+    } else if score <= 10.0 {
+      "bg-red-500 text-white hover:bg-red-600"
+    } else if score <= 15.0 {
+      "bg-red-600 text-white hover:bg-red-700"
+    } else {
+      "bg-red-700 text-white hover:bg-red-200"
+    }
+  | None => "bg-secondary-300 text-black hover:bg-red-200"
   }
 }
 
@@ -229,8 +251,9 @@ let getIntoView = (region: string, isPart: bool) => {
 }
 
 let renderBody = (state, send, title, partPaths, substr) => {
-  
-  let show = state.selectedRegion !== PressureSore.Other && partPaths->Belt.Array.some(p => PressureSore.regionForPath(p) === state.selectedRegion)
+  let show =
+    state.selectedRegion !== PressureSore.Other &&
+      partPaths->Belt.Array.some(p => PressureSore.regionForPath(p) === state.selectedRegion)
 
   let inputModal = React.useRef(Js.Nullable.null)
   let isMouseOverInputModal = %raw(`
@@ -260,30 +283,35 @@ let renderBody = (state, send, title, partPaths, substr) => {
             className={"p-1 col-auto text-sm rounded m-1 cursor-pointer " ++
             selectedLabelClass(selectedPart)}
             id={PressureSore.regionToString(regionType)}
-            onClick={_ => getIntoView(PressureSore.regionToString(regionType), false)}
-          >
+            onClick={_ => getIntoView(PressureSore.regionToString(regionType), false)}>
             <div className="flex justify-between">
               <div className="border-white px-1">
                 {str(
                   Js.String.sliceToEnd(
                     ~from=substr,
-                    PressureSore.regionToString(regionType) ++ (pushScoreValue(selectedPart) === "0" ? "" : " : " ++ pushScoreValue(selectedPart)),
+                    PressureSore.regionToString(regionType) ++ (
+                      pushScoreValue(selectedPart) === "0"
+                        ? ""
+                        : " : " ++ pushScoreValue(selectedPart)
+                    ),
                   ),
                 )}
               </div>
-              {state.previewMode ? React.null :  <div>
-              {switch selectedPart {
-              | Some(p) =>
-                <CareIcon
-                  icon="l-times"
-                  className="border-l-2 p-1 text-lg"
-                  onClick={state.previewMode
-                    ? _ => getIntoView(PressureSore.regionToString(regionType), false)
-                    : _ => send(RemoveFromSelectedParts(p))}
-                />
-              | None => React.null
-              }}
-              </div>}
+              {state.previewMode
+                ? React.null
+                : <div>
+                    {switch selectedPart {
+                    | Some(p) =>
+                      <CareIcon
+                        icon="l-times"
+                        className="border-l-2 p-1 text-lg"
+                        onClick={state.previewMode
+                          ? _ => getIntoView(PressureSore.regionToString(regionType), false)
+                          : _ => send(RemoveFromSelectedParts(p))}
+                      />
+                    | None => React.null
+                    }}
+                  </div>}
             </div>
           </div>
         }, partPaths)->React.array}
@@ -297,17 +325,18 @@ let renderBody = (state, send, title, partPaths, substr) => {
           modalRef={ReactDOM.Ref.domRef(inputModal)}
           hideModal={_ => send(SetSelectedRegion(PressureSore.Other))}
           position={state.modalPosition}
-          part={
-            Belt.Option.getWithDefault(
-              Js.Array.find(p => PressureSore.region(p) === state.selectedRegion, state.parts), 
-              PressureSore.makeDefault(state.selectedRegion)
-            )
-          }
+          part={Belt.Option.getWithDefault(
+            Js.Array.find(p => PressureSore.region(p) === state.selectedRegion, state.parts),
+            PressureSore.makeDefault(state.selectedRegion),
+          )}
           updatePart={part => send(UpdateSelectedPart(part))}
           previewMode={state.previewMode}
         />
       </div>
-      <svg className="h-screen py-4 cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.7 932.661">
+      <svg
+        className="h-screen py-4 cursor-pointer"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 344.7 932.661">
         {Js.Array.mapi((part, renderIndex) => {
           let regionType = PressureSore.regionForPath(part)
           let selectedPart = Js.Array.find(p => PressureSore.region(p) === regionType, state.parts)
@@ -319,9 +348,13 @@ let renderBody = (state, send, title, partPaths, substr) => {
             fill="currentColor"
             id={"part" ++ PressureSore.regionToString(regionType)}
             onClick={e => {
-              send(ShowInputModal(part.region, {"x": e->ReactEvent.Mouse.clientX, "y": e->ReactEvent.Mouse.clientY}))
-            }}
-          >
+              send(
+                ShowInputModal(
+                  part.region,
+                  {"x": e->ReactEvent.Mouse.clientX, "y": e->ReactEvent.Mouse.clientY},
+                ),
+              )
+            }}>
             <title className=""> {str(PressureSore.regionToString(regionType))} </title>
           </path>
         }, partPaths)->React.array}
@@ -348,7 +381,8 @@ let make = (~pressureSoreParameter, ~updateCB, ~id, ~consultationId, ~previewMod
               // Toggle
 
               //Toggle Button
-              <div className="transition duration-150 ease-in-out mr-3 text-gray-700 font-medium">
+              <div
+                className="transition duration-150 ease-in-out mr-3 text-secondary-700 font-medium">
                 {str(state.previewMode ? "Preview Mode" : "Edit Mode")}
               </div>
               <div className="relative">
@@ -360,7 +394,7 @@ let make = (~pressureSoreParameter, ~updateCB, ~id, ~consultationId, ~previewMod
                 />
                 <div
                   className={"block w-14 h-8 rounded-full " ++ (
-                    state.previewMode ? "bg-green-300" : "bg-gray-400"
+                    state.previewMode ? "bg-green-300" : "bg-secondary-400"
                   )}
                 />
                 <div
diff --git a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
index 9df26e6510d..b35a6af7bd3 100644
--- a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
+++ b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
@@ -39,7 +39,7 @@ let make = (
 
   let handleSubmit = e => {
     let region = PressureSore.regionToString(state.region)
-    if (state.length === 0.0 && state.width === 0.0) {
+    if state.length === 0.0 && state.width === 0.0 {
       hideModal(e)
     } else if (
       (state.length > 0.0 && state.width == 0.0) || (state.length == 0.0 && state.width > 0.0)
@@ -198,31 +198,33 @@ let make = (
                           <div className="text-black font-bold text-xl">
                             {str(state.width->Belt.Float.toString)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Width")} </div>
+                          <div className="text-sm text-secondary-700"> {str("Width")} </div>
                         </div>
                         <div className="flex flex-col items-center text-center">
                           <div className="text-black font-bold text-xl">
                             {str(state.length->Belt.Float.toString)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Length")} </div>
+                          <div className="text-sm text-secondary-700"> {str("Length")} </div>
                         </div>
                         <div className="flex flex-col items-center text-center">
                           <div className="text-black font-bold text-xl">
                             {str(state.exudate_amount->PressureSore.encodeExudateAmount)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Exudate Amount")} </div>
+                          <div className="text-sm text-secondary-700">
+                            {str("Exudate Amount")}
+                          </div>
                         </div>
                         <div className="flex flex-col items-center text-center">
                           <div className="text-black font-bold text-xl">
                             {str(state.tissue_type->PressureSore.encodeTissueType)}
                           </div>
-                          <div className="text-sm text-gray-700"> {str("Tissue Type")} </div>
+                          <div className="text-sm text-secondary-700"> {str("Tissue Type")} </div>
                         </div>
                       </div>
                     </div>
                     {state.description !== ""
                       ? <div className="mt-4">
-                          <label className="block text-sm text-gray-700 text-left">
+                          <label className="block text-sm text-secondary-700 text-left">
                             {str("Description")}
                           </label>
                           <div className="text-black"> {str(state.description)} </div>
@@ -233,7 +235,7 @@ let make = (
           </div>
         </div>
         <div
-          className="bg-gray-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
+          className="bg-secondary-50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-2">
           <div className="flex gap-2 w-full justify-center sm:justify-start items-center">
             <span> {str("Push Score: ")} </span>
             <span className="text-black"> {str(pushScore->Belt.Float.toString)} </span>
@@ -250,7 +252,7 @@ let make = (
             <button
               type_="button"
               onClick={hideModal}
-              className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+              className="mt-3 inline-flex w-full justify-center rounded-md border border-secondary-300 bg-white px-4 py-2 text-base font-medium text-secondary-700 shadow-sm hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
               {str(!previewMode ? "Cancel" : "Close")}
             </button>
           </div>
diff --git a/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res b/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res
index 997e5447e70..cd24b26d37e 100644
--- a/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res
+++ b/src/Components/CriticalCareRecording/PressureSore/DailyRound__PressureSore.res
@@ -3,9 +3,11 @@ open CriticalCare__Types
 
 @react.component
 let make = (~pressureSoreParameter) => {
-  <table className="text-left px-4 py-2 border bg-gray-100 m-1 rounded-lg shadow md:w-1/2 w-full">
+  <table
+    className="text-left px-4 py-2 border bg-secondary-100 m-1 rounded-lg shadow md:w-1/2 w-full">
     <tr>
-      <th className="text-left border p-2 w-1/2"> {str("Part")} </th> <th> {str("Push Score")} </th>
+      <th className="text-left border p-2 w-1/2"> {str("Part")} </th>
+      <th> {str("Push Score")} </th>
     </tr>
     {Js.Array.map(pressure => {
       <tr>
diff --git a/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res b/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res
index d919215071e..a3729277e12 100644
--- a/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res
+++ b/src/Components/CriticalCareRecording/Recording/CriticalCare__Recording.res
@@ -36,10 +36,11 @@ let basicEditor = (~facilityId, ~patientId, ~consultationId, ~id) => {
     href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily-rounds/${id}/update`}>
     <div className="flex items-center">
       <CareIcon icon="l-user-nurse" className="text-xl mr-4 text-green-500" />
-      
       <div className={`font-semibold text-xl text-green-500`}> {str("Basic Editor")} </div>
     </div>
-    <div> <CareIcon icon="l-check-circle" className="text-3xl text-green-500" /> </div>
+    <div>
+      <CareIcon icon="l-check-circle" className="text-3xl text-green-500" />
+    </div>
   </Link>
 }
 let editorNameToString = editor => {
@@ -71,19 +72,19 @@ let editorToggle = (editorName, state, send) => {
       <CareIcon
         icon="l-user-nurse"
         className={`text-xl mr-4 ${Belt.Option.isNone(editorUpdated)
-            ? "text-gray-400"
+            ? "text-secondary-400"
             : "text-green-500"}`}
       />
       <div
         className={`font-semibold text-xl  ${Belt.Option.isNone(editorUpdated)
-            ? "text-gray-800"
+            ? "text-secondary-800"
             : "text-green-500"}`}>
         {str(editorNameToString(editorName))}
       </div>
     </div>
     <div>
       {Belt.Option.isNone(editorUpdated)
-        ? <CareIcon icon="l-check-circle" className="text-3xl text-gray-300" />
+        ? <CareIcon icon="l-check-circle" className="text-3xl text-secondary-300" />
         : <CareIcon icon="l-check-circle" className="text-3xl text-green-500" />}
     </div>
   </div>
@@ -94,7 +95,7 @@ let reducer = (state, action) => {
   | ShowEditor(editor) => {...state, visibleEditor: Some(editor)}
   | CloseEditor => {...state, visibleEditor: None}
   | UpdateDailyRound(dailyRound, editor) => {
-      dailyRound: dailyRound,
+      dailyRound,
       visibleEditor: None,
       updatedEditors: Js.Array.concat([editor], state.updatedEditors),
     }
@@ -103,7 +104,7 @@ let reducer = (state, action) => {
 
 let initialState = dailyRound => {
   visibleEditor: None,
-  dailyRound: dailyRound,
+  dailyRound,
   updatedEditors: [],
 }
 
@@ -115,6 +116,21 @@ let updateDailyRound = (send, editor, dailyRound) => {
 let make = (~id, ~facilityId, ~patientId, ~consultationId, ~dailyRound) => {
   let (state, send) = React.useReducer(reducer, initialState(dailyRound))
 
+  let sections =
+    dailyRound.roundsType == VentilatorRound
+      ? [
+          HemodynamicParametersEditor,
+          NeurologicalMonitoringEditor,
+          VentilatorParametersEditor,
+          ArterialBloodGasAnalysisEditor,
+          BloodSugarEditor,
+          IOBalanceEditor,
+          DialysisEditor,
+          PressureSoreEditor,
+          NursingCareEditor,
+        ]
+      : [NeurologicalMonitoringEditor, VentilatorParametersEditor]
+
   <div className=" px-4 py-5 sm:px-6 max-w-5xl mx-auto mt-4">
     {ReactUtils.nullUnless(
       <div>
@@ -135,7 +151,7 @@ let make = (~id, ~facilityId, ~patientId, ~consultationId, ~dailyRound) => {
             {str("Back")}
           </button>
           <div
-            className="bg-white px-2 md:px-6 py-5 border-b border-gray-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
+            className="bg-white px-2 md:px-6 py-5 border-b border-secondary-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
             {switch editor {
             | NeurologicalMonitoringEditor =>
               <CriticalCare__NeurologicalMonitoringEditor
@@ -219,28 +235,18 @@ let make = (~id, ~facilityId, ~patientId, ~consultationId, ~dailyRound) => {
         </div>
       | None =>
         <div
-          className="bg-white px-2 md:px-6 py-5 border-b border-gray-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
+          className="bg-white px-2 md:px-6 py-5 border-b border-secondary-200 sm:px-6 max-w-5xl mx-auto border mt-4 shadow rounded-lg">
           <h2> {str("Record Updates")} </h2>
           <div>
-            {basicEditor(~facilityId, ~patientId, ~consultationId, ~id)} {Js.Array.map(editor => {
+            {basicEditor(~facilityId, ~patientId, ~consultationId, ~id)}
+            {Js.Array.map(editor => {
               editorToggle(editor, state, send)
-            }, [
-              HemodynamicParametersEditor,
-              NeurologicalMonitoringEditor,
-              VentilatorParametersEditor,
-              ArterialBloodGasAnalysisEditor,
-              BloodSugarEditor,
-              IOBalanceEditor,
-              DialysisEditor,
-              PressureSoreEditor,
-              NursingCareEditor,
-            ])->React.array}
+            }, sections)->React.array}
           </div>
           <Link
             href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`}>
             <button
-              onClick={_ =>
-                Notifications.success({msg: "Detailed Update filed successfully"})}
+              onClick={_ => Notifications.success({msg: "Detailed Update filed successfully"})}
               className="btn btn-primary w-full mt-6">
               {str("Complete")}
             </button>
diff --git a/src/Components/CriticalCareRecording/VentilatorParametersEditor/CriticalCare__VentilatorParametersEditor.res b/src/Components/CriticalCareRecording/VentilatorParametersEditor/CriticalCare__VentilatorParametersEditor.res
index 0933f46bf1a..cd3010b1c1d 100644
--- a/src/Components/CriticalCareRecording/VentilatorParametersEditor/CriticalCare__VentilatorParametersEditor.res
+++ b/src/Components/CriticalCareRecording/VentilatorParametersEditor/CriticalCare__VentilatorParametersEditor.res
@@ -115,7 +115,7 @@ let makePayload = (state: VentilatorParameters.state) => {
   DictUtils.setOptionalNumber("ventilator_tidal_volume", state.ventilator_tidal_volume, payload)
   DictUtils.setOptionalNumber(
     "ventilator_oxygen_modality_oxygen_rate",
-    state.ventilator_interface === UNKNOWN &&
+    state.ventilator_interface === OXYGEN_SUPPORT &&
       state.ventilator_oxygen_modality !== HIGH_FLOW_NASAL_CANNULA
       ? state.ventilator_oxygen_modality_oxygen_rate
       : None,
diff --git a/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res b/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res
index a0196a9baa9..76908972723 100644
--- a/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res
+++ b/src/Components/CriticalCareRecording/components/CriticalCare__Dropdown.res
@@ -27,7 +27,7 @@ let renderSelectables = (selections, updateCB) =>
       type_="button"
       key={index |> string_of_int}
       onClick={_ => updateCB(selection)}
-      className="w-full block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+      className="w-full block px-4 py-2 text-sm leading-5 text-left text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900 focus:outline-none focus:bg-secondary-100 focus:text-secondary-900">
       {selection |> str}
     </button>
   )
@@ -77,7 +77,10 @@ let make = (~id, ~value, ~updateCB, ~placeholder, ~selectables, ~label="", ~disa
       id
       value
       autoComplete="off"
-      onClick={e => {ReactEvent.Mouse.stopPropagation(e); setShowDropdown(_ => !showDropdown)}}
+      onClick={e => {
+        ReactEvent.Mouse.stopPropagation(e)
+        setShowDropdown(_ => !showDropdown)
+      }}
       onChange={e => updateCB(ReactEvent.Form.target(e)["value"])}
       className="cui-input-base appearance-none h-10 mt-1 block py-2 px-4"
       disabled
diff --git a/src/Components/CriticalCareRecording/components/CriticalCare__Home.res b/src/Components/CriticalCareRecording/components/CriticalCare__Home.res
index 13bfa2f9cfb..35f543f4c16 100644
--- a/src/Components/CriticalCareRecording/components/CriticalCare__Home.res
+++ b/src/Components/CriticalCareRecording/components/CriticalCare__Home.res
@@ -236,7 +236,7 @@
 //                 //<CriticalCare__RadioButton options={reaction_options} ishorizontal=true/>
 //             </div>
 //         </div>
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 //         <div>
 //             <div className="text-3xl font-bold">{str("Glasgow Coma Scale")}</div>
 //             <div>
@@ -257,7 +257,7 @@
 //             </div>
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //         <div>
 //             <div className="text-3xl font-bold">{str("Limb Response")}</div>
@@ -272,13 +272,13 @@
 //             </div>
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //         <div>
 //             <CriticalCare__DoubleRangeSlider />
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Ventillator Parameters")}</div>
@@ -291,14 +291,14 @@
 //             <CriticalCare__NumberInput labels={ventilator_parameters} />
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Infusions")}</div>
 //             <CriticalCare__NumberInput labels={infusion_parameters} />
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Feed")}</div>
@@ -309,7 +309,7 @@
 //             </div>
 //         </div>
 
-//         <div className="my-15 w-full h-1 bg-gray-300"></div>
+//         <div className="my-15 w-full h-1 bg-secondary-300"></div>
 
 //          <div>
 //             <div className="text-3xl font-bold">{str("Output")}</div>
@@ -324,3 +324,4 @@
 
 //     </div>
 // }
+
diff --git a/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res b/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res
index 445d0874066..d133348e4d6 100644
--- a/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res
+++ b/src/Components/CriticalCareRecording/components/CriticalCare__NumberInput.res
@@ -2,17 +2,21 @@ let str = React.string
 
 @react.component
 let make = (~labels) => {
-    <div>
-        {labels|>Array.map((x) => {
-            <div className="grid grid-cols-2 my-4">
-                <div>
-                    {str(x)}
-                </div>
-                <div>
-                    <input className="w-84 border-2 rounded border-gray-400 p-1" type_="number" name={x} id={x} />
-                </div>
-            </div>
-        })
-        |> React.array }
-    </div>
+  <div>
+    {labels
+    |> Array.map(x => {
+      <div className="grid grid-cols-2 my-4">
+        <div> {str(x)} </div>
+        <div>
+          <input
+            className="w-84 border-2 rounded border-secondary-400 p-1"
+            type_="number"
+            name={x}
+            id={x}
+          />
+        </div>
+      </div>
+    })
+    |> React.array}
+  </div>
 }
diff --git a/src/Components/CriticalCareRecording/components/PressureSore.js b/src/Components/CriticalCareRecording/components/PressureSore.js
index 1aa32607546..b03dbf4de19 100644
--- a/src/Components/CriticalCareRecording/components/PressureSore.js
+++ b/src/Components/CriticalCareRecording/components/PressureSore.js
@@ -203,7 +203,7 @@ export default function PressureSore() {
               className={
                 selected === renderIndex
                   ? "text-blue-500"
-                  : "text-gray-300  hover:text-blue-400"
+                  : "text-secondary-300  hover:text-blue-400"
               }
               fill="currentColor"
               onClick={(_) => setSelected(renderIndex)}
diff --git a/src/Components/DeathReport/DeathReport.tsx b/src/Components/DeathReport/DeathReport.tsx
index e25a59c8732..6ed8652d22d 100644
--- a/src/Components/DeathReport/DeathReport.tsx
+++ b/src/Components/DeathReport/DeathReport.tsx
@@ -6,7 +6,11 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import DateFormField from "../Form/FormFields/DateFormField";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
-import { formatDateTime, patientAgeInYears } from "../../Utils/utils";
+import {
+  formatDateTime,
+  humanizeStrings,
+  patientAgeInYears,
+} from "../../Utils/utils";
 import Page from "../Common/components/Page";
 import Form from "../Form/Form";
 import { useTranslation } from "react-i18next";
@@ -89,8 +93,9 @@ export default function PrintDeathReport(props: { id: string }) {
       patientData.medical_history &&
       patientData.medical_history.length
     ) {
-      const medHis = patientData.medical_history;
-      return medHis.map((item: any) => item.disease).join(", ");
+      return humanizeStrings(
+        patientData.medical_history.map((item: any) => item.disease),
+      );
     } else {
       return "None";
     }
diff --git a/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx b/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
index 4f3b102acc9..71f6e2888a0 100644
--- a/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
+++ b/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
@@ -30,7 +30,8 @@ export default function ConditionVerificationStatusMenu<
       className={classNames(
         props.className,
         props.value && StatusStyle[props.value].colors,
-        props.value && "border !border-gray-400 bg-white hover:bg-gray-300",
+        props.value &&
+          "border !border-secondary-400 bg-white hover:bg-secondary-300",
       )}
       id="condition-verification-status-menu"
       title={props.value ? t(props.value) : props.placeholder ?? t("add_as")}
@@ -49,7 +50,9 @@ export default function ConditionVerificationStatusMenu<
                 icon="l-coronavirus"
                 className={classNames(
                   "hidden text-lg transition-all duration-200 ease-in-out group-hover:rotate-90 group-hover:text-inherit md:block",
-                  props.value === status ? "text-inherit-500" : "text-gray-500",
+                  props.value === status
+                    ? "text-inherit-500"
+                    : "text-secondary-500",
                 )}
               />
             }
@@ -65,7 +68,7 @@ export default function ConditionVerificationStatusMenu<
                   : ""}
                 {t(status)}
               </span>
-              <span className="hidden text-xs text-gray-600 md:block">
+              <span className="hidden text-xs text-secondary-600 md:block">
                 {t(`help_${status}`)}
               </span>
             </div>
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
index b2bab809813..0391748c929 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
@@ -21,7 +21,7 @@ interface CreateDiagnosesProps {
 export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
   return (
     <div className={props.className}>
-      <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+      <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
         <ul className="flex w-full flex-col gap-2 p-4">
           {props.value.map((diagnosis, index) => (
             <li key={index} id={`diagnosis-entry-${index}`}>
@@ -45,7 +45,7 @@ export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
 
         {props.value.length === 0 && <NoDiagnosisAdded />}
 
-        <div className="w-full rounded-b-lg bg-gray-200 px-4 pt-4">
+        <div className="w-full rounded-b-lg bg-secondary-200 px-4 pt-4">
           <AddICD11Diagnosis
             disallowed={props.value.map(
               (obj) => obj.diagnosis_object as ICD11DiagnosisModel,
@@ -85,7 +85,7 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
   const [diagnoses, setDiagnoses] = useState(props.value);
   return (
     <div className={props.className}>
-      <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+      <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
         <ul className="flex w-full flex-col gap-2 p-4">
           {diagnoses.map((diagnosis, index) => (
             <li key={index} id={`diagnosis-entry-${index}`}>
@@ -108,7 +108,7 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
 
         {diagnoses.length === 0 && <NoDiagnosisAdded />}
 
-        <div className="w-full rounded-b-lg bg-gray-200 px-4 pt-4">
+        <div className="w-full rounded-b-lg bg-secondary-200 px-4 pt-4">
           <AddICD11Diagnosis
             disallowed={diagnoses.map(
               (obj) => obj.diagnosis_object as ICD11DiagnosisModel,
@@ -188,7 +188,7 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
 
 const NoDiagnosisAdded = () => {
   return (
-    <div className="flex w-full justify-center gap-2 pb-8 text-center text-gray-500">
+    <div className="flex w-full justify-center gap-2 pb-8 text-center text-secondary-500">
       Atleast one diagnosis must be added
     </div>
   );
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
index d431890cd17..bbe9ff31b9a 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
@@ -79,8 +79,8 @@ export default function ConsultationDiagnosisEntry(props: Props) {
             object.is_principal
               ? "font-semibold text-primary-500"
               : "font-normal",
-            !isActive && "text-gray-500 line-through",
-            !object.diagnosis_object?.label && "italic text-gray-500",
+            !isActive && "text-secondary-500 line-through",
+            !object.diagnosis_object?.label && "italic text-secondary-500",
           )}
         >
           {object.diagnosis_object?.label ||
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
index 657451e4538..768b5eac019 100644
--- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
@@ -25,7 +25,7 @@ const PrincipalDiagnosisSelect = <T extends Option>(props: Props<T>) => {
 
   return (
     <div className={props.className}>
-      <div className="rounded-lg border border-gray-400 bg-gray-200 p-4">
+      <div className="rounded-lg border border-secondary-400 bg-secondary-200 p-4">
         <SelectFormField
           id="principal-diagnosis-select"
           name="principal_diagnosis"
@@ -50,12 +50,12 @@ const PrincipalDiagnosisSelect = <T extends Option>(props: Props<T>) => {
         />
         {diagnosis &&
           (diagnosis.chapter ? (
-            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center text-gray-900">
+            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center text-secondary-900">
               <p>This encounter will be categorised under:</p>
               <p className="font-bold">{diagnosis.chapter}</p>
             </span>
           ) : (
-            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center italic text-gray-700">
+            <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center italic text-secondary-700">
               This encounter will not be categorised under any chapter as the
               diagnosis does not fall under a chapter.
             </span>
diff --git a/src/Components/Diagnosis/DiagnosesListAccordion.tsx b/src/Components/Diagnosis/DiagnosesListAccordion.tsx
index ec641d720b5..adae1d8bb7c 100644
--- a/src/Components/Diagnosis/DiagnosesListAccordion.tsx
+++ b/src/Components/Diagnosis/DiagnosesListAccordion.tsx
@@ -39,7 +39,7 @@ export default function DiagnosesListAccordion(props: Props) {
       <div className="flex justify-between">
         {!isVisible && (
           <ButtonV2
-            className="text-md w-full p-0 font-semibold text-black hover:bg-gray-200"
+            className="text-md w-full p-0 font-semibold text-black hover:bg-secondary-200"
             ghost
             onClick={() => {
               setIsVisible((prev) => !prev);
@@ -55,7 +55,7 @@ export default function DiagnosesListAccordion(props: Props) {
           isVisible ? "overflow-visible" : "h-0 overflow-hidden"
         }`}
       >
-        <h3 className="my-2 text-lg font-semibold leading-relaxed text-gray-900">
+        <h3 className="my-2 text-lg font-semibold leading-relaxed text-secondary-900">
           Diagnoses
         </h3>
         <div
@@ -70,11 +70,12 @@ export default function DiagnosesListAccordion(props: Props) {
           )}
         </div>
         <ButtonV2
-          className="text-md w-full rounded-lg p-0 text-gray-600 hover:bg-gray-200"
+          className="text-md w-full rounded-lg p-0 text-secondary-600 hover:bg-secondary-200"
           ghost
           onClick={() => {
             setIsVisible(false);
           }}
+          shadow={false}
         >
           <CareIcon icon="l-angle-up" className="h-7" />
           Hide Diagnoses
@@ -98,7 +99,8 @@ const DiagnosesOfStatus = ({ diagnoses }: Props) => {
           <li key={diagnosis.id} className="flex items-center gap-2">
             <span
               className={classNames(
-                !diagnosis.diagnosis_object?.label && "italic text-gray-500",
+                !diagnosis.diagnosis_object?.label &&
+                  "italic text-secondary-500",
               )}
             >
               {diagnosis.diagnosis_object?.label ||
diff --git a/src/Components/ExternalResult/ResultItem.tsx b/src/Components/ExternalResult/ResultItem.tsx
index 88f906a220c..44f40e3248d 100644
--- a/src/Components/ExternalResult/ResultItem.tsx
+++ b/src/Components/ExternalResult/ResultItem.tsx
@@ -76,18 +76,18 @@ export default function ResultItem(props: any) {
           </button>
         </div>
         <div className="mt-4 overflow-hidden bg-white shadow sm:rounded-lg">
-          <div className="border-b border-gray-200 px-4 py-5 sm:px-6">
-            <h3 className="text-lg font-medium leading-6 text-gray-900">
+          <div className="border-b border-secondary-200 px-4 py-5 sm:px-6">
+            <h3 className="text-lg font-medium leading-6 text-secondary-900">
               <span id="external-patient-name">{resultItemData.name}</span> -{" "}
               <span>{resultItemData.age}</span>{" "}
               <span>{resultItemData.age_in}</span> |{" "}
               <span>{resultItemData.result}</span>
             </h3>
-            <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+            <p className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500">
               {t("srf_id")}: {resultItemData.srf_id}
             </p>
             <p
-              className="mt-1 max-w-2xl text-sm leading-5 text-gray-500"
+              className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500"
               id="patient-external-id"
             >
               {t("care_external_results_id")}: {resultItemData.id}
@@ -101,18 +101,18 @@ export default function ResultItem(props: any) {
           <div className="px-4 py-5 sm:p-0">
             <dl>
               <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("gender")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.gender}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("address")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.address}
 
                   {resultItemData.ward_object && (
@@ -128,84 +128,84 @@ export default function ResultItem(props: any) {
                   )}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("mobile_number")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.mobile_number}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   Repeat?
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.is_repeat ? t("yes") : t("no")}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("patient_status")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.patient_status}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("sample_type")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.sample_type}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("test_type")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.test_type}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("sample_collection_date")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.sample_collection_date || "-"}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("result_date")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.result_date || "-"}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("result")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.result}
                 </dd>
               </div>
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("source")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.source}
                 </dd>
               </div>
 
-              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
-                <dt className="text-sm font-medium leading-5 text-gray-500">
+              <div className="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-secondary-200 sm:px-6 sm:py-5">
+                <dt className="text-sm font-medium leading-5 text-secondary-500">
                   {t("patient_category")}
                 </dt>
-                <dd className="mt-1 text-sm leading-5 text-gray-900 sm:col-span-2 sm:mt-0">
+                <dd className="mt-1 text-sm leading-5 text-secondary-900 sm:col-span-2 sm:mt-0">
                   {resultItemData.patient_category}
                 </dd>
               </div>
diff --git a/src/Components/ExternalResult/ResultList.tsx b/src/Components/ExternalResult/ResultList.tsx
index 0759b47d73a..404d558d117 100644
--- a/src/Components/ExternalResult/ResultList.tsx
+++ b/src/Components/ExternalResult/ResultList.tsx
@@ -114,12 +114,12 @@ export default function ResultList() {
       value && (
         <span
           key={`${key}-${value.id}`}
-          className="inline-flex h-full items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600"
+          className="inline-flex h-full items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600"
         >
           {`${key}: ${value.name}`}
           <CareIcon
             icon="l-times"
-            className="ml-2 cursor-pointer rounded-full text-base hover:bg-gray-500"
+            className="ml-2 cursor-pointer rounded-full text-base hover:bg-secondary-500"
             onClick={() =>
               paramKey === "local_bodies"
                 ? removeLSGFilter(paramKey, value.id)
@@ -141,25 +141,25 @@ export default function ResultList() {
         <tr key={`usr_${result.id}`} className="bg-white">
           <td
             onClick={() => navigate(resultUrl)}
-            className="text-md whitespace-nowrap px-6 py-4 leading-5 text-gray-900"
+            className="text-md whitespace-nowrap px-6 py-4 leading-5 text-secondary-900"
           >
             <div className="flex">
               <a
                 href="#"
                 className="group inline-flex space-x-2 text-sm leading-5"
               >
-                <p className="text-gray-800 transition duration-150 ease-in-out group-hover:text-gray-900">
+                <p className="text-secondary-800 transition duration-150 ease-in-out group-hover:text-secondary-900">
                   {`${result.name}`} - {result.age} {result.age_in}
                 </p>
               </a>
             </div>
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
-            <span className="font-medium text-gray-900">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
+            <span className="font-medium text-secondary-900">
               {result.test_type}
             </span>
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
             <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium capitalize leading-4 text-blue-800">
               {result.result}
             </span>
@@ -169,10 +169,10 @@ export default function ResultList() {
               </span>
             ) : null}
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-800">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-800">
             {result.result_date || "-"}
           </td>
-          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
+          <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-secondary-500">
             <ButtonV2
               variant="primary"
               disabled={
@@ -209,7 +209,7 @@ export default function ResultList() {
       <tr className="bg-white">
         <td colSpan={5}>
           <div className="w-full rounded-lg bg-white p-3">
-            <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-gray-600">
+            <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-secondary-600">
               No Results Found
             </div>
           </div>
@@ -331,27 +331,27 @@ export default function ResultList() {
           className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-t-lg"
           id="external-result-table"
         >
-          <table className="min-w-full divide-y divide-gray-200">
+          <table className="min-w-full divide-y divide-secondary-200">
             <thead>
               <tr>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Name
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Test Type
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wide text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wide text-secondary-500">
                   Status
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Result Date
                 </th>
-                <th className="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">
+                <th className="bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-500">
                   Create Patient
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-200 bg-white">
+            <tbody className="divide-y divide-secondary-200 bg-white">
               {manageResults}
             </tbody>
           </table>
diff --git a/src/Components/ExternalResult/ResultUpdate.tsx b/src/Components/ExternalResult/ResultUpdate.tsx
index 27e198a4ee0..09dc41aaca7 100644
--- a/src/Components/ExternalResult/ResultUpdate.tsx
+++ b/src/Components/ExternalResult/ResultUpdate.tsx
@@ -216,14 +216,14 @@ export default function UpdateResult(props: any) {
         backUrl={`/external_results/${id}`}
       >
         <div className="md:p-4">
-          <div className="border-b border-gray-200 px-4 py-5 sm:px-6">
-            <h3 className="text-lg font-medium leading-6 text-gray-900">
+          <div className="border-b border-secondary-200 px-4 py-5 sm:px-6">
+            <h3 className="text-lg font-medium leading-6 text-secondary-900">
               {state.form.name} - {state.form.age} {state.form.age_in}
             </h3>
-            <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+            <p className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500">
               SRF ID: {state.form.srf_id}
             </p>
-            <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+            <p className="mt-1 max-w-2xl text-sm leading-5 text-secondary-500">
               Care external results ID: {id}
             </p>
           </div>
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index d7a30534b9d..6867857c5c6 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -382,18 +382,18 @@ const AssetCreate = (props: AssetProps) => {
       <Page
         title={assetId ? t("update_asset") : t("create_new_asset")}
         crumbsReplacements={{
-          assets: { style: "text-gray-200 pointer-events-none" },
+          assets: { style: "text-secondary-200 pointer-events-none" },
           [assetId || "????"]: { name },
         }}
         backUrl={`/facility/${facilityId}`}
       >
         <section className="text-center">
           <h1 className="flex flex-col items-center py-10 text-6xl">
-            <div className="flex h-40 w-40 items-center justify-center rounded-full bg-gray-200 p-5">
+            <div className="flex h-40 w-40 items-center justify-center rounded-full bg-secondary-200 p-5">
               <CareIcon icon="l-map-marker" className="text-green-600" />
             </div>
           </h1>
-          <p className="text-gray-600">
+          <p className="text-secondary-600">
             {t("you_need_at_least_a_location_to_create_an_assest")}
           </p>
           <button
@@ -447,10 +447,10 @@ const AssetCreate = (props: AssetProps) => {
         ref={section.ref as LegacyRef<HTMLDivElement>}
       >
         <CareIcon icon={section.icon} className="mr-3 text-lg" />
-        <label className="text-lg font-bold text-gray-900">
+        <label className="text-lg font-bold text-secondary-900">
           {sectionTitle}
         </label>
-        <hr className="ml-6 flex-1 border border-gray-400" />
+        <hr className="ml-6 flex-1 border border-secondary-400" />
       </div>
     );
   };
@@ -464,7 +464,7 @@ const AssetCreate = (props: AssetProps) => {
           [facilityId]: {
             name: locationsQuery.data?.results[0].facility?.name,
           },
-          assets: { style: "text-gray-200 pointer-events-none" },
+          assets: { style: "text-secondary-200 pointer-events-none" },
           [assetId || "????"]: { name },
         }}
         backUrl={
@@ -671,7 +671,7 @@ const AssetCreate = (props: AssetProps) => {
                         />
                       </div>
                       <div
-                        className="ml-1 mt-1 flex h-10 cursor-pointer items-center justify-self-end rounded border border-gray-400 px-4 hover:bg-gray-200"
+                        className="ml-1 mt-1 flex h-10 cursor-pointer items-center justify-self-end rounded border border-secondary-400 px-4 hover:bg-secondary-200"
                         onClick={() => setIsScannerActive(true)}
                       >
                         <CareIcon
diff --git a/src/Components/Facility/BedCapacity.tsx b/src/Components/Facility/BedCapacity.tsx
index 75d52c809df..ff0ec111496 100644
--- a/src/Components/Facility/BedCapacity.tsx
+++ b/src/Components/Facility/BedCapacity.tsx
@@ -209,7 +209,7 @@ export const BedCapacity = (props: BedCapacityProps) => {
           <div role="status">
             <svg
               aria-hidden="true"
-              className="mr-2 h-8 w-8 animate-spin fill-primary text-gray-200 dark:text-gray-600"
+              className="mr-2 h-8 w-8 animate-spin fill-primary text-secondary-200 dark:text-secondary-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/Components/Facility/BedManagement.tsx b/src/Components/Facility/BedManagement.tsx
index 10624675b5e..b46323b74bb 100644
--- a/src/Components/Facility/BedManagement.tsx
+++ b/src/Components/Facility/BedManagement.tsx
@@ -192,7 +192,7 @@ export const BedManagement = (props: BedManagementProps) => {
     ));
   } else if (data?.results.length === 0) {
     BedList = (
-      <p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-gray-500">
+      <p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-secondary-500">
         No beds available in this location
       </p>
     );
diff --git a/src/Components/Facility/BedTypeCard.tsx b/src/Components/Facility/BedTypeCard.tsx
index f2af4bd7a1c..560b4265e24 100644
--- a/src/Components/Facility/BedTypeCard.tsx
+++ b/src/Components/Facility/BedTypeCard.tsx
@@ -79,7 +79,7 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
         <div className="text-md font-medium not-italic leading-[normal] text-[#453C52]">
           {label}
         </div>
-        <span className="flex items-center justify-center rounded py-0 text-sm text-gray-500">
+        <span className="flex items-center justify-center rounded py-0 text-sm text-secondary-500">
           {usedPercent}%
         </span>
       </header>
@@ -87,7 +87,7 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
         {used} / {total}
       </div>
       <div className="mt-3 flex flex-col items-stretch justify-center rounded-md">
-        <div className="flex h-3 w-full rounded-md bg-gray-300">
+        <div className="flex h-3 w-full rounded-md bg-secondary-300">
           <div
             className="flex h-3 shrink-0 flex-col rounded-md bg-blue-600"
             style={{ width: `${usedPercent}%` }}
@@ -100,10 +100,10 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
         </div>
         {facilityId ? (
           <div className="mt-3 flex w-full flex-col items-start justify-between gap-5 sm:flex-row">
-            <div className="mt-4 text-xs italic text-gray-500">
+            <div className="mt-4 text-xs italic text-secondary-500">
               {lastUpdated && (
                 <RecordMeta
-                  className="py-0 text-xs font-normal text-gray-600"
+                  className="py-0 text-xs font-normal text-secondary-600"
                   prefix={"Last updated;"}
                   time={lastUpdated}
                 />
@@ -117,7 +117,7 @@ export const BedTypeCard: React.FC<BedTypeCardProps> = ({
                   setOpen(true);
                 }}
                 authorizeFor={NonReadOnlyUsers}
-                className="tooltip bg-opacity/20 flex aspect-square h-7 w-7 flex-col items-center justify-center rounded bg-gray-300 px-4 py-0"
+                className="tooltip bg-opacity/20 flex aspect-square h-7 w-7 flex-col items-center justify-center rounded bg-secondary-300 px-4 py-0"
                 variant="secondary"
                 ghost
               >
diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
index 2f31b619776..1f0c2615dec 100644
--- a/src/Components/Facility/CentralNursingStation.tsx
+++ b/src/Components/Facility/CentralNursingStation.tsx
@@ -48,8 +48,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
       asset_class: "HL7MONITOR",
       ordering: qParams.ordering || "bed__name",
       bed_is_occupied:
-        (qParams.hide_monitors_without_patient ?? "true") === "true" ||
-        undefined,
+        qParams.monitors_without_patient === "true" ? undefined : "true",
     },
   });
 
@@ -81,9 +80,17 @@ export default function CentralNursingStation({ facilityId }: Props) {
         <div className="flex flex-row-reverse items-center gap-4 md:flex-row">
           <Popover className="relative">
             <Popover.Button>
-              <ButtonV2 variant="secondary" border>
+              <ButtonV2
+                variant={
+                  qParams.location ||
+                  qParams.monitors_without_patient === "true"
+                    ? "primary"
+                    : "secondary"
+                }
+                border
+              >
                 <CareIcon icon="l-setting" className="text-lg" />
-                Settings and Filters
+                {t("settings_and_filters")}
               </ButtonV2>
             </Popover.Button>
             <Transition
@@ -96,10 +103,10 @@ export default function CentralNursingStation({ facilityId }: Props) {
               leaveTo="opacity-0 translate-y-1"
             >
               <Popover.Panel className="absolute z-30 mt-1 w-80 -translate-x-1/3 px-4 sm:px-0 md:w-96 md:-translate-x-1/2 lg:max-w-3xl">
-                <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
-                  <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+                <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+                  <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
                     <div className="flow-root rounded-md">
-                      <span className="block text-sm text-gray-800">
+                      <span className="block text-sm text-secondary-800">
                         <span className="font-bold ">{totalCount}</span> Vitals
                         Monitor present
                       </span>
@@ -150,10 +157,10 @@ export default function CentralNursingStation({ facilityId }: Props) {
                       errorClassName="hidden"
                     />
                     <CheckBoxFormField
-                      name="hide_monitors_without_patient"
-                      label="Hide Monitors without Patient"
+                      name="monitors_without_patient"
+                      label="Include monitors without patient"
                       value={JSON.parse(
-                        qParams.hide_monitors_without_patient ?? true,
+                        qParams.monitors_without_patient ?? "false",
                       )}
                       onChange={(e) => updateQuery({ [e.name]: `${e.value}` })}
                       labelClassName="text-sm"
diff --git a/src/Components/Facility/ConsultationCard.tsx b/src/Components/Facility/ConsultationCard.tsx
index dd74f67f7e7..e5bf28dd803 100644
--- a/src/Components/Facility/ConsultationCard.tsx
+++ b/src/Components/Facility/ConsultationCard.tsx
@@ -144,7 +144,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
         </div>
         <div className="mt-8 flex flex-col">
           {
-            <div className="flex flex-col items-center text-sm text-gray-700 md:flex-row">
+            <div className="flex flex-col items-center text-sm text-secondary-700 md:flex-row">
               <div className=" font-medium text-black">Created : </div>
               <div className=" ml-1 text-black">
                 <RelativeDateUserMention
@@ -155,9 +155,9 @@ export const ConsultationCard = (props: ConsultationProps) => {
               </div>
             </div>
           }
-          <div className="flex flex-col items-center text-sm text-gray-700 md:flex-row">
+          <div className="flex flex-col items-center text-sm text-secondary-700 md:flex-row">
             <div className=" font-medium text-black">Last Modified : </div>
-            <div className=" ml-1 text-gray-700">
+            <div className=" ml-1 text-secondary-700">
               <RelativeDateUserMention
                 tooltipPosition="right"
                 actionDate={itemData.modified_date}
@@ -169,7 +169,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
         <div className="mt-4 flex w-full flex-col justify-between gap-1 md:flex-row">
           <ButtonV2
             id="view_consulation_updates"
-            className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+            className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
             onClick={() =>
               navigate(
                 `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}`,
@@ -179,7 +179,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
             View Consultation / Consultation Updates
           </ButtonV2>
           <ButtonV2
-            className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+            className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
             onClick={() =>
               navigate(
                 `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/files/`,
@@ -190,7 +190,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
           </ButtonV2>
           {isLastConsultation && (
             <ButtonV2
-              className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+              className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
               onClick={() => {
                 if (itemData.admitted && !itemData.current_bed) {
                   Notification.Error({
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
index 378f16eb7ed..34931b303f8 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
@@ -8,7 +8,6 @@ import Loading from "../../Common/Loading";
 import AssetBedSelect from "../../CameraFeed/AssetBedSelect";
 import { triggerGoal } from "../../../Integrations/Plausible";
 import useAuthUser from "../../../Common/hooks/useAuthUser";
-import PageTitle from "../../Common/PageTitle";
 import useSlug from "../../../Common/hooks/useSlug";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import ButtonV2 from "../../Common/components/ButtonV2";
@@ -18,8 +17,12 @@ import useOperateCamera, {
 import request from "../../../Utils/request/request";
 import { classNames, isIOS } from "../../../Utils/utils";
 import ConfirmDialog from "../../Common/ConfirmDialog";
+import useBreakpoints from "../../../Common/hooks/useBreakpoints";
+import { Warn } from "../../../Utils/Notifications";
+import { useTranslation } from "react-i18next";
 
 export const ConsultationFeedTab = (props: ConsultationTabProps) => {
+  const { t } = useTranslation();
   const authUser = useAuthUser();
   const facility = useSlug("facility");
   const bed = props.consultationData.current_bed?.bed_object;
@@ -30,10 +33,23 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
     useState(false);
   const [isUpdatingPreset, setIsUpdatingPreset] = useState(false);
   const [hasMoved, setHasMoved] = useState(false);
-  const [key, setKey] = useState(0);
   const divRef = useRef<any>();
 
-  const operate = useOperateCamera(asset?.id ?? "", true);
+  const suggestOptimalExperience = useBreakpoints({ default: true, sm: false });
+
+  useEffect(() => {
+    if (suggestOptimalExperience) {
+      Warn({
+        msg: t(
+          isIOS
+            ? "feed_optimal_experience_for_apple_phones"
+            : "feed_optimal_experience_for_phones",
+        ),
+      });
+    }
+  }, []);
+
+  const { key, operate } = useOperateCamera(asset?.id ?? "", true);
 
   const { data, loading, refetch } = useQuery(routes.listAssetBeds, {
     query: { limit: 100, facility, bed: bed?.id, asset: asset?.id },
@@ -108,97 +124,83 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
         onConfirm={handleUpdatePreset}
       />
 
-      <div>
-        <PageTitle
-          title="Camera Feed"
-          breadcrumbs={false}
-          hideBack={true}
-          focusOnLoad={false}
-        />
-        <span className="mb-2 flex rounded-lg border border-warning-400 bg-warning-100 px-2 py-1 text-sm font-medium text-warning-700 sm:hidden">
-          <CareIcon icon="l-exclamation-triangle" className="pr-2 text-base" />
-          For better experience, rotate your device.
-        </span>
-        <div ref={divRef}>
-          <CameraFeed
-            key={key}
-            asset={asset}
-            preset={preset?.meta.position}
-            onMove={() => setHasMoved(true)}
-            onReset={() => {
-              if (isIOS) {
-                setKey(key + 1);
-              }
-            }}
-            onStreamError={() => {
-              triggerGoal("Camera Feed Viewed", {
-                consultationId: props.consultationId,
-                userId: authUser.id,
-                result: "error",
-              });
-            }}
-            onStreamSuccess={() => {
-              triggerGoal("Camera Feed Viewed", {
-                consultationId: props.consultationId,
-                userId: authUser.id,
-                result: "success",
-              });
-            }}
-          >
-            <div className="flex items-center">
-              {presets ? (
-                <>
-                  <AssetBedSelect
-                    options={presets}
-                    label={(obj) => obj.meta.preset_name}
-                    value={preset}
-                    onChange={(value) => {
-                      triggerGoal("Camera Preset Clicked", {
-                        presetName: preset?.meta?.preset_name,
-                        consultationId: props.consultationId,
-                        userId: authUser.id,
-                        result: "success",
-                      });
-                      setHasMoved(false);
-                      setPreset(value);
-                    }}
+      <div
+        ref={divRef}
+        className={classNames(
+          "-mx-3 lg:-mb-2",
+          isIOS && "mt-8", // For some reason iOS based browser alone seems to be needing this.
+        )}
+      >
+        <CameraFeed
+          key={key}
+          asset={asset}
+          preset={preset?.meta.position}
+          onMove={() => setHasMoved(true)}
+          operate={operate}
+          onStreamError={() => {
+            triggerGoal("Camera Feed Viewed", {
+              consultationId: props.consultationId,
+              userId: authUser.id,
+              result: "error",
+            });
+          }}
+          onStreamSuccess={() => {
+            triggerGoal("Camera Feed Viewed", {
+              consultationId: props.consultationId,
+              userId: authUser.id,
+              result: "success",
+            });
+          }}
+        >
+          <div className="flex items-center">
+            {presets ? (
+              <>
+                <AssetBedSelect
+                  options={presets}
+                  label={(obj) => obj.meta.preset_name}
+                  value={preset}
+                  onChange={(value) => {
+                    triggerGoal("Camera Preset Clicked", {
+                      presetName: preset?.meta?.preset_name,
+                      consultationId: props.consultationId,
+                      userId: authUser.id,
+                      result: "success",
+                    });
+                    setHasMoved(false);
+                    setPreset(value);
+                  }}
+                />
+                {isUpdatingPreset ? (
+                  <CareIcon
+                    icon="l-spinner"
+                    className="animate-spin text-base text-zinc-300 md:mx-2"
                   />
-                  {isUpdatingPreset ? (
-                    <CareIcon
-                      icon="l-spinner"
-                      className="animate-spin text-base text-zinc-300 md:mx-2"
-                    />
-                  ) : (
-                    <ButtonV2
-                      size="small"
-                      variant="secondary"
-                      disabled={!hasMoved}
-                      className="hover:bg-zinc-700 disabled:bg-transparent"
-                      ghost
-                      tooltip={
-                        hasMoved
-                          ? "Save current position to selected preset"
-                          : "Change camera position to update preset"
-                      }
-                      tooltipClassName="translate-x-3 translate-y-8 text-xs"
-                      onClick={() => setShowPresetSaveConfirmation(true)}
-                    >
-                      <CareIcon
-                        icon="l-save"
-                        className={classNames(
-                          "text-lg",
-                          hasMoved ? "text-gray-200" : "text-gray-500",
-                        )}
-                      />
-                    </ButtonV2>
-                  )}
-                </>
-              ) : (
-                <span>loading presets...</span>
-              )}
-            </div>
-          </CameraFeed>
-        </div>
+                ) : (
+                  <ButtonV2
+                    size="small"
+                    variant={hasMoved ? "secondary" : "secondary"}
+                    disabled={!hasMoved}
+                    border
+                    ghost={!hasMoved}
+                    shadow={hasMoved}
+                    tooltip={
+                      hasMoved
+                        ? "Save current position to selected preset"
+                        : "Change camera position to update preset"
+                    }
+                    tooltipClassName="translate-x-3 translate-y-8 text-xs"
+                    className="ml-1"
+                    onClick={() => setShowPresetSaveConfirmation(true)}
+                  >
+                    <CareIcon icon="l-save" className="text-lg" />
+                  </ButtonV2>
+                )}
+              </>
+            ) : (
+              <span>loading presets...</span>
+            )}
+          </div>
+        </CameraFeed>
       </div>
     </>
   );
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 7a4080f53dd..22194b410b7 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -195,7 +195,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                 }`}
               >
                 <div className="px-4 py-5 sm:p-6" id="discharge-information">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Discharge Information
                   </h3>
                   <div className="mt-2 grid gap-4">
@@ -247,7 +247,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                             prescription_type="DISCHARGE"
                           />
                         </div>
-                        <hr className="my-2 border border-gray-300"></hr>
+                        <hr className="my-2 border border-secondary-300"></hr>
                         <div className="overflow-x-auto overflow-y-hidden">
                           <PrescriptionsTable
                             is_prn
@@ -319,7 +319,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.history_of_present_illness && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="history-presentillness">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     History of Present Illness
                   </h3>
                   <div className="mt-2">
@@ -335,7 +335,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.examination_details && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="examination-details">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Examination details and Clinical conditions:{" "}
                   </h3>
                   <div className="mt-2">
@@ -350,7 +350,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.treatment_plan && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="treatment-summary">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Treatment Summary
                   </h3>
                   <div className="mt-2">
@@ -365,7 +365,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             {props.consultationData.consultation_notes && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="general-instructions">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     General Instructions
                   </h3>
                   <div className="mt-2">
@@ -382,7 +382,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
               props.consultationData.special_instruction) && (
               <div className="overflow-hidden rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6" id="consultation-notes">
-                  <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                  <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                     Notes
                   </h3>
                   <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -414,24 +414,24 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             props.consultationData.procedure.length > 0 && (
               <div className="my-4 rounded-lg bg-white p-4 shadow">
                 <div className="overflow-x-auto" id="consultation-procedure">
-                  <table className="min-w-full divide-y divide-gray-200">
+                  <table className="min-w-full divide-y divide-secondary-200">
                     <thead>
                       <tr>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Procedure
                         </th>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Notes
                         </th>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Repetitive
                         </th>
-                        <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-gray-600">
+                        <th className="bg-secondary-100 px-4 py-3 text-left text-sm font-medium uppercase tracking-wider text-secondary-600">
                           Time / Frequency
                         </th>
                       </tr>
                     </thead>
-                    <tbody className="divide-y divide-gray-200 bg-white">
+                    <tbody className="divide-y divide-secondary-200 bg-white">
                       {props.consultationData.procedure?.map(
                         (procedure, index) => (
                           <tr key={index}>
@@ -460,7 +460,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           {props.consultationData.intubation_start_date && (
             <div className="mt-4 overflow-hidden rounded-lg bg-white shadow">
               <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                   Date/Size/LL:{" "}
                 </h3>
                 <div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -501,7 +501,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           {props.consultationData.lines?.length > 0 && (
             <div className="mt-4 overflow-hidden rounded-lg bg-white shadow">
               <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                   Lines and Catheters
                 </h3>
                 <div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -536,7 +536,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="col-span-1 mt-4 overflow-hidden rounded-lg bg-white shadow">
               <div className="px-4 py-5 sm:p-6">
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="text-lg font-semibold leading-relaxed text-secondary-900">
                   Body Details
                 </h3>
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -588,7 +588,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
               isAntenatal(props.patientData.last_menstruation_start_date)) ||
               isPostPartum(props.patientData.date_of_delivery)) && (
               <div className="mt-4 rounded-lg bg-white px-4 py-5 shadow sm:p-6">
-                <h3 className="mb-4 text-lg font-semibold leading-relaxed text-gray-900">
+                <h3 className="mb-4 text-lg font-semibold leading-relaxed text-secondary-900">
                   Perinatal Status
                 </h3>
 
diff --git a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx b/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
index fd45e3695d0..cf997dca4b3 100644
--- a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
+++ b/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
@@ -18,8 +18,8 @@ export default function EventsList() {
         <>
           <div className="mt-4 flex w-full flex-col gap-4">
             <div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
-              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-                <span className="flex justify-center rounded-lg bg-white p-3 text-gray-700  ">
+              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
+                <span className="flex justify-center rounded-lg bg-white p-3 text-secondary-700  ">
                   {t("no_consultation_updates")}
                 </span>
               </PaginatedList.WhenEmpty>
@@ -54,7 +54,7 @@ export default function EventsList() {
                       if (entries.length === 0) {
                         return (
                           <div className="flex w-full flex-col items-center gap-2 md:flex-row">
-                            <span className="text-xs uppercase text-gray-700">
+                            <span className="text-xs uppercase text-secondary-700">
                               {t("no_changes")}
                             </span>
                           </div>
diff --git a/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx b/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
index 543336987b2..414b86fecbe 100644
--- a/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
+++ b/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
@@ -66,10 +66,10 @@ const formatValue = (value: unknown, key?: string): ReactNode => {
 
     return entries.map(([key, value]) => (
       <div className="flex flex-col items-center gap-2 md:flex-row">
-        <span className="text-xs uppercase text-gray-700">
+        <span className="text-xs uppercase text-secondary-700">
           {key.replaceAll(/_/g, " ")}
         </span>
-        <span className="text-sm font-semibold capitalize text-gray-700">
+        <span className="text-sm font-semibold capitalize text-secondary-700">
           {formatValue(value, key)}
         </span>
       </div>
@@ -81,13 +81,13 @@ const formatValue = (value: unknown, key?: string): ReactNode => {
 
 export default function GenericEvent(props: IProps) {
   return (
-    <div className="flex w-full flex-col gap-4 rounded-lg border border-gray-400 p-4 @container">
+    <div className="flex w-full flex-col gap-4 rounded-lg border border-secondary-400 p-4 @container">
       {Object.entries(props.values).map(([key, value]) => (
         <div className="flex w-full flex-col items-start gap-2">
-          <span className="text-xs uppercase text-gray-700">
+          <span className="text-xs uppercase text-secondary-700">
             {key.replaceAll(/_/g, " ")}
           </span>
-          <span className="break-all text-sm font-semibold text-gray-700">
+          <span className="break-all text-sm font-semibold text-secondary-700">
             {formatValue(value, key)}
           </span>
         </div>
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index e46db70189a..52996a3e769 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -11,7 +11,11 @@ import { lazy, useCallback, useState } from "react";
 import DoctorVideoSlideover from "../DoctorVideoSlideover";
 import { make as Link } from "../../Common/components/Link.bs";
 import { PatientModel } from "../../Patient/models";
-import { formatDateTime, relativeTime } from "../../../Utils/utils";
+import {
+  formatDateTime,
+  humanizeStrings,
+  relativeTime,
+} from "../../../Utils/utils";
 
 import { navigate, useQueryParams } from "raviger";
 import { useDispatch } from "react-redux";
@@ -93,8 +97,9 @@ export const ConsultationDetails = (props: any) => {
 
   const getPatientComorbidities = (patientData: any) => {
     if (patientData?.medical_history?.length) {
-      const medHis = patientData.medical_history;
-      return medHis.map((item: any) => item.disease).join(", ");
+      return humanizeStrings(
+        patientData.medical_history.map((item: any) => item.disease),
+      );
     } else {
       return "None";
     }
@@ -113,15 +118,6 @@ export const ConsultationDetails = (props: any) => {
             ...res.data,
             symptoms_text: "",
           };
-          // if (res.data.symptoms?.length) {
-          //   const symptoms = res.data.symptoms
-          //     .filter((symptom: number) => symptom !== 9)
-          //     .map((symptom: number) => {
-          //       const option = symptomChoices.find((i) => i.id === symptom);
-          //       return option ? option.text.toLowerCase() : symptom;
-          //     });
-          //   data.symptoms_text = symptoms.join(", ");
-          // }
           if (facilityId != data.facility || patientId != data.patient) {
             navigate(
               `/facility/${data.facility}/patient/${data.patient}/consultation/${data?.id}`,
@@ -209,13 +205,15 @@ export const ConsultationDetails = (props: any) => {
   }
 
   const tabButtonClasses = (selected: boolean) =>
-    `capitalize min-w-max-content cursor-pointer border-transparent text-gray-700 hover:text-gray-700 hover:border-gray-300 font-bold whitespace-nowrap ${
-      selected === true ? "border-primary-500 text-primary-600 border-b-2" : ""
+    `capitalize min-w-max-content cursor-pointer font-bold whitespace-nowrap ${
+      selected === true
+        ? "border-primary-500 hover:border-secondary-300 text-primary-600 border-b-2"
+        : "text-secondary-700 hover:text-secondary-700"
     }`;
 
   return (
     <div>
-      <div className="px-2 pb-2">
+      <div>
         <nav className="relative flex flex-wrap items-start justify-between">
           <PageTitle
             title="Patient Dashboard"
@@ -302,7 +300,7 @@ export const ConsultationDetails = (props: any) => {
 
             <div className="flex flex-col justify-between px-4 md:flex-row">
               {consultationData.admitted_to && (
-                <div className="mt-2 rounded-lg border bg-gray-100 p-2 md:mt-0">
+                <div className="mt-2 rounded-lg border bg-secondary-100 p-2 md:mt-0">
                   <div className="border-b-2 py-1">
                     Patient
                     {consultationData.discharge_date
@@ -332,9 +330,9 @@ export const ConsultationDetails = (props: any) => {
               )}
             </div>
             <div className="flex flex-col justify-between gap-2 px-4 py-1 md:flex-row">
-              <div className="font-base flex flex-col text-xs leading-relaxed text-gray-700">
+              <div className="font-base flex flex-col text-xs leading-relaxed text-secondary-700">
                 <div className="flex">
-                  <span className="text-gray-900">Created: </span>&nbsp;
+                  <span className="text-secondary-900">Created: </span>&nbsp;
                   <RelativeDateUserMention
                     actionDate={consultationData.created_date}
                     user={consultationData.created_by}
@@ -343,9 +341,10 @@ export const ConsultationDetails = (props: any) => {
                   />
                 </div>
               </div>
-              <div className="font-base flex flex-col text-xs leading-relaxed text-gray-700 md:text-right">
+              <div className="font-base flex flex-col text-xs leading-relaxed text-secondary-700 md:text-right">
                 <div className="flex">
-                  <span className="text-gray-900">Last Modified: </span>&nbsp;
+                  <span className="text-secondary-900">Last Modified: </span>
+                  &nbsp;
                   <RelativeDateUserMention
                     actionDate={consultationData.modified_date}
                     user={consultationData.last_edited_by}
@@ -366,7 +365,7 @@ export const ConsultationDetails = (props: any) => {
             </div>
           </div>
         )}
-        <div className="mt-4 w-full border-b-2 border-gray-200">
+        <div className="mt-4 w-full border-b-2 border-secondary-200">
           <div className="overflow-x-auto sm:flex sm:items-baseline">
             <div className="mt-4 sm:mt-0">
               <nav
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
index 522ad168b86..180f838e8eb 100644
--- a/src/Components/Facility/ConsultationDoctorNotes/index.tsx
+++ b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -120,16 +120,16 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
       }}
       backUrl={`/facility/${facilityId}/patient/${patientId}`}
     >
-      <div className="relative mx-3 my-2 flex grow flex-col overflow-hidden rounded-lg border border-gray-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 flex bg-gray-200 text-sm shadow-md">
+      <div className="relative mx-3 my-2 flex grow flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
+        <div className="absolute inset-x-0 top-0 flex bg-secondary-200 text-sm shadow-md">
           {Object.values(PATIENT_NOTES_THREADS).map((current) => (
             <button
               key={current}
               className={classNames(
                 "flex flex-1 justify-center border-b-2 py-2",
                 thread === current
-                  ? "border-primary-500 font-bold text-gray-800"
-                  : "border-gray-300 text-gray-800",
+                  ? "border-primary-500 font-bold text-secondary-800"
+                  : "border-secondary-300 text-secondary-800",
               )}
               onClick={() => setThread(current)}
             >
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index a728ffc805a..a94f496cfca 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -819,11 +819,11 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
         ref={section.ref as LegacyRef<HTMLDivElement>}
       >
         <CareIcon icon={section.iconClass} className="mr-3 text-xl" />
-        <label className="text-lg font-bold text-gray-900">
+        <label className="text-lg font-bold text-secondary-900">
           {sectionTitle}
           {required && <span className="text-danger-500">{" *"}</span>}
         </label>
-        <hr className="ml-6 flex-1 border border-gray-400" />
+        <hr className="ml-6 flex-1 border border-secondary-400" />
       </div>
     );
   };
@@ -1101,7 +1101,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                         placeholder="Weight"
                         trailingPadding=" "
                         trailing={
-                          <p className="absolute right-10 whitespace-nowrap text-sm text-gray-700">
+                          <p className="absolute right-10 whitespace-nowrap text-sm text-secondary-700">
                             Weight (kg)
                           </p>
                         }
@@ -1114,7 +1114,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                         placeholder="Height"
                         trailingPadding=" "
                         trailing={
-                          <p className="absolute right-10 whitespace-nowrap text-sm text-gray-700">
+                          <p className="absolute right-10 whitespace-nowrap text-sm text-secondary-700">
                             Height (cm)
                           </p>
                         }
@@ -1230,16 +1230,9 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                       required={["A", "DC", "OP"].includes(
                         state.form.suggestion,
                       )}
-                      label={
-                        {
-                          A: "Date & Time of Admission to the Facility",
-                          DC: "Date & Time of Domiciliary Care commencement",
-                          OP: "Date & Time of Out-patient visit",
-                          DD: "Date & Time of Consultation",
-                          HI: "Date & Time of Consultation",
-                          R: "Date & Time of Consultation",
-                        }[state.form.suggestion]
-                      }
+                      label={t(
+                        `encounter_date_field_label__${state.form.suggestion}`,
+                      )}
                       type="datetime-local"
                       value={dayjs(state.form.encounter_date).format(
                         "YYYY-MM-DDTHH:mm",
@@ -1251,6 +1244,21 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                           : undefined
                       }
                     />
+                    {dayjs().diff(state.form.encounter_date, "day") > 30 && (
+                      <div className="mb-6">
+                        <span className="font-medium text-warning-500">
+                          <CareIcon
+                            icon="l-exclamation-triangle"
+                            className="pr-2 text-lg"
+                          />
+                          {t("caution")}:{" "}
+                          {t("back_dated_encounter_date_caution")}{" "}
+                          <strong className="font-bold">
+                            {dayjs(state.form.encounter_date).fromNow()}.
+                          </strong>
+                        </span>
+                      </div>
+                    )}
                   </div>
 
                   {state.form.route_to_facility === 30 && (
@@ -1307,7 +1315,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                 <div className="flex flex-col gap-4 pb-4">
                   <div className="flex flex-col">
                     {sectionTitle("Diagnosis", true)}
-                    <p className="-mt-4 space-x-1 text-sm text-gray-700">
+                    <p className="-mt-4 space-x-1 text-sm text-secondary-700">
                       <span>Diagnoses as per ICD-11 recommended by WHO</span>
                     </p>
                   </div>
diff --git a/src/Components/Facility/Consultations/BedActivityTimeline.tsx b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
index 679913e34fd..c660296918a 100644
--- a/src/Components/Facility/Consultations/BedActivityTimeline.tsx
+++ b/src/Components/Facility/Consultations/BedActivityTimeline.tsx
@@ -144,7 +144,7 @@ const BedTimelineAsset = ({
       {newlyLinkedAssets.length === 0 &&
         existingAssets.length === 0 &&
         unlinkedAssets.length === 0 && (
-          <p className="text-gray-500">No assets linked</p>
+          <p className="text-secondary-500">No assets linked</p>
         )}
       {newlyLinkedAssets.length > 0 &&
         newlyLinkedAssets.map((newAsset) => (
@@ -162,7 +162,7 @@ const BedTimelineAsset = ({
         ))}
       {unlinkedAssets.length > 0 &&
         unlinkedAssets.map((unlinkedAsset) => (
-          <div key={unlinkedAsset.id} className="flex gap-1 text-gray-500">
+          <div key={unlinkedAsset.id} className="flex gap-1 text-secondary-500">
             <CareIcon icon="l-minus-circle" />
             <span className="line-through">{unlinkedAsset.name}</span>
           </div>
@@ -181,7 +181,7 @@ const BedTimelineNodeTitle = (props: {
   return (
     <TimelineNodeTitle event={event}>
       <div className="flex w-full justify-between gap-2">
-        <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600 md:w-2/3">
+        <p className="flex-auto py-0.5 text-xs leading-5 text-secondary-600 md:w-2/3">
           {titleSuffix}
         </p>
         <div className="md:w-fit">
@@ -204,7 +204,7 @@ const BedTitleSuffix = ({
     <div className="flex flex-col">
       <div className="flex gap-x-2">
         <span>{formatDateTime(bed.start_date).split(";")[0]}</span>
-        <span className="text-gray-500">-</span>
+        <span className="text-secondary-500">-</span>
         <span>{formatDateTime(bed.start_date).split(";")[1]}</span>
       </div>
       <p>
@@ -233,11 +233,11 @@ const BedActivityIButtonPopover = ({
   bed?: CurrentBed;
 }) => {
   return (
-    <Popover className="relative text-sm text-gray-500 md:text-base">
+    <Popover className="relative text-sm text-secondary-500 md:text-base">
       <Popover.Button>
         <CareIcon
           icon="l-info-circle"
-          className="cursor-pointer text-gray-500 hover:text-gray-600"
+          className="cursor-pointer text-secondary-500 hover:text-secondary-600"
         />
       </Popover.Button>
       <Transition
@@ -249,8 +249,8 @@ const BedActivityIButtonPopover = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
       >
-        <Popover.Panel className="absolute z-10 -ml-20 mt-2 w-48 -translate-x-1/2 rounded-lg border border-gray-200 bg-gray-100 p-2 shadow">
-          <p className="text-xs text-gray-600">
+        <Popover.Panel className="absolute z-10 -ml-20 mt-2 w-48 -translate-x-1/2 rounded-lg border border-secondary-200 bg-secondary-100 p-2 shadow">
+          <p className="text-xs text-secondary-600">
             updated {relativeTime(bed?.start_date)}
           </p>
         </Popover.Panel>
diff --git a/src/Components/Facility/Consultations/Beds.tsx b/src/Components/Facility/Consultations/Beds.tsx
index c86e32cc560..2e5842680d9 100644
--- a/src/Components/Facility/Consultations/Beds.tsx
+++ b/src/Components/Facility/Consultations/Beds.tsx
@@ -251,8 +251,8 @@ const Beds = (props: BedsProps) => {
             loading={loading}
           />
         ) : (
-          <div className="flex w-full justify-center border-2 border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-            <span className="flex justify-center rounded-lg bg-white p-3 text-gray-700">
+          <div className="flex w-full justify-center border-2 border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
+            <span className="flex justify-center rounded-lg bg-white p-3 text-secondary-700">
               No beds allocated yet
             </span>
           </div>
diff --git a/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx b/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
index 03a2c7088e5..ae18e85e0d8 100644
--- a/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
@@ -16,7 +16,7 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
 
   return (
     <div
-      className="flex w-full flex-col gap-4 rounded-lg border border-gray-400 p-4 @container"
+      className="flex w-full flex-col gap-4 rounded-lg border border-secondary-400 p-4 @container"
       id="dailyround-entry"
     >
       <LogUpdateCardAttribute
diff --git a/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx b/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx
index 5633a51c2fc..c7139f6bb63 100644
--- a/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/LoadingCard.tsx
@@ -1,11 +1,11 @@
 export default function LoadingLogUpdateCard() {
   return (
     <div className="flex w-full animate-pulse flex-col gap-4 rounded-lg border border-green-300 bg-white p-4 shadow shadow-primary-500/20">
-      <div className="h-4 w-full rounded-lg bg-gray-400" />
+      <div className="h-4 w-full rounded-lg bg-secondary-400" />
       <div className="flex flex-col gap-2">
-        <div className="h-4 w-full rounded-lg bg-gray-400 pr-8" />
-        <div className="h-4 w-full rounded-lg bg-gray-400 pr-16" />
-        <div className="h-4 w-full rounded-lg bg-gray-400 pr-12" />
+        <div className="h-4 w-full rounded-lg bg-secondary-400 pr-8" />
+        <div className="h-4 w-full rounded-lg bg-secondary-400 pr-16" />
+        <div className="h-4 w-full rounded-lg bg-secondary-400 pr-12" />
       </div>
     </div>
   );
diff --git a/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx b/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx
index e147b2ec3a4..a071bc9eef7 100644
--- a/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx
@@ -44,7 +44,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col items-center gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="text-sm font-semibold text-gray-700">
+          <span className="text-sm font-semibold text-secondary-700">
             {(attributeValue as BloodPressure).systolic}/
             {(attributeValue as BloodPressure).diastolic} mmHg
           </span>
@@ -55,7 +55,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="flex flex-wrap gap-x-2 gap-y-1 text-sm text-gray-700">
+          <span className="flex flex-wrap gap-x-2 gap-y-1 text-sm text-secondary-700">
             {(attributeValue as DailyRoundsOutput[]).map((output) => (
               <span className="font-semibold" key={output.name}>
                 {output.name}: {output.quantity}
@@ -69,7 +69,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col items-center gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="text-sm font-semibold text-gray-700">
+          <span className="text-sm font-semibold text-secondary-700">
             {t(attributeValue)}
           </span>
         </div>
@@ -79,7 +79,7 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
       return (
         <div className="flex flex-col items-center gap-2 md:flex-row">
           <AttributeLabel attributeKey={attributeKey} />
-          <span className="text-sm font-semibold text-gray-700">
+          <span className="text-sm font-semibold text-secondary-700">
             {typeof attributeValue === "object"
               ? JSON.stringify(attributeValue)
               : attributeValue}
@@ -93,7 +93,7 @@ export default LogUpdateCardAttribute;
 
 const AttributeLabel = (props: { attributeKey: string }) => {
   return (
-    <span className="text-xs uppercase text-gray-700">
+    <span className="text-xs uppercase text-secondary-700">
       {props.attributeKey.replaceAll("_", " ")}
     </span>
   );
diff --git a/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx b/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx
index 2b2c752c83f..01c45d996ae 100644
--- a/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/VirtualNursingAssistantLogUpdateCard.tsx
@@ -67,7 +67,7 @@ const VirtualNursingAssistantLogUpdateCard = (props: Props) => {
             />
           ))
         ) : (
-          <span className="text-sm italic text-gray-600">
+          <span className="text-sm italic text-secondary-600">
             {t("no_log_update_delta")}
           </span>
         )}
diff --git a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx b/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
index 829c085a840..be643845d8b 100644
--- a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
+++ b/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
@@ -59,10 +59,10 @@ export default function DailyRoundsFilter(props: Props) {
           leaveTo="opacity-0 translate-y-1"
         >
           <Popover.Panel className="absolute right-0 z-30 mt-1 w-80 px-4 sm:px-0 md:w-96 lg:max-w-3xl">
-            <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
-              <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+            <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
+              <div className="rounded-t-lg bg-secondary-100 px-6 py-4">
                 <div className="flow-root rounded-md">
-                  <span className="block text-sm text-gray-800">
+                  <span className="block text-sm text-secondary-800">
                     {t("filter_by")}
                   </span>
                 </div>
diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
index fcea928620d..216b92410d2 100644
--- a/src/Components/Facility/Consultations/DailyRoundsList.tsx
+++ b/src/Components/Facility/Consultations/DailyRoundsList.tsx
@@ -44,8 +44,8 @@ export default function DailyRoundsList({ consultation }: Props) {
 
           <div className="flex max-h-screen min-h-full w-full flex-col gap-4">
             <div className="flex flex-col gap-4 overflow-y-auto overflow-x-hidden px-3">
-              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-                <span className="flex justify-center rounded-lg bg-white p-3 text-gray-700  ">
+              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
+                <span className="flex justify-center rounded-lg bg-white p-3 text-secondary-700  ">
                   {t("no_consultation_updates")}
                 </span>
               </PaginatedList.WhenEmpty>
diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index bae950c6e15..317e9d768c7 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -444,7 +444,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId }) => {
                   getCameraStatus({});
                 }}
                 className={classNames(
-                  "block border border-gray-500 px-4 py-2 first:rounded-l last:rounded-r",
+                  "block border border-secondary-500 px-4 py-2 first:rounded-l last:rounded-r",
                   currentPreset === preset
                     ? "border-primary-500 bg-primary-500 text-white"
                     : "bg-transparent",
@@ -579,7 +579,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId }) => {
         </div>
         {streamStatus === StreamStatus.Playing &&
           calculateVideoLiveDelay() > 3 && (
-            <div className="absolute left-8 top-8 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-gray-100">
+            <div className="absolute left-8 top-8 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-secondary-100">
               <CareIcon icon="l-wifi-slash" className="h-4 w-4" />
               <span>Slow Network Detected</span>
             </div>
@@ -656,7 +656,7 @@ export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
   return (
     <button
       key="option.action"
-      className="tooltip rounded text-2xl text-gray-600"
+      className="tooltip rounded text-2xl text-secondary-600"
     >
       <CareIcon icon="l-question-circle" />
 
@@ -673,7 +673,7 @@ export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
                   const keyElement = (
                     <div
                       key={index}
-                      className="rounded-md border border-gray-500 p-1.5 font-mono shadow-md"
+                      className="rounded-md border border-secondary-500 p-1.5 font-mono shadow-md"
                     >
                       {isArrowKey ? (
                         <CareIcon icon={option.icon as IconName} />
diff --git a/src/Components/Facility/Consultations/LiveFeed.tsx b/src/Components/Facility/Consultations/LiveFeed.tsx
index 621a0baf0aa..a3647517921 100644
--- a/src/Components/Facility/Consultations/LiveFeed.tsx
+++ b/src/Components/Facility/Consultations/LiveFeed.tsx
@@ -25,6 +25,7 @@ import { FieldLabel } from "../../Form/FormFields/FormField";
 import useFullscreen from "../../../Common/hooks/useFullscreen";
 import ReactPlayer from "react-player";
 import { isIOS } from "../../../Utils/utils";
+import TextFormField from "../../Form/FormFields/TextFormField";
 
 const LiveFeed = (props: any) => {
   const middlewareHostname = props.middlewareHostname;
@@ -39,7 +40,7 @@ const LiveFeed = (props: any) => {
   );
   const [videoStartTime, setVideoStartTime] = useState<Date | null>(null);
   const [bed, setBed] = useState<BedModel>({});
-  const [preset, setNewPreset] = useState<string>("");
+  const [presetName, setPresetName] = useState("");
   const [loading, setLoading] = useState<string | undefined>();
   const dispatch: any = useDispatch();
   const [page, setPage] = useState({
@@ -145,7 +146,7 @@ const LiveFeed = (props: any) => {
   const updatePreset = async (currentPreset: any) => {
     const data = {
       bed_id: bed.id,
-      preset_name: preset,
+      preset_name: presetName,
     };
     const response = await dispatch(
       partialUpdateAssetBed(
@@ -187,7 +188,7 @@ const LiveFeed = (props: any) => {
   }, []);
 
   useEffect(() => {
-    setNewPreset(toUpdate?.meta?.preset_name);
+    setPresetName(toUpdate?.meta?.preset_name);
     setBed(toUpdate?.bed_object);
   }, [toUpdate]);
 
@@ -334,23 +335,30 @@ const LiveFeed = (props: any) => {
         <ConfirmDialog
           show
           title="Update Preset"
-          description={"Preset: " + toUpdate.meta.preset_name}
           action="Update"
           variant="primary"
           onClose={() => setToUpdate(null)}
           onConfirm={() => updatePreset(toUpdate)}
         >
-          <div className="mt-4 flex flex-col">
-            <FieldLabel required>Bed</FieldLabel>
-            <BedSelect
-              name="bed"
-              setSelected={(selected) => setBed(selected as BedModel)}
-              selected={bed}
-              error=""
-              multiple={false}
-              location={cameraAsset.location_id}
-              facility={cameraAsset.facility_id}
+          <div className="mt-4">
+            <TextFormField
+              name="preset_name"
+              label="Preset Name"
+              value={presetName}
+              onChange={({ value }) => setPresetName(value)}
             />
+            <div className="flex flex-col">
+              <FieldLabel required>Bed</FieldLabel>
+              <BedSelect
+                name="bed"
+                setSelected={(selected) => setBed(selected as BedModel)}
+                selected={bed}
+                error=""
+                multiple={false}
+                location={cameraAsset.location_id}
+                facility={cameraAsset.facility_id}
+              />
+            </div>
           </div>
         </ConfirmDialog>
       )}
@@ -410,7 +418,7 @@ const LiveFeed = (props: any) => {
 
               {streamStatus === StreamStatus.Playing &&
                 calculateVideoLiveDelay() > 3 && (
-                  <div className="absolute left-8 top-12 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-gray-100">
+                  <div className="absolute left-8 top-12 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-secondary-100">
                     <CareIcon icon="l-wifi-slash" className="h-4 w-4" />
                     <span>Slow Network Detected</span>
                   </div>
@@ -504,7 +512,7 @@ const LiveFeed = (props: any) => {
           <div className="mx-4 flex max-w-sm flex-col">
             <nav className="flex flex-wrap">
               <button
-                className={`flex-1 p-4  text-center font-bold  text-gray-700 hover:text-gray-800  ${
+                className={`flex-1 p-4  text-center font-bold  text-secondary-700 hover:text-secondary-800  ${
                   showDefaultPresets
                     ? "border-b-2 border-primary-500 text-primary-600"
                     : ""
@@ -516,7 +524,7 @@ const LiveFeed = (props: any) => {
                 Default Presets
               </button>
               <button
-                className={`flex-1 p-4  text-center font-bold  text-gray-700 hover:text-gray-800  ${
+                className={`flex-1 p-4  text-center font-bold  text-secondary-700 hover:text-secondary-800  ${
                   !showDefaultPresets
                     ? "border-b-2 border-primary-500 text-primary-600"
                     : ""
@@ -539,7 +547,7 @@ const LiveFeed = (props: any) => {
                     {viewOptions(presetsPage)?.map((option: any, i) => (
                       <button
                         key={i}
-                        className="max- flex w-full flex-wrap gap-2 truncate rounded-md border border-white bg-green-100 p-3  text-black hover:bg-green-500 hover:text-white"
+                        className="flex w-full flex-wrap gap-2 truncate whitespace-pre-wrap rounded-md border border-white bg-green-100 p-3  text-black hover:bg-green-500 hover:text-white"
                         onClick={() => {
                           setLoading(`Moving to Preset ${option.label}`);
                           gotoPreset(
@@ -563,7 +571,7 @@ const LiveFeed = (props: any) => {
                       <div className="flex flex-col">
                         <button
                           key={preset.id}
-                          className="flex flex-col truncate rounded-t-md border border-white bg-green-100 p-2  text-black hover:bg-green-500 hover:text-white"
+                          className="flex h-full flex-col truncate whitespace-pre-wrap rounded-t-md border border-white  bg-green-100 p-2 text-black hover:bg-green-500 hover:text-white"
                           onClick={() => {
                             setLoading("Moving");
                             gotoBedPreset(preset);
@@ -604,7 +612,7 @@ const LiveFeed = (props: any) => {
               {showDefaultPresets ? (
                 <div className="flex flex-row gap-1">
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={presetsPage < 10}
                     onClick={() => {
                       setPresetsPage(presetsPage - 10);
@@ -613,7 +621,7 @@ const LiveFeed = (props: any) => {
                     <CareIcon icon="l-arrow-left" className="text-2xl" />
                   </button>
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={presetsPage >= presets?.length}
                     onClick={() => {
                       setPresetsPage(presetsPage + 10);
@@ -625,7 +633,7 @@ const LiveFeed = (props: any) => {
               ) : (
                 <div className="flex flex-row gap-1">
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={page.offset === 0}
                     onClick={() => {
                       handlePagination(page.offset - page.limit);
@@ -634,7 +642,7 @@ const LiveFeed = (props: any) => {
                     <CareIcon icon="l-arrow-left" className="text-2xl" />
                   </button>
                   <button
-                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    className="flex-1 p-4  text-center font-bold  text-secondary-700 hover:bg-secondary-300 hover:text-secondary-800"
                     disabled={page.offset + page.limit >= page.count}
                     onClick={() => {
                       handlePagination(page.offset + page.limit);
diff --git a/src/Components/Facility/Consultations/Mews.tsx b/src/Components/Facility/Consultations/Mews.tsx
index 4925d2ae998..b3960e171c2 100644
--- a/src/Components/Facility/Consultations/Mews.tsx
+++ b/src/Components/Facility/Consultations/Mews.tsx
@@ -1,5 +1,5 @@
 import { DailyRoundsModel } from "../../Patient/models";
-import { formatDateTime } from "../../../Utils/utils";
+import { formatDateTime, humanizeStrings } from "../../../Utils/utils";
 
 const getRespScore = (value?: number) => {
   if (typeof value !== "number") return;
@@ -60,7 +60,7 @@ const getLOCRange = (value?: DailyRoundsModel["consciousness_level"]) => {
 };
 
 const getBorderColor = (score: number) => {
-  if (score === undefined) return "border-gray-700";
+  if (score === undefined) return "border-secondary-700";
   if (score <= 2) return "border-primary-500";
   if (score <= 3) return "border-yellow-300";
   if (score <= 5) return "border-warning-600";
@@ -73,12 +73,16 @@ export const Mews = ({ dailyRound }: { dailyRound: DailyRoundsModel }) => {
       return (
         <>
           <div className="tooltip flex flex-col items-center">
-            <div className="border-grey-400 flex h-7 w-7 items-center justify-center rounded-full border-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-full border-2">
               <span className="text-sm font-semibold">-</span>
             </div>
-            <span className="mt-1 text-xs font-medium text-gray-700">MEWS</span>
+            <span className="mt-1 text-xs font-medium text-secondary-700">
+              MEWS
+            </span>
             <div className="tooltip-text tooltip-bottom w-48 -translate-x-1/2 translate-y-3 whitespace-pre-wrap text-xs font-medium lg:w-64">
-              <span className="font-bold">{(data as string[]).join(", ")}</span>{" "}
+              <span className="font-bold">
+                {humanizeStrings(data as string[])}
+              </span>{" "}
               data is missing from the last log update.
               <br /> Last Updated: {formatDateTime(dailyRound.modified_date)}
             </div>
@@ -97,7 +101,9 @@ export const Mews = ({ dailyRound }: { dailyRound: DailyRoundsModel }) => {
             >
               <span className="text-sm font-semibold">{data}</span>
             </div>
-            <span className="mt-1 text-xs font-medium text-gray-700">MEWS</span>
+            <span className="mt-1 text-xs font-medium text-secondary-700">
+              MEWS
+            </span>
             <div className="tooltip-text tooltip-bottom w-48 -translate-x-1/2 translate-y-3 whitespace-pre-wrap text-xs font-medium lg:w-64">
               <p>
                 Resp. Rate: <span className="font-bold">{dailyRound.resp}</span>
diff --git a/src/Components/Facility/Consultations/NeurologicalTables.tsx b/src/Components/Facility/Consultations/NeurologicalTables.tsx
index c144c87e74e..aac558ca8b0 100644
--- a/src/Components/Facility/Consultations/NeurologicalTables.tsx
+++ b/src/Components/Facility/Consultations/NeurologicalTables.tsx
@@ -17,15 +17,15 @@ const DataTable = (props: any) => {
   return (
     <div>
       <div className="text-xl font-semibold">{title}</div>
-      <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-gray-200 overflow-hidden shadow sm:rounded-lg">
+      <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-secondary-200 overflow-hidden shadow sm:rounded-lg">
         <div className="flex flex-col justify-between">
-          <div className="bg-gray-50 px-2 py-6 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-700">
+          <div className="bg-secondary-50 px-2 py-6 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-700">
             Time
           </div>
-          <div className="bg-gray-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-700">
+          <div className="bg-secondary-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-700">
             Left
           </div>
-          <div className="bg-gray-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-gray-700">
+          <div className="bg-secondary-50 px-2 py-5 text-center text-xs font-medium uppercase leading-4 tracking-wider text-secondary-700">
             Right
           </div>
         </div>
@@ -34,15 +34,15 @@ const DataTable = (props: any) => {
             return (
               <div
                 key={`${title}_${i}`}
-                className="flex flex-col divide-x divide-gray-200"
+                className="flex flex-col divide-x divide-secondary-200"
               >
-                <div className="w-20 bg-gray-50 px-2 py-3 text-center text-xs font-medium leading-4 text-gray-900">
+                <div className="w-20 bg-secondary-50 px-2 py-3 text-center text-xs font-medium leading-4 text-secondary-900">
                   {x.date}
                 </div>
-                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-gray-900">
+                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-secondary-900">
                   {x.left}
                 </div>
-                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-gray-900">
+                <div className="whitespace-nowrap bg-white px-2 py-4 text-center text-sm leading-5 text-secondary-900">
                   {x.right}
                 </div>
               </div>
@@ -65,19 +65,19 @@ const DataDescription = (props: any) => {
         {data.length ? (
           data.map((x: any, i: any) => (
             <div key={`${title}_${i}`} className="mb-2">
-              <div className="text-sm font-bold text-gray-800">{`- ${x.date}`}</div>
-              <div className="pl-2 text-gray-800">
+              <div className="text-sm font-bold text-secondary-800">{`- ${x.date}`}</div>
+              <div className="pl-2 text-secondary-800">
                 <span className="font-semibold">Left: </span>
                 {x.left}
               </div>
-              <div className="pl-2 text-gray-800">
+              <div className="pl-2 text-secondary-800">
                 <span className="font-semibold">Right: </span>
                 {x.right}
               </div>
             </div>
           ))
         ) : (
-          <div className="text-center text-sm font-semibold text-gray-700">
+          <div className="text-center text-sm font-semibold text-secondary-700">
             No Data Available!
           </div>
         )}
@@ -289,17 +289,17 @@ export const NeurologicalTable = (props: any) => {
     <div className="mt-2">
       <div className="mb-6">
         <div className="text-xl font-semibold">Level Of Consciousness</div>
-        <div className="w-max-content my-4 flex max-w-full flex-row divide-y divide-gray-200 overflow-hidden shadow sm:rounded-lg">
+        <div className="w-max-content my-4 flex max-w-full flex-row divide-y divide-secondary-200 overflow-hidden shadow sm:rounded-lg">
           <div className="flex flex-row overflow-x-auto">
             {locData.map((x: any, i: any) => (
               <div
                 key={`loc_${i}`}
-                className="min-w-max-content flex  flex-col  divide-x divide-gray-200"
+                className="min-w-max-content flex  flex-col  divide-x divide-secondary-200"
               >
-                <div className="border-r bg-gray-50 px-2 py-3 text-center text-xs font-medium leading-4 text-gray-700">
+                <div className="border-r bg-secondary-50 px-2 py-3 text-center text-xs font-medium leading-4 text-secondary-700">
                   {x.date}
                 </div>
-                <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-700">
+                <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-700">
                   {x.loc}
                 </div>
               </div>
@@ -315,11 +315,11 @@ export const NeurologicalTable = (props: any) => {
               locDescription.map((x: any, i: any) => (
                 <div key={`loc_desc_${i}`} className="mb-2">
                   <div className="text-sm font-semibold">{`- ${x.date}`}</div>
-                  <div className="pl-2 text-gray-800">{x.loc}</div>
+                  <div className="pl-2 text-secondary-800">{x.loc}</div>
                 </div>
               ))
             ) : (
-              <div className="text-center text-sm font-semibold text-gray-800">
+              <div className="text-center text-sm font-semibold text-secondary-800">
                 No Data Available!
               </div>
             )}
@@ -348,21 +348,21 @@ export const NeurologicalTable = (props: any) => {
       <div className="mt-4">
         <div className="text-xl font-semibold">Glasgow Coma Scale</div>
         <div className="mb-6 mt-2">
-          <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-gray-200 overflow-hidden shadow sm:rounded-lg">
+          <div className="w-max-content mb-4 flex max-w-full flex-row divide-y divide-secondary-200 overflow-hidden shadow sm:rounded-lg">
             <div className="flex flex-col ">
-              <div className="bg-gray-50 px-2 py-7 text-center text-sm font-medium uppercase leading-4 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-7 text-center text-sm font-medium uppercase leading-4 tracking-wider text-secondary-700">
                 Time
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Eye
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Verbal
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Motor
               </div>
-              <div className="bg-gray-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-gray-700">
+              <div className="bg-secondary-50 px-2 py-4 text-center text-sm font-medium uppercase leading-5 tracking-wider text-secondary-700">
                 Total
               </div>
             </div>
@@ -371,21 +371,21 @@ export const NeurologicalTable = (props: any) => {
                 return (
                   <div
                     key={`glascow_${i}`}
-                    className="flex flex-col divide-x divide-gray-200"
+                    className="flex flex-col divide-x divide-secondary-200"
                   >
-                    <div className="w-20 bg-gray-50 px-2 py-3 text-center text-xs font-medium leading-4 text-gray-800">
+                    <div className="w-20 bg-secondary-50 px-2 py-3 text-center text-xs font-medium leading-4 text-secondary-800">
                       {x.date}
                     </div>
-                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-800">
+                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-800">
                       {x.eye}
                     </div>
-                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-800">
+                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-800">
                       {x.verbal}
                     </div>
-                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-gray-800">
+                    <div className="whitespace-nowrap bg-white px-6 py-4 text-center text-sm leading-5 text-secondary-800">
                       {x.motor}
                     </div>
-                    <div className="whitespace-nowrap border-t-2 border-gray-500 bg-white px-6 py-4 text-center text-sm font-semibold leading-5 text-gray-800">
+                    <div className="whitespace-nowrap border-t-2 border-secondary-500 bg-white px-6 py-4 text-center text-sm font-semibold leading-5 text-secondary-800">
                       {x.total}
                     </div>
                   </div>
@@ -405,7 +405,7 @@ export const NeurologicalTable = (props: any) => {
                 {EYE_OPEN_SCALE.map((x: any) => (
                   <div
                     key={`eye_${x.value}`}
-                    className="pl-2 leading-relaxed text-gray-800"
+                    className="pl-2 leading-relaxed text-secondary-800"
                   >
                     <span className="text-sm font-semibold">{x.value}</span> -{" "}
                     {x.text}
@@ -419,7 +419,7 @@ export const NeurologicalTable = (props: any) => {
                 {VERBAL_RESPONSE_SCALE.map((x: any) => (
                   <div
                     key={`verbal_${x.value}`}
-                    className="pl-2 leading-relaxed text-gray-800"
+                    className="pl-2 leading-relaxed text-secondary-800"
                   >
                     <span className="text-sm font-semibold">{x.value}</span> -{" "}
                     {x.text}
@@ -433,7 +433,7 @@ export const NeurologicalTable = (props: any) => {
                 {MOTOR_RESPONSE_SCALE.map((x: any) => (
                   <div
                     key={`motor_${x.value}`}
-                    className="pl-2 leading-relaxed text-gray-800"
+                    className="pl-2 leading-relaxed text-secondary-800"
                   >
                     <span className="text-sm font-semibold">{x.value}</span> -{" "}
                     {x.text}
diff --git a/src/Components/Facility/Consultations/NursingPlot.tsx b/src/Components/Facility/Consultations/NursingPlot.tsx
index 5f798e7ea16..24e3109e078 100644
--- a/src/Components/Facility/Consultations/NursingPlot.tsx
+++ b/src/Components/Facility/Consultations/NursingPlot.tsx
@@ -81,7 +81,7 @@ export const NursingPlot = (props: any) => {
           <div className="flex flex-row overflow-x-scroll">
             {areFieldsEmpty() && (
               <div className="mt-1 w-full rounded-lg border bg-white p-4 shadow">
-                <div className="flex items-center justify-center text-2xl font-bold text-gray-500">
+                <div className="flex items-center justify-center text-2xl font-bold text-secondary-500">
                   No data available
                 </div>
               </div>
@@ -91,7 +91,7 @@ export const NursingPlot = (props: any) => {
                 filterEmpty(f) && (
                   <div key={f.desc} className="m-2 w-3/4">
                     <div className="sticky top-0 z-10  rounded pt-2">
-                      <div className="mx-2 flex items-center justify-between rounded border bg-gray-200 p-4">
+                      <div className="mx-2 flex items-center justify-between rounded border bg-secondary-200 p-4">
                         <h3 className="flex h-8 items-center text-sm">
                           {f.desc}
                         </h3>
diff --git a/src/Components/Facility/Consultations/NutritionPlots.tsx b/src/Components/Facility/Consultations/NutritionPlots.tsx
index 87799d5eafb..2dd3621dc24 100644
--- a/src/Components/Facility/Consultations/NutritionPlots.tsx
+++ b/src/Components/Facility/Consultations/NutritionPlots.tsx
@@ -175,9 +175,9 @@ export const NutritionPlots = (props: any) => {
 
   return (
     <div>
-      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
         <div
-          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
           onClick={() => setShowIO(!showIO)}
         >
           <div> IO Balance Plots</div>
@@ -217,9 +217,9 @@ export const NutritionPlots = (props: any) => {
           </div>
         </div>
       </section>
-      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
         <div
-          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
           onClick={() => setShowIntake(!showIntake)}
         >
           <div>Intake</div>
@@ -245,7 +245,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(infusionsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">Infusions:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -273,7 +273,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(IVFluidsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">IV Fluids:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -301,7 +301,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(FeedsData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">Feeds:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
@@ -324,9 +324,9 @@ export const NutritionPlots = (props: any) => {
           </div>
         </div>
       </section>
-      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+      <section className="my-4 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
         <div
-          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+          className="flex justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
           onClick={() => setShowOutput(!showOutput)}
         >
           <div> Output</div>
@@ -356,7 +356,7 @@ export const NutritionPlots = (props: any) => {
               yData={Object.values(OutputData)}
             />
           </div>
-          <div className="rounded-lg border bg-white px-4 pt-4 text-gray-900">
+          <div className="rounded-lg border bg-white px-4 pt-4 text-secondary-900">
             <h3 className="text-lg">Output:</h3>
             <div className="h-72 overflow-y-auto pb-2">
               {Object.entries(results).map((obj: any) => {
diff --git a/src/Components/Facility/Consultations/PainDiagrams.tsx b/src/Components/Facility/Consultations/PainDiagrams.tsx
index 4ac6ba1f21b..45f63284c42 100644
--- a/src/Components/Facility/Consultations/PainDiagrams.tsx
+++ b/src/Components/Facility/Consultations/PainDiagrams.tsx
@@ -79,7 +79,7 @@ export const PainDiagrams = (props: any) => {
         <div className="p-2">Choose Date and Time</div>
         <select
           title="date"
-          className="relative rounded border-gray-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-gray-300  focus:outline-none focus:ring-1 focus:ring-gray-300"
+          className="relative rounded border-secondary-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-secondary-300  focus:outline-none focus:ring-1 focus:ring-secondary-300"
           onChange={(e) => {
             setSelectedDateData(results, e.target.value);
           }}
@@ -97,7 +97,7 @@ export const PainDiagrams = (props: any) => {
       <div>
         <select
           title="date"
-          className="border-2 border-gray-400 py-2 pl-3 pr-8"
+          className="border-2 border-secondary-400 py-2 pl-3 pr-8"
           disabled={true}
         >
           <option>No Data Found</option>
diff --git a/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx b/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx
index f478f3f3df1..ba533be0616 100644
--- a/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx
+++ b/src/Components/Facility/Consultations/PressureSoreDiagrams.tsx
@@ -89,7 +89,7 @@ export const PressureSoreDiagrams = (props: any) => {
         <div className="p-2">Choose Date and Time</div>
         <select
           title="date"
-          className="relative rounded border-gray-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-gray-300  focus:outline-none focus:ring-1 focus:ring-gray-300"
+          className="relative rounded border-secondary-200 bg-white py-2 pl-3 pr-8 text-slate-600 shadow outline-none focus:border-secondary-300  focus:outline-none focus:ring-1 focus:ring-secondary-300"
           onChange={(e) => {
             setSelectedDateData(results, e.target.value);
           }}
@@ -107,7 +107,7 @@ export const PressureSoreDiagrams = (props: any) => {
       <div>
         <select
           title="date"
-          className="border-2 border-gray-400 py-2 pl-3 pr-8"
+          className="border-2 border-secondary-400 py-2 pl-3 pr-8"
           disabled={true}
         >
           <option>No Data Found</option>
diff --git a/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx b/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
index fb600333d25..b84647c2d7a 100644
--- a/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
+++ b/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
@@ -215,7 +215,7 @@ export const PrimaryParametersPlot = ({
                       <div className="relative pb-8">
                         {rhythmIdx !== obj[1].length ? (
                           <span
-                            className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"
+                            className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-secondary-200"
                             aria-hidden="true"
                           />
                         ) : null}
@@ -258,7 +258,7 @@ export const PrimaryParametersPlot = ({
                                 <span>{rhythmDetails.rhythm_detail}</span>
                               </p>
                             </div>
-                            <div className="whitespace-nowrap text-right text-sm text-gray-500">
+                            <div className="whitespace-nowrap text-right text-sm text-secondary-500">
                               <p>
                                 {rhythmDetails.time}, {obj[0]}
                               </p>
diff --git a/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx b/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
index af8469bd18d..79d1d4c0af1 100644
--- a/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
+++ b/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
@@ -22,7 +22,7 @@ export default function BinaryChronologicalChart(props: {
             <li key={i}>
               <div className="relative pb-8">
                 <span
-                  className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"
+                  className="absolute left-4 top-4 -ml-px h-full w-0.5 bg-secondary-200"
                   aria-hidden="true"
                 />
                 <div className="relative flex space-x-3">
@@ -52,7 +52,7 @@ export default function BinaryChronologicalChart(props: {
                         <span>{entry.notes}</span>
                       </p>
                     </div>
-                    <div className="whitespace-nowrap text-right text-sm text-gray-500">
+                    <div className="whitespace-nowrap text-right text-sm text-secondary-500">
                       <p>{formatDateTime(entry.timestamp)}</p>
                     </div>
                   </div>
diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx
index 3761a9dc140..319ae60fd1b 100644
--- a/src/Components/Facility/CoverImageEditModal.tsx
+++ b/src/Components/Facility/CoverImageEditModal.tsx
@@ -195,7 +195,7 @@ const CoverImageEditModal = ({
                     className="h-full w-full object-cover"
                   />
                 </div>
-                <p className="text-center font-medium text-gray-700">
+                <p className="text-center font-medium text-secondary-700">
                   {commonHint}
                 </p>
               </>
@@ -209,7 +209,7 @@ const CoverImageEditModal = ({
                 } ${
                   dragProps.fileDropError !== ""
                     ? "border-red-500"
-                    : "border-gray-500"
+                    : "border-secondary-500"
                 }`}
               >
                 <svg
@@ -222,7 +222,7 @@ const CoverImageEditModal = ({
                   } ${
                     dragProps.fileDropError !== ""
                       ? "text-red-500"
-                      : "text-gray-600"
+                      : "text-secondary-600"
                   }`}
                 >
                   <path d="M28 8H12a4 4 0 0 0-4 4v20m32-12v8m0 0v8a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-4m32-4-3.172-3.172a4 4 0 0 0-5.656 0L28 28M8 32l9.172-9.172a4 4 0 0 1 5.656 0L28 28m0 0 4 4m4-24h8m-4-4v8m-12 4h.02" />
@@ -233,14 +233,14 @@ const CoverImageEditModal = ({
                   } ${
                     dragProps.fileDropError !== ""
                       ? "text-red-500"
-                      : "text-gray-700"
+                      : "text-secondary-700"
                   } text-center`}
                 >
                   {dragProps.fileDropError !== ""
                     ? dragProps.fileDropError
                     : `${t("drag_drop_image_to_upload")}`}
                 </p>
-                <p className="mt-4 text-center font-medium text-gray-700">
+                <p className="mt-4 text-center font-medium text-secondary-700">
                   {t("no_cover_photo_uploaded_for_this_facility")}. {commonHint}
                 </p>
               </div>
@@ -390,7 +390,7 @@ const CoverImageEditModal = ({
                     setIsCameraOpen(false);
                     webRef.current.stopCamera();
                   }}
-                  className="border-grey-200 my-2 w-full border-2"
+                  className="my-2 w-full"
                 >
                   {t("close")}
                 </ButtonV2>
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index 0be7b4eabd8..567c21dfbb6 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -25,6 +25,9 @@ import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "./models";
 import dayjs from "../../Utils/dayjs";
 import { FieldError } from "../Form/FieldValidators";
+import { useTranslation } from "react-i18next";
+import useConfirmedAction from "../../Common/hooks/useConfirmedAction";
+import ConfirmDialog from "../Common/ConfirmDialog";
 
 interface PreDischargeFormInterface {
   new_discharge_reason: number | null;
@@ -57,7 +60,9 @@ const DischargeModal = ({
   discharge_date = dayjs().format("YYYY-MM-DDTHH:mm"),
   death_datetime = dayjs().format("YYYY-MM-DDTHH:mm"),
 }: IProps) => {
+  const { t } = useTranslation();
   const { enable_hcx } = useConfig();
+
   const dispatch: any = useDispatch();
   const [preDischargeForm, setPreDischargeForm] =
     useState<PreDischargeFormInterface>({
@@ -80,18 +85,15 @@ const DischargeModal = ({
   useEffect(() => {
     setPreDischargeForm((prev) => ({
       ...prev,
-      new_discharge_reason,
       discharge_notes: referred_to
         ? "Patient Shifted to another facility."
         : "",
-      discharge_date,
-      death_datetime,
       referred_to_external: !referred_to?.id ? referred_to?.name : null,
       referred_to: referred_to?.id ? referred_to.id : null,
     }));
 
     setFacility(referred_to);
-  }, [referred_to, new_discharge_reason, discharge_date, death_datetime]);
+  }, [referred_to]);
 
   const discharge_reason =
     new_discharge_reason ?? preDischargeForm.new_discharge_reason;
@@ -131,14 +133,12 @@ const DischargeModal = ({
     }
   });
 
-  const handlePatientDischarge = async (value: boolean) => {
-    setIsSendingDischargeApi(true);
+  const validate = () => {
     if (!new_discharge_reason && !discharge_reason) {
       setErrors({
         ...errors,
         new_discharge_reason: "Please select a reason for discharge",
       });
-      setIsSendingDischargeApi(false);
       return;
     }
 
@@ -156,45 +156,32 @@ const DischargeModal = ({
 
       if (Object.entries(newErrors).length) {
         setErrors({ ...errors, ...newErrors });
-        setIsSendingDischargeApi(false);
         return;
       }
     }
 
-    const dischargeDetails = {
-      ...preDischargeForm,
-      discharge: value,
-      referred_to: referred_to?.id ?? preDischargeForm.referred_to,
-      discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
-    };
-
-    if (dischargeDetails.referred_to != undefined)
-      delete dischargeDetails.referred_to_external;
-
-    if (dischargeDetails.referred_to_external != undefined)
-      delete dischargeDetails.referred_to;
+    return true;
+  };
 
+  const submitAction = useConfirmedAction(async () => {
+    setIsSendingDischargeApi(true);
     const dischargeResponse = await dispatch(
       dischargePatient(
         {
           ...preDischargeForm,
-          discharge: value,
           new_discharge_reason: discharge_reason,
           discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
         },
         { id: consultationData.id },
       ),
     );
-
     setIsSendingDischargeApi(false);
-    if (dischargeResponse?.status === 200) {
-      Notification.Success({
-        msg: "Patient Discharged Successfully",
-      });
 
+    if (dischargeResponse?.status === 200) {
+      Notification.Success({ msg: "Patient Discharged Successfully" });
       afterSubmit?.();
     }
-  };
+  });
 
   const handleFacilitySelect = (selected?: FacilityModel) => {
     setFacility(selected ?? null);
@@ -205,188 +192,248 @@ const DischargeModal = ({
     }));
   };
 
+  const encounterDuration = dayjs.duration(
+    dayjs(
+      preDischargeForm[
+        discharge_reason ===
+        DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+          ? "death_datetime"
+          : "discharge_date"
+      ],
+    ).diff(consultationData.encounter_date),
+  );
+
+  const confirmationRequired = encounterDuration.asDays() >= 30;
+
   return (
-    <DialogModal
-      title={
-        <div>
-          <p>Discharge patient from CARE</p>
-          <span className="mt-1 flex gap-1 text-sm font-medium text-warning-500">
-            <CareIcon icon="l-exclamation-triangle" className="text-base" />
-            <p>Caution: this action is irreversible.</p>
-          </span>
+    <>
+      <ConfirmDialog
+        {...submitAction.confirmationProps}
+        title="Confirm Discharge"
+        action="Acknowledge & Submit"
+        variant="warning"
+        className="md:max-w-xl"
+      >
+        <div className="flex flex-col gap-2 py-2 text-secondary-900">
+          <p>
+            Are you sure you want to close this encounter, noting that the
+            patient has been admitted for{" "}
+            <span className="font-bold text-black">
+              {Math.ceil(encounterDuration.asDays())} days
+            </span>
+            {" ?"}
+          </p>
+          <p>
+            By confirming, you acknowledge that no further edits can be made to
+            this encounter and that the information entered is accurate to the
+            best of your knowledge.
+          </p>
         </div>
-      }
-      show={show}
-      onClose={onClose}
-      className="md:max-w-3xl"
-    >
-      <div className="mt-6 flex flex-col">
-        <SelectFormField
-          required
-          label="Reason"
-          name="discharge_reason"
-          id="discharge_reason"
-          value={discharge_reason}
-          disabled={!!new_discharge_reason}
-          options={DISCHARGE_REASONS}
-          optionValue={({ id }) => id}
-          optionLabel={({ text }) => text}
-          onChange={(e) =>
-            setPreDischargeForm((prev) => ({
-              ...prev,
-              new_discharge_reason: e.value,
-            }))
-          }
-          error={errors?.new_discharge_reason}
-        />
-        {discharge_reason ===
-          DISCHARGE_REASONS.find((i) => i.text == "Referred")?.id && (
-          <div id="facility-referredto">
-            <FieldLabel>Referred to</FieldLabel>
-            <FacilitySelect
-              name="referred_to"
-              setSelected={(selected) =>
-                handleFacilitySelect(selected as FacilityModel | undefined)
-              }
-              disabled={!!referred_to}
-              selected={facility ?? null}
-              showAll
-              freeText
-              multiple={false}
-              errors={errors?.referred_to}
-              className="mb-4"
-            />
+      </ConfirmDialog>
+      <DialogModal
+        title={
+          <div>
+            <p>Discharge patient from CARE</p>
+            <span className="mt-1 flex gap-1 text-sm font-medium text-warning-500">
+              <CareIcon icon="l-exclamation-triangle" className="text-base" />
+              <p>
+                {t("caution")}: {t("action_irreversible")}
+              </p>
+            </span>
           </div>
-        )}
-        <TextAreaFormField
-          required={
-            discharge_reason ==
-            DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+        }
+        show={show}
+        onClose={() => {
+          if (!submitAction.confirmationProps.show) {
+            onClose();
           }
-          label={
-            {
-              "3": "Cause of death",
-              "1": "Discharged Advice",
-            }[discharge_reason ?? 0] ?? "Notes"
-          }
-          name="discharge_notes"
-          value={preDischargeForm.discharge_notes}
-          onChange={(e) =>
-            setPreDischargeForm((prev) => ({
-              ...prev,
-              discharge_notes: e.value,
-            }))
-          }
-          error={errors?.discharge_notes}
-        />
-        <TextFormField
-          name={
-            discharge_reason ===
-            DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
-              ? "death_datetime"
-              : "discharge_date"
-          }
-          label={
-            discharge_reason ===
-            DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
-              ? "Date of Death"
-              : "Date and Time of Discharge"
-          }
-          type="datetime-local"
-          value={
-            preDischargeForm[
+        }}
+        className="md:max-w-3xl"
+      >
+        <div className="mt-6 flex flex-col">
+          <SelectFormField
+            required
+            label="Reason"
+            name="discharge_reason"
+            id="discharge_reason"
+            value={discharge_reason}
+            disabled={!!new_discharge_reason}
+            options={DISCHARGE_REASONS}
+            optionValue={({ id }) => id}
+            optionLabel={({ text }) => text}
+            onChange={(e) =>
+              setPreDischargeForm((prev) => ({
+                ...prev,
+                new_discharge_reason: e.value,
+              }))
+            }
+            error={errors?.new_discharge_reason}
+          />
+          {discharge_reason ===
+            DISCHARGE_REASONS.find((i) => i.text == "Referred")?.id && (
+            <div id="facility-referredto">
+              <FieldLabel>Referred to</FieldLabel>
+              <FacilitySelect
+                name="referred_to"
+                setSelected={(selected) =>
+                  handleFacilitySelect(selected as FacilityModel | undefined)
+                }
+                disabled={!!referred_to}
+                selected={facility ?? null}
+                showAll
+                freeText
+                multiple={false}
+                errors={errors?.referred_to}
+                className="mb-4"
+              />
+            </div>
+          )}
+          <TextAreaFormField
+            required={
+              discharge_reason ==
+              DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+            }
+            label={
+              {
+                "3": "Cause of death",
+                "1": "Discharged Advice",
+              }[discharge_reason ?? 0] ?? "Notes"
+            }
+            name="discharge_notes"
+            value={preDischargeForm.discharge_notes}
+            onChange={(e) =>
+              setPreDischargeForm((prev) => ({
+                ...prev,
+                discharge_notes: e.value,
+              }))
+            }
+            error={errors?.discharge_notes}
+          />
+          <TextFormField
+            name={
               discharge_reason ===
               DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
                 ? "death_datetime"
                 : "discharge_date"
-            ]
-          }
-          onChange={(e) => {
-            const updates: Record<string, string | undefined> = {
-              discharge_date: undefined,
-              death_datetime: undefined,
-            };
-            updates[e.name] = e.value;
-            setPreDischargeForm((form) => ({ ...form, ...updates }));
-          }}
-          required
-          min={dayjs(consultationData?.encounter_date).format(
-            "YYYY-MM-DDTHH:mm",
-          )}
-          max={dayjs().format("YYYY-MM-DDTHH:mm")}
-          error={
-            discharge_reason ===
-            DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
-              ? errors?.death_datetime
-              : errors?.discharge_date
-          }
-        />
-
-        {discharge_reason ===
-          DISCHARGE_REASONS.find((i) => i.text == "Recovered")?.id && (
-          <>
-            <div className="mb-4">
-              <FieldLabel>Discharge Prescription Medications</FieldLabel>
-              <PrescriptionBuilder prescription_type="DISCHARGE" />
-            </div>
-            <div className="mb-4">
-              <FieldLabel>Discharge PRN Prescriptions</FieldLabel>
-              <PrescriptionBuilder prescription_type="DISCHARGE" is_prn />
-            </div>
-          </>
-        )}
-        {discharge_reason ===
-          DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id && (
-          <TextFormField
-            name="death_confirmed_by"
-            label="Confirmed By"
-            error={errors.death_confirmed_doctor}
-            value={preDischargeForm.death_confirmed_doctor ?? ""}
+            }
+            label={
+              discharge_reason ===
+              DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+                ? "Date of Death"
+                : "Date and Time of Discharge"
+            }
+            type="datetime-local"
+            value={
+              preDischargeForm[
+                discharge_reason ===
+                DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+                  ? "death_datetime"
+                  : "discharge_date"
+              ]
+            }
             onChange={(e) => {
-              setPreDischargeForm((form) => {
-                return {
-                  ...form,
-                  death_confirmed_doctor: e.value,
-                };
-              });
+              const updates: Record<string, string | undefined> = {
+                discharge_date: undefined,
+                death_datetime: undefined,
+              };
+              updates[e.name] = e.value;
+              setPreDischargeForm((form) => ({ ...form, ...updates }));
             }}
             required
-            placeholder="Attending Doctor's Name and Designation"
+            min={dayjs(consultationData?.encounter_date).format(
+              "YYYY-MM-DDTHH:mm",
+            )}
+            max={dayjs().format("YYYY-MM-DDTHH:mm")}
+            error={
+              discharge_reason ===
+              DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+                ? errors?.death_datetime
+                : errors?.discharge_date
+            }
           />
+          {discharge_reason ===
+            DISCHARGE_REASONS.find((i) => i.text == "Recovered")?.id && (
+            <>
+              <div className="mb-4">
+                <FieldLabel>Discharge Prescription Medications</FieldLabel>
+                <PrescriptionBuilder prescription_type="DISCHARGE" />
+              </div>
+              <div className="mb-4">
+                <FieldLabel>Discharge PRN Prescriptions</FieldLabel>
+                <PrescriptionBuilder prescription_type="DISCHARGE" is_prn />
+              </div>
+            </>
+          )}
+          {discharge_reason ===
+            DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id && (
+            <TextFormField
+              name="death_confirmed_by"
+              label="Confirmed By"
+              error={errors.death_confirmed_doctor}
+              value={preDischargeForm.death_confirmed_doctor ?? ""}
+              onChange={(e) => {
+                setPreDischargeForm((form) => {
+                  return {
+                    ...form,
+                    death_confirmed_doctor: e.value,
+                  };
+                });
+              }}
+              required
+              placeholder="Attending Doctor's Name and Designation"
+            />
+          )}
+        </div>
+
+        {enable_hcx && (
+          // TODO: if policy and approved pre-auth exists
+          <div className="my-5 rounded p-5 shadow">
+            <h2 className="mb-2">Claim Insurance</h2>
+            {latestClaim ? (
+              <ClaimDetailCard claim={latestClaim} />
+            ) : (
+              <CreateClaimCard
+                consultationId={consultationData.id ?? ""}
+                patientId={consultationData.patient ?? ""}
+                use="claim"
+                isCreating={isCreateClaimLoading}
+                setIsCreating={setIsCreateClaimLoading}
+              />
+            )}
+          </div>
         )}
-      </div>
 
-      {enable_hcx && (
-        // TODO: if policy and approved pre-auth exists
-        <div className="my-5 rounded p-5 shadow">
-          <h2 className="mb-2">Claim Insurance</h2>
-          {latestClaim ? (
-            <ClaimDetailCard claim={latestClaim} />
+        <div className="py-4">
+          <span className="text-secondary-700">
+            {t("encounter_duration_confirmation")}{" "}
+            <strong>{encounterDuration.humanize()}</strong>.
+          </span>
+        </div>
+        <div className="cui-form-button-group">
+          <Cancel onClick={onClose} />
+          {isSendingDischargeApi ? (
+            <CircularProgress />
           ) : (
-            <CreateClaimCard
-              consultationId={consultationData.id ?? ""}
-              patientId={consultationData.patient ?? ""}
-              use="claim"
-              isCreating={isCreateClaimLoading}
-              setIsCreating={setIsCreateClaimLoading}
+            <Submit
+              onClick={async () => {
+                if (!validate()) {
+                  return;
+                }
+
+                if (confirmationRequired) {
+                  submitAction.requestConfirmation();
+                  return;
+                }
+
+                submitAction.submit();
+              }}
+              label="Confirm Discharge"
+              autoFocus
             />
           )}
         </div>
-      )}
-
-      <div className="flex flex-col gap-2 pt-4 md:flex-row md:justify-end">
-        <Cancel onClick={onClose} />
-        {isSendingDischargeApi ? (
-          <CircularProgress />
-        ) : (
-          <Submit
-            onClick={() => handlePatientDischarge(false)}
-            label="Confirm Discharge"
-            autoFocus
-          />
-        )}
-      </div>
-    </DialogModal>
+      </DialogModal>
+    </>
   );
 };
 
diff --git a/src/Components/Facility/DischargeSummaryModal.tsx b/src/Components/Facility/DischargeSummaryModal.tsx
index a14d2354801..01020b25ad3 100644
--- a/src/Components/Facility/DischargeSummaryModal.tsx
+++ b/src/Components/Facility/DischargeSummaryModal.tsx
@@ -146,7 +146,7 @@ export default function DischargeSummaryModal(props: Props) {
     >
       <div className="flex flex-col">
         <div className="mb-6 flex flex-col gap-1">
-          <span className="text-sm text-gray-800">
+          <span className="text-sm text-secondary-800">
             {t("email_discharge_summary_description")}
           </span>
           <span className="text-sm text-warning-600">
diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index 6878613d4cd..5a47a8ad6da 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -8,6 +8,7 @@ import useQuery from "../../Utils/request/useQuery";
 import SearchInput from "../Form/SearchInput";
 import {
   ADMITTED_TO,
+  CONSENT_TYPE_CHOICES,
   DISCHARGED_PATIENT_SORT_OPTIONS,
   DISCHARGE_REASONS,
   GENDER_TYPES,
@@ -15,7 +16,7 @@ import {
 } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import { formatPatientAge } from "../../Utils/utils";
+import { formatPatientAge, humanizeStrings } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import SortDropdownMenu from "../Common/SortDropdown";
@@ -160,6 +161,39 @@ const DischargedPatientsList = ({
       });
   };
 
+  const HasConsentTypesBadges = () => {
+    const badge = (key: string, value: any, id: string) => {
+      return (
+        value && (
+          <FilterBadge
+            name={key}
+            value={value}
+            onRemove={() => {
+              const lcat = qParams.last_consultation__consent_types
+                .split(",")
+                .filter((x: string) => x != id)
+                .join(",");
+              updateQuery({
+                ...qParams,
+                last_consultation__consent_types: lcat,
+              });
+            }}
+          />
+        )
+      );
+    };
+
+    return qParams.last_consultation__consent_types
+      .split(",")
+      .map((id: string) => {
+        const text = [
+          ...CONSENT_TYPE_CHOICES,
+          { id: "None", text: "No Consents" },
+        ].find((obj) => obj.id == id)?.text;
+        return badge("Has Consent", text, id);
+      });
+  };
+
   const queryField = <T,>(name: string, defaultValue?: T) => {
     return {
       name,
@@ -360,7 +394,7 @@ const DischargedPatientsList = ({
               value(
                 DIAGNOSES_FILTER_LABELS[key],
                 key,
-                getDiagnosisFilterValue(key).join(", "),
+                humanizeStrings(getDiagnosisFilterValue(key)),
               ),
             ),
             badge("Declared Status", "is_declared_positive"),
@@ -385,8 +419,12 @@ const DischargedPatientsList = ({
             ),
           ]}
           children={
-            qParams.last_consultation_admitted_bed_type_list &&
-            LastAdmittedToTypeBadges()
+            <>
+              {qParams.last_consultation_admitted_bed_type_list &&
+                LastAdmittedToTypeBadges()}
+              {qParams.last_consultation__consent_types &&
+                HasConsentTypesBadges()}
+            </>
           }
         />
       </div>
@@ -402,7 +440,7 @@ const DischargedPatientsList = ({
       >
         {() => (
           <div className="flex flex-col gap-4">
-            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
               <span>{t("discharged_patients_empty")}</span>
             </PaginatedList.WhenEmpty>
 
@@ -442,19 +480,22 @@ export default DischargedPatientsList;
 const PatientListItem = ({ patient }: { patient: PatientModel }) => {
   return (
     <div className="flex rounded-lg border bg-white p-5 shadow hover:ring-1 hover:ring-primary-400">
-      <div className="flex rounded border border-gray-300 bg-gray-50 p-6">
-        <CareIcon icon="l-user-injured" className="text-3xl text-gray-800" />
+      <div className="flex rounded border border-secondary-300 bg-secondary-50 p-6">
+        <CareIcon
+          icon="l-user-injured"
+          className="text-3xl text-secondary-800"
+        />
       </div>
       <div className="ml-5 flex flex-col">
         <h2 className="text-lg font-bold capitalize text-black">
           {patient.name}
         </h2>
-        <span className="text-sm font-medium text-gray-800">
+        <span className="text-sm font-medium text-secondary-800">
           {GENDER_TYPES.find((g) => g.id === patient.gender)?.text} -{" "}
           {formatPatientAge(patient)}
         </span>
         {patient.last_consultation?.patient_no && (
-          <span className="text-sm font-medium text-gray-800">
+          <span className="text-sm font-medium text-secondary-800">
             {patient.last_consultation?.suggestion === "A"
               ? "IP No: "
               : "OP No: "}
@@ -463,7 +504,7 @@ const PatientListItem = ({ patient }: { patient: PatientModel }) => {
         )}
         <div className="flex-1" />
         <RecordMeta
-          className="text-end text-xs text-gray-600"
+          className="text-end text-xs text-secondary-600"
           prefix="last updated"
           time={patient.modified_date}
         />
diff --git a/src/Components/Facility/DoctorNote.tsx b/src/Components/Facility/DoctorNote.tsx
index b70ccfdf516..91c361cc82e 100644
--- a/src/Components/Facility/DoctorNote.tsx
+++ b/src/Components/Facility/DoctorNote.tsx
@@ -42,7 +42,7 @@ const DoctorNote = (props: DoctorNoteProps) => {
           ))}
         </InfiniteScroll>
       ) : (
-        <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-gray-500">
+        <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-secondary-500">
           No Notes Found
         </div>
       )}
diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx
index 140de6985c1..aacf441be6f 100644
--- a/src/Components/Facility/DoctorVideoSlideover.tsx
+++ b/src/Components/Facility/DoctorVideoSlideover.tsx
@@ -73,7 +73,7 @@ export default function DoctorVideoSlideover(props: {
       dialogClass="md:w-[450px]"
     >
       {/* Title and close button */}
-      <p className="-mt-3 pb-4 text-sm text-gray-600">
+      <p className="-mt-3 pb-4 text-sm text-secondary-600">
         Select a doctor to connect via video
       </p>
       <div className="flex justify-center" id="doctor-connect-filter-tabs">
@@ -130,12 +130,12 @@ const UserGroupList = (props: {
           <span className="whitespace-nowrap text-lg font-bold">
             {UserGroups[props.group]}
           </span>
-          <div className="mx-6 h-1 w-full bg-gray-300" />
+          <div className="mx-6 h-1 w-full bg-secondary-300" />
         </div>
       )}
 
       {!users.length && (
-        <span className="flex w-full justify-center py-2 font-bold text-gray-500">
+        <span className="flex w-full justify-center py-2 font-bold text-secondary-500">
           No users in this category
         </span>
       )}
@@ -233,8 +233,8 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
       className={classNames(
         "group cursor-default select-none rounded-xl p-3",
         user.alt_phone_number
-          ? "cursor-pointer border border-gray-400 transition hover:border-green-500 hover:bg-green-50"
-          : "pointer-events-none cursor-not-allowed bg-gray-400",
+          ? "cursor-pointer border border-secondary-400 transition hover:border-green-500 hover:bg-green-50"
+          : "pointer-events-none cursor-not-allowed bg-secondary-400",
       )}
     >
       <a className="flex" onClick={connectOnWhatsApp}>
@@ -245,12 +245,12 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
             Number(new Date()) - Number(new Date(user.last_login)) < 60000 ? (
               <CareIcon icon={icon} className="text-xl text-green-600" />
             ) : (
-              <CareIcon icon={icon} className="text-2xl text-gray-600" />
+              <CareIcon icon={icon} className="text-2xl text-secondary-600" />
             )
           }
         </div>
         <div className="ml-4 flex flex-auto flex-col gap-1">
-          <div className="flex justify-between gap-2 text-sm text-gray-700">
+          <div className="flex justify-between gap-2 text-sm text-secondary-700">
             <span>
               <strong>
                 {user.first_name} {user.last_name}
@@ -262,12 +262,12 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
             />
           </div>
           {!!user.skills.length && (
-            <div className="mt-1 text-sm leading-5 text-gray-900">
+            <div className="mt-1 text-sm leading-5 text-secondary-900">
               <div className="flex flex-wrap gap-2">
                 {user.skills?.map((skill: SkillObjectModel) => (
                   <span
                     key={skill.id}
-                    className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-900"
+                    className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-900"
                   >
                     <p className="py-1.5">{skill.name}</p>
                   </span>
@@ -275,7 +275,7 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
               </div>
             </div>
           )}
-          <div className="flex justify-between gap-2 text-sm text-gray-500">
+          <div className="flex justify-between gap-2 text-sm text-secondary-500">
             <div className="flex items-center gap-1">
               <a
                 role="button"
@@ -296,7 +296,7 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
               </a>
               <span>{user.alt_phone_number}</span>
             </div>
-            <div className="text-sm text-gray-500">
+            <div className="text-sm text-secondary-500">
               {user.last_login && <span>{relativeTime(user.last_login)}</span>}
             </div>
           </div>
diff --git a/src/Components/Facility/DuplicatePatientDialog.tsx b/src/Components/Facility/DuplicatePatientDialog.tsx
index 56101cc9ccb..7450d9fd8f1 100644
--- a/src/Components/Facility/DuplicatePatientDialog.tsx
+++ b/src/Components/Facility/DuplicatePatientDialog.tsx
@@ -10,7 +10,7 @@ interface Props {
   isNew: boolean;
 }
 
-const tdClass = "border border-gray-400 p-2 text-left";
+const tdClass = "border border-secondary-400 p-2 text-left";
 
 const DuplicatePatientDialog = (props: Props) => {
   const { patientList, handleOk, handleCancel, isNew } = props;
@@ -32,7 +32,7 @@ const DuplicatePatientDialog = (props: Props) => {
           </p>
         </div>
         <div>
-          <div className="max-h-[200px] overflow-auto rounded border border-y-gray-400">
+          <div className="max-h-[200px] overflow-auto rounded border border-y-secondary-400">
             <table className="relative w-full border-collapse">
               <thead>
                 <tr className="border-separate">
diff --git a/src/Components/Facility/FacilityBedCapacity.tsx b/src/Components/Facility/FacilityBedCapacity.tsx
index a02165b94a5..e2a24b3fab3 100644
--- a/src/Components/Facility/FacilityBedCapacity.tsx
+++ b/src/Components/Facility/FacilityBedCapacity.tsx
@@ -21,7 +21,7 @@ export const FacilityBedCapacity = (props: any) => {
   let capacityList: any = null;
   if (!capacityQuery.data || !capacityQuery.data.results.length) {
     capacityList = (
-      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         No Bed Types Found
       </h5>
     );
diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index 89a4128f7e0..d6c2dce2b6c 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -52,7 +52,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
           <div className="h-full w-full grow">
             <Link
               href={`/facility/${facility.id}`}
-              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch bg-gray-300 min-[425px]:hidden"
+              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch bg-secondary-300 min-[425px]:hidden"
             >
               {(facility.read_cover_image_url && (
                 <img
@@ -63,7 +63,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
               )) || (
                 <CareIcon
                   icon="l-hospital"
-                  className="block text-7xl text-gray-500"
+                  className="block text-7xl text-secondary-500"
                 />
               )}
             </Link>
@@ -73,7 +73,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                 <div className="flex gap-5">
                   <Link
                     href={`/facility/${facility.id}`}
-                    className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center self-stretch rounded-md bg-gray-300 min-[425px]:flex"
+                    className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center self-stretch rounded-md bg-secondary-300 min-[425px]:flex"
                   >
                     {(facility.read_cover_image_url && (
                       <img
@@ -84,7 +84,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                     )) || (
                       <CareIcon
                         icon="l-hospital"
-                        className="block text-5xl text-gray-500"
+                        className="block text-5xl text-secondary-500"
                       />
                     )}
                   </Link>
@@ -168,7 +168,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                   </div>
                 </div>
               </div>
-              <div className="flex flex-wrap border-t bg-gray-50 px-2 py-1 md:px-3">
+              <div className="flex flex-wrap border-t bg-secondary-50 px-2 py-1 md:px-3">
                 {/* <div className="flex justify-between py-2"> */}
                 <div className="flex w-full flex-wrap justify-between gap-2 py-2">
                   <div className="flex flex-wrap gap-2">
@@ -196,7 +196,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         className={`text-sm font-semibold ${
                           facility.patient_count / facility.bed_count > 0.85
                             ? "text-white"
-                            : "text-gray-700"
+                            : "text-secondary-700"
                         }`}
                       >
                         Occupancy: {facility.patient_count} /{" "}
diff --git a/src/Components/Facility/FacilityCreate.tsx b/src/Components/Facility/FacilityCreate.tsx
index 383a0646958..3bd0821e25e 100644
--- a/src/Components/Facility/FacilityCreate.tsx
+++ b/src/Components/Facility/FacilityCreate.tsx
@@ -532,7 +532,7 @@ export const FacilityCreate = (props: FacilityProps) => {
 
   if (!capacityData || !capacityData.length) {
     capacityList = (
-      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         {t("no_bed_types_found")}
       </h5>
     );
@@ -596,7 +596,7 @@ export const FacilityCreate = (props: FacilityProps) => {
   let doctorList: any = null;
   if (!doctorData || !doctorData.length) {
     doctorList = (
-      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         {t("no_staff")}
       </h5>
     );
@@ -1001,5 +1001,5 @@ export const FacilityCreate = (props: FacilityProps) => {
 };
 
 const FieldUnit = ({ unit }: { unit: string }) => {
-  return <p className="absolute right-10 text-xs text-gray-700">{unit}</p>;
+  return <p className="absolute right-10 text-xs text-secondary-700">{unit}</p>;
 };
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index f18ea584b44..0a885c0b6e3 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -107,7 +107,7 @@ export const FacilityHome = (props: any) => {
   const editCoverImageTooltip = hasPermissionToEditCoverImage && (
     <div
       id="facility-coverimage"
-      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-gray-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
+      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center rounded-t-lg bg-black text-sm text-secondary-300 opacity-0 transition-opacity hover:opacity-60 md:h-[88px]"
     >
       <CareIcon icon="l-pen" className="text-lg" />
       <span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
@@ -157,7 +157,7 @@ export const FacilityHome = (props: any) => {
       {hasCoverImage ? (
         <div
           className={
-            "group relative h-48 w-full text-clip rounded-t bg-gray-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0"
+            "group relative h-48 w-full text-clip rounded-t bg-secondary-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0"
           }
         >
           <CoverImage />
@@ -165,7 +165,7 @@ export const FacilityHome = (props: any) => {
         </div>
       ) : (
         <div
-          className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch bg-gray-300 md:hidden ${
+          className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch bg-secondary-300 md:hidden ${
             hasPermissionToEditCoverImage && "cursor-pointer"
           }`}
           onClick={() =>
@@ -174,7 +174,7 @@ export const FacilityHome = (props: any) => {
         >
           <CareIcon
             icon="l-hospital"
-            className="block p-10 text-4xl text-gray-500"
+            className="block p-10 text-4xl text-secondary-500"
             aria-hidden="true"
           />
           {editCoverImageTooltip}
@@ -200,9 +200,9 @@ export const FacilityHome = (props: any) => {
                   {hasCoverImage ? (
                     <CoverImage />
                   ) : (
-                    <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-gray-200 font-medium text-gray-700 lg:h-80 lg:w-80">
+                    <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-secondary-200 font-medium text-secondary-700 lg:h-80 lg:w-80">
                       <svg
-                        className="h-8 w-8 fill-current text-gray-500"
+                        className="h-8 w-8 fill-current text-secondary-500"
                         viewBox="0 0 40 32"
                         xmlns="http://www.w3.org/2000/svg"
                       >
@@ -220,7 +220,7 @@ export const FacilityHome = (props: any) => {
                       </h1>
                       {facilityData?.modified_date && (
                         <RecordMeta
-                          className="mt-1 text-sm text-gray-700"
+                          className="mt-1 text-sm text-secondary-700"
                           prefix={t("updated")}
                           time={facilityData?.modified_date}
                         />
@@ -445,19 +445,6 @@ export const FacilityHome = (props: any) => {
                 <CareIcon icon="l-user-injured" className="text-lg" />
                 <span>View Patients</span>
               </ButtonV2>
-              <ButtonV2
-                id="view-patient-facility-list"
-                variant="primary"
-                ghost
-                border
-                className="mt-2 flex w-full flex-row justify-center md:w-auto"
-                onClick={() =>
-                  navigate(`/facility/${facilityId}/discharged-patients`)
-                }
-              >
-                <CareIcon icon="l-user-injured" className="text-lg" />
-                <span>View Discharged Patients</span>
-              </ButtonV2>
             </div>
           </div>
         </div>
@@ -536,7 +523,7 @@ const LiveMonitoringButton = () => {
         leaveTo="opacity-0 translate-y-1"
       >
         <Popover.Panel className="absolute z-30 mt-1 w-full px-4 sm:px-0 md:w-96 lg:max-w-3xl lg:translate-x-[-168px]">
-          <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
+          <div className="rounded-lg shadow-lg ring-1 ring-secondary-400">
             <div className="relative flex flex-col gap-4 rounded-b-lg bg-white p-6">
               <div>
                 <FieldLabel htmlFor="location" className="text-sm">
diff --git a/src/Components/Facility/FacilityHomeTriage.tsx b/src/Components/Facility/FacilityHomeTriage.tsx
index 7a9b464676a..67d7563846d 100644
--- a/src/Components/Facility/FacilityHomeTriage.tsx
+++ b/src/Components/Facility/FacilityHomeTriage.tsx
@@ -85,7 +85,7 @@ export const FacilityHomeTriage = (props: any) => {
           {stats.length === 0 && (
             <>
               <hr />
-              <div className="mt-3 flex min-w-[1000px] items-center justify-center rounded-sm border border-[#D2D6DC] p-4 text-xl font-bold text-gray-600">
+              <div className="mt-3 flex min-w-[1000px] items-center justify-center rounded-sm border border-[#D2D6DC] p-4 text-xl font-bold text-secondary-600">
                 No Data Found
               </div>
             </>
diff --git a/src/Components/Facility/FacilityStaffList.tsx b/src/Components/Facility/FacilityStaffList.tsx
index 1069b51672e..ae3c5fb0662 100644
--- a/src/Components/Facility/FacilityStaffList.tsx
+++ b/src/Components/Facility/FacilityStaffList.tsx
@@ -35,7 +35,7 @@ export const FacilityStaffList = (props: any) => {
   let doctorList: any = null;
   if (!doctorQuery.data || !doctorQuery.data.results.length) {
     doctorList = (
-      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         {t("no_staff")}
       </h5>
     );
diff --git a/src/Components/Facility/FacilityUsers.tsx b/src/Components/Facility/FacilityUsers.tsx
index 31ceb6e1937..77ca88618a6 100644
--- a/src/Components/Facility/FacilityUsers.tsx
+++ b/src/Components/Facility/FacilityUsers.tsx
@@ -151,13 +151,15 @@ export default function FacilityUsers(props: any) {
                       {user.username}
                     </div>
                   )}
-                  <div className="min-width-50 shrink-0 text-sm text-gray-600">
+                  <div className="min-width-50 shrink-0 text-sm text-secondary-600">
                     Last Online:{" "}
                     <span
                       aria-label="Online"
                       className={
                         "inline-block h-2 w-2 shrink-0 rounded-full " +
-                        (isUserOnline(user) ? "bg-primary-400" : "bg-gray-300")
+                        (isUserOnline(user)
+                          ? "bg-primary-400"
+                          : "bg-secondary-300")
                       }
                     ></span>
                     <span className="pl-2">
@@ -183,10 +185,10 @@ export default function FacilityUsers(props: any) {
                 </div>
                 <div className="flex justify-between">
                   {user.phone_number && (
-                    <div className="mt-2 border-t bg-gray-50 px-6 py-2">
+                    <div className="mt-2 border-t bg-secondary-50 px-6 py-2">
                       <div className="flex justify-between py-4">
                         <div>
-                          <div className="leading-relaxed text-gray-500">
+                          <div className="leading-relaxed text-secondary-500">
                             Phone:
                           </div>
                           <a
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index 47545c3cdc5..b59a1a2c5db 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -130,14 +130,14 @@ export const HospitalList = () => {
   } else if (permittedData.results && permittedData.results.length === 0) {
     manageFacilities = hasFiltersApplied(qParams) ? (
       <div className="w-full rounded-lg bg-white p-3">
-        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-gray-600">
+        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-secondary-600">
           {t("no_facilities")}
         </div>
       </div>
     ) : (
       <div>
         <div
-          className="border-grey-500 mt-4 cursor-pointer whitespace-nowrap rounded-md border bg-white p-16 text-center text-sm font-semibold shadow hover:bg-gray-300"
+          className="mt-4 cursor-pointer whitespace-nowrap rounded-md border bg-white p-16 text-center text-sm font-semibold shadow hover:bg-secondary-300"
           onClick={() => navigate("/facility/create")}
         >
           <CareIcon icon="l-plus" className="text-3xl" />
diff --git a/src/Components/Facility/InventoryList.tsx b/src/Components/Facility/InventoryList.tsx
index 24c415c20b1..fe7e846630d 100644
--- a/src/Components/Facility/InventoryList.tsx
+++ b/src/Components/Facility/InventoryList.tsx
@@ -45,7 +45,7 @@ export default function InventoryList(props: any) {
         id={`${inventoryItem.item_object?.name.replaceAll(" ", "-")}`}
         key={inventoryItem.id}
         className={classNames(
-          "cursor-pointer hover:bg-gray-200",
+          "cursor-pointer hover:bg-secondary-200",
           inventoryItem.is_low ? "bg-red-100" : "bg-white",
         )}
         onClick={() =>
@@ -54,9 +54,9 @@ export default function InventoryList(props: any) {
           )
         }
       >
-        <td className="border-b border-gray-200 p-5 text-sm">
+        <td className="border-b border-secondary-200 p-5 text-sm">
           <div className="flex items-center">
-            <p className="whitespace-nowrap text-gray-900">
+            <p className="whitespace-nowrap text-secondary-900">
               {inventoryItem.item_object?.name}
               {inventoryItem.is_low && (
                 <span className="badge badge-danger ml-2">Low Stock</span>
@@ -64,8 +64,8 @@ export default function InventoryList(props: any) {
             </p>
           </div>
         </td>
-        <td className="border-b border-gray-200 p-5 text-sm">
-          <p className="whitespace-nowrap lowercase text-gray-900">
+        <td className="border-b border-secondary-200 p-5 text-sm">
+          <p className="whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.quantity}{" "}
             {inventoryItem.item_object?.default_unit?.name}
           </p>
@@ -75,8 +75,11 @@ export default function InventoryList(props: any) {
   } else if (inventoryData?.results && inventoryData.results.length === 0) {
     inventoryList = (
       <tr className="bg-white">
-        <td colSpan={3} className="border-b border-gray-200 p-5 text-center">
-          <p className="whitespace-nowrap text-gray-500">
+        <td
+          colSpan={3}
+          className="border-b border-secondary-200 p-5 text-center"
+        >
+          <p className="whitespace-nowrap text-secondary-500">
             No inventory available
           </p>
         </td>
@@ -94,10 +97,10 @@ export default function InventoryList(props: any) {
             <table className="min-w-full overflow-hidden rounded-lg leading-normal shadow">
               <thead>
                 <tr>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Name
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Stock
                   </th>
                 </tr>
diff --git a/src/Components/Facility/InventoryLog.tsx b/src/Components/Facility/InventoryLog.tsx
index 3e2bbe11c97..ab731a38751 100644
--- a/src/Components/Facility/InventoryLog.tsx
+++ b/src/Components/Facility/InventoryLog.tsx
@@ -81,17 +81,17 @@ export default function InventoryLog(props: any) {
   if (data?.results.length) {
     inventoryList = data.results.map((inventoryItem: any, index) => (
       <tr id={`row-${index}`} key={inventoryItem.id} className="bg-white">
-        <td className="border-b border-gray-200 p-5 text-sm hover:bg-gray-100">
+        <td className="border-b border-secondary-200 p-5 text-sm hover:bg-secondary-100">
           <div className="flex items-center">
             <div className="ml-3">
-              <p className="whitespace-nowrap text-gray-900">
+              <p className="whitespace-nowrap text-secondary-900">
                 {formatDateTime(inventoryItem.created_date)}
               </p>
             </div>
           </div>
         </td>
-        <td className="border-b border-gray-200 p-5 text-sm hover:bg-gray-100">
-          <p className="whitespace-nowrap lowercase text-gray-900">
+        <td className="border-b border-secondary-200 p-5 text-sm hover:bg-secondary-100">
+          <p className="whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.quantity_in_default_unit}{" "}
             {inventoryItem.item_object?.default_unit?.name}
             {inventoryItem.probable_accident && (
@@ -102,8 +102,8 @@ export default function InventoryLog(props: any) {
             )}
           </p>
         </td>
-        <td className="border-b border-gray-200 p-5 text-sm hover:bg-gray-100">
-          <p className="whitespace-nowrap lowercase text-gray-900">
+        <td className="border-b border-secondary-200 p-5 text-sm hover:bg-secondary-100">
+          <p className="whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.is_incoming ? (
               <span className="ml-2 text-primary-600">Added Stock</span>
             ) : (
@@ -170,8 +170,11 @@ export default function InventoryLog(props: any) {
   } else if (data?.results && data.results.length === 0) {
     inventoryList = (
       <tr className="bg-white">
-        <td colSpan={3} className="border-b border-gray-200 p-5 text-center">
-          <p className="whitespace-nowrap text-gray-500">
+        <td
+          colSpan={3}
+          className="border-b border-secondary-200 p-5 text-center"
+        >
+          <p className="whitespace-nowrap text-secondary-500">
             No log for this inventory available
           </p>
         </td>
@@ -189,16 +192,16 @@ export default function InventoryLog(props: any) {
             <table className="min-w-full overflow-x-clip rounded-lg leading-normal shadow">
               <thead>
                 <tr>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Created On
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Quantity
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Status
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-400 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Actions
                   </th>
                 </tr>
diff --git a/src/Components/Facility/Investigations/InvestigationSuggestions.tsx b/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
index 08779e78117..52416cc1e4a 100644
--- a/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
+++ b/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
@@ -35,7 +35,7 @@ export default function ViewInvestigationSuggestions(props: {
     <div className="mt-5" id="investigation-suggestions">
       <h3>{t("investigations_suggested")}</h3>
       <table className="mt-3 hidden w-full rounded-xl bg-white shadow md:table">
-        <thead className="bg-gray-200 text-left">
+        <thead className="bg-secondary-200 text-left">
           <tr>
             <th className="p-4">{t("investigations")}</th>
             <th className="p-4">{t("to_be_conducted")}</th>
@@ -48,7 +48,7 @@ export default function ViewInvestigationSuggestions(props: {
             investigations.investigation.map((investigation, index) => {
               let nextFurthestInvestigation: any = undefined;
               return (
-                <tr key={index} className="border-b border-b-gray-200">
+                <tr key={index} className="border-b border-b-secondary-200">
                   <td className="p-4">
                     <ul className="ml-4 list-decimal">
                       {investigation.type?.map((type, index) => {
diff --git a/src/Components/Facility/Investigations/InvestigationTable.tsx b/src/Components/Facility/Investigations/InvestigationTable.tsx
index 4e1b9d1a194..cb21e9d5b80 100644
--- a/src/Components/Facility/Investigations/InvestigationTable.tsx
+++ b/src/Components/Facility/Investigations/InvestigationTable.tsx
@@ -9,15 +9,15 @@ const TestRow = ({ data, i, onChange, showForm, value, isChanged }: any) => {
   return (
     <tr
       className={classNames(
-        i % 2 == 0 ? "bg-gray-50" : "bg-white",
+        i % 2 == 0 ? "bg-secondary-50" : "bg-white",
         isChanged && "!bg-primary-300",
       )}
       x-description="Even row"
     >
-      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
+      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-secondary-900">
         {data?.investigation_object?.name || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {showForm ? (
           data?.investigation_object?.investigation_type === "Choice" ? (
             <SelectFormField
@@ -45,16 +45,16 @@ const TestRow = ({ data, i, onChange, showForm, value, isChanged }: any) => {
           value || "---"
         )}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.unit || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.min_value || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.max_value || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.investigation_object.ideal_value || "---"}
       </td>
     </tr>
@@ -127,15 +127,15 @@ export const InvestigationTable = ({
       />
       <br />
       <div id="section-to-print">
-        <div className="overflow-x-scroll border-b border-gray-200 shadow sm:rounded-lg">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:rounded-lg">
+          <table className="min-w-full divide-y divide-secondary-200">
+            <thead className="bg-secondary-50">
               <tr>
                 {["Name", "Value", "Unit", "Min", "Max", "Ideal"].map(
                   (heading) => (
                     <th
                       scope="col"
-                      className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                      className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                     >
                       {heading}
                     </th>
@@ -177,7 +177,9 @@ export const InvestigationTable = ({
                   );
                 })
               ) : (
-                <tr className="text-center text-gray-500">No tests taken</tr>
+                <tr className="text-center text-secondary-500">
+                  No tests taken
+                </tr>
               )}
             </tbody>
           </table>
diff --git a/src/Components/Facility/Investigations/Reports/ReportTable.tsx b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
index af08688eda4..4d8779ca3ea 100644
--- a/src/Components/Facility/Investigations/Reports/ReportTable.tsx
+++ b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
@@ -7,8 +7,8 @@ import { FC } from "react";
 
 const ReportRow = ({ data, name, min, max }: any) => {
   return (
-    <tr className="bg-white even:bg-gray-50">
-      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
+    <tr className="bg-white even:bg-secondary-50">
+      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-secondary-900">
         {name}
       </td>
       {data.map((d: any) => {
@@ -38,10 +38,10 @@ const ReportRow = ({ data, name, min, max }: any) => {
           </td>
         );
       })}
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {min}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {max}
       </td>
     </tr>
@@ -78,7 +78,9 @@ const ReportTable: FC<ReportTableProps> = ({
       )}
 
       <div className=" my-4 p-4" id="section-to-print">
-        {title && <h1 className="text-xl font-bold text-gray-800">{title}</h1>}
+        {title && (
+          <h1 className="text-xl font-bold text-secondary-800">{title}</h1>
+        )}
         <br />
         {patientDetails && (
           <div className="flex flex-col gap-1 p-1">
@@ -102,13 +104,13 @@ const ReportTable: FC<ReportTableProps> = ({
           </span>
         </div>
         <br />
-        <div className="overflow-x-scroll border-b border-gray-200 shadow sm:rounded-lg">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
+        <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:rounded-lg">
+          <table className="min-w-full divide-y divide-secondary-200">
+            <thead className="bg-secondary-50">
               <tr>
                 <th
                   scope="col"
-                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                 >
                   Name
                 </th>
@@ -131,13 +133,13 @@ const ReportTable: FC<ReportTableProps> = ({
                 ))}
                 <th
                   scope="col"
-                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                 >
                   Min
                 </th>
                 <th
                   scope="col"
-                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                  className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                 >
                   Max
                 </th>
@@ -157,7 +159,9 @@ const ReportTable: FC<ReportTableProps> = ({
                   );
                 })
               ) : (
-                <tr className="text-center text-gray-500">No tests taken</tr>
+                <tr className="text-center text-secondary-500">
+                  No tests taken
+                </tr>
               )}
             </tbody>
           </table>
diff --git a/src/Components/Facility/Investigations/Table.tsx b/src/Components/Facility/Investigations/Table.tsx
index 78554d45553..e2a1a9395fc 100644
--- a/src/Components/Facility/Investigations/Table.tsx
+++ b/src/Components/Facility/Investigations/Table.tsx
@@ -6,11 +6,11 @@ import { useState } from "react";
 
 const TestRow = ({ data, value, onChange, i }: any) => {
   return (
-    <tr className={i % 2 == 0 ? "bg-gray-50" : "bg-white"}>
-      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
+    <tr className={i % 2 == 0 ? "bg-secondary-50" : "bg-white"}>
+      <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-secondary-900">
         {data.name}
       </td>
-      <td className="min-w-[200px] whitespace-nowrap px-6 py-4 text-right text-sm text-gray-700">
+      <td className="min-w-[200px] whitespace-nowrap px-6 py-4 text-right text-sm text-secondary-700">
         {data.investigation_type === "Choice" ? (
           <SelectFormField
             name={data.name}
@@ -31,16 +31,16 @@ const TestRow = ({ data, value, onChange, i }: any) => {
           />
         )}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.unit || "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.min_value ?? "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.max_value ?? "---"}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+      <td className="whitespace-nowrap px-6 py-4 text-sm text-secondary-700">
         {data.ideal_value || "---"}
       </td>
     </tr>
@@ -76,15 +76,15 @@ export const TestTable = ({ title, data, state, dispatch }: any) => {
         onChange={(e) => setSearchFilter(e.value)}
       />
       <br />
-      <div className="overflow-x-scroll border-b border-gray-200 shadow sm:overflow-x-visible sm:rounded-lg">
-        <table className="block min-w-full divide-y divide-gray-200 overflow-scroll">
-          <thead className="bg-gray-50">
+      <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:overflow-x-visible sm:rounded-lg">
+        <table className="block min-w-full divide-y divide-secondary-200 overflow-scroll">
+          <thead className="bg-secondary-50">
             <tr>
               {["Name", "Value", "Unit", "Min", "Max", "Ideal"].map(
                 (heading) => (
                   <th
                     scope="col"
-                    className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-800"
+                    className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
                   >
                     {heading}
                   </th>
@@ -118,7 +118,7 @@ export const TestTable = ({ title, data, state, dispatch }: any) => {
                 );
               })
             ) : (
-              <tr className="text-center text-gray-500">No tests taken</tr>
+              <tr className="text-center text-secondary-500">No tests taken</tr>
             )}
           </tbody>
         </table>
diff --git a/src/Components/Facility/Investigations/ViewInvestigations.tsx b/src/Components/Facility/Investigations/ViewInvestigations.tsx
index 58297489329..192a63cbbdf 100644
--- a/src/Components/Facility/Investigations/ViewInvestigations.tsx
+++ b/src/Components/Facility/Investigations/ViewInvestigations.tsx
@@ -37,7 +37,7 @@ export default function ViewInvestigations(props: {
         <div className="mt-4 space-y-2 ">
           {investigations.length > 0 && (
             <div>
-              <h4 className="-mb-14 text-gray-700">{t("summary")}</h4>
+              <h4 className="-mb-14 text-secondary-700">{t("summary")}</h4>
               <ReportTable
                 investigationData={investigations}
                 hidePrint={true}
@@ -45,7 +45,7 @@ export default function ViewInvestigations(props: {
             </div>
           )}
           {investigationSessions.length === 0 && (
-            <div className="text-semibold mt-5 h-full rounded-lg bg-white py-4 text-center text-lg text-gray-500 shadow">
+            <div className="text-semibold mt-5 h-full rounded-lg bg-white py-4 text-center text-lg text-secondary-500 shadow">
               {t("no_investigation")}
             </div>
           )}
@@ -53,7 +53,7 @@ export default function ViewInvestigations(props: {
             return (
               <div
                 key={investigationSession.session_external_id}
-                className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-gray-200"
+                className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-secondary-200"
               >
                 <div>
                   {formatDateTime(investigationSession.session_created_date)}
diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index 18f3af60eb5..abf4a056695 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -105,7 +105,7 @@ export default function LocationManagement({ facilityId }: Props) {
             </ButtonV2>
           </div>
           <div className="w-full @container">
-            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+            <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
               <span>No locations available</span>
             </PaginatedList.WhenEmpty>
 
@@ -225,10 +225,10 @@ const Location = ({
   setShowDeletePopup,
   facilityId,
 }: LocationProps) => (
-  <div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
+  <div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
     <div className="flex-1">
       <div className="flex w-full items-start justify-between gap-2">
-        <div className="flex items-start gap-3">
+        <div className="flex items-end gap-3">
           <p className="break-all text-xl font-medium" id="view-location-name">
             {name}
           </p>
@@ -243,16 +243,16 @@ const Location = ({
         </div>
       </div>
       <p
-        className="mt-3 break-all text-sm font-medium text-gray-700"
+        className="mt-3 break-all text-sm font-medium text-secondary-700"
         id="view-location-description"
       >
         {description || "-"}
       </p>
-      <p className="mt-3 text-sm font-semibold text-gray-700">
+      <p className="mt-3 text-sm font-semibold text-secondary-700">
         Middleware Address:
       </p>
       <p
-        className="mt-1 break-all font-mono text-sm font-bold text-gray-700"
+        className="mt-1 break-all font-mono text-sm font-bold text-secondary-700"
         id="view-location-middleware"
       >
         {middleware_address || "-"}
@@ -261,7 +261,7 @@ const Location = ({
         route={routes.listFacilityAssetLocationAvailability}
         params={{ external_id: id, facility_external_id: facilityId }}
         header={
-          <p className="mt-3 text-sm font-semibold text-gray-700">
+          <p className="mt-3 text-sm font-semibold text-secondary-700">
             Middleware Uptime
           </p>
         }
@@ -312,7 +312,7 @@ const Location = ({
       </div>
     </div>
 
-    <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-gray-700">
+    <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-secondary-700">
       <RecordMeta time={created_date} prefix="Created:" />
       <RecordMeta time={modified_date} prefix="Modified:" />
     </div>
diff --git a/src/Components/Facility/MinQuantityList.tsx b/src/Components/Facility/MinQuantityList.tsx
index b3aeb9232e5..528f03cbac7 100644
--- a/src/Components/Facility/MinQuantityList.tsx
+++ b/src/Components/Facility/MinQuantityList.tsx
@@ -47,15 +47,15 @@ export default function MinQuantityList(props: any) {
   if (minimumQuantityData?.results.length) {
     inventoryList = minimumQuantityData.results.map((inventoryItem: any) => (
       <tr key={inventoryItem.id} className="bg-white">
-        <td className="cursor-pointer border-b border-gray-200 p-5 hover:bg-gray-200 sm:cursor-default sm:text-sm sm:hover:bg-white">
+        <td className="cursor-pointer border-b border-secondary-200 p-5 hover:bg-secondary-200 sm:cursor-default sm:text-sm sm:hover:bg-white">
           <div className="hidden flex-col sm:flex">
-            <p className="whitespace-nowrap font-normal text-gray-900">
+            <p className="whitespace-nowrap font-normal text-secondary-900">
               {inventoryItem.item_object?.name}
             </p>
           </div>
           <ButtonV2
             ghost={true}
-            className="w-full hover:bg-gray-200 sm:hidden"
+            className="w-full hover:bg-secondary-200 sm:hidden"
             onClick={() => {
               setSelectedItem({
                 id: inventoryItem.id,
@@ -66,16 +66,16 @@ export default function MinQuantityList(props: any) {
           >
             <div className="flex w-full items-center justify-between sm:hidden">
               <div className="flex flex-col text-start">
-                <p className="whitespace-nowrap font-semibold text-gray-900">
+                <p className="whitespace-nowrap font-semibold text-secondary-900">
                   {inventoryItem.item_object?.name}
                 </p>
-                <p className="mt-1 whitespace-nowrap text-sm text-gray-900">
+                <p className="mt-1 whitespace-nowrap text-sm text-secondary-900">
                   {"Min Quantity: "}
                   {inventoryItem.min_quantity}{" "}
                   {inventoryItem.item_object?.default_unit?.name}
                 </p>
               </div>
-              <div className="text-gray-600">
+              <div className="text-secondary-600">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
@@ -94,8 +94,8 @@ export default function MinQuantityList(props: any) {
             </div>
           </ButtonV2>
         </td>
-        <td className="hidden w-full justify-between border-b border-gray-200 p-5 text-sm sm:flex">
-          <p className="mt-2 whitespace-nowrap lowercase text-gray-900">
+        <td className="hidden w-full justify-between border-b border-secondary-200 p-5 text-sm sm:flex">
+          <p className="mt-2 whitespace-nowrap lowercase text-secondary-900">
             {inventoryItem.min_quantity}{" "}
             {inventoryItem.item_object?.default_unit?.name}
           </p>
@@ -123,9 +123,9 @@ export default function MinQuantityList(props: any) {
       <tr className="bg-white">
         <td
           colSpan={3}
-          className="pxf-5 border-b border-gray-200 py-5 text-center"
+          className="pxf-5 border-b border-secondary-200 py-5 text-center"
         >
-          <p className="whitespace-nowrap text-gray-500">
+          <p className="whitespace-nowrap text-secondary-500">
             No item with minimum quantity set
           </p>
         </td>
@@ -143,19 +143,19 @@ export default function MinQuantityList(props: any) {
             <table className="min-w-full overflow-hidden rounded-lg leading-normal shadow">
               <thead>
                 <tr>
-                  <th className="border-b-2 border-gray-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Item
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
+                  <th className="border-b-2 border-secondary-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white">
                     Minimum Quantity
                   </th>
-                  <th className="border-b-2 border-gray-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white"></th>
+                  <th className="border-b-2 border-secondary-200 bg-primary-500 px-5 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white"></th>
                 </tr>
               </thead>
               <tbody>{inventoryList}</tbody>
             </table>
           </div>
-          <div className="rounded-lg bg-gray-100 shadow-sm sm:hidden">
+          <div className="rounded-lg bg-secondary-100 shadow-sm sm:hidden">
             <table className="min-w-full overflow-hidden rounded-lg leading-normal shadow">
               {inventoryList}
             </table>
diff --git a/src/Components/Facility/MinQuantityRequiredModal.tsx b/src/Components/Facility/MinQuantityRequiredModal.tsx
index 43e8a98c5b7..0fbfbeee9a4 100644
--- a/src/Components/Facility/MinQuantityRequiredModal.tsx
+++ b/src/Components/Facility/MinQuantityRequiredModal.tsx
@@ -103,7 +103,7 @@ export const MinQuantityRequiredModal = (props: any) => {
           <div role="status">
             <svg
               aria-hidden="true"
-              className="mr-2 h-8 w-8 animate-spin fill-primary text-gray-200 dark:text-gray-600"
+              className="mr-2 h-8 w-8 animate-spin fill-primary text-secondary-200 dark:text-secondary-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
@@ -124,7 +124,7 @@ export const MinQuantityRequiredModal = (props: any) => {
         <div>
           {" "}
           <div className="mb-4">
-            <p className="mt-1 text-sm text-gray-500">
+            <p className="mt-1 text-sm text-secondary-500">
               Set the minimum quantity for{" "}
               <strong>{minimumQuantityItemData?.item_object.name}</strong> in{" "}
               <strong> {facilityObject?.name}</strong>
diff --git a/src/Components/Facility/PatientNoteCard.tsx b/src/Components/Facility/PatientNoteCard.tsx
index 5ea41cfb046..7f00700ff47 100644
--- a/src/Components/Facility/PatientNoteCard.tsx
+++ b/src/Components/Facility/PatientNoteCard.tsx
@@ -70,24 +70,24 @@ const PatientNoteCard = ({
       {" "}
       <div
         className={classNames(
-          "mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-3 text-gray-800",
+          "mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-3 text-secondary-800",
           note.user_type === "RemoteSpecialist" && "border-primary-400",
         )}
       >
         <div className="flex justify-between">
           <div>
             <div>
-              <span className="text-sm font-semibold text-gray-700">
+              <span className="text-sm font-semibold text-secondary-700">
                 {note.created_by_object?.first_name || "Unknown"}{" "}
                 {note.created_by_object?.last_name}
               </span>
               {note.user_type && (
-                <span className="pl-2 text-sm text-gray-700">
+                <span className="pl-2 text-sm text-secondary-700">
                   {`(${USER_TYPES_MAP[note.user_type]})`}
                 </span>
               )}
             </div>
-            <div className="text-xs text-gray-600">
+            <div className="text-xs text-secondary-600">
               <div className="tooltip inline">
                 <span className="tooltip-text tooltip-bottom">
                   {formatDateTime(note.created_date)}
@@ -103,7 +103,7 @@ const PatientNoteCard = ({
               ) && (
                 <div className="flex">
                   <div
-                    className="cursor-pointer text-xs text-gray-600"
+                    className="cursor-pointer text-xs text-secondary-600"
                     onClick={() => {
                       fetchEditHistory();
                       setShowEditHistory(true);
@@ -144,7 +144,7 @@ const PatientNoteCard = ({
               <div className="flex flex-col">
                 <textarea
                   rows={2}
-                  className="h-20 w-full resize-none rounded-lg border border-gray-300 p-2"
+                  className="h-20 w-full resize-none rounded-lg border border-secondary-300 p-2"
                   value={noteField}
                   onChange={(e) => setNoteField(e.target.value)}
                 ></textarea>
@@ -173,7 +173,7 @@ const PatientNoteCard = ({
                 </div>
               </div>
             ) : (
-              <div className="text-sm text-gray-700">{noteField}</div>
+              <div className="text-sm text-secondary-700">{noteField}</div>
             )}
           </div>
         }
@@ -186,7 +186,7 @@ const PatientNoteCard = ({
         >
           <div>
             <div className="mb-4">
-              <p className="text-md mt-1 text-gray-500">
+              <p className="text-md mt-1 text-secondary-500">
                 Edit History for note
                 <strong> {note.id}</strong>
               </p>
@@ -202,21 +202,23 @@ const PatientNoteCard = ({
                 return (
                   <div
                     key={index}
-                    className="my-2 flex flex-col justify-between rounded-lg border border-gray-300 p-4 py-2 transition-colors duration-200 hover:bg-gray-100"
+                    className="my-2 flex flex-col justify-between rounded-lg border border-secondary-300 p-4 py-2 transition-colors duration-200 hover:bg-secondary-100"
                   >
                     <div className="flex">
                       <div className="grow">
-                        <p className="text-sm font-medium text-gray-500">
+                        <p className="text-sm font-medium text-secondary-500">
                           {isLast ? "Created" : "Edited"} On
                         </p>
-                        <p className="text-sm text-gray-900">
+                        <p className="text-sm text-secondary-900">
                           {formatDateTime(edit.edited_date)}
                         </p>
                       </div>
                     </div>
                     <div className="mt-2 grow">
-                      <p className="text-sm font-medium text-gray-500">Note</p>
-                      <p className="text-sm text-gray-900">{edit.note}</p>
+                      <p className="text-sm font-medium text-secondary-500">
+                        Note
+                      </p>
+                      <p className="text-sm text-secondary-900">{edit.note}</p>
                     </div>
                   </div>
                 );
diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
index e2da270e532..6c8931ce249 100644
--- a/src/Components/Facility/PatientNotesSlideover.tsx
+++ b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -130,7 +130,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
     <div className="flex gap-1">
       {show && (
         <Link
-          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
           href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/notes`}
         >
           <CareIcon
@@ -142,7 +142,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
       <div
         id="expand_doctor_notes"
         className={classNames(
-          "flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
+          "flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
           show && "rotate-180",
         )}
         onClick={() => setShow(!show)}
@@ -153,7 +153,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
         />
       </div>
       <div
-        className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-gray-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+        className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
         onClick={() => setShowPatientNotesPopup(false)}
       >
         <CareIcon
diff --git a/src/Components/Facility/StaffCapacity.tsx b/src/Components/Facility/StaffCapacity.tsx
index 9f5eeeb18ac..fc54dfcbb2d 100644
--- a/src/Components/Facility/StaffCapacity.tsx
+++ b/src/Components/Facility/StaffCapacity.tsx
@@ -157,7 +157,7 @@ export const StaffCapacity = (props: DoctorCapacityProps) => {
           <div role="status">
             <svg
               aria-hidden="true"
-              className="mr-2 h-8 w-8 animate-spin fill-primary text-gray-200 dark:text-gray-600"
+              className="mr-2 h-8 w-8 animate-spin fill-primary text-secondary-200 dark:text-secondary-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/Components/Facility/TransferPatientDialog.tsx b/src/Components/Facility/TransferPatientDialog.tsx
index 05d08635b01..3ead082c610 100644
--- a/src/Components/Facility/TransferPatientDialog.tsx
+++ b/src/Components/Facility/TransferPatientDialog.tsx
@@ -58,7 +58,12 @@ const TransferPatientDialog = (props: Props) => {
   const patientOptions: Array<OptionsType> = patientList.map((patient) => {
     return {
       id: patient.patient_id as unknown as number,
-      text: `${patient.name} (${patient.gender})`,
+      text: [
+        patient.name,
+        `(${patient.gender})`,
+        patient.is_expired ? "(Expired)" : "",
+      ].join(" "),
+      disabled: patient.is_expired,
     };
   });
 
@@ -171,6 +176,7 @@ const TransferPatientDialog = (props: Props) => {
               options={patientOptions}
               optionLabel={(patient) => patient.text}
               optionValue={(patient) => patient.id}
+              optionDisabled={(patient) => patient.disabled ?? false}
               value={state.form.patient}
               onChange={handleChange}
               error={state.errors.patient}
diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
index a83cb64ec66..79d28662e01 100644
--- a/src/Components/Facility/TreatmentSummary.tsx
+++ b/src/Components/Facility/TreatmentSummary.tsx
@@ -56,9 +56,9 @@ const TreatmentSummary = (props: any) => {
 
           <div className="text-right font-bold">{formatDate(date)}</div>
 
-          <div className="mb-5 mt-2 border border-gray-800">
-            <div className="grid border-b-2 border-gray-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
-              <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+          <div className="mb-5 mt-2 border border-secondary-800">
+            <div className="grid border-b-2 border-secondary-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
+              <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                 <b>Name :</b> {patientData?.name ?? ""}
               </div>
               <div className="col-span-1 px-3 py-2">
@@ -66,13 +66,13 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="grid border-b-2 border-gray-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
+            <div className="grid border-b-2 border-secondary-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
               <div className="col-span-1 grid sm:grid-cols-2 print:grid-cols-2 ">
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+                <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                   <b>Age :</b>{" "}
                   {patientData ? formatPatientAge(patientData, true) : ""}
                 </div>
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+                <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                   <b>OP :</b> {consultationData?.patient_no ?? ""}
                 </div>
               </div>
@@ -91,8 +91,8 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="grid border-b-2 border-gray-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
-              <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
+            <div className="grid border-b-2 border-secondary-800 sm:grid-cols-2 print:grid-cols-3 print:md:grid-cols-3">
+              <div className="col-span-1 border-b-2 border-secondary-800 px-3 py-2 sm:border-b-0 sm:border-r-2 print:border-b-0 print:border-r-2">
                 <b>Gender : </b>
                 {GENDER_TYPES.find((i) => i.id === patientData?.gender)?.text}
               </div>
@@ -108,14 +108,14 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Comorbidities :</b>
               <div className="mx-0 sm:mx-5 print:mx-5">
-                <table className="w-full border-collapse border border-gray-800">
+                <table className="w-full border-collapse border border-secondary-800">
                   <thead>
                     <tr>
-                      <th className="border border-gray-800">Disease</th>
-                      <th className="border border-gray-800">Details</th>
+                      <th className="border border-secondary-800">Disease</th>
+                      <th className="border border-secondary-800">Details</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -125,10 +125,10 @@ const TreatmentSummary = (props: any) => {
                         (obj: any, index: number) => {
                           return (
                             <tr key={index}>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {obj["disease"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {obj["details"] ? obj["details"] : "---"}
                               </td>
                             </tr>
@@ -137,10 +137,10 @@ const TreatmentSummary = (props: any) => {
                       )
                     ) : (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
                       </tr>
@@ -150,7 +150,7 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Diagnosis :</b>
               <div className="mx-5">
                 <div>
@@ -177,7 +177,7 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>General Instructions :</b>
               {patientData?.last_consultation?.consultation_notes ? (
                 <div className="mx-5">
@@ -188,29 +188,29 @@ const TreatmentSummary = (props: any) => {
               )}
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Relevant investigations :</b>
 
               <div className="mx-0 overflow-x-auto sm:mx-5 print:mx-5">
-                <table className="w-full border-collapse border border-gray-800">
+                <table className="w-full border-collapse border border-secondary-800">
                   <thead>
                     <tr>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Date
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Name
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Result
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         Ideal value
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         values range
                       </th>
-                      <th className="border border-gray-800 text-center">
+                      <th className="border border-secondary-800 text-center">
                         unit
                       </th>
                     </tr>
@@ -222,28 +222,28 @@ const TreatmentSummary = (props: any) => {
                         (value: any, index: number) => {
                           return (
                             <tr key={index}>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {formatDate(
                                   value["session_object"][
                                     "session_created_date"
                                   ],
                                 )}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["name"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["notes"] || value["value"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["ideal_value"] ||
                                   "-"}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["min_value"]} -{" "}
                                 {value["investigation_object"]["max_value"]}
                               </td>
-                              <td className="border border-gray-800 text-center">
+                              <td className="border border-secondary-800 text-center">
                                 {value["investigation_object"]["unit"] || "-"}
                               </td>
                             </tr>
@@ -252,22 +252,22 @@ const TreatmentSummary = (props: any) => {
                       )
                     ) : (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
                       </tr>
@@ -277,7 +277,7 @@ const TreatmentSummary = (props: any) => {
               </div>
             </div>
 
-            <div className="border-b-2 border-gray-800 px-5 py-2">
+            <div className="border-b-2 border-secondary-800 px-5 py-2">
               <b>Treatment :</b>
               {consultationData?.treatment_plan ? (
                 <p className="ml-4">{consultationData.treatment_plan}</p>
@@ -287,40 +287,42 @@ const TreatmentSummary = (props: any) => {
               <b className="mb-2">Treatment summary/Treament Plan :</b>
 
               <div className="mx-0 overflow-x-auto sm:mx-5 print:mx-5">
-                <table className="w-full border-collapse border border-gray-800">
+                <table className="w-full border-collapse border border-secondary-800">
                   <thead>
                     <tr>
-                      <th className="border border-gray-800">Date</th>
-                      <th className="border border-gray-800">Spo2</th>
-                      <th className="border border-gray-800">Temperature</th>
+                      <th className="border border-secondary-800">Date</th>
+                      <th className="border border-secondary-800">Spo2</th>
+                      <th className="border border-secondary-800">
+                        Temperature
+                      </th>
                     </tr>
                   </thead>
 
                   <tbody>
                     {consultationData?.last_daily_round ? (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           {formatDateTime(
                             consultationData.last_daily_round.modified_date,
                           )}
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           {consultationData.last_daily_round.ventilator_spo2 ||
                             "-"}
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           {consultationData.last_daily_round.temperature || "-"}
                         </td>
                       </tr>
                     ) : (
                       <tr>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
-                        <td className="border border-gray-800 text-center">
+                        <td className="border border-secondary-800 text-center">
                           ---
                         </td>
                       </tr>
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index 74a0d4a0f26..f93d95448a5 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -12,7 +12,11 @@ import { InvestigationType } from "../Common/prescription-builder/InvestigationB
 import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
 import { ConsultationDiagnosis, CreateDiagnosis } from "../Diagnosis/types";
 import { NormalPrescription, PRNPrescription } from "../Medicine/models";
-import { AssignedToObjectModel, DailyRoundsModel } from "../Patient/models";
+import {
+  AssignedToObjectModel,
+  DailyRoundsModel,
+  FileUploadModel,
+} from "../Patient/models";
 import { EncounterSymptom } from "../Symptoms/types";
 import { UserBareMinimum } from "../Users/models";
 
@@ -105,6 +109,7 @@ export interface PatientConsentModel {
   patient_code_status:
     | (typeof CONSENT_PATIENT_CODE_STATUS_CHOICES)[number]["id"]
     | null;
+  files: FileUploadModel[] | null;
   archived: boolean;
   archived_by?: UserBareMinimum;
   archived_date: string;
@@ -180,6 +185,7 @@ export interface ConsultationModel {
   is_readmission?: boolean;
   medico_legal_case?: boolean;
   investigation?: InvestigationType[];
+  has_consents?: (typeof CONSENT_TYPE_CHOICES)[number]["id"][];
 }
 
 export interface PatientStatsModel {
@@ -202,6 +208,7 @@ export interface DupPatientModel {
   date_of_birth: string;
   year_of_birth: number;
   state_id: number;
+  is_expired: boolean;
 }
 
 export interface InventoryItemsModel {
@@ -241,7 +248,8 @@ export interface BedModel {
   facility?: string;
   location_object?: {
     name: string;
-    id?: string;
+    id: string;
+    facility?: { name: string; id: string };
   };
   location?: string;
   is_occupied?: boolean;
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index b66cf16b800..4fd9346065d 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -18,7 +18,7 @@ interface Props {
   onChange: (selected: any) => void;
   optionLabel?: (option: any) => string;
   optionLabelChip?: (option: any) => string;
-  showNOptions?: number;
+  showNOptions?: number | undefined;
   multiple?: boolean;
   compareBy?: string;
   debounceTime?: number;
@@ -40,7 +40,7 @@ const AutoCompleteAsync = (props: Props) => {
     onChange,
     optionLabel = (option: any) => option.label,
     optionLabelChip = (option: any) => option.label,
-    showNOptions = 10,
+    showNOptions,
     multiple = false,
     compareBy,
     debounceTime = 300,
@@ -62,8 +62,13 @@ const AutoCompleteAsync = (props: Props) => {
     () =>
       debounce(async (query: string) => {
         setLoading(true);
-        const data = await fetchData(query);
-        setData(data?.slice(0, showNOptions) || []);
+        const data = (await fetchData(query)) || [];
+
+        if (showNOptions !== undefined) {
+          setData(data.slice(0, showNOptions));
+        } else {
+          setData(data);
+        }
         setLoading(false);
       }, debounceTime),
     [fetchData, showNOptions, debounceTime],
@@ -102,7 +107,6 @@ const AutoCompleteAsync = (props: Props) => {
               onChange={({ target }) => setQuery(target.value)}
               onFocus={props.onFocus}
               onBlur={() => {
-                setQuery("");
                 props.onBlur?.();
               }}
               autoComplete="off"
@@ -114,7 +118,7 @@ const AutoCompleteAsync = (props: Props) => {
                     <div className="tooltip" id="clear-button">
                       <CareIcon
                         icon="l-times-circle"
-                        className="mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                        className="mb-[-5px] h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
                         onClick={(e) => {
                           e.preventDefault();
                           onChange(null);
@@ -140,7 +144,7 @@ const AutoCompleteAsync = (props: Props) => {
           <DropdownTransition>
             <Combobox.Options className="cui-dropdown-base absolute top-12 z-10 text-sm">
               {data?.length === 0 ? (
-                <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
+                <div className="relative cursor-default select-none px-4 py-2 text-secondary-700">
                   {query !== ""
                     ? "Nothing found."
                     : "Start typing to search..."}
@@ -157,7 +161,7 @@ const AutoCompleteAsync = (props: Props) => {
                         <div className="flex items-center gap-2">
                           {optionLabel(item)}
                           {optionLabelChip(item) && (
-                            <div className="mt-1 h-fit max-w-fit rounded-full border border-secondary-400 bg-secondary-100 px-2 text-center text-xs text-gray-900 sm:mt-0">
+                            <div className="mt-1 h-fit max-w-fit rounded-full border border-secondary-400 bg-secondary-100 px-2 text-center text-xs text-secondary-900 sm:mt-0">
                               {optionLabelChip(item)}
                             </div>
                           )}
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index 67b1224cddf..2fbfeacfda4 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -167,14 +167,14 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
             />
             {!props.disabled && (
               <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-                <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
+                <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-secondary-900">
                   <span>{value?.icon}</span>
 
                   {value && !props.isLoading && !props.required && (
                     <div className="tooltip" id="clear-button">
                       <CareIcon
                         icon="l-times-circle"
-                        className="h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                        className="h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
                         onClick={(e) => {
                           e.preventDefault();
                           props.onChange(undefined);
@@ -199,7 +199,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
           <DropdownTransition>
             <Combobox.Options className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right">
               {filteredOptions.length === 0 && (
-                <div className="p-2 text-sm text-gray-500">
+                <div className="p-2 text-sm text-secondary-500">
                   No options found
                 </div>
               )}
@@ -222,10 +222,10 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                           className={classNames(
                             "text-sm font-normal",
                             option.disabled
-                              ? "text-gray-700"
+                              ? "text-secondary-700"
                               : active
                                 ? "text-primary-200"
-                                : "text-gray-700",
+                                : "text-secondary-700",
                           )}
                         >
                           {option.description}
diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
index 7857e96889d..6341d2eb231 100644
--- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -135,7 +135,7 @@ export const AutocompleteMutliSelect = <T, V>(
                 ref={comboButtonRef}
                 className="absolute inset-y-0 right-0 flex items-center pr-2"
               >
-                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-gray-900">
+                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
                   {props.isLoading ? (
                     <CareIcon icon="l-spinner" className="animate-spin" />
                   ) : (
@@ -205,10 +205,10 @@ export const AutocompleteMutliSelect = <T, V>(
                               className={classNames(
                                 "text-sm font-normal",
                                 option.disabled
-                                  ? "text-gray-700"
+                                  ? "text-secondary-700"
                                   : active
                                     ? "text-primary-200"
-                                    : "text-gray-700",
+                                    : "text-secondary-700",
                               )}
                             >
                               {option.description}
diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx
index d3e77aabf52..a6829af9ae4 100644
--- a/src/Components/Form/FormFields/FormField.tsx
+++ b/src/Components/Form/FormFields/FormField.tsx
@@ -16,7 +16,7 @@ export const FieldLabel = (props: LabelProps) => {
     <label
       id={props.id}
       className={classNames(
-        "block text-base font-normal text-gray-900",
+        "block text-base font-normal text-secondary-900",
         !props.noPadding && "mb-2",
         props.className,
       )}
diff --git a/src/Components/Form/FormFields/Month.tsx b/src/Components/Form/FormFields/Month.tsx
index dc04ac913c1..c1075ff8fbf 100644
--- a/src/Components/Form/FormFields/Month.tsx
+++ b/src/Components/Form/FormFields/Month.tsx
@@ -60,7 +60,7 @@ const MonthFormField = (props: Props) => {
         onChange={(event) => setYear(parseInt(event.value))}
       />
       {props.suffix && (
-        <span className="text-gray-600">{props.suffix(field.value)}</span>
+        <span className="text-secondary-600">{props.suffix(field.value)}</span>
       )}
     </FormField>
   );
diff --git a/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx b/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
index e4cf79c2080..e595e1d697a 100644
--- a/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
+++ b/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
@@ -44,7 +44,7 @@ export default function NumericWithUnitsFormField(props: Props) {
           <select
             id={field.name + "_units"}
             name={field.name + "_units"}
-            className="cui-input-base h-full border-0 bg-transparent pl-2 pr-7 text-gray-700 focus:ring-2 focus:ring-inset"
+            className="cui-input-base h-full border-0 bg-transparent pl-2 pr-7 text-secondary-700 focus:ring-2 focus:ring-inset"
             value={unitValue}
             onChange={(e) =>
               field.handleChange(numValue + " " + e.target.value)
diff --git a/src/Components/Form/FormFields/OtpFormField.tsx b/src/Components/Form/FormFields/OtpFormField.tsx
index 33b2754e17b..4446a7032f1 100644
--- a/src/Components/Form/FormFields/OtpFormField.tsx
+++ b/src/Components/Form/FormFields/OtpFormField.tsx
@@ -19,7 +19,7 @@ const OtpFormField = ({ length = 6, ...props }: TextAreaFormFieldProps) => {
           <input
             key={i}
             ref={(element) => (inputs.current[i] = element)}
-            className="form-control m-2 h-10 w-10 rounded border border-gray-600 text-center"
+            className="form-control m-2 h-10 w-10 rounded border border-secondary-600 text-center"
             maxLength={1}
             value={props.value[i]}
             onChange={(e) => {
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index b2034507475..58ad7acd90b 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -7,6 +7,7 @@ import {
   formatPhoneNumber as formatPhoneNumberUtil,
   getCountryCode,
   CountryData,
+  humanizeStrings,
 } from "../../../Utils/utils";
 import phoneCodesJson from "../../../Common/static/countryPhoneAndFlags.json";
 import {
@@ -14,8 +15,9 @@ import {
   PhoneNumberValidator,
   PhoneNumberType,
 } from "../FieldValidators";
-import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Popover } from "@headlessui/react";
+import { useTranslation } from "react-i18next";
 
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
@@ -154,29 +156,22 @@ export default function PhoneNumberFormField(props: Props) {
   );
 }
 
-const phoneNumberTypeIcons: Record<PhoneNumberType, IconName> = {
-  international_mobile: "l-globe",
-  indian_mobile: "l-mobile-android",
-  mobile: "l-mobile-android",
-  landline: "l-phone",
-  support: "l-headset",
-};
+const PhoneNumberTypesHelp = (props: { types: PhoneNumberType[] }) => {
+  const { t } = useTranslation();
 
-const PhoneNumberTypesHelp = ({ types }: { types: PhoneNumberType[] }) => (
-  <div className="flex gap-1">
-    {types.map((type) => (
-      <span key={type} className="tooltip mt-1">
-        <CareIcon
-          icon={phoneNumberTypeIcons[type]}
-          className="text-lg text-gray-500"
-        />
-        <span className="tooltip-text tooltip-bottom -translate-x-1/2 translate-y-1 text-xs capitalize">
-          {type.replace("_", " ")}
-        </span>
-      </span>
-    ))}
-  </div>
-);
+  return (
+    <div className="tooltip mt-1 pr-1 text-secondary-500">
+      <CareIcon icon="l-question-circle" className="text-lg" />
+      <div className="tooltip-text tooltip-bottom w-64 -translate-x-full whitespace-pre-wrap text-sm">
+        Supports only{" "}
+        <span className="font-bold lowercase">
+          {humanizeStrings(props.types.map((item) => t(item)))}
+        </span>{" "}
+        numbers.
+      </div>
+    </div>
+  );
+};
 
 const conditionPhoneCode = (code: string) => {
   code = code.split(" ")[0];
@@ -209,7 +204,7 @@ const CountryCodesList = ({
   const [searchValue, setSearchValue] = useState<string>("");
 
   return (
-    <div className="absolute z-10 w-full rounded-md border border-gray-300 bg-white shadow-lg transition-all duration-300">
+    <div className="absolute z-10 w-full rounded-md border border-secondary-300 bg-white shadow-lg transition-all duration-300">
       <div className="relative m-2">
         <CareIcon
           icon="l-search"
@@ -218,7 +213,7 @@ const CountryCodesList = ({
         <input
           type="search"
           placeholder="Search"
-          className="w-full border-b border-gray-400 p-2 pl-10 focus:outline-none focus:ring-0"
+          className="w-full border-b border-secondary-400 p-2 pl-10 focus:outline-none focus:ring-0"
           value={searchValue}
           onChange={(e) => setSearchValue(e.target.value)}
         />
@@ -248,7 +243,7 @@ const CountryCodesList = ({
             >
               <span>{flag}</span>
               <span>{name}</span>
-              <span className="text-gray-600">
+              <span className="text-secondary-600">
                 {" "}
                 ({conditionPhoneCode(code)})
               </span>
@@ -264,7 +259,7 @@ const CountryCodesList = ({
         >
           <span>📞</span>
           <span>Support</span>
-          <span className="text-gray-600"> (1800)</span>
+          <span className="text-secondary-600"> (1800)</span>
         </li>
         <li
           key={"other"}
@@ -276,7 +271,7 @@ const CountryCodesList = ({
         >
           <span>🌍</span>
           <span>Other</span>
-          <span className="text-gray-600"> (+)</span>
+          <span className="text-secondary-600"> (+)</span>
         </li>
       </ul>
     </div>
diff --git a/src/Components/Form/FormFields/RadioFormField.tsx b/src/Components/Form/FormFields/RadioFormField.tsx
index e7f79e14849..e3c97640f34 100644
--- a/src/Components/Form/FormFields/RadioFormField.tsx
+++ b/src/Components/Form/FormFields/RadioFormField.tsx
@@ -17,7 +17,7 @@ const RadioFormField = <T,>(props: Props<T>) => {
         {props.unselectLabel && (
           <div className="flex items-center gap-2">
             <input
-              className="h-4 w-4 rounded-full border-gray-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
+              className="h-4 w-4 rounded-full border-secondary-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
               type="radio"
               id="none"
               name={props.name}
@@ -34,7 +34,7 @@ const RadioFormField = <T,>(props: Props<T>) => {
           return (
             <div className="flex items-center gap-2">
               <input
-                className="h-4 w-4 rounded-full border-gray-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
+                className="h-4 w-4 rounded-full border-secondary-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
                 type="radio"
                 id={optionId}
                 name={props.name}
diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index 419664f98e9..9ab2f4d55c7 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -49,7 +49,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
       disabled: props.optionDisabled?.(option),
       isSelected: props.value?.includes(value as any) ?? false,
       displayChip: (
-        <div className="rounded-full border border-secondary-400 bg-secondary-100 px-2 text-xs text-gray-900">
+        <div className="rounded-full border border-secondary-400 bg-secondary-100 px-2 text-xs text-secondary-900">
           {selectedLabel}
         </div>
       ),
@@ -100,7 +100,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                 >
                   <div className="relative z-0 flex w-full items-center">
                     <div className="relative flex flex-1 items-center pr-4 focus:z-10">
-                      <p className="ml-2.5 text-sm font-normal text-gray-600">
+                      <p className="ml-2.5 text-sm font-normal text-secondary-600">
                         <Placeholder />
                       </p>
 
@@ -126,7 +126,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                     </div>
                     <CareIcon
                       icon="l-angle-down"
-                      className="-mb-0.5 text-lg text-gray-900"
+                      className="-mb-0.5 text-lg text-secondary-900"
                     />
                   </div>
                 </Listbox.Button>
@@ -158,10 +158,10 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                               className={classNames(
                                 "text-sm font-normal",
                                 option.disabled
-                                  ? "text-gray-700"
+                                  ? "text-secondary-500"
                                   : active
                                     ? "text-primary-200"
-                                    : "text-gray-700",
+                                    : "text-secondary-500",
                               )}
                             >
                               {option.description}
@@ -193,7 +193,7 @@ export const MultiSelectOptionChip = ({
   onRemove,
 }: MultiSelectOptionChipProps) => {
   return (
-    <span className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-700">
+    <span className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-700">
       <p className="py-1">{label}</p>
       {onRemove && (
         <p
@@ -225,8 +225,8 @@ export const dropdownOptionClassNames = ({
     "group/option relative w-full cursor-default select-none p-4 text-sm transition-colors duration-75 ease-in-out",
     !disabled && active && "bg-primary-500 text-white",
     !disabled && !active && selected && "text-primary-500",
-    !disabled && !active && !selected && "text-gray-900",
-    disabled && "cursor-not-allowed text-gray-800",
+    !disabled && !active && !selected && "text-secondary-900",
+    disabled && "cursor-not-allowed text-secondary-600",
     selected ? "font-semibold" : "font-normal",
   );
 };
diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index 2d146837ebf..fce9fbd517d 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -52,8 +52,8 @@ const SearchInput = ({
       "⌘K"
     ) : (
       <div className="flex gap-1 font-medium">
-        <span className="text-gray-400">Ctrl</span>
-        <span className="text-gray-500">K</span>
+        <span className="text-secondary-400">Ctrl</span>
+        <span className="text-secondary-500">K</span>
       </div>
     ));
 
@@ -73,14 +73,14 @@ const SearchInput = ({
       className={className}
       leading={
         props.leading || (
-          <CareIcon icon="l-search-alt" className="text-gray-600" />
+          <CareIcon icon="l-search-alt" className="text-secondary-600" />
         )
       }
       trailing={
         props.trailing ||
         (!props.secondary && (
           <div className="absolute inset-y-0 right-0 hidden py-1.5 pr-1.5 md:flex">
-            <kbd className="inline-flex items-center rounded border border-gray-200 bg-white px-2 font-sans text-sm font-medium text-gray-500 focus:opacity-0">
+            <kbd className="inline-flex items-center rounded border border-secondary-200 bg-white px-2 font-sans text-sm font-medium text-secondary-500 focus:opacity-0">
               {shortcutKeyIcon}
             </kbd>
           </div>
@@ -88,7 +88,7 @@ const SearchInput = ({
       }
       trailingFocused={
         <div className="absolute inset-y-0 right-0 hidden gap-1 py-1.5 pr-1.5 md:flex">
-          <kbd className="inline-flex items-center rounded border border-gray-200 bg-white px-2 font-sans text-sm font-medium text-gray-500">
+          <kbd className="inline-flex items-center rounded border border-secondary-200 bg-white px-2 font-sans text-sm font-medium text-secondary-500">
             Esc
           </kbd>
         </div>
diff --git a/src/Components/Form/SelectMenuV2.tsx b/src/Components/Form/SelectMenuV2.tsx
index 4483c92fe4c..b3abedfbdd1 100644
--- a/src/Components/Form/SelectMenuV2.tsx
+++ b/src/Components/Form/SelectMenuV2.tsx
@@ -65,7 +65,9 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
     valueOptions?.length > 0 ? props.placeholder ?? "Select" : "No options";
   const defaultOption = {
     label: placeholder,
-    selectedLabel: <p className="font-normal text-gray-600">{placeholder}</p>,
+    selectedLabel: (
+      <p className="font-normal text-secondary-600">{placeholder}</p>
+    ),
     description: undefined,
     icon: undefined,
     value: undefined,
@@ -101,7 +103,7 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                 <div className="relative z-0 flex w-full items-center">
                   <div className="relative flex flex-1 items-center focus:z-10">
                     {props.showIconWhenSelected && value?.icon && (
-                      <div className="ml-2 text-sm text-gray-700">
+                      <div className="ml-2 text-sm text-secondary-700">
                         {value.icon}
                       </div>
                     )}
@@ -112,7 +114,7 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                   {showChevronIcon && (
                     <CareIcon
                       icon="l-angle-down"
-                      className="-mb-0.5 text-lg text-gray-900"
+                      className="-mb-0.5 text-lg text-secondary-900"
                     />
                   )}
                 </div>
@@ -151,10 +153,10 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                                 className={classNames(
                                   "text-sm font-normal",
                                   option.disabled
-                                    ? "text-gray-700"
+                                    ? "text-secondary-700"
                                     : active
                                       ? "text-primary-200"
-                                      : "text-gray-700",
+                                      : "text-secondary-700",
                                 )}
                               >
                                 {option.description}
diff --git a/src/Components/HCX/ClaimDetailCard.tsx b/src/Components/HCX/ClaimDetailCard.tsx
index cc1947396c4..ee6671cc90a 100644
--- a/src/Components/HCX/ClaimDetailCard.tsx
+++ b/src/Components/HCX/ClaimDetailCard.tsx
@@ -17,11 +17,11 @@ export default function ClaimDetailCard({ claim }: IProps) {
     <div className="px-6 lg:px-8">
       <div className="sm:flex sm:items-center">
         <div className="sm:flex-auto">
-          <h1 className="text-xl font-semibold text-gray-700">
+          <h1 className="text-xl font-semibold text-secondary-700">
             #{claim.id?.slice(0, 5)}
           </h1>
 
-          <p className="mt-2 text-sm text-gray-700">
+          <p className="mt-2 text-sm text-secondary-700">
             Created on{" "}
             <time dateTime="2022-08-01">
               {formatDateTime(claim.created_date ?? "")}
@@ -49,37 +49,37 @@ export default function ClaimDetailCard({ claim }: IProps) {
       </div>
       <div className="mt-6 grid grid-cols-2 gap-4">
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.policy_id || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Policy ID</p>
+          <p className="text-sm text-secondary-500">Policy ID</p>
         </div>
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.subscriber_id || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Subscriber ID</p>
+          <p className="text-sm text-secondary-500">Subscriber ID</p>
         </div>
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.insurer_id || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Insurer ID</p>
+          <p className="text-sm text-secondary-500">Insurer ID</p>
         </div>
         <div className="text-center">
-          <h2 className="text-lg font-bold text-gray-800">
+          <h2 className="text-lg font-bold text-secondary-800">
             {claim.policy_object?.insurer_name || "NA"}
           </h2>
-          <p className="text-sm text-gray-500">Insurer Name</p>
+          <p className="text-sm text-secondary-500">Insurer Name</p>
         </div>
       </div>
       <div className="-mx-6 mt-8 flow-root sm:mx-0">
-        <table className="min-w-full divide-y divide-gray-300">
+        <table className="min-w-full divide-y divide-secondary-300">
           <thead>
             <tr>
               <th
                 scope="col"
-                className="py-3.5 pl-6 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
+                className="py-3.5 pl-6 pr-3 text-left text-sm font-semibold text-secondary-900 sm:pl-0"
               >
                 Items
               </th>
@@ -87,7 +87,7 @@ export default function ClaimDetailCard({ claim }: IProps) {
               <th></th>
               <th
                 scope="col"
-                className="py-3.5 pl-3 pr-6 text-right text-sm font-semibold text-gray-900 sm:pr-0"
+                className="py-3.5 pl-3 pr-6 text-right text-sm font-semibold text-secondary-900 sm:pr-0"
               >
                 Price
               </th>
@@ -95,14 +95,16 @@ export default function ClaimDetailCard({ claim }: IProps) {
           </thead>
           <tbody>
             {claim.items?.map((item) => (
-              <tr key={item.id} className="border-b border-gray-200">
+              <tr key={item.id} className="border-b border-secondary-200">
                 <td className="py-4 pl-6 pr-3 text-sm sm:pl-0">
-                  <div className="font-medium text-gray-900">{item.name}</div>
-                  <div className="mt-0.5 text-gray-500">{item.id}</div>
+                  <div className="font-medium text-secondary-900">
+                    {item.name}
+                  </div>
+                  <div className="mt-0.5 text-secondary-500">{item.id}</div>
                 </td>
                 <td></td>
                 <td></td>
-                <td className="py-4 pl-3 pr-6 text-right text-sm text-gray-500 sm:pr-0">
+                <td className="py-4 pl-3 pr-6 text-right text-sm text-secondary-500 sm:pr-0">
                   {formatCurrency(item.price)}
                 </td>
               </tr>
@@ -113,17 +115,17 @@ export default function ClaimDetailCard({ claim }: IProps) {
               <th
                 scope="row"
                 colSpan={3}
-                className="hidden pl-6 pr-3 pt-6 text-right text-sm font-normal text-gray-500 sm:table-cell sm:pl-0"
+                className="hidden pl-6 pr-3 pt-6 text-right text-sm font-normal text-secondary-500 sm:table-cell sm:pl-0"
               >
                 Total Claim Amount
               </th>
               <th
                 scope="row"
-                className="pl-6 pr-3 pt-6 text-left text-sm font-normal text-gray-500 sm:hidden"
+                className="pl-6 pr-3 pt-6 text-left text-sm font-normal text-secondary-500 sm:hidden"
               >
                 Total Claim Amount
               </th>
-              <td className="pl-3 pr-6 pt-6 text-right text-sm text-gray-500 sm:pr-0">
+              <td className="pl-3 pr-6 pt-6 text-right text-sm text-secondary-500 sm:pr-0">
                 {claim.total_claim_amount &&
                   formatCurrency(claim.total_claim_amount)}
               </td>
@@ -133,17 +135,17 @@ export default function ClaimDetailCard({ claim }: IProps) {
               <th
                 scope="row"
                 colSpan={3}
-                className="hidden pl-6 pr-3 pt-4 text-right text-sm font-semibold text-gray-900 sm:table-cell sm:pl-0"
+                className="hidden pl-6 pr-3 pt-4 text-right text-sm font-semibold text-secondary-900 sm:table-cell sm:pl-0"
               >
                 Total Amount Approved
               </th>
               <th
                 scope="row"
-                className="pl-6 pr-3 pt-4 text-left text-sm font-semibold text-gray-900 sm:hidden"
+                className="pl-6 pr-3 pt-4 text-left text-sm font-semibold text-secondary-900 sm:hidden"
               >
                 Total Amount Approved
               </th>
-              <td className="pl-3 pr-6 pt-4 text-right text-sm font-semibold text-gray-900 sm:pr-0">
+              <td className="pl-3 pr-6 pt-4 text-right text-sm font-semibold text-secondary-900 sm:pr-0">
                 {claim.total_amount_approved
                   ? formatCurrency(claim.total_amount_approved)
                   : "NA"}
diff --git a/src/Components/HCX/ClaimsItemsBuilder.tsx b/src/Components/HCX/ClaimsItemsBuilder.tsx
index c65d7f84c5c..73ca2305030 100644
--- a/src/Components/HCX/ClaimsItemsBuilder.tsx
+++ b/src/Components/HCX/ClaimsItemsBuilder.tsx
@@ -55,7 +55,7 @@ export default function ClaimsItemsBuilder(props: Props) {
           return (
             <div
               key={index}
-              className="rounded-lg border-2 border-dashed border-gray-200 p-4"
+              className="rounded-lg border-2 border-dashed border-secondary-200 p-4"
             >
               <div className="flex items-center justify-between">
                 <FieldLabel className="my-auto !font-bold">
@@ -94,7 +94,7 @@ export default function ClaimsItemsBuilder(props: Props) {
                     <PMJAYProcedurePackageAutocomplete
                       required
                       className="flex-[7]"
-                      labelClassName="text-sm text-gray-700"
+                      labelClassName="text-sm text-secondary-700"
                       label="Procedure"
                       name="hbp"
                       value={obj}
diff --git a/src/Components/HCX/CreateClaimCard.tsx b/src/Components/HCX/CreateClaimCard.tsx
index 1066ae449ae..2ce866d261d 100644
--- a/src/Components/HCX/CreateClaimCard.tsx
+++ b/src/Components/HCX/CreateClaimCard.tsx
@@ -184,7 +184,7 @@ export default function CreateClaimCard({
         <span
           className={classNames(
             policy ? "opacity-0" : "opacity-100",
-            "text-gray-700 transition-opacity duration-300 ease-in-out",
+            "text-secondary-700 transition-opacity duration-300 ease-in-out",
           )}
         >
           Select a policy to add items
diff --git a/src/Components/HCX/InsuranceDetailsBuilder.tsx b/src/Components/HCX/InsuranceDetailsBuilder.tsx
index f75fa387a5f..1e401410ff0 100644
--- a/src/Components/HCX/InsuranceDetailsBuilder.tsx
+++ b/src/Components/HCX/InsuranceDetailsBuilder.tsx
@@ -57,7 +57,7 @@ export default function InsuranceDetailsBuilder(props: Props) {
     <FormField field={field}>
       <ul className="flex flex-col gap-3">
         {props.value?.length === 0 && (
-          <span className="py-16 text-center text-gray-500">
+          <span className="py-16 text-center text-secondary-500">
             No insurance details added
           </span>
         )}
@@ -100,7 +100,7 @@ const InsuranceDetailEditCard = ({
       : undefined;
 
   return (
-    <div className="rounded-lg border-2 border-dashed border-gray-200 p-4">
+    <div className="rounded-lg border-2 border-dashed border-secondary-200 p-4">
       <div className="flex items-center justify-between">
         <FieldLabel className="my-auto !font-bold">Policy</FieldLabel>
         <ButtonV2 variant="danger" type="button" ghost onClick={handleRemove}>
diff --git a/src/Components/Medicine/AdministerMedicine.tsx b/src/Components/Medicine/AdministerMedicine.tsx
index 51bd2cf2617..0fcf7864a8a 100644
--- a/src/Components/Medicine/AdministerMedicine.tsx
+++ b/src/Components/Medicine/AdministerMedicine.tsx
@@ -43,7 +43,7 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
       }
       title={t("administer_medicine")}
       description={
-        <div className="text-sm font-semibold leading-relaxed text-gray-600">
+        <div className="text-sm font-semibold leading-relaxed text-secondary-600">
           <CareIcon icon="l-history-alt" className="pr-1" /> Last administered
           <span className="whitespace-nowrap pl-2">
             <CareIcon icon="l-clock" />{" "}
diff --git a/src/Components/Medicine/CreatePrescriptionForm.tsx b/src/Components/Medicine/CreatePrescriptionForm.tsx
index 173f5163427..a75cd868318 100644
--- a/src/Components/Medicine/CreatePrescriptionForm.tsx
+++ b/src/Components/Medicine/CreatePrescriptionForm.tsx
@@ -190,7 +190,9 @@ export const PRESCRIPTION_ROUTES = [
   "INTRATHECAL",
   "TRANSDERMAL",
   "RECTAL",
+  "SUBLINGUAL",
 ] as const;
+
 export const PRESCRIPTION_FREQUENCIES = {
   STAT: {
     slots: 1,
diff --git a/src/Components/Medicine/ManagePrescriptions.tsx b/src/Components/Medicine/ManagePrescriptions.tsx
index f581f3e2121..fd335ce19fb 100644
--- a/src/Components/Medicine/ManagePrescriptions.tsx
+++ b/src/Components/Medicine/ManagePrescriptions.tsx
@@ -15,7 +15,7 @@ export default function ManagePrescriptions() {
         className="mx-auto flex w-full max-w-4xl flex-col gap-10 rounded bg-white p-6 transition-all sm:rounded-xl sm:p-12"
         id="medicine-preview"
       >
-        <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-gray-600">
+        <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-secondary-600">
           <div>
             <h3 className="mb-4 text-lg font-semibold">
               {t("prescription_medications")}
diff --git a/src/Components/Medicine/MedibaseAutocompleteFormField.tsx b/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
index 71a01b23298..55361d20258 100644
--- a/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
+++ b/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
@@ -91,10 +91,10 @@ const OptionDescription = ({ medicine }: { medicine: MedibaseMedicine }) => {
 const OptionChip = (props: { name?: string; value: string }) => {
   return (
     <div className="mt-1 flex h-fit max-w-fit gap-1 whitespace-nowrap rounded-full border border-secondary-400 bg-secondary-100 px-2 text-center text-xs uppercase sm:mt-0">
-      <span className="font-normal text-gray-800">
+      <span className="font-normal text-secondary-800">
         {props.name && props.name + ":"}
       </span>
-      <span className="font-medium text-gray-900">{props.value}</span>
+      <span className="font-medium text-secondary-900">{props.value}</span>
     </div>
   );
 };
diff --git a/src/Components/Medicine/MedicineAdministration.tsx b/src/Components/Medicine/MedicineAdministration.tsx
index 650f720caa0..7a8fb663704 100644
--- a/src/Components/Medicine/MedicineAdministration.tsx
+++ b/src/Components/Medicine/MedicineAdministration.tsx
@@ -111,7 +111,7 @@ export default function MedicineAdministration(props: Props) {
           readonly
           selected={shouldAdminister[index]}
         >
-          <div className="mt-4 flex w-full max-w-sm flex-col gap-2 border-t-2 border-dashed border-gray-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0">
+          <div className="mt-4 flex w-full max-w-sm flex-col gap-2 border-t-2 border-dashed border-secondary-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0">
             <CheckBoxFormField
               name="should_administer"
               label={t("select_for_administration")}
@@ -125,7 +125,7 @@ export default function MedicineAdministration(props: Props) {
               }
               errorClassName="hidden"
             />
-            <div className="text-sm font-semibold leading-relaxed text-gray-600">
+            <div className="text-sm font-semibold leading-relaxed text-secondary-600">
               <CareIcon icon="l-history-alt" className="pr-1" />{" "}
               {t("last_administered")}
               <span className="pl-1">
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
index 0949189d96d..81e92e32a58 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
@@ -47,7 +47,7 @@ export default function AdministrationEventCell({
           className="w-full md:max-w-4xl"
           show={showTimeline}
         >
-          <div className="mt-6 text-sm font-medium text-gray-700">
+          <div className="mt-6 text-sm font-medium text-secondary-700">
             Administrations on{" "}
             <span className="text-black">
               {formatDateTime(start, "DD/MM/YYYY")}
@@ -87,7 +87,9 @@ export default function AdministrationEventCell({
 
   // Check if cell belongs to after prescription.created_date
   if (dayjs(start).isAfter(prescription.created_date)) {
-    return <CareIcon icon="l-minus-circle" className="text-xl text-gray-400" />;
+    return (
+      <CareIcon icon="l-minus-circle" className="text-xl text-secondary-400" />
+    );
   }
 
   // Check if cell belongs to a discontinued prescription
@@ -105,7 +107,7 @@ export default function AdministrationEventCell({
             "text-xl",
             dayjs(prescription.discontinued_date).isBetween(start, end)
               ? "text-danger-700"
-              : "text-gray-400",
+              : "text-secondary-400",
           )}
         />
         <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs">
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
index a83fa38bd9c..b52f1ed85f5 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
@@ -4,7 +4,7 @@ export default function AdministrationEventSeperator({ date }: { date: Date }) {
   // Show date if it's 00:00
   if (date.getHours() === 0) {
     return (
-      <div className="mx-auto flex h-[58px] w-10 flex-col items-center justify-center bg-gray-50 text-center text-xs font-bold text-gray-600 transition-all duration-200 ease-in-out group-hover:bg-primary-500 group-hover:text-white">
+      <div className="mx-auto flex h-[58px] w-10 flex-col items-center justify-center bg-secondary-50 text-center text-xs font-bold text-secondary-600 transition-all duration-200 ease-in-out group-hover:bg-primary-500 group-hover:text-white">
         <span className="-rotate-90 uppercase duration-500 ease-in-out">
           <p> {formatDateTime(date, "DD/MM")}</p>
         </span>
@@ -13,7 +13,7 @@ export default function AdministrationEventSeperator({ date }: { date: Date }) {
   }
 
   return (
-    <div className="mx-auto flex h-[58px] flex-col items-center justify-center text-center text-xs font-bold text-gray-500 transition-all duration-200 ease-in-out">
+    <div className="mx-auto flex h-[58px] flex-col items-center justify-center text-center text-xs font-bold text-secondary-500 transition-all duration-200 ease-in-out">
       <span className="font-bold duration-500 ease-in-out">
         {/* <p>{formatDateTime(date, "HH")}</p> */}
       </span>
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
index 49a071b744b..4bfc59c47c0 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
@@ -24,9 +24,9 @@ export default function MedicineAdministrationTable({
   return (
     <div className="overflow-x-auto">
       <table className="w-full whitespace-nowrap">
-        <thead className="sticky top-0 z-10 bg-gray-50 text-xs font-medium text-black">
+        <thead className="sticky top-0 z-10 bg-secondary-50 text-xs font-medium text-black">
           <tr>
-            <th className="sticky left-0 z-20 bg-gray-50 py-3 pl-4 text-left">
+            <th className="sticky left-0 z-20 bg-secondary-50 py-3 pl-4 text-left">
               <div className="flex justify-between gap-2">
                 <span className="text-sm">{t("medicine")}</span>
                 <span className="hidden px-2 text-center text-xs leading-none lg:block">
@@ -63,8 +63,8 @@ export default function MedicineAdministrationTable({
                   className={classNames(
                     "leading-none",
                     start.getHours() === 0
-                      ? "text-base font-bold text-gray-800"
-                      : "text-sm font-semibold text-gray-700",
+                      ? "text-base font-bold text-secondary-800"
+                      : "text-sm font-semibold text-secondary-700",
                   )}
                 >
                   {formatDateTime(
@@ -96,7 +96,7 @@ export default function MedicineAdministrationTable({
           </tr>
         </thead>
 
-        <tbody className="divide-y divide-gray-200">
+        <tbody className="divide-y divide-secondary-200">
           {prescriptions.map((obj, index) => (
             <MedicineAdministrationTableRow
               key={obj.id}
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
index 13f5191f429..a6bd9d3a983 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
@@ -173,40 +173,47 @@ export default function MedicineAdministrationTableRow({
       <tr
         className={classNames(
           "group transition-all duration-200 ease-in-out",
-          loading ? "bg-gray-300" : "bg-white hover:bg-primary-100",
+          loading ? "bg-secondary-300" : "bg-white hover:bg-primary-100",
         )}
         id={props.id}
       >
         <td
-          className="bg-gray-white sticky left-0 z-10 cursor-pointer bg-white py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
+          className="bg-secondary-white sticky left-0 z-10 cursor-pointer bg-white py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
           onClick={() => setShowDetails(true)}
         >
           <div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
-            <div className="flex items-center gap-2">
-              <span
-                className={classNames(
-                  "text-sm font-semibold",
-                  prescription.discontinued ? "text-gray-700" : "text-gray-900",
-                )}
-              >
-                {prescription.medicine_object?.name ??
-                  prescription.medicine_old}
-              </span>
-
-              {prescription.discontinued && (
-                <span className="hidden rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700 lg:block">
-                  {t("discontinued")}
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                <span
+                  className={classNames(
+                    "text-sm font-semibold uppercase",
+                    prescription.discontinued
+                      ? "text-secondary-700"
+                      : "text-secondary-900",
+                  )}
+                >
+                  {prescription.medicine_object?.name ??
+                    prescription.medicine_old}
                 </span>
-              )}
 
-              {prescription.route && (
-                <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
-                  {t(prescription.route)}
-                </span>
-              )}
+                {prescription.discontinued && (
+                  <span className="hidden rounded-full border border-secondary-500 bg-secondary-200 px-1.5 text-xs font-medium text-secondary-700 lg:block">
+                    {t("discontinued")}
+                  </span>
+                )}
+
+                {prescription.route && (
+                  <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
+                    {t(prescription.route)}
+                  </span>
+                )}
+              </div>
+              <span className="text-xs font-medium capitalize text-secondary-700">
+                {prescription.medicine_object?.generic}
+              </span>
             </div>
 
-            <div className="flex gap-1 text-xs font-semibold text-gray-900 lg:flex-col lg:px-2 lg:text-center">
+            <div className="flex gap-1 text-xs font-semibold text-secondary-900 lg:flex-col lg:px-2 lg:text-center">
               {prescription.dosage_type !== "TITRATED" ? (
                 <p>{prescription.base_dosage}</p>
               ) : (
@@ -237,7 +244,7 @@ export default function MedicineAdministrationTableRow({
               {!data?.results ? (
                 <CareIcon
                   icon="l-spinner"
-                  className="animate-spin text-lg text-gray-500"
+                  className="animate-spin text-lg text-secondary-500"
                 />
               ) : (
                 <AdministrationEventCell
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
index 29431fefdf9..b7cfce38757 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
@@ -152,7 +152,7 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
           <ButtonV2
             id="discontinued-medicine"
             variant="secondary"
-            className="group sticky left-0 w-full rounded-b-lg rounded-t-none bg-gray-100"
+            className="group sticky left-0 w-full rounded-b-lg rounded-t-none bg-secondary-100"
             disabled={loading || discontinuedPrescriptions.loading}
             onClick={() => setShowDiscontinued(!showDiscontinued)}
           >
@@ -178,7 +178,7 @@ export default MedicineAdministrationSheet;
 
 const NoPrescriptions = ({ prn }: { prn: boolean }) => {
   return (
-    <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
+    <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-secondary-500">
       <CareIcon icon="l-tablets" className="text-5xl" />
       <h3 className="text-lg font-medium">
         {prn
diff --git a/src/Components/Medicine/MedicinePrescriptionSummary.tsx b/src/Components/Medicine/MedicinePrescriptionSummary.tsx
index b77acc090c4..7e0ea3ee244 100644
--- a/src/Components/Medicine/MedicinePrescriptionSummary.tsx
+++ b/src/Components/Medicine/MedicinePrescriptionSummary.tsx
@@ -6,6 +6,7 @@ import { lazy } from "react";
 import Timeline, { TimelineNode } from "../../CAREUI/display/Timeline";
 import { MedibaseMedicine, Prescription } from "../Medicine/models";
 import { useTranslation } from "react-i18next";
+import { humanizeStrings } from "../../Utils/utils";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -57,13 +58,13 @@ export const MedicinePrescriptionSummary = ({
 
   return (
     <div className="pt-6">
-      <p className="text-xl font-bold text-gray-700">{t("summary")}</p>
+      <p className="text-xl font-bold text-secondary-700">{t("summary")}</p>
       <div className="flex flex-col gap-2 pt-4">
         {medicinesList && medicinesList.length > 0 ? (
           medicinesList?.map((med: MedibaseMedicine) => (
             <div
               key={med.id}
-              className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-gray-200"
+              className="flex cursor-pointer items-center justify-between rounded-lg border bg-white p-4 shadow hover:bg-secondary-200"
             >
               <div>{med.name}</div>
               <button
@@ -82,7 +83,7 @@ export const MedicinePrescriptionSummary = ({
           ))
         ) : (
           <div className="rounded-lg border shadow">
-            <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
+            <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-secondary-500">
               <h3 className="text-lg font-medium">{"No Medicine Summary"}</h3>
             </div>
           </div>
@@ -310,7 +311,7 @@ export default function ConsultationMedicineLogs({
 
       // If there are changes, add them to the changes array
       if (changesForPrescription.length > 0 && !prevPrescription.discontinued) {
-        const message = `Changes: ${changesForPrescription.join(", ")}`;
+        const message = `Changes: ${humanizeStrings(changesForPrescription)}`;
         changes.push({
           prescriptionId: currentPrescription.id,
           changeMessage: message,
diff --git a/src/Components/Medicine/PrescriptionBuilder.tsx b/src/Components/Medicine/PrescriptionBuilder.tsx
index b480df07b23..a65f9dd9a62 100644
--- a/src/Components/Medicine/PrescriptionBuilder.tsx
+++ b/src/Components/Medicine/PrescriptionBuilder.tsx
@@ -98,7 +98,7 @@ export default function PrescriptionBuilder({
           type="button"
           onClick={() => setShowCreate(true)}
           variant="secondary"
-          className="mt-4 w-full bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
+          className="mt-4 w-full bg-secondary-200 text-secondary-700 hover:bg-secondary-300 hover:text-secondary-900 focus:bg-secondary-100 focus:text-secondary-900"
           disabled={disabled}
         >
           <div
diff --git a/src/Components/Medicine/PrescriptionDetailCard.tsx b/src/Components/Medicine/PrescriptionDetailCard.tsx
index b28b6504167..0bc75d66a72 100644
--- a/src/Components/Medicine/PrescriptionDetailCard.tsx
+++ b/src/Components/Medicine/PrescriptionDetailCard.tsx
@@ -30,15 +30,17 @@ export default function PrescriptionDetailCard({
     collapsible && prescription.discontinued,
   );
 
+  const medicine = prescription.medicine_object;
+
   return (
     <div
       className={classNames(
         "flex flex-col rounded border-2 p-3 transition-all duration-200 ease-in-out md:flex-row",
         props.selected
           ? "border-primary-500"
-          : "border-spacing-2 border-dashed border-gray-500",
-        prescription.discontinued && "bg-gray-200 opacity-80",
-        collapsible && "cursor-pointer hover:border-gray-900",
+          : "border-spacing-2 border-dashed border-secondary-500",
+        prescription.discontinued && "bg-secondary-200 opacity-80",
+        collapsible && "cursor-pointer hover:border-secondary-900",
       )}
     >
       <div
@@ -55,12 +57,11 @@ export default function PrescriptionDetailCard({
               <h3
                 className={classNames(
                   "text-lg font-bold transition-all duration-200 ease-in-out",
-                  props.selected ? "text-black" : "text-gray-700",
+                  props.selected ? "text-black" : "text-secondary-700",
                 )}
               >
                 {isCollapsed ? (
-                  prescription.medicine_object?.name ??
-                  prescription.medicine_old
+                  medicine?.name ?? prescription.medicine_old
                 ) : (
                   <>
                     {prescription.prescription_type === "DISCHARGE" &&
@@ -75,7 +76,7 @@ export default function PrescriptionDetailCard({
                 )}
               </h3>
               {prescription.discontinued && (
-                <span className="rounded-full bg-gray-700 px-2 py-1 text-xs font-semibold uppercase text-white">
+                <span className="rounded-full bg-secondary-700 px-2 py-1 text-xs font-semibold uppercase text-white">
                   {t("discontinued")}
                 </span>
               )}
@@ -126,47 +127,54 @@ export default function PrescriptionDetailCard({
         </div>
         {!isCollapsed && (
           <div className="mt-4 grid grid-cols-10 items-center gap-2">
-            <Detail
-              className={
-                prescription.dosage_type === "TITRATED"
-                  ? "col-span-10"
-                  : "col-span-10 md:col-span-4"
-              }
-              label={t("medicine")}
-            >
-              {prescription.medicine_object?.name ?? prescription.medicine_old}
-            </Detail>
-            <Detail
-              className="col-span-10 break-all sm:col-span-4"
-              label={t("route")}
-            >
-              {prescription.route &&
-                t("PRESCRIPTION_ROUTE_" + prescription.route)}
+            <Detail className="col-span-10">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-3">
+                  <span className="font-semibold uppercase">
+                    {medicine?.name ?? prescription.medicine_old}
+                  </span>
+                </div>
+                {medicine?.type === "brand" && (
+                  <span className="text-xs text-secondary-600">
+                    Generic:{" "}
+                    <span className="capitalize text-secondary-800">
+                      {medicine.generic}
+                    </span>
+                    ; Brand:{" "}
+                    <span className="capitalize text-secondary-800">
+                      {medicine.company}
+                    </span>
+                  </span>
+                )}
+              </div>
             </Detail>
+
             {prescription.dosage_type === "TITRATED" ? (
               <>
-                <Detail
-                  className="col-span-5 sm:col-span-3"
-                  label={t("start_dosage")}
-                >
+                <Detail className="col-span-5" label={t("start_dosage")}>
                   {prescription.base_dosage}
                 </Detail>
-                <Detail
-                  className="col-span-5 sm:col-span-3"
-                  label={t("target_dosage")}
-                >
+                <Detail className="col-span-5" label={t("target_dosage")}>
                   {prescription.target_dosage}
                 </Detail>
               </>
             ) : (
               <Detail
-                className="col-span-10 sm:col-span-6 md:col-span-2"
+                className="col-span-10 sm:col-span-6 md:col-span-4"
                 label={t("dosage")}
               >
                 {prescription.base_dosage}
               </Detail>
             )}
 
+            <Detail
+              className="col-span-10 break-all sm:col-span-6"
+              label={t("route")}
+            >
+              {prescription.route &&
+                t("PRESCRIPTION_ROUTE_" + prescription.route)}
+            </Detail>
+
             {prescription.dosage_type === "PRN" ? (
               <>
                 <Detail
@@ -232,7 +240,7 @@ export default function PrescriptionDetailCard({
             )}
           </div>
         )}
-        <div className="flex flex-col gap-1 text-xs text-gray-600 md:mt-3 md:flex-row md:items-center">
+        <div className="flex flex-col gap-1 text-xs text-secondary-600 md:mt-3 md:flex-row md:items-center">
           <span className="flex gap-1 font-medium">
             Prescribed
             <RecordMeta
@@ -257,18 +265,22 @@ export default function PrescriptionDetailCard({
 
 const Detail = (props: {
   className?: string;
-  label: string;
+  label?: string;
   children?: React.ReactNode;
 }) => {
   const { t } = useTranslation();
   return (
     <div className={classNames("flex flex-col gap-1", props.className)}>
-      <label className="text-sm font-medium text-gray-600">{props.label}</label>
+      {props.label && (
+        <label className="text-sm font-medium text-secondary-600">
+          {props.label}
+        </label>
+      )}
       <div className="cui-input-base w-full">
         {props.children ? (
           <span className="font-medium">{props.children}</span>
         ) : (
-          <span className="whitespace-nowrap text-xs font-medium text-gray-500">
+          <span className="whitespace-nowrap text-xs font-medium text-secondary-500">
             {t("not_specified")}
           </span>
         )}
diff --git a/src/Components/Medicine/PrescriptionsTable.tsx b/src/Components/Medicine/PrescriptionsTable.tsx
index f842ccc654b..8feaa0b151f 100644
--- a/src/Components/Medicine/PrescriptionsTable.tsx
+++ b/src/Components/Medicine/PrescriptionsTable.tsx
@@ -69,11 +69,11 @@ export default function PrescriptionsTable({
         </DialogModal>
       )}
       <div className="mb-2 flex flex-wrap items-center justify-between">
-        <div className="flex items-center font-semibold leading-relaxed text-gray-900">
+        <div className="flex items-center font-semibold leading-relaxed text-secondary-900">
           <span className="mr-3 text-lg">
             {is_prn ? "PRN Prescriptions" : "Prescriptions"}
           </span>
-          <div className="text-gray-600">
+          <div className="text-secondary-600">
             <CareIcon icon="l-history-alt" className="pr-2" />
             <span className="text-xs">
               {lastModified && formatDateTime(lastModified)}
@@ -83,7 +83,7 @@ export default function PrescriptionsTable({
       </div>
       <div className="flex flex-col">
         <div className="-my-2 overflow-x-auto py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-          <div className="inline-block min-w-full overflow-hidden border-b border-gray-200 align-middle shadow sm:rounded-lg">
+          <div className="inline-block min-w-full overflow-hidden border-b border-secondary-200 align-middle shadow sm:rounded-lg">
             <ResponsiveMedicineTable
               onClick={setDetailedViewFor}
               maxWidthColumn={0}
@@ -115,7 +115,7 @@ export default function PrescriptionsTable({
               fieldsToDisplay={[2, 3]}
             />
             {data?.results.length === 0 && (
-              <div className="text-semibold flex items-center justify-center py-2 text-gray-600">
+              <div className="text-semibold flex items-center justify-center py-2 text-secondary-600">
                 {t("no_data_found")}
               </div>
             )}
diff --git a/src/Components/Medicine/ResponsiveMedicineTables.tsx b/src/Components/Medicine/ResponsiveMedicineTables.tsx
index 74623365a1c..c3b311a68e4 100644
--- a/src/Components/Medicine/ResponsiveMedicineTables.tsx
+++ b/src/Components/Medicine/ResponsiveMedicineTables.tsx
@@ -37,13 +37,13 @@ export default function ResponsiveMedicineTable(props: {
             <tr>
               {props.theads.map((item) => {
                 return (
-                  <th className="whitespace-nowrap border-b border-gray-200 bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-800">
+                  <th className="whitespace-nowrap border-b border-secondary-200 bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-800">
                     {item}
                   </th>
                 );
               })}
               {props.actions && (
-                <th className="border-b border-gray-200 bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-800">
+                <th className="border-b border-secondary-200 bg-secondary-50 px-6 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-secondary-800">
                   {props.actionLabel || ""}
                 </th>
               )}
@@ -54,7 +54,7 @@ export default function ResponsiveMedicineTable(props: {
               <tr
                 className={classNames(
                   "bg-white",
-                  props.onClick && "cursor-pointer hover:bg-gray-200",
+                  props.onClick && "cursor-pointer hover:bg-secondary-200",
                 )}
                 key={index}
                 onClick={() => props.onClick && props.onClick(med)}
@@ -65,14 +65,14 @@ export default function ResponsiveMedicineTable(props: {
                     idx === props.maxWidthColumn
                   ) {
                     return (
-                      <td className="w-full px-6 py-4 text-sm font-medium leading-5 text-gray-900">
+                      <td className="w-full px-6 py-4 text-sm font-medium leading-5 text-secondary-900">
                         {med[key]}
                       </td>
                     );
                   }
 
                   return (
-                    <td className="px-6 py-4 text-sm leading-5 text-gray-900">
+                    <td className="px-6 py-4 text-sm leading-5 text-secondary-900">
                       {med[key]}
                     </td>
                   );
@@ -110,11 +110,11 @@ export default function ResponsiveMedicineTable(props: {
               className={
                 props.list.length - 1 === index
                   ? "bg-white p-5 "
-                  : "border-b border-b-gray-400 bg-white p-5"
+                  : "border-b border-b-secondary-400 bg-white p-5"
               }
               key={index}
             >
-              <div className="mt-3 flex w-full flex-col border-t border-t-gray-400">
+              <div className="mt-3 flex w-full flex-col border-t border-t-secondary-400">
                 <div className="mt-3 grid w-full grid-cols-2 gap-3">
                   {props.objectKeys.map((key, i) => {
                     if (i !== 0 && i !== props.objectKeys.length - 1)
diff --git a/src/Components/Medicine/models.ts b/src/Components/Medicine/models.ts
index 53fd39d90f8..bb596e88b3e 100644
--- a/src/Components/Medicine/models.ts
+++ b/src/Components/Medicine/models.ts
@@ -8,6 +8,8 @@ export const DOSAGE_UNITS = [
   "drop(s)",
   "ampule(s)",
   "tsp",
+  "mcg",
+  "unit(s)",
 ] as const;
 
 export type DosageValue = `${number} ${(typeof DOSAGE_UNITS)[number]}`;
diff --git a/src/Components/Notifications/NoticeBoard.tsx b/src/Components/Notifications/NoticeBoard.tsx
index 7835f8576b7..db285eb9d6a 100644
--- a/src/Components/Notifications/NoticeBoard.tsx
+++ b/src/Components/Notifications/NoticeBoard.tsx
@@ -24,13 +24,13 @@ export const NoticeBoard = () => {
           >
             <div className="px-6 py-4">
               <div className="text-justify text-lg">{item.message}</div>
-              <div className="text-md my-2 text-gray-700">
+              <div className="text-md my-2 text-secondary-700">
                 {`${item.caused_by.first_name} ${item.caused_by.last_name}`} -{" "}
                 <span className="font-bold text-primary-700">
                   {item.caused_by.user_type}
                 </span>
               </div>
-              <div className="text-xs text-gray-900">
+              <div className="text-xs text-secondary-900">
                 {t("on")}: {formatDateTime(item.created_date)}
               </div>
             </div>
@@ -42,8 +42,8 @@ export const NoticeBoard = () => {
     notices = (
       <div className=" m-auto flex max-w-xs items-center ">
         <div className="my-36">
-          <CareIcon icon="l-bell-slash" className="h-auto text-gray-500" />
-          <div className=" m-auto mt-6 text-2xl text-gray-500">
+          <CareIcon icon="l-bell-slash" className="h-auto text-secondary-500" />
+          <div className=" m-auto mt-6 text-2xl text-secondary-500">
             No Notice Available
           </div>
         </div>
diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index c9e6720e6ad..2de3ae7922c 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -95,8 +95,8 @@ const NotificationTile = ({
         setShowNotifications(false);
       }}
       className={classNames(
-        "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg lg:px-8",
-        result.read_at && "text-gray-500",
+        "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg lg:px-8",
+        result.read_at && "text-secondary-500",
       )}
     >
       <div className="flex justify-between">
@@ -416,7 +416,7 @@ export default function NotificationsList({
   } else if (data && data.length === 0) {
     manageResults = (
       <div className="flex justify-center px-4 pt-3 lg:px-8">
-        <h5 className="text-xl font-bold text-gray-600">
+        <h5 className="text-xl font-bold text-secondary-600">
           {t("no_results_found")}
         </h5>
       </div>
diff --git a/src/Components/Patient/DailyRounds.tsx b/src/Components/Patient/DailyRounds.tsx
index 2bb544327be..89367c6eb37 100644
--- a/src/Components/Patient/DailyRounds.tsx
+++ b/src/Components/Patient/DailyRounds.tsx
@@ -343,11 +343,7 @@ export const DailyRounds = (props: any) => {
           Notification.Success({
             msg: `${t(obj.rounds_type as string)} log updated successfully`,
           });
-          if (
-            ["NORMAL", "TELEMEDICINE", "DOCTORS_LOG"].includes(
-              state.form.rounds_type,
-            )
-          ) {
+          if (["NORMAL", "TELEMEDICINE"].includes(state.form.rounds_type)) {
             navigate(
               `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`,
             );
@@ -369,11 +365,7 @@ export const DailyRounds = (props: any) => {
             msg: `${t(state.form.rounds_type)} log created successfully`,
           });
 
-          if (
-            ["NORMAL", "TELEMEDICINE", "DOCTORS_LOG"].includes(
-              state.form.rounds_type,
-            )
-          ) {
+          if (["NORMAL", "TELEMEDICINE"].includes(state.form.rounds_type)) {
             navigate(
               `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`,
             );
@@ -715,7 +707,7 @@ export const DailyRounds = (props: any) => {
 
           {state.form.rounds_type === "DOCTORS_LOG" && (
             <>
-              <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-gray-600 border-t-2 border-dashed border-gray-600 pt-6 md:col-span-2">
+              <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-secondary-600 border-t-2 border-dashed border-secondary-600 pt-6 md:col-span-2">
                 <div>
                   <h3 className="mb-4 mt-8 text-lg font-semibold">
                     {t("diagnosis")}
@@ -724,7 +716,7 @@ export const DailyRounds = (props: any) => {
                   {diagnoses ? (
                     <EditDiagnosesBuilder value={diagnoses} />
                   ) : (
-                    <div className="flex animate-pulse justify-center py-4 text-center font-medium text-gray-800">
+                    <div className="flex animate-pulse justify-center py-4 text-center font-medium text-secondary-800">
                       Fetching existing diagnosis of patient...
                     </div>
                   )}
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
index 6f63a697229..cfef384afe9 100644
--- a/src/Components/Patient/FileUpload.tsx
+++ b/src/Components/Patient/FileUpload.tsx
@@ -858,7 +858,7 @@ export const FileUpload = (props: FileUploadProps) => {
 
                     <CareIcon
                       icon="l-music"
-                      className="text-6xl text-gray-500"
+                      className="text-6xl text-secondary-500"
                     />
                   </div>
                 ) : (
@@ -880,7 +880,7 @@ export const FileUpload = (props: FileUploadProps) => {
 
                     <CareIcon
                       icon={getIconClassName(item?.extension)}
-                      className="text-6xl text-gray-500"
+                      className="text-6xl text-secondary-500"
                     />
                   </div>
                 )}
@@ -1397,10 +1397,12 @@ export const FileUpload = (props: FileUploadProps) => {
                 className="text-lg text-danger-500"
               />
             </div>
-            <div className="text-grey-200 text-sm">
+            <div className="text-sm">
               <h1 className="text-xl text-black">Archive File</h1>
-              This action is irreversible. Once a file is archived it cannot be
-              unarchived.
+              <span className="text-sm text-secondary-600">
+                This action is irreversible. Once a file is archived it cannot
+                be unarchived.
+              </span>
             </div>
           </div>
         }
@@ -1447,10 +1449,12 @@ export const FileUpload = (props: FileUploadProps) => {
                 className="text-lg text-primary-500"
               />
             </div>
-            <div className="text-grey-200 text-sm">
+            <div className="text-sm">
               <h1 className="text-xl text-black">File Details</h1>
-              This file is archived. Once a file is archived it cannot be
-              unarchived.
+              <span className="text-sm font-normal text-secondary-600">
+                This file is archived. Once a file is archived it cannot be
+                unarchived.
+              </span>
             </div>
           </div>
         }
@@ -1596,7 +1600,7 @@ export const FileUpload = (props: FileUploadProps) => {
                             <label
                               className={classNames(
                                 consultation?.discharge_date
-                                  ? "cursor-not-allowed bg-gray-200 text-gray-500"
+                                  ? "cursor-not-allowed bg-secondary-200 text-secondary-500"
                                   : "button-primary-default cursor-pointer transition-all duration-200 ease-in-out",
                                 "button-size-default button-shape-square inline-flex h-min w-full items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1",
                               )}
@@ -1646,7 +1650,7 @@ export const FileUpload = (props: FileUploadProps) => {
                     </div>
                   )}
                   {file && (
-                    <div className="mt-2 flex items-center justify-between rounded bg-gray-200 px-4 py-2">
+                    <div className="mt-2 flex items-center justify-between rounded bg-secondary-200 px-4 py-2">
                       {file?.name}
                       <button
                         onClick={() => {
@@ -1684,7 +1688,7 @@ export const FileUpload = (props: FileUploadProps) => {
               )
             ) : (
               <div className="mt-4 rounded-lg border bg-white p-4 shadow">
-                <div className="text-md flex items-center justify-center font-bold text-gray-500">
+                <div className="text-md flex items-center justify-center font-bold text-secondary-500">
                   {"No Unarchived File in the Current Page"}
                 </div>
               </div>
@@ -1709,7 +1713,7 @@ export const FileUpload = (props: FileUploadProps) => {
               )
             ) : (
               <div className="mt-4 rounded-lg border bg-white p-4 shadow">
-                <div className="text-md flex items-center justify-center font-bold text-gray-500">
+                <div className="text-md flex items-center justify-center font-bold text-secondary-500">
                   {"No Archived File in the Current Page"}
                 </div>
               </div>
@@ -1735,7 +1739,7 @@ export const FileUpload = (props: FileUploadProps) => {
                 )
               ) : (
                 <div className="mt-4 rounded-lg border bg-white p-4 shadow">
-                  <div className="text-md flex items-center justify-center font-bold text-gray-500">
+                  <div className="text-md flex items-center justify-center font-bold text-secondary-500">
                     {"No discharge summary files in the current Page"}
                   </div>
                 </div>
diff --git a/src/Components/Patient/InsuranceDetails.tsx b/src/Components/Patient/InsuranceDetails.tsx
index dc8df8ff8a9..41f1da11e89 100644
--- a/src/Components/Patient/InsuranceDetails.tsx
+++ b/src/Components/Patient/InsuranceDetails.tsx
@@ -44,7 +44,7 @@ export const InsuranceDetails = (props: IProps) => {
       {loading ? (
         <Loading />
       ) : insuranceDetials?.count === 0 ? (
-        <div className="mt-5 flex w-full items-center justify-center text-xl font-bold text-gray-500">
+        <div className="mt-5 flex w-full items-center justify-center text-xl font-bold text-secondary-500">
           No Insurance Details Available
         </div>
       ) : (
diff --git a/src/Components/Patient/InsuranceDetailsCard.tsx b/src/Components/Patient/InsuranceDetailsCard.tsx
index b0840db8de6..2d5113d5718 100644
--- a/src/Components/Patient/InsuranceDetailsCard.tsx
+++ b/src/Components/Patient/InsuranceDetailsCard.tsx
@@ -13,7 +13,7 @@ export const InsuranceDetialsCard = (props: InsuranceDetails) => {
   return (
     <div className="w-full">
       <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-        <div className="border-b border-dashed pb-2 text-xl font-bold text-gray-900">
+        <div className="border-b border-dashed pb-2 text-xl font-bold text-secondary-900">
           Policy Details
         </div>
         {data ? (
@@ -60,7 +60,7 @@ export const InsuranceDetialsCard = (props: InsuranceDetails) => {
                         `/facility/${data.patient_object?.facility_object?.id}/patient/${data.patient_object?.id}/insurance`,
                       );
                     }}
-                    className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+                    className="h-auto whitespace-pre-wrap border border-secondary-500 bg-white text-black hover:bg-secondary-300"
                   >
                     View All Details
                   </ButtonV2>
@@ -69,7 +69,7 @@ export const InsuranceDetialsCard = (props: InsuranceDetails) => {
             )}
           </div>
         ) : (
-          <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+          <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
             No Insurance Details Available
           </div>
         )}
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index eaa1ff7af20..26a6148e0bf 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -2,6 +2,7 @@ import * as Notification from "../../Utils/Notifications.js";
 
 import {
   ADMITTED_TO,
+  CONSENT_TYPE_CHOICES,
   DISCHARGE_REASONS,
   GENDER_TYPES,
   PATIENT_CATEGORIES,
@@ -33,6 +34,7 @@ import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import {
   formatPatientAge,
+  humanizeStrings,
   isAntenatal,
   parsePhoneNumber,
 } from "../../Utils/utils.js";
@@ -194,6 +196,8 @@ export const PatientManager = () => {
       qParams.last_consultation_discharge_date_after || undefined,
     last_consultation_admitted_bed_type_list:
       qParams.last_consultation_admitted_bed_type_list || undefined,
+    last_consultation__consent_types:
+      qParams.last_consultation__consent_types || undefined,
     last_consultation__new_discharge_reason:
       qParams.last_consultation__new_discharge_reason || undefined,
     last_consultation_current_bed__location:
@@ -394,7 +398,18 @@ export const PatientManager = () => {
       prefetch: !!qParams.last_consultation_current_bed__location,
     },
   );
+  /*
+  const { data: patientsWithNoConsentsData } = useQuery(routes.patientList, {
+    query: {
+      ...qParams,
+      limit: 1,
+      last_consultation__consent_types: "None",
+      is_active: "True",
+    },
+  });
 
+  const patientsWithNoConsents = patientsWithNoConsentsData?.count;
+  */
   const { data: permittedFacilities } = useQuery(
     routes.getPermittedFacilities,
     {
@@ -431,6 +446,39 @@ export const PatientManager = () => {
       });
   };
 
+  const HasConsentTypesBadges = () => {
+    const badge = (key: string, value: any, id: string) => {
+      return (
+        value && (
+          <FilterBadge
+            name={key}
+            value={value}
+            onRemove={() => {
+              const lcat = qParams.last_consultation__consent_types
+                .split(",")
+                .filter((x: string) => x != id)
+                .join(",");
+              updateQuery({
+                ...qParams,
+                last_consultation__consent_types: lcat,
+              });
+            }}
+          />
+        )
+      );
+    };
+
+    return qParams.last_consultation__consent_types
+      .split(",")
+      .map((id: string) => {
+        const text = [
+          ...CONSENT_TYPE_CHOICES,
+          { id: "None", text: "No Consents" },
+        ].find((obj) => obj.id == id)?.text;
+        return badge("Has Consent", text, id);
+      });
+  };
+
   const getDiagnosisFilterValue = (key: DiagnosesFilterKey) => {
     const ids: string[] = (qParams[key] ?? "").split(",");
     return ids.map((id) => diagnoses.find((obj) => obj.id == id)?.label ?? id);
@@ -471,11 +519,11 @@ export const PatientManager = () => {
             </span>
           </div>
           <div className="flex flex-col items-start gap-4 md:flex-row">
-            <div className="h-20 w-full min-w-20 rounded-lg border border-gray-300 bg-gray-50 md:w-20">
+            <div className="h-20 w-full min-w-20 rounded-lg border border-secondary-300 bg-secondary-50 md:w-20">
               {patient?.last_consultation?.current_bed &&
               patient?.last_consultation?.discharge_date === null ? (
                 <div className="tooltip flex h-full flex-col items-center justify-center">
-                  <span className="w-full truncate px-1 text-center text-sm text-gray-900">
+                  <span className="w-full truncate px-1 text-center text-sm text-secondary-900">
                     {
                       patient?.last_consultation?.current_bed?.bed_object
                         ?.location_object?.name
@@ -498,7 +546,7 @@ export const PatientManager = () => {
                   <div className="tooltip">
                     <CareIcon
                       icon="l-estate"
-                      className="text-3xl text-gray-500"
+                      className="text-3xl text-secondary-500"
                     />
                     <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-sm font-medium">
                       Domiciliary Care
@@ -509,7 +557,7 @@ export const PatientManager = () => {
                 <div className="flex min-h-20 items-center justify-center">
                   <CareIcon
                     icon="l-user-injured"
-                    className="text-3xl text-gray-500"
+                    className="text-3xl text-secondary-500"
                   />
                 </div>
               )}
@@ -517,18 +565,18 @@ export const PatientManager = () => {
             <div className="flex w-full flex-col gap-2 pl-2 md:block md:flex-row">
               <div className="flex w-full items-center justify-between gap-2">
                 <div
-                  className="flex flex-wrap gap-2 font-semibold"
+                  className="flex flex-wrap items-end gap-3 font-semibold"
                   id="patient-name-list"
                 >
                   <span className="text-xl capitalize">{patient.name}</span>
-                  <span className="text-gray-800">
+                  <span className="font-bold text-secondary-700">
                     {formatPatientAge(patient, true)}
                   </span>
                 </div>
               </div>
 
               {patient.action && patient.action != 10 && (
-                <span className="text-sm font-semibold text-gray-700">
+                <span className="text-sm font-semibold text-secondary-700">
                   {
                     TELEMEDICINE_ACTIONS.find((i) => i.id === patient.action)
                       ?.desc
@@ -539,13 +587,15 @@ export const PatientManager = () => {
               {patient.facility_object && (
                 <div className="mb-2">
                   <div className="flex flex-wrap items-center">
-                    <p className="mr-2 text-sm font-medium text-gray-700">
+                    <p className="mr-2 text-sm font-medium text-secondary-700">
                       {patient.facility_object.name}
                     </p>
                     <RecordMeta
-                      className="text-sm text-gray-900"
+                      className="text-sm text-secondary-900"
                       prefix={
-                        <span className="text-gray-600">{t("updated")}</span>
+                        <span className="text-secondary-600">
+                          {t("updated")}
+                        </span>
                       }
                       time={patient.modified_date}
                     />
@@ -610,7 +660,7 @@ export const PatientManager = () => {
                         size="small"
                         variant="primary"
                         startIcon="l-clock-three"
-                        text={`IP Days: ${dayjs().diff(patient.last_consultation.encounter_date, "day")}`}
+                        text={`IP Day No: ${dayjs().diff(patient.last_consultation.encounter_date, "day") + 1}`}
                       />
                     )}
                   {patient.gender === 2 &&
@@ -657,6 +707,20 @@ export const PatientManager = () => {
                         </span>
                       </span>
                     )}
+                  {/* {!!patient.last_consultation?.has_consents.length || (
+                    <span className="relative inline-flex">
+                      <Chip
+                        size="small"
+                        variant="danger"
+                        startIcon="l-file"
+                        text="No consents recorded"
+                      />
+                      <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>
+                      </span>
+                    </span>
+                  )} */}
                 </div>
               </div>
             </div>
@@ -712,7 +776,9 @@ export const PatientManager = () => {
   } else if (data && data.count === 0) {
     managePatients = (
       <div className="col-span-3 w-full rounded-lg bg-white p-2 py-8 pt-4 text-center">
-        <p className="text-2xl font-bold text-gray-600">No Patients Found</p>
+        <p className="text-2xl font-bold text-secondary-600">
+          No Patients Found
+        </p>
       </div>
     );
   }
@@ -722,7 +788,6 @@ export const PatientManager = () => {
       name,
       value: qParams[name] || defaultValue,
       onChange: (e: FieldChangeEvent<T>) => updateQuery({ [e.name]: e.value }),
-      className: "grow w-full mb-2",
     };
   };
 
@@ -909,21 +974,23 @@ export const PatientManager = () => {
           </div>
         </div>
         <div className="col-span-3 w-full">
-          <div className="col-span-2 mt-2">
-            <div className="mt-1 md:flex md:gap-4">
+          <div className="mt-2">
+            <div className="mb-4 mt-1 md:flex md:gap-4">
               <SearchInput
                 label="Search by Patient"
                 placeholder="Enter patient name"
                 {...queryField("name")}
+                className="w-full grow"
               />
               <SearchInput
                 label="Search by IP/OP Number"
                 placeholder="Enter IP/OP Number"
                 secondary
                 {...queryField("patient_no")}
+                className="w-full grow"
               />
             </div>
-            <div className="md:flex md:gap-4">
+            <div className="mb-4 md:flex md:gap-4">
               <PhoneNumberFormField
                 label="Search by Primary Number"
                 {...queryField("phone_number", "+91")}
@@ -931,6 +998,7 @@ export const PatientManager = () => {
                 onChange={(e) => setPhoneNum(e.value)}
                 error={phoneNumberError}
                 types={["mobile", "landline"]}
+                className="w-full grow"
               />
               <PhoneNumberFormField
                 label="Search by Emergency Number"
@@ -939,12 +1007,31 @@ export const PatientManager = () => {
                 onChange={(e) => setEmergencyPhoneNum(e.value)}
                 error={emergencyPhoneNumberError}
                 types={["mobile", "landline"]}
+                className="w-full"
               />
             </div>
           </div>
         </div>
       </div>
-      <div className="col-span-3 mt-6 flex flex-wrap">
+      {/*!qParams.last_consultation__consent_types &&
+        (patientsWithNoConsents || 0) > 0 && (
+          <div className="flex w-full items-center gap-4 rounded-lg bg-red-500/10 p-4 text-sm text-red-500">
+            <CareIcon icon="l-info-circle" className="text-xl" />
+            <p className="font-semibold">
+              {patientsWithNoConsents} patients admitted missing consent
+              records&nbsp;
+              <button
+                onClick={() =>
+                  updateQuery({ last_consultation__consent_types: "None" })
+                }
+                className="underline"
+              >
+                Click to view
+              </button>
+            </p>
+          </div>
+        )*/}
+      <div className="col-span-3 flex flex-wrap">
         <FilterBadges
           badges={({
             badge,
@@ -1027,7 +1114,7 @@ export const PatientManager = () => {
               value(
                 DIAGNOSES_FILTER_LABELS[key],
                 key,
-                getDiagnosisFilterValue(key).join(", "),
+                humanizeStrings(getDiagnosisFilterValue(key)),
               ),
             ),
             badge("Declared Status", "is_declared_positive"),
@@ -1051,8 +1138,15 @@ export const PatientManager = () => {
             ),
           ]}
           children={
-            qParams.last_consultation_admitted_bed_type_list &&
-            LastAdmittedToTypeBadges()
+            (qParams.last_consultation_admitted_bed_type_list ||
+              qParams.last_consultation__consent_types) && (
+              <>
+                {qParams.last_consultation_admitted_bed_type_list &&
+                  LastAdmittedToTypeBadges()}
+                {qParams.last_consultation__consent_types &&
+                  HasConsentTypesBadges()}
+              </>
+            )
           }
         />
       </div>
diff --git a/src/Components/Patient/PatientConsentRecordBlock.tsx b/src/Components/Patient/PatientConsentRecordBlock.tsx
index 4998ded0acf..5b25f5b27be 100644
--- a/src/Components/Patient/PatientConsentRecordBlock.tsx
+++ b/src/Components/Patient/PatientConsentRecordBlock.tsx
@@ -114,18 +114,18 @@ export default function PatientConsentRecordBlockGroup(props: {
       {files?.map((file: FileUploadModel, i: number) => (
         <div
           key={i}
-          className={`flex flex-col justify-between gap-2 rounded-lg border border-gray-300 xl:flex-row xl:items-center ${showArchive ? "text-gray-600" : "bg-white"}  px-4 py-2 transition-all hover:bg-gray-100`}
+          className={`flex flex-col justify-between gap-2 rounded-lg border border-secondary-300 xl:flex-row xl:items-center ${showArchive ? "text-secondary-600" : "bg-white"}  px-4 py-2 transition-all hover:bg-secondary-100`}
         >
           <div className="flex items-center gap-4 ">
             <div>
-              <CareIcon icon="l-file" className="text-5xl text-gray-600" />
+              <CareIcon icon="l-file" className="text-5xl text-secondary-600" />
             </div>
             <div className="min-w-[40%] break-all">
               <div className="">
                 {file.name}
                 {file.extension} {file.is_archived && "(Archived)"}
               </div>
-              <div className="text-xs text-gray-700">
+              <div className="text-xs text-secondary-700">
                 {dayjs(
                   file.is_archived ? file.archived_datetime : file.created_date,
                 ).format("DD MMM YYYY, hh:mm A")}{" "}
diff --git a/src/Components/Patient/PatientConsentRecords.tsx b/src/Components/Patient/PatientConsentRecords.tsx
index d850179c6d0..a8b94f2d041 100644
--- a/src/Components/Patient/PatientConsentRecords.tsx
+++ b/src/Components/Patient/PatientConsentRecords.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   CONSENT_PATIENT_CODE_STATUS_CHOICES,
   CONSENT_TYPE_CHOICES,
@@ -34,12 +34,6 @@ export default function PatientConsentRecords(props: {
     patient_code_status: 4,
   });
 
-  const refetchAll = () => {
-    refetch();
-    refetchFiles();
-    refetchArchivedFiles();
-  };
-
   const fileUpload = useFileUpload({
     type: "CONSENT_RECORD",
     allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
@@ -48,10 +42,10 @@ export default function PatientConsentRecords(props: {
   const fileManager = useFileManager({
     type: "CONSENT_RECORD",
     onArchive: async () => {
-      refetchAll();
+      refetch();
     },
     onEdit: async () => {
-      refetchAll();
+      refetch();
     },
   });
 
@@ -73,36 +67,6 @@ export default function PatientConsentRecords(props: {
 
   const consentRecords = consentRecordsData?.results;
 
-  const { data: unarchivedFiles, refetch: refetchFiles } = useQuery(
-    routes.viewUpload,
-    {
-      query: {
-        file_type: "CONSENT_RECORD",
-        associating_id: consentRecords?.map((cr) => cr.id).join(","),
-        limit: 1000,
-        offset: 0,
-        is_archived: false,
-      },
-      prefetch: (consentRecords?.length || 0) > 0 && showArchived,
-    },
-  );
-
-  const { data: archivedFiles, refetch: refetchArchivedFiles } = useQuery(
-    routes.viewUpload,
-    {
-      query: {
-        file_type: "CONSENT_RECORD",
-        associating_id: consentRecords?.map((cr) => cr.id).join(","),
-        limit: 1000,
-        offset: 0,
-        is_archived: true,
-      },
-      prefetch: (consentRecords?.length || 0) > 0 && !showArchived,
-    },
-  );
-
-  const files = showArchived ? archivedFiles : unarchivedFiles;
-
   const selectField = (name: string) => {
     return {
       name,
@@ -135,13 +99,6 @@ export default function PatientConsentRecords(props: {
     refetch();
   };
 
-  useEffect(() => {
-    if (consentRecords && consentRecords.length > 0) {
-      refetchFiles();
-      refetchArchivedFiles();
-    }
-  }, [consentRecords]);
-
   return (
     <Page
       title={"Patient Consent Records"}
@@ -280,13 +237,15 @@ export default function PatientConsentRecords(props: {
         <div className="flex-1">
           {consentRecords?.filter(
             (r) =>
-              files?.results.filter((f) => f.associating_id === r.id).length,
+              r.files?.filter(
+                (f) =>
+                  f.associating_id === r.id && f.is_archived === showArchived,
+              ).length,
           ).length === 0 ? (
-            <div className="flex h-32 items-center justify-center text-gray-500">
+            <div className="flex h-32 items-center justify-center text-secondary-500">
               No consent records found
             </div>
           ) : (
-            (!unarchivedFiles || !archivedFiles) &&
             !consentRecords && (
               <div className="skeleton-animate-alpha h-32 rounded-lg" />
             )
@@ -301,8 +260,10 @@ export default function PatientConsentRecords(props: {
                 archiveFile={fileManager.archiveFile}
                 editFile={fileManager.editFile}
                 showArchive={showArchived}
-                files={files?.results.filter(
-                  (f) => f.associating_id === record.id,
+                files={record.files?.filter(
+                  (f) =>
+                    f.associating_id === record.id &&
+                    showArchived === f.is_archived,
                 )}
               />
             ))}
diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
index f08fca71948..b7e7c32a7d4 100644
--- a/src/Components/Patient/PatientFilter.tsx
+++ b/src/Components/Patient/PatientFilter.tsx
@@ -3,6 +3,7 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
 import {
   ADMITTED_TO,
+  CONSENT_TYPE_CHOICES,
   DISCHARGE_REASONS,
   FACILITY_TYPES,
   GENDER_TYPES,
@@ -78,6 +79,7 @@ export default function PatientFilter(props: any) {
       filter.last_consultation_admitted_bed_type_list
         ? filter.last_consultation_admitted_bed_type_list.split(",")
         : [],
+    last_consultation__consent_types: filter.last_consultation__consent_types,
     last_consultation_current_bed__location:
       filter.last_consultation_current_bed__location || "",
     last_consultation__new_discharge_reason:
@@ -183,6 +185,7 @@ export default function PatientFilter(props: any) {
       last_consultation_discharge_date_before,
       last_consultation_discharge_date_after,
       last_consultation_admitted_bed_type_list,
+      last_consultation__consent_types,
       last_consultation__new_discharge_reason,
       last_consultation_current_bed__location,
       number_of_doses,
@@ -241,6 +244,7 @@ export default function PatientFilter(props: any) {
       age_max: age_max || "",
       last_consultation_admitted_bed_type_list:
         last_consultation_admitted_bed_type_list || [],
+      last_consultation__consent_types: last_consultation__consent_types,
       last_consultation__new_discharge_reason:
         last_consultation__new_discharge_reason || "",
       number_of_doses: number_of_doses || "",
@@ -371,6 +375,26 @@ export default function PatientFilter(props: any) {
               }
             />
           </div>
+          <div className="w-full flex-none" id="consent-type-select">
+            <FieldLabel className="text-sm">Has consent records for</FieldLabel>
+            <MultiSelectMenuV2
+              id="last_consultation__consent_types"
+              placeholder="Select consent types"
+              options={[
+                ...CONSENT_TYPE_CHOICES,
+                { id: "None", text: "No consents" },
+              ]}
+              value={filterState.last_consultation__consent_types}
+              optionValue={(o) => o.id}
+              optionLabel={(o) => o.text}
+              onChange={(o) =>
+                setFilterState({
+                  ...filterState,
+                  last_consultation__consent_types: o,
+                })
+              }
+            />
+          </div>
           {(props.dischargePage ||
             ["StateAdmin", "StateReadOnlyAdmin"].includes(
               authUser.user_type,
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index 53a6a8215aa..1bee5a3b245 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -426,7 +426,7 @@ export const PatientHome = (props: any) => {
                     <div>
                       <a
                         href={`tel:${patientData.phone_number}`}
-                        className="text-sm font-medium text-black hover:text-gray-500"
+                        className="text-sm font-medium text-black hover:text-secondary-500"
                       >
                         {patientData.phone_number || "-"}
                       </a>
@@ -447,11 +447,11 @@ export const PatientHome = (props: any) => {
                   <div className="text-sm font-semibold leading-5 text-zinc-400">
                     Emergency Contact
                   </div>
-                  <div className="mt-1 text-sm leading-5 text-gray-900">
+                  <div className="mt-1 text-sm leading-5 text-secondary-900">
                     <div>
                       <a
                         href={`tel:${patientData.emergency_phone_number}`}
-                        className="text-sm font-medium text-black hover:text-gray-500"
+                        className="text-sm font-medium text-black hover:text-secondary-500"
                       >
                         {patientData.emergency_phone_number || "-"}
                       </a>
@@ -555,7 +555,7 @@ export const PatientHome = (props: any) => {
                       className={
                         "mb-6 inline-flex w-full items-center justify-center rounded-md border p-3 text-xs font-semibold leading-4 shadow-sm lg:mt-0 " +
                         (dayjs().isBefore(patientData.review_time)
-                          ? " bg-gray-100"
+                          ? " bg-secondary-100"
                           : " bg-red-600/5 p-1 text-sm font-normal text-red-600")
                       }
                     >
@@ -571,23 +571,23 @@ export const PatientHome = (props: any) => {
                 <div className="mb-6 rounded-sm bg-white p-2 text-center shadow">
                   <div className="flex justify-between">
                     <div className="w-1/2 border-r-2">
-                      <div className="text-sm font-normal leading-5 text-gray-500">
+                      <div className="text-sm font-normal leading-5 text-secondary-500">
                         Status
                       </div>
-                      <div className="mt-1 text-xl font-semibold leading-5 text-gray-900">
+                      <div className="mt-1 text-xl font-semibold leading-5 text-secondary-900">
                         {patientData.is_active ? "LIVE" : "DISCHARGED"}
                       </div>
                     </div>
                     <div className="w-1/2">
-                      <div className="text-sm font-normal leading-5 text-gray-500">
+                      <div className="text-sm font-normal leading-5 text-secondary-500">
                         Last Discharged Reason
                       </div>
-                      <div className="mt-1 text-xl font-semibold leading-5 text-gray-900">
+                      <div className="mt-1 text-xl font-semibold leading-5 text-secondary-900">
                         {patientData.is_active ? (
                           "-"
                         ) : !patientData.last_consultation
                             ?.new_discharge_reason ? (
-                          <span className="text-gray-800">
+                          <span className="text-secondary-800">
                             {patientData?.last_consultation?.suggestion === "OP"
                               ? "OP file closed"
                               : "UNKNOWN"}
@@ -611,10 +611,10 @@ export const PatientHome = (props: any) => {
                 </div>
                 <div className="mt-2 flex justify-between rounded-sm bg-white p-2 px-4 text-center shadow">
                   <div className="w-1/2 border-r-2 pb-1 pr-2">
-                    <div className="text-sm font-normal leading-5 text-gray-500">
+                    <div className="text-sm font-normal leading-5 text-secondary-500">
                       Created
                     </div>
-                    <div className="mt-1 whitespace-normal text-sm font-semibold leading-5 text-gray-900">
+                    <div className="mt-1 whitespace-normal text-sm font-semibold leading-5 text-secondary-900">
                       <div className="flex justify-center text-sm font-semibold">
                         <RelativeDateUserMention
                           actionDate={patientData.created_date}
@@ -624,10 +624,10 @@ export const PatientHome = (props: any) => {
                     </div>
                   </div>
                   <div className="w-1/2 pb-1 pl-2">
-                    <div className="text-sm font-normal leading-5 text-gray-500">
+                    <div className="text-sm font-normal leading-5 text-secondary-500">
                       Last Edited
                     </div>
-                    <div className="mt-1 whitespace-normal text-sm leading-5 text-gray-900">
+                    <div className="mt-1 whitespace-normal text-sm leading-5 text-secondary-900">
                       <div className="flex justify-center whitespace-normal text-sm font-semibold">
                         <RelativeDateUserMention
                           actionDate={patientData.modified_date}
@@ -649,7 +649,7 @@ export const PatientHome = (props: any) => {
                       name="death_report"
                       onClick={() => navigate(`/death_report/${id}`)}
                     >
-                      <CareIcon icon="l-file-download" className="mr-2" />
+                      <CareIcon icon="l-file-download" className="text-lg" />
                       Death Report
                     </ButtonV2>
                   </div>
@@ -706,9 +706,9 @@ export const PatientHome = (props: any) => {
             </div>
           </div>
         </section>
-        <section className=" mt-7 h-full space-y-2 rounded-lg bg-white p-4 text-gray-100 shadow">
+        <section className=" mt-7 h-full space-y-2 rounded-lg bg-white p-4 text-secondary-100 shadow">
           <div
-            className="flex cursor-pointer justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-gray-900"
+            className="flex cursor-pointer justify-between border-b border-dashed pb-2 text-left text-lg font-semibold text-secondary-900"
             onClick={() => {
               setShowShifts(!showShifts);
               setIsShiftClicked(true);
@@ -755,7 +755,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-truck"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {shift.status}
                               </dd>
                             </dt>
@@ -769,7 +769,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-plane-fly"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {(shift.origin_facility_object || {})?.name}
                               </dd>
                             </dt>
@@ -783,7 +783,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-user-check"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {
                                   (
                                     shift.shifting_approving_facility_object ||
@@ -802,7 +802,7 @@ export const PatientHome = (props: any) => {
                                 icon="l-plane-arrival"
                                 className="mr-2 text-lg"
                               />
-                              <dd className="text-sm font-bold leading-5 text-gray-900">
+                              <dd className="text-sm font-bold leading-5 text-secondary-900">
                                 {(shift.assigned_facility_object || {})?.name ||
                                   "Yet to be decided"}
                               </dd>
@@ -817,7 +817,7 @@ export const PatientHome = (props: any) => {
                                 (dayjs()
                                   .subtract(2, "hours")
                                   .isBefore(shift.modified_date)
-                                  ? "text-gray-900"
+                                  ? "text-secondary-900"
                                   : "rounded p-1 font-normal text-red-600")
                               }
                             >
@@ -835,7 +835,7 @@ export const PatientHome = (props: any) => {
 
                       <div className="mt-2 flex">
                         <ButtonV2
-                          className="mr-2 w-full bg-white hover:bg-gray-100"
+                          className="mr-2 w-full bg-white hover:bg-secondary-100"
                           variant="secondary"
                           onClick={() =>
                             navigate(`/shifting/${shift.external_id}`)
@@ -885,7 +885,7 @@ export const PatientHome = (props: any) => {
                 </div>
               ))
             ) : (
-              <div className=" text-center text-gray-500">
+              <div className=" text-center text-secondary-500">
                 {isShiftDataLoading ? "Loading..." : "No Shifting Records!"}
               </div>
             )}
@@ -898,7 +898,7 @@ export const PatientHome = (props: any) => {
         >
           <div className="w-full">
             <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-              <div className="border-b border-dashed pb-2 text-xl font-bold text-gray-900">
+              <div className="border-b border-dashed pb-2 text-xl font-bold text-secondary-900">
                 Location
               </div>
               <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
@@ -960,7 +960,7 @@ export const PatientHome = (props: any) => {
           </div>
           <div className="w-full">
             <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-              <div className="border-b border-dashed pb-2 text-xl font-bold text-gray-900">
+              <div className="border-b border-dashed pb-2 text-xl font-bold text-secondary-900">
                 Medical
               </div>
               {!patientData.present_health &&
@@ -970,7 +970,7 @@ export const PatientHome = (props: any) => {
                 !patientData.medical_history?.some(
                   (history) => history.disease !== "NO",
                 ) && (
-                  <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+                  <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
                     No Medical History Available
                   </div>
                 )}
@@ -1045,7 +1045,7 @@ export const PatientHome = (props: any) => {
                   "w-full rounded-lg border",
                   isPatientEligibleForNewConsultation(patientData)
                     ? "cursor-pointer border-green-700 hover:bg-primary-400"
-                    : "border-gray-700 text-gray-700 hover:cursor-not-allowed",
+                    : "border-secondary-700 text-secondary-700 hover:cursor-not-allowed",
                 )}
                 onClick={() =>
                   isPatientEligibleForNewConsultation(patientData) &&
@@ -1058,7 +1058,7 @@ export const PatientHome = (props: any) => {
                   className={classNames(
                     "h-full space-y-2 rounded-lg bg-white p-4 shadow",
                     isPatientEligibleForNewConsultation(patientData) &&
-                      "hover:bg-gray-200",
+                      "hover:bg-secondary-200",
                   )}
                 >
                   <div
@@ -1087,7 +1087,7 @@ export const PatientHome = (props: any) => {
                 className="w-full"
                 onClick={() => navigate(`/patient/${id}/investigation_reports`)}
               >
-                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-gray-200">
+                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-secondary-200">
                   <div className="text-center text-green-700">
                     <span>
                       <CareIcon icon="l-file-search-alt" className="text-5xl" />
@@ -1108,7 +1108,7 @@ export const PatientHome = (props: any) => {
                   )
                 }
               >
-                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-gray-200">
+                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-secondary-200">
                   <div className="text-center text-green-700">
                     <span>
                       <CareIcon icon="l-file-upload" className="text-5xl" />
@@ -1132,14 +1132,14 @@ export const PatientHome = (props: any) => {
                 <div
                   className={`h-full space-y-2 rounded-lg border bg-white p-4 shadow ${
                     isPatientInactive(patientData, facilityId)
-                      ? " border-gray-700 hover:cursor-not-allowed"
-                      : " border-green-700 hover:cursor-pointer hover:bg-gray-200"
+                      ? " border-secondary-700 hover:cursor-not-allowed"
+                      : " border-green-700 hover:cursor-pointer hover:bg-secondary-200"
                   } `}
                 >
                   <div
                     className={`${
                       isPatientInactive(patientData, facilityId)
-                        ? "text-gray-700"
+                        ? "text-secondary-700"
                         : "text-green-700"
                     }  text-center `}
                   >
@@ -1152,7 +1152,7 @@ export const PatientHome = (props: any) => {
                     <p
                       className={`${
                         isPatientInactive(patientData, facilityId) &&
-                        "text-gray-700"
+                        "text-secondary-700"
                       }  text-center text-sm font-medium`}
                     >
                       Shift Patient
@@ -1174,14 +1174,14 @@ export const PatientHome = (props: any) => {
                   className={classNames(
                     "h-full space-y-2 rounded-lg border bg-white p-4 shadow",
                     isPatientInactive(patientData, facilityId)
-                      ? " border-gray-700 hover:cursor-not-allowed"
-                      : " border-green-700 hover:cursor-pointer hover:bg-gray-200",
+                      ? " border-secondary-700 hover:cursor-not-allowed"
+                      : " border-green-700 hover:cursor-pointer hover:bg-secondary-200",
                   )}
                 >
                   <div
                     className={`${
                       isPatientInactive(patientData, facilityId)
-                        ? " text-gray-700 "
+                        ? " text-secondary-700 "
                         : " text-green-700 "
                     } text-center  `}
                   >
@@ -1193,7 +1193,7 @@ export const PatientHome = (props: any) => {
                     <p
                       className={`${
                         isPatientInactive(patientData, facilityId) &&
-                        " text-gray-700 "
+                        " text-secondary-700 "
                       } text-center text-sm font-medium`}
                     >
                       Request Sample Test
@@ -1209,7 +1209,7 @@ export const PatientHome = (props: any) => {
                   )
                 }
               >
-                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-gray-200">
+                <div className="h-full space-y-2 rounded-lg border border-green-700 bg-white p-4 shadow hover:cursor-pointer hover:bg-secondary-200">
                   <div className="text-center text-green-700">
                     <span>
                       <CareIcon icon="l-clipboard-notes" className="text-5xl" />
@@ -1234,15 +1234,15 @@ export const PatientHome = (props: any) => {
                   className={classNames(
                     "h-full space-y-2 rounded-lg border bg-white p-4 shadow",
                     isPatientInactive(patientData, facilityId)
-                      ? "border-gray-700 hover:cursor-not-allowed"
-                      : "border-green-700 hover:cursor-pointer hover:bg-gray-200",
+                      ? "border-secondary-700 hover:cursor-not-allowed"
+                      : "border-green-700 hover:cursor-pointer hover:bg-secondary-200",
                   )}
                 >
                   <div
                     className={classNames(
                       "text-center",
                       isPatientInactive(patientData, facilityId)
-                        ? "text-gray-700"
+                        ? "text-secondary-700"
                         : "text-green-700",
                     )}
                   >
@@ -1255,7 +1255,7 @@ export const PatientHome = (props: any) => {
                       className={classNames(
                         "text-center text-sm font-medium",
                         isPatientInactive(patientData, facilityId)
-                          ? "text-gray-700"
+                          ? "text-secondary-700"
                           : "text-black",
                       )}
                     >
@@ -1268,7 +1268,7 @@ export const PatientHome = (props: any) => {
           </div>
           <div className="mx-2 w-full lg:hidden">
             <div className="h-full space-y-2 rounded-lg bg-white p-4 shadow">
-              <div className="space-y-2 border-b border-dashed text-left text-lg font-semibold text-gray-900">
+              <div className="space-y-2 border-b border-dashed text-left text-lg font-semibold text-secondary-900">
                 <div>
                   <ButtonV2
                     className="w-full"
@@ -1426,7 +1426,7 @@ export const PatientHome = (props: any) => {
               </PaginatedList.WhenLoading>
               <PaginatedList.WhenEmpty className="py-2">
                 <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-                  <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+                  <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
                     No Consultation History Available
                   </div>
                 </div>
@@ -1466,7 +1466,7 @@ export const PatientHome = (props: any) => {
               </PaginatedList.WhenLoading>
               <PaginatedList.WhenEmpty className="py-2">
                 <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-                  <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+                  <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
                     No Sample Test History Available
                   </div>
                 </div>
diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index a43d49a26ac..f58af228421 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -19,6 +19,7 @@ import {
   formatDate,
   formatDateTime,
   formatPatientAge,
+  humanizeStrings,
 } from "../../Utils/utils.js";
 import ABHAProfileModal from "../ABDM/ABHAProfileModal.js";
 import LinkABHANumberModal from "../ABDM/LinkABHANumberModal.js";
@@ -45,16 +46,8 @@ import { AuthorizedForConsultationRelatedActions } from "../../CAREUI/misc/Autho
 const formatSkills = (arr: SkillModel[]) => {
   const skills = arr.map((skill) => skill.skill_object.name);
 
-  if (skills.length === 1) {
-    return skills[0];
-  }
-
-  if (skills.length === 2) {
-    return `${skills[0]} and ${skills[1]}`;
-  }
-
-  if (skills.length === 3) {
-    return `${skills[0]}, ${skills[1]} and ${skills[2]}`;
+  if (skills.length <= 3) {
+    return humanizeStrings(skills);
   }
 
   return `${skills[0]}, ${skills[1]} and ${skills.length - 2} other skills...`;
@@ -140,29 +133,6 @@ export default function PatientInfoCard(props: {
     },
     prefetch: !!consultation?.treating_physician_object?.username,
   });
-  const { data: consentRecords, loading: consentRecordsLoading } = useQuery(
-    routes.listConsents,
-    {
-      pathParams: {
-        consultationId: consultation?.id ?? "",
-      },
-      prefetch: !!consultation?.id,
-    },
-  );
-
-  const { data: consentFiles, loading: consentFilesLoading } = useQuery(
-    routes.viewUpload,
-    {
-      query: {
-        file_type: "CONSENT_RECORD",
-        associating_id: consentRecords?.results.map((cr) => cr.id).join(","),
-        limit: 1,
-        offset: 0,
-        is_archived: false,
-      },
-      prefetch: (consentRecords?.results.length || 0) > 0,
-    },
-  );
 
   return (
     <>
@@ -218,12 +188,12 @@ export default function PatientInfoCard(props: {
           <div className="flex justify-evenly lg:justify-normal">
             <div className="flex flex-col items-start lg:items-center">
               <div
-                className={`w-24 min-w-20 bg-gray-200 ${categoryClass}-profile h-24`}
+                className={`w-24 min-w-20 bg-secondary-200 ${categoryClass}-profile h-24`}
               >
                 {consultation?.current_bed &&
                 consultation?.discharge_date === null ? (
                   <div className="tooltip flex h-full flex-col items-center justify-center">
-                    <p className="w-full truncate px-2 text-center text-sm text-gray-900">
+                    <p className="w-full truncate px-2 text-center text-sm text-secondary-900">
                       {
                         consultation?.current_bed?.bed_object?.location_object
                           ?.name
@@ -246,7 +216,7 @@ export default function PatientInfoCard(props: {
                   <div className="flex h-full items-center justify-center">
                     <CareIcon
                       icon="l-user-injured"
-                      className="text-3xl text-gray-500"
+                      className="text-3xl text-secondary-500"
                     />
                   </div>
                 )}
@@ -274,7 +244,7 @@ export default function PatientInfoCard(props: {
                 id="patient-name-consultation"
               >
                 {patient.name}
-                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-gray-600">
+                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-secondary-600">
                   {formatPatientAge(patient, true)} • {patient.gender}
                 </div>
                 <div className="mr-3 flex flex-col items-center">
@@ -319,13 +289,13 @@ export default function PatientInfoCard(props: {
                 id="patient-name-consultation"
               >
                 {patient.name}
-                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-gray-600">
+                <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-secondary-600">
                   {formatPatientAge(patient, true)} • {patient.gender}
                 </div>
               </div>
               <div className="flex flex-wrap items-center gap-2 text-sm sm:flex-row">
                 <div
-                  className="flex w-full flex-wrap items-center justify-center gap-2 text-sm text-gray-900 sm:flex-row sm:text-sm md:pr-10 lg:justify-normal"
+                  className="flex w-full flex-wrap items-center justify-center gap-2 text-sm text-secondary-900 sm:flex-row sm:text-sm md:pr-10 lg:justify-normal"
                   id="patient-consultationbadges"
                 >
                   {consultation?.patient_no && (
@@ -339,7 +309,7 @@ export default function PatientInfoCard(props: {
                   )}
                   {patient.action && patient.action != 10 && (
                     <div>
-                      <div className="inline-flex w-full items-center justify-start rounded border border-gray-500 bg-blue-100 p-1 px-3 text-xs font-semibold leading-4">
+                      <div className="inline-flex w-full items-center justify-start rounded border border-secondary-500 bg-blue-100 p-1 px-3 text-xs font-semibold leading-4">
                         <span className="font-semibold text-indigo-800">
                           {" "}
                           {
@@ -353,7 +323,7 @@ export default function PatientInfoCard(props: {
                   )}
                   <div>
                     {patient.blood_group && (
-                      <div className="inline-flex w-full items-center justify-start rounded border border-gray-500 bg-gray-100 p-1 px-2 text-xs font-semibold leading-4">
+                      <div className="inline-flex w-full items-center justify-start rounded border border-secondary-500 bg-secondary-100 p-1 px-2 text-xs font-semibold leading-4">
                         Blood Group: {patient.blood_group}
                       </div>
                     )}
@@ -364,9 +334,9 @@ export default function PatientInfoCard(props: {
                       <div>
                         <div
                           className={
-                            "inline-flex w-full items-center justify-center rounded border border-gray-500 p-1 text-xs font-semibold leading-4 " +
+                            "inline-flex w-full items-center justify-center rounded border border-secondary-500 p-1 text-xs font-semibold leading-4 " +
                             (dayjs().isBefore(patient.review_time)
-                              ? " bg-gray-100 "
+                              ? " bg-secondary-100 "
                               : " bg-red-400 text-white")
                           }
                         >
@@ -378,25 +348,22 @@ export default function PatientInfoCard(props: {
                         </div>
                       </div>
                     )}
-                  {!consentFilesLoading &&
-                    !consentRecordsLoading &&
-                    !consentFiles?.results.filter((c) => !c.is_archived)
-                      .length && (
-                      <div>
-                        <div className="inline-flex w-full items-center justify-start rounded border border-red-600 bg-red-400 p-1 px-3 text-xs font-semibold leading-4">
-                          <span className="font-semibold text-white">
-                            Consent Records Missing
-                          </span>
-                        </div>
+                  {!!consultation?.has_consents?.length || (
+                    <div>
+                      <div className="inline-flex w-full items-center justify-start rounded border border-red-600 bg-red-400 p-1 px-3 text-xs font-semibold leading-4">
+                        <span className="font-semibold text-white">
+                          Consent Records Missing
+                        </span>
                       </div>
-                    )}
+                    </div>
+                  )}
                   {consultation?.suggestion === "DC" && (
                     <div>
                       <div>
-                        <div className="inline-flex w-full items-center justify-start rounded border border-gray-500 bg-gray-100 p-1 px-3 text-xs font-semibold leading-4">
+                        <div className="inline-flex w-full items-center justify-start rounded border border-secondary-500 bg-secondary-100 p-1 px-3 text-xs font-semibold leading-4">
                           <CareIcon
                             icon="l-estate"
-                            className="mr-1 text-base text-gray-700"
+                            className="mr-1 text-base text-secondary-700"
                           />
                           <span>Domiciliary Care</span>
                         </div>
@@ -423,7 +390,7 @@ export default function PatientInfoCard(props: {
                       <div className="flex flex-col items-center gap-2 text-sm">
                         <div
                           key={"patient_stat_" + i}
-                          className="flex items-center justify-center rounded border border-gray-500 bg-gray-100 p-1 px-3 text-xs font-semibold leading-4"
+                          className="flex items-center justify-center rounded border border-secondary-500 bg-secondary-100 p-1 px-3 text-xs font-semibold leading-4"
                         >
                           {stat[0]} : {stat[1]}
                         </div>
@@ -462,7 +429,7 @@ export default function PatientInfoCard(props: {
                       </div>
                     </div>
                   ) : (
-                    <div className="flex items-center justify-center rounded border border-gray-500 bg-gray-100 p-1 px-3 text-xs font-semibold leading-4">
+                    <div className="flex items-center justify-center rounded border border-secondary-500 bg-secondary-100 p-1 px-3 text-xs font-semibold leading-4">
                       <span className="flex">
                         {consultation?.encounter_date && (
                           <div>
@@ -526,7 +493,7 @@ export default function PatientInfoCard(props: {
                       className="fill-current text-xl text-green-500"
                     />
                     <br className="md:hidden" />
-                    <span className="tooltip text-xs text-gray-800">
+                    <span className="tooltip text-xs text-secondary-800">
                       {!!skillsQuery.data?.results?.length &&
                         formatSkills(skillsQuery.data?.results)}
                       {(skillsQuery.data?.results?.length || 0) > 3 && (
@@ -559,12 +526,12 @@ export default function PatientInfoCard(props: {
                     {dayjs(consultation.discharge_date || undefined).diff(
                       consultation.encounter_date,
                       "day",
-                    )}
+                    ) + 1}
                   </span>
                 </div>
               </div>
-              <span className="mt-1 text-xs font-medium text-gray-700">
-                IP Days
+              <span className="mt-1 text-xs font-medium text-secondary-700">
+                IP Day No
               </span>
             </div>
           )}
@@ -575,12 +542,12 @@ export default function PatientInfoCard(props: {
           )}
           {!!consultation?.discharge_date && (
             <div className="flex min-w-max flex-col items-center justify-center">
-              <div className="text-sm font-normal leading-5 text-gray-500">
+              <div className="text-sm font-normal leading-5 text-secondary-500">
                 Discharge Reason
               </div>
-              <div className="mt-[6px] text-xl font-semibold leading-5 text-gray-900">
+              <div className="mt-[6px] text-xl font-semibold leading-5 text-secondary-900">
                 {!consultation?.new_discharge_reason ? (
-                  <span className="text-gray-800">
+                  <span className="text-secondary-800">
                     {consultation.suggestion === "OP"
                       ? "OP file closed"
                       : "UNKNOWN"}
@@ -928,7 +895,7 @@ export default function PatientInfoCard(props: {
                     <div
                       className={`dropdown-item-primary pointer-events-auto ${
                         consultation?.discharge_date &&
-                        "text-gray-500 accent-gray-500 hover:bg-white"
+                        "text-secondary-500 accent-secondary-500 hover:bg-white"
                       } m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out`}
                       onClick={() => {
                         if (!consultation?.discharge_date) {
@@ -942,7 +909,7 @@ export default function PatientInfoCard(props: {
                           icon="l-hospital"
                           className={`text-lg ${
                             consultation?.discharge_date
-                              ? "text-gray-500"
+                              ? "text-secondary-500"
                               : "text-primary-500"
                           }`}
                         />
@@ -966,7 +933,7 @@ export default function PatientInfoCard(props: {
                       switchMedicoLegalCase(checked);
                     }}
                     className={classNames(
-                      medicoLegalCase ? "bg-primary" : "bg-gray-200",
+                      medicoLegalCase ? "bg-primary" : "bg-secondary-200",
                       "relative inline-flex h-4 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ",
                     )}
                   >
@@ -979,7 +946,7 @@ export default function PatientInfoCard(props: {
                     />
                   </Switch>
                   <Switch.Label as="span" className="ml-3 text-sm">
-                    <span className="font-medium text-gray-900">
+                    <span className="font-medium text-secondary-900">
                       Medico-Legal Case
                     </span>{" "}
                   </Switch.Label>
diff --git a/src/Components/Patient/PatientNotes.tsx b/src/Components/Patient/PatientNotes.tsx
index 520486620bf..36d97e3d7d7 100644
--- a/src/Components/Patient/PatientNotes.tsx
+++ b/src/Components/Patient/PatientNotes.tsx
@@ -103,16 +103,16 @@ const PatientNotes = (props: PatientNotesProps) => {
       }}
       backUrl={`/facility/${facilityId}/patient/${patientId}`}
     >
-      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-gray-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 flex bg-gray-200 text-sm shadow-md">
+      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
+        <div className="absolute inset-x-0 top-0 flex bg-secondary-200 text-sm shadow-md">
           {Object.values(PATIENT_NOTES_THREADS).map((current) => (
             <button
               key={current}
               className={classNames(
                 "flex flex-1 justify-center border-b-2 py-2",
                 thread === current
-                  ? "border-primary-500 font-bold text-gray-800"
-                  : "border-gray-300 text-gray-800",
+                  ? "border-primary-500 font-bold text-secondary-800"
+                  : "border-secondary-300 text-secondary-800",
               )}
               onClick={() => setThread(current)}
             >
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index 7d219514267..71f2c899462 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -1136,7 +1136,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                   if (!formField) setFormField(field);
                   return (
                     <>
-                      <div className="mb-2 overflow-visible rounded border border-gray-200 p-4">
+                      <div className="mb-2 overflow-visible rounded border border-secondary-200 p-4">
                         <ButtonV2
                           id="import-externalresult-button"
                           className="flex items-center gap-2"
@@ -1157,7 +1157,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                         </ButtonV2>
                       </div>
                       {enable_abdm && (
-                        <div className="mb-8 overflow-visible rounded border border-gray-200 p-4">
+                        <div className="mb-8 overflow-visible rounded border border-secondary-200 p-4">
                           <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
                             ABHA Details
                           </h1>
@@ -1214,7 +1214,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                     error=""
                                   />
                                 ) : (
-                                  <div className="mt-4 text-sm text-gray-500">
+                                  <div className="mt-4 text-sm text-secondary-500">
                                     No Abha Address Associated with this ABHA
                                     Number
                                   </div>
@@ -1224,7 +1224,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           )}
                         </div>
                       )}
-                      <div className="mb-8 overflow-visible rounded border border-gray-200 p-4">
+                      <div className="mb-8 overflow-visible rounded border border-secondary-200 p-4">
                         <h1 className="mb-4 text-left text-xl font-bold text-purple-500">
                           Personal Details
                         </h1>
@@ -1347,7 +1347,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                       errorClassName="hidden"
                                       trailingPadding="pr-4"
                                       trailing={
-                                        <p className="absolute right-10 space-x-1 whitespace-nowrap text-xs text-gray-700 sm:text-sm">
+                                        <p className="absolute right-10 space-x-1 whitespace-nowrap text-xs text-secondary-700 sm:text-sm">
                                           {field("age").value !== "" && (
                                             <>
                                               <span className="hidden sm:inline md:hidden lg:inline">
@@ -1727,7 +1727,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           )}
                         </div>
                       </div>
-                      <div className="mb-8 rounded border border-gray-200 p-4">
+                      <div className="mb-8 rounded border border-secondary-200 p-4">
                         <AccordionV2
                           className="mt-2 shadow-none md:mt-0 lg:mt-0"
                           expandIcon={
@@ -1918,7 +1918,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           </div>
                         </div>
                       </div>
-                      <div className="flex w-full flex-col gap-4 rounded border border-gray-200 bg-white p-4">
+                      <div className="flex w-full flex-col gap-4 rounded border border-secondary-200 bg-white p-4">
                         <div className="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
                           <h1 className="text-left text-xl font-bold text-purple-500">
                             Insurance Details
diff --git a/src/Components/Patient/SampleDetails.tsx b/src/Components/Patient/SampleDetails.tsx
index a3d3df95c21..91fd2d4a122 100644
--- a/src/Components/Patient/SampleDetails.tsx
+++ b/src/Components/Patient/SampleDetails.tsx
@@ -409,7 +409,7 @@ export const SampleDetails = ({ id }: DetailRoute) => {
                 <span className="font-semibold leading-relaxed">
                   Countries travelled:{" "}
                 </span>
-                {sampleDetails.patient_travel_history.join(", ")}
+                {sampleDetails.patient_travel_history}
               </div>
             )}
           {sampleDetails?.sample_type && (
diff --git a/src/Components/Patient/SamplePreview.tsx b/src/Components/Patient/SamplePreview.tsx
index a01453e1ed5..479b426c3f2 100644
--- a/src/Components/Patient/SamplePreview.tsx
+++ b/src/Components/Patient/SamplePreview.tsx
@@ -1,4 +1,4 @@
-import { classNames, formatDateTime } from "../../Utils/utils";
+import { classNames, formatDateTime, humanizeStrings } from "../../Utils/utils";
 
 import { lazy } from "react";
 
@@ -25,18 +25,18 @@ interface ISampleReportSectionProps {
 function SampleReportSection({ title, fields }: ISampleReportSectionProps) {
   return (
     <>
-      <div className="flex justify-center border border-b-0 border-gray-800 bg-gray-700 py-2 font-medium text-white">
+      <div className="flex justify-center border border-b-0 border-secondary-800 bg-secondary-700 py-2 font-medium text-white">
         <h6 className="text-lg">{title}</h6>
       </div>
-      <div className="grid grid-cols-2 border-b border-gray-800">
+      <div className="grid grid-cols-2 border-b border-secondary-800">
         {fields.map((field, i) => (
           <div
             className={classNames(
-              "flex border-b border-gray-800",
+              "flex border-b border-secondary-800",
               i % 2 === 0 && "border-x",
             )}
           >
-            <div className="w-[65%] border-r border-gray-800 py-2">
+            <div className="w-[65%] border-r border-secondary-800 py-2">
               <p className="mr-2.5 pl-1 pr-2 text-right font-semibold">
                 {field.title}
               </p>
@@ -79,7 +79,7 @@ export default function SampleReport(props: ISamplePreviewProps) {
         </div>
         <div className="block h-screen" id="section-to-print">
           <div className="flex flex-col">
-            <div className="flex items-center justify-between border border-gray-800">
+            <div className="flex items-center justify-between border border-secondary-800">
               <div className="flex justify-start p-2"></div>
               <div className="flex justify-end">
                 <div className="p-2">
@@ -91,30 +91,30 @@ export default function SampleReport(props: ISamplePreviewProps) {
                 </div>
               </div>
             </div>
-            <div className="flex justify-start border border-t-0 border-gray-800">
+            <div className="flex justify-start border border-t-0 border-secondary-800">
               <div className="w-full p-5 py-2 text-black">
                 <p className="text-lg font-bold">
                   ICMR Specimen Referral Data for COVID-19 (SARS-CoV2)
                 </p>
               </div>
             </div>
-            <div className="flex justify-center border border-t-0 border-gray-800 py-2">
+            <div className="flex justify-center border border-t-0 border-secondary-800 py-2">
               <h6 className="text-lg font-semibold text-danger-500">
                 FOR INTERNAL USE ONLY
               </h6>
             </div>
             <div className="flex flex-col">
-              <div className="flex justify-center border border-b-0 border-gray-800 bg-black py-2 font-medium text-white">
+              <div className="flex justify-center border border-b-0 border-secondary-800 bg-black py-2 font-medium text-white">
                 <h6 className="text-lg">Sample Id : {sampleId}</h6>
               </div>
-              <div className="flex justify-center border border-b-0 border-gray-800 bg-black py-2 font-medium text-white">
+              <div className="flex justify-center border border-b-0 border-secondary-800 bg-black py-2 font-medium text-white">
                 <h6 className="text-lg">Patient Id : {id}</h6>
               </div>
               <div
                 className="border-4 border-black"
                 style={{ border: "solid 5px black" }}
               >
-                <div className="flex justify-center border border-b-0 border-gray-800 bg-gray-900 py-2 font-medium text-white">
+                <div className="flex justify-center border border-b-0 border-secondary-800 bg-secondary-900 py-2 font-medium text-white">
                   <h6 className="text-lg">SECTION A - MANDATORY FIELDS</h6>
                 </div>
                 <SampleReportSection
@@ -216,7 +216,7 @@ export default function SampleReport(props: ISamplePreviewProps) {
                   ]}
                 />
 
-                <div className="flex justify-center border border-b-0 border-gray-800 bg-gray-900 py-2 font-medium text-white">
+                <div className="flex justify-center border border-b-0 border-secondary-800 bg-secondary-900 py-2 font-medium text-white">
                   <h6 className="text-lg">
                     SECTION B - OTHER FIELDS TO BE UPDATED
                   </h6>
@@ -331,7 +331,8 @@ export default function SampleReport(props: ISamplePreviewProps) {
                     {
                       title: "Symptoms",
                       value:
-                        sampleData?.medical_conditions?.symptoms?.join(", "),
+                        sampleData?.medical_conditions?.symptoms &&
+                        humanizeStrings(sampleData.medical_conditions.symptoms),
                     },
                     { title: "First Symptom", value: "............." },
                     {
diff --git a/src/Components/Patient/SampleTestCard.tsx b/src/Components/Patient/SampleTestCard.tsx
index efcc68bb06a..e36d4b52121 100644
--- a/src/Components/Patient/SampleTestCard.tsx
+++ b/src/Components/Patient/SampleTestCard.tsx
@@ -141,13 +141,13 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
       <div className="m-2 mt-4 flex flex-col justify-between md:flex-row lg:gap-4">
         <div className="flex flex-col justify-between gap-4 md:flex-row">
           <div>
-            <div className="mb-2 text-sm text-gray-700">
+            <div className="mb-2 text-sm text-secondary-700">
               <span className="font-medium text-black">Date of Sample:</span>{" "}
               {itemData.date_of_sample
                 ? formatDateTime(itemData.date_of_sample)
                 : "Not Available"}
             </div>
-            <div className="text-sm text-gray-700">
+            <div className="text-sm text-secondary-700">
               <span className="font-medium text-black">Date of Result:</span>{" "}
               {itemData.date_of_result
                 ? formatDateTime(itemData.date_of_result)
@@ -156,7 +156,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
           </div>
         </div>
         <div className="flex flex-col gap-2">
-          <div className="flex flex-col flex-nowrap items-center justify-end text-sm text-gray-700 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center">
+          <div className="flex flex-col flex-nowrap items-center justify-end text-sm text-secondary-700 md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center">
             <div className=" font-medium text-black">Created: </div>
 
             <RelativeDateUserMention
@@ -165,7 +165,7 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               tooltipPosition="left"
             />
           </div>
-          <div className="flex flex-col items-center justify-end text-sm text-gray-700 md:flex-col md:items-start lg:flex-row lg:items-center">
+          <div className="flex flex-col items-center justify-end text-sm text-secondary-700 md:flex-col md:items-start lg:flex-row lg:items-center">
             <div className=" font-medium text-black">Last Modified: </div>
             <RelativeDateUserMention
               actionDate={itemData.modified_date}
@@ -182,21 +182,21 @@ export const SampleTestCard = (props: SampleDetailsProps) => {
               e.stopPropagation();
               handleApproval(4, itemData);
             }}
-            className="border border-gray-500 bg-white text-black hover:bg-gray-300"
+            className="border border-secondary-500 bg-white text-black hover:bg-secondary-300"
           >
             Send to Collection Centre
           </ButtonV2>
         )}
         <ButtonV2
           onClick={() => showUpdateStatus(itemData)}
-          className="border border-gray-500 bg-white text-black hover:bg-gray-300"
+          className="border border-secondary-500 bg-white text-black hover:bg-secondary-300"
           authorizeFor={NonReadOnlyUsers}
         >
           Update Sample Test Status
         </ButtonV2>
         <ButtonV2
           onClick={(_e) => navigate(`/sample/${itemData.id}`)}
-          className="border border-gray-500 bg-white text-black hover:bg-gray-300"
+          className="border border-secondary-500 bg-white text-black hover:bg-secondary-300"
         >
           Sample Report
         </ButtonV2>
diff --git a/src/Components/Patient/SampleViewAdmin.tsx b/src/Components/Patient/SampleViewAdmin.tsx
index d9f471874fa..1369c9725e0 100644
--- a/src/Components/Patient/SampleViewAdmin.tsx
+++ b/src/Components/Patient/SampleViewAdmin.tsx
@@ -243,15 +243,15 @@ export default function SampleViewAdmin() {
               </div>
 
               <div className="mt-4">
-                <div className="text-sm font-bold text-gray-600">
-                  <span className="text-gray-800">Date of Sample:</span>{" "}
+                <div className="text-sm font-bold text-secondary-600">
+                  <span className="text-secondary-800">Date of Sample:</span>{" "}
                   {item.date_of_sample
                     ? formatDateTime(item.date_of_sample)
                     : "Not Available"}
                 </div>
 
-                <div className="text-sm font-bold text-gray-600">
-                  <span className="text-gray-800">Date of Result:</span>{" "}
+                <div className="text-sm font-bold text-secondary-600">
+                  <span className="text-secondary-800">Date of Result:</span>{" "}
                   {item.date_of_result
                     ? formatDateTime(item.date_of_result)
                     : "Not Available"}
@@ -263,7 +263,7 @@ export default function SampleViewAdmin() {
                   <div className="mt-2">
                     <button
                       onClick={() => showUpdateStatus(item)}
-                      className="w-full rounded border border-gray-400 bg-primary-500 px-4 py-2 text-center text-sm font-semibold text-white shadow hover:bg-primary-700"
+                      className="w-full rounded border border-secondary-400 bg-primary-500 px-4 py-2 text-center text-sm font-semibold text-white shadow hover:bg-primary-700"
                     >
                       UPDATE SAMPLE TEST STATUS
                     </button>
@@ -272,7 +272,7 @@ export default function SampleViewAdmin() {
 
                 <button
                   onClick={() => navigate(`/sample/${item.id}`)}
-                  className="mt-2 w-full rounded border border-gray-400 bg-white px-4 py-2 text-center text-sm font-semibold text-gray-800 shadow hover:bg-gray-400"
+                  className="mt-2 w-full rounded border border-secondary-400 bg-white px-4 py-2 text-center text-sm font-semibold text-secondary-800 shadow hover:bg-secondary-400"
                 >
                   Sample Details
                 </button>
@@ -300,7 +300,7 @@ export default function SampleViewAdmin() {
   } else if (sampeleData?.count === 0) {
     manageSamples = (
       <div className="w-full rounded-lg bg-white p-3">
-        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-gray-600">
+        <div className="mt-4 flex w-full  justify-center text-2xl font-bold text-secondary-600">
           No Sample Tests Found
         </div>
       </div>
diff --git a/src/Components/Patient/UpdateStatusDialog.tsx b/src/Components/Patient/UpdateStatusDialog.tsx
index 8fca8815248..98c72073437 100644
--- a/src/Components/Patient/UpdateStatusDialog.tsx
+++ b/src/Components/Patient/UpdateStatusDialog.tsx
@@ -214,7 +214,7 @@ const UpdateStatusDialog = (props: Props) => {
               <LinearProgressWithLabel value={uploadPercent} />
             ) : (
               <div className="mb-4 mt-3 flex flex-wrap justify-between gap-2">
-                <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full 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-gray-200 disabled:text-gray-500">
+                <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full 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">
                   <CareIcon icon="l-file-upload-alt" className="text-lg" />
                   <span className="max-w-full truncate">
                     {file ? file.name : t("choose_file")}
diff --git a/src/Components/Patient/Waveform.tsx b/src/Components/Patient/Waveform.tsx
index 52885b62a51..d567739a3d2 100644
--- a/src/Components/Patient/Waveform.tsx
+++ b/src/Components/Patient/Waveform.tsx
@@ -105,7 +105,7 @@ export default function Waveform(props: {
 
   return (
     <div className="relative w-full">
-      <div className="absolute left-5 top-0 text-xs text-gray-400">
+      <div className="absolute left-5 top-0 text-xs text-secondary-400">
         {props.title}
       </div>
       <LinePlot
@@ -126,7 +126,7 @@ export default function Waveform(props: {
       />
       <div className="absolute bottom-0 right-5 w-full md:w-[70%]">
         {props.metrics && (
-          <div className="flex flex-row flex-wrap justify-end gap-2 text-xs text-gray-400">
+          <div className="flex flex-row flex-wrap justify-end gap-2 text-xs text-secondary-400">
             <div>Lowest: {Math.min(...queueData.slice(0, viewable))}</div>
             <div>Highest: {Math.max(...queueData.slice(0, viewable))}</div>
             <div>Stream Length: {data.length}</div>
diff --git a/src/Components/Resource/CommentSection.tsx b/src/Components/Resource/CommentSection.tsx
index 5b9929ed19f..de4a4208e83 100644
--- a/src/Components/Resource/CommentSection.tsx
+++ b/src/Components/Resource/CommentSection.tsx
@@ -57,7 +57,7 @@ const CommentSection = (props: { id: string }) => {
           </div>
           <div className="w-full">
             <div>
-              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
                 <span>No comments available</span>
               </PaginatedList.WhenEmpty>
               <PaginatedList.WhenLoading>
@@ -84,20 +84,20 @@ export const Comment = ({
   created_by_object,
   modified_date,
 }: IComment) => (
-  <div className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800">
+  <div className="mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-4 text-secondary-800">
     <div className="flex  w-full ">
       <p className="text-justify">{comment}</p>
     </div>
     <div className="mt-3">
-      <span className="text-xs text-gray-500">
+      <span className="text-xs text-secondary-500">
         {formatDateTime(modified_date) || "-"}
       </span>
     </div>
-    <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+    <div className=" mr-auto flex items-center rounded-md border bg-secondary-100 py-1 pl-2 pr-3">
       <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
         {created_by_object?.first_name?.charAt(0) || "U"}
       </div>
-      <span className="pl-2 text-sm text-gray-700">
+      <span className="pl-2 text-sm text-secondary-700">
         {created_by_object?.first_name || "Unknown"}{" "}
         {created_by_object?.last_name}
       </span>
diff --git a/src/Components/Resource/ListView.tsx b/src/Components/Resource/ListView.tsx
index 680015b16f2..128e17c2c46 100644
--- a/src/Components/Resource/ListView.tsx
+++ b/src/Components/Resource/ListView.tsx
@@ -45,7 +45,7 @@ export default function ListView() {
   const showResourceCardList = (data: any) => {
     if (data && !data.length) {
       return (
-        <div className="mt-64 flex flex-1 justify-center text-gray-600">
+        <div className="mt-64 flex flex-1 justify-center text-secondary-600">
           No requests to show.
         </div>
       );
@@ -75,10 +75,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title="Resource status"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-truck" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {resource.status}
                     </dd>
                   </dt>
@@ -86,10 +86,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title=" Origin facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-departure" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.origin_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -97,10 +97,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title="Resource approving facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user-check" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.approving_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -108,11 +108,11 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title=" Assigned facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-arrival" className="m-2" />
 
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.assigned_facility_object || {}).name ||
                         "Yet to be decided"}
                     </dd>
@@ -127,7 +127,7 @@ export default function ListView() {
                       (dayjs()
                         .subtract(2, "hours")
                         .isBefore(resource.modified_date)
-                        ? "text-gray-900"
+                        ? "text-secondary-900"
                         : "rounded bg-red-400 p-1 text-white")
                     }
                   >
diff --git a/src/Components/Resource/ResourceBoard.tsx b/src/Components/Resource/ResourceBoard.tsx
index de0b573d9bb..352942aff83 100644
--- a/src/Components/Resource/ResourceBoard.tsx
+++ b/src/Components/Resource/ResourceBoard.tsx
@@ -66,10 +66,10 @@ const ResourceCard = ({ resource }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title=" Origin facility"
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-plane-departure" className="mr-2 text-xl" />
-                  <dd className="text-sm font-bold leading-5 text-gray-900">
+                  <dd className="text-sm font-bold leading-5 text-secondary-900">
                     {(resource.origin_facility_object || {}).name}
                   </dd>
                 </dt>
@@ -77,10 +77,10 @@ const ResourceCard = ({ resource }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title="Resource approving facility"
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-user-check" className="mr-2 text-xl" />
-                  <dd className="text-sm font-bold leading-5 text-gray-900">
+                  <dd className="text-sm font-bold leading-5 text-secondary-900">
                     {(resource.approving_facility_object || {}).name}
                   </dd>
                 </dt>
@@ -89,11 +89,11 @@ const ResourceCard = ({ resource }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title=" Assigned facility"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-arrival" className="mr-2 text-xl" />
 
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(resource.assigned_facility_object || {}).name ||
                         "Yet to be decided"}
                     </dd>
@@ -108,7 +108,7 @@ const ResourceCard = ({ resource }: any) => {
                     (dayjs()
                       .subtract(2, "hours")
                       .isBefore(resource.modified_date)
-                      ? "text-gray-900"
+                      ? "text-secondary-900"
                       : "rounded bg-red-400 p-1 text-white")
                   }
                 >
@@ -122,10 +122,10 @@ const ResourceCard = ({ resource }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title="Assigned to"
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user" className="mr-2 text-xl" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {resource.assigned_to_object.first_name}{" "}
                       {resource.assigned_to_object.last_name} -{" "}
                       {resource.assigned_to_object.user_type}
@@ -233,11 +233,11 @@ export default function ResourceBoard({
     <div
       ref={drop}
       className={classNames(
-        "e mr-2 h-full w-full  shrink-0 overflow-y-auto rounded-md bg-gray-200 pb-4 @lg:w-1/2 @3xl:w-1/3 @7xl:w-1/4",
+        "e mr-2 h-full w-full  shrink-0 overflow-y-auto rounded-md bg-secondary-200 pb-4 @lg:w-1/2 @3xl:w-1/3 @7xl:w-1/4",
         isOver && "cursor-move",
       )}
     >
-      <div className="sticky top-0 rounded bg-gray-200 pt-2">
+      <div className="sticky top-0 rounded bg-secondary-200 pt-2">
         <div className="mx-2 flex items-center justify-between rounded bg-white p-4 shadow">
           <h3 className="flex h-8 items-center text-xs">
             {renderBoardTitle(board)}{" "}
@@ -259,13 +259,13 @@ export default function ResourceBoard({
       <div className="mt-2 flex flex-col pb-2 text-sm">
         {isLoading.board ? (
           <div className="m-1">
-            <div className="mx-auto w-full max-w-sm rounded-md border border-gray-300 bg-white p-4 shadow">
+            <div className="mx-auto w-full max-w-sm rounded-md border border-secondary-300 bg-white p-4 shadow">
               <div className="flex animate-pulse space-x-4 ">
                 <div className="flex-1 space-y-4 py-1">
-                  <div className="h-4 w-3/4 rounded bg-gray-400"></div>
+                  <div className="h-4 w-3/4 rounded bg-secondary-400"></div>
                   <div className="space-y-2">
-                    <div className="h-4 rounded bg-gray-400"></div>
-                    <div className="h-4 w-5/6 rounded bg-gray-400"></div>
+                    <div className="h-4 rounded bg-secondary-400"></div>
+                    <div className="h-4 w-5/6 rounded bg-secondary-400"></div>
                   </div>
                 </div>
               </div>
@@ -280,13 +280,13 @@ export default function ResourceBoard({
           data &&
           data?.results.length < (data?.count || 0) &&
           (isLoading.more ? (
-            <div className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white">
+            <div className="mx-auto my-4 rounded-md bg-secondary-100 p-2 px-4 hover:bg-white">
               Loading
             </div>
           ) : (
             <button
               onClick={(_) => handlePagination()}
-              className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white"
+              className="mx-auto my-4 rounded-md bg-secondary-100 p-2 px-4 hover:bg-white"
             >
               More...
             </button>
diff --git a/src/Components/Resource/ResourceDetails.tsx b/src/Components/Resource/ResourceDetails.tsx
index 9e1f805b115..c719556d561 100644
--- a/src/Components/Resource/ResourceDetails.tsx
+++ b/src/Components/Resource/ResourceDetails.tsx
@@ -357,7 +357,7 @@ export default function ResourceDetails(props: { id: string }) {
               <div className="text-sm font-medium leading-5 text-black">
                 Created
               </div>
-              <div className="mt-1 text-sm leading-5 text-gray-900">
+              <div className="mt-1 text-sm leading-5 text-secondary-900">
                 <div className="text-sm">
                   {data?.created_by_object?.first_name}{" "}
                   {data?.created_by_object?.last_name}
@@ -371,7 +371,7 @@ export default function ResourceDetails(props: { id: string }) {
               <div className="text-sm font-medium leading-5 text-black">
                 Last Edited
               </div>
-              <div className="mt-1 text-sm leading-5 text-gray-900">
+              <div className="mt-1 text-sm leading-5 text-secondary-900">
                 <div className="text-sm">
                   {data?.last_edited_by_object?.first_name}{" "}
                   {data?.last_edited_by_object?.last_name}
diff --git a/src/Components/Scribe/Scribe.tsx b/src/Components/Scribe/Scribe.tsx
index e29b825124f..16b9056a795 100644
--- a/src/Components/Scribe/Scribe.tsx
+++ b/src/Components/Scribe/Scribe.tsx
@@ -410,7 +410,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
           <button
             onClick={handleStartRecordingClick}
             disabled={isRecording}
-            className="flex items-center justify-center rounded-full border border-black px-2 py-2 font-bold hover:border-red-500 hover:bg-gray-200 hover:text-red-500"
+            className="flex items-center justify-center rounded-full border border-black px-2 py-2 font-bold hover:border-red-500 hover:bg-secondary-200 hover:text-red-500"
           >
             <CareIcon
               icon="l-microphone"
@@ -425,7 +425,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
             disabled={!isRecording}
             onMouseEnter={() => setIsHoveringCancelRecord(true)}
             onMouseLeave={() => setIsHoveringCancelRecord(false)}
-            className="flex animate-pulse items-center justify-center rounded-full border border-red-500 bg-red-100 px-2 py-2 font-bold text-red-500 hover:border-black hover:bg-gray-200 hover:text-black"
+            className="flex animate-pulse items-center justify-center rounded-full border border-red-500 bg-red-100 px-2 py-2 font-bold text-red-500 hover:border-black hover:bg-secondary-200 hover:text-black"
           >
             {isHoveringCancelRecord ? (
               <CareIcon
@@ -490,9 +490,9 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
               &#8203;
             </span>
 
-            <div className="inline-block max-h-[75vh] w-full max-w-md overflow-hidden overflow-y-auto rounded-2xl border-2 border-gray-300 bg-white p-6 text-left align-middle shadow-xl transition-all">
+            <div className="inline-block max-h-[75vh] w-full max-w-md overflow-hidden overflow-y-auto rounded-2xl border-2 border-secondary-300 bg-white p-6 text-left align-middle shadow-xl transition-all">
               <div className="flex justify-between">
-                <h3 className="text-lg font-medium leading-6 text-gray-900">
+                <h3 className="text-lg font-medium leading-6 text-secondary-900">
                   Voice AutoFill
                 </h3>
 
@@ -516,7 +516,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                 stage === "final-review" ||
                 stage === "recording-review") && (
                 <div className="flex flex-col justify-center gap-4 rounded-md p-2">
-                  <p className="text-sm font-semibold text-gray-600">
+                  <p className="text-sm font-semibold text-secondary-600">
                     Recorded Audio
                   </p>
                   {audioBlobs.length > 0 &&
@@ -541,15 +541,15 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
               {(stage === "review" || stage === "final-review") && (
                 <div className="my-2 w-full">
                   <div className="flex justify-between">
-                    <p className="mb-2 text-sm font-semibold text-gray-600">
+                    <p className="mb-2 text-sm font-semibold text-secondary-600">
                       Transcript
                     </p>
-                    <p className="mb-2 text-sm italic text-gray-500">
+                    <p className="mb-2 text-sm italic text-secondary-500">
                       (Edit if needed)
                     </p>
                   </div>
                   <textarea
-                    className="h-32 w-full rounded-md border border-gray-300 p-2 font-mono text-sm"
+                    className="h-32 w-full rounded-md border border-secondary-300 p-2 font-mono text-sm"
                     value={updatedTranscript}
                     onChange={handleEditChange}
                   />
@@ -569,7 +569,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                     Regenerate Transcript
                   </ButtonV2>
                   {stage === "review" && (
-                    <p className="animate-pulse text-sm text-gray-500">
+                    <p className="animate-pulse text-sm text-secondary-500">
                       {getStageMessage(stage)}
                     </p>
                   )}
@@ -581,10 +581,10 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                   {!isGPTProcessing &&
                     Object.keys(formFields ?? {}).length > 0 && (
                       <div className="mt-4">
-                        <p className="mb-2 text-sm font-semibold text-gray-600">
+                        <p className="mb-2 text-sm font-semibold text-secondary-600">
                           Form Data
                         </p>
-                        <div className="max-h-80 divide-y divide-gray-300 overflow-scroll rounded-lg border border-gray-300 text-sm">
+                        <div className="max-h-80 divide-y divide-secondary-300 overflow-scroll rounded-lg border border-secondary-300 text-sm">
                           {Object.keys(formFields ?? {})
                             .filter((field) => formFields?.[field])
                             .map((field) => {
@@ -596,10 +596,10 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                                   key={field}
                                   className="flex flex-col bg-white px-3 py-1"
                                 >
-                                  <p className="mb-1 font-bold text-gray-600">
+                                  <p className="mb-1 font-bold text-secondary-600">
                                     {fieldDetails?.friendlyName}
                                   </p>
-                                  <p className="text-gray-800">
+                                  <p className="text-secondary-800">
                                     {processFormField(
                                       fieldDetails,
                                       formFields,
@@ -613,7 +613,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                       </div>
                     )}
                   {stage === "final-review" && (
-                    <p className="mt-2 text-sm text-gray-600">
+                    <p className="mt-2 text-sm text-secondary-600">
                       {getStageMessage(stage)}
                     </p>
                   )}
@@ -634,7 +634,7 @@ export const Scribe: React.FC<ScribeProps> = ({ fields, onFormUpdate }) => {
                   </p>
                 ))}
                 {!(stage === "review" || stage === "final-review") && (
-                  <p className="animate-pulse text-sm text-gray-500">
+                  <p className="animate-pulse text-sm text-secondary-500">
                     {getStageMessage(stage)}
                   </p>
                 )}
diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index 767ab402265..58b39f10a58 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -49,7 +49,7 @@ const CommentSection = (props: CommentSectionProps) => {
             value={commentBox}
             minLength={3}
             placeholder={t("type_your_comment")}
-            className="mt-4 rounded-lg border border-gray-500 p-4 focus:ring-primary-500"
+            className="mt-4 rounded-lg border border-secondary-500 p-4 focus:ring-primary-500"
             onChange={(e) => setCommentBox(e.target.value)}
           />
           <div className="flex w-full justify-end">
@@ -92,21 +92,21 @@ export const Comment = ({
   return (
     <div
       key={id}
-      className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+      className="mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-4 text-secondary-800"
     >
       <div className="flex  w-full ">
         <p className="text-justify">{comment}</p>
       </div>
       <div className="mt-3">
-        <span className="text-xs text-gray-500">
+        <span className="text-xs text-secondary-500">
           {modified_date ? formatDateTime(modified_date) : "-"}
         </span>
       </div>
-      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+      <div className=" mr-auto flex items-center rounded-md border bg-secondary-100 py-1 pl-2 pr-3">
         <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
           {created_by_object?.first_name?.charAt(0) || t("unknown")}
         </div>
-        <span className="pl-2 text-sm text-gray-700">
+        <span className="pl-2 text-sm text-secondary-700">
           {created_by_object?.first_name || t("unknown")}{" "}
           {created_by_object?.last_name}
         </span>
diff --git a/src/Components/Shifting/Commons.tsx b/src/Components/Shifting/Commons.tsx
index 284b6e4ce5a..f8da252e23a 100644
--- a/src/Components/Shifting/Commons.tsx
+++ b/src/Components/Shifting/Commons.tsx
@@ -73,7 +73,7 @@ export const formatFilter = (params: any) => {
 export const badge = (key: string, value: any) => {
   return (
     value && (
-      <span className="inline-flex items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600">
+      <span className="inline-flex items-center rounded-full border bg-white px-3 py-1 text-xs font-medium leading-4 text-secondary-600">
         {key}
         {": "}
         {value}
diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
index ffffa3f2baf..cfffcef7377 100644
--- a/src/Components/Shifting/ListView.tsx
+++ b/src/Components/Shifting/ListView.tsx
@@ -69,7 +69,7 @@ export default function ListView() {
   const showShiftingCardList = (data: any) => {
     if (data && !data.length) {
       return (
-        <div className="mt-64 flex flex-1 justify-center text-gray-600">
+        <div className="mt-64 flex flex-1 justify-center text-secondary-600">
           {t("no_patients_to_show")}
         </div>
       );
@@ -97,10 +97,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("shifting_status")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-truck" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.status}
                     </dd>
                   </dt>
@@ -108,10 +108,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("phone_number")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-mobile-android" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.patient_object.phone_number || ""}
                     </dd>
                   </dt>
@@ -119,10 +119,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("origin_facility")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-departure" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {(shift.origin_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -131,10 +131,10 @@ export default function ListView() {
                   <div className="sm:col-span-1">
                     <dt
                       title={t("shifting_approving_facility")}
-                      className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                      className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                     >
                       <CareIcon icon="l-user-check" className="mr-2" />
-                      <dd className="text-sm font-bold leading-5 text-gray-900">
+                      <dd className="text-sm font-bold leading-5 text-secondary-900">
                         {(shift.shifting_approving_facility_object || {}).name}
                       </dd>
                     </dt>
@@ -143,11 +143,11 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("assigned_facility")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-plane-arrival" className="m-2" />
 
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.assigned_facility_external ||
                         shift.assigned_facility_object?.name ||
                         t("yet_to_be_decided")}
@@ -163,7 +163,7 @@ export default function ListView() {
                       (dayjs()
                         .subtract(2, "hours")
                         .isBefore(shift.modified_date)
-                        ? "text-gray-900"
+                        ? "text-secondary-900"
                         : "rounded bg-red-400 p-1 text-white")
                     }
                   >
@@ -177,10 +177,10 @@ export default function ListView() {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("patient_address")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-home" className="mr-2" />
-                    <dd className="text-sm font-bold leading-5 text-gray-900">
+                    <dd className="text-sm font-bold leading-5 text-secondary-900">
                       {shift.patient_object.address || "--"}
                     </dd>
                   </dt>
diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
index 457f110c271..f4f70d0cced 100644
--- a/src/Components/Shifting/ShiftDetails.tsx
+++ b/src/Components/Shifting/ShiftDetails.tsx
@@ -468,7 +468,7 @@ export default function ShiftDetails(props: { id: string }) {
           <div className="mt-20 flex justify-center text-center">
             {t("auto_generated_for_care")}
           </div>
-          <div className="font-xs font-gray-600 text-center font-mono">
+          <div className="font-xs font-secondary-600 text-center font-mono">
             {window.location.origin}/shifting/{data.id}
           </div>
         </div>
@@ -773,10 +773,10 @@ export default function ShiftDetails(props: { id: string }) {
 
               <div className="mt-2 grid rounded-lg bg-white p-2 px-4 text-center shadow lg:grid-cols-2">
                 <div className="border-b-2 pb-2 lg:border-b-0 lg:border-r-2 lg:pb-0">
-                  <div className="text-sm font-medium leading-5 text-gray-500">
+                  <div className="text-sm font-medium leading-5 text-secondary-500">
                     {t("created")}
                   </div>
-                  <div className="mt-1 whitespace-pre text-sm leading-5 text-gray-900">
+                  <div className="mt-1 whitespace-pre text-sm leading-5 text-secondary-900">
                     <RecordMeta
                       time={data?.created_date}
                       user={data?.created_by_object}
@@ -786,10 +786,10 @@ export default function ShiftDetails(props: { id: string }) {
                   </div>
                 </div>
                 <div className="mt-2 lg:mt-0">
-                  <div className="text-sm font-medium leading-5 text-gray-500">
+                  <div className="text-sm font-medium leading-5 text-secondary-500">
                     {t("last_edited")}
                   </div>
-                  <div className="mt-1 whitespace-pre text-sm leading-5 text-gray-900">
+                  <div className="mt-1 whitespace-pre text-sm leading-5 text-secondary-900">
                     <RecordMeta
                       time={data?.modified_date}
                       user={data?.last_edited_by_object}
diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx
index 84a4ac419d3..3a72cfca3a0 100644
--- a/src/Components/Shifting/ShiftingBoard.tsx
+++ b/src/Components/Shifting/ShiftingBoard.tsx
@@ -90,10 +90,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("phone_number")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-mobile-android" className="mr-2 text-xl" />
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {shift.patient_object.phone_number || ""}
                   </dd>
                 </dt>
@@ -101,10 +101,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("origin_facility")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-plane-departure" className="mr-2 text-xl" />
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {(shift.origin_facility_object || {}).name}
                   </dd>
                 </dt>
@@ -113,10 +113,10 @@ const ShiftCard = ({ shift, filter }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("shifting_approving_facility")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user-check" className="mr-2 text-xl" />
-                    <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                    <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                       {(shift.shifting_approving_facility_object || {}).name}
                     </dd>
                   </dt>
@@ -125,11 +125,11 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("assigned_facility")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-plane-arrival" className="mr-2 text-xl" />
 
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {shift.assigned_facility_external ||
                       shift.assigned_facility_object?.name ||
                       t("yet_to_be_decided")}
@@ -143,7 +143,7 @@ const ShiftCard = ({ shift, filter }: any) => {
                   className={
                     "flex items-center text-sm font-medium leading-5 " +
                     (dayjs().subtract(2, "hours").isBefore(shift.modified_date)
-                      ? "text-gray-900"
+                      ? "text-secondary-900"
                       : "rounded bg-red-400 p-1 text-white")
                   }
                 >
@@ -157,10 +157,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("patient_address")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-home" className="mr-2 text-xl" />
-                  <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                  <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                     {shift.patient_object.address || "--"}
                   </dd>
                 </dt>
@@ -170,10 +170,10 @@ const ShiftCard = ({ shift, filter }: any) => {
                 <div className="sm:col-span-1">
                   <dt
                     title={t("assigned_to")}
-                    className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                    className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                   >
                     <CareIcon icon="l-user" className="mr-2 text-xl" />
-                    <dd className="break-normal text-sm font-bold leading-5 text-gray-900">
+                    <dd className="break-normal text-sm font-bold leading-5 text-secondary-900">
                       {shift.assigned_to_object.first_name}{" "}
                       {shift.assigned_to_object.last_name} -{" "}
                       {shift.assigned_to_object.user_type}
@@ -185,10 +185,10 @@ const ShiftCard = ({ shift, filter }: any) => {
               <div className="sm:col-span-1">
                 <dt
                   title={t("patient_state")}
-                  className="flex items-center text-sm font-medium leading-5 text-gray-500"
+                  className="flex items-center text-sm font-medium leading-5 text-secondary-500"
                 >
                   <CareIcon icon="l-map-marker" className="mr-2 text-xl" />
-                  <dd className="text-sm font-bold leading-5 text-gray-900">
+                  <dd className="text-sm font-bold leading-5 text-secondary-900">
                     {shift.patient_object.state_object.name || "--"}
                   </dd>
                 </dt>
@@ -344,12 +344,12 @@ export default function ShiftingBoard({
     <div
       ref={drop}
       className={classNames(
-        "mr-2 h-full w-full flex-shrink-0 rounded-md bg-gray-200 pb-4 md:w-1/2 lg:w-1/3 xl:w-1/4",
+        "mr-2 h-full w-full flex-shrink-0 rounded-md bg-secondary-200 pb-4 md:w-1/2 lg:w-1/3 xl:w-1/4",
         isOver && "cursor-move",
       )}
       style={{ minHeight: `${containerHeight + 100}px` }}
     >
-      <div className="sticky top-0 z-10 rounded bg-gray-200 pt-2">
+      <div className="sticky top-0 z-10 rounded bg-secondary-200 pt-2">
         <div className="mx-2 flex items-center justify-between rounded bg-white p-4 shadow">
           <h3 className="flex h-8 items-center text-xs">
             {title || board}{" "}
@@ -376,13 +376,13 @@ export default function ShiftingBoard({
             )}
         {isLoading ? (
           <div className="m-1">
-            <div className="mx-auto w-full max-w-sm rounded-md border border-gray-300 bg-white p-4 shadow">
+            <div className="mx-auto w-full max-w-sm rounded-md border border-secondary-300 bg-white p-4 shadow">
               <div className="flex animate-pulse space-x-4 ">
                 <div className="flex-1 space-y-4 py-1">
-                  <div className="h-4 w-3/4 rounded bg-gray-400"></div>
+                  <div className="h-4 w-3/4 rounded bg-secondary-400"></div>
                   <div className="space-y-2">
-                    <div className="h-4 rounded bg-gray-400"></div>
-                    <div className="h-4 w-5/6 rounded bg-gray-400"></div>
+                    <div className="h-4 rounded bg-secondary-400"></div>
+                    <div className="h-4 w-5/6 rounded bg-secondary-400"></div>
                   </div>
                 </div>
               </div>
diff --git a/src/Components/Symptoms/SymptomsBuilder.tsx b/src/Components/Symptoms/SymptomsBuilder.tsx
index b4a11cf6999..8a904f6b441 100644
--- a/src/Components/Symptoms/SymptomsBuilder.tsx
+++ b/src/Components/Symptoms/SymptomsBuilder.tsx
@@ -24,7 +24,7 @@ export const CreateSymptomsBuilder = (props: {
   onChange: (value: Writable<EncounterSymptom>[]) => void;
 }) => {
   return (
-    <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+    <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
       <ul className="flex w-full flex-col gap-2 p-4">
         {props.value.map((obj, index, arr) => {
           const handleUpdate = (event: FieldChangeEvent<unknown>) => {
@@ -40,7 +40,7 @@ export const CreateSymptomsBuilder = (props: {
             <li
               key={index}
               id={`symptom-${index}`}
-              className="border-b-2 border-dashed border-gray-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
+              className="border-b-2 border-dashed border-secondary-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
             >
               <SymptomEntry
                 value={obj}
@@ -53,12 +53,12 @@ export const CreateSymptomsBuilder = (props: {
       </ul>
 
       {props.value.length === 0 && (
-        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-gray-700">
+        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-secondary-700">
           No symptoms added
         </div>
       )}
 
-      <div className="w-full rounded-b-lg border-t-2 border-dashed border-gray-400 bg-gray-100 p-4">
+      <div className="w-full rounded-b-lg border-t-2 border-dashed border-secondary-400 bg-secondary-100 p-4">
         <AddSymptom
           existing={props.value}
           onAdd={(objects) => props.onChange([...props.value, ...objects])}
@@ -82,7 +82,7 @@ export const EncounterSymptomsBuilder = (props: {
 
   if (!data) {
     return (
-      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-gray-200 py-8 text-center font-medium text-gray-700">
+      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-secondary-200 py-8 text-center font-medium text-secondary-700">
         <CareIcon icon="l-spinner-alt" className="animate-spin text-lg" />
         <span>Fetching symptom records...</span>
       </div>
@@ -97,7 +97,7 @@ export const EncounterSymptomsBuilder = (props: {
   }
 
   return (
-    <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+    <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
       <ul
         className={classNames(
           "flex w-full flex-col p-4",
@@ -133,7 +133,7 @@ export const EncounterSymptomsBuilder = (props: {
           return (
             <li
               key={symptom.id}
-              className="border-b-2 border-dashed border-gray-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
+              className="border-b-2 border-dashed border-secondary-400 py-4 last:border-b-0 last:pb-0 md:border-b-0 md:py-2"
             >
               <SymptomEntry
                 value={symptom}
@@ -147,12 +147,12 @@ export const EncounterSymptomsBuilder = (props: {
       </ul>
 
       {items.length === 0 && (
-        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-gray-700">
+        <div className="flex w-full justify-center gap-2 pb-8 text-center font-medium text-secondary-700">
           Patient is Asymptomatic
         </div>
       )}
 
-      <div className="w-full rounded-b-lg border-t-2 border-dashed border-gray-400 bg-gray-100 p-4">
+      <div className="w-full rounded-b-lg border-t-2 border-dashed border-secondary-400 bg-secondary-100 p-4">
         <AddSymptom
           existing={data.results}
           consultationId={consultationId}
@@ -202,7 +202,7 @@ const SymptomEntry = (props: {
         <div
           className={classNames(
             "cui-input-base w-full font-medium",
-            disabled && "bg-gray-200",
+            disabled && "bg-secondary-200",
           )}
         >
           <span
@@ -381,7 +381,7 @@ export const SymptomText = (props: {
       <span className="font-normal">Other: </span>
       <span
         className={classNames(
-          !props.value.other_symptom?.trim() && "italic text-gray-700",
+          !props.value.other_symptom?.trim() && "italic text-secondary-700",
         )}
       >
         {props.value.other_symptom || "Not specified"}
diff --git a/src/Components/Symptoms/SymptomsCard.tsx b/src/Components/Symptoms/SymptomsCard.tsx
index 7dbf920a7b6..04c33d4440c 100644
--- a/src/Components/Symptoms/SymptomsCard.tsx
+++ b/src/Components/Symptoms/SymptomsCard.tsx
@@ -18,7 +18,7 @@ const EncounterSymptomsCard = () => {
 
   if (!data) {
     return (
-      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-gray-200 py-8 text-center font-medium text-gray-700">
+      <div className="flex w-full animate-pulse justify-center gap-2 rounded-lg bg-secondary-200 py-8 text-center font-medium text-secondary-700">
         <CareIcon icon="l-spinner-alt" className="animate-spin text-lg" />
         <span>Fetching symptom records...</span>
       </div>
@@ -29,11 +29,11 @@ const EncounterSymptomsCard = () => {
 
   return (
     <div id="encounter-symptoms">
-      <h3 className="mb-2 text-lg font-semibold leading-relaxed text-gray-900">
+      <h3 className="mb-2 text-lg font-semibold leading-relaxed text-secondary-900">
         Symptoms
       </h3>
 
-      <div className="grid gap-4 divide-y-2 divide-dashed divide-gray-400 md:grid-cols-2 md:divide-x-2 md:divide-y-0">
+      <div className="grid gap-4 divide-y-2 divide-dashed divide-secondary-400 md:grid-cols-2 md:divide-x-2 md:divide-y-0">
         <SymptomsSection title="Active" symptoms={records["in-progress"]} />
         <div className="pt-4 md:pl-6 md:pt-0">
           <SymptomsSection title="Cured" symptoms={records["completed"]} />
@@ -49,7 +49,7 @@ const SymptomsSection = (props: {
 }) => {
   return (
     <div>
-      <h4 className="text-base font-semibold leading-relaxed text-gray-900">
+      <h4 className="text-base font-semibold leading-relaxed text-secondary-900">
         {props.title}
       </h4>
       <ul className="flex list-disc flex-col px-4">
@@ -58,7 +58,7 @@ const SymptomsSection = (props: {
             <div>
               <SymptomText value={record} />
               <br />
-              <span className="flex text-sm text-gray-800">
+              <span className="flex text-sm text-secondary-800">
                 <span className="flex gap-1">
                   Onset <RecordMeta time={record.onset_date} />
                 </span>
@@ -73,7 +73,7 @@ const SymptomsSection = (props: {
         ))}
       </ul>
       {!props.symptoms.length && (
-        <div className="flex h-full w-full gap-2 font-medium text-gray-700">
+        <div className="flex h-full w-full gap-2 font-medium text-secondary-700">
           No symptoms
         </div>
       )}
diff --git a/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx b/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx
index df21d01ecdd..56c046be4f8 100644
--- a/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx
+++ b/src/Components/Users/ConfirmHomeFacilityUpdateDialog.tsx
@@ -34,7 +34,7 @@ const ConfirmHomeFacilityUpdateDialog = (props: ConfirmDialogProps) => {
       disabled={disable}
       variant="danger"
     >
-      <div className="flex leading-relaxed text-gray-800">
+      <div className="flex leading-relaxed text-secondary-800">
         <div>
           Are you sure you want to replace{" "}
           <strong>{previousFacilityName}</strong> with{" "}
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index ddcad2d0cd2..9660f13c269 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -94,6 +94,7 @@ export default function ManageUsers() {
       user_type: qParams.user_type,
       district_id: qParams.district,
       home_facility: qParams.home_facility,
+      last_active_days: qParams.last_active_days,
     },
   });
 
@@ -204,7 +205,7 @@ export default function ManageUsers() {
                       {user.username}
                     </div>
                   )}
-                  <div className="min-width-50 shrink-0 text-sm text-gray-600">
+                  <div className="min-width-50 shrink-0 text-sm text-secondary-600">
                     {user.last_login && cur_online ? (
                       <span>
                         {" "}
@@ -221,7 +222,7 @@ export default function ManageUsers() {
                           aria-label="Online"
                           className={classNames(
                             "inline-block h-2 w-2 shrink-0 rounded-full",
-                            cur_online ? "bg-primary-400" : "bg-gray-300",
+                            cur_online ? "bg-primary-400" : "bg-secondary-300",
                           )}
                         ></span>
                         <span className="pl-2">
@@ -288,7 +289,7 @@ export default function ManageUsers() {
                               {user.doctor_qualification}
                             </span>
                           ) : (
-                            <span className="text-gray-600">Unknown</span>
+                            <span className="text-secondary-600">Unknown</span>
                           )}
                         </UserDetails>
                       </div>
@@ -304,7 +305,7 @@ export default function ManageUsers() {
                               years
                             </span>
                           ) : (
-                            <span className="text-gray-600">Unknown</span>
+                            <span className="text-secondary-600">Unknown</span>
                           )}
                         </UserDetails>
                       </div>
@@ -318,7 +319,7 @@ export default function ManageUsers() {
                               {user.doctor_medical_council_registration}
                             </span>
                           ) : (
-                            <span className="text-gray-600">Unknown</span>
+                            <span className="text-secondary-600">Unknown</span>
                           )}
                         </UserDetails>
                       </div>
@@ -374,7 +375,7 @@ export default function ManageUsers() {
                         {user.weekly_working_hours} hours
                       </span>
                     ) : (
-                      <span className="text-gray-600">-</span>
+                      <span className="text-secondary-600">-</span>
                     )}
                   </UserDetails>
                 </div>
@@ -448,7 +449,7 @@ export default function ManageUsers() {
     manageUsers = (
       <div>
         <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-          <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+          <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
             No Users Found
           </div>
         </div>
@@ -557,11 +558,18 @@ export default function ManageUsers() {
               "home_facility",
               qParams.home_facility ? homeFacilityData?.name || "" : "",
             ),
+            value(
+              "Last Active",
+              "last_active_days",
+              qParams.last_active_days === "never"
+                ? "Never"
+                : `in the last ${qParams.last_active_days} day${qParams.last_active_days > 1 ? "s" : ""}`,
+            ),
           ]}
         />
       </div>
 
-      <div>
+      <div className="pt-4">
         <div>{manageUsers}</div>
       </div>
       {userData.show && (
@@ -755,7 +763,7 @@ export function UserFacilities(props: { user: any }) {
           {t("add")}
         </ButtonV2>
       </div>
-      <hr className="my-2 border-gray-300" />
+      <hr className="my-2 border-secondary-300" />
 
       {isLoading || userFacilitiesLoading ? (
         <div className="flex items-center justify-center">
@@ -766,7 +774,7 @@ export function UserFacilities(props: { user: any }) {
           {/* Home Facility section */}
           {user?.home_facility_object && (
             <div className="py-2" id="home-facility">
-              <div className="relative rounded p-2 transition hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg">
+              <div className="relative rounded p-2 transition hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg">
                 <div className="flex items-center justify-between">
                   <span>{user?.home_facility_object?.name}</span>
                   <span
@@ -820,7 +828,7 @@ export function UserFacilities(props: { user: any }) {
                         id={`facility_${i}`}
                         key={`facility_${i}`}
                         className={classNames(
-                          "relative rounded p-2 transition hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg",
+                          "relative rounded p-2 transition hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg",
                         )}
                       >
                         <div className="flex items-center justify-between">
diff --git a/src/Components/Users/ProfileComponents.tsx b/src/Components/Users/ProfileComponents.tsx
index f6fd4297f66..b58a602bde9 100644
--- a/src/Components/Users/ProfileComponents.tsx
+++ b/src/Components/Users/ProfileComponents.tsx
@@ -3,11 +3,15 @@ export const LabelValueCard = (props: { children: React.ReactNode }) => (
 );
 
 export const ProfileLabel = (props: { text: string }) => (
-  <dt className="text-sm font-medium leading-5 text-gray-800">{props.text}</dt>
+  <dt className="text-sm font-medium leading-5 text-secondary-800">
+    {props.text}
+  </dt>
 );
 
 export const ProfileValue = (props: { text: string }) => (
-  <dd className="mt-1 text-sm leading-5 text-gray-900">{props.text || "-"}</dd>
+  <dd className="mt-1 text-sm leading-5 text-secondary-900">
+    {props.text || "-"}
+  </dd>
 );
 
 export const ValueBadge = (props: { text: string }) => (
diff --git a/src/Components/Users/SkillsSlideOverComponents.tsx b/src/Components/Users/SkillsSlideOverComponents.tsx
index 9225cacfed8..6b16a26196a 100644
--- a/src/Components/Users/SkillsSlideOverComponents.tsx
+++ b/src/Components/Users/SkillsSlideOverComponents.tsx
@@ -38,7 +38,7 @@ export const SkillsArray = ({
         <div
           key={`facility_${i}`}
           className={classNames(
-            "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg lg:px-8",
+            "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg lg:px-8",
           )}
         >
           <div className="flex justify-between">
diff --git a/src/Components/Users/UnlinkFacilityDialog.tsx b/src/Components/Users/UnlinkFacilityDialog.tsx
index 6b1a3850ddd..0af300ed942 100644
--- a/src/Components/Users/UnlinkFacilityDialog.tsx
+++ b/src/Components/Users/UnlinkFacilityDialog.tsx
@@ -33,7 +33,7 @@ const UnlinkFacilityDialog = (props: ConfirmDialogProps) => {
       disabled={disable}
       variant="danger"
     >
-      <div className="flex leading-relaxed text-gray-800">
+      <div className="flex leading-relaxed text-secondary-800">
         <div>
           Are you sure you want to{" "}
           {isHomeFacility ? "clear the home facility" : "unlink the facility"}{" "}
diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index f7e6b978fb9..ba218226490 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -605,10 +605,11 @@ export const UserAdd = (props: UserProps) => {
       options={
         <Link
           href="https://school.coronasafe.network/targets/12953"
-          className="inline-block rounded border border-gray-600 bg-gray-50 px-4 py-2 text-gray-600 transition hover:bg-gray-100"
+          className="inline-block rounded border border-secondary-600 bg-secondary-50 px-4 py-2 text-secondary-600 transition hover:bg-secondary-100"
           target="_blank"
         >
-          <CareIcon icon="l-info-circle" className="text-lg" /> &nbsp;Need Help?
+          <CareIcon icon="l-question-circle" className="text-lg" /> &nbsp;Need
+          Help?
         </Link>
       }
       backUrl="/users"
@@ -724,7 +725,7 @@ export const UserAdd = (props: UserProps) => {
                 }}
               />
               {usernameInputInFocus && (
-                <div className="text-small pl-2 text-gray-500">
+                <div className="text-small pl-2 text-secondary-500">
                   <div>
                     {usernameExists !== userExistsEnums.idle && (
                       <>
@@ -814,7 +815,7 @@ export const UserAdd = (props: UserProps) => {
                 onBlur={() => setPasswordInputInFocus(false)}
               />
               {passwordInputInFocus && (
-                <div className="text-small pl-2 text-gray-500">
+                <div className="text-small pl-2 text-secondary-500">
                   {validateRule(
                     state.form.password?.length >= 8,
                     "Password should be atleast 8 characters long",
diff --git a/src/Components/Users/UserFilter.tsx b/src/Components/Users/UserFilter.tsx
index d5c16d22571..f79968cef4f 100644
--- a/src/Components/Users/UserFilter.tsx
+++ b/src/Components/Users/UserFilter.tsx
@@ -2,7 +2,10 @@ import { parsePhoneNumber } from "../../Utils/utils";
 import TextFormField from "../Form/FormFields/TextFormField";
 import SelectMenuV2 from "../Form/SelectMenuV2";
 import { FieldLabel } from "../Form/FormFields/FormField";
-import { USER_TYPE_OPTIONS } from "../../Common/constants";
+import {
+  USER_LAST_ACTIVE_OPTIONS,
+  USER_TYPE_OPTIONS,
+} from "../../Common/constants";
 import useMergeState from "../../Common/hooks/useMergeState";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
@@ -35,6 +38,7 @@ export default function UserFilter(props: any) {
     state: filter.state || "",
     home_facility: filter.home_facility || "",
     home_facility_ref: null,
+    last_active_days: filter.last_active_days || "",
   });
 
   useQuery(routes.getAnyFacility, {
@@ -53,6 +57,7 @@ export default function UserFilter(props: any) {
       district,
       state,
       home_facility,
+      last_active_days,
     } = filterState;
     const data = {
       first_name: first_name || "",
@@ -63,6 +68,7 @@ export default function UserFilter(props: any) {
       district: district || "",
       state: district ? state || "" : "",
       home_facility: home_facility || "",
+      last_active_days: last_active_days || "",
     };
     if (state && !district) {
       Notify.Warn({
@@ -142,6 +148,21 @@ export default function UserFilter(props: any) {
         />
       </div>
 
+      <div className="w-full flex-none">
+        <FieldLabel>Active in last...</FieldLabel>
+        <SelectMenuV2
+          id="last_active_days"
+          placeholder="Anytime"
+          options={USER_LAST_ACTIVE_OPTIONS}
+          optionLabel={(o) => o.text}
+          optionValue={(o) => o.id}
+          value={filterState.last_active_days}
+          onChange={(v) =>
+            setFilterState({ ...filterState, last_active_days: v })
+          }
+        />
+      </div>
+
       <StateAutocompleteFormField {...field("state")} errorClassName="hidden" />
       <DistrictAutocompleteFormField
         errorClassName="hidden"
diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
index 50dbc5890c2..8a456be9bcd 100644
--- a/src/Components/Users/UserProfile.tsx
+++ b/src/Components/Users/UserProfile.tsx
@@ -456,10 +456,10 @@ export default function UserProfile() {
         <div className="lg:grid lg:grid-cols-3 lg:gap-6">
           <div className="lg:col-span-1">
             <div className="px-4 sm:px-0">
-              <h3 className="text-lg font-medium leading-6 text-gray-900">
+              <h3 className="text-lg font-medium leading-6 text-secondary-900">
                 Personal Information
               </h3>
-              <p className="my-1 text-sm leading-5 text-gray-600">
+              <p className="my-1 text-sm leading-5 text-secondary-600">
                 Local Body, District and State are Non Editable Settings.
               </p>
               <div className="flex flex-col gap-2">
@@ -488,7 +488,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Username
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.username || "-"}
                     </dd>
                   </div>
@@ -499,7 +499,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Contact No
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.phone_number || "-"}
                     </dd>
                   </div>
@@ -511,7 +511,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Whatsapp No
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.alt_phone_number || "-"}
                     </dd>
                   </div>
@@ -522,7 +522,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Email address
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.email || "-"}
                     </dd>
                   </div>
@@ -533,7 +533,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       First Name
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.first_name || "-"}
                     </dd>
                   </div>
@@ -544,7 +544,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Last Name
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.last_name || "-"}
                     </dd>
                   </div>
@@ -555,7 +555,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Date of Birth
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.date_of_birth
                         ? formatDate(userData?.date_of_birth)
                         : "-"}
@@ -577,7 +577,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Gender
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.gender || "-"}
                     </dd>
                   </div>
@@ -585,7 +585,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Local Body
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.local_body_object?.name || "-"}
                     </dd>
                   </div>
@@ -593,7 +593,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       District
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.district_object?.name || "-"}
                     </dd>
                   </div>
@@ -601,7 +601,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       State
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.state_object?.name || "-"}
                     </dd>
                   </div>
@@ -609,7 +609,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Skills
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       <div
                         className="flex flex-wrap gap-2"
                         id="already-linked-skills"
@@ -617,7 +617,7 @@ export default function UserProfile() {
                         {skillsView?.results?.length
                           ? skillsView.results?.map((skill: SkillModel) => {
                               return (
-                                <span className="flex items-center gap-2 rounded-full border-gray-300 bg-gray-200 px-3 text-xs text-gray-700">
+                                <span className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-700">
                                   <p className="py-1.5">
                                     {skill.skill_object.name}
                                   </p>
@@ -635,7 +635,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Average weekly working hours
                     </dt>
-                    <dd className="mt-1 text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 text-sm leading-5 text-secondary-900">
                       {userData?.weekly_working_hours ?? "-"}
                     </dd>
                   </div>
@@ -646,7 +646,7 @@ export default function UserProfile() {
                     <dt className="text-sm font-medium leading-5 text-black">
                       Video Connect Link
                     </dt>
-                    <dd className="mt-1 break-words text-sm leading-5 text-gray-900">
+                    <dd className="mt-1 break-words text-sm leading-5 text-secondary-900">
                       {userData?.video_connect_link ? (
                         <a
                           className="text-blue-500"
@@ -770,7 +770,7 @@ export default function UserProfile() {
                         />
                       </div>
                     </div>
-                    <div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
+                    <div className="bg-secondary-50 px-4 py-3 text-right sm:px-6">
                       <Submit onClick={handleSubmit} label="Update" />
                     </div>
                   </div>
@@ -809,7 +809,7 @@ export default function UserProfile() {
                             }}
                             required
                           />
-                          <div className="text-small mb-2 hidden pl-2 text-gray-500 peer-focus-within:block">
+                          <div className="text-small mb-2 hidden pl-2 text-secondary-500 peer-focus-within:block">
                             {validateRule(
                               changePasswordForm.new_password_1?.length >= 8,
                               "Password should be atleast 8 characters long",
@@ -845,7 +845,7 @@ export default function UserProfile() {
                             }}
                           />
                           {changePasswordForm.new_password_2.length > 0 && (
-                            <div className="text-small mb-2 hidden pl-2 text-gray-500 peer-focus-within:block">
+                            <div className="text-small mb-2 hidden pl-2 text-secondary-500 peer-focus-within:block">
                               {validateRule(
                                 changePasswordForm.new_password_1 ===
                                   changePasswordForm.new_password_2,
@@ -856,7 +856,7 @@ export default function UserProfile() {
                         </div>
                       </div>
                     </div>
-                    <div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
+                    <div className="bg-secondary-50 px-4 py-3 text-right sm:px-6">
                       <Submit
                         onClick={changePassword}
                         label="Change Password"
@@ -872,10 +872,10 @@ export default function UserProfile() {
         <div className="mb-8 mt-6 md:grid md:grid-cols-3 md:gap-6">
           <div className="md:col-span-1">
             <div className="px-4 sm:px-0">
-              <h3 className="text-lg font-medium leading-6 text-gray-900">
+              <h3 className="text-lg font-medium leading-6 text-secondary-900">
                 Language Selection
               </h3>
-              <p className="mt-1 text-sm leading-5 text-gray-600">
+              <p className="mt-1 text-sm leading-5 text-secondary-600">
                 Set your local language
               </p>
             </div>
@@ -887,10 +887,10 @@ export default function UserProfile() {
         <div className="mb-8 mt-6 md:grid md:grid-cols-3 md:gap-6">
           <div className="md:col-span-1">
             <div className="px-4 sm:px-0">
-              <h3 className="text-lg font-medium leading-6 text-gray-900">
+              <h3 className="text-lg font-medium leading-6 text-secondary-900">
                 Software Update
               </h3>
-              <p className="mt-1 text-sm leading-5 text-gray-600">
+              <p className="mt-1 text-sm leading-5 text-secondary-600">
                 Check for an available update
               </p>
             </div>
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 61c62f80c70..e763f859d3e 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -87,7 +87,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
               <span className="flex-1 text-sm font-bold text-orange-500">
                 Mean
               </span>
-              <span className="flex-1 text-xl font-bold text-gray-300">
+              <span className="flex-1 text-xl font-bold text-secondary-300">
                 {bpWithinMaxPersistence ? data.bp?.map.value ?? "--" : "--"}
               </span>
             </div>
diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index fbca718bf1b..c57daf8f324 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -20,7 +20,7 @@ const VitalsMonitorAssetPopover = ({
       <Popover.Button>
         <CareIcon
           icon="l-info-circle"
-          className="cursor-pointer text-sm text-gray-500 hover:text-white md:text-base"
+          className="cursor-pointer text-sm text-secondary-500 hover:text-white md:text-base"
         />
       </Popover.Button>
       <Transition
@@ -49,13 +49,13 @@ const VitalsMonitorAssetPopover = ({
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-sm md:text-base">Middleware Hostname:</p>
-              <p className="break-words text-gray-600">
+              <p className="break-words text-secondary-600">
                 {asset?.resolved_middleware?.hostname}
               </p>
             </div>
             <div className="flex flex-col gap-1">
               <p className="text-sm md:text-base">Local IP Address:</p>
-              <p className="break-words text-gray-600">
+              <p className="break-words text-secondary-600">
                 {asset?.meta?.local_ip_address}
               </p>
             </div>
diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
index a9598f16965..6692327798e 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
@@ -8,7 +8,7 @@ interface IVitalsMonitorFooterProps {
 const VitalsMonitorFooter = ({ asset }: IVitalsMonitorFooterProps) => {
   return (
     <div className="flex w-full items-center gap-2 text-xs tracking-wide md:text-sm">
-      <p className="text-gray-500 ">{asset?.name}</p>
+      <p className="text-secondary-500 ">{asset?.name}</p>
       <VitalsMonitorAssetPopover asset={asset} />
     </div>
   );
diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
index c3b2888c2f7..7f839da04d7 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
@@ -21,13 +21,13 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
             {patient?.name}
           </Link>
         ) : (
-          <span className="flex items-center gap-1 text-gray-500">
+          <span className="flex items-center gap-1 text-secondary-500">
             <CareIcon icon="l-ban" />
             No Patient
           </span>
         )}
         {patient && (
-          <span className="text-xs font-bold text-gray-400 md:text-sm">
+          <span className="text-xs font-bold text-secondary-400 md:text-sm">
             {`${formatPatientAge(patient)}; `}
             {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
           </span>
@@ -36,8 +36,8 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
       <div className="flex flex-col items-end gap-2 text-xs md:flex-row md:items-center md:text-sm">
         {bed && (
           <Link
-            className="flex flex-col items-end gap-2 text-gray-500 md:flex-row md:items-center"
-            href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
+            className="flex flex-col items-end gap-2 text-secondary-500 md:flex-row md:items-center"
+            href={`/facility/${bed.location_object!.facility!.id}/location/${bed!.location_object!.id}/beds`}
           >
             <span className="flex items-center gap-1 hover:text-white">
               <CareIcon icon="l-bed" className="text-sm md:text-base" />
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 019a51232ba..1c1e3b49ecb 100644
--- a/src/Locale/en/Common.json
+++ b/src/Locale/en/Common.json
@@ -46,8 +46,14 @@
   "apply": "Apply",
   "filter_by": "Filter By",
   "filter": "Filter",
+  "settings_and_filters": "Settings and Filters",
   "ordering": "Ordering",
   "phone_number": "Phone Number",
+  "international_mobile": "International Mobile",
+  "indian_mobile": "Indian Mobile",
+  "mobile": "Mobile",
+  "landline": "Indian landline",
+  "support": "Support",
   "emergency_contact_number": "Emergency Contact Number",
   "last_modified": "Last Modified",
   "patient_address": "Patient Address",
@@ -166,5 +172,9 @@
   "treating_doctor": "Treating Doctor",
   "ration_card__NO_CARD": "Non-card holder",
   "ration_card__BPL": "BPL",
-  "ration_card__APL": "APL"
+  "ration_card__APL": "APL",
+  "caution": "Caution",
+  "feed_optimal_experience_for_phones": "For optimal viewing experience, consider rotating your device.",
+  "feed_optimal_experience_for_apple_phones": "For optimal viewing experience, consider rotating your device. Ensure auto-rotate is enabled in your device settings.",
+  "action_irreversible": "This action is irreversible"
 }
\ No newline at end of file
diff --git a/src/Locale/en/Consultation.json b/src/Locale/en/Consultation.json
index 4df1a4de9a3..d811680d0fd 100644
--- a/src/Locale/en/Consultation.json
+++ b/src/Locale/en/Consultation.json
@@ -36,5 +36,13 @@
   "prev_sessions": "Prev Sessions",
   "next_sessions": "Next Sessions",
   "no_changes": "No changes",
-  "encounter_suggestion_edit_disallowed": "Not allowed to switch to this option in edit consultation"
+  "encounter_suggestion_edit_disallowed": "Not allowed to switch to this option in edit consultation",
+  "encounter_date_field_label__A": "Date & Time of Admission to the Facility",
+  "encounter_date_field_label__DC": "Date & Time of Domiciliary Care commencement",
+  "encounter_date_field_label__OP": "Date & Time of Out-patient visit",
+  "encounter_date_field_label__DD": "Date & Time of Consultation",
+  "encounter_date_field_label__HI": "Date & Time of Consultation",
+  "encounter_date_field_label__R": "Date & Time of Consultation",
+  "back_dated_encounter_date_caution": "You are creating an encounter for",
+  "encounter_duration_confirmation": "The duration of this encounter would be"
 }
\ No newline at end of file
diff --git a/src/Locale/en/Medicine.json b/src/Locale/en/Medicine.json
index 4a5a5785047..c21f5fa236f 100644
--- a/src/Locale/en/Medicine.json
+++ b/src/Locale/en/Medicine.json
@@ -51,6 +51,7 @@
   "PRESCRIPTION_ROUTE_INTRATHECAL": "intrathecal injection",
   "PRESCRIPTION_ROUTE_TRANSDERMAL": "Transdermal",
   "PRESCRIPTION_ROUTE_RECTAL": "Rectal",
+  "PRESCRIPTION_ROUTE_SUBLINGUAL": "Sublingual",
   "PRESCRIPTION_FREQUENCY_STAT": "Imediately",
   "PRESCRIPTION_FREQUENCY_OD": "Once daily",
   "PRESCRIPTION_FREQUENCY_HS": "Night only",
diff --git a/src/Routers/AppRouter.tsx b/src/Routers/AppRouter.tsx
index 04f9223e654..bba3bd04899 100644
--- a/src/Routers/AppRouter.tsx
+++ b/src/Routers/AppRouter.tsx
@@ -107,7 +107,7 @@ export default function AppRouter() {
 
   return (
     <SidebarShrinkContext.Provider value={{ shrinked, setShrinked }}>
-      <div className="absolute inset-0 flex h-screen overflow-hidden bg-gray-100 print:overflow-visible">
+      <div className="absolute inset-0 flex h-screen overflow-hidden bg-secondary-100 print:overflow-visible">
         <>
           <div className="block md:hidden">
             <MobileSidebar open={sidebarOpen} setOpen={setSidebarOpen} />{" "}
@@ -121,7 +121,7 @@ export default function AppRouter() {
           <div className="relative z-10 flex h-16 shrink-0 bg-white shadow md:hidden">
             <button
               onClick={() => setSidebarOpen(true)}
-              className="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-gray-600 focus:outline-none md:hidden"
+              className="border-r border-secondary-200 px-4 text-secondary-500 focus:bg-secondary-100 focus:text-secondary-600 focus:outline-none md:hidden"
               aria-label="Open sidebar"
             >
               <svg
diff --git a/src/Utils/AutoSave.tsx b/src/Utils/AutoSave.tsx
index 163585ed966..fa29b2690d3 100644
--- a/src/Utils/AutoSave.tsx
+++ b/src/Utils/AutoSave.tsx
@@ -127,7 +127,7 @@ export function DraftSection(props: {
         <div className="my-2 flex flex-wrap justify-end">
           {drafts?.length > 0 && (
             <div className="mx-1 flex items-center">
-              <p className="text-gray-500">
+              <p className="text-secondary-500">
                 Last saved draft:{" "}
                 {relativeTime(
                   draftStarted
diff --git a/src/Utils/VoiceRecorder.tsx b/src/Utils/VoiceRecorder.tsx
index cd38d29773f..6336df5cb01 100644
--- a/src/Utils/VoiceRecorder.tsx
+++ b/src/Utils/VoiceRecorder.tsx
@@ -48,7 +48,7 @@ export const VoiceRecorder = (props: any) => {
         {isRecording ? (
           <>
             <div className="flex space-x-2">
-              <div className="bg-gray-100 p-2 text-primary-700">
+              <div className="bg-secondary-100 p-2 text-primary-700">
                 <CareIcon
                   icon="l-record-audio"
                   className="mr-2 animate-pulse"
diff --git a/src/Utils/useFileManager.tsx b/src/Utils/useFileManager.tsx
index d45ddc28f06..6d73710d2b4 100644
--- a/src/Utils/useFileManager.tsx
+++ b/src/Utils/useFileManager.tsx
@@ -224,10 +224,12 @@ export default function useFileManager(
                 className="text-lg text-danger-500"
               />
             </div>
-            <div className="text-grey-200 text-sm">
+            <div className="text-sm">
               <h1 className="text-xl text-black">Archive File</h1>
-              This action is irreversible. Once a file is archived it cannot be
-              unarchived.
+              <span className="text-sm text-secondary-600">
+                This action is irreversible. Once a file is archived it cannot
+                be unarchived.
+              </span>
             </div>
           </div>
         }
@@ -277,7 +279,7 @@ export default function useFileManager(
         className="md:w-[700px]"
         onClose={() => setArchiveDialogueOpen(null)}
       >
-        <div className="mb-8 text-xs text-gray-700">
+        <div className="mb-8 text-xs text-secondary-700">
           <CareIcon icon="l-archive" className="mr-2" />
           This file has been archived and cannot be unarchived.
         </div>
@@ -322,7 +324,7 @@ export default function useFileManager(
                 />
               </div>
               <div>
-                <div className="text-xs uppercase text-gray-700">
+                <div className="text-xs uppercase text-secondary-700">
                   {item.label}
                 </div>
                 <div className="break-words text-base">{item.content}</div>
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index d599a494b1c..60c49da0dc9 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -454,3 +454,22 @@ export const isPostPartum = (data_of_delivery?: string) => {
 export const isAntenatal = (menstruation_start_date?: string) => {
   return dayjs().diff(menstruation_start_date, "month") <= 9;
 };
+
+/**
+ * A utility method to format an array of string to human readable format.
+ *
+ * @param values Array of strings to be made human readable.
+ * @returns Human readable version of the list of strings
+ */
+export const humanizeStrings = (strings: readonly string[], empty = "") => {
+  if (strings.length === 0) {
+    return empty;
+  }
+
+  if (strings.length === 1) {
+    return strings[0];
+  }
+
+  const [last, ...items] = [...strings].reverse();
+  return `${items.reverse().join(", ")} and ${last}`;
+};
diff --git a/src/style/CAREUI.css b/src/style/CAREUI.css
index eec8694bf03..048b9289007 100644
--- a/src/style/CAREUI.css
+++ b/src/style/CAREUI.css
@@ -18,11 +18,11 @@
 }
 
 .cui-input-base {
-    @apply text-sm block w-full py-3 px-4 text-black placeholder:text-gray-600 bg-white disabled:bg-gray-200 border border-gray-400 focus:border-primary-400 ring-0 focus:ring-1 ring-primary-400 outline-none focus:outline-none shadow-none rounded transition-colors duration-300 !important
+    @apply text-sm block w-full py-3 px-4 text-black placeholder:text-secondary-600 bg-white disabled:bg-secondary-200 border border-secondary-400 focus:border-primary-400 ring-0 focus:ring-1 ring-primary-400 outline-none focus:outline-none shadow-none rounded transition-colors duration-300 !important
 }
 
 .cui-dropdown-base {
-    @apply z-40 w-full rounded-b-md xl:rounded-b-lg shadow-lg overflow-auto max-h-96 bg-gray-100 divide-y divide-gray-300 ring-1 ring-gray-400 focus:outline-none
+    @apply z-40 w-full rounded-b-md xl:rounded-b-lg shadow-lg overflow-auto max-h-96 bg-secondary-100 divide-y divide-secondary-300 ring-1 ring-secondary-400 focus:outline-none
 }
 
 .cui-card {
diff --git a/src/style/index.css b/src/style/index.css
index b05417bf912..c30a893f8ac 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -41,7 +41,7 @@ html {
 body {
     font-family: "Inter", sans-serif;
     color: #453c52;
-    @apply font-sans text-gray-900 w-full h-full antialiased;
+    @apply font-sans text-secondary-900 w-full h-full antialiased;
 }
 
 h1,
@@ -127,27 +127,27 @@ button:focus {
 /* Button Styles */
 
 .btn-default {
-    @apply border text-gray-800;
+    @apply border text-secondary-800;
 }
 
 .btn-default:hover {
-    @apply bg-gray-100 text-gray-600;
+    @apply bg-secondary-100 text-secondary-600;
 }
 
 .btn-default:focus {
-    @apply bg-gray-400 text-gray-700;
+    @apply bg-secondary-400 text-secondary-700;
 }
 
 .btn-subtle {
-    @apply bg-gray-200 text-gray-800;
+    @apply bg-secondary-200 text-secondary-800;
 }
 
 .btn-subtle:hover {
-    @apply bg-gray-300 text-gray-900;
+    @apply bg-secondary-300 text-secondary-900;
 }
 
 .btn-subtle:focus {
-    @apply bg-gray-400 text-gray-900;
+    @apply bg-secondary-400 text-secondary-900;
 }
 
 .btn-primary-ghost {
@@ -211,12 +211,12 @@ button:focus {
 }
 
 .secondary-button {
-    @apply text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-6 py-2.5 mr-2 mb-2 transition-all ease-in-out duration-200 !important;
+    @apply text-secondary-900 bg-white border border-secondary-300 focus:outline-none hover:bg-secondary-100 focus:ring-4 focus:ring-secondary-200 font-medium rounded-lg text-sm px-6 py-2.5 mr-2 mb-2 transition-all ease-in-out duration-200 !important;
 }
 
 button:disabled,
 .disabled {
-    @apply cursor-not-allowed bg-gray-300 text-gray-500 shadow-none border-transparent;
+    @apply cursor-not-allowed bg-secondary-300 text-secondary-500 shadow-none border-transparent;
     background-image: none;
 }
 
@@ -224,7 +224,7 @@ button:disabled:hover,
 .disabled:hover,
 button:disabled:focus,
 .disabled:focus {
-    @apply bg-gray-300 text-gray-500 border-transparent shadow-none;
+    @apply bg-secondary-300 text-secondary-500 border-transparent shadow-none;
     background-image: none;
 }
 
@@ -268,7 +268,7 @@ button:disabled:focus,
 }
 
 .radio-label span:first-child {
-    @apply relative rounded-full align-middle border border-gray-500 bg-white mr-3;
+    @apply relative rounded-full align-middle border border-secondary-500 bg-white mr-3;
     width: 1.125rem;
     height: 1.125rem;
     transform: scale(1);
@@ -322,7 +322,7 @@ button:disabled:focus,
 }
 
 .checkbox__label span:first-child {
-    @apply relative rounded align-middle border border-gray-500 bg-white w-4 h-4 mr-3;
+    @apply relative rounded align-middle border border-secondary-500 bg-white w-4 h-4 mr-3;
     transform: scale(1);
     transition: all 0.2s ease;
 }
@@ -375,25 +375,25 @@ button:disabled:focus,
 }
 
 label {
-    @apply block text-gray-700 text-sm font-medium;
+    @apply block text-secondary-700 text-sm font-medium;
 }
 
 input {
-    @apply border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300 !important;
+    @apply border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300 !important;
 }
 
 input:disabled,
 .disabled {
-    @apply cursor-not-allowed bg-gray-200 border-gray-400 text-gray-700;
+    @apply cursor-not-allowed bg-secondary-200 border-secondary-400 text-secondary-700;
 }
 
 textarea {
-    @apply border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300;
+    @apply border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 transition-colors duration-300;
 }
 
 button:disabled,
 .disabled {
-    @apply cursor-not-allowed bg-gray-300 text-gray-500 shadow-none border-transparent;
+    @apply cursor-not-allowed bg-secondary-300 text-secondary-500 shadow-none border-transparent;
     background-image: none;
 }
 
@@ -401,17 +401,17 @@ button:disabled,
 /* Styling skeleton loading */
 
 .skeleton-placeholder__line-sm {
-    @apply rounded-full bg-gray-100;
+    @apply rounded-full bg-secondary-100;
     height: 0.625rem;
 }
 
 .skeleton-placeholder__line-md {
-    @apply rounded-full bg-gray-100;
+    @apply rounded-full bg-secondary-100;
     height: 1rem;
 }
 
 .skeleton-placeholder__image {
-    @apply mt-5 h-48 rounded-lg bg-gray-100;
+    @apply mt-5 h-48 rounded-lg bg-secondary-100;
 }
 
 .skeleton-animate {
diff --git a/tailwind.config.js b/tailwind.config.js
index e856f0e178b..a40c805621f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ const colors = require("tailwindcss/colors");
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 const gray = {
+  50: "#F9FAFB",
   100: "#FBFAFC",
   200: "#F7F5FA",
   300: "#F1EDF7",
@@ -43,7 +44,7 @@ module.exports = {
           800: "#03543F",
           900: "#014737",
         },
-        secondary: gray, // equivalent to our custom gray, but will become equivalent to tailwind's gray in tailwind v3.2
+        secondary: gray,
         danger: colors.red,
         warning: colors.amber,
         alert: colors.violet,