diff --git a/cypress/e2e/patient_spec/patient_consultation.cy.ts b/cypress/e2e/patient_spec/patient_consultation.cy.ts
index 99565a24cc4..36c3ebdcb40 100644
--- a/cypress/e2e/patient_spec/patient_consultation.cy.ts
+++ b/cypress/e2e/patient_spec/patient_consultation.cy.ts
@@ -376,7 +376,6 @@ describe("Patient Consultation in multiple combination", () => {
   it("Edit created consultation to existing patient", () => {
     patientPage.visitPatient("Dummy Patient 13");
     patientConsultationPage.clickEditConsultationButton();
-    cy.wait(5000);
     patientConsultationPage.typePatientIllnessHistory("editted");
     patientConsultationPage.selectPatientDiagnosis(
       diagnosis5,
diff --git a/cypress/e2e/patient_spec/patient_logupdate.cy.ts b/cypress/e2e/patient_spec/patient_logupdate.cy.ts
new file mode 100644
index 00000000000..57f31980679
--- /dev/null
+++ b/cypress/e2e/patient_spec/patient_logupdate.cy.ts
@@ -0,0 +1,156 @@
+import { afterEach, before, beforeEach, cy, describe, it } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
+import { PatientPage } from "../../pageobject/Patient/PatientCreation";
+import PatientLogupdate from "../../pageobject/Patient/PatientLogupdate";
+
+describe("Patient Log Update in Normal, Critical and TeleIcu", () => {
+  const loginPage = new LoginPage();
+  const patientConsultationPage = new PatientConsultationPage();
+  const patientPage = new PatientPage();
+  const patientLogupdate = new PatientLogupdate();
+  const domicilaryPatient = "Dummy Patient 11";
+  const patientCategory = "Abnormal";
+  const additionalSymptoms = "ASYMPTOMATIC";
+  const physicalExamination = "physical examination details";
+  const otherExamination = "Other";
+  const patientSystolic = "119";
+  const patientDiastolic = "150";
+  const patientModifiedSystolic = "120";
+  const patientModifiedDiastolic = "145";
+  const patientPulse = "152";
+  const patientTemperature = "96.6";
+  const patientRespiratory = "140";
+  const patientSpo2 = "15";
+  const patientRhythmType = "Regular";
+  const patientRhythm = "Normal Rhythm";
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
+    cy.awaitUrl("/patients");
+  });
+
+  it("Create a new log teleicu update for a domicilary care patient and verify the copy previous value function", () => {
+    patientPage.visitPatient("Dummy Patient 11");
+    patientConsultationPage.clickEditConsultationButton();
+    patientConsultationPage.selectPatientSuggestion("Domiciliary Care");
+    cy.submitButton("Update Consultation");
+    cy.verifyNotification("Consultation updated successfully");
+    patientLogupdate.clickLogupdate();
+    patientLogupdate.typePhysicalExamination(physicalExamination);
+    patientLogupdate.typeOtherDetails(otherExamination);
+    patientLogupdate.typeAdditionalSymptoms(additionalSymptoms);
+    patientLogupdate.selectPatientCategory(patientCategory);
+    patientLogupdate.typeSystolic(patientSystolic);
+    patientLogupdate.typeDiastolic(patientDiastolic);
+    patientLogupdate.typePulse(patientPulse);
+    patientLogupdate.typeTemperature(patientTemperature);
+    patientLogupdate.typeRespiratory(patientRespiratory);
+    patientLogupdate.typeSpo2(patientSpo2);
+    patientLogupdate.selectRhythm(patientRhythmType);
+    patientLogupdate.typeRhythm(patientRhythm);
+    cy.get("#consciousness_level-2").click();
+    cy.submitButton("Save");
+    cy.verifyNotification("Consultation Updates details created successfully");
+    // verify the copied previous value
+    cy.closeNotification();
+    patientLogupdate.clickLogupdate();
+    patientLogupdate.clickCopyPreviousValue();
+    patientLogupdate.selectPatientCategory(patientCategory);
+    cy.submitButton("Save");
+    cy.closeNotification();
+    cy.verifyContentPresence("#physical_examination_info", [
+      physicalExamination,
+    ]);
+    cy.verifyContentPresence("#rhythm_detail", [patientRhythm]);
+    cy.submitButton("Continue");
+    cy.verifyNotification("Consultation Updates details updated successfully");
+  });
+
+  it("Create a new log normal update for a domicilary care patient and edit it", () => {
+    patientPage.visitPatient(domicilaryPatient);
+    patientConsultationPage.clickEditConsultationButton();
+    patientConsultationPage.selectPatientSuggestion("Domiciliary Care");
+    cy.submitButton("Update Consultation");
+    cy.verifyNotification("Consultation updated successfully");
+    patientLogupdate.clickLogupdate();
+    patientLogupdate.typePhysicalExamination(physicalExamination);
+    patientLogupdate.typeOtherDetails(otherExamination);
+    patientLogupdate.typeAdditionalSymptoms(additionalSymptoms);
+    patientLogupdate.selectPatientCategory(patientCategory);
+    patientLogupdate.typeSystolic(patientSystolic);
+    patientLogupdate.typeDiastolic(patientDiastolic);
+    patientLogupdate.typePulse(patientPulse);
+    patientLogupdate.typeTemperature(patientTemperature);
+    patientLogupdate.typeRespiratory(patientRespiratory);
+    patientLogupdate.typeSpo2(patientSpo2);
+    patientLogupdate.selectRhythm(patientRhythmType);
+    patientLogupdate.typeRhythm(patientRhythm);
+    cy.get("#consciousness_level-2").click();
+    cy.submitButton("Save");
+    cy.verifyNotification("Consultation Updates details created successfully");
+    // edit the card and verify the data.
+    patientLogupdate.clickLogupdateCard("#dailyround-entry", patientCategory);
+    cy.verifyContentPresence("#consultation-preview", [
+      patientCategory,
+      patientDiastolic,
+      patientSystolic,
+      physicalExamination,
+      otherExamination,
+      patientPulse,
+      patientTemperature,
+      patientRespiratory,
+      patientSpo2,
+      patientRhythm,
+    ]);
+    patientLogupdate.clickUpdateDetail();
+    patientLogupdate.clickClearButtonInElement("#systolic");
+    patientLogupdate.typeSystolic(patientModifiedSystolic);
+    patientLogupdate.clickClearButtonInElement("#diastolic");
+    patientLogupdate.typeDiastolic(patientModifiedDiastolic);
+    cy.submitButton("Continue");
+    cy.verifyNotification("Consultation Updates details updated successfully");
+    patientLogupdate.clickLogupdateCard("#dailyround-entry", patientCategory);
+    cy.verifyContentPresence("#consultation-preview", [
+      patientModifiedDiastolic,
+      patientModifiedSystolic,
+    ]);
+  });
+
+  it("Create a new log normal update for a admission patient and verify its reflection in cards", () => {
+    patientPage.visitPatient("Dummy Patient 13");
+    patientLogupdate.clickLogupdate();
+    cy.verifyNotification("Please assign a bed to the patient");
+    patientLogupdate.selectBed("Dummy Bed 6");
+    cy.closeNotification();
+    patientLogupdate.clickLogupdate();
+    patientLogupdate.typePhysicalExamination(physicalExamination);
+    patientLogupdate.typeOtherDetails(otherExamination);
+    patientLogupdate.typeAdditionalSymptoms(additionalSymptoms);
+    patientLogupdate.selectPatientCategory(patientCategory);
+    patientLogupdate.typeSystolic(patientSystolic);
+    patientLogupdate.typeDiastolic(patientDiastolic);
+    patientLogupdate.typePulse(patientPulse);
+    patientLogupdate.typeTemperature(patientTemperature);
+    patientLogupdate.typeRespiratory(patientRespiratory);
+    patientLogupdate.typeSpo2(patientSpo2);
+    patientLogupdate.selectRhythm(patientRhythmType);
+    patientLogupdate.typeRhythm(patientRhythm);
+    cy.get("#consciousness_level-2").click();
+    cy.submitButton("Save");
+    cy.verifyNotification("Consultation Updates details created successfully");
+    // Verify the card content
+    cy.get("#basic-information").scrollIntoView();
+    cy.verifyContentPresence("#basic-information", [additionalSymptoms]);
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});
diff --git a/cypress/e2e/patient_spec/patient_registration.cy.ts b/cypress/e2e/patient_spec/patient_registration.cy.ts
index eb6bfc079f1..d0ec3d75486 100644
--- a/cypress/e2e/patient_spec/patient_registration.cy.ts
+++ b/cypress/e2e/patient_spec/patient_registration.cy.ts
@@ -59,6 +59,7 @@ describe("Patient Creation with consultation", () => {
   const patientTransferFacility = "Dummy Shifting Center";
   const patientTransferName = "Dummy Patient 10";
   const patientExternalName = "Patient 20";
+  const patientOccupation = "Student";
 
   before(() => {
     loginPage.loginAsDisctrictAdmin();
@@ -88,6 +89,7 @@ describe("Patient Creation with consultation", () => {
     facilityPage.selectDistrictOnPincode(patientOneDistrict);
     facilityPage.selectLocalBody(patientOneLocalbody);
     facilityPage.selectWard(patientOneWard);
+    patientPage.selectPatientOccupation(patientOccupation);
     // Patient Medical History
     patientMedicalHistory.typePatientPresentHealth(patientOnePresentHealth);
     patientMedicalHistory.typePatientOngoingMedication(
@@ -115,7 +117,8 @@ describe("Patient Creation with consultation", () => {
       phone_number,
       emergency_phone_number,
       yearOfBirth,
-      patientOneBloodGroup
+      patientOneBloodGroup,
+      patientOccupation
     );
     patientMedicalHistory.verifyPatientMedicalDetails(
       patientOnePresentHealth,
@@ -202,7 +205,8 @@ describe("Patient Creation with consultation", () => {
       phone_number,
       emergency_phone_number,
       yearOfBirth,
-      patientOneUpdatedBloodGroup
+      patientOneUpdatedBloodGroup,
+      patientOccupation
     );
     // Verify No medical history
     patientMedicalHistory.verifyNoSymptosPresent("Diabetes");
diff --git a/cypress/pageobject/Patient/PatientConsultation.ts b/cypress/pageobject/Patient/PatientConsultation.ts
index d88c79dafd7..db72765444f 100644
--- a/cypress/pageobject/Patient/PatientConsultation.ts
+++ b/cypress/pageobject/Patient/PatientConsultation.ts
@@ -120,6 +120,7 @@ export class PatientConsultationPage {
       "#consultation-buttons",
       "Edit Consultation Details"
     );
+    cy.wait(3000);
   }
 
   visitShiftRequestPage() {
diff --git a/cypress/pageobject/Patient/PatientCreation.ts b/cypress/pageobject/Patient/PatientCreation.ts
index 07d87e024a1..833cd95a3fd 100644
--- a/cypress/pageobject/Patient/PatientCreation.ts
+++ b/cypress/pageobject/Patient/PatientCreation.ts
@@ -21,13 +21,8 @@ export class PatientPage {
   }
 
   selectFacility(facilityName: string) {
-    cy.get("input[name='facilities']")
-      .type(facilityName)
-      .then(() => {
-        cy.get("[role='option']").contains(facilityName).click();
-      });
-    cy.get("button").should("contain", "Select");
-    cy.get("button").get("#submit").click();
+    cy.searchAndSelectOption("input[name='facilities']", facilityName);
+    cy.submitButton("Select");
   }
 
   interceptCreatePatientAPI() {
@@ -85,19 +80,15 @@ export class PatientPage {
   }
 
   selectPatientGender(gender: string) {
-    cy.get("[data-testid=Gender] button")
-      .click()
-      .then(() => {
-        cy.get("[role='option']").contains(gender).click();
-      });
+    cy.clickAndSelectOption("[data-testid=Gender] button", gender);
   }
 
   selectPatientBloodGroup(bloodgroup: string) {
-    cy.get("#blood_group")
-      .click()
-      .then(() => {
-        cy.get("[role='option']").contains(bloodgroup).click();
-      });
+    cy.clickAndSelectOption("#blood_group", bloodgroup);
+  }
+
+  selectPatientOccupation(occupation: string) {
+    cy.clickAndSelectOption("#occupation", occupation);
   }
 
   clickCreatePatient() {
@@ -146,7 +137,8 @@ export class PatientPage {
     phoneNumber,
     emergencyPhoneNumber,
     yearOfBirth,
-    bloodGroup
+    bloodGroup,
+    occupation
   ) {
     cy.url().should("include", "/facility/");
     cy.get("[data-testid=patient-dashboard]").then(($dashboard) => {
@@ -157,6 +149,7 @@ export class PatientPage {
       expect($dashboard).to.contain(emergencyPhoneNumber);
       expect($dashboard).to.contain(yearOfBirth);
       expect($dashboard).to.contain(bloodGroup);
+      expect($dashboard).to.contain(occupation);
     });
   }
 
diff --git a/cypress/pageobject/Patient/PatientLogupdate.ts b/cypress/pageobject/Patient/PatientLogupdate.ts
new file mode 100644
index 00000000000..8b15e4dd4fe
--- /dev/null
+++ b/cypress/pageobject/Patient/PatientLogupdate.ts
@@ -0,0 +1,88 @@
+class PatientLogupdate {
+  clickLogupdate() {
+    cy.get("#log-update").scrollIntoView();
+    cy.verifyAndClickElement("#log-update", "Log Update");
+    cy.wait(2000);
+  }
+
+  selectBed(bed: string) {
+    cy.searchAndSelectOption("input[name='bed']", bed);
+    cy.submitButton("Move to bed");
+    cy.wait(2000);
+  }
+
+  selectPatientCategory(category: string) {
+    cy.clickAndSelectOption("#patient_category", category);
+  }
+
+  typePhysicalExamination(examination: string) {
+    cy.get("#physical_examination_info").click().type(examination);
+    cy.get("#physical_examination_info").should("contain", examination);
+  }
+
+  typeOtherDetails(details: string) {
+    cy.get("#other_details").click().type(details);
+  }
+
+  typeAdditionalSymptoms(symptoms: string) {
+    cy.clickAndSelectOption("#additional_symptoms", symptoms);
+  }
+
+  typeSystolic(systolic: string) {
+    cy.searchAndSelectOption("#systolic", systolic);
+  }
+
+  typeDiastolic(diastolic: string) {
+    cy.searchAndSelectOption("#diastolic", diastolic);
+  }
+
+  typePulse(pulse: string) {
+    cy.searchAndSelectOption("#pulse", pulse);
+  }
+
+  typeTemperature(temperature: string) {
+    cy.searchAndSelectOption("#temperature", temperature);
+  }
+
+  typeRespiratory(respiratory: string) {
+    cy.searchAndSelectOption("#resp", respiratory);
+  }
+
+  typeSpo2(spo: string) {
+    cy.searchAndSelectOption("#ventilator_spo2", spo);
+  }
+
+  selectRhythm(rhythm: string) {
+    cy.clickAndSelectOption("#rhythm", rhythm);
+  }
+
+  typeRhythm(rhythm: string) {
+    cy.get("#rhythm_detail").click().type(rhythm);
+  }
+
+  clickLogupdateCard(element, patientCategory) {
+    cy.get(element).scrollIntoView();
+    cy.verifyContentPresence(element, [patientCategory]);
+    cy.get(element).first().contains("View Details").click();
+    cy.wait(3000);
+  }
+
+  clickUpdateDetail() {
+    cy.verifyAndClickElement("#consultation-preview", "Update Details");
+    cy.wait(3000);
+  }
+
+  clickClearButtonInElement(elementId) {
+    cy.get(elementId).find("#clear-button").click();
+  }
+
+  clickVitals() {
+    cy.get("#consultation_tab_nav").scrollIntoView();
+    cy.verifyAndClickElement("#consultation_tab_nav", "Vitals");
+  }
+
+  clickCopyPreviousValue() {
+    cy.get("#clone_last").click();
+  }
+}
+export default PatientLogupdate;
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 5170635647e..f4b7becdcae 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -181,3 +181,11 @@ Cypress.Commands.add("closeNotification", () => {
       cy.wrap($div).click();
     });
 });
+
+Cypress.Commands.add("verifyContentPresence", (selector, texts) => {
+  cy.get(selector).then(($el) => {
+    texts.forEach((text) => {
+      cy.wrap($el).should("contain", text);
+    });
+  });
+});
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index 46e695b6507..fbaaa4f18ea 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -34,6 +34,10 @@ declare global {
       ): Chainable<Element>;
       preventPrint(): Chainable<Window>;
       closeNotification(): Chainable<Element>;
+      verifyContentPresence(
+        selector: string,
+        texts: string[]
+      ): Chainable<Element>;
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index cf12b803136..6d0c8e57f91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,7 +86,7 @@
         "@typescript-eslint/parser": "^5.61.0",
         "@vitejs/plugin-react-swc": "^3.6.0",
         "autoprefixer": "^10.4.14",
-        "cypress": "^13.5.0",
+        "cypress": "^13.7.0",
         "cypress-localstorage-commands": "^2.2.3",
         "cypress-split": "^1.20.1",
         "eslint": "^8.44.0",
@@ -8844,21 +8844,20 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/cypress": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.5.0.tgz",
-      "integrity": "sha512-oh6U7h9w8wwHfzNDJQ6wVcAeXu31DlIYlNOBvfd6U4CcB8oe4akawQmH+QJVOMZlM42eBoCne015+svVqdwdRQ==",
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.7.0.tgz",
+      "integrity": "sha512-UimjRSJJYdTlvkChcdcfywKJ6tUYuwYuk/n1uMMglrvi+ZthNhoRYcxnWgTqUtkl17fXrPAsD5XT2rcQYN1xKA==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@cypress/request": "^3.0.0",
         "@cypress/xvfb": "^1.2.4",
-        "@types/node": "^18.17.5",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
-        "buffer": "^5.6.0",
+        "buffer": "^5.7.1",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
@@ -8876,7 +8875,7 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.0",
+        "is-ci": "^3.0.1",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
@@ -8932,15 +8931,6 @@
         "cypress-split-preview": "bin/preview.js"
       }
     },
-    "node_modules/cypress/node_modules/@types/node": {
-      "version": "18.18.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.9.tgz",
-      "integrity": "sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==",
-      "dev": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
     "node_modules/cypress/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
diff --git a/package.json b/package.json
index 7e54836df05..dcb0b432c77 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.14",
-    "cypress": "^13.5.0",
+    "cypress": "^13.7.0",
     "cypress-localstorage-commands": "^2.2.3",
     "cypress-split": "^1.20.1",
     "eslint": "^8.44.0",
diff --git a/plugins/treeShakeCareIcons.mts b/plugins/treeShakeCareIcons.mts
new file mode 100644
index 00000000000..bf1713a0625
--- /dev/null
+++ b/plugins/treeShakeCareIcons.mts
@@ -0,0 +1,94 @@
+import { Plugin } from "vite";
+import * as fs from "fs";
+import * as path from "path";
+import * as glob from "glob";
+
+/**
+ * Interface defining options for the treeShakeUniconPathsPlugin.
+ *
+ * @interface TreeShakeUniconPathsPluginOptions
+ * @property {string[]} iconWhitelist - An array of icon names to always include, even if not found in code.
+ */
+
+export interface TreeShakeCareIconsOptions {
+  iconWhitelist: string[];
+}
+
+/**
+ * Creates a Webpack plugin that tree-shakes unused Unicon paths from UniconPaths.json in production builds.
+ *
+ * @param {TreeShakeCareIconsOptions} [options] - Optional configuration options. Defaults to an empty iconWhitelist.
+ * @returns {Plugin} Webpack plugin object.
+ */
+
+export function treeShakeCareIcons(
+  options: TreeShakeCareIconsOptions = { iconWhitelist: [] }
+): Plugin {
+  const rootDir = path.resolve(__dirname, ".."); // update this if moving this code to a different file
+  const lineIconNameRegex = /"l-[a-z]+(?:-[a-z]+)*"/g;
+  const allUniconPaths = JSON.parse(
+    fs.readFileSync(
+      path.resolve(rootDir, "src/CAREUI/icons/UniconPaths.json"),
+      "utf8"
+    )
+  );
+
+  // Extracts icon names from a given file's content.
+  // Returns an array of icon names like ["l-eye", "l-sync", "l-hearbeat"]
+  function extractCareIconNames(file: string): string[] {
+    const fileContent = fs.readFileSync(file, "utf8");
+
+    const lineIconNameMatches = fileContent.match(lineIconNameRegex) || [];
+
+    const lineIconNames = lineIconNameMatches.map(
+      (lineIconName) => lineIconName.slice(1, -1) // remove quotes
+    );
+
+    return lineIconNames;
+  }
+  // Finds all used icon names within the project's source files (`.tsx` or `.res` extensions).
+  function getAllUsedIconNames() {
+    const files = glob.sync(path.resolve(rootDir, "src/**/*.{tsx,res}"));
+    const usedIconsArray: string[] = [];
+
+    files.forEach((file) => {
+      const iconNames = extractCareIconNames(file);
+      usedIconsArray.push(...iconNames);
+    });
+
+    return new Set(usedIconsArray);
+  }
+  // Generates a map of used icon names to their paths from UniconPaths.json, including any whitelisted icons.
+  function getTreeShakenUniconPaths() {
+    const usedIcons = [...getAllUsedIconNames(), ...options.iconWhitelist];
+    const treeshakenCareIconPaths = {};
+
+    for (const iconName of usedIcons) {
+      const path = allUniconPaths[iconName];
+      if (path === undefined) {
+        throw new Error(`Icon ${iconName} is not found in UniconPaths.json`);
+      } else {
+        treeshakenCareIconPaths[iconName] = path;
+      }
+    }
+
+    return treeshakenCareIconPaths;
+  }
+
+  return {
+    name: "tree-shake-care-icons",
+    transform(_src, id) {
+      if (process.env.NODE_ENV !== "production") {
+        return;
+      }
+
+      // Replace the UniconPaths with the tree-shaken version
+      if (id.endsWith("UniconPaths.json")) {
+        return {
+          code: `export default ${JSON.stringify(getTreeShakenUniconPaths())}`,
+          map: null,
+        };
+      }
+    },
+  };
+}
diff --git a/src/CAREUI/display/RecordMeta.tsx b/src/CAREUI/display/RecordMeta.tsx
index 5e1e117f9d6..662c61fd73f 100644
--- a/src/CAREUI/display/RecordMeta.tsx
+++ b/src/CAREUI/display/RecordMeta.tsx
@@ -44,7 +44,7 @@ const RecordMeta = ({
         {user && !inlineUser && (
           <span className="flex items-center gap-1">
             by
-            <CareIcon className="care-l-user" />
+            <CareIcon icon="l-user" />
             {formatName(user)}
             {isOnline && (
               <div className="h-1.5 w-1.5 rounded-full bg-primary-400" />
@@ -61,7 +61,7 @@ const RecordMeta = ({
         {prefix}
         {child}
         {user && inlineUser && <span>by</span>}
-        {user && !inlineUser && <CareIcon className="care-l-user" />}
+        {user && !inlineUser && <CareIcon icon="l-user" />}
         {user && inlineUser && (
           <span className="font-medium">{formatName(user)}</span>
         )}
diff --git a/src/CAREUI/display/SubHeading.tsx b/src/CAREUI/display/SubHeading.tsx
index 75d8710fdef..a9024e83687 100644
--- a/src/CAREUI/display/SubHeading.tsx
+++ b/src/CAREUI/display/SubHeading.tsx
@@ -18,7 +18,7 @@ export default function SubHeading(props: Props) {
         </span>
         {props.lastModified && (
           <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
-            <CareIcon className="care-l-history-alt text-sm" />
+            <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 49ace78bd88..f8e7991d3bf 100644
--- a/src/CAREUI/display/Timeline.tsx
+++ b/src/CAREUI/display/Timeline.tsx
@@ -23,7 +23,7 @@ const TimelineContext = createContext("");
 
 export default function Timeline({ className, children, name }: TimelineProps) {
   return (
-    <div className={className}>
+    <div className={className} id="list">
       <ol role="list" className="space-y-6">
         <TimelineContext.Provider value={name}>
           {children}
diff --git a/src/CAREUI/icons/CareIcon.tsx b/src/CAREUI/icons/CareIcon.tsx
index 27a4abe97b4..90a59d972cb 100644
--- a/src/CAREUI/icons/CareIcon.tsx
+++ b/src/CAREUI/icons/CareIcon.tsx
@@ -6,7 +6,7 @@ import iconData from "./UniconPaths.json";
 export type IconName = keyof typeof iconData;
 
 export interface CareIconProps {
-  icon?: IconName;
+  icon: IconName;
   className?: string | undefined;
   onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
   id?: string;
@@ -16,7 +16,7 @@ export interface CareIconProps {
  * ### CARE's Official Icon Library.
  * @param className icon class name
  * @returns icon component
- * @example ```<CareIcon className="care-l-hospital" /> ```
+ * @example ```<CareIcon icon="l-hospital"/> ```
  *
  * @see [icon library](https://iconscout.com/unicons/)
  */
diff --git a/src/CAREUI/interactive/FiltersSlideover.tsx b/src/CAREUI/interactive/FiltersSlideover.tsx
index 9b2e5a29c29..83f92e2bd90 100644
--- a/src/CAREUI/interactive/FiltersSlideover.tsx
+++ b/src/CAREUI/interactive/FiltersSlideover.tsx
@@ -36,7 +36,7 @@ export default function FiltersSlideover({
               onClick={onClear}
               id="clear-filter"
             >
-              <CareIcon className="care-l-filter-slash text-lg" />
+              <CareIcon icon="l-filter-slash" className="text-lg" />
               <span>{t("clear")}</span>
             </ButtonV2>
             <ButtonV2 ghost onClick={onApply} id="apply-filter">
@@ -62,7 +62,7 @@ export const AdvancedFilterButton = ({ onClick }: { onClick: () => void }) => {
       onClick={onClick}
       id="advanced-filter"
     >
-      <CareIcon className="care-l-filter" />
+      <CareIcon icon="l-filter" />
       <span className="py-0.5">{t("advanced_filters")}</span>
     </ButtonV2>
   );
diff --git a/src/CAREUI/interactive/LegendInput.tsx b/src/CAREUI/interactive/LegendInput.tsx
index 789412d7635..b057e7772c5 100644
--- a/src/CAREUI/interactive/LegendInput.tsx
+++ b/src/CAREUI/interactive/LegendInput.tsx
@@ -144,7 +144,8 @@ export default function LegendInput(props: InputProps) {
             onClick={() => setShowPassword(!showPassword)}
           >
             <CareIcon
-              className={`care-l-eye${showPassword ? "" : "-slash"} text-lg`}
+              icon={showPassword ? "l-eye" : "l-eye-slash"}
+              className="text-lg"
             />
           </button>
         )}
diff --git a/src/CAREUI/interactive/SlideOver.tsx b/src/CAREUI/interactive/SlideOver.tsx
index 9fae2588fca..a92344c41ba 100644
--- a/src/CAREUI/interactive/SlideOver.tsx
+++ b/src/CAREUI/interactive/SlideOver.tsx
@@ -116,7 +116,7 @@ export default function SlideOver({
                       onCloseClick && onCloseClick();
                     }}
                   >
-                    <CareIcon className="care-l-arrow-left" />
+                    <CareIcon icon="l-arrow-left" />
                   </button>
                   <div className="flex w-full">
                     <h1 className="w-full text-xl font-black">{title}</h1>
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
index 9231a258463..3ead71c6e1e 100644
--- a/src/Common/constants.tsx
+++ b/src/Common/constants.tsx
@@ -743,7 +743,7 @@ export const GENDER: { [key: number]: string } = GENDER_TYPES.reduce(
 );
 
 export type CameraPTZ = {
-  icon?: string;
+  icon?: IconName;
   label: string;
   action: string;
   loadingLabel?: string;
@@ -1248,3 +1248,15 @@ export const IN_LANDLINE_AREA_CODES = [
   "891",
   "4822",
 ];
+export const OCCUPATION_TYPES = [
+  { id: 1, text: "Student", value: "STUDENT" },
+  {
+    id: 2,
+    text: "Businessman",
+    value: "BUSINESSMAN",
+  },
+  { id: 3, text: "Healthcare Worker", value: "HEALTH_CARE_WORKER" },
+  { id: 4, text: "Healthcare Lab Worker", value: "HEALTH_CARE_LAB_WORKER" },
+  { id: 5, text: "Animal Handler", value: "ANIMAL_HANDLER" },
+  { id: 6, text: "Others", value: "OTHERS" },
+];
diff --git a/src/Common/hooks/useRangePagination.ts b/src/Common/hooks/useRangePagination.ts
index 7652ae546c1..b7c8b8510a5 100644
--- a/src/Common/hooks/useRangePagination.ts
+++ b/src/Common/hooks/useRangePagination.ts
@@ -19,7 +19,7 @@ const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
 
   useEffect(() => {
     setCurrentRange(getInitialBounds(bounds, perPage, props.defaultEnd));
-  }, [bounds, perPage, props.defaultEnd]);
+  }, [JSON.stringify(bounds), perPage, props.defaultEnd]);
 
   const next = () => {
     const { end } = currentRange;
diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index cc16fd45b8d..be991bb8f55 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -54,11 +54,13 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
           <div className="flex items-center gap-2">
             <CareIcon
               onClick={() => downloadAbhaCard("pdf")}
-              className="care-l-print cursor-pointer"
+              icon="l-print"
+              className="cursor-pointer"
             />
             <CareIcon
               onClick={() => downloadAbhaCard("png")}
-              className="care-l-import cursor-pointer"
+              icon="l-import"
+              className="cursor-pointer"
             />
           </div>
         </div>
diff --git a/src/Components/ABDM/LinkABHANumberModal.tsx b/src/Components/ABDM/LinkABHANumberModal.tsx
index 6297b11152f..4aed5e0ee8f 100644
--- a/src/Components/ABDM/LinkABHANumberModal.tsx
+++ b/src/Components/ABDM/LinkABHANumberModal.tsx
@@ -59,7 +59,7 @@ export default function LinkABHANumberModal({
 
   const title = (
     <div className="flex items-center gap-3">
-      <CareIcon className="care-l-link text-xl" />
+      <CareIcon icon="l-link" className="text-xl" />
       <h2 className="text-xl font-bold text-black">
         {currentStep === "ScanExistingQR"
           ? "Link Existing ABHA Number"
@@ -752,7 +752,7 @@ const VerifyMobileSection = ({
         />
       ) : (
         <p className="-mt-4 text-sm text-warning-600">
-          <CareIcon className="care-l-exclamation-triangle h-4 w-4" /> OTP is
+          <CareIcon icon="l-exclamation-triangle" className="h-4 w-4" /> OTP is
           generated if the above phone number is not linked with given Aadhaar
           number.
         </p>
@@ -833,7 +833,7 @@ const CreateHealthIDSection = ({
       />
 
       <p className="-mt-4 text-sm text-warning-600">
-        <CareIcon className="care-l-exclamation-triangle h-4 w-4" /> Existing
+        <CareIcon icon="l-exclamation-triangle" className="h-4 w-4" /> Existing
         ABHA Address is used if ABHA Number already exists.
       </p>
 
diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 661043ba697..3e199c9d34e 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -271,7 +271,7 @@ 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 className={`care-l-${item.icon} fill-gray-700 text-lg`} />
+            <CareIcon icon={item.icon} className="fill-gray-700 text-lg" />
           </div>
           <div className="break-words text-gray-700">{item.label}</div>
         </div>
@@ -332,7 +332,7 @@ const AssetManage = (props: AssetManageProps) => {
           ghost
           border
         >
-          <CareIcon className="care-l-export text-lg" />
+          <CareIcon icon="l-export" className="text-lg" />
           Export as JSON
         </ButtonV2>
       }
@@ -357,7 +357,8 @@ const AssetManage = (props: AssetManageProps) => {
                   </span>
                   <div className="tooltip tooltip-bottom">
                     <CareIcon
-                      className={`care-l-${assetClassProp.icon} fill-gray-700 text-3xl`}
+                      icon={assetClassProp.icon}
+                      className="fill-gray-700 text-3xl"
                     />
                     <span className="tooltip-text">{assetClassProp.name}</span>
                   </div>
@@ -397,17 +398,17 @@ const AssetManage = (props: AssetManageProps) => {
               {[
                 {
                   label: asset?.location_object.facility.name,
-                  icon: "location-pin-alt",
+                  icon: "l-location-pin-alt",
                   content: asset?.location_object.name,
                 },
                 {
                   label: "Asset QR Code ID",
-                  icon: "qrcode-scan",
+                  icon: "l-qrcode-scan",
                   content: asset?.qr_code_id,
                 },
                 {
                   label: "Not working reason",
-                  icon: "exclamation-circle",
+                  icon: "l-exclamation-circle",
                   content: asset?.not_working_reason,
                   hide: asset?.is_working,
                 },
@@ -425,7 +426,7 @@ const AssetManage = (props: AssetManageProps) => {
                 data-testid="asset-update-button"
                 authorizeFor={NonReadOnlyUsers}
               >
-                <CareIcon className="care-l-pen mr-1 h-4" />
+                <CareIcon icon="l-pen" className="mr-1 h-4" />
                 {t("update")}
               </ButtonV2>
               {asset?.asset_class &&
@@ -442,7 +443,7 @@ const AssetManage = (props: AssetManageProps) => {
                     id="configure-asset"
                     data-testid="asset-configure-button"
                   >
-                    <CareIcon className="care-l-setting h-4" />
+                    <CareIcon icon="l-setting" className="h-4" />
                     {t("configure")}
                   </ButtonV2>
                 )}
@@ -454,7 +455,7 @@ const AssetManage = (props: AssetManageProps) => {
                   data-testid="asset-delete-button"
                   className="inline-flex"
                 >
-                  <CareIcon className="care-l-trash h-4" />
+                  <CareIcon icon="l-trash" className="h-4" />
                   <span className="md:hidden">{t("delete")}</span>
                 </ButtonV2>
               )}
@@ -467,14 +468,14 @@ const AssetManage = (props: AssetManageProps) => {
                 {[
                   {
                     label: "Last serviced on",
-                    icon: "wrench",
+                    icon: "l-wrench",
                     content:
                       asset?.last_service?.serviced_on &&
                       formatDate(asset?.last_service?.serviced_on),
                   },
                   {
                     label: "Notes",
-                    icon: "notes",
+                    icon: "l-notes",
                     content: asset?.last_service?.note,
                   },
                 ].map(detailBlock)}
diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx
index cca0a7571b8..6583157018d 100644
--- a/src/Components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/Components/Assets/AssetType/HL7Monitor.tsx
@@ -116,7 +116,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
                     error={ipadrdress_error}
                   />
                   <Submit className="w-full">
-                    <CareIcon className="care-l-save" />
+                    <CareIcon icon="l-save" />
                     <span>Save Configuration</span>
                   </Submit>
                 </div>
diff --git a/src/Components/Assets/AssetTypes.tsx b/src/Components/Assets/AssetTypes.tsx
index 39fff240efb..e3dee31bb7f 100644
--- a/src/Components/Assets/AssetTypes.tsx
+++ b/src/Components/Assets/AssetTypes.tsx
@@ -1,3 +1,4 @@
+import { IconName } from "../../CAREUI/icons/CareIcon";
 import { BedModel } from "../Facility/models";
 import { PerformedByModel } from "../HCX/misc";
 import { PatientModel } from "../Patient/models";
@@ -42,25 +43,31 @@ export const AssetStatus = {
   maintenance: "Under Maintenance",
 };
 
-export const assetClassProps = {
+export const assetClassProps: {
+  [key in AssetClass]: {
+    name: string;
+    description?: string;
+    icon: IconName;
+  };
+} = {
   ONVIF: {
     name: "ONVIF Camera",
     description: "",
-    icon: "camera",
+    icon: "l-camera",
   },
   HL7MONITOR: {
     name: "HL7 Vitals Monitor",
     description: "",
-    icon: "monitor-heart-rate",
+    icon: "l-monitor-heart-rate",
   },
   VENTILATOR: {
     name: "Ventilator",
     description: "",
-    icon: "lungs",
+    icon: "l-lungs",
   },
   NONE: {
     name: "N/A",
-    icon: "box",
+    icon: "l-box",
   },
 };
 
diff --git a/src/Components/Assets/AssetWarrantyCard.tsx b/src/Components/Assets/AssetWarrantyCard.tsx
index 2e5fa74b9c6..63636fea694 100644
--- a/src/Components/Assets/AssetWarrantyCard.tsx
+++ b/src/Components/Assets/AssetWarrantyCard.tsx
@@ -1,6 +1,6 @@
-import CareIcon from "../../CAREUI/icons/CareIcon";
+import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
 import { AssetData } from "./AssetTypes";
-import { classNames, formatDate } from "../../Utils/utils";
+import { formatDate } from "../../Utils/utils";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { t } from "i18next";
 import { useEffect, useState } from "react";
@@ -52,7 +52,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
                           {t("copied_to_clipboard")}
                         </span>
                       ) : (
-                        <CareIcon className="care-l-copy text-lg" />
+                        <CareIcon icon="l-copy" className="text-lg" />
                       )}
                     </CopyToClipboard>
                     <span className="tooltip-text">Copy to clipboard</span>
@@ -72,8 +72,8 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
           </div>
           <div className="mt-3">
             {[
-              ["Phone", asset.support_phone, "phone"],
-              ["Email", asset.support_email, "envelope"],
+              ["Phone", asset.support_phone, "l-phone"],
+              ["Email", asset.support_email, "l-envelope"],
             ].map((item) => (
               <div className="flex items-center">
                 {item[1] && (
@@ -85,9 +85,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
                       }
                       className="border-b border-primary-300 text-primary-300 hover:text-primary-400"
                     >
-                      <CareIcon
-                        className={classNames(`care-l-${item[2]}`, "mr-1")}
-                      />
+                      <CareIcon icon={item[2] as IconName} className="mr-1" />
                       {item[1]}
                     </a>
                   </>
diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index 228e940de29..9596ceb7faa 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -200,13 +200,14 @@ const AssetsList = () => {
                 <p className="flex break-words text-xl font-medium capitalize">
                   <span className="mr-2 text-primary-500">
                     <CareIcon
-                      className={`care-l-${
+                      icon={
                         (
                           (asset.asset_class &&
                             assetClassProps[asset.asset_class]) ||
                           assetClassProps.NONE
                         ).icon
-                      } text-2xl`}
+                      }
+                      className="text-2xl"
                     />
                   </span>
                   <p
@@ -219,11 +220,17 @@ const AssetsList = () => {
               </div>
               <p className="text-sm font-normal">
                 <span className="text-sm font-medium">
-                  <CareIcon className="care-l-location-point mr-1 text-primary-500" />
+                  <CareIcon
+                    icon="l-location-point"
+                    className="mr-1 text-primary-500"
+                  />
                   {asset?.location_object?.name}
                 </span>
                 <span className="ml-2 text-sm font-medium">
-                  <CareIcon className="care-l-hospital mr-1 text-primary-500" />
+                  <CareIcon
+                    icon="l-hospital"
+                    className="mr-1 text-primary-500"
+                  />
                   {asset?.location_object?.facility?.name}
                 </span>
               </p>
@@ -272,7 +279,10 @@ const AssetsList = () => {
                     label: "Import Assets",
                     options: {
                       icon: (
-                        <CareIcon className="care-l-import import-assets-button" />
+                        <CareIcon
+                          icon="l-import"
+                          className="import-assets-button"
+                        />
                       ),
                       onClick: () => setImportAssetModalOpen(true),
                     },
@@ -289,7 +299,7 @@ const AssetsList = () => {
                     type: "json",
                     filePrefix: `assets_${facility?.name ?? "all"}`,
                     options: {
-                      icon: <CareIcon className="care-l-export" />,
+                      icon: <CareIcon icon="l-export" />,
                       disabled: totalCount === 0 || !authorizedForImportExport,
                       id: "export-json-option",
                     },
@@ -306,7 +316,7 @@ const AssetsList = () => {
                     type: "csv",
                     filePrefix: `assets_${facility?.name ?? "all"}`,
                     options: {
-                      icon: <CareIcon className="care-l-export" />,
+                      icon: <CareIcon icon="l-export" />,
                       disabled: totalCount === 0 || !authorizedForImportExport,
                       id: "export-csv-option",
                     },
@@ -364,7 +374,7 @@ const AssetsList = () => {
                 }
               }}
             >
-              <CareIcon className="care-l-plus-circle text-lg" />
+              <CareIcon icon="l-plus-circle" className="text-lg" />
               <span>{t("create_asset")}</span>
             </ButtonV2>
           </div>
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
index 9e2e4f6686a..4c88e6e5aea 100644
--- a/src/Components/Auth/Login.tsx
+++ b/src/Components/Auth/Login.tsx
@@ -368,7 +368,7 @@ export const Login = (props: { forgot?: boolean }) => {
                   className="mb-4 text-sm text-primary-400 hover:text-primary-500"
                 >
                   <div className="flex justify-center">
-                    <CareIcon className="care-l-arrow-left text-lg" />
+                    <CareIcon icon="l-arrow-left" className="text-lg" />
                     <span>{t("back_to_login")}</span>
                   </div>
                 </button>
diff --git a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
index 628518191de..e2931a816bc 100644
--- a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
+++ b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
@@ -7,7 +7,6 @@ import useFilters from "../../../Common/hooks/useFilters";
 import { Fragment } from "react";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import useSlug from "../../../Common/hooks/useSlug";
-import { classNames } from "../../../Utils/utils";
 
 interface Props {
   perPageLimit: number;
@@ -27,7 +26,7 @@ const LiveMonitoringFilters = (props: Props) => {
       <Popover className="relative">
         <Popover.Button>
           <ButtonV2 variant="secondary" border>
-            <CareIcon className="care-l-setting text-lg" />
+            <CareIcon icon="l-setting" className="text-lg" />
             Settings and Filters
           </ButtonV2>
         </Popover.Button>
@@ -112,12 +111,12 @@ const LiveMonitoringFilters = (props: Props) => {
                   className="tooltip !h-11"
                 >
                   <CareIcon
-                    className={classNames(
+                    icon={
                       props.isFullscreen
-                        ? "care-l-compress-arrows"
-                        : "care-l-expand-arrows-alt",
-                      "text-lg"
-                    )}
+                        ? "l-compress-arrows"
+                        : "l-expand-arrows-alt"
+                    }
+                    className="text-lg"
                   />
                   {props.isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
                 </ButtonV2>
diff --git a/src/Components/Common/Breadcrumbs.tsx b/src/Components/Common/Breadcrumbs.tsx
index b6c39a38ef1..c0f6ab9b349 100644
--- a/src/Components/Common/Breadcrumbs.tsx
+++ b/src/Components/Common/Breadcrumbs.tsx
@@ -55,7 +55,7 @@ export default function Breadcrumbs(props: any) {
           <li>
             <div>
               <Link href="/" className="text-gray-500 hover:text-gray-700">
-                <CareIcon className="care-l-estate mr-1 text-lg" />
+                <CareIcon icon="l-estate" className="mr-1 text-lg" />
                 <span className="sr-only">Home</span>
               </Link>
             </div>
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index bce5f24b11c..47ac41f5d71 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -249,7 +249,10 @@ const DateInputV2: React.FC<Props> = ({
                   value={value && dayjs(value).format("DD/MM/YYYY")}
                 />
                 <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
-                  <CareIcon className="care-l-calendar-alt text-lg text-gray-600" />
+                  <CareIcon
+                    icon="l-calendar-alt"
+                    className="text-lg text-gray-600"
+                  />
                 </div>
               </Popover.Button>
 
@@ -296,7 +299,7 @@ const DateInputV2: React.FC<Props> = ({
                         className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-gray-300"
                         onClick={decrement}
                       >
-                        <CareIcon className="care-l-angle-left-b text-lg" />
+                        <CareIcon icon="l-angle-left-b" className="text-lg" />
                       </button>
 
                       <div className="flex items-center justify-center text-sm">
@@ -329,7 +332,7 @@ const DateInputV2: React.FC<Props> = ({
                         className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-gray-300"
                         onClick={increment}
                       >
-                        <CareIcon className="care-l-angle-right-b text-lg" />
+                        <CareIcon icon="l-angle-right-b" className="text-lg" />
                       </button>
                     </div>
                   </div>
diff --git a/src/Components/Common/Export.tsx b/src/Components/Common/Export.tsx
index 7ddaca115bd..e94a2826398 100644
--- a/src/Components/Common/Export.tsx
+++ b/src/Components/Common/Export.tsx
@@ -39,12 +39,31 @@ export const ExportMenu = ({
 }: ExportMenuProps) => {
   const { isExporting, exportFile } = useExport();
 
+  if (exportItems.length === 1) {
+    const item = exportItems[0];
+
+    return (
+      <ButtonV2
+        disabled={isExporting || disabled}
+        onClick={() =>
+          exportFile(item.action, item.filePrefix, item.type, item.parse)
+        }
+        border
+        ghost
+        className="py-2.5"
+      >
+        <CareIcon className="care-l-export" />
+        {isExporting ? "Exporting..." : label}
+      </ButtonV2>
+    );
+  }
+
   return (
     <div key="export-menu" id="export-button">
       <DropdownMenu
         disabled={isExporting || disabled}
         title={isExporting ? "Exporting..." : label}
-        icon={<CareIcon className="care-l-export" />}
+        icon={<CareIcon icon="l-export" />}
         className="tooltip border-primary-500 bg-white text-primary-500 hover:bg-primary-100 enabled:border"
       >
         {exportItems.map((item) => (
@@ -84,9 +103,9 @@ export const ExportButton = ({
         circle
       >
         {isExporting ? (
-          <CareIcon className="care-l-spinner-alt animate-spin" />
+          <CareIcon icon="l-spinner-alt" className="animate-spin" />
         ) : (
-          <CareIcon className="care-l-export" />
+          <CareIcon icon="l-export" />
         )}
         <span className={`tooltip-text ${tooltipClassName}`}>
           {props.tooltip || "Export"}
diff --git a/src/Components/Common/GLocationPicker.tsx b/src/Components/Common/GLocationPicker.tsx
index fc121b8519f..6fc1a4c2b6c 100644
--- a/src/Components/Common/GLocationPicker.tsx
+++ b/src/Components/Common/GLocationPicker.tsx
@@ -220,7 +220,10 @@ const Map: React.FC<MapProps> = ({
               ref={mapCloseRef}
               onClick={handleOnClose}
             >
-              <CareIcon className="care-l-times-circle text-2xl text-gray-800" />
+              <CareIcon
+                icon="l-times-circle"
+                className="text-2xl text-gray-800"
+              />
             </div>
           </Popover.Button>
         )}
@@ -235,7 +238,10 @@ const Map: React.FC<MapProps> = ({
               )
             }
           >
-            <CareIcon className="care-l-user-location text-2xl text-gray-800" />
+            <CareIcon
+              icon="l-user-location"
+              className="text-2xl text-gray-800"
+            />
           </div>
         )}
       </>
diff --git a/src/Components/Common/LanguageSelector.tsx b/src/Components/Common/LanguageSelector.tsx
index 4a4f67b993e..8ae1b187c89 100644
--- a/src/Components/Common/LanguageSelector.tsx
+++ b/src/Components/Common/LanguageSelector.tsx
@@ -38,7 +38,10 @@ export const LanguageSelector = (props: any) => {
         ))}
       </select>
       <div className="pointer-events-none absolute right-0 z-10 mr-1 h-auto w-8">
-        <CareIcon className={`care-l-angle-down text-xl ${props.className}`} />
+        <CareIcon
+          icon="l-angle-down"
+          className={`text-xl ${props.className}`}
+        />
       </div>
     </div>
   );
diff --git a/src/Components/Common/Pagination.tsx b/src/Components/Common/Pagination.tsx
index e86c9b7a491..0f988874257 100644
--- a/src/Components/Common/Pagination.tsx
+++ b/src/Components/Common/Pagination.tsx
@@ -94,12 +94,12 @@ const Pagination = ({
           tooltip="Previous"
           onClick={() => goToPage(currentPage - 1)}
           disabled={currentPage - 1 <= 0}
-          children={<CareIcon className="care-l-angle-left text-lg" />}
+          children={<CareIcon icon="l-angle-left" className="text-lg" />}
         />
         <NavButton
           id="next-page"
           tooltip="Next"
-          children={<CareIcon className="care-l-angle-right text-lg" />}
+          children={<CareIcon icon="l-angle-right" className="text-lg" />}
           onClick={() => goToPage(currentPage + 1)}
           disabled={currentPage + 1 > totalPage}
         />
@@ -110,7 +110,7 @@ const Pagination = ({
         <NavButton
           id="first-page"
           tooltip="Jump to first page"
-          children={<CareIcon className="care-l-angle-double-left text-lg" />}
+          children={<CareIcon icon="l-angle-double-left" className="text-lg" />}
           onClick={() => goToPage(1)}
           disabled={currentPage === 1}
         />
@@ -119,7 +119,7 @@ const Pagination = ({
           tooltip="Previous"
           onClick={() => goToPage(currentPage - 1)}
           disabled={currentPage - 1 <= 0}
-          children={<CareIcon className="care-l-angle-left text-lg" />}
+          children={<CareIcon icon="l-angle-left" className="text-lg" />}
         />
 
         {pageNumbers.map((page) => (
@@ -137,14 +137,16 @@ const Pagination = ({
         <NavButton
           id="next-pages"
           tooltip="Next"
-          children={<CareIcon className="care-l-angle-right text-lg" />}
+          children={<CareIcon icon="l-angle-right" className="text-lg" />}
           onClick={() => goToPage(currentPage + 1)}
           disabled={currentPage + 1 > totalPage}
         />
         <NavButton
           id="last-page"
           tooltip="Jump to last page"
-          children={<CareIcon className="care-l-angle-double-right text-lg" />}
+          children={
+            <CareIcon icon="l-angle-double-right" className="text-lg" />
+          }
           onClick={() => goToPage(totalPage)}
           disabled={totalPage === 0 || currentPage === totalPage}
         />
diff --git a/src/Components/Common/QRScanner.tsx b/src/Components/Common/QRScanner.tsx
index b4d618ec7dc..4b744ba2eeb 100644
--- a/src/Components/Common/QRScanner.tsx
+++ b/src/Components/Common/QRScanner.tsx
@@ -73,8 +73,9 @@ const QRScanner = ({
       <TextFormField
         trailing={
           <CareIcon
+            icon="l-focus"
             onClick={() => setShowScanner(true)}
-            className="care-l-focus z-50 cursor-pointer text-black"
+            className="z-50 cursor-pointer text-black"
           />
         }
         error={error}
diff --git a/src/Components/Common/RelativeDateUserMention.tsx b/src/Components/Common/RelativeDateUserMention.tsx
index 2af92268987..70eadc5b7ed 100644
--- a/src/Components/Common/RelativeDateUserMention.tsx
+++ b/src/Components/Common/RelativeDateUserMention.tsx
@@ -33,7 +33,10 @@ function RelativeDateUserMention(props: {
               <p className="flex justify-center">{props.user.user_type}</p>
             </div>
           </span>
-          <CareIcon className="care-l-user-circle ml-1 text-xl font-semibold text-green-700 hover:text-green-600" />
+          <CareIcon
+            icon="l-user-circle"
+            className="ml-1 text-xl font-semibold text-green-700 hover:text-green-600"
+          />
         </div>
       )}
     </div>
diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx
index 747fa3949da..c611b26f2e5 100644
--- a/src/Components/Common/Sidebar/Sidebar.tsx
+++ b/src/Components/Common/Sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import { SidebarItem, ShrinkedSidebarItem } from "./SidebarItem";
 import SidebarUserCard from "./SidebarUserCard";
 import NotificationItem from "../../Notifications/NotificationsList";
 import useActiveLink from "../../../Common/hooks/useActiveLink";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
+import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon";
 import useConfig from "../../../Common/hooks/useConfig";
 import SlideOver from "../../../CAREUI/interactive/SlideOver";
 import { classNames } from "../../../Utils/utils";
@@ -36,26 +36,30 @@ const StatelessSidebar = ({
 }: StatelessSidebarProps) => {
   const authUser = useAuthUser();
 
-  const NavItems = [
-    { text: "Facilities", to: "/facility", icon: "care-l-hospital" },
-    { text: "Patients", to: "/patients", icon: "care-l-user-injured" },
-    { text: "Assets", to: "/assets", icon: "care-l-shopping-cart-alt" },
-    { text: "Sample Test", to: "/sample", icon: "care-l-medkit" },
-    { text: "Shifting", to: "/shifting", icon: "care-l-ambulance" },
-    { text: "Resource", to: "/resource", icon: "care-l-heart-medical" },
+  const NavItems: {
+    text: string;
+    to: string;
+    icon: IconName;
+  }[] = [
+    { text: "Facilities", to: "/facility", icon: "l-hospital" },
+    { text: "Patients", to: "/patients", icon: "l-user-injured" },
+    { text: "Assets", to: "/assets", icon: "l-shopping-cart-alt" },
+    { text: "Sample Test", to: "/sample", icon: "l-medkit" },
+    { text: "Shifting", to: "/shifting", icon: "l-ambulance" },
+    { text: "Resource", to: "/resource", icon: "l-heart-medical" },
     ...(!["Nurse", "NurseReadOnly", "Staff", "StaffReadOnly"].includes(
       authUser.user_type
     )
-      ? [
+      ? ([
           {
             text: "External Results",
             to: "/external_results",
-            icon: "care-l-clipboard-notes",
+            icon: "l-clipboard-notes",
           },
-        ]
+        ] as const)
       : []),
-    { text: "Users", to: "/users", icon: "care-l-users-alt" },
-    { text: "Notice Board", to: "/notice_board", icon: "care-l-meeting-board" },
+    { text: "Users", to: "/users", icon: "l-users-alt" },
+    { text: "Notice Board", to: "/notice_board", icon: "l-meeting-board" },
   ];
 
   const { main_logo } = useConfig();
@@ -134,7 +138,7 @@ const StatelessSidebar = ({
                 ref={i.to === activeLink ? activeLinkRef : undefined}
                 key={i.text}
                 {...i}
-                icon={<CareIcon className={`${i.icon} h-5`} />}
+                icon={<CareIcon icon={i.icon} className="h-5" />}
                 selected={i.to === activeLink}
                 do={() => onItemClick && onItemClick(false)}
                 handleOverflow={handleOverflow}
@@ -151,7 +155,7 @@ const StatelessSidebar = ({
             <Item
               text="Dashboard"
               to={dashboard_url}
-              icon={<CareIcon className="care-l-dashboard text-lg" />}
+              icon={<CareIcon icon="l-dashboard" className="text-lg" />}
               external
               handleOverflow={handleOverflow}
             />
diff --git a/src/Components/Common/Sidebar/SidebarItem.tsx b/src/Components/Common/Sidebar/SidebarItem.tsx
index 20ffec4217e..90698aa3bbc 100644
--- a/src/Components/Common/Sidebar/SidebarItem.tsx
+++ b/src/Components/Common/Sidebar/SidebarItem.tsx
@@ -66,7 +66,7 @@ const SidebarItemBase = forwardRef(
             {t(props.text)}
           </span>
           {external && !shrinked && (
-            <CareIcon className="care-l-external-link-alt text-lg" />
+            <CareIcon icon="l-external-link-alt" className="text-lg" />
           )}
         </div>
 
diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
index 75cf2d9ce43..d083867738c 100644
--- a/src/Components/Common/Sidebar/SidebarUserCard.tsx
+++ b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -16,11 +16,12 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
       } transition-all duration-200 ease-in-out`}
     >
       <Link href="/user/profile" className="flex-none py-3">
-        <CareIcon className="care-l-user-circle text-3xl text-white" />
+        <CareIcon icon="l-user-circle" className="text-3xl text-white" />
       </Link>
       <div className="flex cursor-pointer justify-center" onClick={signOut}>
         <CareIcon
-          className={`care-l-sign-out-alt text-2xl text-gray-400 ${
+          icon="l-sign-out-alt"
+          className={`text-2xl text-gray-400 ${
             shrinked ? "visible" : "hidden"
           }`}
         />
@@ -44,9 +45,8 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
           onClick={signOut}
         >
           <CareIcon
-            className={`care-l-sign-out-alt ${
-              shrinked ? "text-xl" : "mr-1"
-            } text-gray-400`}
+            icon="l-sign-out-alt"
+            className={`${shrinked ? "text-xl" : "mr-1"} text-gray-400`}
           />
           <p className="text-gray-400 text-opacity-80">{t("sign_out")}</p>
         </div>
diff --git a/src/Components/Common/SortDropdown.tsx b/src/Components/Common/SortDropdown.tsx
index e979d89375e..b29662de0a7 100644
--- a/src/Components/Common/SortDropdown.tsx
+++ b/src/Components/Common/SortDropdown.tsx
@@ -24,7 +24,7 @@ export default function SortDropdownMenu(props: Props) {
       title={props.label ?? t("sort_by")}
       variant="secondary"
       className="border border-primary-500 bg-white"
-      icon={<CareIcon className="care-l-sort" />}
+      icon={<CareIcon icon="l-sort" />}
     >
       {props.options.map(({ isAscending, value }) => (
         <DropdownItem
@@ -36,11 +36,7 @@ export default function SortDropdownMenu(props: Props) {
           onClick={() => props.onSelect({ ordering: value })}
           icon={
             <CareIcon
-              className={
-                isAscending
-                  ? "care-l-sort-amount-up"
-                  : "care-l-sort-amount-down"
-              }
+              icon={isAscending ? "l-sort-amount-up" : "l-sort-amount-down"}
             />
           }
         >
diff --git a/src/Components/Common/Steps.tsx b/src/Components/Common/Steps.tsx
index 497682c3bf8..e0b1e03af3f 100644
--- a/src/Components/Common/Steps.tsx
+++ b/src/Components/Common/Steps.tsx
@@ -29,7 +29,8 @@ 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 bg-green-600 group-hover:bg-green-800">
                     <CareIcon
-                      className="care-l-check h-6 w-6 text-white"
+                      icon="l-check"
+                      className="h-6 w-6 text-white"
                       aria-hidden="true"
                     />
                   </span>
diff --git a/src/Components/Common/SymptomsSelect.tsx b/src/Components/Common/SymptomsSelect.tsx
index e96c8070e3a..f16744b7343 100644
--- a/src/Components/Common/SymptomsSelect.tsx
+++ b/src/Components/Common/SymptomsSelect.tsx
@@ -51,7 +51,7 @@ export const SymptomsSelect = (props: FormFieldBaseProps<number[]>) => {
     if (value.includes(ASYMPTOMATIC_ID) && id !== ASYMPTOMATIC_ID)
       return (
         <div className="items-center">
-          <CareIcon className="care-l-exclamation-triangle mr-2" />
+          <CareIcon icon="l-exclamation-triangle" className="mr-2" />
           <span>
             also unselects <b className="font-medium">Asymptomatic</b>
           </span>
@@ -61,7 +61,7 @@ export const SymptomsSelect = (props: FormFieldBaseProps<number[]>) => {
     if (!value.includes(ASYMPTOMATIC_ID) && id === ASYMPTOMATIC_ID)
       return (
         <span>
-          <CareIcon className="care-l-exclamation-triangle mr-2" />
+          <CareIcon icon="l-exclamation-triangle" className="mr-2" />
           {`also unselects the other ${value.length} option(s)`}
         </span>
       );
diff --git a/src/Components/Common/TemperatureFormField.tsx b/src/Components/Common/TemperatureFormField.tsx
index 4a40781a141..2d81ab3d8df 100644
--- a/src/Components/Common/TemperatureFormField.tsx
+++ b/src/Components/Common/TemperatureFormField.tsx
@@ -3,7 +3,6 @@ import { FormFieldBaseProps } from "../Form/FormFields/Utils";
 import RangeAutocompleteFormField from "../Form/FormFields/RangeAutocompleteFormField";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ButtonV2 from "./components/ButtonV2";
-import { classNames } from "../../Utils/utils";
 
 type TemperatureUnit = "celsius" | "fahrenheit";
 
@@ -24,31 +23,31 @@ export default function TemperatureFormField(props: Props) {
         {
           value: 95,
           label: "Low",
-          icon: <CareIcon className="care-l-temperature-empty" />,
+          icon: <CareIcon icon="l-temperature-empty" />,
           className: "text-danger-500",
         },
         {
           value: 96.6,
           label: "Low",
-          icon: <CareIcon className="care-l-temperature-quarter" />,
+          icon: <CareIcon icon="l-temperature-quarter" />,
           className: "text-warning-500",
         },
         {
           value: 97.6,
           label: "Normal",
-          icon: <CareIcon className="care-l-temperature-half" />,
+          icon: <CareIcon icon="l-temperature-half" />,
           className: "text-primary-500",
         },
         {
           value: 99.6,
           label: "High",
-          icon: <CareIcon className="care-l-temperature-three-quarter" />,
+          icon: <CareIcon icon="l-temperature-three-quarter" />,
           className: "text-warning-500",
         },
         {
           value: 101.6,
           label: "High",
-          icon: <CareIcon className="care-l-temperature" />,
+          icon: <CareIcon icon="l-temperature" />,
           className: "text-danger-500",
         },
       ]}
@@ -66,7 +65,10 @@ export default function TemperatureFormField(props: Props) {
           border
           onClick={() => setUnit(unit === "celsius" ? "fahrenheit" : "celsius")}
         >
-          <CareIcon className={classNames("text-sm", `care-l-${unit}`)} />
+          <CareIcon
+            icon={unit === "celsius" ? "l-celsius" : "l-fahrenheit"}
+            className="text-sm"
+          />
         </ButtonV2>
       }
     />
diff --git a/src/Components/Common/UpdatableApp.tsx b/src/Components/Common/UpdatableApp.tsx
index 8b200d5da0e..1fd44da1672 100644
--- a/src/Components/Common/UpdatableApp.tsx
+++ b/src/Components/Common/UpdatableApp.tsx
@@ -121,6 +121,7 @@ const UpdateAppPopup = ({ onUpdate }: UpdateAppPopupProps) => {
       <Popover className="rounded-xl bg-alert-600 px-5 py-4 text-white shadow-2xl shadow-alert-900">
         <div className="flex items-center gap-4">
           <CareIcon
+            icon="l-sync"
             className={classNames(
               "care-l-sync text-2xl",
               isUpdating && "animate-spin"
@@ -155,7 +156,7 @@ const AppUpdatedAlert = ({ show }: AppUpdatedAlertProps) => {
     <AlertTransition show={show}>
       <Popover className="rounded-xl bg-primary-500 px-5 py-4 text-white shadow-2xl shadow-primary-500">
         <div className="flex items-center gap-4">
-          <CareIcon className="care-l-thumbs-up text-2xl" />
+          <CareIcon icon="l-thumbs-up" className="text-2xl" />
           <span className="mr-4 flex flex-col">
             <p className="font-semibold">Updated successfully</p>
             <p className="text-sm font-medium">
diff --git a/src/Components/Common/components/ButtonV2.tsx b/src/Components/Common/components/ButtonV2.tsx
index 2f3d3002451..4dc6c71ac82 100644
--- a/src/Components/Common/components/ButtonV2.tsx
+++ b/src/Components/Common/components/ButtonV2.tsx
@@ -171,7 +171,7 @@ export const Submit = ({ label = "Submit", ...props }: CommonButtonProps) => {
       type="submit"
       children={
         <>
-          <CareIcon className="care-l-check-circle text-lg" />
+          <CareIcon icon="l-check-circle" className="text-lg" />
           <span className="whitespace-pre-wrap">{t(label)}</span>
         </>
       }
@@ -191,7 +191,7 @@ export const Cancel = ({ label = "Cancel", ...props }: CommonButtonProps) => {
       border
       children={
         <>
-          <CareIcon className="care-l-times-circle text-lg" />
+          <CareIcon icon="l-times-circle" className="text-lg" />
           <span className="whitespace-pre-wrap">{t(label)}</span>
         </>
       }
diff --git a/src/Components/Common/components/ContactLink.tsx b/src/Components/Common/components/ContactLink.tsx
index f78b32863c4..762558f5bb2 100644
--- a/src/Components/Common/components/ContactLink.tsx
+++ b/src/Components/Common/components/ContactLink.tsx
@@ -12,9 +12,8 @@ export default function ContactLink(props: ContactLinkProps) {
         className=" flex items-center gap-2 border-b border-blue-500 text-base font-medium tracking-wider text-blue-500"
       >
         <CareIcon
-          className={`care-l-${
-            props.tel ? "outgoing-call" : "envelope-alt"
-          } h-5 fill-gray-700`}
+          icon={props.tel ? "l-outgoing-call" : "l-envelope-alt"}
+          className="h-5 fill-gray-700"
         />
         {props.tel ? props.tel : props.mailto}
       </a>
diff --git a/src/Components/Common/components/SwitchTabs.tsx b/src/Components/Common/components/SwitchTabs.tsx
index a7872d5a400..6bf510c085e 100644
--- a/src/Components/Common/components/SwitchTabs.tsx
+++ b/src/Components/Common/components/SwitchTabs.tsx
@@ -4,8 +4,8 @@ import { classNames } from "../../../Utils/utils";
 export default function SwitchTabs(props: {
   className?: string;
   isTab2Active: boolean;
-  onClickTab1: () => void;
-  onClickTab2: () => void;
+  onClickTab1?: () => void;
+  onClickTab2?: () => void;
   tab1: ReactNode;
   tab2: ReactNode;
 }) {
diff --git a/src/Components/Common/prescription-builder/InvestigationBuilder.tsx b/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
index 7cf7e3024ad..6ccef78e6ec 100644
--- a/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
+++ b/src/Components/Common/prescription-builder/InvestigationBuilder.tsx
@@ -142,7 +142,7 @@ export default function InvestigationBuilder(
                 }
               >
                 Delete Investigation
-                <CareIcon className="care-l-trash-alt h-4 w-4" />
+                <CareIcon icon="l-trash-alt" className="h-4 w-4" />
               </button>
             </div>
             <div className="flex flex-col gap-2">
diff --git a/src/Components/Common/prescription-builder/ProcedureBuilder.tsx b/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
index a42f2bab19d..1c773482464 100644
--- a/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
+++ b/src/Components/Common/prescription-builder/ProcedureBuilder.tsx
@@ -60,7 +60,7 @@ export default function ProcedureBuilder(props: Props<ProcedureType>) {
                     }
                   >
                     Delete Procedure
-                    <CareIcon className="care-l-trash-alt h-4 w-4" />
+                    <CareIcon icon="l-trash-alt" className="h-4 w-4" />
                   </button>
                 </div>
                 <div className="w-full">
diff --git a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
index eb4fd2b2376..5626adff453 100644
--- a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
+++ b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
@@ -138,8 +138,12 @@ let make = (
               ? <button
                   type_="button"
                   onClick={e => {
-                    updatePart(state)
-                    hideModal(e)
+                    if (painScale == 0.0) {
+                      hideModal(e)
+                    } else {
+                      updatePart(state)
+                      hideModal(e)
+                    }
                   }}
                   className="inline-flex w-full justify-center rounded-md border border-transparent bg-primary-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">
                   {str("Apply")}
diff --git a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
index ecf05dde7bb..7c1f12b27b2 100644
--- a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
+++ b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
@@ -38,13 +38,17 @@ let make = (
   }, [state])
 
   let handleSubmit = e => {
-    updatePart(state)
-    hideModal(e)
     let region = PressureSore.regionToString(state.region)
-    if (state.length > 0.0 && state.width == 0.0) || (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) {
+      hideModal(e)
       Notifications.error({msg: `Please fill in both width and length for ${region} part`})
       setState(prev => {...prev, length: 0.0, width: 0.0})
     } else {
+      updatePart(state)
+      hideModal(e)
       Notifications.success({msg: `${region} part updated`})
     }
   }
@@ -98,7 +102,7 @@ let make = (
                   {str(PressureSore.regionToString(state.region))}
                 </span>
               </div>
-              <div className="flex flex-col sm:flex-row justify-center mt-2">
+              <div className="flex flex-col sm:flex-row justify-center mt-2 grid grid-cols-2 gap-2">
                 <div className="w-full">
                   <label className="block font-medium text-black text-left"> {str("Width")} </label>
                   <input
diff --git a/src/Components/ExternalResult/ResultList.tsx b/src/Components/ExternalResult/ResultList.tsx
index 7d551ee4394..ba7b64b1680 100644
--- a/src/Components/ExternalResult/ResultList.tsx
+++ b/src/Components/ExternalResult/ResultList.tsx
@@ -246,7 +246,7 @@ export default function ResultList() {
                     {
                       label: "Import Results",
                       options: {
-                        icon: <CareIcon className="care-l-import" />,
+                        icon: <CareIcon icon="l-import" />,
                         onClick: () => setImportModalOpen(true),
                       },
                     },
@@ -261,7 +261,7 @@ export default function ResultList() {
                   ),
                 filePrefix: "external_results",
                 options: {
-                  icon: <CareIcon className="care-l-export" />,
+                  icon: <CareIcon icon="l-export" />,
                 },
               },
             ]}
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index eba5d89a0b3..a0fa23e74c4 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -390,7 +390,7 @@ const AssetCreate = (props: AssetProps) => {
         <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">
-              <CareIcon className="care-l-map-marker text-green-600" />
+              <CareIcon icon="l-map-marker" className="text-green-600" />
             </div>
           </h1>
           <p className="text-gray-600">
@@ -673,7 +673,10 @@ const AssetCreate = (props: AssetProps) => {
                         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"
                         onClick={() => setIsScannerActive(true)}
                       >
-                        <CareIcon className="care-l-focus cursor-pointer text-lg" />
+                        <CareIcon
+                          icon="l-focus"
+                          className="cursor-pointer text-lg"
+                        />
                       </div>
                     </div>
                   </div>
diff --git a/src/Components/Facility/BedManagement.tsx b/src/Components/Facility/BedManagement.tsx
index d8799f1fbc5..e0d7c99b3b6 100644
--- a/src/Components/Facility/BedManagement.tsx
+++ b/src/Components/Facility/BedManagement.tsx
@@ -120,7 +120,7 @@ const BedRow = (props: BedRowProps) => {
             border
             ghost
           >
-            <CareIcon className="care-l-pen text-lg" />
+            <CareIcon icon="l-pen" className="text-lg" />
             Edit
           </ButtonV2>
           <ButtonV2
@@ -135,7 +135,7 @@ const BedRow = (props: BedRowProps) => {
             tooltip={isOccupied ? "Bed is occupied" : undefined}
             tooltipClassName="w-full lg:w-auto"
           >
-            <CareIcon className="care-l-trash-alt text-lg" />
+            <CareIcon icon="l-trash-alt" className="text-lg" />
             Delete
           </ButtonV2>
         </div>
@@ -222,7 +222,7 @@ export const BedManagement = (props: BedManagementProps) => {
             href={`/facility/${facilityId}/location/${locationId}/beds/add`}
             authorizeFor={NonReadOnlyUsers}
           >
-            <CareIcon className="care-l-plus text-lg" />
+            <CareIcon icon="l-plus" className="text-lg" />
             Add New Bed(s)
           </ButtonV2>
         </div>
diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
index e063292cf2f..2b938d2af07 100644
--- a/src/Components/Facility/CentralNursingStation.tsx
+++ b/src/Components/Facility/CentralNursingStation.tsx
@@ -6,7 +6,6 @@ import Loading from "../Common/Loading";
 import Page from "../Common/components/Page";
 import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { classNames } from "../../Utils/utils";
 import { LocationSelect } from "../Common/LocationSelect";
 import Pagination from "../Common/Pagination";
 import { Popover, Transition } from "@headlessui/react";
@@ -82,7 +81,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           <Popover className="relative">
             <Popover.Button>
               <ButtonV2 variant="secondary" border>
-                <CareIcon className="care-l-setting text-lg" />
+                <CareIcon icon="l-setting" className="text-lg" />
                 Settings and Filters
               </ButtonV2>
             </Popover.Button>
@@ -138,10 +137,10 @@ export default function CentralNursingStation({ facilityId }: Props) {
                       optionLabel={({ value }) => t("SortOptions." + value)}
                       optionIcon={({ isAscending }) => (
                         <CareIcon
-                          className={
+                          icon={
                             isAscending
-                              ? "care-l-sort-amount-up"
-                              : "care-l-sort-amount-down"
+                              ? "l-sort-amount-up"
+                              : "l-sort-amount-down"
                           }
                         />
                       )}
@@ -166,12 +165,12 @@ export default function CentralNursingStation({ facilityId }: Props) {
                       className="tooltip !h-11"
                     >
                       <CareIcon
-                        className={classNames(
+                        icon={
                           isFullscreen
-                            ? "care-l-compress-arrows"
-                            : "care-l-expand-arrows-alt",
-                          "text-lg"
-                        )}
+                            ? "l-compress-arrows"
+                            : "l-expand-arrows-alt"
+                        }
+                        className="text-lg"
                       />
                       {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
                     </ButtonV2>
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationInvestigationsTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationInvestigationsTab.tsx
index 69b11a30ed5..470658f4e52 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationInvestigationsTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationInvestigationsTab.tsx
@@ -23,7 +23,7 @@ export const ConsultationInvestigationsTab = (props: ConsultationTabProps) => {
               )
             }
           >
-            <CareIcon className="care-l-plus" />
+            <CareIcon icon="l-plus" />
             <span>{t("log_lab_results")}</span>
           </ButtonV2>
         </div>
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index fdbf4846329..e8a64b5310d 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -130,7 +130,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           </section>
         )}
       <div className="flex flex-col xl:flex-row">
-        <div className="w-full xl:w-2/3">
+        <div className="w-full xl:w-2/3" id="basic-information">
           <PageTitle
             title="Basic Information"
             hideBack={true}
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index b422fc8867d..6ce75c6ed70 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -228,7 +228,7 @@ export const ConsultationDetails = (props: any) => {
   //             <p>{diagnosis.label}</p>
   //             <div>
   //               <ToolTip text="Principal Diagnosis" position="BOTTOM">
-  //                 <CareIcon className="care-l-stethoscope rounded-lg bg-primary-500  p-1 text-2xl text-white" />
+  //                 <CareIcon icon="l-stethoscope" className="rounded-lg bg-primary-500 p-1 text-2xl text-white"/>
   //               </ToolTip>
   //             </div>
   //           </div>
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
index cf0f78a39bb..9d2af1461c1 100644
--- a/src/Components/Facility/ConsultationDoctorNotes/index.tsx
+++ b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -143,7 +143,7 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
             disabled={!patientActive}
             authorizeFor={NonReadOnlyUsers}
           >
-            <CareIcon className="care-l-message text-lg" />
+            <CareIcon icon="l-message" className="text-lg" />
           </ButtonV2>
         </div>
       </div>
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index 70e78ccb3c8..ea49f24871b 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -267,26 +267,26 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
 
   const sections = {
     "Consultation Details": {
-      iconClass: "care-l-medkit",
+      iconClass: "l-medkit",
       visible: consultationDetailsVisible,
       ref: consultationDetailsRef,
     },
     Diagnosis: {
-      iconClass: "care-l-stethoscope",
+      iconClass: "l-stethoscope",
       visible: diagnosisVisible,
       ref: diagnosisRef,
     },
     "Treatment Plan": {
-      iconClass: "care-l-clipboard-alt",
+      iconClass: "l-clipboard-alt",
       visible: treatmentPlanVisible,
       ref: treatmentPlanRef,
     },
     "Bed Status": {
-      iconClass: "care-l-bed",
+      iconClass: "l-bed",
       visible: bedStatusVisible,
       ref: bedStatusRef,
     },
-  };
+  } as const;
 
   useEffect(() => {
     setCurrentSection((prev) => {
@@ -838,7 +838,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
         className="col-span-6 -ml-2 mb-6 flex flex-row items-center"
         ref={section.ref as LegacyRef<HTMLDivElement>}
       >
-        <CareIcon className={`${section.iconClass} mr-3 text-xl`} />
+        <CareIcon icon={section.iconClass} className="mr-3 text-xl" />
         <label className="text-lg font-bold text-gray-900">
           {sectionTitle}
           {required && <span className="text-danger-500">{" *"}</span>}
@@ -941,7 +941,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                   setCurrentSection(sectionTitle as ConsultationFormSection);
                 }}
               >
-                <CareIcon className={`${section.iconClass} text-lg`} />
+                <CareIcon icon={section.iconClass} className="text-lg" />
                 <span>{sectionTitle}</span>
               </button>
             );
diff --git a/src/Components/Facility/Consultations/Beds.tsx b/src/Components/Facility/Consultations/Beds.tsx
index 32023bc9f5f..21bde9ea90b 100644
--- a/src/Components/Facility/Consultations/Beds.tsx
+++ b/src/Components/Facility/Consultations/Beds.tsx
@@ -127,13 +127,14 @@ const Beds = (props: BedsProps) => {
                 <p className="flex break-words text-xl font-medium capitalize">
                   <span className="mr-2 text-primary-500">
                     <CareIcon
-                      className={`care-l-${
+                      icon={
                         (
                           (asset.asset_class &&
                             assetClassProps[asset.asset_class]) ||
                           assetClassProps.NONE
                         ).icon
-                      } text-2xl`}
+                      }
+                      className="text-2xl"
                     />
                   </span>
                   <p
@@ -146,11 +147,17 @@ const Beds = (props: BedsProps) => {
               </div>
               <p className="text-sm font-normal">
                 <span className="text-sm font-medium">
-                  <CareIcon className="care-l-location-point mr-1 text-primary-500" />
+                  <CareIcon
+                    icon="l-location-point"
+                    className="mr-1 text-primary-500"
+                  />
                   {asset?.location_object?.name}
                 </span>
                 <span className="ml-2 text-sm font-medium">
-                  <CareIcon className="care-l-hospital mr-1 text-primary-500" />
+                  <CareIcon
+                    icon="l-hospital"
+                    className="mr-1 text-primary-500"
+                  />
                   {asset?.location_object?.facility?.name}
                 </span>
               </p>
@@ -178,7 +185,7 @@ const Beds = (props: BedsProps) => {
               ghost
               onClick={() => props.setState && props.setState(false)}
             >
-              <CareIcon className="care-l-times text-lg" />
+              <CareIcon icon="l-times" className="text-lg" />
             </ButtonV2>
           )}
         </div>
diff --git a/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx b/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
index bb080d43179..ab09c7eb2bd 100644
--- a/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
+++ b/src/Components/Facility/Consultations/DailyRounds/DefaultLogUpdateCard.tsx
@@ -15,7 +15,10 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
   const { t } = useTranslation();
 
   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-gray-400 p-4 @container"
+      id="dailyround-entry"
+    >
       <LogUpdateCardAttribute
         attributeKey={"Round Type" as any}
         attributeValue={t(round.rounds_type)}
@@ -41,7 +44,7 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
           className="w-full"
           onClick={props.onViewDetails}
         >
-          <CareIcon className="care-l-eye text-lg" />
+          <CareIcon icon="l-eye" className="text-lg" />
           <span>{t("view_details")}</span>
         </ButtonV2>
         <ButtonV2
@@ -52,7 +55,7 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
           className="w-full"
           onClick={props.onUpdateLog}
         >
-          <CareIcon className="care-l-pen text-lg" />
+          <CareIcon icon="l-pen" className="text-lg" />
           <span>{t("update_log")}</span>
         </ButtonV2>
       </div>
diff --git a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx b/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
index 310b5e59255..78cc4c8a668 100644
--- a/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
+++ b/src/Components/Facility/Consultations/DailyRoundsFilter.tsx
@@ -45,7 +45,7 @@ export default function DailyRoundsFilter(props: Props) {
             variant={isFilterApplied ? "primary" : "secondary"}
             className="mr-5 border"
           >
-            <CareIcon className="care-l-filter" />
+            <CareIcon icon="l-filter" />
             {t("filter")}
           </ButtonV2>
         </Popover.Button>
diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index 476dcf0f401..d9b101a24bb 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -14,7 +14,7 @@ import {
 import { PTZState, useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
 import { useEffect, useRef, useState } from "react";
 
-import CareIcon from "../../../CAREUI/icons/CareIcon.js";
+import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon.js";
 import FeedButton from "./FeedButton";
 import Loading from "../../Common/Loading";
 import ReactPlayer from "react-player";
@@ -580,7 +580,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId }) => {
         {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">
-              <CareIcon className="care-l-wifi-slash h-4 w-4" />
+              <CareIcon icon="l-wifi-slash" className="h-4 w-4" />
               <span>Slow Network Detected</span>
             </div>
           )}
@@ -658,7 +658,7 @@ export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
       key="option.action"
       className="tooltip rounded text-2xl text-gray-600"
     >
-      <CareIcon className="care-l-question-circle" />
+      <CareIcon icon="l-question-circle" />
 
       <ul className="tooltip-text tooltip-left -top-60 right-10 p-2 text-sm">
         {cameraPTZ.map((option) => {
@@ -676,7 +676,7 @@ export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
                       className="rounded-md border border-gray-500 p-1.5 font-mono shadow-md"
                     >
                       {isArrowKey ? (
-                        <CareIcon className={`care-${option.icon}`} />
+                        <CareIcon icon={option.icon as IconName} />
                       ) : (
                         hotkey
                       )}
diff --git a/src/Components/Facility/Consultations/FeedButton.tsx b/src/Components/Facility/Consultations/FeedButton.tsx
index 81500b89f80..2fe43bcd43b 100644
--- a/src/Components/Facility/Consultations/FeedButton.tsx
+++ b/src/Components/Facility/Consultations/FeedButton.tsx
@@ -43,7 +43,7 @@ export default function FeedButton(props: {
       onClick={props.clickAction}
     >
       {props.camProp.icon ? (
-        <CareIcon className={`care-${props.camProp.icon}`} />
+        <CareIcon icon={props.camProp.icon} />
       ) : (
         <span className="font-bold">{props.camProp.value}x</span>
       )}
diff --git a/src/Components/Facility/Consultations/LiveFeed.tsx b/src/Components/Facility/Consultations/LiveFeed.tsx
index 3cd731c6253..840c58a8348 100644
--- a/src/Components/Facility/Consultations/LiveFeed.tsx
+++ b/src/Components/Facility/Consultations/LiveFeed.tsx
@@ -411,7 +411,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">
-                    <CareIcon className="care-l-wifi-slash h-4 w-4" />
+                    <CareIcon icon="l-wifi-slash" className="h-4 w-4" />
                     <span>Slow Network Detected</span>
                   </div>
                 )}
@@ -485,7 +485,7 @@ const LiveFeed = (props: any) => {
                   >
                     <span className="sr-only">{option.label}</span>
                     {option.icon ? (
-                      <CareIcon className={`care-${option.icon}`} />
+                      <CareIcon icon={option.icon} />
                     ) : (
                       <span className="flex h-full w-8 items-center justify-center px-2 font-bold">
                         {option.value}x
@@ -652,7 +652,7 @@ const LiveFeed = (props: any) => {
                     fetchCameraPresets();
                   }}
                 >
-                  <CareIcon className="care-l-redo h-4 text-lg" /> Refresh
+                  <CareIcon icon="l-redo" className="h-4 text-lg" /> Refresh
                 </button>
               )}
             </div>
diff --git a/src/Components/Facility/Consultations/NutritionPlots.tsx b/src/Components/Facility/Consultations/NutritionPlots.tsx
index 93d7ba09010..66057bc2298 100644
--- a/src/Components/Facility/Consultations/NutritionPlots.tsx
+++ b/src/Components/Facility/Consultations/NutritionPlots.tsx
@@ -182,9 +182,9 @@ export const NutritionPlots = (props: any) => {
         >
           <div> IO Balance Plots</div>
           {showIO ? (
-            <CareIcon className="care-l-angle-up text-2xl font-bold" />
+            <CareIcon icon="l-angle-up" className="text-2xl font-bold" />
           ) : (
-            <CareIcon className="care-l-angle-down text-2xl font-bold" />
+            <CareIcon icon="l-angle-down" className="text-2xl font-bold" />
           )}
         </div>
 
@@ -224,9 +224,9 @@ export const NutritionPlots = (props: any) => {
         >
           <div>Intake</div>
           {showIntake ? (
-            <CareIcon className="care-l-angle-up text-2xl font-bold" />
+            <CareIcon icon="l-angle-up" className="text-2xl font-bold" />
           ) : (
-            <CareIcon className="care-l-angle-down text-2xl font-bold" />
+            <CareIcon icon="l-angle-down" className="text-2xl font-bold" />
           )}
         </div>
         <div className={showIntake ? "grid gap-4 md:grid-cols-2" : "hidden"}>
@@ -331,9 +331,9 @@ export const NutritionPlots = (props: any) => {
         >
           <div> Output</div>
           {showOutput ? (
-            <CareIcon className="care-l-angle-up text-2xl font-bold" />
+            <CareIcon icon="l-angle-up" className="text-2xl font-bold" />
           ) : (
-            <CareIcon className="care-l-angle-down text-2xl font-bold" />
+            <CareIcon icon="l-angle-down" className="text-2xl font-bold" />
           )}
         </div>
         <div
diff --git a/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx b/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
index ecd3a7d2648..fcc0f7746d8 100644
--- a/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
+++ b/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
@@ -147,7 +147,7 @@ export const PrimaryParametersPlot = ({
 
   return (
     <div>
-      <div className="grid gap-4 md:grid-cols-2">
+      <div className="grid gap-4 md:grid-cols-2" id="vital-section">
         <div className="m-2 overflow-x-auto rounded-lg border bg-white px-4 pt-4 shadow md:w-full">
           <StackedLinePlot title="BP" xData={dates} yData={BPData} />
         </div>
@@ -229,9 +229,15 @@ export const PrimaryParametersPlot = ({
                               }`}
                             >
                               {rhythmDetails.rhythm === 5 ? (
-                                <CareIcon className="care-l-check-circle text-xl" />
+                                <CareIcon
+                                  icon="l-check-circle"
+                                  className="text-xl"
+                                />
                               ) : (
-                                <CareIcon className="care-l-times-circle text-xl" />
+                                <CareIcon
+                                  icon="l-times-circle"
+                                  className="text-xl"
+                                />
                               )}
                             </span>
                           </div>
diff --git a/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx b/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
index e7b98b57b1e..af8469bd18d 100644
--- a/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
+++ b/src/Components/Facility/Consultations/components/BinaryChronologicalChart.tsx
@@ -33,9 +33,9 @@ export default function BinaryChronologicalChart(props: {
                       }`}
                     >
                       {entry.value ? (
-                        <CareIcon className="care-l-check-circle text-xl" />
+                        <CareIcon icon="l-check-circle" className="text-xl" />
                       ) : (
-                        <CareIcon className="care-l-times-circle text-xl" />
+                        <CareIcon icon="l-times-circle" className="text-xl" />
                       )}
                     </span>
                   </div>
diff --git a/src/Components/Facility/CoverImageEditModal.tsx b/src/Components/Facility/CoverImageEditModal.tsx
index 5e6e505617f..e2aef8cd0d4 100644
--- a/src/Components/Facility/CoverImageEditModal.tsx
+++ b/src/Components/Facility/CoverImageEditModal.tsx
@@ -252,7 +252,7 @@ const CoverImageEditModal = ({
                   id="upload-cover-image"
                   className="flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg border border-primary-500 bg-white px-4 py-2 text-sm font-medium text-primary-500 transition-all hover:border-primary-400 hover:text-primary-400"
                 >
-                  <CareIcon className="care-l-cloud-upload text-lg" />
+                  <CareIcon icon="l-cloud-upload" className="text-lg" />
                   {t("upload_an_image")}
                   <input
                     title="changeFile"
@@ -294,9 +294,9 @@ const CoverImageEditModal = ({
                 disabled={isUploading}
               >
                 {isUploading ? (
-                  <CareIcon className="care-l-spinner animate-spin text-lg" />
+                  <CareIcon icon="l-spinner" className="animate-spin text-lg" />
                 ) : (
-                  <CareIcon className="care-l-save text-lg" />
+                  <CareIcon icon="l-save" className="text-lg" />
                 )}
                 <span>
                   {isUploading ? `${t("uploading")}...` : `${t("save")}`}
@@ -371,7 +371,10 @@ const CoverImageEditModal = ({
                       </ButtonV2>
                       <ButtonV2 onClick={handleUpload} className="my-2 w-full">
                         {isCaptureImgBeingUploaded && (
-                          <CareIcon className="care-l-spinner animate-spin text-lg" />
+                          <CareIcon
+                            icon="l-spinner"
+                            className="animate-spin text-lg"
+                          />
                         )}
                         {t("submit")}
                       </ButtonV2>
@@ -397,7 +400,7 @@ const CoverImageEditModal = ({
             <div className={`${isLaptopScreen ? " " : " hidden "}`}>
               <div className="m-4 flex lg:hidden">
                 <ButtonV2 onClick={handleSwitchCamera}>
-                  <CareIcon className="care-l-camera-change text-lg" />
+                  <CareIcon icon="l-camera-change" className="text-lg" />
                   {`${t("switch")} ${t("camera")}`}
                 </ButtonV2>
               </div>
@@ -412,7 +415,7 @@ const CoverImageEditModal = ({
                             captureImage();
                           }}
                         >
-                          <CareIcon className="care-l-capture text-lg" />
+                          <CareIcon icon="l-capture" className="text-lg" />
                           {t("capture")}
                         </ButtonV2>
                       </div>
@@ -430,7 +433,10 @@ const CoverImageEditModal = ({
                         <Submit disabled={isUploading} onClick={handleUpload}>
                           {isCaptureImgBeingUploaded ? (
                             <>
-                              <CareIcon className="care-l-spinner animate-spin text-lg" />
+                              <CareIcon
+                                icon="l-spinner"
+                                className="animate-spin text-lg"
+                              />
                               {`${t("submitting")}...`}
                             </>
                           ) : (
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index 892be2e916b..e3952ed0825 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -182,7 +182,7 @@ const DischargeModal = ({
         <div>
           <p>Discharge patient from CARE</p>
           <span className="mt-1 flex gap-1 text-sm font-medium text-warning-500">
-            <CareIcon className="care-l-exclamation-triangle text-base" />
+            <CareIcon icon="l-exclamation-triangle" className="text-base" />
             <p>Caution: this action is irreversible.</p>
           </span>
         </div>
diff --git a/src/Components/Facility/DischargeSummaryModal.tsx b/src/Components/Facility/DischargeSummaryModal.tsx
index 36e2de8a591..2a9dc9fce15 100644
--- a/src/Components/Facility/DischargeSummaryModal.tsx
+++ b/src/Components/Facility/DischargeSummaryModal.tsx
@@ -155,7 +155,10 @@ export default function DischargeSummaryModal(props: Props) {
             {t("email_discharge_summary_description")}
           </span>
           <span className="text-sm text-warning-600">
-            <CareIcon className="care-l-exclamation-triangle mr-1 text-base" />
+            <CareIcon
+              icon="l-exclamation-triangle"
+              className="mr-1 text-base"
+            />
             {`${t("disclaimer")}: ${t("generated_summary_caution")}`}
           </span>
         </div>
@@ -178,9 +181,9 @@ export default function DischargeSummaryModal(props: Props) {
           <Cancel onClick={props.onClose} />
           <Submit onClick={handleDownload} disabled={downloading}>
             {downloading ? (
-              <CareIcon className="care-l-spinner animate-spin text-lg" />
+              <CareIcon icon="l-spinner" className="animate-spin text-lg" />
             ) : (
-              <CareIcon className="care-l-file-download-alt text-lg" />
+              <CareIcon icon="l-file-download-alt" className="text-lg" />
             )}
             <span>
               {generating
@@ -192,9 +195,9 @@ export default function DischargeSummaryModal(props: Props) {
           </Submit>
           <Submit onClick={handleEmail} disabled={emailing}>
             {emailing ? (
-              <CareIcon className="care-l-spinner animate-spin text-lg" />
+              <CareIcon icon="l-spinner" className="animate-spin text-lg" />
             ) : (
-              <CareIcon className="care-l-fast-mail text-lg" />
+              <CareIcon icon="l-fast-mail" className="text-lg" />
             )}
             <span>{t("send_email")}</span>
           </Submit>
diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
index 7ce4e9dc21d..e313717c2ae 100644
--- a/src/Components/Facility/DischargedPatientsList.tsx
+++ b/src/Components/Facility/DischargedPatientsList.tsx
@@ -1,4 +1,4 @@
-import { Link, useQueryParams } from "raviger";
+import { Link, navigate, useQueryParams } from "raviger";
 import routes from "../../Redux/api";
 import Page from "../Common/components/Page";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
@@ -11,12 +11,15 @@ import { formatAge } from "../../Utils/utils";
 import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
+import { useTranslation } from "react-i18next";
+import SwitchTabs from "../Common/components/SwitchTabs";
 
 const DischargedPatientsList = ({
   facility_external_id,
 }: {
   facility_external_id: string;
 }) => {
+  const { t } = useTranslation();
   const facilityQuery = useQuery(routes.getAnyFacility, {
     pathParams: { id: facility_external_id },
   });
@@ -25,18 +28,27 @@ const DischargedPatientsList = ({
 
   return (
     <Page
-      title="Discharged Patients"
+      title={t("discharged_patients")}
       crumbsReplacements={{
         [facility_external_id]: { name: facilityQuery.data?.name },
       }}
       options={
-        <SearchInput
-          className="mr-4 w-full max-w-md"
-          placeholder="Search by patient name"
-          name="name"
-          value={search.name}
-          onChange={debounce((e) => setSearch({ [e.name]: e.value }), 300)}
-        />
+        <>
+          <SearchInput
+            className="mr-4 w-full max-w-sm"
+            placeholder="Search by patient name"
+            name="name"
+            value={search.name}
+            onChange={debounce((e) => setSearch({ [e.name]: e.value }), 300)}
+          />
+          <SwitchTabs
+            tab1="Live"
+            tab2="Discharged"
+            className="mr-4"
+            onClickTab1={() => navigate("/patients")}
+            isTab2Active
+          />
+        </>
       }
     >
       <PaginatedList
@@ -45,9 +57,9 @@ const DischargedPatientsList = ({
         query={search}
       >
         {() => (
-          <div className="flex flex-col gap-4 p-4">
+          <div className="flex flex-col gap-4 py-4 lg:px-4 lg:py-8">
             <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>No dischaged patients present in this facility</span>
+              <span>{t("discharged_patients_empty")}</span>
             </PaginatedList.WhenEmpty>
 
             <PaginatedList.WhenLoading>
diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx
index 6457d4d42bc..998528217f2 100644
--- a/src/Components/Facility/DoctorVideoSlideover.tsx
+++ b/src/Components/Facility/DoctorVideoSlideover.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import SlideOver from "../../CAREUI/interactive/SlideOver";
 import { getFacilityUsers } from "../../Redux/actions";
@@ -8,6 +8,7 @@ import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
 import { relativeTime } from "../../Utils/utils";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import { triggerGoal } from "../../Integrations/Plausible";
+import { Warn } from "../../Utils/Notifications";
 
 export default function DoctorVideoSlideover(props: {
   show: boolean;
@@ -112,6 +113,64 @@ function UserListItem(props: { user: UserAssignedModel }) {
     user.user_type === "Doctor" ? "l-user-md" : "l-user-nurse";
   const authUser = useAuthUser();
 
+  function connectOnWhatsApp(e: React.MouseEvent<HTMLAnchorElement>) {
+    e.stopPropagation();
+    if (!user.alt_phone_number) return;
+    const phoneNumber = user.alt_phone_number;
+    const message = `Hey ${user.first_name} ${user.last_name}, I have a query regarding a patient.\n\nPatient Link: ${window.location.href}`;
+    const encodedMessage = encodeURIComponent(message);
+    const whatsappAppURL = `whatsapp://send?phone=${phoneNumber}&text=${encodedMessage}`;
+    const whatsappWebURL = `https://web.whatsapp.com/send?phone=${phoneNumber}&text=${encodedMessage}`;
+
+    const userAgent = navigator.userAgent;
+    const isEdge = /edge\/\d+/i.test(userAgent);
+    const isMobileFirefoxOrSafari =
+      /iPhone|iPad|iPod|Android/i.test(userAgent) &&
+      (/Firefox/i.test(userAgent) ||
+        (/Safari/i.test(userAgent) && !/Chrome/i.test(userAgent)));
+    const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+
+    const openWhatsAppWebFallback = () => {
+      if (isMobile) {
+        Warn({
+          msg: "Please install WhatsApp to connect with the doctor",
+        });
+      }
+      window.open(whatsappWebURL, "_blank");
+    };
+
+    if (isEdge) {
+      if (navigator.msLaunchUri) {
+        navigator.msLaunchUri(whatsappAppURL, null, openWhatsAppWebFallback);
+      } else {
+        openWhatsAppWebFallback();
+      }
+    } else {
+      const attemptOpenWhatsApp = (url: string) => {
+        if (isMobileFirefoxOrSafari || isSafari) {
+          const iframe = document.createElement("iframe");
+          iframe.style.display = "none";
+          iframe.src = url;
+          document.body.appendChild(iframe);
+        } else {
+          window.location.href = url;
+        }
+      };
+
+      attemptOpenWhatsApp(whatsappAppURL);
+
+      const fallbackTimeout = setTimeout(() => {
+        openWhatsAppWebFallback();
+      }, 1250);
+
+      // Listen for when the window loses focus, indicating app launch success
+      window.addEventListener("blur", () => {
+        clearTimeout(fallbackTimeout);
+      });
+    }
+  }
+
   return (
     <li>
       <li
@@ -126,20 +185,7 @@ function UserListItem(props: { user: UserAssignedModel }) {
         role="option"
         tabIndex={-1}
       >
-        <a
-          href={
-            user.alt_phone_number
-              ? `https://api.whatsapp.com/send/?phone=${encodeURIComponent(
-                  user.alt_phone_number
-                )}&text=${encodeURIComponent(
-                  `Hey ${user.first_name} ${user.last_name}, I have a query regarding a patient.\n\nPatient Link: ${window.location.href}`
-                )}`
-              : "#"
-          }
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex"
-        >
+        <a className="flex" onClick={connectOnWhatsApp}>
           <div className="flex h-10 w-10 flex-none items-center justify-center">
             {
               // Show online icon based on last_login
@@ -178,31 +224,12 @@ function UserListItem(props: { user: UserAssignedModel }) {
                     </div>
                   </a>
                 )}
-                <a
-                  href={
-                    user.alt_phone_number
-                      ? `https://api.whatsapp.com/send/?phone=${encodeURIComponent(
-                          user.alt_phone_number
-                        )}&text=${encodeURIComponent(
-                          `Hey ${user.first_name} ${user.last_name}, I have a query regarding a patient.\n\nPatient Link: ${window.location.href}`
-                        )}`
-                      : "#"
-                  }
-                  onClick={() => {
-                    triggerGoal("Doctor Connect Click", {
-                      medium: "WhatsApp",
-                      userId: authUser?.id,
-                      targetUserType: user.user_type,
-                    });
-                  }}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <a onClick={connectOnWhatsApp}>
                   <div className="tooltip">
                     <span className="tooltip-text tooltip-left">
                       Connect on WhatsApp
                     </span>
-                    <CareIcon className="care-l-whatsapp h-5 w-5" />
+                    <CareIcon icon="l-whatsapp" className="h-5 w-5" />
                   </div>
                 </a>
                 <a
@@ -221,7 +248,7 @@ function UserListItem(props: { user: UserAssignedModel }) {
                     <span className="tooltip-text tooltip-left">
                       Connect on Phone
                     </span>
-                    <CareIcon className="care-l-phone-alt h-5 w-5" />
+                    <CareIcon icon="l-phone-alt" className="h-5 w-5" />
                   </div>
                 </a>
               </div>
@@ -251,7 +278,7 @@ function UserListItem(props: { user: UserAssignedModel }) {
                   <span className="tooltip-text tooltip-top">
                     Copy Phone number
                   </span>
-                  <CareIcon className="care-l-clipboard h-5 w-5" />
+                  <CareIcon icon="l-clipboard" className="h-5 w-5" />
                 </div>
               </a>
               <span>{user.alt_phone_number}</span>
diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index 6305fec69cf..31627259fbb 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -110,7 +110,10 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         border
                         ghost
                       >
-                        <CareIcon className="care-l-monitor-heart-rate text-lg" />
+                        <CareIcon
+                          icon="l-monitor-heart-rate"
+                          className="text-lg"
+                        />
                         <span>View CNS</span>
                       </ButtonV2>
                     </div>
@@ -180,8 +183,9 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         Live Patients / Total beds
                       </span>{" "}
                       <CareIcon
+                        icon="l-bed"
                         className={classNames(
-                          "care-l-bed mr-2",
+                          "mr-2",
                           facility.patient_count / facility.bed_count > 0.85
                             ? "text-white"
                             : "text-primary-600"
@@ -241,7 +245,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         className="h-[38px]"
                         onClick={(_) => setNotifyModalFor(facility.id)}
                       >
-                        <CareIcon className="care-l-megaphone text-lg" />
+                        <CareIcon icon="l-megaphone" className="text-lg" />
                         <span className="hidden md:block">Notify</span>
                       </ButtonV2>
                     )}
@@ -252,7 +256,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                       ghost
                       className="h-[38px]"
                     >
-                      <CareIcon className="care-l-hospital text-lg" />
+                      <CareIcon icon="l-hospital" className="text-lg" />
                       <span className="hidden md:inline">
                         {t("view_faciliy")}
                       </span>
@@ -263,7 +267,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                       border
                       ghost
                     >
-                      <CareIcon className="care-l-user-injured text-lg" />
+                      <CareIcon icon="l-user-injured" className="text-lg" />
                       {t("view_patients")}
                     </ButtonV2>
                     {/* </div> */}
diff --git a/src/Components/Facility/FacilityCreate.tsx b/src/Components/Facility/FacilityCreate.tsx
index f52df5e95ee..ab711058204 100644
--- a/src/Components/Facility/FacilityCreate.tsx
+++ b/src/Components/Facility/FacilityCreate.tsx
@@ -752,7 +752,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                     />
                     {showAutoFilledPincode && (
                       <div className="flex items-center gap-2 text-primary-500">
-                        <CareIcon className="care-l-check-circle" />
+                        <CareIcon icon="l-check-circle" />
                         <span className="text-sm">
                           State and district auto-filled from pincode
                         </span>
@@ -930,7 +930,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                             id="facility-location-button"
                             className="tooltip p-2"
                           >
-                            <CareIcon className="care-l-map-marker text-xl" />
+                            <CareIcon icon="l-map-marker" className="text-xl" />
                             <span className="tooltip-text tooltip-bottom">
                               Select location from map
                             </span>
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 1c6feee2383..0f068e72aed 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -38,7 +38,7 @@ export const getFacilityFeatureIcon = (featureId: number) => {
   const feature = FACILITY_FEATURE_TYPES.find((f) => f.id === featureId);
   if (!feature?.icon) return null;
   return typeof feature.icon === "string" ? (
-    <CareIcon className={`care-l-${feature.icon} text-lg`} />
+    <CareIcon icon={feature.icon} className="text-lg" />
   ) : (
     feature.icon
   );
@@ -315,13 +315,13 @@ export const FacilityHome = (props: any) => {
               <DropdownMenu
                 id="manage-facility-dropdown"
                 title="Manage Facility"
-                icon={<CareIcon className="care-l-setting text-lg" />}
+                icon={<CareIcon icon="l-setting" className="text-lg" />}
               >
                 <DropdownItem
                   id="update-facility"
                   onClick={() => navigate(`/facility/${facilityId}/update`)}
                   authorizeFor={NonReadOnlyUsers}
-                  icon={<CareIcon className="care-l-edit-alt text-lg" />}
+                  icon={<CareIcon icon="l-edit-alt" className="text-lg" />}
                 >
                   Update Facility
                 </DropdownItem>
@@ -329,14 +329,14 @@ export const FacilityHome = (props: any) => {
                   id="configure-facility"
                   onClick={() => navigate(`/facility/${facilityId}/configure`)}
                   authorizeFor={NonReadOnlyUsers}
-                  icon={<CareIcon className="care-l-setting text-lg" />}
+                  icon={<CareIcon icon="l-setting" className="text-lg" />}
                 >
                   Configure Facility
                 </DropdownItem>
                 <DropdownItem
                   id="inventory-management"
                   onClick={() => navigate(`/facility/${facilityId}/inventory`)}
-                  icon={<CareIcon className="care-l-clipboard-alt w-5 " />}
+                  icon={<CareIcon icon="l-clipboard-alt" className="w-5" />}
                 >
                   Inventory Management
                 </DropdownItem>
@@ -344,7 +344,9 @@ export const FacilityHome = (props: any) => {
                   id="location-management"
                   onClick={() => navigate(`/facility/${facilityId}/location`)}
                   authorizeFor={NonReadOnlyUsers}
-                  icon={<CareIcon className="care-l-location-point text-lg" />}
+                  icon={
+                    <CareIcon icon="l-location-point" className="text-lg" />
+                  }
                 >
                   Location Management
                 </DropdownItem>
@@ -354,7 +356,7 @@ export const FacilityHome = (props: any) => {
                     navigate(`/facility/${facilityId}/resource/new`)
                   }
                   authorizeFor={NonReadOnlyUsers}
-                  icon={<CareIcon className="care-l-gold text-lg" />}
+                  icon={<CareIcon icon="l-gold" className="text-lg" />}
                 >
                   Resource Request
                 </DropdownItem>
@@ -362,21 +364,21 @@ export const FacilityHome = (props: any) => {
                   id="create-assets"
                   onClick={() => navigate(`/facility/${facilityId}/assets/new`)}
                   authorizeFor={NonReadOnlyUsers}
-                  icon={<CareIcon className="care-l-plus-circle text-lg" />}
+                  icon={<CareIcon icon="l-plus-circle" className="text-lg" />}
                 >
                   Create Asset
                 </DropdownItem>
                 <DropdownItem
                   id="view-assets"
                   onClick={() => navigate(`/assets?facility=${facilityId}`)}
-                  icon={<CareIcon className="care-l-medkit text-lg" />}
+                  icon={<CareIcon icon="l-medkit" className="text-lg" />}
                 >
                   View Assets
                 </DropdownItem>
                 <DropdownItem
                   id="view-users"
                   onClick={() => navigate(`/facility/${facilityId}/users`)}
-                  icon={<CareIcon className="care-l-users-alt text-lg" />}
+                  icon={<CareIcon icon="l-users-alt" className="text-lg" />}
                 >
                   View Users
                 </DropdownItem>
@@ -386,7 +388,7 @@ export const FacilityHome = (props: any) => {
                     variant="danger"
                     onClick={() => setOpenDeleteDialog(true)}
                     className="flex items-center gap-3"
-                    icon={<CareIcon className="care-l-trash-alt text-lg" />}
+                    icon={<CareIcon icon="l-trash-alt" className="text-lg" />}
                   >
                     Delete Facility
                   </DropdownItem>
@@ -402,7 +404,7 @@ export const FacilityHome = (props: any) => {
                 className="mt-2 flex w-full flex-row justify-center md:w-auto"
                 onClick={() => navigate(`/facility/${facilityId}/cns`)}
               >
-                <CareIcon className="care-l-monitor-heart-rate text-lg" />
+                <CareIcon icon="l-monitor-heart-rate" className="text-lg" />
                 <span>Central Nursing Station</span>
               </ButtonV2>
               <LiveMonitoringButton />
@@ -414,7 +416,7 @@ export const FacilityHome = (props: any) => {
                 onClick={() => navigate(`/facility/${facilityId}/patient`)}
                 authorizeFor={NonReadOnlyUsers}
               >
-                <CareIcon className="care-l-plus text-lg" />
+                <CareIcon icon="l-plus" className="text-lg" />
                 <span className="text-sm">Add Details of a Patient</span>
               </ButtonV2>
               <ButtonV2
@@ -425,7 +427,7 @@ export const FacilityHome = (props: any) => {
                 className="mt-2 flex w-full flex-row justify-center md:w-auto"
                 onClick={() => navigate(`/patients?facility=${facilityId}`)}
               >
-                <CareIcon className="care-l-user-injured text-lg" />
+                <CareIcon icon="l-user-injured" className="text-lg" />
                 <span>View Patients</span>
               </ButtonV2>
               <ButtonV2
@@ -438,7 +440,7 @@ export const FacilityHome = (props: any) => {
                   navigate(`/facility/${facilityId}/discharged-patients`)
                 }
               >
-                <CareIcon className="care-l-user-injured text-lg" />
+                <CareIcon icon="l-user-injured" className="text-lg" />
                 <span>View Discharged Patients</span>
               </ButtonV2>
             </div>
diff --git a/src/Components/Facility/FacilityUsers.tsx b/src/Components/Facility/FacilityUsers.tsx
index 2985649a543..781dbad9e40 100644
--- a/src/Components/Facility/FacilityUsers.tsx
+++ b/src/Components/Facility/FacilityUsers.tsx
@@ -221,7 +221,7 @@ export default function FacilityUsers(props: any) {
                     })
                   }
                 >
-                  <CareIcon className="care-l-multiply" />
+                  <CareIcon icon="l-multiply" />
                 </ButtonV2>
               </div>
             </div>
diff --git a/src/Components/Facility/InventoryLog.tsx b/src/Components/Facility/InventoryLog.tsx
index 96dd564d53c..0d8673e6d01 100644
--- a/src/Components/Facility/InventoryLog.tsx
+++ b/src/Components/Facility/InventoryLog.tsx
@@ -139,7 +139,10 @@ export default function InventoryLog(props: any) {
                 variant="primary"
               >
                 <span>
-                  <CareIcon className="care-l-exclamation-triangle pr-2 text-lg" />
+                  <CareIcon
+                    icon="l-exclamation-triangle"
+                    className="pr-2 text-lg"
+                  />
                   UnMark
                 </span>
               </ButtonV2>
@@ -150,7 +153,10 @@ export default function InventoryLog(props: any) {
                 variant="danger"
               >
                 <span>
-                  <CareIcon className="care-l-exclamation-circle pr-2 text-lg" />
+                  <CareIcon
+                    icon="l-exclamation-circle"
+                    className="pr-2 text-lg"
+                  />
                   Mark as Accident
                 </span>
               </ButtonV2>
@@ -244,7 +250,10 @@ export default function InventoryLog(props: any) {
                     disabled={saving}
                   >
                     <span>
-                      <CareIcon className="care-l-exclamation-circle pr-2 text-lg" />
+                      <CareIcon
+                        icon="l-exclamation-circle"
+                        className="pr-2 text-lg"
+                      />
                       Delete Last Entry
                     </span>
                   </ButtonV2>
diff --git a/src/Components/Facility/Investigations/InvestigationSuggestions.tsx b/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
index 5e43d13e07e..8bd884831b7 100644
--- a/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
+++ b/src/Components/Facility/Investigations/InvestigationSuggestions.tsx
@@ -182,7 +182,7 @@ export default function ViewInvestigationSuggestions(props: {
                           investigation.type?.join("_-_")
                         }
                       >
-                        <CareIcon className="care-l-plus" />
+                        <CareIcon icon="l-plus" />
                         <span>Log Report</span>
                       </ButtonV2>
                     </td>
@@ -305,7 +305,7 @@ export default function ViewInvestigationSuggestions(props: {
                       investigation.type?.join("_-_")
                     }
                   >
-                    <CareIcon className="care-l-plus" />
+                    <CareIcon icon="l-plus" />
                     <span>Log Report</span>
                   </ButtonV2>
                 )}
diff --git a/src/Components/Facility/Investigations/InvestigationTable.tsx b/src/Components/Facility/Investigations/InvestigationTable.tsx
index d322698779d..7f56bff21ef 100644
--- a/src/Components/Facility/Investigations/InvestigationTable.tsx
+++ b/src/Components/Facility/Investigations/InvestigationTable.tsx
@@ -101,7 +101,7 @@ export const InvestigationTable = ({
               setShowForm((prev) => !prev);
             }}
           >
-            {!showForm && <CareIcon className="care-l-edit mr-2" />}
+            {!showForm && <CareIcon icon="l-edit" className="mr-2" />}
             {showForm ? "Cancel" : "Update Details"}
           </ButtonV2>
           {showForm && (
diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index c6578958ac5..06e0de28d62 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -267,7 +267,7 @@ const Location = ({
       className="mt-3 w-full"
       href={`location/${id}/beds`}
     >
-      <CareIcon className="care-l-bed text-lg" />
+      <CareIcon icon="l-bed" className="text-lg" />
       Manage Beds
     </ButtonV2>
     <div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
@@ -280,7 +280,7 @@ const Location = ({
           href={`location/${id}/update`}
           authorizeFor={NonReadOnlyUsers}
         >
-          <CareIcon className="care-l-pen text-lg" />
+          <CareIcon icon="l-pen" className="text-lg" />
           Edit
         </ButtonV2>
       </div>
@@ -295,7 +295,7 @@ const Location = ({
           }
           authorizeFor={NonReadOnlyUsers}
         >
-          <CareIcon className="care-l-trash text-lg" />
+          <CareIcon icon="l-trash" className="text-lg" />
           Delete
         </ButtonV2>
       </div>
diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
index 2e04312d277..b3fe50f7c4c 100644
--- a/src/Components/Facility/PatientNotesSlideover.tsx
+++ b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -140,7 +140,10 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
           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"
           href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/notes`}
         >
-          <CareIcon className="care-l-window-maximize text-lg transition-all delay-150 duration-300 ease-out" />
+          <CareIcon
+            icon="l-window-maximize"
+            className="text-lg transition-all delay-150 duration-300 ease-out"
+          />
         </Link>
       )}
       <div
@@ -151,13 +154,19 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
         )}
         onClick={() => setShow(!show)}
       >
-        <CareIcon className="care-l-angle-up text-lg transition-all delay-150 duration-300 ease-out" />
+        <CareIcon
+          icon="l-angle-up"
+          className="text-lg transition-all delay-150 duration-300 ease-out"
+        />
       </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"
         onClick={() => setShowPatientNotesPopup(false)}
       >
-        <CareIcon className="care-l-times text-lg transition-all delay-150 duration-300 ease-out" />
+        <CareIcon
+          icon="l-times"
+          className="text-lg transition-all delay-150 duration-300 ease-out"
+        />
       </div>
     </div>
   );
@@ -223,7 +232,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
               disabled={!patientActive}
               authorizeFor={NonReadOnlyUsers}
             >
-              <CareIcon className="care-l-message text-lg" />
+              <CareIcon icon="l-message" className="text-lg" />
             </ButtonV2>
           </div>
         </div>
diff --git a/src/Components/Facility/TriageForm.tsx b/src/Components/Facility/TriageForm.tsx
index 32971f1d302..b4d50a73cec 100644
--- a/src/Components/Facility/TriageForm.tsx
+++ b/src/Components/Facility/TriageForm.tsx
@@ -203,7 +203,10 @@ export const TriageForm = ({ facilityId, id }: Props) => {
         <ConfirmDialog
           title={
             <div className="flex gap-2">
-              <CareIcon className="care-l-exclamation-triangle text-xl text-red-500" />
+              <CareIcon
+                icon="l-exclamation-triangle"
+                className="text-xl text-red-500"
+              />
               <p>A Triage already exist on this date</p>
             </div>
           }
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index 4ad68e96d73..762c9f2d136 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -109,7 +109,8 @@ const AutoCompleteAsync = (props: Props) => {
                   {hasSelection && !loading && !required && (
                     <div className="tooltip">
                       <CareIcon
-                        className="care-l-times-circle mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                        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"
                         onClick={(e) => {
                           e.preventDefault();
                           onChange(null);
@@ -121,9 +122,12 @@ const AutoCompleteAsync = (props: Props) => {
                     </div>
                   )}
                   {loading ? (
-                    <CareIcon className="care-l-spinner -mb-1.5 animate-spin" />
+                    <CareIcon
+                      icon="l-spinner"
+                      className="-mb-1.5 animate-spin"
+                    />
                   ) : (
-                    <CareIcon className="care-l-angle-down -mb-1.5" />
+                    <CareIcon icon="l-angle-down" className="-mb-1.5" />
                   )}
                 </div>
               </Combobox.Button>
@@ -155,7 +159,7 @@ const AutoCompleteAsync = (props: Props) => {
                           )}
                         </div>
                         {selected && (
-                          <CareIcon className="care-l-check text-lg" />
+                          <CareIcon icon="l-check" className="text-lg" />
                         )}
                       </div>
                     )}
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index bf3840b2c44..ec5c73024c3 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -121,7 +121,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
         label: query,
         description: undefined,
         search: query.toLowerCase(),
-        icon: <CareIcon className="care-l-plus" />,
+        icon: <CareIcon icon="l-plus" />,
         value: query,
       },
       ...mappedOptions,
@@ -168,7 +168,8 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                   {value && !props.isLoading && !props.required && (
                     <div className="tooltip" id="clear-button">
                       <CareIcon
-                        className="care-l-times-circle h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                        icon="l-times-circle"
+                        className="h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
                         onClick={(e) => {
                           e.preventDefault();
                           props.onChange(undefined);
@@ -181,9 +182,9 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                   )}
 
                   {props.isLoading ? (
-                    <CareIcon className="care-l-spinner animate-spin" />
+                    <CareIcon icon="l-spinner" className="animate-spin" />
                   ) : (
-                    <CareIcon className="care-l-angle-down" />
+                    <CareIcon icon="l-angle-down" />
                   )}
                 </div>
               </Combobox.Button>
diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
index 9004dea939d..3dde6941795 100644
--- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -123,9 +123,9 @@ export const AutocompleteMutliSelect = <T, V>(
               <Combobox.Button 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">
                   {props.isLoading ? (
-                    <CareIcon className="care-l-spinner animate-spin" />
+                    <CareIcon icon="l-spinner" className="animate-spin" />
                   ) : (
-                    <CareIcon className="care-l-angle-down -mb-1.5" />
+                    <CareIcon icon="l-angle-down" className="-mb-1.5" />
                   )}
                 </div>
               </Combobox.Button>
@@ -162,7 +162,7 @@ export const AutocompleteMutliSelect = <T, V>(
                       <div className="flex justify-between">
                         Select All
                         {value.length === filteredOptions.length && (
-                          <CareIcon className="care-l-check text-lg" />
+                          <CareIcon icon="l-check" className="text-lg" />
                         )}
                       </div>
                     </Combobox.Option>
@@ -178,7 +178,7 @@ export const AutocompleteMutliSelect = <T, V>(
                         <div className="flex justify-between">
                           {option.label}
                           {selected && (
-                            <CareIcon className="care-l-check text-lg" />
+                            <CareIcon icon="l-check" className="text-lg" />
                           )}
                         </div>
                       )}
@@ -187,7 +187,7 @@ export const AutocompleteMutliSelect = <T, V>(
                 </>
               ) : (
                 <span className="flex items-center justify-center gap-2 py-6">
-                  {!query && <CareIcon className="care-l-search text-lg" />}
+                  {!query && <CareIcon icon="l-search" className="text-lg" />}
                   {query ? "No results" : "Type to search"}
                 </span>
               )}
@@ -202,7 +202,7 @@ export const AutocompleteMutliSelect = <T, V>(
 const Searching = () => {
   return (
     <div className="flex items-center justify-center gap-2 py-6">
-      <CareIcon className="care-l-spinner animate-spin text-xl" />
+      <CareIcon icon="l-spinner" className="animate-spin text-xl" />
       <span>Searching...</span>
     </div>
   );
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index 93ff4cf21eb..e86076d62af 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -14,7 +14,7 @@ import {
   PhoneNumberValidator,
   PhoneNumberType,
 } from "../FieldValidators";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
+import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon";
 
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
@@ -115,9 +115,15 @@ export default function PhoneNumberFormField(props: Props) {
             {country?.flag ?? "🇮🇳"}
           </span>
           {isOpen ? (
-            <CareIcon className="care-l-angle-up absolute right-1 top-1/2 -translate-y-1/2 text-2xl font-bold " />
+            <CareIcon
+              icon="l-angle-up"
+              className="absolute right-1 top-1/2 -translate-y-1/2 text-2xl font-bold"
+            />
           ) : (
-            <CareIcon className="care-l-angle-down absolute right-1 top-1/2 -translate-y-1/2 text-2xl font-bold " />
+            <CareIcon
+              icon="l-angle-down"
+              className="absolute right-1 top-1/2 -translate-y-1/2 text-2xl font-bold"
+            />
           )}
         </div>
 
@@ -146,12 +152,12 @@ export default function PhoneNumberFormField(props: Props) {
   );
 }
 
-const phoneNumberTypeIcons: Record<PhoneNumberType, string> = {
-  international_mobile: "globe",
-  indian_mobile: "mobile-android",
-  mobile: "mobile-android",
-  landline: "phone",
-  support: "headset",
+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 = ({ types }: { types: PhoneNumberType[] }) => (
@@ -159,10 +165,8 @@ const PhoneNumberTypesHelp = ({ types }: { types: PhoneNumberType[] }) => (
     {types.map((type) => (
       <span key={type} className="tooltip mt-1">
         <CareIcon
-          className={classNames(
-            `care-l-${phoneNumberTypeIcons[type]}`,
-            "text-lg text-gray-500"
-          )}
+          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("_", " ")}
diff --git a/src/Components/Form/FormFields/TextFormField.tsx b/src/Components/Form/FormFields/TextFormField.tsx
index 773dddc034b..3f814f27fc1 100644
--- a/src/Components/Form/FormFields/TextFormField.tsx
+++ b/src/Components/Form/FormFields/TextFormField.tsx
@@ -76,7 +76,7 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
           className="z-5 absolute right-0 top-0 flex h-full items-center px-3 text-xl"
           onClick={() => setShowPassword(!showPassword)}
         >
-          <CareIcon className={`care-l-eye${showPassword ? "" : "-slash"}`} />
+          <CareIcon icon={showPassword ? "l-eye" : "l-eye-slash"} />
         </button>
       </div>
     );
diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index 7a976b86bb7..96d7f65f8d0 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -122,7 +122,10 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                         </div>
                       )}
                     </div>
-                    <CareIcon className="care-l-angle-down -mb-0.5 text-lg text-gray-900" />
+                    <CareIcon
+                      icon="l-angle-down"
+                      className="-mb-0.5 text-lg text-gray-900"
+                    />
                   </div>
                 </Listbox.Button>
               </div>
@@ -142,7 +145,7 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
                             {option.label}
                             {(option.icon || option.isSelected) &&
                               (option.isSelected ? (
-                                <CareIcon className="care-l-check text-lg" />
+                                <CareIcon icon="l-check" className="text-lg" />
                               ) : (
                                 option.icon
                               ))}
@@ -186,7 +189,7 @@ export const MultiSelectOptionChip = (props: MultiSelectOptionChipProps) => {
           className="cursor-pointer rounded-full hover:bg-white"
           onClick={props.onRemove}
         >
-          <CareIcon className="care-l-times text-base" />
+          <CareIcon icon="l-times" className="text-base" />
         </p>
       )}
     </span>
diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index 40855b8b9a6..146cd0d9b4b 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -73,7 +73,7 @@ const SearchInput = ({
       className={className}
       leading={
         props.leading || (
-          <CareIcon className="care-l-search-alt text-gray-600" />
+          <CareIcon icon="l-search-alt" className="text-gray-600" />
         )
       }
       trailing={
diff --git a/src/Components/Form/SelectMenuV2.tsx b/src/Components/Form/SelectMenuV2.tsx
index 2e277b40b4f..640f3163b9d 100644
--- a/src/Components/Form/SelectMenuV2.tsx
+++ b/src/Components/Form/SelectMenuV2.tsx
@@ -106,7 +106,10 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                     </p>
                   </div>
                   {showChevronIcon && (
-                    <CareIcon className="care-l-angle-down -mb-0.5 text-lg text-gray-900" />
+                    <CareIcon
+                      icon="l-angle-down"
+                      className="-mb-0.5 text-lg text-gray-900"
+                    />
                   )}
                 </div>
               </Listbox.Button>
@@ -132,7 +135,10 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
                               {props.optionIcon
                                 ? option.icon
                                 : selected && (
-                                    <CareIcon className="care-l-check text-lg" />
+                                    <CareIcon
+                                      icon="l-check"
+                                      className="text-lg"
+                                    />
                                   )}
                             </div>
                             {option.description && (
diff --git a/src/Components/HCX/ClaimCreatedModal.tsx b/src/Components/HCX/ClaimCreatedModal.tsx
index 0b2e4703177..5148792e09e 100644
--- a/src/Components/HCX/ClaimCreatedModal.tsx
+++ b/src/Components/HCX/ClaimCreatedModal.tsx
@@ -41,7 +41,7 @@ export default function ClaimCreatedModal({ claim, ...props }: Props) {
       titleAction={
         <Submit disabled={isMakingClaim} onClick={handleSubmit}>
           {isMakingClaim && (
-            <CareIcon className="care-l-spinner animate-spin" />
+            <CareIcon icon="l-spinner" className="animate-spin" />
           )}
           {isMakingClaim
             ? `Requesting ${use === "Claim" ? "Claim" : "Pre-Authorization"}...`
diff --git a/src/Components/HCX/ClaimsItemsBuilder.tsx b/src/Components/HCX/ClaimsItemsBuilder.tsx
index 867f302a89e..42f1bc08cc8 100644
--- a/src/Components/HCX/ClaimsItemsBuilder.tsx
+++ b/src/Components/HCX/ClaimsItemsBuilder.tsx
@@ -70,7 +70,7 @@ export default function ClaimsItemsBuilder(props: Props) {
                     disabled={props.disabled}
                   >
                     Delete
-                    <CareIcon className="care-l-trash-alt text-lg" />
+                    <CareIcon icon="l-trash-alt" className="text-lg" />
                   </ButtonV2>
                 )}
               </div>
diff --git a/src/Components/HCX/CreateClaimCard.tsx b/src/Components/HCX/CreateClaimCard.tsx
index 755c2865747..1d3b3dc4933 100644
--- a/src/Components/HCX/CreateClaimCard.tsx
+++ b/src/Components/HCX/CreateClaimCard.tsx
@@ -153,7 +153,7 @@ export default function CreateClaimCard({
             Check Insurance Policy Eligibility
           </h1>
           <ButtonV2 onClick={() => setShowAddPolicy(true)} ghost border>
-            <CareIcon className="care-l-edit-alt text-lg" />
+            <CareIcon icon="l-edit-alt" className="text-lg" />
             Edit Patient Insurance Details
           </ButtonV2>
         </div>
@@ -177,7 +177,7 @@ export default function CreateClaimCard({
               setItems([...(items ?? []), { name: "", id: "", price: 0 }])
             }
           >
-            <CareIcon className="care-l-plus text-lg" />
+            <CareIcon icon="l-plus" className="text-lg" />
             <span>Add Item</span>
           </ButtonV2>
         </div>
@@ -229,7 +229,7 @@ export default function CreateClaimCard({
           onClick={handleSubmit}
           className="min-w-[200px]"
         >
-          {isCreating && <CareIcon className="care-l-spinner animate-spin" />}
+          {isCreating && <CareIcon icon="l-spinner" className="animate-spin" />}
           {isCreating
             ? `Creating ${use === "claim" ? "Claim" : "Pre-Authorization"}...`
             : "Proceed"}
diff --git a/src/Components/HCX/InsuranceDetailsBuilder.tsx b/src/Components/HCX/InsuranceDetailsBuilder.tsx
index 36713e317a2..c507566a259 100644
--- a/src/Components/HCX/InsuranceDetailsBuilder.tsx
+++ b/src/Components/HCX/InsuranceDetailsBuilder.tsx
@@ -105,7 +105,7 @@ const InsuranceDetailEditCard = ({
         <FieldLabel className="my-auto !font-bold">Policy</FieldLabel>
         <ButtonV2 variant="danger" type="button" ghost onClick={handleRemove}>
           Delete
-          <CareIcon className="care-l-trash-alt text-lg" />
+          <CareIcon icon="l-trash-alt" className="text-lg" />
         </ButtonV2>
       </div>
 
diff --git a/src/Components/HCX/PatientInsuranceDetailsEditor.tsx b/src/Components/HCX/PatientInsuranceDetailsEditor.tsx
index c11d2266aba..952ee29e6e7 100644
--- a/src/Components/HCX/PatientInsuranceDetailsEditor.tsx
+++ b/src/Components/HCX/PatientInsuranceDetailsEditor.tsx
@@ -111,7 +111,7 @@ export default function PatientInsuranceDetailsEditor({
             ])
           }
         >
-          <CareIcon className="care-l-plus text-lg" />
+          <CareIcon icon="l-plus" className="text-lg" />
           <span>Add Insurance Details</span>
         </ButtonV2>
         <div className="md:flex-1" />
@@ -119,7 +119,7 @@ export default function PatientInsuranceDetailsEditor({
         <Submit border disabled={isUpdating} onClick={handleSubmit}>
           {isUpdating ? (
             <>
-              <CareIcon className="care-l-spinner animate-spin text-lg" />
+              <CareIcon icon="l-spinner" className="animate-spin text-lg" />
               <span>Updating...</span>
             </>
           ) : (
diff --git a/src/Components/HCX/PolicyEligibilityCheck.tsx b/src/Components/HCX/PolicyEligibilityCheck.tsx
index 42aa3caa87d..a21b3ce611a 100644
--- a/src/Components/HCX/PolicyEligibilityCheck.tsx
+++ b/src/Components/HCX/PolicyEligibilityCheck.tsx
@@ -160,7 +160,7 @@ export default function HCXPolicyEligibilityCheck({
         >
           {isChecking ? (
             <>
-              <CareIcon className="care-l-spinner animate-spin text-lg" />
+              <CareIcon icon="l-spinner" className="animate-spin text-lg" />
               <span>Checking ...</span>
             </>
           ) : (
@@ -179,9 +179,7 @@ const EligibilityChip = ({ eligible }: { eligible: boolean }) => {
         eligible ? "bg-primary-100 text-primary-500" : "bg-red-500 text-white"
       }`}
     >
-      <CareIcon
-        className={`care-l-${eligible ? "check" : "times"} text-base`}
-      />
+      <CareIcon icon={eligible ? "l-check" : "l-times"} className="text-base" />
       <span className="text-xs uppercase">
         {eligible ? "Eligible" : "Not Eligible"}
       </span>
diff --git a/src/Components/Medicine/AdministerMedicine.tsx b/src/Components/Medicine/AdministerMedicine.tsx
index 12b7be3e0da..f7353051ea7 100644
--- a/src/Components/Medicine/AdministerMedicine.tsx
+++ b/src/Components/Medicine/AdministerMedicine.tsx
@@ -37,16 +37,16 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
     <ConfirmDialog
       action={
         <>
-          <CareIcon className="care-l-syringe text-lg" />
+          <CareIcon icon="l-syringe" className="text-lg" />
           {t("administer_medicine")}
         </>
       }
       title={t("administer_medicine")}
       description={
         <div className="text-sm font-semibold leading-relaxed text-gray-600">
-          <CareIcon className="care-l-history-alt pr-1" /> Last administered
+          <CareIcon icon="l-history-alt" className="pr-1" /> Last administered
           <span className="whitespace-nowrap pl-2">
-            <CareIcon className="care-l-clock" />{" "}
+            <CareIcon icon="l-clock" />{" "}
             {prescription.last_administration?.administered_date
               ? formatDateTime(
                   prescription.last_administration.administered_date
@@ -55,12 +55,12 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
           </span>
           {prescription.dosage_type === "TITRATED" && (
             <span className="whitespace-nowrap pl-2">
-              <CareIcon className="care-l-syringe" /> {t("dosage")}
+              <CareIcon icon="l-syringe" /> {t("dosage")}
               {":"} {prescription.last_administration?.dosage ?? "NA"}
             </span>
           )}
           <span className="whitespace-nowrap pl-2">
-            <CareIcon className="care-l-user" /> Administered by:{" "}
+            <CareIcon icon="l-user" /> Administered by:{" "}
             {prescription.last_administration?.administered_by?.username ??
               "NA"}
           </span>
diff --git a/src/Components/Medicine/ManagePrescriptions.tsx b/src/Components/Medicine/ManagePrescriptions.tsx
index 16e8ffedcb2..12ed0712533 100644
--- a/src/Components/Medicine/ManagePrescriptions.tsx
+++ b/src/Components/Medicine/ManagePrescriptions.tsx
@@ -33,11 +33,11 @@ export default function ManagePrescriptions() {
             onClick={() => goBack()}
             data-testid="return-to-patient-dashboard"
           >
-            <CareIcon className="care-l-angle-left-b text-lg" />
+            <CareIcon icon="l-angle-left-b" className="text-lg" />
             {t("return_to_patient_dashboard")}
           </ButtonV2>
           <span className="text-sm text-primary-500">
-            <CareIcon className="care-l-check text-base" />
+            <CareIcon icon="l-check" className="text-base" />
             <span className="pl-1">{t("all_changes_have_been_saved")}</span>
           </span>
         </div>
diff --git a/src/Components/Medicine/MedicineAdministration.tsx b/src/Components/Medicine/MedicineAdministration.tsx
index 23aef4b4dd1..44bbe436618 100644
--- a/src/Components/Medicine/MedicineAdministration.tsx
+++ b/src/Components/Medicine/MedicineAdministration.tsx
@@ -126,7 +126,7 @@ export default function MedicineAdministration(props: Props) {
               errorClassName="hidden"
             />
             <div className="text-sm font-semibold leading-relaxed text-gray-600">
-              <CareIcon className="care-l-history-alt pr-1" />{" "}
+              <CareIcon icon="l-history-alt" className="pr-1" />{" "}
               {t("last_administered")}
               <span className="pl-1">
                 {obj.last_administration?.administered_date
@@ -135,7 +135,7 @@ export default function MedicineAdministration(props: Props) {
               </span>
               {obj.dosage_type === "TITRATED" && (
                 <span className="whitespace-nowrap">
-                  <CareIcon className="care-l-syringe" /> {t("dosage")}
+                  <CareIcon icon="l-syringe" /> {t("dosage")}
                   {":"} {obj.last_administration?.dosage ?? "NA"}
                 </span>
               )}
@@ -224,7 +224,7 @@ export default function MedicineAdministration(props: Props) {
       ))}
       <div className="flex justify-end">
         <ButtonV2 onClick={handleSubmit} disabled={!selectedCount}>
-          <CareIcon className="care-l-syringe text-lg" />
+          <CareIcon icon="l-syringe" className="text-lg" />
           {t("administer_selected_medicines")}{" "}
           {selectedCount > 0 && `(${selectedCount})`}
         </ButtonV2>
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
index 7a1542b43ae..98bffe81804 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
@@ -129,7 +129,7 @@ export default function MedicineAdministrationTableRow({
                 }
                 onClick={() => setShowAdminister(true)}
               >
-                <CareIcon className="care-l-syringe text-lg" />
+                <CareIcon icon="l-syringe" className="text-lg" />
                 {t("administer")}
               </Submit>
             </div>
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
index 48c7e2aaff8..fd3d50272a3 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
@@ -83,7 +83,7 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
       <SubHeading
         title={is_prn ? "PRN Prescriptions" : "Prescriptions"}
         lastModified={
-          prescriptions?.[0]?.last_administered_on ??
+          prescriptions?.[0]?.last_administration?.created_date ??
           prescriptions?.[0]?.modified_date
         }
         options={
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/utils.ts b/src/Components/Medicine/MedicineAdministrationSheet/utils.ts
index 93ee5fb4b08..437444e8c62 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/utils.ts
+++ b/src/Components/Medicine/MedicineAdministrationSheet/utils.ts
@@ -10,14 +10,15 @@ export function computeActivityBounds(prescriptions: Prescription[]) {
     )
   );
 
-  // get end by finding latest of all presciption's last_administered_on
+  // get end by finding latest of all presciption's last administration time
   const end = new Date(
     prescriptions
-      .filter((prescription) => prescription.last_administered_on)
+      .filter((prescription) => prescription.last_administration?.created_date)
       .reduce(
         (latest, curr) =>
-          curr.last_administered_on && curr.last_administered_on > latest
-            ? curr.last_administered_on
+          curr.last_administration?.created_date &&
+          curr.last_administration?.created_date > latest
+            ? curr.last_administration?.created_date
             : latest,
         prescriptions[0]?.created_date ?? new Date()
       )
diff --git a/src/Components/Medicine/PrescriptionBuilder.tsx b/src/Components/Medicine/PrescriptionBuilder.tsx
index 998b96f3315..4dcc2603122 100644
--- a/src/Components/Medicine/PrescriptionBuilder.tsx
+++ b/src/Components/Medicine/PrescriptionBuilder.tsx
@@ -83,7 +83,7 @@ export default function PrescriptionBuilder({
         disabled={disabled}
       >
         <div className="flex w-full justify-start gap-2">
-          <CareIcon className="care-l-plus text-lg" />
+          <CareIcon icon="l-plus" className="text-lg" />
           <span className="font-bold">
             {t(is_prn ? "add_prn_prescription" : "add_prescription_medication")}
           </span>
@@ -98,7 +98,7 @@ export default function PrescriptionBuilder({
           )}
           description={
             <div className="mt-2 flex w-full justify-start gap-2 text-warning-500">
-              <CareIcon className="care-l-exclamation-triangle text-base" />
+              <CareIcon icon="l-exclamation-triangle" className="text-base" />
               <span>{t("modification_caution_note")}</span>
             </div>
           }
diff --git a/src/Components/Medicine/PrescriptionDetailCard.tsx b/src/Components/Medicine/PrescriptionDetailCard.tsx
index 7112f75d598..773c5df6d33 100644
--- a/src/Components/Medicine/PrescriptionDetailCard.tsx
+++ b/src/Components/Medicine/PrescriptionDetailCard.tsx
@@ -66,7 +66,7 @@ export default function PrescriptionDetailCard({
                     ghost
                     border
                   >
-                    <CareIcon className="care-l-syringe text-base" />
+                    <CareIcon icon="l-syringe" className="text-base" />
                     {t("administer")}
                   </ButtonV2>
                   <ButtonV2
@@ -78,7 +78,7 @@ export default function PrescriptionDetailCard({
                     border
                     onClick={props.onDiscontinueClick}
                   >
-                    <CareIcon className="care-l-ban text-base" />
+                    <CareIcon icon="l-ban" className="text-base" />
                     {t("discontinue")}
                   </ButtonV2>
                 </div>
diff --git a/src/Components/Medicine/PrescriptionsTable.tsx b/src/Components/Medicine/PrescriptionsTable.tsx
index 6cedc4ec29c..79ddac3e5cb 100644
--- a/src/Components/Medicine/PrescriptionsTable.tsx
+++ b/src/Components/Medicine/PrescriptionsTable.tsx
@@ -119,7 +119,7 @@ export default function PrescriptionsTable({
                 variant="danger"
                 onClick={() => setShowDiscontinueFor(detailedViewFor)}
               >
-                <CareIcon className="care-l-ban text-lg" />
+                <CareIcon icon="l-ban" className="text-lg" />
                 {t("discontinue")}
               </Submit>
               <Submit
@@ -129,7 +129,7 @@ export default function PrescriptionsTable({
                 }
                 onClick={() => setShowAdministerFor(detailedViewFor)}
               >
-                <CareIcon className="care-l-syringe text-lg" />
+                <CareIcon icon="l-syringe" className="text-lg" />
                 {t("administer")}
               </Submit>
             </div>
@@ -142,7 +142,7 @@ export default function PrescriptionsTable({
             {is_prn ? "PRN Prescriptions" : "Prescriptions"}
           </span>
           <div className="text-gray-600">
-            <CareIcon className="care-l-history-alt pr-2" />
+            <CareIcon icon="l-history-alt" className="pr-2" />
             <span className="text-xs">
               {lastModified && formatDateTime(lastModified)}
             </span>
@@ -157,7 +157,7 @@ export default function PrescriptionsTable({
               href="prescriptions"
               className="w-full lg:w-auto"
             >
-              <CareIcon className="care-l-pen text-lg" />
+              <CareIcon icon="l-pen" className="text-lg" />
               <span className="hidden lg:block">{t("edit_prescriptions")}</span>
               <span className="block lg:hidden">{t("edit")}</span>
             </ButtonV2>
@@ -168,7 +168,7 @@ export default function PrescriptionsTable({
               onClick={() => setShowBulkAdminister(true)}
               className="w-full lg:w-auto"
             >
-              <CareIcon className="care-l-syringe text-lg" />
+              <CareIcon icon="l-syringe" className="text-lg" />
               <span className="hidden lg:block">
                 {t("administer_medicines")}
               </span>
@@ -225,7 +225,7 @@ export default function PrescriptionsTable({
                       if (med.discontinued) {
                         return (
                           <div className="flex w-full items-center justify-center gap-1 font-medium text-gray-700">
-                            <CareIcon className="care-l-ban" />
+                            <CareIcon icon="l-ban" />
                             <span className="text-sm">{t("discontinued")}</span>
                           </div>
                         );
@@ -244,7 +244,7 @@ export default function PrescriptionsTable({
                               setShowAdministerFor(med);
                             }}
                           >
-                            <CareIcon className="care-l-syringe text-base" />
+                            <CareIcon icon="l-syringe" className="text-base" />
                             {t("administer")}
                           </ButtonV2>
                           <ButtonV2
@@ -258,7 +258,7 @@ export default function PrescriptionsTable({
                               setShowDiscontinueFor(med);
                             }}
                           >
-                            <CareIcon className="care-l-ban text-base" />
+                            <CareIcon icon="l-ban" className="text-base" />
                             {t("discontinue")}
                           </ButtonV2>
                         </div>
diff --git a/src/Components/Notifications/NoticeBoard.tsx b/src/Components/Notifications/NoticeBoard.tsx
index 8ad3afba0f8..7835f8576b7 100644
--- a/src/Components/Notifications/NoticeBoard.tsx
+++ b/src/Components/Notifications/NoticeBoard.tsx
@@ -42,7 +42,7 @@ export const NoticeBoard = () => {
     notices = (
       <div className=" m-auto flex max-w-xs items-center ">
         <div className="my-36">
-          <CareIcon className=" care-l-bell-slash h-auto text-gray-500" />
+          <CareIcon icon="l-bell-slash" className="h-auto text-gray-500" />
           <div className=" m-auto mt-6 text-2xl text-gray-500">
             No Notice Available
           </div>
diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index 1ce23dafdbc..95093743080 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -121,11 +121,8 @@ const NotificationTile = ({
             }}
           >
             <CareIcon
-              className={
-                isMarkingAsRead
-                  ? "care-l-spinner animate-spin"
-                  : "care-l-envelope-check"
-              }
+              icon={isMarkingAsRead ? "l-spinner" : "l-envelope-check"}
+              className={isMarkingAsRead ? "animate-spin" : ""}
             />
             <span className="text-xs">{t("mark_as_read")}</span>
           </ButtonV2>
@@ -134,7 +131,7 @@ const NotificationTile = ({
             ghost
             className="shrink-0 bg-white px-2 py-1 font-semibold hover:bg-secondary-300"
           >
-            <CareIcon className="care-l-envelope-open" />
+            <CareIcon icon="l-envelope-open" />
             <span className="text-xs">{t("open")}</span>
           </ButtonV2>
         </div>
@@ -212,21 +209,21 @@ export default function NotificationsList({
     if (status === "NotSubscribed") {
       return (
         <>
-          <CareIcon className="care-l-bell" />
+          <CareIcon icon="l-bell" />
           <span className="text-xs">{t("subscribe")}</span>
         </>
       );
     } else if (status === "SubscribedOnAnotherDevice") {
       return (
         <>
-          <CareIcon className="care-l-bell" />
+          <CareIcon icon="l-bell" />
           <span className="text-xs">{t("subscribe_on_this_device")}</span>
         </>
       );
     } else {
       return (
         <>
-          <CareIcon className="care-l-bell-slash" />
+          <CareIcon icon="l-bell-slash" />
           <span className="text-xs">{t("unsubscribe")}</span>
         </>
       );
@@ -414,7 +411,7 @@ export default function NotificationsList({
       <Item
         text={t("Notifications")}
         do={() => setOpen(!open)}
-        icon={<CareIcon className="care-l-bell h-5" />}
+        icon={<CareIcon icon="l-bell" className="h-5" />}
         badgeCount={unreadCount}
         handleOverflow={handleOverflow}
       />
@@ -438,7 +435,7 @@ export default function NotificationsList({
                 setOffset(0);
               }}
             >
-              <CareIcon className="care-l-sync" />
+              <CareIcon icon="l-sync" />
               <span className="text-xs">{t("reload")}</span>
             </ButtonV2>
             <ButtonV2
@@ -457,11 +454,8 @@ export default function NotificationsList({
               onClick={handleMarkAllAsRead}
             >
               <CareIcon
-                className={
-                  isMarkingAllAsRead
-                    ? "care-l-spinner animate-spin"
-                    : "care-l-envelope-check"
-                }
+                icon={isMarkingAllAsRead ? "l-spinner" : "l-envelope-check"}
+                className={isMarkingAllAsRead ? "animate-spin" : ""}
               />
               <span className="text-xs">{t("mark_all_as_read")}</span>
             </ButtonV2>
@@ -470,9 +464,7 @@ export default function NotificationsList({
               variant="secondary"
               onClick={() => setShowUnread(!showUnread)}
             >
-              <CareIcon
-                className={showUnread ? "care-l-filter-slash" : "care-l-filter"}
-              />
+              <CareIcon icon={showUnread ? "l-filter-slash" : "l-filter"} />
 
               <span className="text-xs">
                 {showUnread
diff --git a/src/Components/Patient/DailyRoundListDetails.tsx b/src/Components/Patient/DailyRoundListDetails.tsx
index 02ad9aa47fa..0896cb5310c 100644
--- a/src/Components/Patient/DailyRoundListDetails.tsx
+++ b/src/Components/Patient/DailyRoundListDetails.tsx
@@ -58,7 +58,10 @@ export const DailyRoundListDetails = (props: any) => {
       title={`Consultation Update #${id}`}
       backUrl={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily-rounds`}
     >
-      <div className="mt-4 h-full rounded-lg border bg-white p-4 text-black shadow hover:border-primary-500">
+      <div
+        className="mt-4 h-full rounded-lg border bg-white p-4 text-black shadow hover:border-primary-500"
+        id="consultation-preview"
+      >
         <div className="flex justify-between">
           <div className="max-w-md">
             <div>
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
index 1b1ee8f67dd..6e6d289d187 100644
--- a/src/Components/Patient/FileUpload.tsx
+++ b/src/Components/Patient/FileUpload.tsx
@@ -629,7 +629,10 @@ export const FileUpload = (props: FileUploadProps) => {
                           }}
                           className="m-1 w-full sm:w-auto"
                         >
-                          <CareIcon className="care-l-arrow-circle-down text-lg" />{" "}
+                          <CareIcon
+                            icon="l-arrow-circle-down"
+                            className="text-lg"
+                          />{" "}
                           DOWNLOAD
                         </ButtonV2>
                         {item?.uploaded_by?.username === authUser.username ||
@@ -647,7 +650,7 @@ export const FileUpload = (props: FileUploadProps) => {
                               }}
                               className="m-1 w-full sm:w-auto"
                             >
-                              <CareIcon className="care-l-pen text-lg" />
+                              <CareIcon icon="l-pen" className="text-lg" />
                               RENAME
                             </ButtonV2>
                           </>
@@ -669,7 +672,7 @@ export const FileUpload = (props: FileUploadProps) => {
                               }}
                               className="m-1 w-full sm:w-auto"
                             >
-                              <CareIcon className="care-l-archive text-lg" />
+                              <CareIcon icon="l-archive" className="text-lg" />
                               ARCHIVE
                             </ButtonV2>
                           </>
@@ -762,7 +765,7 @@ export const FileUpload = (props: FileUploadProps) => {
                         }}
                         className="m-1 w-full sm:w-auto"
                       >
-                        <CareIcon className="care-l-pen text-lg" />
+                        <CareIcon icon="l-pen" className="text-lg" />
                         RENAME
                       </ButtonV2>
                     </>
@@ -782,7 +785,7 @@ export const FileUpload = (props: FileUploadProps) => {
                         }}
                         className="m-1 w-full sm:w-auto"
                       >
-                        <CareIcon className="care-l-archive text-lg" />
+                        <CareIcon icon="l-archive" className="text-lg" />
                         ARCHIVE
                       </ButtonV2>
                     </>
@@ -872,7 +875,8 @@ export const FileUpload = (props: FileUploadProps) => {
             <div className="flex flex-wrap items-center">
               <ButtonV2 variant="secondary" className="m-1 w-full sm:w-auto">
                 {" "}
-                <CareIcon className="care-l-eye-slash text-lg" /> FILE ARCHIVED
+                <CareIcon icon="l-eye-slash" className="text-lg" /> FILE
+                ARCHIVED
               </ButtonV2>
               <ButtonV2
                 onClick={() => {
@@ -886,7 +890,7 @@ export const FileUpload = (props: FileUploadProps) => {
                 }}
                 className="m-1 w-full sm:w-auto"
               >
-                <CareIcon className="care-l-question-circle text-lg" />
+                <CareIcon icon="l-question-circle" className="text-lg" />
                 MORE DETAILS
               </ButtonV2>
             </div>
@@ -905,8 +909,8 @@ export const FileUpload = (props: FileUploadProps) => {
   }
 
   const onFileChange = (e: ChangeEvent<HTMLInputElement>): any => {
-    if (e.target.files == null) {
-      throw new Error("Error finding e.target.files");
+    if (!e.target.files?.length) {
+      return;
     }
     const f = e.target.files[0];
     const fileName = f.name;
@@ -1144,7 +1148,10 @@ export const FileUpload = (props: FileUploadProps) => {
         title={
           <div className="flex flex-row">
             <div className="rounded-full bg-primary-100 px-5 py-4">
-              <CareIcon className="care-l-camera-change text-lg text-primary-500" />
+              <CareIcon
+                icon="l-camera-change"
+                className="text-lg text-primary-500"
+              />
             </div>
             <div className="m-4">
               <h1 className="text-xl text-black "> Camera</h1>
@@ -1239,7 +1246,7 @@ export const FileUpload = (props: FileUploadProps) => {
         <div className={`${isLaptopScreen ? " " : " hidden "}`}>
           <div className="m-4 flex lg:hidden">
             <ButtonV2 onClick={handleSwitchCamera}>
-              <CareIcon className="care-l-camera-change text-lg" />
+              <CareIcon icon="l-camera-change" className="text-lg" />
               {`${t("switch")} ${t("camera")}`}
             </ButtonV2>
           </div>
@@ -1254,7 +1261,7 @@ export const FileUpload = (props: FileUploadProps) => {
                         captureImage();
                       }}
                     >
-                      <CareIcon className="care-l-capture text-lg" />
+                      <CareIcon icon="l-capture" className="text-lg" />
                       {t("capture")}
                     </ButtonV2>
                   </div>
@@ -1299,7 +1306,10 @@ export const FileUpload = (props: FileUploadProps) => {
         title={
           <div className="flex flex-row">
             <div className="rounded-full bg-primary-100 px-5 py-4">
-              <CareIcon className="care-l-edit-alt text-lg text-primary-500" />
+              <CareIcon
+                icon="l-edit-alt"
+                className="text-lg text-primary-500"
+              />
             </div>
             <div className="m-4">
               <h1 className="text-xl text-black ">Rename File</h1>
@@ -1343,7 +1353,10 @@ export const FileUpload = (props: FileUploadProps) => {
         title={
           <div className="flex flex-row">
             <div className="my-1 mr-3 rounded-full bg-red-100 px-5 py-4 text-center">
-              <CareIcon className="care-l-exclamation-triangle text-lg text-danger-500 " />
+              <CareIcon
+                icon="l-exclamation-triangle"
+                className="text-lg text-danger-500"
+              />
             </div>
             <div className="text-grey-200 text-sm">
               <h1 className="text-xl text-black">Archive File</h1>
@@ -1390,7 +1403,10 @@ export const FileUpload = (props: FileUploadProps) => {
         title={
           <div className="flex flex-row">
             <div className="my-1 mr-3 rounded-full bg-primary-100 px-5 py-4 text-center">
-              <CareIcon className="care-l-question-circle text-lg text-primary-500 " />
+              <CareIcon
+                icon="l-question-circle"
+                className="text-lg text-primary-500"
+              />
             </div>
             <div className="text-grey-200 text-sm">
               <h1 className="text-xl text-black">File Details</h1>
@@ -1410,10 +1426,10 @@ export const FileUpload = (props: FileUploadProps) => {
               <b>Reason:</b> {modalDetails?.reason}
             </div>
             <div className="text-md text-center">
-              <b>Archived_by:</b> {modalDetails?.userArchived}
+              <b>Archived by:</b> {modalDetails?.userArchived}
             </div>
             <div className="text-md text-center">
-              <b>Time of Archive:</b>
+              <b>Time of Archive: </b>
               {formatDateTime(modalDetails?.archiveTime)}
             </div>
           </div>
@@ -1464,11 +1480,11 @@ export const FileUpload = (props: FileUploadProps) => {
                           deleteAudioBlob();
                         }}
                       >
-                        <CareIcon className="care-l-trash h-4" /> Delete
+                        <CareIcon icon="l-trash" className="h-4" /> Delete
                       </ButtonV2>
                     </div>
                   )}
-                  <div className="flex flex-col items-center gap-4 md:flex-row">
+                  <div className="flex flex-col items-center gap-4 md:flex-row md:flex-wrap lg:flex-nowrap">
                     <VoiceRecorder
                       createAudioBlob={createAudioBlob}
                       confirmAudioBlobExists={confirmAudioBlobExists}
@@ -1477,7 +1493,10 @@ export const FileUpload = (props: FileUploadProps) => {
                     />
                     {!audioBlobExists && (
                       <span className="text-sm font-medium text-warning-500">
-                        <CareIcon className="care-l-exclamation-triangle mr-1 text-base" />
+                        <CareIcon
+                          icon="l-exclamation-triangle"
+                          className="mr-1 text-base"
+                        />
                         Please allow browser permission before you start
                         speaking
                       </span>
@@ -1491,7 +1510,7 @@ export const FileUpload = (props: FileUploadProps) => {
                         }}
                         className="w-full"
                       >
-                        <CareIcon className={"care-l-cloud-upload text-xl"} />
+                        <CareIcon icon="l-cloud-upload" className="text-xl" />
                         Save
                       </ButtonV2>
                     </div>
@@ -1526,7 +1545,10 @@ export const FileUpload = (props: FileUploadProps) => {
                       {({ isAuthorized }) =>
                         isAuthorized ? (
                           <label className="button-size-default button-shape-square button-primary-default inline-flex h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500">
-                            <CareIcon className="care-l-file-upload-alt text-lg" />
+                            <CareIcon
+                              icon="l-file-upload-alt"
+                              className="text-lg"
+                            />
                             {t("choose_file")}
                             <input
                               id="file_upload_patient"
@@ -1546,7 +1568,7 @@ export const FileUpload = (props: FileUploadProps) => {
                       onClick={() => setModalOpenForCamera(true)}
                       className="w-full"
                     >
-                      <CareIcon className="care-l-camera mr-2 text-lg" />
+                      <CareIcon icon="l-camera" className="mr-2 text-lg" />
                       Open Camera
                     </ButtonV2>
                     <ButtonV2
@@ -1560,7 +1582,7 @@ export const FileUpload = (props: FileUploadProps) => {
                       onClick={handleUpload}
                       className="w-full"
                     >
-                      <CareIcon className="care-l-cloud-upload text-lg" />
+                      <CareIcon icon="l-cloud-upload" className="text-lg" />
                       {t("upload")}
                     </ButtonV2>
                   </div>
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 220165e9e4c..ff3dede4072 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -103,7 +103,7 @@ export const PatientManager = () => {
   });
   const authUser = useAuthUser();
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
-  const [showDialog, setShowDialog] = useState(false);
+  const [showDialog, setShowDialog] = useState<"create" | "list-discharged">();
   const [showDoctors, setShowDoctors] = useState(false);
   const [showDoctorConnect, setShowDoctorConnect] = useState(false);
   const [phone_number, setPhoneNumber] = useState("");
@@ -406,7 +406,9 @@ export const PatientManager = () => {
 
   const { data: permittedFacilities } = useQuery(
     routes.getPermittedFacilities,
-    {}
+    {
+      query: { limit: 1 },
+    }
   );
 
   const LastAdmittedToTypeBadges = () => {
@@ -503,7 +505,10 @@ export const PatientManager = () => {
               ) : patient.last_consultation?.suggestion === "DC" ? (
                 <div className="flex h-full flex-col items-center justify-center">
                   <div className="tooltip">
-                    <CareIcon className="care-l-estate text-3xl text-gray-500" />
+                    <CareIcon
+                      icon="l-estate"
+                      className="text-3xl text-gray-500"
+                    />
                     <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-sm font-medium">
                       Domiciliary Care
                     </span>
@@ -723,6 +728,9 @@ export const PatientManager = () => {
     };
   };
 
+  const onlyAccessibleFacility =
+    permittedFacilities?.count === 1 ? permittedFacilities.results[0] : null;
+
   return (
     <Page
       title={t("Patients")}
@@ -736,31 +744,46 @@ export const PatientManager = () => {
               onClick={() => {
                 if (qParams.facility)
                   navigate(`/facility/${qParams.facility}/patient`);
-                else if (permittedFacilities?.results.length === 1)
-                  navigate(
-                    `/facility/${permittedFacilities?.results[0].id}/patient`
-                  );
-                else setShowDialog(true);
+                else if (onlyAccessibleFacility)
+                  navigate(`/facility/${onlyAccessibleFacility.id}/patient`);
+                else setShowDialog("create");
               }}
               className="w-full lg:w-fit"
             >
-              <CareIcon className="care-l-plus text-lg" />
+              <CareIcon icon="l-plus" className="text-lg" />
               <p id="add-patient-div" className="lg:my-[2px]">
                 Add Patient Details
               </p>
             </ButtonV2>
           </div>
           <div className="flex w-full flex-col items-center justify-end gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
-            {(authUser.user_type === "StateAdmin" ||
-              authUser.user_type === "StateReadOnlyAdmin") && (
-              <SwitchTabs
-                tab1="Live"
-                tab2="Discharged"
-                onClickTab1={() => updateQuery({ is_active: "True" })}
-                onClickTab2={() => updateQuery({ is_active: "False" })}
-                isTab2Active={tabValue ? true : false}
-              />
-            )}
+            <SwitchTabs
+              tab1="Live"
+              tab2="Discharged"
+              onClickTab1={() => updateQuery({ is_active: "True" })}
+              onClickTab2={() => {
+                // Navigate to dedicated discharged list page if filtered by a facility or user has access only to one facility.
+                const id = qParams.facility || onlyAccessibleFacility?.id;
+                if (id) {
+                  navigate(`facility/${id}/discharged-patients`);
+                  return;
+                }
+
+                if (
+                  authUser.user_type === "StateAdmin" ||
+                  authUser.user_type === "StateReadOnlyAdmin"
+                ) {
+                  updateQuery({ is_active: "False" });
+                  return;
+                }
+
+                Notification.Warn({
+                  msg: "Facility needs to be selected to view discharged patients.",
+                });
+                setShowDialog("list-discharged");
+              }}
+              isTab2Active={!!tabValue}
+            />
             {showDoctorConnect && (
               <ButtonV2
                 id="doctor-connect-patient-button"
@@ -773,7 +796,7 @@ export const PatientManager = () => {
                   setShowDoctors(true);
                 }}
               >
-                <CareIcon className="care-l-phone text-lg" />
+                <CareIcon icon="l-phone" className="text-lg" />
                 <p className="lg:my-[2px]">Doctor Connect</p>
               </ButtonV2>
             )}
@@ -803,7 +826,7 @@ export const PatientManager = () => {
                   }}
                   className="mr-5 w-full lg:w-fit"
                 >
-                  <CareIcon className="care-l-export" />
+                  <CareIcon icon="l-export" />
                   <span className="lg:my-[3px]">Export</span>
                 </ButtonV2>
               ) : (
@@ -811,18 +834,10 @@ export const PatientManager = () => {
                   disabled={!isExportAllowed}
                   exportItems={[
                     {
-                      label:
-                        tabValue === 0
-                          ? "Live patients"
-                          : "Discharged patients",
+                      label: "Export Live patients",
                       action: exportPatients(true),
                       parse: preventDuplicatePatientsDuetoPolicyId,
                     },
-                    {
-                      label: "All patients",
-                      action: exportPatients(false),
-                      parse: preventDuplicatePatientsDuetoPolicyId,
-                    },
                   ]}
                 />
               )}
@@ -838,12 +853,21 @@ export const PatientManager = () => {
       }
     >
       <FacilitiesSelectDialogue
-        show={showDialog}
+        show={!!showDialog}
         setSelected={(e) => setSelectedFacility(e)}
         selectedFacility={selectedFacility}
-        handleOk={() => navigate(`facility/${selectedFacility.id}/patient`)}
+        handleOk={() => {
+          switch (showDialog) {
+            case "create":
+              navigate(`facility/${selectedFacility.id}/patient`);
+              break;
+            case "list-discharged":
+              navigate(`facility/${selectedFacility.id}/discharged-patients`);
+              break;
+          }
+        }}
         handleCancel={() => {
-          setShowDialog(false);
+          setShowDialog(undefined);
           setSelectedFacility({ name: "" });
         }}
       />
diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
index 6392c5c4d45..0275710444a 100644
--- a/src/Components/Patient/PatientFilter.tsx
+++ b/src/Components/Patient/PatientFilter.tsx
@@ -599,7 +599,7 @@ export default function PatientFilter(props: any) {
                 setFilterState({ ...filterState, facility_type: v })
               }
               optionIcon={() => (
-                <CareIcon className="care-l-hospital text-lg" />
+                <CareIcon icon="l-hospital" className="text-lg" />
               )}
             />
           </div>
@@ -675,7 +675,7 @@ export default function PatientFilter(props: any) {
               optionValue={({ id }) => id}
               optionIcon={({ id }) => (
                 <>
-                  <CareIcon className="care-l-syringe mr-2 w-5" />
+                  <CareIcon icon="l-syringe" className="mr-2 w-5" />
                   <span className="font-bold">{id}</span>
                 </>
               )}
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index 841a8d31ddf..5c151553379 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -5,6 +5,7 @@ import {
   DISCHARGE_REASONS,
   GENDER_TYPES,
   SAMPLE_TEST_STATUS,
+  OCCUPATION_TYPES,
 } from "../../Common/constants";
 
 import * as Notification from "../../Utils/Notifications";
@@ -39,6 +40,10 @@ import PaginatedList from "../../CAREUI/misc/PaginatedList";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
+export const parseOccupation = (occupation: string | undefined) => {
+  return OCCUPATION_TYPES.find((i) => i.value === occupation)?.text;
+};
+
 export const PatientHome = (props: any) => {
   const { facilityId, id } = props;
   const [showShifts, setShowShifts] = useState(false);
@@ -419,7 +424,7 @@ export const PatientHome = (props: any) => {
                   {patientGender} | {patientData.blood_group || "-"}
                 </p>
               </div>
-              <div className="mb-8 mt-2 grid grid-cols-1 items-center gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-3">
+              <div className="mb-8 mt-2 grid grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-4">
                 <div className="sm:col-span-1">
                   <div className="text-sm font-semibold leading-5 text-zinc-400">
                     Date of Birth
@@ -530,6 +535,14 @@ export const PatientHome = (props: any) => {
                       </div>
                     </div>
                   )}
+                <div className="sm:col-span-1">
+                  <div className="text-sm font-semibold leading-5 text-zinc-400">
+                    Occupation
+                  </div>
+                  <div className="mt-1  text-sm font-medium leading-5 ">
+                    {parseOccupation(patientData.meta_info?.occupation) || "-"}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -636,7 +649,7 @@ export const PatientHome = (props: any) => {
                       )
                     }
                   >
-                    <CareIcon className="care-l-edit-alt text-lg" />
+                    <CareIcon icon="l-edit-alt" className="text-lg" />
                     Update Details
                   </ButtonV2>
                 </div>
@@ -653,7 +666,7 @@ export const PatientHome = (props: any) => {
                     }
                     authorizeFor={NonReadOnlyUsers}
                   >
-                    <CareIcon className="care-l-lock text-lg" />
+                    <CareIcon icon="l-lock" className="text-lg" />
                     {patientData.allow_transfer
                       ? "Disable Transfer"
                       : "Allow Transfer"}
@@ -673,9 +686,9 @@ export const PatientHome = (props: any) => {
           >
             <div>Shifting</div>
             {showShifts ? (
-              <CareIcon className="care-l-angle-up text-2xl" />
+              <CareIcon icon="l-angle-up" className="text-2xl" />
             ) : (
-              <CareIcon className="care-l-angle-down text-2xl" />
+              <CareIcon icon="l-angle-down" className="text-2xl" />
             )}
           </div>
           <div
@@ -715,7 +728,10 @@ export const PatientHome = (props: any) => {
                               title="Shifting status"
                               className="flex items-center text-sm font-semibold leading-5 text-zinc-400"
                             >
-                              <CareIcon className="care-l-truck mr-2 text-lg" />
+                              <CareIcon
+                                icon="l-truck"
+                                className="mr-2 text-lg"
+                              />
                               <dd className="text-sm font-bold leading-5 text-gray-900">
                                 {shift.status}
                               </dd>
@@ -726,7 +742,10 @@ export const PatientHome = (props: any) => {
                               title=" Origin facility"
                               className="flex items-center text-sm font-semibold leading-5 text-zinc-400"
                             >
-                              <CareIcon className="care-l-plane-fly mr-2 text-lg" />
+                              <CareIcon
+                                icon="l-plane-fly"
+                                className="mr-2 text-lg"
+                              />
                               <dd className="text-sm font-bold leading-5 text-gray-900">
                                 {(shift.origin_facility_object || {})?.name}
                               </dd>
@@ -737,7 +756,10 @@ export const PatientHome = (props: any) => {
                               title="Shifting approving facility"
                               className="flex items-center text-sm font-semibold leading-5 text-zinc-400"
                             >
-                              <CareIcon className="care-l-user-check mr-2 text-lg" />
+                              <CareIcon
+                                icon="l-user-check"
+                                className="mr-2 text-lg"
+                              />
                               <dd className="text-sm font-bold leading-5 text-gray-900">
                                 {
                                   (
@@ -753,7 +775,10 @@ export const PatientHome = (props: any) => {
                               title=" Assigned facility"
                               className="flex items-center text-sm font-semibold leading-5 text-zinc-400"
                             >
-                              <CareIcon className="care-l-plane-arrival mr-2 text-lg" />
+                              <CareIcon
+                                icon="l-plane-arrival"
+                                className="mr-2 text-lg"
+                              />
                               <dd className="text-sm font-bold leading-5 text-gray-900">
                                 {(shift.assigned_facility_object || {})?.name ||
                                   "Yet to be decided"}
@@ -773,7 +798,10 @@ export const PatientHome = (props: any) => {
                                   : "rounded p-1 font-normal text-red-600")
                               }
                             >
-                              <CareIcon className="care-l-stopwatch mr-2 text-lg" />
+                              <CareIcon
+                                icon="l-stopwatch"
+                                className="mr-2 text-lg"
+                              />
                               <dd className="text-sm font-bold leading-5">
                                 {formatDateTime(shift.modified_date) || "--"}
                               </dd>
@@ -789,7 +817,7 @@ export const PatientHome = (props: any) => {
                             navigate(`/shifting/${shift.external_id}`)
                           }
                         >
-                          <CareIcon className="care-l-eye mr-2 text-lg" />
+                          <CareIcon icon="l-eye" className="mr-2 text-lg" />
                           All Details
                         </ButtonV2>
                       </div>
@@ -1017,7 +1045,10 @@ export const PatientHome = (props: any) => {
                     )}
                   >
                     <span>
-                      <CareIcon className="care-l-chat-bubble-user text-5xl" />
+                      <CareIcon
+                        icon="l-chat-bubble-user"
+                        className="text-5xl"
+                      />
                     </span>
                   </div>
 
@@ -1035,7 +1066,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="text-center text-green-700">
                     <span>
-                      <CareIcon className="care-l-file-search-alt text-5xl" />
+                      <CareIcon icon="l-file-search-alt" className="text-5xl" />
                     </span>
                   </div>
                   <div>
@@ -1056,7 +1087,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="text-center text-green-700">
                     <span>
-                      <CareIcon className="care-l-file-upload text-5xl" />
+                      <CareIcon icon="l-file-upload" className="text-5xl" />
                     </span>
                   </div>
                   <div>
@@ -1089,7 +1120,7 @@ export const PatientHome = (props: any) => {
                     }  text-center `}
                   >
                     <span>
-                      <CareIcon className="care-l-ambulance text-5xl" />
+                      <CareIcon icon="l-ambulance" className="text-5xl" />
                     </span>
                   </div>
 
@@ -1131,7 +1162,7 @@ export const PatientHome = (props: any) => {
                     } text-center  `}
                   >
                     <span>
-                      <CareIcon className="care-l-medkit text-5xl" />
+                      <CareIcon icon="l-medkit" className="text-5xl" />
                     </span>
                   </div>
                   <div>
@@ -1157,7 +1188,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="text-center text-green-700">
                     <span>
-                      <CareIcon className="care-l-clipboard-notes text-5xl" />
+                      <CareIcon icon="l-clipboard-notes" className="text-5xl" />
                     </span>
                   </div>
                   <div>
@@ -1192,7 +1223,7 @@ export const PatientHome = (props: any) => {
                     )}
                   >
                     <span>
-                      <CareIcon className="care-l-users-alt text-5xl" />
+                      <CareIcon icon="l-users-alt" className="text-5xl" />
                     </span>
                   </div>
                   <div>
@@ -1231,7 +1262,7 @@ export const PatientHome = (props: any) => {
                     }
                   >
                     <span className="flex w-full items-center justify-start gap-2">
-                      <CareIcon className="care-l-chat-bubble-user text-xl" />
+                      <CareIcon icon="l-chat-bubble-user" className="text-xl" />
                       Add Consultation
                     </span>
                   </ButtonV2>
@@ -1244,7 +1275,7 @@ export const PatientHome = (props: any) => {
                     }
                   >
                     <span className="flex w-full items-center justify-start gap-2">
-                      <CareIcon className="care-l-file-search-alt text-xl" />
+                      <CareIcon icon="l-file-search-alt" className="text-xl" />
                       Investigations Summary
                     </span>
                   </ButtonV2>
@@ -1259,7 +1290,7 @@ export const PatientHome = (props: any) => {
                     }
                   >
                     <span className="flex w-full items-center justify-start gap-2">
-                      <CareIcon className="care-l-file-upload text-xl" />
+                      <CareIcon icon="l-file-upload" className="text-xl" />
                       View/Upload Patient Files
                     </span>
                   </ButtonV2>
@@ -1276,7 +1307,7 @@ export const PatientHome = (props: any) => {
                     authorizeFor={NonReadOnlyUsers}
                   >
                     <span className="flex w-full items-center justify-start gap-2">
-                      <CareIcon className="care-l-ambulance text-xl" />
+                      <CareIcon icon="l-ambulance" className="text-xl" />
                       Shift Patient
                     </span>
                   </ButtonV2>
@@ -1293,7 +1324,7 @@ export const PatientHome = (props: any) => {
                     authorizeFor={NonReadOnlyUsers}
                   >
                     <span className="flex w-full items-center justify-start gap-2">
-                      <CareIcon className="care-l-medkit text-xl" />
+                      <CareIcon icon="l-medkit" className="text-xl" />
                       Request Sample Test
                     </span>
                   </ButtonV2>
@@ -1308,7 +1339,7 @@ export const PatientHome = (props: any) => {
                     }
                   >
                     <span className="flex w-full items-center justify-start gap-2">
-                      <CareIcon className="care-l-clipboard-notes text-xl" />
+                      <CareIcon icon="l-clipboard-notes" className="text-xl" />
                       View Patient Notes
                     </span>
                   </ButtonV2>
@@ -1321,7 +1352,7 @@ export const PatientHome = (props: any) => {
                     authorizeFor={NonReadOnlyUsers}
                   >
                     <span className="flex w-full items-center justify-start gap-2">
-                      <CareIcon className="care-l-users-alt text-xl" />
+                      <CareIcon icon="l-users-alt" className="text-xl" />
                       Assign to a volunteer
                     </span>
                   </ButtonV2>
diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index 1d9be149be6..eab3cd5f28f 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -324,7 +324,10 @@ export default function PatientInfoCard(props: {
                     <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">
-                          <CareIcon className="care-l-estate mr-1 text-base text-gray-700" />
+                          <CareIcon
+                            icon="l-estate"
+                            className="mr-1 text-base text-gray-700"
+                          />
                           <span>Domiciliary Care</span>
                         </div>
                       </div>
@@ -492,7 +495,10 @@ export default function PatientInfoCard(props: {
             {patient.is_active &&
               consultation?.id &&
               !consultation?.discharge_date && (
-                <div className="h-10 min-h-[40px] w-full min-w-[170px] lg:w-auto">
+                <div
+                  className="h-10 min-h-[40px] w-full min-w-[170px] lg:w-auto"
+                  id="log-update"
+                >
                   <ButtonV2
                     variant={
                       !(consultation?.facility !== patient.facility) &&
@@ -522,7 +528,7 @@ export default function PatientInfoCard(props: {
                     className="w-full"
                   >
                     <span className="flex w-full items-center justify-center gap-2">
-                      <CareIcon className="care-l-plus text-xl" />
+                      <CareIcon icon="l-plus" className="text-xl" />
                       <p className="font-semibold">Log Update</p>
                     </span>
                   </ButtonV2>
@@ -534,8 +540,8 @@ export default function PatientInfoCard(props: {
                       <>
                         <p className="mt-0.5 text-xs text-red-500">
                           <div className="text-center">
-                            <CareIcon className="care-l-exclamation-triangle" />{" "}
-                            No update filed in the last 24 hours
+                            <CareIcon icon="l-exclamation-triangle" /> No update
+                            filed in the last 24 hours
                           </div>
                         </p>
                       </>
@@ -555,7 +561,7 @@ export default function PatientInfoCard(props: {
                   [
                     `/facility/${patient.facility}/patient/${patient.id}/consultation/${consultation?.id}/update`,
                     "Edit Consultation Details",
-                    "pen",
+                    "l-pen",
                     patient.is_active &&
                       consultation?.id &&
                       !consultation?.discharge_date,
@@ -563,13 +569,13 @@ export default function PatientInfoCard(props: {
                   [
                     `/patient/${patient.id}/investigation_reports`,
                     "Investigation Summary",
-                    "align-alt",
+                    "l-align-alt",
                     true,
                   ],
                   [
                     `/facility/${patient.facility}/patient/${patient.id}/consultation/${consultation?.id}/treatment-summary`,
                     "Treatment Summary",
-                    "file-medical",
+                    "l-file-medical",
                     consultation?.id,
                   ],
                 ]
@@ -579,7 +585,7 @@ export default function PatientInfoCard(props: {
                           [
                             `/facility/${patient.facility}/patient/${patient.id}/consultation/${consultation?.id}/claims`,
                             "Claims",
-                            "copy-landscape",
+                            "l-copy-landscape",
                             consultation?.id,
                           ],
                         ]
@@ -620,7 +626,8 @@ export default function PatientInfoCard(props: {
                             }}
                           >
                             <CareIcon
-                              className={`care-l-${action[2]} text-lg text-primary-500`}
+                              icon={action[2]}
+                              className="text-lg text-primary-500"
                             />
                             <span>{action[1]}</span>
                           </Link>
@@ -655,7 +662,10 @@ export default function PatientInfoCard(props: {
                                 });
                               }}
                             >
-                              <CareIcon className="care-l-user-square text-lg text-primary-500" />
+                              <CareIcon
+                                icon="l-user-square"
+                                className="text-lg text-primary-500"
+                              />
                               <span>Show ABHA Profile</span>
                             </div>
                             <div
@@ -670,7 +680,10 @@ export default function PatientInfoCard(props: {
                                 setShowLinkCareContext(true);
                               }}
                             >
-                              <CareIcon className="care-l-link text-lg text-primary-500" />
+                              <CareIcon
+                                icon="l-link"
+                                className="text-lg text-primary-500"
+                              />
                               <span>Link Care Context</span>
                             </div>
                           </>
@@ -688,7 +701,10 @@ export default function PatientInfoCard(props: {
                           }}
                         >
                           <span className="flex w-full items-center justify-start gap-2">
-                            <CareIcon className="care-l-link text-lg text-primary-500" />
+                            <CareIcon
+                              icon="l-link"
+                              className="text-lg text-primary-500"
+                            />
                             <p>Link ABHA Number</p>
                           </span>
                         </div>
@@ -716,7 +732,10 @@ export default function PatientInfoCard(props: {
                             }}
                           >
                             <span className="flex w-full items-center justify-start gap-2">
-                              <CareIcon className="care-l-ambulance text-lg text-primary-500" />
+                              <CareIcon
+                                icon="l-ambulance"
+                                className="text-lg text-primary-500"
+                              />
                               <p>Track Shifting</p>
                             </span>
                           </div>
@@ -731,7 +750,10 @@ export default function PatientInfoCard(props: {
                             }}
                           >
                             <span className="flex w-full items-center justify-start gap-2">
-                              <CareIcon className="care-l-ambulance text-lg text-primary-500" />
+                              <CareIcon
+                                icon="l-ambulance"
+                                className="text-lg text-primary-500"
+                              />
                               <p>Shift Patient</p>
                             </span>
                           </div>
@@ -750,7 +772,10 @@ export default function PatientInfoCard(props: {
                       }}
                     >
                       <span className="flex w-full items-center justify-start gap-2">
-                        <CareIcon className="care-l-clipboard-notes text-lg text-primary-500" />
+                        <CareIcon
+                          icon="l-clipboard-notes"
+                          className="text-lg text-primary-500"
+                        />
                         <p>{t("discharge_summary")}</p>
                       </span>
                     </div>
@@ -772,7 +797,8 @@ export default function PatientInfoCard(props: {
                     >
                       <span className="flex w-full items-center justify-start gap-2">
                         <CareIcon
-                          className={`care-l-hospital text-lg ${
+                          icon="l-hospital"
+                          className={`text-lg ${
                             consultation?.discharge_date
                               ? "text-gray-500"
                               : "text-primary-500"
diff --git a/src/Components/Patient/PatientNotes.tsx b/src/Components/Patient/PatientNotes.tsx
index 2412e950b80..13ce45eb946 100644
--- a/src/Components/Patient/PatientNotes.tsx
+++ b/src/Components/Patient/PatientNotes.tsx
@@ -123,7 +123,7 @@ const PatientNotes = (props: PatientNotesProps) => {
             disabled={!patientActive}
             authorizeFor={NonReadOnlyUsers}
           >
-            <CareIcon className="care-l-message text-lg" />
+            <CareIcon icon="l-message" className="text-lg" />
           </ButtonV2>
         </div>
       </div>
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index efc269fa00c..85a5002f8da 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -5,6 +5,7 @@ import {
   DISEASE_STATUS,
   GENDER_TYPES,
   MEDICAL_HISTORY_CHOICES,
+  OCCUPATION_TYPES,
   TEST_TYPE,
   VACCINES,
 } from "../../Common/constants";
@@ -41,7 +42,7 @@ import { HCXPolicyModel } from "../HCX/models";
 import HCXPolicyValidator from "../HCX/validators";
 import InsuranceDetailsBuilder from "../HCX/InsuranceDetailsBuilder";
 import LinkABHANumberModal from "../ABDM/LinkABHANumberModal";
-import { PatientModel } from "./models";
+import { PatientModel, Occupation } from "./models";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import RadioFormField from "../Form/FormFields/RadioFormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
@@ -84,6 +85,7 @@ const medicalHistoryChoices = MEDICAL_HISTORY_CHOICES.reduce(
 const genderTypes = GENDER_TYPES;
 const diseaseStatus = [...DISEASE_STATUS];
 const bloodGroups = [...BLOOD_GROUPS];
+const occupationTypes = OCCUPATION_TYPES;
 const testType = [...TEST_TYPE];
 const vaccines = ["Select", ...VACCINES];
 
@@ -168,6 +170,12 @@ const patientFormReducer = (state = initialState, action: any) => {
       return state;
   }
 };
+export const parseOccupationFromExt = (occupation: Occupation) => {
+  const occupationObject = OCCUPATION_TYPES.find(
+    (item) => item.value === occupation
+  );
+  return occupationObject?.id;
+};
 
 export const PatientRegister = (props: PatientRegisterProps) => {
   const authUser = useAuthUser();
@@ -304,6 +312,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
           ? parseGenderFromExt(data.gender, state.form.gender)
           : state.form.gender,
       });
+      field.onChange({
+        name: "occupation",
+        value: data.meta_info?.occupation ?? state.form.occupation,
+      });
       field.onChange({
         name: "test_id",
         value: data.test_id ? data.test_id : state.form.test_id,
@@ -421,6 +433,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
               data.instituion_of_health_care_worker
                 ? data.instituion_of_health_care_worker
                 : "",
+            meta_info: data.meta_info ?? {},
+            occupation: data.meta_info?.occupation
+              ? parseOccupationFromExt(data.meta_info.occupation)
+              : null,
 
             number_of_primary_contacts: data.number_of_primary_contacts
               ? data.number_of_primary_contacts
@@ -745,6 +761,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
       local_body:
         formData.nationality === "India" ? formData.local_body : undefined,
       ward: formData.ward,
+      meta_info: {
+        ...state.form?.meta_info,
+        occupation: formData.occupation ?? null,
+      },
       village: formData.village,
       address: formData.address ? formData.address : undefined,
       permanent_address: formData.sameAddress
@@ -1054,7 +1074,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
       <div className="mt-4">
         <div className="mx-4 my-8 rounded bg-purple-100 p-4 text-xs font-semibold text-purple-800">
           <div className="mx-1 mb-1 flex items-center text-lg font-bold">
-            <CareIcon className=" care-l-info-circle mr-1 text-2xl font-bold" />{" "}
+            <CareIcon
+              icon="l-info-circle"
+              className="mr-1 text-2xl font-bold"
+            />{" "}
             Please enter the correct date of birth for the patient
           </div>
           <p className="text-sm font-normal text-black">
@@ -1156,7 +1179,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                             setQuery({ extId: "" }, { replace: true });
                           }}
                         >
-                          <CareIcon className="care-l-import text-lg" />
+                          <CareIcon icon="l-import" className="text-lg" />
                           Import From External Results
                         </ButtonV2>
                       </div>
@@ -1516,6 +1539,14 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                   />
                                 )}
                               </div>
+                              <SelectFormField
+                                {...field("occupation")}
+                                label="Occupation"
+                                placeholder="Select Occupation"
+                                options={occupationTypes}
+                                optionLabel={(o) => o.text}
+                                optionValue={(o) => o.id}
+                              />
                             </>
                           ) : (
                             <div id="passport_no-div">
@@ -1532,7 +1563,10 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                         <AccordionV2
                           className="mt-2 shadow-none md:mt-0 lg:mt-0"
                           expandIcon={
-                            <CareIcon className="care-l-angle-down text-2xl font-bold" />
+                            <CareIcon
+                              icon="l-angle-down"
+                              className="text-2xl font-bold"
+                            />
                           }
                           title={
                             <h1 className="text-left text-xl font-bold text-purple-500">
@@ -1866,7 +1900,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                             }
                             data-testid="add-insurance-button"
                           >
-                            <CareIcon className="care-l-plus text-lg" />
+                            <CareIcon icon="l-plus" className="text-lg" />
                             <span>Add Insurance Details</span>
                           </ButtonV2>
                         </div>
diff --git a/src/Components/Patient/SampleViewAdmin.tsx b/src/Components/Patient/SampleViewAdmin.tsx
index 122f82aa7e2..431fc09a317 100644
--- a/src/Components/Patient/SampleViewAdmin.tsx
+++ b/src/Components/Patient/SampleViewAdmin.tsx
@@ -199,7 +199,10 @@ export default function SampleViewAdmin() {
                       Contact:{" "}
                     </span>
                     Confirmed carrier
-                    <CareIcon className="care-l-exclamation-triangle text-xl font-bold text-red-500" />
+                    <CareIcon
+                      icon="l-exclamation-triangle"
+                      className="text-xl font-bold text-red-500"
+                    />
                   </div>
                 )}
                 {item.patient_has_suspected_contact &&
@@ -209,7 +212,10 @@ export default function SampleViewAdmin() {
                         Contact:{" "}
                       </span>
                       Suspected carrier
-                      <CareIcon className="care-l-exclamation-triangle text-xl font-bold text-yellow-500" />
+                      <CareIcon
+                        icon="l-exclamation-triangle"
+                        className="text-xl font-bold text-yellow-500"
+                      />
                     </div>
                   )}
                 {item.has_sari && (
@@ -218,14 +224,20 @@ export default function SampleViewAdmin() {
                       SARI:{" "}
                     </span>
                     Severe Acute Respiratory illness
-                    <CareIcon className="care-l-exclamation-triangle text-xl font-bold text-orange-500" />
+                    <CareIcon
+                      icon="l-exclamation-triangle"
+                      className="text-xl font-bold text-orange-500"
+                    />
                   </div>
                 )}
                 {item.has_ari && !item.has_sari && (
                   <div>
                     <span className="font-semibold leading-relaxed">ARI: </span>
                     Acute Respiratory illness
-                    <CareIcon className=" care-l-exclamation-triangle text-xl font-bold text-yellow-500" />
+                    <CareIcon
+                      icon="l-exclamation-triangle"
+                      className="text-xl font-bold text-yellow-500"
+                    />
                   </div>
                 )}
               </div>
diff --git a/src/Components/Patient/UpdateStatusDialog.tsx b/src/Components/Patient/UpdateStatusDialog.tsx
index 064e19ff2ee..c547a1b85ff 100644
--- a/src/Components/Patient/UpdateStatusDialog.tsx
+++ b/src/Components/Patient/UpdateStatusDialog.tsx
@@ -215,7 +215,7 @@ const UpdateStatusDialog = (props: Props) => {
             ) : (
               <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">
-                  <CareIcon className="care-l-file-upload-alt text-lg" />
+                  <CareIcon icon="l-file-upload-alt" className="text-lg" />
                   <span className="max-w-full truncate">
                     {file ? file.name : t("choose_file")}
                   </span>
@@ -231,7 +231,7 @@ const UpdateStatusDialog = (props: Props) => {
                   onClick={handleUpload}
                   disabled={uploadDone}
                 >
-                  <CareIcon className="care-l-cloud-upload text-lg" />
+                  <CareIcon icon="l-cloud-upload" className="text-lg" />
                   <span>Upload</span>
                 </Submit>
               </div>
diff --git a/src/Components/Patient/models.tsx b/src/Components/Patient/models.tsx
index 05eb780069d..7648ea18c5e 100644
--- a/src/Components/Patient/models.tsx
+++ b/src/Components/Patient/models.tsx
@@ -1,5 +1,6 @@
 import { ConsultationModel, PatientCategory } from "../Facility/models";
 import { PerformedByModel } from "../HCX/misc";
+import { OCCUPATION_TYPES } from "../../Common/constants";
 
 export interface FlowModel {
   id?: number;
@@ -127,6 +128,11 @@ export interface PatientModel {
   created_by?: PerformedByModel;
   assigned_to?: { first_name?: string; username?: string; last_name?: string };
   assigned_to_object?: AssignedToObjectModel;
+  occupation?: Occupation;
+  meta_info?: {
+    id: number;
+    occupation: Occupation;
+  };
 
   // ABDM related
   abha_number?: string;
@@ -370,3 +376,5 @@ export interface FileUploadModel {
   archived_by?: PerformedByModel;
   archived_datetime?: string;
 }
+
+export type Occupation = (typeof OCCUPATION_TYPES)[number]["value"];
diff --git a/src/Components/Resource/ListView.tsx b/src/Components/Resource/ListView.tsx
index 2cf8b9eb26d..680015b16f2 100644
--- a/src/Components/Resource/ListView.tsx
+++ b/src/Components/Resource/ListView.tsx
@@ -181,7 +181,7 @@ export default function ListView() {
           </div>
           <div className="flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
             <ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}>
-              <CareIcon className="care-l-list-ul rotate-90" />
+              <CareIcon icon="l-list-ul" className="rotate-90" />
               {t("board_view")}
             </ButtonV2>
 
diff --git a/src/Components/Resource/ResourceBoardView.tsx b/src/Components/Resource/ResourceBoardView.tsx
index 558cd77c1f0..6c02d932f77 100644
--- a/src/Components/Resource/ResourceBoardView.tsx
+++ b/src/Components/Resource/ResourceBoardView.tsx
@@ -76,7 +76,7 @@ export default function BoardView() {
           />
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <ButtonV2 className="py-[11px]" onClick={onListViewBtnClick}>
-              <CareIcon className="care-l-list-ul" />
+              <CareIcon icon="l-list-ul" />
               {t("list_view")}
             </ButtonV2>
             <AdvancedFilterButton
diff --git a/src/Components/Shifting/BoardView.tsx b/src/Components/Shifting/BoardView.tsx
index 6f6af362166..5cf34e67e18 100644
--- a/src/Components/Shifting/BoardView.tsx
+++ b/src/Components/Shifting/BoardView.tsx
@@ -166,7 +166,7 @@ export default function BoardView() {
               className="py-[11px]"
               onClick={() => navigate("/shifting/list", { query: qParams })}
             >
-              <CareIcon className="care-l-list-ul" />
+              <CareIcon icon="l-list-ul" />
               {t("list_view")}
             </ButtonV2>
             <AdvancedFilterButton
diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
index 228732f9ced..e1f0a0545e2 100644
--- a/src/Components/Shifting/ListView.tsx
+++ b/src/Components/Shifting/ListView.tsx
@@ -276,7 +276,7 @@ export default function ListView() {
               className="py-[11px]"
               onClick={() => navigate("/shifting/board", { query: qParams })}
             >
-              <CareIcon className="care-l-list-ul rotate-90" />
+              <CareIcon icon="l-list-ul" className="rotate-90" />
               {t("board_view")}
             </ButtonV2>
 
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index dbfca3a815a..ef3d4f00a3f 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -392,7 +392,7 @@ export default function ManageUsers() {
                         setSelectedUser(user);
                       }}
                     >
-                      <CareIcon className="care-l-hospital text-lg" />
+                      <CareIcon icon="l-hospital" className="text-lg" />
                       <p>Linked Facilities</p>
                     </ButtonV2>
                     <ButtonV2
@@ -403,7 +403,7 @@ export default function ManageUsers() {
                         setSelectedUser(user.username);
                       }}
                     >
-                      <CareIcon className="care-l-award text-xl" />
+                      <CareIcon icon="l-award" className="text-xl" />
                       <p>Linked Skills</p>
                     </ButtonV2>
                   </div>
@@ -420,7 +420,7 @@ export default function ManageUsers() {
                           setWeeklyHours(user.weekly_working_hours);
                         }}
                       >
-                        <CareIcon className="care-l-clock text-xl" />
+                        <CareIcon icon="l-clock" className="text-xl" />
                         <p>Set Average weekly working hours</p>
                       </ButtonV2>
                     </div>
@@ -736,7 +736,7 @@ function UserFacilities(props: { user: any }) {
                         })
                       }
                     >
-                      <CareIcon className="care-l-link-broken" />
+                      <CareIcon icon="l-link-broken" />
                       <span className="tooltip-text tooltip-left">
                         {t("clear_home_facility")}
                       </span>
@@ -791,7 +791,7 @@ function UserFacilities(props: { user: any }) {
                                 }
                               }}
                             >
-                              <CareIcon className="care-l-estate" />
+                              <CareIcon icon="l-estate" />
                               <span className="tooltip-text tooltip-left">
                                 Set as home facility
                               </span>
@@ -808,7 +808,7 @@ function UserFacilities(props: { user: any }) {
                                 })
                               }
                             >
-                              <CareIcon className="care-l-link-broken" />
+                              <CareIcon icon="l-link-broken" />
                               <span className="tooltip-text tooltip-left">
                                 Unlink Facility
                               </span>
diff --git a/src/Components/Users/SkillsSlideOverComponents.tsx b/src/Components/Users/SkillsSlideOverComponents.tsx
index d03de928c74..428c5cac5aa 100644
--- a/src/Components/Users/SkillsSlideOverComponents.tsx
+++ b/src/Components/Users/SkillsSlideOverComponents.tsx
@@ -52,7 +52,7 @@ export const SkillsArray = ({
                 disabled={isLoading || !authorizeForAddSkill}
                 onClick={() => setDeleteSkill(skill)}
               >
-                <CareIcon className="care-l-times text-lg" />
+                <CareIcon icon="l-times" className="text-lg" />
               </ButtonV2>
             </div>
           </div>
diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
index 34452a367de..da5b7b9639b 100644
--- a/src/Components/Users/UserProfile.tsx
+++ b/src/Components/Users/UserProfile.tsx
@@ -249,10 +249,12 @@ export default function UserProfile() {
             errors[field] = "Field is required";
             invalidForm = true;
           } else if (
-            states.form.user_type === "Doctor" &&
-            Number(states.form.doctor_experience_commenced_on) > 100
+            (states.form.user_type === "Doctor" &&
+              Number(states.form.doctor_experience_commenced_on) >= 100) ||
+            Number(states.form.doctor_experience_commenced_on) < 0
           ) {
-            errors[field] = "Doctor experience should be less than 100 years";
+            errors[field] =
+              "Doctor experience should be at least 0 years and less than 100 years.";
             invalidForm = true;
           }
           return;
@@ -441,7 +443,7 @@ export default function UserProfile() {
                   {showEdit ? "Cancel" : "Edit User Profile"}
                 </ButtonV2>
                 <ButtonV2 variant="danger" onClick={signOut}>
-                  <CareIcon className="care-l-sign-out-alt" />
+                  <CareIcon icon="l-sign-out-alt" />
                   Sign out
                 </ButtonV2>
               </div>
@@ -832,7 +834,7 @@ export default function UserProfile() {
             <UpdatableApp silentlyAutoUpdate={false}>
               <ButtonV2 disabled={true}>
                 <div className="flex items-center gap-4">
-                  <CareIcon className="care-l-exclamation text-2xl" />
+                  <CareIcon icon="l-exclamation" className="text-2xl" />
                   Update available
                 </div>
               </ButtonV2>
@@ -847,8 +849,9 @@ export default function UserProfile() {
                 {" "}
                 <div className="flex items-center gap-4">
                   <CareIcon
+                    icon="l-sync"
                     className={classNames(
-                      "care-l-sync text-2xl",
+                      "text-2xl",
                       updateStatus.isChecking && "animate-spin"
                     )}
                   />
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 268e6c91ffa..9bd01fea4e6 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -149,7 +149,10 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
             )}
             style={waveformCanvas.size}
           >
-            <CareIcon className="care-l-cloud-times mb-2 animate-pulse text-4xl" />
+            <CareIcon
+              icon="l-cloud-times"
+              className="mb-2 animate-pulse text-4xl"
+            />
             <span className="font-bold">No incoming data from HL7 Monitor</span>
           </div>
           <div
diff --git a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
index ee3f471b22c..478bf2e9dc8 100644
--- a/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/VentilatorPatientVitalsMonitor.tsx
@@ -32,7 +32,10 @@ export default function VentilatorPatientVitalsMonitor(
             )}
             style={waveformCanvas.size}
           >
-            <CareIcon className="care-l-cloud-times mb-2 animate-pulse text-4xl" />
+            <CareIcon
+              icon="l-cloud-times"
+              className="mb-2 animate-pulse text-4xl"
+            />
             <span className="font-bold">No incoming data from Ventilator</span>
           </div>
           <div
diff --git a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
index cf56c3c5e50..a9fe3ee3cbc 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
@@ -18,7 +18,10 @@ const VitalsMonitorAssetPopover = ({
   return (
     <Popover className="relative">
       <Popover.Button>
-        <CareIcon className="care-l-info-circle cursor-pointer text-sm text-gray-500 hover:text-white md:text-base" />
+        <CareIcon
+          icon="l-info-circle"
+          className="cursor-pointer text-sm text-gray-500 hover:text-white md:text-base"
+        />
       </Popover.Button>
       <Transition
         as={Fragment}
@@ -33,13 +36,14 @@ const VitalsMonitorAssetPopover = ({
           <div className="flex flex-col gap-3 p-5">
             <div className="flex items-center gap-2 text-lg font-bold">
               <CareIcon
-                className={`care-l-${
+                icon={
                   (
                     (asset?.asset_class &&
                       assetClassProps[asset.asset_class]) ||
                     assetClassProps.NONE
                   ).icon
-                } text-2xl`}
+                }
+                className="text-2xl"
               />
               <p>{asset?.name}</p>
             </div>
@@ -64,7 +68,7 @@ const VitalsMonitorAssetPopover = ({
               id="configure-asset"
               data-testid="asset-configure-button"
             >
-              <CareIcon className="care-l-setting h-4" />
+              <CareIcon icon="l-setting" className="h-4" />
               {t("configure")}
             </ButtonV2>
           </div>
diff --git a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
index 2f9df8607b0..8fa272d4058 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorHeader.tsx
@@ -21,7 +21,7 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
           </Link>
         ) : (
           <span className="flex items-center gap-1 text-gray-500">
-            <CareIcon className="care-l-ban" />
+            <CareIcon icon="l-ban" />
             No Patient
           </span>
         )}
@@ -39,11 +39,14 @@ const VitalsMonitorHeader = ({ patientAssetBed }: VitalsMonitorHeaderProps) => {
             href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
           >
             <span className="flex items-center gap-1 hover:text-white">
-              <CareIcon className="care-l-bed text-sm md:text-base" />
+              <CareIcon icon="l-bed" className="text-sm md:text-base" />
               <span>{bed.name}</span>
             </span>
             <span className="flex items-center gap-1 hover:text-white">
-              <CareIcon className="care-l-location-point text-sm md:text-base" />
+              <CareIcon
+                icon="l-location-point"
+                className="text-sm md:text-base"
+              />
               <span>{bed.location_object?.name}</span>
             </span>
           </Link>
diff --git a/src/Locale/en/Facility.json b/src/Locale/en/Facility.json
index aefc9c3b4a8..3c22a9ab460 100644
--- a/src/Locale/en/Facility.json
+++ b/src/Locale/en/Facility.json
@@ -51,5 +51,7 @@
   "last_serviced_on": "Last Serviced On",
   "notes": "Notes",
   "create_asset": "Create Asset",
-  "create_add_more": "Create & Add More"
+  "create_add_more": "Create & Add More",
+  "discharged_patients": "Discharged Patients",
+  "discharged_patients_empty": "No discharged patients present in this facility"
 }
\ No newline at end of file
diff --git a/src/Utils/VoiceRecorder.tsx b/src/Utils/VoiceRecorder.tsx
index f816a700154..ab14738df89 100644
--- a/src/Utils/VoiceRecorder.tsx
+++ b/src/Utils/VoiceRecorder.tsx
@@ -42,7 +42,10 @@ export const VoiceRecorder = (props: any) => {
           <>
             <div className="flex space-x-2">
               <div className="bg-gray-100 p-2 text-primary-700">
-                <CareIcon className="care-l-record-audio mr-2 animate-pulse" />
+                <CareIcon
+                  icon="l-record-audio"
+                  className="mr-2 animate-pulse"
+                />
                 {t("recording") + "..."}
               </div>
               <ButtonV2
@@ -51,7 +54,7 @@ export const VoiceRecorder = (props: any) => {
                   confirmAudioBlobExists();
                 }}
               >
-                <CareIcon className="care-l-microphone-slash text-lg" />
+                <CareIcon icon="l-microphone-slash" className="text-lg" />
                 {t("stop")}
               </ButtonV2>
             </div>
@@ -68,7 +71,7 @@ export const VoiceRecorder = (props: any) => {
                 authorizeFor={NonReadOnlyUsers}
                 className="w-full md:w-fit"
               >
-                <CareIcon className="care-l-microphone text-lg" />
+                <CareIcon icon="l-microphone" className="text-lg" />
                 {t("record")}
               </ButtonV2>
             )}
diff --git a/vite.config.mts b/vite.config.mts
index c8eb11c53cf..9285f495850 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,6 +1,7 @@
 import { VitePWA } from "vite-plugin-pwa";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { treeShakeCareIcons } from "./plugins/treeShakeCareIcons.mts";
 
 const cdnUrls =
   process.env.CARE_CDN_URL ??
@@ -14,6 +15,9 @@ export default defineConfig({
   envPrefix: "REACT_",
   plugins: [
     react(),
+    treeShakeCareIcons({
+      iconWhitelist: ["default"],
+    }),
     VitePWA({
       strategies: "injectManifest",
       srcDir: "src",