diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index 06b1cf8eff0..67628d414c8 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -180,6 +180,48 @@ jobs:
           rm -rf /tmp/.buildx-cache
           mv /tmp/.buildx-cache-new /tmp/.buildx-cache
 
+  deploy-staging-gcp:
+    needs: build-staging
+    name: Deploy to staging GCP cluster
+    runs-on: ubuntu-latest
+    environment:
+      name: Staging-GCP
+      url: https://care-staging.ohc.network/
+    steps:
+      - name: Checkout Kube Config
+        uses: actions/checkout@v3
+        with:
+          repository: coronasafe/care-staging-gcp
+          token: ${{ secrets.GIT_ACCESS_TOKEN }}
+          path: kube
+          ref: main
+
+      # Setup gcloud CLI
+      - uses: google-github-actions/setup-gcloud@94337306dda8180d967a56932ceb4ddcf01edae7
+        with:
+          service_account_key: ${{ secrets.GKE_SA_KEY }}
+          project_id: ${{ secrets.GKE_PROJECT }}
+
+      # Get the GKE credentials so we can deploy to the cluster
+      - uses: google-github-actions/get-gke-credentials@fb08709ba27618c31c09e014e1d8364b02e5042e
+        with:
+          cluster_name: ${{ secrets.GKE_CLUSTER }}
+          location: ${{ secrets.GKE_ZONE }}
+          credentials: ${{ secrets.GKE_SA_KEY }}
+
+      - name: install kubectl
+        uses: azure/setup-kubectl@v3.0
+        with:
+          version: "v1.23.6"
+        id: install
+
+      - name: Deploy Care Fe Production
+        run: |
+          mkdir -p $HOME/.kube/
+          cd kube/deployments/
+          sed -i -e "s/_BUILD_NUMBER_/${GITHUB_RUN_NUMBER}/g" care-fe.yaml
+          kubectl apply -f care-fe.yaml
+
   deploy-production-manipur:
     needs: build-production
     name: Deploy to GKE Manipur
@@ -389,3 +431,45 @@ jobs:
           cd kube/deployments/
           sed -i -e "s/_BUILD_NUMBER_/${GITHUB_RUN_NUMBER}/g" care-fe.yaml
           kubectl apply -f care-fe.yaml
+
+  deploy-production-meghalaya:
+    needs: build-production
+    name: Deploy to GKE Meghalaya
+    runs-on: ubuntu-latest
+    environment:
+      name: Production-Meghalaya
+      url: https://care.meghealth.gov.in
+    steps:
+      - name: Checkout Kube Config
+        uses: actions/checkout@v3
+        with:
+          repository: coronasafe/ml-care-infra
+          token: ${{ secrets.GIT_ACCESS_TOKEN }}
+          path: kube
+          ref: main
+
+      # Setup gcloud CLI
+      - uses: google-github-actions/setup-gcloud@94337306dda8180d967a56932ceb4ddcf01edae7
+        with:
+          service_account_key: ${{ secrets.GKE_SA_KEY }}
+          project_id: ${{ secrets.GKE_PROJECT }}
+
+      # Get the GKE credentials, so we can deploy to the cluster
+      - uses: google-github-actions/get-gke-credentials@fb08709ba27618c31c09e014e1d8364b02e5042e
+        with:
+          cluster_name: ${{ secrets.GKE_CLUSTER }}
+          location: ${{ secrets.GKE_ZONE }}
+          credentials: ${{ secrets.GKE_SA_KEY }}
+
+      - name: install kubectl
+        uses: azure/setup-kubectl@v3.0
+        with:
+          version: "v1.23.6"
+        id: install
+
+      - name: Deploy Care Fe Production
+        run: |
+          mkdir -p $HOME/.kube/
+          cd kube/deployments/
+          sed -i -e "s/_BUILD_NUMBER_/${GITHUB_RUN_NUMBER}/g" care-fe.yaml
+          kubectl apply -f care-fe.yaml
diff --git a/cypress/e2e/assets_spec/assets_manage.cy.ts b/cypress/e2e/assets_spec/assets_manage.cy.ts
index 8b440f68761..164bc239253 100644
--- a/cypress/e2e/assets_spec/assets_manage.cy.ts
+++ b/cypress/e2e/assets_spec/assets_manage.cy.ts
@@ -117,23 +117,6 @@ describe("Asset", () => {
     assetPage.verifyDeleteStatus();
   });
 
-  it("Verify Facility Asset Page Redirection", () => {
-    cy.visit("/facility");
-    assetSearchPage.typeSearchKeyword(fillFacilityName);
-    assetSearchPage.pressEnter();
-    facilityPage.verifyFacilityBadgeContent(fillFacilityName);
-    facilityPage.visitAlreadyCreatedFacility();
-    facilityPage.clickManageFacilityDropdown();
-    facilityPage.clickCreateAssetFacilityOption();
-    facilityPage.verifyfacilitycreateassetredirection();
-    facilityPage.verifyassetfacilitybackredirection();
-    facilityPage.clickManageFacilityDropdown();
-    facilityPage.clickviewAssetFacilityOption();
-    facilityPage.verifyfacilityviewassetredirection();
-    assetFilters.assertFacilityText(fillFacilityName);
-    facilityPage.verifyassetfacilitybackredirection();
-  });
-
   afterEach(() => {
     cy.saveLocalStorage();
   });
diff --git a/cypress/e2e/shifting_spec/filter.cy.ts b/cypress/e2e/shifting_spec/filter.cy.ts
index f1068f7c53a..3790198a4db 100644
--- a/cypress/e2e/shifting_spec/filter.cy.ts
+++ b/cypress/e2e/shifting_spec/filter.cy.ts
@@ -19,7 +19,7 @@ describe("Shifting section filter", () => {
     shiftingPage.filterByFacility(
       "Dummy Shifting",
       "Dummy Shifting",
-      "District Admin"
+      "District"
     );
 
     shiftingPage.facilityAssignedBadge().should("exist");
diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts
new file mode 100644
index 00000000000..9090f72505a
--- /dev/null
+++ b/cypress/e2e/users_spec/user_creation.cy.ts
@@ -0,0 +1,199 @@
+import { cy, describe, before, beforeEach, it, afterEach } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
+import { UserPage } from "../../pageobject/Users/UserSearch";
+import { UserCreationPage } from "../../pageobject/Users/UserCreation";
+import {
+  emergency_phone_number,
+  phone_number,
+} from "../../pageobject/constants";
+
+describe("User Creation", () => {
+  const userPage = new UserPage();
+  const loginPage = new LoginPage();
+  const userCreationPage = new UserCreationPage();
+  const facilityPage = new FacilityPage();
+  const assetSearchPage = new AssetSearchPage();
+  const fillFacilityName = "Dummy Facility 1";
+  const makeid = (length: number) => {
+    let result = "";
+    const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  };
+  const username = makeid(25);
+  const alreadylinkedusersviews = [
+    "devdoctor",
+    "devstaff2",
+    "devdistrictadmin",
+  ];
+  const EXPECTED_ERROR_MESSAGES = [
+    "Please select the User Type",
+    "Please enter valid phone number",
+    "Please enter the username",
+    "Please enter date in YYYY/MM/DD format",
+    "Please enter the password",
+    "Confirm password is required",
+    "First Name is required",
+    "Last Name is required",
+    "Please enter a valid email address",
+    "Please select the Gender",
+    "Please select the state",
+    "Please select the district",
+    "Please select the local body",
+  ];
+
+  const EXPECTED_PROFILE_ERROR_MESSAGES = [
+    "Field is required",
+    "Field is required",
+    "This field is required",
+    "Please enter valid phone number",
+    "This field is required",
+    "This field is required",
+  ];
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.awaitUrl("/users");
+  });
+
+  it("Update the existing user profile and verify its reflection", () => {
+    userCreationPage.clickElementById("profilenamelink");
+    userCreationPage.verifyElementContainsText(
+      "username-profile-details",
+      "devdistrictadmin"
+    );
+    userCreationPage.clickElementById("edit-cancel-profile-button");
+    userCreationPage.typeIntoElementByIdPostClear(
+      "firstName",
+      "District Editted"
+    );
+    userCreationPage.typeIntoElementByIdPostClear("lastName", "Cypress");
+    userCreationPage.typeIntoElementByIdPostClear("age", "22");
+    userCreationPage.selectDropdownOption("gender", "Male");
+    userCreationPage.typeIntoElementByIdPostClear(
+      "phoneNumber",
+      "+91" + phone_number
+    );
+    userCreationPage.typeIntoElementByIdPostClear(
+      "altPhoneNumber",
+      "+91" + emergency_phone_number
+    );
+    userCreationPage.typeIntoElementByIdPostClear("email", "test@test.com");
+    userCreationPage.typeIntoElementByIdPostClear("weekly_working_hours", "14");
+    userCreationPage.clickElementById("submit");
+    userCreationPage.verifyElementContainsText(
+      "contactno-profile-details",
+      "+91" + phone_number
+    );
+    userCreationPage.verifyElementContainsText(
+      "whatsapp-profile-details",
+      "+91" + emergency_phone_number
+    );
+    userCreationPage.verifyElementContainsText(
+      "firstname-profile-details",
+      "District Editted"
+    );
+    userCreationPage.verifyElementContainsText(
+      "lastname-profile-details",
+      "Cypress"
+    );
+    userCreationPage.verifyElementContainsText("age-profile-details", "22");
+    userCreationPage.verifyElementContainsText(
+      "emailid-profile-details",
+      "test@test.com"
+    );
+    userCreationPage.verifyElementContainsText(
+      "gender-profile-details",
+      "Male"
+    );
+    userCreationPage.verifyElementContainsText(
+      "averageworkinghour-profile-details",
+      "14"
+    );
+  });
+
+  it("Update the existing user profile Form Mandatory File Error", () => {
+    userCreationPage.clickElementById("profilenamelink");
+    userCreationPage.clickElementById("edit-cancel-profile-button");
+    userCreationPage.clearIntoElementById("firstName");
+    userCreationPage.clearIntoElementById("lastName");
+    userCreationPage.clearIntoElementById("age");
+    userCreationPage.clearIntoElementById("phoneNumber");
+    userCreationPage.clearIntoElementById("altPhoneNumber");
+    userCreationPage.clearIntoElementById("weekly_working_hours");
+    userCreationPage.clickElementById("submit");
+    userCreationPage.verifyErrorMessages(EXPECTED_PROFILE_ERROR_MESSAGES);
+  });
+
+  it("create new user and verify reflection", () => {
+    userCreationPage.clickElementById("addUserButton");
+    userCreationPage.selectFacility("Dummy Shifting Center");
+    userCreationPage.typeIntoElementById("username", username);
+    userCreationPage.typeIntoElementById("password", "Test@123");
+    userCreationPage.selectHomeFacility("Dummy Shifting Center");
+    userCreationPage.typeIntoElementById("phone_number", phone_number);
+    userCreationPage.setInputDate("date_of_birth", "date-input", "25081999");
+    userCreationPage.selectDropdownOption("user_type", "Doctor");
+    userCreationPage.typeIntoElementById("c_password", "Test@123");
+    userCreationPage.typeIntoElementById("doctor_qualification", "MBBS");
+    userCreationPage.typeIntoElementById("doctor_experience_commenced_on", "2");
+    userCreationPage.typeIntoElementById(
+      "doctor_medical_council_registration",
+      "123456789"
+    );
+    userCreationPage.typeIntoElementById("first_name", "cypress test");
+    userCreationPage.typeIntoElementById("last_name", "staff user");
+    userCreationPage.typeIntoElementById("email", "test@test.com");
+    userCreationPage.selectDropdownOption("gender", "Male");
+    userCreationPage.selectDropdownOption("state", "Kerala");
+    userCreationPage.selectDropdownOption("district", "Ernakulam");
+    userCreationPage.clickElementById("submit");
+    userCreationPage.verifyNotification("User added successfully");
+    userPage.typeInSearchInput(username);
+    userPage.checkUsernameText(username);
+    userCreationPage.verifyElementContainsText("name", "cypress test");
+    userCreationPage.verifyElementContainsText("role", "Doctor");
+    userCreationPage.verifyElementContainsText("district", "Ernakulam");
+    userCreationPage.verifyElementContainsText(
+      "home_facility",
+      "Dummy Shifting Center"
+    );
+    userCreationPage.verifyElementContainsText("doctor-qualification", "MBBS");
+    userCreationPage.verifyElementContainsText("doctor-experience", "2");
+    userCreationPage.verifyElementContainsText(
+      "medical-council-registration",
+      "123456789"
+    );
+  });
+
+  it("create new user form throwing mandatory field error", () => {
+    userCreationPage.clickElementById("addUserButton");
+    userCreationPage.clickElementById("submit");
+    userCreationPage.verifyErrorMessages(EXPECTED_ERROR_MESSAGES);
+  });
+
+  it("view user redirection from facility page", () => {
+    cy.visit("/facility");
+    assetSearchPage.typeSearchKeyword(fillFacilityName);
+    assetSearchPage.pressEnter();
+    facilityPage.verifyFacilityBadgeContent(fillFacilityName);
+    facilityPage.visitAlreadyCreatedFacility();
+    facilityPage.clickManageFacilityDropdown();
+    facilityPage.clickViewUsersOption();
+    userPage.verifyMultipleBadgesWithSameId(alreadylinkedusersviews);
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});
diff --git a/cypress/e2e/users_spec/user_crud.cy.ts b/cypress/e2e/users_spec/user_crud.cy.ts
deleted file mode 100644
index 41a12a891a8..00000000000
--- a/cypress/e2e/users_spec/user_crud.cy.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-import { afterEach, before, beforeEach, cy, describe, it } from "local-cypress";
-
-const makeid = (length: number) => {
-  let result = "";
-  const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-};
-
-const username = makeid(25);
-const phone_number = 9999999999;
-const alt_phone_number = 9999999999;
-
-describe("User management", () => {
-  before(() => {
-    cy.loginByApi("devdistrictadmin", "Coronasafe@123");
-    cy.saveLocalStorage();
-  });
-
-  beforeEach(() => {
-    cy.restoreLocalStorage();
-    cy.awaitUrl("/user");
-  });
-
-  it("create user", () => {
-    cy.contains("Add New User").click();
-    cy.get("[id='user_type'] > div > button").click();
-    cy.get("div").contains("Ward Admin").click();
-    cy.get("[id='state'] > div > button").click();
-    cy.get("div").contains("Kerala").click();
-    cy.get("[id='district'] > div > button").click();
-    cy.get("div").contains("Ernakulam").click();
-    cy.get("[id='local_body'] > div > button").click();
-    cy.get("div").contains("Aikaranad").click();
-    cy.intercept(/\/api\/v1\/facility/).as("facility");
-    cy.get("[name='facilities']")
-      .click()
-      .type("Dummy Facility 1")
-      .wait("@facility");
-    cy.get("li[role='option']").first().click();
-    cy.get("input[type='checkbox']").click();
-    cy.get("[name='phone_number']").type(phone_number);
-    cy.get("[name='alt_phone_number']").type(alt_phone_number);
-    cy.intercept(/users/).as("check_availability");
-    cy.get("#date_of_birth").should("be.visible").click();
-    cy.get("#date-input").click().type("25081999");
-    cy.get("[name='username']").type(username);
-    cy.wait("@check_availability").its("response.statusCode").should("eq", 200);
-    cy.get("[name='password']").type("#@Cypress_test123");
-    cy.get("[name='c_password']").type("#@Cypress_test123");
-    cy.get("[name='first_name']").type("Cypress Test");
-    cy.get("[name='last_name']").type("Tester");
-    cy.get("[name='email']").type("cypress@tester.com");
-    cy.get("[id='gender'] > div > button").click();
-    cy.get("div").contains("Male").click();
-    cy.get("button[id='submit']").contains("Save User").click();
-    cy.verifyNotification("User added successfully");
-  });
-
-  it("view user and verify details", () => {
-    cy.contains("Advanced Filters").click();
-    cy.get("[name='first_name']").type("Cypress Test");
-    cy.get("[name='last_name']").type("Tester");
-    cy.get("#role button").click();
-    cy.contains("#role li", "Ward Admin").click();
-    cy.get("input[name='district']").click();
-    cy.get("input[name='district']").type("Ernakulam");
-    cy.get("li[id^='headlessui-combobox-option']")
-      .contains("Ernakulam")
-      .click();
-    cy.get("[placeholder='Phone Number']").click();
-    cy.get("[placeholder='Phone Number']").type(phone_number);
-    cy.get("[placeholder='WhatsApp Phone Number']").type(alt_phone_number);
-    cy.contains("Apply").click();
-    cy.intercept(/\/api\/v1\/users/).as("getUsers");
-    cy.wait(1000);
-    cy.get("[name='username']").type(username);
-    cy.wait("@getUsers");
-    cy.get("dd[id='count']").contains(/^1$/).click();
-    cy.get("div[id='usr_0']").within(() => {
-      cy.intercept(`/api/v1/users/${username}/get_facilities/`).as(
-        "userFacility"
-      );
-      cy.get("div[id='role']").contains(/^WardAdmin$/);
-      cy.get("div[id='name']").contains("Cypress Test Tester");
-      cy.get("div[id='district']").contains(/^Ernakulam$/);
-      cy.get("div[id='local_body']").contains("Aikaranad");
-      cy.get("div[id='created_by']").contains(/^devdistrictadmin$/);
-      cy.get("div[id='home_facility']").contains("No Home Facility");
-      cy.get("button[id='facilities']").click();
-      cy.wait("@userFacility")
-        .getAttached("div[id=facility_0] > div > span")
-        .contains("Dummy Facility 1");
-    });
-  });
-
-  it("link facility for user", () => {
-    cy.contains("Linked Facilities").click();
-    cy.intercept(/\/api\/v1\/facility/).as("getFacilities");
-    cy.get("[name='facility']")
-      .click()
-      .type("Dummy Facility 1")
-      .wait("@getFacilities");
-    cy.get("li[role='option']").first().click();
-    cy.intercept(/\/api\/v1\/users\/\w+\/add_facility\//).as("addFacility");
-    cy.get("button[id='link-facility']").click();
-    cy.wait("@addFacility")
-      // .its("response.statusCode")
-      // .should("eq", 201)
-      .get("span")
-      .contains("Facility - User Already has permission to this facility");
-  });
-
-  it("Next/Previous Page", () => {
-    // only works for desktop mode
-    cy.get("button#next-pages").click();
-    cy.url().should("include", "page=2");
-    cy.get("button#prev-pages").click();
-    cy.url().should("include", "page=1");
-  });
-
-  afterEach(() => {
-    cy.saveLocalStorage();
-  });
-});
-
-describe("Edit User Profile & Error Validation", () => {
-  before(() => {
-    cy.loginByApi(username, "#@Cypress_test123");
-    cy.saveLocalStorage();
-  });
-
-  beforeEach(() => {
-    cy.restoreLocalStorage();
-    cy.awaitUrl("/user/profile");
-    cy.contains("button", "Edit User Profile").click();
-  });
-
-  it("First name Field Updation " + username, () => {
-    cy.get("input[name=firstName]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "Field is required");
-    cy.get("input[name=firstName]").type("firstName updated");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Last name Field Updation " + username, () => {
-    cy.get("input[name=lastName]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "Field is required");
-    cy.get("input[name=lastName]").type("lastName updated");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Age Field Updation " + username, () => {
-    cy.get("input[name=age]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "This field is required");
-    cy.get("input[name=age]").type("11");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Phone number Field Updation " + username, () => {
-    cy.get("input[name=phoneNumber]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should(
-      "contain",
-      "Please enter valid phone number"
-    );
-    cy.get("input[name=phoneNumber]").type("+919999999999");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Whatsapp number Field Updation " + username, () => {
-    cy.get("input[name=altPhoneNumber]").clear();
-    cy.get("input[name=altPhoneNumber]").type("+919999999999");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Email Field Updation " + username, () => {
-    cy.get("input[name=email]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "This field is required");
-    cy.get("input[name=email]").type("test@test.com");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  afterEach(() => {
-    cy.saveLocalStorage();
-  });
-});
-
-// describe("Delete User", () => { district admin wont be able to delete user
-//   it("deletes user", () => {
-//     cy.loginByApi("devdistrictadmin", "Coronasafe@123");
-//     cy.awaitUrl("/user");
-//     cy.get("[name='username']").type(username);
-//     cy.get("button")
-//       .should("contain", "Delete")
-//       .contains("Delete")
-//       .click();
-//     cy.get("button.font-medium.btn.btn-danger").click();
-//   });
-// });
diff --git a/cypress/e2e/users_spec/user_homepage.cy.ts b/cypress/e2e/users_spec/user_homepage.cy.ts
index 40a55bad1e8..060132105e6 100644
--- a/cypress/e2e/users_spec/user_homepage.cy.ts
+++ b/cypress/e2e/users_spec/user_homepage.cy.ts
@@ -4,11 +4,14 @@ import { cy, describe, before, beforeEach, it, afterEach } from "local-cypress";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import { UserPage } from "../../pageobject/Users/UserSearch";
 
-describe("Asset Tab", () => {
+describe("User Homepage", () => {
   const userPage = new UserPage();
   const usernameToTest = "devdoctor";
   const currentuser = "devdistrictadmin";
   const loginPage = new LoginPage();
+  const phone_number = "9876543219";
+  const alt_phone_number = "9876543219";
+
   before(() => {
     loginPage.loginAsDisctrictAdmin();
     cy.saveLocalStorage();
@@ -19,6 +22,38 @@ describe("Asset Tab", () => {
     cy.awaitUrl("/users");
   });
 
+  it("User advance filter functionality", () => {
+    userPage.clickAdvancedFilters();
+    userPage.typeInFirstName("Dev");
+    userPage.typeInLastName("Doctor");
+    userPage.selectRole("Doctor");
+    userPage.selectDistrict("Ernakulam");
+    userPage.typeInPhoneNumber(phone_number);
+    userPage.typeInAltPhoneNumber(alt_phone_number);
+    userPage.applyFilter();
+    userPage.verifyUrlafteradvancefilter();
+    userPage.checkUsernameText(usernameToTest);
+    userPage.verifyDataTestIdText("First Name", "First Name: Dev");
+    userPage.verifyDataTestIdText("Last Name", "Last Name: Doctor");
+    userPage.verifyDataTestIdText(
+      "Phone Number",
+      "Phone Number: +919876543219"
+    );
+    userPage.verifyDataTestIdText(
+      "WhatsApp no.",
+      "WhatsApp no.: +919876543219"
+    );
+    userPage.verifyDataTestIdText("Role", "Role: Doctor");
+    userPage.verifyDataTestIdText("District", "District: Ernakulam");
+    userPage.clearFilters();
+    userPage.verifyDataTestIdNotVisible("First Name");
+    userPage.verifyDataTestIdNotVisible("Last Name");
+    userPage.verifyDataTestIdNotVisible("Phone Number");
+    userPage.verifyDataTestIdNotVisible("WhatsApp no.");
+    userPage.verifyDataTestIdNotVisible("Role");
+    userPage.verifyDataTestIdNotVisible("District");
+  });
+
   it("Search by username", () => {
     userPage.checkSearchInputVisibility();
     userPage.typeInSearchInput(usernameToTest);
@@ -33,6 +68,14 @@ describe("Asset Tab", () => {
     userPage.checkUsernameBadgeVisibility(false);
     userPage.checkUsernameText(currentuser);
   });
+
+  it("Next/Previous Page Navigation", () => {
+    userPage.navigateToNextPage();
+    userPage.verifyCurrentPageNumber(2);
+    userPage.navigateToPreviousPage();
+    userPage.verifyCurrentPageNumber(1);
+  });
+
   afterEach(() => {
     cy.saveLocalStorage();
   });
diff --git a/cypress/e2e/users_spec/user_manage.cy.ts b/cypress/e2e/users_spec/user_manage.cy.ts
new file mode 100644
index 00000000000..9fe3aea75f9
--- /dev/null
+++ b/cypress/e2e/users_spec/user_manage.cy.ts
@@ -0,0 +1,155 @@
+import { cy, describe, before, beforeEach, it, afterEach } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { UserPage } from "../../pageobject/Users/UserSearch";
+import ManageUserPage from "../../pageobject/Users/ManageUserPage";
+import { UserCreationPage } from "../../pageobject/Users/UserCreation";
+
+describe("Manage User", () => {
+  const loginPage = new LoginPage();
+  const userPage = new UserPage();
+  const manageUserPage = new ManageUserPage();
+  const usernametolinkfacilitydoc1 = "dummydoctor4";
+  const usernametolinkfacilitydoc2 = "dummydoctor5";
+  const usernametolinkfacilitydoc3 = "dummydoctor6";
+  const usernametolinkskill = "devdoctor";
+  const userCreationPage = new UserCreationPage();
+  const usernameforworkinghour = "devdistrictadmin";
+  const usernamerealname = "Dummy Doctor";
+  const facilitytolinkusername = "Dummy Shifting Center";
+  const facilitytolinkskill = "Dummy Facility 1";
+  const workinghour = "23";
+  const linkedskill = "General Medicine";
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.awaitUrl("/users");
+  });
+
+  it("linking skills for a  users and verify its reflection in profile", () => {
+    // select the district user and select one skill link and verify its profile reflection
+    userPage.typeInSearchInput(usernameforworkinghour);
+    userPage.checkUsernameText(usernameforworkinghour);
+    manageUserPage.clicklinkedskillbutton();
+    manageUserPage.typeSkill(linkedskill);
+    manageUserPage.selectFacilityFromDropdown(linkedskill);
+    manageUserPage.clickAddSkillButton();
+    manageUserPage.clickCloseSlideOver();
+    cy.wait(5000);
+    manageUserPage.clicklinkedskillbutton();
+    manageUserPage.assertSkillInAddedUserSkills(linkedskill);
+    manageUserPage.clickCloseSlideOver();
+    cy.wait(5000);
+    manageUserPage.navigateToProfile();
+    userCreationPage.verifyElementContainsText(
+      "username-profile-details",
+      usernameforworkinghour
+    );
+    manageUserPage.assertSkillInAlreadyLinkedSkills(linkedskill);
+  });
+
+  it("linking skills for a doctor users and verify its reflection in doctor connect", () => {
+    // select a doctor user and link and unlink same skill twice and verify the badge is only shown once in doctor connect
+    userPage.typeInSearchInput(usernametolinkskill);
+    userPage.checkUsernameText(usernametolinkskill);
+    manageUserPage.clicklinkedskillbutton();
+    manageUserPage.typeSkill(linkedskill);
+    manageUserPage.selectFacilityFromDropdown(linkedskill);
+    manageUserPage.clickAddSkillButton();
+    manageUserPage.clickCloseSlideOver();
+    cy.wait(5000); // temporary hack to fix the failure
+    manageUserPage.clicklinkedskillbutton();
+    manageUserPage.assertSkillInAddedUserSkills(linkedskill);
+    manageUserPage.clickUnlinkSkill();
+    manageUserPage.clickSubmit();
+    manageUserPage.typeSkill(linkedskill);
+    manageUserPage.selectFacilityFromDropdown(linkedskill);
+    manageUserPage.clickAddSkillButton();
+    manageUserPage.clickCloseSlideOver();
+    // verifying the doctor connect
+    manageUserPage.navigateToFacility();
+    manageUserPage.typeFacilitySearch(facilitytolinkskill);
+    manageUserPage.assertFacilityInCard(facilitytolinkskill);
+    manageUserPage.clickFacilityPatients();
+    manageUserPage.clickDoctorConnectButton();
+    manageUserPage.assertSkillIndoctorconnect(linkedskill);
+  });
+
+  it("add working hour for a user and verify its reflection in card and user profile", () => {
+    // verify mandatory field error and select working hour for a user
+    userPage.typeInSearchInput(usernameforworkinghour);
+    userPage.checkUsernameText(usernameforworkinghour);
+    manageUserPage.clicksetaveragehourbutton();
+    manageUserPage.clearweeklyhourfield();
+    manageUserPage.clickSubmit();
+    manageUserPage.verifyErrorText("Value should be between 0 and 168");
+    // verify the data is reflected in user card and profile page
+    manageUserPage.typeInWeeklyWorkingHours(workinghour);
+    manageUserPage.clickSubmit();
+    manageUserPage.verifyWorkingHours(workinghour);
+    manageUserPage.navigateToProfile();
+    manageUserPage.verifyProfileWorkingHours(workinghour);
+  });
+
+  it("linking and unlinking facility for multiple users, and confirm reflection in user cards and doctor connect", () => {
+    // verify the user doesn't have any home facility
+    userPage.typeInSearchInput(usernametolinkfacilitydoc1);
+    userPage.checkUsernameText(usernametolinkfacilitydoc1);
+    manageUserPage.assertHomeFacility("No Home Facility");
+    //  Link a new facility and ensure it is under linked facility - doctor username (1)
+    manageUserPage.clickFacilitiesTab();
+    manageUserPage.typeFacilityName(facilitytolinkusername);
+    manageUserPage.selectFacilityFromDropdown(facilitytolinkusername);
+    manageUserPage.clickLinkFacility();
+    manageUserPage.assertLinkedFacility(facilitytolinkusername);
+    //  Verify in the already linked facility are not present in droplist
+    manageUserPage.assertFacilityNotInDropdown(facilitytolinkusername);
+    manageUserPage.clickCloseSlideOver();
+    //  Link a new facility and ensure it is under home facility - doctor username (2)
+    userPage.clearSearchInput();
+    userPage.typeInSearchInput(usernametolinkfacilitydoc2);
+    userPage.checkUsernameText(usernametolinkfacilitydoc2);
+    manageUserPage.clickFacilitiesTab();
+    manageUserPage.typeFacilityName(facilitytolinkusername);
+    manageUserPage.selectFacilityFromDropdown(facilitytolinkusername);
+    manageUserPage.clickLinkFacility();
+    manageUserPage.clickHomeFacilityIcon();
+    manageUserPage.assertnotLinkedFacility(facilitytolinkusername);
+    manageUserPage.assertHomeFacilitylink(facilitytolinkusername);
+    manageUserPage.clickCloseSlideOver();
+    //  verify the home facility doctor id have reflection in user card
+    userPage.clearSearchInput();
+    userPage.typeInSearchInput(usernametolinkfacilitydoc2);
+    userPage.checkUsernameText(usernametolinkfacilitydoc2);
+    manageUserPage.assertHomeFacility(facilitytolinkusername);
+    // Link a new facility and unlink the facility from the doctor username (3)
+    userPage.clearSearchInput();
+    userPage.typeInSearchInput(usernametolinkfacilitydoc3);
+    userPage.checkUsernameText(usernametolinkfacilitydoc3);
+    manageUserPage.clickFacilitiesTab();
+    manageUserPage.typeFacilityName(facilitytolinkusername);
+    manageUserPage.selectFacilityFromDropdown(facilitytolinkusername);
+    manageUserPage.clickLinkFacility();
+    manageUserPage.clickUnlinkFacilityButton();
+    manageUserPage.clickSubmit();
+    manageUserPage.assertnotLinkedFacility;
+    manageUserPage.linkedfacilitylistnotvisible();
+    manageUserPage.clickCloseSlideOver();
+    //  Go to particular facility doctor connect and all user-id are reflected based on there access
+    // Path will be facility page to patient page then doctor connect button
+    manageUserPage.navigateToFacility();
+    manageUserPage.typeFacilitySearch(facilitytolinkusername);
+    manageUserPage.assertFacilityInCard(facilitytolinkusername);
+    manageUserPage.clickFacilityPatients();
+    manageUserPage.clickDoctorConnectButton();
+    manageUserPage.assertDoctorConnectVisibility(usernamerealname);
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});
diff --git a/cypress/pageobject/Facility/FacilityCreation.ts b/cypress/pageobject/Facility/FacilityCreation.ts
index e0a572ccaec..d27433f04e7 100644
--- a/cypress/pageobject/Facility/FacilityCreation.ts
+++ b/cypress/pageobject/Facility/FacilityCreation.ts
@@ -129,6 +129,10 @@ class FacilityPage {
     cy.get("#view-assets").contains("View Assets").click();
   }
 
+  clickViewUsersOption() {
+    cy.get("#view-users").click();
+  }
+
   clickInventoryManagementOption() {
     cy.get("#inventory-management", { timeout: 10000 }).should("be.visible");
     cy.get("#inventory-management").click();
diff --git a/cypress/pageobject/Patient/PatientConsultation.ts b/cypress/pageobject/Patient/PatientConsultation.ts
index bf301641898..ce1fdc1e393 100644
--- a/cypress/pageobject/Patient/PatientConsultation.ts
+++ b/cypress/pageobject/Patient/PatientConsultation.ts
@@ -44,23 +44,20 @@ export class PatientConsultationPage {
     cy.get("#height").click().type(weight);
     cy.get("#patient_no").type(ipNumber);
     cy.intercept("GET", "**/icd/**").as("getIcdResults");
-    cy.get(
-      "#icd11_diagnoses_object input[placeholder='Select'][role='combobox']"
-    )
+    cy.get("#icd11-search input[role='combobox']")
       .scrollIntoView()
       .click()
       .type("1A");
-    cy.get("#icd11_diagnoses_object [role='option']")
+    cy.get("#icd11-search [role='option']")
       .contains("1A00 Cholera")
       .scrollIntoView()
       .click();
-    cy.get("label[for='icd11_diagnoses_object']").click();
+    cy.get("#condition-verification-status-menu").click();
+    cy.get("#add-icd11-diagnosis-as-confirmed").click();
     cy.wait("@getIcdResults").its("response.statusCode").should("eq", 200);
 
-    cy.get("#icd11_principal_diagnosis [role='combobox']").click().type("1A");
-    cy.get("#icd11_principal_diagnosis [role='option']")
-      .contains("1A00 Cholera")
-      .click();
+    cy.get("#principal-diagnosis-select").click();
+    cy.get("#principal-diagnosis-select [role='option']").first().click();
 
     cy.get("#consultation_notes").click().type(consulationNotes);
     cy.get("#verified_by")
diff --git a/cypress/pageobject/Users/ManageUserPage.ts b/cypress/pageobject/Users/ManageUserPage.ts
new file mode 100644
index 00000000000..b79b96447f0
--- /dev/null
+++ b/cypress/pageobject/Users/ManageUserPage.ts
@@ -0,0 +1,152 @@
+export class ManageUserPage {
+  assertHomeFacility(expectedText) {
+    cy.get("#home_facility").should("contain.text", expectedText);
+  }
+
+  clickFacilitiesTab() {
+    cy.get("#facilities").click();
+  }
+
+  typeFacilityName(facilityName) {
+    cy.get("input[name='facility']").click().type(facilityName);
+  }
+
+  selectFacilityFromDropdown(facilityName) {
+    cy.get("[role='option']").contains(facilityName).click();
+  }
+
+  clickLinkFacility() {
+    cy.get("#link-facility").click();
+  }
+
+  assertLinkedFacility(facilityName) {
+    cy.get("#linked-facility-list").should("contain.text", facilityName);
+  }
+
+  assertnotLinkedFacility(facilityName) {
+    cy.get("#linked-facility-list").should("not.contain", facilityName);
+  }
+
+  linkedfacilitylistnotvisible() {
+    cy.get("#linked-facility-list").should("not.exist");
+  }
+
+  assertHomeFacilitylink(facilityName) {
+    cy.get("#home-facility").should("contain.text", facilityName);
+  }
+
+  assertFacilityNotInDropdown(facilityName) {
+    this.typeFacilityName(facilityName);
+    cy.get("[role='option']").should("not.exist");
+  }
+
+  clickCloseSlideOver() {
+    cy.get("#close-slide-over").click();
+  }
+
+  clickHomeFacilityIcon() {
+    cy.get("#home-facility-icon").click();
+  }
+
+  clickUnlinkFacilityButton() {
+    cy.get("#unlink-facility-button").click();
+  }
+
+  clickSubmit() {
+    cy.get("#submit").click();
+  }
+
+  clicksetaveragehourbutton() {
+    cy.get("#avg-workinghour").click();
+  }
+
+  clearweeklyhourfield() {
+    cy.get("#weekly_working_hours").click().clear();
+  }
+
+  verifyErrorText(expectedError: string) {
+    cy.get(".error-text").should("contain", expectedError).and("be.visible");
+  }
+
+  typeInWeeklyWorkingHours(hours: string) {
+    cy.get("#weekly_working_hours").click().type(hours);
+  }
+
+  navigateToProfile() {
+    cy.intercept("GET", "**/api/v1/users/**").as("getUsers");
+    cy.get("#profilenamelink").click();
+    cy.wait("@getUsers").its("response.statusCode").should("eq", 200);
+  }
+
+  verifyWorkingHours(expectedHours: string) {
+    cy.get("#working-hours").should("contain", `${expectedHours} hours`);
+  }
+
+  verifyProfileWorkingHours(expectedHours: string) {
+    cy.get("#averageworkinghour-profile-details").should(
+      "contain",
+      expectedHours
+    );
+  }
+
+  navigateToFacility() {
+    cy.visit("/facility");
+  }
+
+  typeFacilitySearch(facilityName) {
+    cy.get("#search").click().type(facilityName);
+  }
+
+  assertFacilityInCard(facilityName) {
+    cy.get("#facility-name-card").should("contain", facilityName);
+  }
+
+  clickFacilityPatients() {
+    cy.get("#facility-patients").click();
+  }
+
+  clicklinkedskillbutton() {
+    cy.get("#skills").click();
+  }
+
+  clickAddSkillButton() {
+    cy.intercept("GET", "**/api/v1/skill/**").as("getSkills");
+    cy.get("#add-skill-button").click();
+    cy.wait("@getSkills").its("response.statusCode").should("eq", 200);
+  }
+
+  assertSkillInAlreadyLinkedSkills(skillName) {
+    cy.get("#already-linked-skills")
+      .contains(skillName)
+      .should("have.length", 1);
+  }
+
+  assertSkillIndoctorconnect(skillName) {
+    cy.get("#doctor-connect-home-doctor")
+      .contains(skillName)
+      .should("have.length", 1);
+  }
+
+  typeSkill(skillName) {
+    cy.get("#select-skill").click().type(skillName);
+  }
+
+  clickDoctorConnectButton() {
+    cy.get("#doctor-connect-patient-button").click();
+  }
+
+  clickUnlinkSkill() {
+    cy.get("#unlink-skill").click();
+  }
+
+  assertSkillInAddedUserSkills(skillName) {
+    cy.get("#added-user-skills").should("contain", skillName);
+  }
+
+  assertDoctorConnectVisibility(realName) {
+    cy.get("#doctor-connect-home-doctor").should("contain.text", realName);
+    cy.get("#doctor-connect-remote-doctor").should("contain.text", realName);
+  }
+}
+
+export default ManageUserPage;
diff --git a/cypress/pageobject/Users/UserCreation.ts b/cypress/pageobject/Users/UserCreation.ts
new file mode 100644
index 00000000000..32127ffcb90
--- /dev/null
+++ b/cypress/pageobject/Users/UserCreation.ts
@@ -0,0 +1,79 @@
+// UserCreation.ts
+export class UserCreationPage {
+  clickElementById(elementId: string) {
+    cy.get("#" + elementId).click();
+  }
+
+  typeIntoElementById(elementId: string, value: string) {
+    cy.get("#" + elementId)
+      .click()
+      .type(value);
+  }
+
+  typeIntoElementByIdPostClear(elementId: string, value: string) {
+    cy.get("#" + elementId)
+      .click()
+      .clear()
+      .click()
+      .type(value);
+  }
+
+  clearIntoElementById(elementId: string) {
+    cy.get("#" + elementId)
+      .click()
+      .clear();
+  }
+
+  typeIntoInputByName(inputName: string, value: string) {
+    cy.get("input[name='" + inputName + "']")
+      .click()
+      .type(value);
+  }
+
+  selectOptionContainingText(text: string) {
+    cy.get("[role='option']").contains(text).click();
+  }
+
+  verifyNotification(message: string) {
+    cy.verifyNotification(message);
+  }
+
+  selectFacility(name: string) {
+    this.typeIntoInputByName("facilities", name);
+    this.selectOptionContainingText(name);
+  }
+
+  selectHomeFacility(name: string) {
+    this.clickElementById("home_facility");
+    this.selectOptionContainingText(name);
+  }
+
+  setInputDate(
+    dateElementId: string,
+    inputElementId: string,
+    dateValue: string
+  ) {
+    this.clickElementById(dateElementId);
+    this.typeIntoElementById(inputElementId, dateValue);
+  }
+
+  selectDropdownOption(dropdownId: string, optionText: string) {
+    this.clickElementById(dropdownId);
+    this.selectOptionContainingText(optionText);
+  }
+
+  verifyElementContainsText(elementId: string, expectedText: string) {
+    cy.get("#" + elementId).should("contain.text", expectedText);
+  }
+
+  verifyErrorMessages(errorMessages: string[]) {
+    cy.get(".error-text").then(($errors) => {
+      const displayedErrorMessages = $errors
+        .map((_, el) => Cypress.$(el).text())
+        .get();
+      errorMessages.forEach((errorMessage) => {
+        expect(displayedErrorMessages).to.include(errorMessage);
+      });
+    });
+  }
+}
diff --git a/cypress/pageobject/Users/UserSearch.ts b/cypress/pageobject/Users/UserSearch.ts
index 311a4b87c3a..4956532277f 100644
--- a/cypress/pageobject/Users/UserSearch.ts
+++ b/cypress/pageobject/Users/UserSearch.ts
@@ -22,6 +22,16 @@ export class UserPage {
     cy.url().should("include", `username=${username}`);
   }
 
+  verifyUrlafteradvancefilter() {
+    cy.url()
+      .should("include", "first_name=Dev")
+      .and("include", "last_name=Doctor")
+      .and("include", "phone_number=%2B919876543219")
+      .and("include", "alt_phone_number=%2B919876543219")
+      .and("include", "user_type=Doctor")
+      .and("include", "district_id=7");
+  }
+
   checkUsernameText(username: string) {
     cy.get(this.usernameText).should("have.text", username);
   }
@@ -34,4 +44,69 @@ export class UserPage {
   clickRemoveIcon() {
     cy.get(this.removeIcon).click();
   }
+
+  clickAdvancedFilters() {
+    cy.get("#advanced-filter").contains("Advanced Filters").click();
+  }
+
+  typeInFirstName(firstName: string) {
+    cy.get("#first_name").click().type(firstName);
+  }
+
+  typeInLastName(lastName: string) {
+    cy.get("#last_name").click().type(lastName);
+  }
+
+  selectRole(role: string) {
+    cy.get("#role button").click();
+    cy.get("[role='option']").contains(role).click();
+  }
+
+  selectDistrict(district: string) {
+    cy.get("input[name='district']").click().type(district);
+    cy.get("[role='option']").contains(district).click();
+  }
+
+  typeInPhoneNumber(phone: string) {
+    cy.get("#phone_number").click().type(phone);
+  }
+
+  typeInAltPhoneNumber(altPhone: string) {
+    cy.get("#alt_phone_number").click().type(altPhone);
+  }
+
+  applyFilter() {
+    cy.get("#apply-filter").click();
+  }
+
+  verifyDataTestIdText(testId: string, text: string) {
+    cy.get(`[data-testid="${testId}"]`).contains(text).should("be.visible");
+  }
+
+  clearFilters() {
+    this.clickAdvancedFilters();
+    cy.get("#clear-filter").contains("Clear").click();
+  }
+
+  verifyDataTestIdNotVisible(testId: string) {
+    cy.get(`[data-testid="${testId}"]`).should("not.be.visible");
+  }
+
+  navigateToNextPage() {
+    cy.get("button#next-pages").click();
+  }
+
+  navigateToPreviousPage() {
+    cy.get("button#prev-pages").click();
+  }
+
+  verifyCurrentPageNumber(pageNumber: number) {
+    cy.url().should("include", `page=${pageNumber}`);
+  }
+
+  verifyMultipleBadgesWithSameId(expectedContents: string[]) {
+    cy.get("#user-view-name").each((el, index) => {
+      expect(el.text().trim()).to.equal(expectedContents[index]);
+    });
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 0da53d597ab..d65f617ec05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -90,7 +90,7 @@
         "@typescript-eslint/parser": "^5.61.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
         "autoprefixer": "^10.4.14",
-        "cypress": "^13.1.0",
+        "cypress": "^13.5.0",
         "cypress-localstorage-commands": "^2.2.3",
         "eslint": "^8.44.0",
         "eslint-config-prettier": "^8.8.0",
@@ -8019,15 +8019,15 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/cypress": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.1.0.tgz",
-      "integrity": "sha512-LUKxCYlB973QBFls1Up4FAE9QIYobT+2I8NvvAwMfQS2YwsWbr6yx7y9hmsk97iqbHkKwZW3MRjoK1RToBFVdQ==",
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.5.0.tgz",
+      "integrity": "sha512-oh6U7h9w8wwHfzNDJQ6wVcAeXu31DlIYlNOBvfd6U4CcB8oe4akawQmH+QJVOMZlM42eBoCne015+svVqdwdRQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@cypress/request": "^3.0.0",
         "@cypress/xvfb": "^1.2.4",
-        "@types/node": "^16.18.39",
+        "@types/node": "^18.17.5",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
         "arch": "^2.2.0",
@@ -8089,10 +8089,13 @@
       }
     },
     "node_modules/cypress/node_modules/@types/node": {
-      "version": "16.18.42",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.42.tgz",
-      "integrity": "sha512-IrFfX/1oxDFQNpQzgt/BoP/hbMuQT68DPsNwzJmw8y3K8lfnPp0XymVN9GLFz+LobFmJGZ/peRzq+9wXYfCCtw==",
-      "dev": true
+      "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",
@@ -14826,6 +14829,8 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14860,8 +14865,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz",
-      "integrity": "sha512-SQ7Kzhh9+D+ZW9MA0zkYv3VXhIDNx+LzM6EJ+/65I3QY+enU6Itte7E5XX7EWrqLW2FN4n06GWzBnPoC3th2aQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -14934,8 +14937,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/disparity-colors": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/disparity-colors/-/disparity-colors-3.0.0.tgz",
-      "integrity": "sha512-5R/z157/f20Fi0Ou4ZttL51V0xz0EdPEOauFtPCEYOLInDBRCj1/TxOJ5aGTrtShxEshN2d+hXb9ZKSi5RLBcg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14948,8 +14949,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/fs": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.0.tgz",
-      "integrity": "sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14962,8 +14961,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/git": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-4.1.0.tgz",
-      "integrity": "sha512-9hwoB3gStVfa0N31ymBmrX+GuDGdVA/QWShZVqE0HK2Af+7QGGrCTbZia/SW0ImUTjTne7SP91qxDmtXvDHRPQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14983,8 +14980,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-2.0.2.tgz",
-      "integrity": "sha512-xACzLPhnfD51GKvTOOuNX2/V4G4mz9/1I2MfDoye9kBM3RYe5g2YbscsaGoTlaWqkxeiapBWyseULVKpSVHtKQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15001,8 +14996,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/map-workspaces": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@npmcli/map-workspaces/-/map-workspaces-3.0.4.tgz",
-      "integrity": "sha512-Z0TbvXkRbacjFFLpVpV0e2mheCh+WzQpcqL+4xp49uNJOxOnIAPZyXtUxZ5Qn3QBTGKA11Exjd9a5411rBrhDg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15018,8 +15011,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@npmcli/metavuln-calculator/-/metavuln-calculator-5.0.1.tgz",
-      "integrity": "sha512-qb8Q9wIIlEPj3WeA1Lba91R4ZboPL0uspzV0F9uwP+9AYMVB2zOoa7Pbk12g6D2NHAinSbHh6QYmGuRyHZ874Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15035,8 +15026,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/name-from-folder": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/name-from-folder/-/name-from-folder-2.0.0.tgz",
-      "integrity": "sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15046,8 +15035,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/node-gyp": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-3.0.0.tgz",
-      "integrity": "sha512-gp8pRXC2oOxu0DUE1/M3bYtb1b3/DbJ5aM113+XJBgfXdussRAsX0YOrOhdd8WvnAR6auDBvJomGAkLKA5ydxA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15057,8 +15044,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/package-json": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-4.0.1.tgz",
-      "integrity": "sha512-lRCEGdHZomFsURroh522YvA/2cVb9oPIJrjHanCJZkiasz1BzcnLr3tBJhlV7S86MBJBuAQ33is2D60YitZL2Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15077,8 +15062,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/promise-spawn": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-6.0.2.tgz",
-      "integrity": "sha512-gGq0NJkIGSwdbUt4yhdF8ZrmkGKVz9vAdVzpOfnom+V8PLSmSOVhZwbNvZZS1EYcJN5hzzKBxmmVVAInM6HQLg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15103,8 +15086,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/run-script": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-6.0.2.tgz",
-      "integrity": "sha512-NCcr1uQo1k5U+SYlnIrbAh3cxy+OQT1VtqiAbxdymSlptbzBb62AjH2xXgjNCoP073hoa1CfCAcwoZ8k96C4nA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15155,8 +15136,6 @@
     },
     "node_modules/npm/node_modules/@tootallnate/once": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15166,8 +15145,6 @@
     },
     "node_modules/npm/node_modules/@tufjs/canonical-json": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-1.0.0.tgz",
-      "integrity": "sha512-QTnf++uxunWvG2z3UFNzAoQPHxnSXOwtaI3iJ+AohhV+5vONuArPjJE7aPXPVXfXJsqrVbZBu9b81AJoSd09IQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15177,8 +15154,6 @@
     },
     "node_modules/npm/node_modules/@tufjs/models": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@tufjs/models/-/models-1.0.4.tgz",
-      "integrity": "sha512-qaGV9ltJP0EO25YfFUPhxRVK0evXFIAGicsVXuRim4Ed9cjPxYhNnNJ49SFmbeLgtxpslIkX317IgpfcHPVj/A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15192,8 +15167,6 @@
     },
     "node_modules/npm/node_modules/abbrev": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
-      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15203,8 +15176,6 @@
     },
     "node_modules/npm/node_modules/abort-controller": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15296,8 +15267,6 @@
     },
     "node_modules/npm/node_modules/archy": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
@@ -15362,8 +15331,6 @@
     },
     "node_modules/npm/node_modules/binary-extensions": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15384,8 +15351,6 @@
     },
     "node_modules/npm/node_modules/buffer": {
       "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
       "dev": true,
       "funding": [
         {
@@ -15410,8 +15375,6 @@
     },
     "node_modules/npm/node_modules/builtins": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15444,8 +15407,6 @@
     },
     "node_modules/npm/node_modules/chalk": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15469,8 +15430,6 @@
     },
     "node_modules/npm/node_modules/ci-info": {
       "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
-      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
       "dev": true,
       "funding": [
         {
@@ -15486,8 +15445,6 @@
     },
     "node_modules/npm/node_modules/cidr-regex": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/cidr-regex/-/cidr-regex-3.1.1.tgz",
-      "integrity": "sha512-RBqYd32aDwbCMFJRL6wHOlDNYJsPNTt8vC82ErHF5vKt8QQzxm1FrkW8s/R5pVrXMf17sba09Uoy91PKiddAsw==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
@@ -15511,8 +15468,6 @@
     },
     "node_modules/npm/node_modules/cli-columns": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cli-columns/-/cli-columns-4.0.0.tgz",
-      "integrity": "sha512-XW2Vg+w+L9on9wtwKpyzluIPCWXjaBahI7mTcYjx+BVIYD9c3yqcv/yKC7CmdCZat4rq2yiE1UMSJC5ivKfMtQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15526,8 +15481,6 @@
     },
     "node_modules/npm/node_modules/cli-table3": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
-      "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15554,8 +15507,6 @@
     },
     "node_modules/npm/node_modules/cmd-shim": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz",
-      "integrity": "sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15587,8 +15538,6 @@
     },
     "node_modules/npm/node_modules/color-support": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15598,8 +15547,6 @@
     },
     "node_modules/npm/node_modules/columnify": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.6.0.tgz",
-      "integrity": "sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15613,8 +15560,6 @@
     },
     "node_modules/npm/node_modules/common-ancestor-path": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
-      "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -15653,6 +15598,8 @@
     },
     "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15701,6 +15648,8 @@
     },
     "node_modules/npm/node_modules/debug/node_modules/ms": {
       "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
@@ -15738,8 +15687,6 @@
     },
     "node_modules/npm/node_modules/diff": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
-      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-3-Clause",
@@ -15765,8 +15712,6 @@
     },
     "node_modules/npm/node_modules/encoding": {
       "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15777,8 +15722,6 @@
     },
     "node_modules/npm/node_modules/env-paths": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
-      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15788,16 +15731,12 @@
     },
     "node_modules/npm/node_modules/err-code": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
-      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/event-target-shim": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15818,16 +15757,12 @@
     },
     "node_modules/npm/node_modules/exponential-backoff": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
-      "integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==",
       "dev": true,
       "inBundle": true,
       "license": "Apache-2.0"
     },
     "node_modules/npm/node_modules/fastest-levenshtein": {
       "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
-      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15883,8 +15818,6 @@
     },
     "node_modules/npm/node_modules/gauge": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.1.tgz",
-      "integrity": "sha512-CmykPMJGuNan/3S4kZOpvvPYSNqSHANiWnh9XcMU2pSjtBfF0XzZ2p1bFAxTbnFxyBuPxQYHhzwaoOmUdqzvxQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15926,8 +15859,6 @@
     },
     "node_modules/npm/node_modules/graceful-fs": {
       "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -15956,8 +15887,6 @@
     },
     "node_modules/npm/node_modules/hosted-git-info": {
       "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
-      "integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15970,16 +15899,12 @@
     },
     "node_modules/npm/node_modules/http-cache-semantics": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/npm/node_modules/http-proxy-agent": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16009,8 +15934,6 @@
     },
     "node_modules/npm/node_modules/humanize-ms": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16020,8 +15943,6 @@
     },
     "node_modules/npm/node_modules/iconv-lite": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16035,8 +15956,6 @@
     },
     "node_modules/npm/node_modules/ieee754": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
       "dev": true,
       "funding": [
         {
@@ -16057,8 +15976,6 @@
     },
     "node_modules/npm/node_modules/ignore-walk": {
       "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-6.0.3.tgz",
-      "integrity": "sha512-C7FfFoTA+bI10qfeydT8aZbvr91vAEU+2W5BZUlzPec47oNb07SsOfwYrtxuvOYdUApPP/Qlh4DtAO51Ekk2QA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16113,8 +16030,6 @@
     },
     "node_modules/npm/node_modules/ini": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz",
-      "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16124,8 +16039,6 @@
     },
     "node_modules/npm/node_modules/init-package-json": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-5.0.0.tgz",
-      "integrity": "sha512-kBhlSheBfYmq3e0L1ii+VKe3zBTLL5lDCDWR+f9dLmEGSB3MqLlMlsolubSsyI88Bg6EA+BIMlomAnQ1SwgQBw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16152,8 +16065,6 @@
     },
     "node_modules/npm/node_modules/ip-regex": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16163,8 +16074,6 @@
     },
     "node_modules/npm/node_modules/is-cidr": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/is-cidr/-/is-cidr-4.0.2.tgz",
-      "integrity": "sha512-z4a1ENUajDbEl/Q6/pVBpTR1nBjjEE1X7qb7bmWYanNnPoKAvUCPFKeXV6Fe4mgTkWKBqiHIcwsI3SndiO5FeA==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
@@ -16200,8 +16109,6 @@
     },
     "node_modules/npm/node_modules/is-lambda": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
@@ -16234,8 +16141,6 @@
     },
     "node_modules/npm/node_modules/json-parse-even-better-errors": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.0.tgz",
-      "integrity": "sha512-iZbGHafX/59r39gPwVPRBGw0QQKnA7tte5pSMrhWOW7swGsVvVTjmfyAV9pNqk8YGT7tRCdxRu8uzcgZwoDooA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16245,8 +16150,6 @@
     },
     "node_modules/npm/node_modules/json-stringify-nice": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/json-stringify-nice/-/json-stringify-nice-1.1.4.tgz",
-      "integrity": "sha512-5Z5RFW63yxReJ7vANgW6eZFGWaQvnPE3WNmZoOJrSkGju2etKA2L5rrOa1sm877TVTFt57A80BH1bArcmlLfPw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16256,8 +16159,6 @@
     },
     "node_modules/npm/node_modules/jsonparse": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
       "dev": true,
       "engines": [
         "node >= 0.2.0"
@@ -16267,24 +16168,18 @@
     },
     "node_modules/npm/node_modules/just-diff": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/just-diff/-/just-diff-6.0.2.tgz",
-      "integrity": "sha512-S59eriX5u3/QhMNq3v/gm8Kd0w8OS6Tz2FS1NG4blv+z0MuQcBRJyFWjdovM0Rad4/P4aUPFtnkNjMjyMlMSYA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/just-diff-apply": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/just-diff-apply/-/just-diff-apply-5.5.0.tgz",
-      "integrity": "sha512-OYTthRfSh55WOItVqwpefPtNt2VdKsq5AnAK6apdtR6yCH8pr0CmSr710J0Mf+WdQy7K/OzMy7K2MgAfdQURDw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/libnpmaccess": {
       "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/libnpmaccess/-/libnpmaccess-7.0.2.tgz",
-      "integrity": "sha512-vHBVMw1JFMTgEk15zRsJuSAg7QtGGHpUSEfnbcRL1/gTBag9iEfJbyjpDmdJmwMhvpoLoNBtdAUCdGnaP32hhw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16352,8 +16247,6 @@
     },
     "node_modules/npm/node_modules/libnpmhook": {
       "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/libnpmhook/-/libnpmhook-9.0.3.tgz",
-      "integrity": "sha512-wMZe58sI7KLhg0+nUWZW5KdMfjNNcOIIbkoP19BDHYoUF9El7eeUWkGNxUGzpHkPKiGoQ1z/v6CYin4deebeuw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16367,8 +16260,6 @@
     },
     "node_modules/npm/node_modules/libnpmorg": {
       "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/libnpmorg/-/libnpmorg-5.0.4.tgz",
-      "integrity": "sha512-YqYXLMAN0Y1eJH4w3hUFN9648xfSdvJANMsdeZTOWJOW4Pqp8qapJFzQdqCfUkg+tEuQmnaFQQKXvkMZC51+Mw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16397,8 +16288,6 @@
     },
     "node_modules/npm/node_modules/libnpmpublish": {
       "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/libnpmpublish/-/libnpmpublish-7.5.0.tgz",
-      "integrity": "sha512-zctH6QcTJ093lpxmkufr2zr3AJ9V90hcRilDFNin6n91ODj+S28RdyMFFJpa9NwyztmyV2hlWLyZv0GaOQBDyA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16418,8 +16307,6 @@
     },
     "node_modules/npm/node_modules/libnpmsearch": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/libnpmsearch/-/libnpmsearch-6.0.2.tgz",
-      "integrity": "sha512-p+5BF19AvnVg8mcIQhy6yWhI6jHQRVMYaIaKeITEfYAffWsqbottA/WZdMtHL76hViC6SFM1WdclM1w5eAIa1g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16432,8 +16319,6 @@
     },
     "node_modules/npm/node_modules/libnpmteam": {
       "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/libnpmteam/-/libnpmteam-5.0.3.tgz",
-      "integrity": "sha512-7XOGhi45s+ml6TyrhJUTyrErcoDMKGKfEtiTEco4ofU7BGGAUOalVztKMVLLJgJOOXdIAIlzCHqkTXEuSiyCiA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16447,8 +16332,6 @@
     },
     "node_modules/npm/node_modules/libnpmversion": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/libnpmversion/-/libnpmversion-4.0.2.tgz",
-      "integrity": "sha512-n1X70mFHv8Piy4yos+MFWUARSkTbyV5cdsHScaIkuwYvRAF/s2VtYScDzWB4Oe8uNEuGNdjiRR1E/Dh1tMvv6g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16465,8 +16348,6 @@
     },
     "node_modules/npm/node_modules/lru-cache": {
       "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
-      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16476,8 +16357,6 @@
     },
     "node_modules/npm/node_modules/make-fetch-happen": {
       "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-11.1.1.tgz",
-      "integrity": "sha512-rLWS7GCSTcEujjVBs2YqG7Y4643u8ucvCJeSRqiLYhesrDuzeuFIk37xREzAsfQaqzl8b9rNCE4m6J8tvX4Q8w==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16532,8 +16411,6 @@
     },
     "node_modules/npm/node_modules/minipass-collect": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
-      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16546,6 +16423,8 @@
     },
     "node_modules/npm/node_modules/minipass-collect/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16575,8 +16454,6 @@
     },
     "node_modules/npm/node_modules/minipass-flush": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16589,6 +16466,8 @@
     },
     "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16601,8 +16480,6 @@
     },
     "node_modules/npm/node_modules/minipass-json-stream": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz",
-      "integrity": "sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16613,6 +16490,8 @@
     },
     "node_modules/npm/node_modules/minipass-json-stream/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16625,8 +16504,6 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline": {
       "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
-      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16639,6 +16516,8 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16651,8 +16530,6 @@
     },
     "node_modules/npm/node_modules/minipass-sized": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
-      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16665,6 +16542,8 @@
     },
     "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16692,6 +16571,8 @@
     },
     "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16718,16 +16599,12 @@
     },
     "node_modules/npm/node_modules/ms": {
       "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/mute-stream": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
-      "integrity": "sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16737,8 +16614,6 @@
     },
     "node_modules/npm/node_modules/negotiator": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16748,8 +16623,6 @@
     },
     "node_modules/npm/node_modules/node-gyp": {
       "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-9.4.0.tgz",
-      "integrity": "sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -16775,16 +16648,12 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/abbrev": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/are-we-there-yet": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
-      "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16810,8 +16679,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/gauge": {
       "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
-      "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16831,6 +16698,8 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/glob": {
       "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16934,8 +16803,6 @@
     },
     "node_modules/npm/node_modules/nopt": {
       "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.0.tgz",
-      "integrity": "sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16951,8 +16818,6 @@
     },
     "node_modules/npm/node_modules/normalize-package-data": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-5.0.0.tgz",
-      "integrity": "sha512-h9iPVIfrVZ9wVYQnxFgtw1ugSvGEMOlyPWWtm8BMJhnwyEL/FLbYbTY3V3PpjI/BUK67n9PEWDu6eHzu1fB15Q==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
@@ -16968,8 +16833,6 @@
     },
     "node_modules/npm/node_modules/npm-audit-report": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/npm-audit-report/-/npm-audit-report-5.0.0.tgz",
-      "integrity": "sha512-EkXrzat7zERmUhHaoren1YhTxFwsOu5jypE84k6632SXTHcQE1z8V51GC6GVZt8LxkC+tbBcKMUBZAgk8SUSbw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -16979,8 +16842,6 @@
     },
     "node_modules/npm/node_modules/npm-bundled": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.0.tgz",
-      "integrity": "sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17005,8 +16866,6 @@
     },
     "node_modules/npm/node_modules/npm-normalize-package-bin": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
-      "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17016,8 +16875,6 @@
     },
     "node_modules/npm/node_modules/npm-package-arg": {
       "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-10.1.0.tgz",
-      "integrity": "sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17033,8 +16890,6 @@
     },
     "node_modules/npm/node_modules/npm-packlist": {
       "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-7.0.4.tgz",
-      "integrity": "sha512-d6RGEuRrNS5/N84iglPivjaJPxhDbZmlbTwTDX2IbcRHG5bZCdtysYMhwiPvcF4GisXHGn7xsxv+GQ7T/02M5Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17062,8 +16917,6 @@
     },
     "node_modules/npm/node_modules/npm-profile": {
       "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-7.0.1.tgz",
-      "integrity": "sha512-VReArOY/fCx5dWL66cbJ2OMogTQAVVQA//8jjmjkarboki3V7UJ0XbGFW+khRwiAJFQjuH0Bqr/yF7Y5RZdkMQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17077,8 +16930,6 @@
     },
     "node_modules/npm/node_modules/npm-registry-fetch": {
       "version": "14.0.5",
-      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-14.0.5.tgz",
-      "integrity": "sha512-kIDMIo4aBm6xg7jOttupWZamsZRkAqMqwqqbVXnUqstY5+tapvv6bkH/qMR76jdgV+YljEUCyWx3hRYMrJiAgA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17097,8 +16948,6 @@
     },
     "node_modules/npm/node_modules/npm-user-validate": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/npm-user-validate/-/npm-user-validate-2.0.0.tgz",
-      "integrity": "sha512-sSWeqAYJ2dUPStJB+AEj0DyLRltr/f6YNcvCA7phkB8/RMLMnVsQ41GMwHo/ERZLYNDsyB2wPm7pZo1mqPOl7Q==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
@@ -17108,8 +16957,6 @@
     },
     "node_modules/npm/node_modules/npmlog": {
       "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-7.0.1.tgz",
-      "integrity": "sha512-uJ0YFk/mCQpLBt+bxN88AKd+gyqZvZDbtiNxk6Waqcj2aPRyfVx8ITawkyQynxUagInjdYT1+qj4NfA5KJJUxg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17153,8 +17000,6 @@
     },
     "node_modules/npm/node_modules/pacote": {
       "version": "15.2.0",
-      "resolved": "https://registry.npmjs.org/pacote/-/pacote-15.2.0.tgz",
-      "integrity": "sha512-rJVZeIwHTUta23sIZgEIM62WYwbmGbThdbnkt81ravBplQv+HjyroqnLRNH2+sLJHcGZmLRmhPwACqhfTcOmnA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17187,8 +17032,6 @@
     },
     "node_modules/npm/node_modules/parse-conflict-json": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/parse-conflict-json/-/parse-conflict-json-3.0.1.tgz",
-      "integrity": "sha512-01TvEktc68vwbJOtWZluyWeVGWjP+bZwXtPDMQVbBKzbJ/vZBif0L69KH1+cHv1SZ6e0FKLvjyHe8mqsIqYOmw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17250,8 +17093,6 @@
     },
     "node_modules/npm/node_modules/postcss-selector-parser": {
       "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17265,8 +17106,6 @@
     },
     "node_modules/npm/node_modules/proc-log": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",
-      "integrity": "sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17287,8 +17126,6 @@
     },
     "node_modules/npm/node_modules/promise-all-reject-late": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-all-reject-late/-/promise-all-reject-late-1.0.1.tgz",
-      "integrity": "sha512-vuf0Lf0lOxyQREH7GDIOUMLS7kz+gs8i6B+Yi8dC68a2sychGrHTJYghMBD6k7eUcH0H5P73EckCA48xijWqXw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17298,8 +17135,6 @@
     },
     "node_modules/npm/node_modules/promise-call-limit": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/promise-call-limit/-/promise-call-limit-1.0.2.tgz",
-      "integrity": "sha512-1vTUnfI2hzui8AEIixbdAJlFY4LFDXqQswy/2eOlThAscXCY4It8FdVuI0fMJGAB2aWGbdQf/gv0skKYXmdrHA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17309,16 +17144,12 @@
     },
     "node_modules/npm/node_modules/promise-inflight": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/promise-retry": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
-      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17332,8 +17163,6 @@
     },
     "node_modules/npm/node_modules/promzard": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/promzard/-/promzard-1.0.0.tgz",
-      "integrity": "sha512-KQVDEubSUHGSt5xLakaToDFrSoZhStB8dXLzk2xvwR67gJktrHFvpR63oZgHyK19WKbHFLXJqCPXdVR3aBP8Ig==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17346,8 +17175,6 @@
     },
     "node_modules/npm/node_modules/qrcode-terminal": {
       "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz",
-      "integrity": "sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==",
       "dev": true,
       "inBundle": true,
       "bin": {
@@ -17356,8 +17183,6 @@
     },
     "node_modules/npm/node_modules/read": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/read/-/read-2.1.0.tgz",
-      "integrity": "sha512-bvxi1QLJHcaywCAEsAk4DG3nVoqiY2Csps3qzWalhj5hFqRn1d/OixkFXtLO1PrgHUcAP0FNaSY/5GYNfENFFQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17370,8 +17195,6 @@
     },
     "node_modules/npm/node_modules/read-cmd-shim": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz",
-      "integrity": "sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17381,8 +17204,6 @@
     },
     "node_modules/npm/node_modules/read-package-json": {
       "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-6.0.4.tgz",
-      "integrity": "sha512-AEtWXYfopBj2z5N5PbkAOeNHRPUg5q+Nen7QLxV8M2zJq1ym6/lCz3fYNTCXe19puu2d06jfHhrP7v/S2PtMMw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17398,8 +17219,6 @@
     },
     "node_modules/npm/node_modules/read-package-json-fast": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
-      "integrity": "sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17428,8 +17247,6 @@
     },
     "node_modules/npm/node_modules/retry": {
       "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17468,6 +17285,8 @@
     },
     "node_modules/npm/node_modules/rimraf/node_modules/glob": {
       "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17524,8 +17343,6 @@
     },
     "node_modules/npm/node_modules/safer-buffer": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17550,6 +17367,8 @@
     },
     "node_modules/npm/node_modules/semver/node_modules/lru-cache": {
       "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17626,8 +17445,6 @@
     },
     "node_modules/npm/node_modules/smart-buffer": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
-      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17638,8 +17455,6 @@
     },
     "node_modules/npm/node_modules/socks": {
       "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
-      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17654,8 +17469,6 @@
     },
     "node_modules/npm/node_modules/socks-proxy-agent": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
-      "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17795,8 +17608,6 @@
     },
     "node_modules/npm/node_modules/supports-color": {
       "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz",
-      "integrity": "sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17828,6 +17639,8 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
       "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17840,6 +17653,8 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17852,24 +17667,18 @@
     },
     "node_modules/npm/node_modules/text-table": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/tiny-relative-date": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz",
-      "integrity": "sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/treeverse": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/treeverse/-/treeverse-3.0.0.tgz",
-      "integrity": "sha512-gcANaAnd2QDZFmHFEOF4k7uc1J/6a6z3DJMd/QwEyxLoKGiptJRwid582r7QIsFlFMIZ3SnxfS52S4hm2DHkuQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17879,8 +17688,6 @@
     },
     "node_modules/npm/node_modules/tuf-js": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-1.1.7.tgz",
-      "integrity": "sha512-i3P9Kgw3ytjELUfpuKVDNBJvk4u5bXL6gskv572mcevPbSKCV3zt3djhmlEQ65yERjIbOSncy7U4cQJaB1CBCg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17895,8 +17702,6 @@
     },
     "node_modules/npm/node_modules/unique-filename": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
-      "integrity": "sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17909,8 +17714,6 @@
     },
     "node_modules/npm/node_modules/unique-slug": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-4.0.0.tgz",
-      "integrity": "sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17931,8 +17734,6 @@
     },
     "node_modules/npm/node_modules/validate-npm-package-license": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
       "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
@@ -17943,8 +17744,6 @@
     },
     "node_modules/npm/node_modules/validate-npm-package-name": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
-      "integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17957,16 +17756,12 @@
     },
     "node_modules/npm/node_modules/walk-up-path": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-3.0.1.tgz",
-      "integrity": "sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/wcwidth": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -17976,8 +17771,6 @@
     },
     "node_modules/npm/node_modules/which": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
-      "integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -17993,8 +17786,6 @@
     },
     "node_modules/npm/node_modules/wide-align": {
       "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -18057,6 +17848,8 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-styles": {
       "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -18077,6 +17870,8 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -18119,8 +17914,6 @@
     },
     "node_modules/npm/node_modules/write-file-atomic": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
-      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -22159,6 +21952,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
diff --git a/package.json b/package.json
index 1ec0e88f48f..ca3f6920a12 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "cypress": "^13.1.0",
+    "cypress": "^13.5.0",
     "cypress-localstorage-commands": "^2.2.3",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
diff --git a/src/CAREUI/display/RecordMeta.tsx b/src/CAREUI/display/RecordMeta.tsx
index 48cc8d370ad..944ddf27c8f 100644
--- a/src/CAREUI/display/RecordMeta.tsx
+++ b/src/CAREUI/display/RecordMeta.tsx
@@ -1,5 +1,10 @@
 import CareIcon from "../icons/CareIcon";
-import { formatDateTime, isUserOnline, relativeTime } from "../../Utils/utils";
+import {
+  formatDateTime,
+  formatName,
+  isUserOnline,
+  relativeTime,
+} from "../../Utils/utils";
 import { ReactNode } from "react";
 
 interface Props {
@@ -30,7 +35,7 @@ const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
           <span className="flex items-center gap-1">
             by
             <CareIcon className="care-l-user" />
-            {user.first_name} {user.last_name}
+            {formatName(user)}
             {isOnline && (
               <div className="h-1.5 w-1.5 rounded-full bg-primary-400" />
             )}
@@ -48,9 +53,7 @@ const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
         {user && inlineUser && <span>by</span>}
         {user && <CareIcon className="care-l-user" />}
         {user && inlineUser && (
-          <span className="font-medium">
-            {user.first_name} {user.last_name}
-          </span>
+          <span className="font-medium">{formatName(user)}</span>
         )}
       </div>
     );
diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
new file mode 100644
index 00000000000..7549fbfd69f
--- /dev/null
+++ b/src/CAREUI/display/Timeline.tsx
@@ -0,0 +1,158 @@
+import { createContext, useContext } from "react";
+import { PerformedByModel } from "../../Components/HCX/misc";
+import { classNames, formatName } from "../../Utils/utils";
+import CareIcon, { IconName } from "../icons/CareIcon";
+import RecordMeta from "./RecordMeta";
+
+export interface TimelineEvent<TType = string> {
+  type: TType;
+  timestamp: string;
+  by: PerformedByModel | undefined;
+  icon: IconName;
+  notes?: string;
+  cancelled?: boolean;
+}
+
+interface TimelineProps {
+  className: string;
+  children: React.ReactNode | React.ReactNode[];
+  name: string;
+}
+
+const TimelineContext = createContext("");
+
+export default function Timeline({ className, children, name }: TimelineProps) {
+  return (
+    <div className={className}>
+      <ol role="list" className="space-y-6">
+        <TimelineContext.Provider value={name}>
+          {children}
+        </TimelineContext.Provider>
+      </ol>
+    </div>
+  );
+}
+
+interface TimelineNodeProps {
+  event: TimelineEvent;
+  title?: React.ReactNode;
+  /**
+   * Used to add a suffix to the auto-generated title. Will be ignored if `title` is provided.
+   */
+  titleSuffix?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+  name?: string;
+  isLast: boolean;
+}
+
+export const TimelineNode = (props: TimelineNodeProps) => {
+  const name = useContext(TimelineContext);
+
+  return (
+    <li className="relative flex gap-x-4">
+      <div
+        className={classNames(
+          props.isLast ? "h-6" : "-bottom-6",
+          "absolute left-0 top-0 flex w-6 justify-center"
+        )}
+      >
+        <div className="w-px bg-gray-300" />
+      </div>
+
+      <div
+        className={classNames(
+          props.className,
+          "group flex w-full flex-col items-start gap-y-1"
+        )}
+      >
+        <div className="relative flex w-full justify-between gap-x-4">
+          <div
+            className={classNames(
+              "flex w-full gap-x-4",
+              props.event.cancelled && "line-through"
+            )}
+          >
+            {props.title || (
+              <TimelineNodeTitle event={props.event}>
+                <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600">
+                  {props.event.by && (
+                    <span className="font-medium text-gray-900">
+                      {formatName(props.event.by)}{" "}
+                    </span>
+                  )}
+                  {props.titleSuffix
+                    ? props.titleSuffix
+                    : `${props.event.type} the ${props.name || name}.`}
+                </p>
+                {props.actions && (
+                  <TimelineNodeActions>{props.actions}</TimelineNodeActions>
+                )}
+                <RecordMeta
+                  className="flex-none py-0.5 text-xs leading-5 text-gray-500"
+                  time={props.event.timestamp}
+                />
+              </TimelineNodeTitle>
+            )}
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col items-start gap-y-2 pl-10">
+          <TimelineNodeNotes>{props.event.notes}</TimelineNodeNotes>
+          {props.children}
+        </div>
+      </div>
+    </li>
+  );
+};
+
+interface TimelineNodeTitleProps {
+  children: React.ReactNode | React.ReactNode[];
+  event: TimelineEvent;
+}
+
+export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => {
+  return (
+    <>
+      <div className="relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500">
+        <CareIcon
+          className="text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white"
+          aria-hidden="true"
+          icon={props.event.icon}
+        />
+      </div>
+
+      <div className="flex w-full flex-wrap justify-between gap-2">
+        {props.children}
+      </div>
+    </>
+  );
+};
+
+export const TimelineNodeActions = (props: {
+  children: React.ReactNode | React.ReactNode[];
+}) => {
+  return <div className="flex justify-end gap-2">{props.children}</div>;
+};
+
+interface TimelineNodeNotesProps {
+  children?: React.ReactNode | React.ReactNode[];
+  icon?: IconName;
+}
+
+export const TimelineNodeNotes = ({
+  children,
+  icon = "l-notes",
+}: TimelineNodeNotesProps) => {
+  if (!children) {
+    return;
+  }
+
+  return (
+    <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200">
+      <CareIcon icon={icon} className="text-lg text-gray-700" />
+      <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div>
+    </div>
+  );
+};
diff --git a/src/CAREUI/interactive/ScrollOverlay.tsx b/src/CAREUI/interactive/ScrollOverlay.tsx
new file mode 100644
index 00000000000..c49f7223149
--- /dev/null
+++ b/src/CAREUI/interactive/ScrollOverlay.tsx
@@ -0,0 +1,30 @@
+import useVisibility from "../../Utils/useVisibility";
+import { classNames } from "../../Utils/utils";
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  overlay: React.ReactNode;
+  disableOverlay?: boolean;
+}
+
+export default function ScrollOverlay(props: Props) {
+  const [bottomIsVisible, ref] = useVisibility();
+  const hasScrollContent = !props.disableOverlay && !bottomIsVisible;
+
+  return (
+    <div className={classNames("relative", props.className)}>
+      {props.children}
+
+      <div ref={ref as any} />
+      <div
+        className={classNames(
+          "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0",
+          hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0"
+        )}
+      >
+        {hasScrollContent && props.overlay}
+      </div>
+    </div>
+  );
+}
diff --git a/src/CAREUI/interactive/SlideOver.tsx b/src/CAREUI/interactive/SlideOver.tsx
index 34e1c615f94..9fae2588fca 100644
--- a/src/CAREUI/interactive/SlideOver.tsx
+++ b/src/CAREUI/interactive/SlideOver.tsx
@@ -61,7 +61,7 @@ export default function SlideOver({
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className="relative z-30"
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onClose={closeOnBackdropClick ? setOpen : () => {}}
       >
diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
index 3521807154e..0d2445ffbc9 100644
--- a/src/CAREUI/misc/PaginatedList.tsx
+++ b/src/CAREUI/misc/PaginatedList.tsx
@@ -33,7 +33,10 @@ function useContextualized<TItem>() {
 interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
   route: QueryRoute<PaginatedResponse<TItem>>;
   perPage?: number;
-  children: (ctx: PaginatedListContext<TItem>) => JSX.Element | JSX.Element[];
+  children: (
+    ctx: PaginatedListContext<TItem>,
+    query: ReturnType<typeof useQuery<PaginatedResponse<TItem>>>
+  ) => JSX.Element | JSX.Element[];
 }
 
 export default function PaginatedList<TItem extends object>({
@@ -59,7 +62,7 @@ export default function PaginatedList<TItem extends object>({
       value={{ ...query, items, perPage, currentPage, setPage }}
     >
       <context.Consumer>
-        {(ctx) => children(ctx as PaginatedListContext<TItem>)}
+        {(ctx) => children(ctx as PaginatedListContext<TItem>, query)}
       </context.Consumer>
     </context.Provider>
   );
diff --git a/src/Common/hooks/useMSEplayer.ts b/src/Common/hooks/useMSEplayer.ts
index fcbf216ed6a..4d1bb36b9ac 100644
--- a/src/Common/hooks/useMSEplayer.ts
+++ b/src/Common/hooks/useMSEplayer.ts
@@ -20,6 +20,8 @@ interface UseMSEMediaPlayerOption {
 export interface ICameraAssetState {
   id: string;
   accessKey: string;
+  middleware_address: string;
+  location_middleware: string;
 }
 
 export enum StreamStatus {
diff --git a/src/Common/hooks/useSlug.ts b/src/Common/hooks/useSlug.ts
index 69d8f591c84..8885a074678 100644
--- a/src/Common/hooks/useSlug.ts
+++ b/src/Common/hooks/useSlug.ts
@@ -8,9 +8,9 @@ import { usePath } from "raviger";
  * // Current path: /consultation/94b9a
  * const consultation = useSlug("consultation"); // consultation = "94b9a"
  */
-export default function useSlug(prefix: string) {
+export default function useSlug(prefix: string, fallback?: string) {
   const path = usePath() ?? "";
-  return findSlug(path.split("/"), prefix);
+  return findSlug(path.split("/"), prefix, fallback);
 }
 
 /**
@@ -28,7 +28,7 @@ export const useSlugs = (...prefix: string[]) => {
   return prefix.map((p) => findSlug(path.split("/"), p));
 };
 
-const findSlug = (segments: string[], prefix: string) => {
+const findSlug = (segments: string[], prefix: string, fallback?: string) => {
   const index = segments.findIndex((segment) => segment === prefix);
   if (index === -1) {
     throw new Error(
@@ -36,8 +36,8 @@ const findSlug = (segments: string[], prefix: string) => {
     );
   }
 
-  const slug = segments[index + 1];
-  if (!slug) {
+  const slug = segments[index + 1] ?? fallback;
+  if (slug === undefined) {
     throw new Error(`Slug not found in path "${segments.join("/")}"`);
   }
 
diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
index 4a3e475419e..44d4d372d73 100644
--- a/src/Components/Assets/AssetType/ONVIFCamera.tsx
+++ b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -53,6 +53,11 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
     }
   }, [facility, facilityId]);
 
+  const fallbackMiddleware =
+    asset?.location_object?.middleware_address || facilityMiddlewareHostname;
+
+  const currentMiddleware = middlewareHostname || fallbackMiddleware;
+
   useEffect(() => {
     if (asset) {
       setAssetType(asset?.asset_class);
@@ -105,7 +110,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
     try {
       setLoadingAddPreset(true);
       const presetData = await axios.get(
-        `https://${facilityMiddlewareHostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`
+        `https://${currentMiddleware}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`
       );
 
       const { res } = await request(routes.createAssetBed, {
@@ -136,9 +141,6 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   };
   if (isLoading || loading || !facility) return <Loading />;
 
-  const fallbackMiddleware =
-    asset?.location_object?.middleware_address || facilityMiddlewareHostname;
-
   return (
     <div className="space-y-6">
       {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
@@ -223,7 +225,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
           addPreset={addPreset}
           isLoading={loadingAddPreset}
           refreshPresetsHash={refreshPresetsHash}
-          facilityMiddlewareHostname={facilityMiddlewareHostname}
+          facilityMiddlewareHostname={currentMiddleware}
         />
       ) : null}
     </div>
diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index 593afdb137c..8c19928fbee 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -65,7 +65,7 @@ const AssetsList = () => {
     status: qParams.status || "",
   };
 
-  useQuery(routes.listAssets, {
+  const { loading } = useQuery(routes.listAssets, {
     query: params,
     onResponse: ({ res, data }) => {
       if (res?.status === 200 && data) {
@@ -176,7 +176,13 @@ const AssetsList = () => {
     );
 
   let manageAssets = null;
-  if (assetsExist) {
+  if (loading) {
+    manageAssets = (
+      <div className="col-span-3 w-full py-8 text-center">
+        <Loading />
+      </div>
+    );
+  } else if (assetsExist) {
     manageAssets = (
       <div className="grid grid-cols-1 gap-2 md:-mx-8 md:grid-cols-2 lg:grid-cols-3">
         {assets.map((asset: AssetData) => (
@@ -309,7 +315,7 @@ const AssetsList = () => {
         <CountBlock
           text="Total Assets"
           count={totalCount}
-          loading={isLoading}
+          loading={loading}
           icon="l-monitor-heart-rate"
           className="flex-1"
         />
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
index 140a0013fd9..58472c4ff25 100644
--- a/src/Components/Auth/Login.tsx
+++ b/src/Components/Auth/Login.tsx
@@ -12,6 +12,7 @@ import CircularProgress from "../Common/components/CircularProgress";
 import { LocalStorageKeys } from "../../Common/constants";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
+import { handleRedirection } from "../../Utils/utils";
 
 export const Login = (props: { forgot?: boolean }) => {
   const {
@@ -109,7 +110,7 @@ export const Login = (props: { forgot?: boolean }) => {
           window.location.pathname === "/" ||
           window.location.pathname === "/login"
         ) {
-          window.location.href = "/facility";
+          handleRedirection();
         } else {
           window.location.href = window.location.pathname.toString();
         }
diff --git a/src/Components/Common/DiagnosisSelectFormField.tsx b/src/Components/Common/DiagnosisSelectFormField.tsx
deleted file mode 100644
index 4086664d4ba..00000000000
--- a/src/Components/Common/DiagnosisSelectFormField.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
-import { listICD11Diagnosis } from "../../Redux/actions";
-import { ICD11DiagnosisModel } from "../Facility/models";
-import { AutocompleteMutliSelect } from "../Form/FormFields/AutocompleteMultiselect";
-import FormField from "../Form/FormFields/FormField";
-import {
-  FormFieldBaseProps,
-  useFormFieldPropsResolver,
-} from "../Form/FormFields/Utils";
-
-type Props =
-  // | ({ multiple?: false | undefined } & FormFieldBaseProps<ICD11DiagnosisModel>) // uncomment when single select form field is required and implemented.
-  { multiple: true } & FormFieldBaseProps<ICD11DiagnosisModel[]>;
-
-export function DiagnosisSelectFormField(props: Props) {
-  const field = useFormFieldPropsResolver(props);
-  const { fetchOptions, isLoading, options } =
-    useAsyncOptions<ICD11DiagnosisModel>("id");
-
-  if (!props.multiple) {
-    return (
-      <div className="bg-danger-500 font-bold text-white">
-        Component not implemented
-      </div>
-    );
-  }
-
-  return (
-    <FormField field={field}>
-      <AutocompleteMutliSelect
-        id={field.id}
-        disabled={field.disabled}
-        value={field.value || []}
-        onChange={field.handleChange}
-        options={options(props.value)}
-        optionLabel={(option) => option.label}
-        optionValue={(option) => option}
-        onQuery={(query) =>
-          fetchOptions(listICD11Diagnosis({ query }, field.id || ""))
-        }
-        isLoading={isLoading}
-      />
-    </FormField>
-  );
-}
diff --git a/src/Components/Common/Dialog.tsx b/src/Components/Common/Dialog.tsx
index ffe17606de2..c1dcf5afb70 100644
--- a/src/Components/Common/Dialog.tsx
+++ b/src/Components/Common/Dialog.tsx
@@ -26,7 +26,7 @@ const DialogModal = (props: DialogProps) => {
   return (
     <div>
       <Transition appear show={show} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={onClose}>
+        <Dialog as="div" className="relative z-30" onClose={onClose}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
diff --git a/src/Components/Common/FacilitySelect.tsx b/src/Components/Common/FacilitySelect.tsx
index 400ce115bc5..1aabc36013b 100644
--- a/src/Components/Common/FacilitySelect.tsx
+++ b/src/Components/Common/FacilitySelect.tsx
@@ -6,6 +6,7 @@ import { FacilityModel } from "../Facility/models";
 
 interface FacilitySelectProps {
   name: string;
+  exclude_user?: string;
   errors?: string | undefined;
   className?: string;
   searchAll?: boolean;
@@ -22,6 +23,7 @@ interface FacilitySelectProps {
 export const FacilitySelect = (props: FacilitySelectProps) => {
   const {
     name,
+    exclude_user,
     multiple,
     selected,
     setSelected,
@@ -45,6 +47,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
         search_text: text,
         all: searchAll,
         facility_type: facilityType,
+        exclude_user: exclude_user,
         district,
       };
 
diff --git a/src/Components/Common/LocationSelect.tsx b/src/Components/Common/LocationSelect.tsx
index a4ad5f284ea..ef7280f1907 100644
--- a/src/Components/Common/LocationSelect.tsx
+++ b/src/Components/Common/LocationSelect.tsx
@@ -5,6 +5,7 @@ import AutocompleteFormField from "../Form/FormFields/Autocomplete";
 import AutocompleteMultiSelectFormField from "../Form/FormFields/AutocompleteMultiselect";
 interface LocationSelectProps {
   name: string;
+  disabled?: boolean;
   margin?: string;
   errors: string;
   className?: string;
@@ -26,6 +27,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
     errors,
     className = "",
     facilityId,
+    disabled = false,
   } = props;
   const [locations, setLocations] = useState<{ name: string; id: string }[]>(
     []
@@ -40,6 +42,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
   };
 
   useEffect(() => {
+    if (!facilityId) return;
     const params = {
       limit: 14,
       search_text: query,
@@ -56,6 +59,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
   return props.multiple ? (
     <AutocompleteMultiSelectFormField
       name={name}
+      disabled={disabled}
       value={selected as unknown as string[]}
       options={locations}
       onChange={({ value }) => handleValueChange(value as unknown as string[])}
@@ -72,6 +76,7 @@ export const LocationSelect = (props: LocationSelectProps) => {
   ) : (
     <AutocompleteFormField
       name={name}
+      disabled={disabled}
       value={selected as string}
       options={locations}
       onChange={({ value }) => handleValueChange([value])}
diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx
index b4f5155e676..10b5c6d04fa 100644
--- a/src/Components/Common/Sidebar/Sidebar.tsx
+++ b/src/Components/Common/Sidebar/Sidebar.tsx
@@ -116,7 +116,7 @@ const StatelessSidebar = ({
 
   return (
     <nav
-      className={`group flex h-screen flex-col bg-primary-800 py-3 md:py-5 ${
+      className={`group flex h-full flex-col bg-primary-800 py-3 md:py-5 ${
         shrinked ? "w-14" : "w-60"
       } transition-all duration-300 ease-in-out ${
         isOverflowVisible && shrinked
@@ -134,7 +134,7 @@ const StatelessSidebar = ({
         />
       </Link>
       <div className="h-3" /> {/* flexible spacing */}
-      <div className="relative mb-4 flex h-full flex-col md:mb-0">
+      <div className="relative flex h-full flex-col">
         <div className="relative flex flex-1 flex-col md:flex-none">
           <div
             ref={indicatorRef}
diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
index 6f243d430d0..59970e8a73c 100644
--- a/src/Components/Common/Sidebar/SidebarUserCard.tsx
+++ b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -37,6 +37,7 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
           <Link
             href="/user/profile"
             className="flex-nowrap overflow-hidden break-words font-semibold text-white"
+            id="profilenamelink"
           >
             {profileName}
           </Link>
diff --git a/src/Components/Common/SkillSelect.tsx b/src/Components/Common/SkillSelect.tsx
index 5ec97974879..3257971d03c 100644
--- a/src/Components/Common/SkillSelect.tsx
+++ b/src/Components/Common/SkillSelect.tsx
@@ -5,6 +5,7 @@ import AutoCompleteAsync from "../Form/AutoCompleteAsync";
 import { SkillObjectModel } from "../Users/models";
 
 interface SkillSelectProps {
+  id?: string;
   name: string;
   errors?: string | undefined;
   className?: string;
@@ -20,6 +21,7 @@ interface SkillSelectProps {
 
 export const SkillSelect = (props: SkillSelectProps) => {
   const {
+    id,
     name,
     multiple,
     selected,
@@ -64,6 +66,7 @@ export const SkillSelect = (props: SkillSelectProps) => {
 
   return (
     <AutoCompleteAsync
+      id={id}
       name={name}
       multiple={multiple}
       selected={selected}
diff --git a/src/Components/Common/components/Menu.tsx b/src/Components/Common/components/Menu.tsx
index 49ee02b393e..3292031eebb 100644
--- a/src/Components/Common/components/Menu.tsx
+++ b/src/Components/Common/components/Menu.tsx
@@ -1,6 +1,6 @@
 import { Anyone, AuthorizedElementProps } from "../../../Utils/AuthorizeFor";
 
-import { ButtonVariant } from "./ButtonV2";
+import { ButtonSize, ButtonVariant } from "./ButtonV2";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { DropdownTransition } from "./HelperComponents";
 import { Menu } from "@headlessui/react";
@@ -12,6 +12,7 @@ interface DropdownMenuProps {
   id?: string;
   title: string;
   variant?: ButtonVariant;
+  size?: ButtonSize;
   icon?: JSX.Element | undefined;
   children: JSX.Element | JSX.Element[];
   disabled?: boolean | undefined;
@@ -21,6 +22,7 @@ interface DropdownMenuProps {
 
 export default function DropdownMenu({
   variant = "primary",
+  size = "default",
   ...props
 }: DropdownMenuProps) {
   return (
@@ -28,13 +30,21 @@ export default function DropdownMenu({
       <Menu as="div" className="relative inline-block w-full text-left">
         <Menu.Button
           disabled={props.disabled}
-          className={`button-size-default button-${variant}-default  button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500 lg:justify-between ${props.className}`}
+          className={`button-size-${size} button-${variant}-default  button-shape-square flex w-full cursor-pointer items-center justify-center gap-2 font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-500 lg:justify-between ${props.className}`}
         >
-          <div className="flex h-6 items-center gap-2">
+          <div
+            className={classNames(
+              "flex items-center gap-2 whitespace-nowrap",
+              size === "small" ? "h-5" : "h-6"
+            )}
+          >
             {props.icon}
             {props.title || "Dropdown"}
           </div>
-          <CareIcon className="care-l-angle-down -mr-1 ml-2 text-lg" />
+          <CareIcon
+            icon="l-angle-down"
+            className={size === "small" ? "text-base" : "text-lg"}
+          />
         </Menu.Button>
         <DropdownTransition>
           <Menu.Items
diff --git a/src/Components/Common/components/SelectMenu.tsx b/src/Components/Common/components/SelectMenu.tsx
deleted file mode 100644
index 658c23cda25..00000000000
--- a/src/Components/Common/components/SelectMenu.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Fragment } from "react";
-import { Listbox, Transition } from "@headlessui/react";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
-
-type Props<T> = {
-  options: {
-    title: string;
-    description?: string;
-    value: T;
-  }[];
-  onSelect: (value: T) => void;
-  selected?: T;
-  label?: string;
-  position?: string;
-  parentRelative?: boolean;
-};
-
-/** Deprecated. Use SelectMenuV2. */
-export default function SelectMenu<T>(props: Props<T>) {
-  const options = props.options.map((option) => {
-    return {
-      ...option,
-      current: option.value === props.selected,
-    };
-  });
-
-  const selected = options.find((option) => option.current) || options[0];
-
-  return (
-    <Listbox
-      value={selected}
-      onChange={(selection) => {
-        props.onSelect(selection.value);
-      }}
-    >
-      {({ open }) => (
-        <>
-          <Listbox.Label className="sr-only">{props.label}</Listbox.Label>
-          <div
-            className={
-              props.parentRelative || props.parentRelative === undefined
-                ? "relative"
-                : ""
-            }
-          >
-            <Listbox.Button className="flex w-full rounded border border-gray-400 bg-gray-50 shadow-sm ring-gray-400 transition-all duration-200 ease-in-out hover:bg-gray-200 focus:border-primary-500 focus:ring-1 focus:ring-primary-500">
-              <div className="relative z-0 flex w-full">
-                <div className="relative flex flex-1 items-center rounded-l border border-transparent py-2 pl-3 pr-4 focus:z-10 focus:outline-none">
-                  {selected.value && (
-                    <CareIcon className="care-l-check h-5 w-5" />
-                  )}
-                  <p className="ml-2.5 text-sm font-medium">{selected.title}</p>
-                </div>
-                <div className="items-center rounded-r p-2 text-sm font-medium focus:z-10 focus:outline-none">
-                  <CareIcon className="care-l-angle-down h-5 w-5" />
-                </div>
-              </div>
-            </Listbox.Button>
-
-            <Transition
-              show={open}
-              as={Fragment}
-              leave="transition ease-in duration-200"
-              enter="transition ease-out duration-100"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options
-                className={`absolute z-10 max-h-96 w-auto origin-top-right divide-y divide-gray-300 overflow-auto rounded-md bg-gray-100 shadow-lg ring-1 ring-gray-400 focus:outline-none lg:w-72 ${
-                  props.position ? "md:left-auto md:right-0" : "left-0"
-                }`}
-              >
-                {options.map((option) => (
-                  <Listbox.Option
-                    key={option.title}
-                    className={({ active }) =>
-                      `relative cursor-default select-none p-4 text-sm transition-all duration-100 ease-in-out ${
-                        active ? "bg-primary-500 text-white" : "text-gray-900"
-                      }`
-                    }
-                    value={option}
-                  >
-                    {({ selected, active }) => (
-                      <div className="flex flex-col">
-                        <div className="flex justify-between">
-                          <p
-                            className={
-                              selected ? "font-semibold" : "font-normal"
-                            }
-                          >
-                            {option.title}
-                          </p>
-                          {selected ? (
-                            <span
-                              className={`transition-all duration-100 ease-in-out ${
-                                active ? "text-white" : "text-primary-500"
-                              }`}
-                            >
-                              <CareIcon className="care-l-check h-5 w-5 text-xl" />
-                            </span>
-                          ) : null}
-                        </div>
-                        {option.description && (
-                          <p
-                            className={`mt-2 ${
-                              active ? "text-primary-200" : "text-gray-500"
-                            }`}
-                          >
-                            {option.description}
-                          </p>
-                        )}
-                      </div>
-                    )}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </div>
-        </>
-      )}
-    </Listbox>
-  );
-}
diff --git a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
index 63be6d2f3a4..eb4fd2b2376 100644
--- a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
+++ b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
@@ -31,7 +31,6 @@ let make = (
     None
   }, [state])
 
-
   let handleClickOutside = %raw(`
     function (event, ref, hideModal) {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -56,18 +55,18 @@ let make = (
     }
   })
 
-let getStatus = (min, minText, max, maxText, val) => {
-  switch (val >= min, val <= max) {
-  | (true, true) => ("Normal", "#059669")
-  | (true, false) => (maxText, "#DC2626")
-  | _ => (minText, "#DC2626")
+  let getStatus = (min, minText, max, maxText, val) => {
+    switch (val >= min, val <= max) {
+    | (true, true) => ("Normal", "#059669")
+    | (true, false) => (maxText, "#DC2626")
+    | _ => (minText, "#DC2626")
+    }
   }
-}
 
   <div
     hidden={!show}
     onClick={e => handleClickOutside(e, modalRef, hideModal)}
-    className={previewMode && innerWidth > 720 ? "" : "fixed w-full inset-0 z-40 overflow-y-auto"}>
+    className="absolute w-full inset-0 z-40 overflow-y-auto">
     <div
       hidden={!show}
       className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@@ -85,9 +84,7 @@ let getStatus = (min, minText, max, maxText, val) => {
             <div className="mt-3 text-center sm:mt-0 sm:text-left">
               <div className="flex gap-2 justify-center">
                 <span> {str("Region: ")} </span>
-                <span className="text-black">
-                  {str(Pain.regionToString(state.region))}
-                </span>
+                <span className="text-black"> {str(Pain.regionToString(state.region))} </span>
               </div>
               <div className="flex flex-col sm:flex-row justify-center mt-2">
                 <div className="w-full">
@@ -108,7 +105,11 @@ let getStatus = (min, minText, max, maxText, val) => {
                       }
                     }}
                     getLabel={getStatus(2.0, "Low", 4.0, "High")}
-                    hasError={ValidationUtils.isInputInRangeInt(0, 5, Belt.Float.toString(painScale)->Belt.Int.fromString)}
+                    hasError={ValidationUtils.isInputInRangeInt(
+                      0,
+                      5,
+                      Belt.Float.toString(painScale)->Belt.Int.fromString,
+                    )}
                   />
                   <div className="mt-2">
                     <label className="block font-medium text-black text-left mb-1">
diff --git a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
index 4ced109cdb4..ecf05dde7bb 100644
--- a/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
+++ b/src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
@@ -76,7 +76,7 @@ let make = (
   <div
     hidden={!show}
     onClick={e => handleClickOutside(e, modalRef, hideModal)}
-    className={previewMode && innerWidth > 720 ? "" : "fixed w-full inset-0 z-40 overflow-y-auto"}>
+    className="absolute w-full inset-0 z-40 overflow-y-auto">
     <div
       hidden={!show}
       className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@@ -207,4 +207,4 @@ let make = (
       </div>
     </div>
   </div>
-}
\ No newline at end of file
+}
diff --git a/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx b/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
new file mode 100644
index 00000000000..9f80d47f232
--- /dev/null
+++ b/src/Components/Diagnosis/ConditionVerificationStatusMenu.tsx
@@ -0,0 +1,121 @@
+import { useTranslation } from "react-i18next";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import DropdownMenu, { DropdownItem } from "../Common/components/Menu";
+import {
+  ConditionVerificationStatus,
+  InactiveConditionVerificationStatuses,
+} from "./types";
+import { classNames } from "../../Utils/utils";
+import { ButtonSize } from "../Common/components/ButtonV2";
+
+interface Props<T extends ConditionVerificationStatus> {
+  disabled?: boolean;
+  value?: T;
+  placeholder?: string;
+  options: readonly T[];
+  onSelect: (option: T) => void;
+  onRemove?: () => void;
+  className?: string;
+  size?: ButtonSize;
+}
+
+export default function ConditionVerificationStatusMenu<
+  T extends ConditionVerificationStatus
+>(props: Props<T>) {
+  const { t } = useTranslation();
+
+  return (
+    <DropdownMenu
+      size={props.size ?? "small"}
+      className={classNames(
+        props.className,
+        props.value && StatusStyle[props.value].colors,
+        props.value && "border !border-gray-400 bg-white hover:bg-gray-300"
+      )}
+      id="condition-verification-status-menu"
+      title={props.value ? t(props.value) : props.placeholder ?? t("add_as")}
+      disabled={props.disabled}
+      variant={props.value ? StatusStyle[props.value].variant : "primary"}
+    >
+      <>
+        {props.options.map((status) => (
+          <DropdownItem
+            key={status}
+            id={`add-icd11-diagnosis-as-${status}`}
+            variant={StatusStyle[status].variant}
+            onClick={() => props.onSelect(status)}
+            icon={
+              <CareIcon
+                icon="l-coronavirus"
+                className={classNames(
+                  "hidden text-lg transition-all duration-200 ease-in-out group-hover:rotate-90 group-hover:text-inherit md:block",
+                  props.value === status ? "text-inherit-500" : "text-gray-500"
+                )}
+              />
+            }
+            className="group"
+            disabled={props.value === status}
+          >
+            <div className="flex w-full max-w-xs flex-col items-start gap-1 whitespace-nowrap md:whitespace-normal">
+              <span className={props.value === status ? "font-medium" : ""}>
+                {InactiveConditionVerificationStatuses.includes(
+                  status as (typeof InactiveConditionVerificationStatuses)[number]
+                )
+                  ? "Remove as "
+                  : ""}
+                {t(status)}
+              </span>
+              <span className="hidden text-xs text-gray-600 md:block">
+                {t(`help_${status}`)}
+              </span>
+            </div>
+          </DropdownItem>
+        ))}
+
+        {props.value && props.onRemove && (
+          <DropdownItem
+            variant="danger"
+            id="remove-diagnosis"
+            onClick={() => props.onRemove?.()}
+            icon={<CareIcon icon="l-trash-alt" className="text-lg" />}
+          >
+            {t("remove")}
+          </DropdownItem>
+        )}
+      </>
+    </DropdownMenu>
+  );
+}
+
+export const StatusStyle = {
+  unconfirmed: {
+    variant: "warning",
+    // icon: "l-question",
+    colors: "text-yellow-500 border-yellow-500",
+  },
+  provisional: {
+    variant: "warning",
+    // icon: "l-question",
+    colors: "text-secondary-800 border-secondary-800",
+  },
+  differential: {
+    variant: "warning",
+    // icon: "l-question",
+    colors: "text-secondary-800 border-secondary-800",
+  },
+  confirmed: {
+    variant: "primary",
+    // icon: "l-check",
+    colors: "text-primary-500 border-primary-500",
+  },
+  refuted: {
+    variant: "danger",
+    icon: "l-times",
+    colors: "text-danger-500 border-danger-500",
+  },
+  "entered-in-error": {
+    variant: "danger",
+    // icon: "l-ban",
+    colors: "text-danger-500 border-danger-500",
+  },
+} as const;
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx
new file mode 100644
index 00000000000..4cf55a82b13
--- /dev/null
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import AutocompleteFormField from "../../Form/FormFields/Autocomplete";
+import {
+  ActiveConditionVerificationStatuses,
+  CreateDiagnosis,
+  ICD11DiagnosisModel,
+} from "../types";
+import { useAsyncOptions } from "../../../Common/hooks/useAsyncOptions";
+import { listICD11Diagnosis } from "../../../Redux/actions";
+import ConditionVerificationStatusMenu from "../ConditionVerificationStatusMenu";
+import { classNames } from "../../../Utils/utils";
+
+interface AddICD11DiagnosisProps {
+  className?: string;
+  onAdd: (object: CreateDiagnosis) => Promise<boolean>;
+  disallowed: ICD11DiagnosisModel[];
+  disabled?: boolean;
+}
+
+export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState<ICD11DiagnosisModel>();
+  const [adding, setAdding] = useState(false);
+  const hasError = !!props.disallowed.find((d) => d.id === selected?.id);
+
+  const { fetchOptions, isLoading, options } =
+    useAsyncOptions<ICD11DiagnosisModel>("id");
+
+  const handleAdd = async (status: CreateDiagnosis["verification_status"]) => {
+    if (!selected) return;
+
+    setAdding(true);
+    const added = await props.onAdd({
+      diagnosis_object: selected,
+      diagnosis: selected.id,
+      verification_status: status,
+      is_principal: false,
+    });
+    setAdding(false);
+
+    if (added) {
+      setSelected(undefined);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(props.className, "flex w-full items-start gap-2")}
+    >
+      <AutocompleteFormField
+        id="icd11-search"
+        name="icd11_search"
+        className="w-full"
+        disabled={props.disabled || adding}
+        placeholder={t("search_icd11_placeholder")}
+        value={selected}
+        onChange={(e) => setSelected(e.value)}
+        options={options(selected ? [selected] : undefined)}
+        optionLabel={(option) => option.label}
+        optionValue={(option) => option}
+        onQuery={(query) => fetchOptions(listICD11Diagnosis({ query }))}
+        isLoading={isLoading}
+        error={hasError ? t("diagnosis_already_added") : undefined}
+      />
+      <ConditionVerificationStatusMenu
+        className="mt-0.5"
+        disabled={props.disabled || !selected || hasError || adding}
+        options={ActiveConditionVerificationStatuses}
+        onSelect={(status) => handleAdd(status)}
+        size="default"
+      />
+    </div>
+  );
+}
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
new file mode 100644
index 00000000000..04a3eb24e18
--- /dev/null
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
@@ -0,0 +1,193 @@
+import { useState } from "react";
+import useSlug from "../../../Common/hooks/useSlug";
+import {
+  ConsultationDiagnosis,
+  CreateDiagnosis,
+  ICD11DiagnosisModel,
+} from "../types";
+import AddICD11Diagnosis from "./AddICD11Diagnosis";
+import ConsultationDiagnosisEntry from "./ConsultationDiagnosisEntry";
+import request from "../../../Utils/request/request";
+import DiagnosesRoutes from "../routes";
+import * as Notification from "../../../Utils/Notifications";
+import PrincipalDiagnosisSelect from "./PrincipalDiagnosisSelect";
+
+interface CreateDiagnosesProps {
+  className?: string;
+  value: CreateDiagnosis[];
+  onChange: (diagnoses: CreateDiagnosis[]) => void;
+}
+
+export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
+  return (
+    <div className={props.className}>
+      <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+        <div className="flex w-full flex-col gap-2 p-4">
+          {props.value.map((diagnosis, index) => (
+            <ConsultationDiagnosisEntry
+              key={index}
+              value={diagnosis}
+              onChange={(action) => {
+                if (action.type === "remove") {
+                  props.onChange(props.value.toSpliced(index, 1));
+                }
+
+                if (action.type === "edit") {
+                  const diagnoses = [...props.value];
+                  diagnoses[index] = action.value as CreateDiagnosis;
+                  props.onChange(diagnoses);
+                }
+              }}
+            />
+          ))}
+        </div>
+
+        {props.value.length === 0 && <NoDiagnosisAdded />}
+
+        <div className="w-full rounded-b-lg bg-gray-200 px-4 pt-4">
+          <AddICD11Diagnosis
+            disallowed={props.value.map(
+              (obj) => obj.diagnosis_object as ICD11DiagnosisModel
+            )}
+            onAdd={async (diagnosis) => {
+              props.onChange([...props.value, diagnosis]);
+              return true;
+            }}
+          />
+        </div>
+      </div>
+
+      <PrincipalDiagnosisSelect
+        className="my-2"
+        diagnoses={props.value}
+        onChange={async (value) => {
+          props.onChange(
+            props.value.map((d) => ({
+              ...d,
+              is_principal:
+                d.diagnosis_object?.id === value?.diagnosis_object?.id,
+            }))
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+interface EditDiagnosesProps {
+  className?: string;
+  value: ConsultationDiagnosis[];
+}
+
+export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
+  const consultation = useSlug("consultation");
+  const [diagnoses, setDiagnoses] = useState(props.value);
+  return (
+    <div className={props.className}>
+      <div className="flex w-full flex-col items-start rounded-lg border border-gray-400">
+        <div className="flex w-full flex-col gap-2 p-4">
+          {diagnoses.map((diagnosis, index) => (
+            <ConsultationDiagnosisEntry
+              key={index}
+              value={diagnosis}
+              consultationId={consultation}
+              onChange={(action) => {
+                setDiagnoses(
+                  diagnoses.map((diagnose, i) =>
+                    i === index
+                      ? (action.value as ConsultationDiagnosis)
+                      : diagnose
+                  )
+                );
+              }}
+            />
+          ))}
+        </div>
+
+        {diagnoses.length === 0 && <NoDiagnosisAdded />}
+
+        <div className="w-full rounded-b-lg bg-gray-200 px-4 pt-4">
+          <AddICD11Diagnosis
+            disallowed={diagnoses.map(
+              (obj) => obj.diagnosis_object as ICD11DiagnosisModel
+            )}
+            onAdd={async (diagnosis) => {
+              const { res, data, error } = await request(
+                DiagnosesRoutes.createConsultationDiagnosis,
+                {
+                  pathParams: { consultation },
+                  body: diagnosis,
+                }
+              );
+
+              if (res?.ok && data) {
+                setDiagnoses([...diagnoses, data]);
+                return true;
+              }
+
+              if (error) {
+                Notification.Error({ msg: error });
+              }
+
+              return false;
+            }}
+          />
+        </div>
+      </div>
+
+      <PrincipalDiagnosisSelect
+        className="my-2"
+        diagnoses={diagnoses}
+        onChange={async (value) => {
+          // Unset existing principal diagnoses
+          await Promise.all(
+            diagnoses
+              .filter((d) => d.is_principal)
+              .map((d) => {
+                return request(DiagnosesRoutes.updateConsultationDiagnosis, {
+                  pathParams: { consultation, id: d.id },
+                  body: { ...d, is_principal: false },
+                });
+              })
+          );
+
+          if (!value) {
+            setDiagnoses((diagnoses) =>
+              diagnoses.map((d) => ({ ...d, is_principal: false }))
+            );
+            return;
+          }
+
+          // Set new principal diagnosis
+          const { res, data, error } = await request(
+            DiagnosesRoutes.updateConsultationDiagnosis,
+            {
+              pathParams: { consultation, id: value.id },
+              body: { ...value, is_principal: true },
+            }
+          );
+
+          if (res?.ok && data) {
+            setDiagnoses((diagnoses) =>
+              diagnoses.map((d) =>
+                d.id === data.id ? data : { ...d, is_principal: false }
+              )
+            );
+          }
+
+          if (error) {
+            Notification.Error({ msg: error });
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+const NoDiagnosisAdded = () => {
+  return (
+    <div className="flex w-full justify-center gap-2 pb-8 text-center text-gray-500">
+      Atleast one diagnosis must be added
+    </div>
+  );
+};
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
new file mode 100644
index 00000000000..a650358c518
--- /dev/null
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx
@@ -0,0 +1,120 @@
+import ConditionVerificationStatusMenu from "../ConditionVerificationStatusMenu";
+import {
+  ActiveConditionVerificationStatuses,
+  ConditionVerificationStatuses,
+  ConsultationDiagnosis,
+  CreateDiagnosis,
+} from "../types";
+import DiagnosesRoutes from "../routes";
+import { useState } from "react";
+import request from "../../../Utils/request/request";
+import { classNames } from "../../../Utils/utils";
+
+interface RemoveAction {
+  type: "remove";
+}
+
+interface EditAction {
+  type: "edit";
+  value: CreateDiagnosis | ConsultationDiagnosis;
+}
+
+interface BaseProps {
+  className?: string;
+}
+
+interface ConsultationCreateProps extends BaseProps {
+  consultationId?: undefined;
+  value: CreateDiagnosis;
+  onChange: (action: EditAction | RemoveAction) => void;
+}
+
+interface ConsultationEditProps extends BaseProps {
+  consultationId: string;
+  value: ConsultationDiagnosis;
+  onChange: (action: EditAction) => void;
+}
+
+type Props = ConsultationCreateProps | ConsultationEditProps;
+
+export default function ConsultationDiagnosisEntry(props: Props) {
+  const [disabled, setDisabled] = useState(false);
+
+  const handleUpdate = async (value: ConsultationDiagnosis) => {
+    setDisabled(true);
+    const { res, data } = await request(
+      DiagnosesRoutes.updateConsultationDiagnosis,
+      {
+        pathParams: {
+          consultation: props.consultationId as string,
+          id: value.id,
+        },
+        body: value,
+      }
+    );
+    setDisabled(false);
+
+    if (res?.ok && data) {
+      props.onChange({ type: "edit", value: data });
+    }
+  };
+
+  const object = props.value;
+  const isActive = ActiveConditionVerificationStatuses.includes(
+    object.verification_status as (typeof ActiveConditionVerificationStatuses)[number]
+  );
+
+  return (
+    <div
+      className={classNames(props.className, "flex w-full items-center gap-2")}
+    >
+      <div
+        className={classNames(
+          "cui-input-base relative flex w-full flex-col gap-2 md:flex-row",
+          object.is_principal && "border-primary-500"
+        )}
+      >
+        <span
+          className={classNames(
+            object.is_principal
+              ? "font-semibold text-primary-500"
+              : "font-normal",
+            !isActive && "text-gray-500 line-through"
+          )}
+        >
+          {object.diagnosis_object?.label}
+        </span>
+        <div className="flex items-center justify-end gap-2 sm:flex-row md:absolute md:inset-y-0 md:right-2 md:justify-normal">
+          <div className="w-32">
+            <ConditionVerificationStatusMenu
+              className="w-full"
+              value={object.verification_status}
+              disabled={disabled}
+              options={
+                props.consultationId === undefined
+                  ? ActiveConditionVerificationStatuses
+                  : ConditionVerificationStatuses
+              }
+              onSelect={async (verification_status) => {
+                const value = { ...object, verification_status };
+                if (props.consultationId) {
+                  await handleUpdate(value as ConsultationDiagnosis);
+                } else {
+                  props.onChange({
+                    type: "edit",
+                    value: value as CreateDiagnosis | ConsultationDiagnosis,
+                  });
+                }
+              }}
+              onRemove={
+                props.consultationId === undefined
+                  ? () => props.onChange({ type: "remove" })
+                  : undefined
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
new file mode 100644
index 00000000000..8018c6480ed
--- /dev/null
+++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+import {
+  ActiveConditionVerificationStatuses,
+  ConsultationDiagnosis,
+  CreateDiagnosis,
+} from "../types";
+import { SelectFormField } from "../../Form/FormFields/SelectFormField";
+
+type Option = CreateDiagnosis | ConsultationDiagnosis;
+
+interface Props<T extends Option> {
+  className?: string;
+  diagnoses: T[];
+  onChange: (value?: T) => Promise<void>;
+}
+
+const PrincipalDiagnosisSelect = <T extends Option>(props: Props<T>) => {
+  const [disabled, setDisabled] = useState(false);
+  const value = props.diagnoses.find((d) => d.is_principal);
+  const diagnosis = value?.diagnosis_object;
+
+  const options = props.diagnoses.some(isConfirmed)
+    ? props.diagnoses.filter(isConfirmedOrPrincipal)
+    : props.diagnoses.filter(isActive);
+
+  return (
+    <div className={props.className}>
+      <div className="rounded-lg border border-gray-400 bg-gray-200 p-4">
+        <SelectFormField
+          id="principal-diagnosis-select"
+          name="principal_diagnosis"
+          label="Principal Diagnosis"
+          value={JSON.stringify(value)}
+          disabled={disabled}
+          options={options}
+          optionLabel={(d) => d.diagnosis_object?.label}
+          optionDescription={(d) => (
+            <p>
+              Categorised under:{" "}
+              <span className="font-bold">{d.diagnosis_object?.chapter}</span>
+            </p>
+          )}
+          optionValue={(d) => JSON.stringify(d)} // TODO: momentary hack, figure out a better way to do this
+          onChange={async ({ value }) => {
+            setDisabled(true);
+            await props.onChange(value ? (JSON.parse(value) as T) : undefined);
+            setDisabled(false);
+          }}
+          errorClassName="hidden"
+        />
+        {diagnosis && (
+          <span className="mt-3 flex w-full flex-wrap justify-center gap-x-1 px-2 text-center text-gray-900">
+            <p>This encounter will be categorised under:</p>
+            <p className="font-bold">{diagnosis.chapter}</p>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PrincipalDiagnosisSelect;
+
+const isConfirmed = (d: Option) => d.verification_status === "confirmed";
+const isConfirmedOrPrincipal = (d: Option) => isConfirmed(d) || d.is_principal;
+const isActive = (d: Option) =>
+  ActiveConditionVerificationStatuses.includes(d.verification_status as any);
diff --git a/src/Components/Diagnosis/LegacyDiagnosesList.tsx b/src/Components/Diagnosis/LegacyDiagnosesList.tsx
new file mode 100644
index 00000000000..2a2ed7b9c3a
--- /dev/null
+++ b/src/Components/Diagnosis/LegacyDiagnosesList.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import {
+  ActiveConditionVerificationStatuses,
+  ConditionVerificationStatus,
+  ConsultationDiagnosis,
+} from "./types";
+import { useTranslation } from "react-i18next";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+
+interface Props {
+  diagnoses: ConsultationDiagnosis[];
+}
+
+type GroupedDiagnoses = Record<
+  ConditionVerificationStatus,
+  ConsultationDiagnosis[]
+>;
+
+function groupDiagnoses(diagnoses: ConsultationDiagnosis[]) {
+  const groupedDiagnoses = {} as GroupedDiagnoses;
+
+  for (const status of ActiveConditionVerificationStatuses) {
+    groupedDiagnoses[status] = diagnoses
+      .filter((d) => d.verification_status === status)
+      .sort((a, b) => Number(b.is_principal) - Number(a.is_principal));
+  }
+
+  return groupedDiagnoses;
+}
+
+export default function LegacyDiagnosesList(props: Props) {
+  const diagnoses = groupDiagnoses(props.diagnoses);
+
+  return (
+    <div className="flex flex-col items-start gap-2">
+      {Object.entries(diagnoses).map(
+        ([status, diagnoses]) =>
+          !!diagnoses.length && (
+            <DiagnosesOfStatus key={status} diagnoses={diagnoses} />
+          )
+      )}
+    </div>
+  );
+}
+
+const DefaultShowLimit = 3;
+
+const DiagnosesOfStatus = ({ diagnoses }: Props) => {
+  const { t } = useTranslation();
+  const [showMore, setShowMore] = useState(false);
+
+  const queryset = showMore ? diagnoses : diagnoses.slice(0, DefaultShowLimit);
+
+  return (
+    <div>
+      <h2 className="text-sm font-semibold">
+        {t(queryset[0].verification_status)} {t("diagnoses")}{" "}
+        <span>({t("icd11_as_recommended")})</span>
+      </h2>
+      <ul className="text-sm">
+        {queryset.map((diagnosis) => (
+          <li key={diagnosis.id} className="flex items-center gap-2">
+            <span>{diagnosis.diagnosis_object.label}</span>
+            {diagnosis.is_principal && (
+              <span className="flex items-start gap-0.5 rounded border border-primary-500 py-0.5 pl-1 pr-2 text-xs font-medium text-primary-500">
+                <CareIcon icon="l-check" className="text-base" />
+                {t("principal")}
+              </span>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      {diagnoses.length > DefaultShowLimit && (
+        <a
+          onClick={() => setShowMore(!showMore)}
+          className="cursor-pointer text-sm text-blue-600 hover:text-blue-300"
+        >
+          {showMore
+            ? t("hide")
+            : `... and ${diagnoses.length - queryset.length} more.`}
+        </a>
+      )}
+    </div>
+  );
+};
diff --git a/src/Components/Diagnosis/routes.ts b/src/Components/Diagnosis/routes.ts
new file mode 100644
index 00000000000..159999fac5f
--- /dev/null
+++ b/src/Components/Diagnosis/routes.ts
@@ -0,0 +1,37 @@
+import { Type } from "../../Redux/api";
+import { PaginatedResponse } from "../../Utils/request/types";
+import { ConsultationDiagnosis, CreateDiagnosis } from "./types";
+
+const DiagnosesRoutes = {
+  // ICD-11
+  searchICD11Diagnoses: {
+    path: "/api/v1/icd/",
+  },
+
+  // Consultation Diagnoses
+  listConsultationDiagnoses: {
+    path: "/api/v1/consultation/{consultation}/diagnoses/",
+    TRes: Type<PaginatedResponse<ConsultationDiagnosis>>(),
+  },
+
+  createConsultationDiagnosis: {
+    path: "/api/v1/consultation/{consultation}/diagnoses/",
+    method: "POST",
+    TBody: Type<CreateDiagnosis>(),
+    TRes: Type<ConsultationDiagnosis>(),
+  },
+
+  getConsultationDiagnosis: {
+    path: "/api/v1/consultation/{consultation}/diagnoses/{id}/",
+    TRes: Type<ConsultationDiagnosis>(),
+  },
+
+  updateConsultationDiagnosis: {
+    path: "/api/v1/consultation/{consultation}/diagnoses/{id}/",
+    method: "PATCH",
+    TBody: Type<Partial<ConsultationDiagnosis>>(),
+    TRes: Type<ConsultationDiagnosis>(),
+  },
+} as const;
+
+export default DiagnosesRoutes;
diff --git a/src/Components/Diagnosis/types.ts b/src/Components/Diagnosis/types.ts
new file mode 100644
index 00000000000..006bb2feb6c
--- /dev/null
+++ b/src/Components/Diagnosis/types.ts
@@ -0,0 +1,46 @@
+import { PerformedByModel } from "../HCX/misc";
+
+export type ICD11DiagnosisModel = {
+  id: string;
+  label: string;
+  chapter: string;
+};
+
+export const ActiveConditionVerificationStatuses = [
+  "unconfirmed",
+  "provisional",
+  "differential",
+  "confirmed",
+] as const;
+
+export const InactiveConditionVerificationStatuses = [
+  "refuted",
+  "entered-in-error",
+] as const;
+
+export const ConditionVerificationStatuses = [
+  ...ActiveConditionVerificationStatuses,
+  ...InactiveConditionVerificationStatuses,
+] as const;
+
+export type ConditionVerificationStatus =
+  (typeof ConditionVerificationStatuses)[number];
+
+export interface ConsultationDiagnosis {
+  readonly id: string;
+  diagnosis?: ICD11DiagnosisModel["id"];
+  readonly diagnosis_object: ICD11DiagnosisModel;
+  verification_status: ConditionVerificationStatus;
+  is_principal: boolean;
+  readonly is_migrated: boolean;
+  readonly created_by: PerformedByModel;
+  readonly created_date: string;
+  readonly modified_date: string;
+}
+
+export interface CreateDiagnosis {
+  diagnosis: ICD11DiagnosisModel["id"];
+  readonly diagnosis_object?: ICD11DiagnosisModel;
+  verification_status: (typeof ActiveConditionVerificationStatuses)[number];
+  is_principal: boolean;
+}
diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
index 0d510d8459e..0eae504399c 100644
--- a/src/Components/Facility/CentralNursingStation.tsx
+++ b/src/Components/Facility/CentralNursingStation.tsx
@@ -168,11 +168,15 @@ export default function CentralNursingStation({ facilityId }: Props) {
                       <FieldLabel className="text-sm">
                         Filter by Location
                       </FieldLabel>
-                      <div className="flex w-full items-center gap-2">
+                      <div>
                         <LocationSelect
                           key={qParams.location}
                           name="Facilities"
-                          setSelected={(location) => updateQuery({ location })}
+                          setSelected={(location) => {
+                            location
+                              ? updateQuery({ location })
+                              : removeFilter("location");
+                          }}
                           selected={qParams.location}
                           showAll={false}
                           multiple={false}
@@ -180,16 +184,6 @@ export default function CentralNursingStation({ facilityId }: Props) {
                           errors=""
                           errorClassName="hidden"
                         />
-                        {qParams.location && (
-                          <ButtonV2
-                            variant="secondary"
-                            circle
-                            border
-                            onClick={() => removeFilter("location")}
-                          >
-                            Clear
-                          </ButtonV2>
-                        )}
                       </div>
                     </div>
                     <SelectFormField
@@ -273,6 +267,10 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {data.map((props) => (
             <div className="overflow-hidden text-clip">
               <HL7PatientVitalsMonitor
+                patientCurrentBedAssignmentDate={
+                  props.patientAssetBed?.patient?.last_consultation?.current_bed
+                    ?.start_date
+                }
                 key={`${props.patientAssetBed?.bed.id}-${hash}`}
                 {...props}
                 config={config}
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.tsx
index 0643765339f..e1e72c2f936 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.tsx
@@ -1,20 +1,18 @@
 import { ConsultationTabProps } from "./index";
-import PrescriptionAdministrationsTable from "../../Medicine/PrescriptionAdministrationsTable";
 import PageTitle from "../../Common/PageHeadTitle";
+import MedicineAdministrationSheet from "../../Medicine/MedicineAdministrationSheet";
 
 export const ConsultationMedicinesTab = (props: ConsultationTabProps) => {
   return (
     <div className="my-4 flex flex-col gap-16">
       {/* eslint-disable-next-line i18next/no-literal-string */}
       <PageTitle title="Medicines" />
-      <PrescriptionAdministrationsTable
-        consultation_id={props.consultationId}
+      <MedicineAdministrationSheet
         readonly={!!props.consultationData.discharge_date}
-        prn={false}
+        is_prn={false}
       />
-      <PrescriptionAdministrationsTable
-        consultation_id={props.consultationId}
-        prn={true}
+      <MedicineAdministrationSheet
+        is_prn={true}
         readonly={!!props.consultationData.discharge_date}
       />
     </div>
diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 1b89f3980e1..736a7c81575 100644
--- a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
+++ b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -113,6 +113,10 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
             <div className="mx-auto flex w-full flex-col justify-between gap-1 rounded bg-[#020617] lg:w-auto lg:min-w-[1280px] lg:flex-row">
               <div className="min-h-[400px] flex-1">
                 <HL7PatientVitalsMonitor
+                  patientCurrentBedAssignmentDate={
+                    props.patientData?.last_consultation?.current_bed
+                      ?.start_date
+                  }
                   patientAssetBed={{
                     asset: monitorBedData?.asset_object as AssetData,
                     bed: monitorBedData?.bed_object as BedModel,
@@ -150,6 +154,10 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <div className="min-h-[400px] flex-1">
                           <HL7PatientVitalsMonitor
                             key={`hl7-${hl7SocketUrl}-${vitals.hash}`}
+                            patientCurrentBedAssignmentDate={
+                              props.patientData?.last_consultation?.current_bed
+                                ?.start_date
+                            }
                             patientAssetBed={{
                               asset: monitorBedData?.asset_object as AssetData,
                               bed: monitorBedData?.bed_object as BedModel,
@@ -232,7 +240,6 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         </div>
                         <div className="overflow-x-auto overflow-y-hidden">
                           <PrescriptionsTable
-                            consultation_id={props.consultationData.id ?? ""}
                             is_prn={false}
                             readonly
                             prescription_type="DISCHARGE"
@@ -241,7 +248,6 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                         <hr className="my-2 border border-gray-300"></hr>
                         <div className="overflow-x-auto overflow-y-hidden">
                           <PrescriptionsTable
-                            consultation_id={props.consultationData.id ?? ""}
                             is_prn
                             readonly
                             prescription_type="DISCHARGE"
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index cedb1a843d3..6a5a5da242c 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -4,15 +4,15 @@ import {
   OptionsType,
   SYMPTOM_CHOICES,
 } from "../../../Common/constants";
-import { ConsultationModel, ICD11DiagnosisModel } from "../models";
+import { ConsultationModel } from "../models";
 import {
   getConsultation,
   getPatient,
+  listAssetBeds,
   listShiftRequests,
 } from "../../../Redux/actions";
 import { statusType, useAbortableEffect } from "../../../Common/utils";
 import { lazy, useCallback, useState } from "react";
-import ToolTip from "../../Common/utils/Tooltip";
 import ButtonV2 from "../../Common/components/ButtonV2";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import DischargeModal from "../DischargeModal";
@@ -42,6 +42,7 @@ import { ConsultationPressureSoreTab } from "./ConsultationPressureSoreTab";
 import { ConsultationDialysisTab } from "./ConsultationDialysisTab";
 import { ConsultationNeurologicalMonitoringTab } from "./ConsultationNeurologicalMonitoringTab";
 import { ConsultationNutritionTab } from "./ConsultationNutritionTab";
+import LegacyDiagnosesList from "../../Diagnosis/LegacyDiagnosesList";
 
 const Loading = lazy(() => import("../../Common/Loading"));
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
@@ -88,6 +89,7 @@ export const ConsultationDetails = (props: any) => {
   const [openDischargeSummaryDialog, setOpenDischargeSummaryDialog] =
     useState(false);
   const [openDischargeDialog, setOpenDischargeDialog] = useState(false);
+  const [isCameraAttached, setIsCameraAttached] = useState(false);
 
   const getPatientGender = (patientData: any) =>
     GENDER_TYPES.find((i) => i.id === patientData.gender)?.text;
@@ -126,6 +128,17 @@ export const ConsultationDetails = (props: any) => {
             data.symptoms_text = symptoms.join(", ");
           }
           setConsultationData(data);
+          const assetRes = await dispatch(
+            listAssetBeds({
+              bed: data?.current_bed?.bed_object?.id,
+            })
+          );
+          const isCameraAttachedRes = assetRes.data.results.some(
+            (asset: { asset_object: { asset_class: string } }) => {
+              return asset?.asset_object?.asset_class === "ONVIF";
+            }
+          );
+          setIsCameraAttached(isCameraAttachedRes);
           const id = res.data.patient;
           const patientRes = await dispatch(getPatient({ id }));
           if (patientRes?.data) {
@@ -205,56 +218,56 @@ export const ConsultationDetails = (props: any) => {
       selected === true ? "border-primary-500 text-primary-600 border-b-2" : ""
     }`;
 
-  const ShowDiagnosis = ({
-    diagnoses = [],
-    label = "Diagnosis",
-    nshow = 2,
-  }: {
-    diagnoses: ICD11DiagnosisModel[] | undefined;
-    label: string;
-    nshow?: number;
-  }) => {
-    const [showMore, setShowMore] = useState(false);
-
-    return diagnoses.length ? (
-      <div className="w-full text-sm">
-        <p className="font-semibold leading-relaxed">{label}</p>
-        {diagnoses.slice(0, !showMore ? nshow : undefined).map((diagnosis) =>
-          diagnosis.id === consultationData.icd11_principal_diagnosis ? (
-            <div className="relative flex items-center gap-2">
-              <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" />
-                </ToolTip>
-              </div>
-            </div>
-          ) : (
-            <p>{diagnosis.label}</p>
-          )
-        )}
-        {diagnoses.length > nshow && (
-          <>
-            {!showMore ? (
-              <a
-                onClick={() => setShowMore(true)}
-                className="cursor-pointer text-sm text-blue-600 hover:text-blue-300"
-              >
-                show more
-              </a>
-            ) : (
-              <a
-                onClick={() => setShowMore(false)}
-                className="cursor-pointer text-sm text-blue-600 hover:text-blue-300"
-              >
-                show less
-              </a>
-            )}
-          </>
-        )}
-      </div>
-    ) : null;
-  };
+  // const ShowDiagnosis = ({
+  //   diagnoses = [],
+  //   label = "Diagnosis",
+  //   nshow = 2,
+  // }: {
+  //   diagnoses: ICD11DiagnosisModel[] | undefined;
+  //   label: string;
+  //   nshow?: number;
+  // }) => {
+  //   const [showMore, setShowMore] = useState(false);
+
+  //   return diagnoses.length ? (
+  //     <div className="w-full text-sm">
+  //       <p className="font-semibold leading-relaxed">{label}</p>
+  //       {diagnoses.slice(0, !showMore ? nshow : undefined).map((diagnosis) =>
+  //         diagnosis.id === consultationData.icd11_principal_diagnosis ? (
+  //           <div className="relative flex items-center gap-2">
+  //             <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" />
+  //               </ToolTip>
+  //             </div>
+  //           </div>
+  //         ) : (
+  //           <p>{diagnosis.label}</p>
+  //         )
+  //       )}
+  //       {diagnoses.length > nshow && (
+  //         <>
+  //           {!showMore ? (
+  //             <a
+  //               onClick={() => setShowMore(true)}
+  //               className="cursor-pointer text-sm text-blue-600 hover:text-blue-300"
+  //             >
+  //               show more
+  //             </a>
+  //           ) : (
+  //             <a
+  //               onClick={() => setShowMore(false)}
+  //               className="cursor-pointer text-sm text-blue-600 hover:text-blue-300"
+  //             >
+  //               show less
+  //             </a>
+  //           )}
+  //         </>
+  //       )}
+  //     </div>
+  //   ) : null;
+  // };
 
   return (
     <div>
@@ -271,7 +284,7 @@ export const ConsultationDetails = (props: any) => {
       />
 
       <div className="px-2 pb-2">
-        <nav className="relative flex flex-wrap justify-between">
+        <nav className="relative flex flex-wrap items-start justify-between">
           <PageTitle
             title="Patient Dashboard"
             className="sm:m-0 sm:p-0"
@@ -290,9 +303,9 @@ export const ConsultationDetails = (props: any) => {
             breadcrumbs={true}
             backUrl="/patients"
           />
-          <div className="-right-6 top-0 flex w-full flex-col space-y-1 sm:w-min sm:flex-row sm:items-center sm:space-y-0 sm:divide-x-2 lg:absolute xl:right-0">
+          <div className="flex w-full flex-col min-[1150px]:w-min min-[1150px]:flex-row min-[1150px]:items-center">
             {!consultationData.discharge_date && (
-              <div className="flex w-full flex-col px-2 sm:flex-row">
+              <>
                 {hasActiveShiftingRequest() ? (
                   <ButtonV2
                     onClick={() =>
@@ -302,7 +315,7 @@ export const ConsultationDetails = (props: any) => {
                         }`
                       )
                     }
-                    className="btn btn-primary m-1 w-full hover:text-white"
+                    className="btn btn-primary mx-1 w-full p-1.5 px-4 hover:text-white"
                   >
                     <CareIcon className="care-l-ambulance h-5 w-5" />
                     Track Shifting
@@ -315,7 +328,7 @@ export const ConsultationDetails = (props: any) => {
                         `/facility/${patientData.facility}/patient/${patientData.id}/shift/new`
                       )
                     }
-                    className="btn btn-primary m-1 w-full hover:text-white"
+                    className="btn btn-primary mx-1 w-full p-1.5 px-4 hover:text-white"
                   >
                     <CareIcon className="care-l-ambulance h-5 w-5" />
                     Shift Patient
@@ -335,31 +348,33 @@ export const ConsultationDetails = (props: any) => {
                 >
                   Doctor Connect
                 </button>
-                {patientData.last_consultation?.id && (
-                  <Link
-                    href={`/facility/${patientData.facility}/patient/${patientData.id}/consultation/${patientData.last_consultation?.id}/feed`}
-                    className="btn btn-primary m-1 w-full hover:text-white"
-                  >
-                    Camera Feed
-                  </Link>
-                )}
-              </div>
+                {patientData.last_consultation?.id &&
+                  isCameraAttached &&
+                  ["DistrictAdmin", "StateAdmin", "Doctor"].includes(
+                    authUser.user_type
+                  ) && (
+                    <Link
+                      href={`/facility/${patientData.facility}/patient/${patientData.id}/consultation/${patientData.last_consultation?.id}/feed`}
+                      className="btn btn-primary m-1 w-full hover:text-white"
+                    >
+                      Camera Feed
+                    </Link>
+                  )}
+              </>
             )}
-            <div className="flex w-full flex-col px-2 sm:flex-row">
-              <Link
-                href={`/facility/${patientData.facility}/patient/${patientData.id}`}
-                className="btn btn-primary m-1 w-full hover:text-white"
-              >
-                Patient Details
-              </Link>
-              <Link
-                id="patient_doctor_notes"
-                href={`/facility/${patientData.facility}/patient/${patientData.id}/notes`}
-                className="btn btn-primary m-1 w-full hover:text-white"
-              >
-                Doctor&apos;s Notes
-              </Link>
-            </div>
+            <Link
+              href={`/facility/${patientData.facility}/patient/${patientData.id}`}
+              className="btn btn-primary m-1 w-full hover:text-white"
+            >
+              Patient Details
+            </Link>
+            <Link
+              id="patient_doctor_notes"
+              href={`/facility/${patientData.facility}/patient/${patientData.id}/notes`}
+              className="btn btn-primary m-1 w-full hover:text-white"
+            >
+              Doctor&apos;s Notes
+            </Link>
           </div>
         </nav>
         <div className="mt-2 flex w-full flex-col md:flex-row">
@@ -415,21 +430,8 @@ export const ConsultationDetails = (props: any) => {
                   </div>
                 )*/}
 
-                <ShowDiagnosis
-                  diagnoses={
-                    consultationData?.icd11_provisional_diagnoses_object
-                  }
-                  label="Provisional Diagnosis (as per ICD-11 recommended by WHO)"
-                />
-
-                <ShowDiagnosis
-                  diagnoses={[
-                    ...(consultationData?.diagnosis
-                      ? [{ id: "0", label: consultationData?.diagnosis }]
-                      : []),
-                    ...(consultationData?.icd11_diagnoses_object ?? []),
-                  ]}
-                  label="Diagnosis (as per ICD-11 recommended by WHO)"
+                <LegacyDiagnosesList
+                  diagnoses={consultationData.diagnoses || []}
                 />
 
                 {(consultationData.verified_by_object ||
@@ -506,6 +508,7 @@ export const ConsultationDetails = (props: any) => {
                 {CONSULTATION_TABS.map((p: OptionsType) => {
                   if (p.text === "FEED") {
                     if (
+                      isCameraAttached === false || // No camera attached
                       consultationData?.discharge_date || // Discharged
                       !consultationData?.current_bed?.bed_object?.id || // Not admitted to bed
                       !["DistrictAdmin", "StateAdmin", "Doctor"].includes(
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index 01a5f02b7b1..10397f4e79a 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -1,6 +1,6 @@
 import * as Notification from "../../Utils/Notifications.js";
 
-import { BedModel, FacilityModel, ICD11DiagnosisModel } from "./models";
+import { BedModel, FacilityModel } from "./models";
 import {
   CONSULTATION_STATUS,
   CONSULTATION_SUGGESTION,
@@ -38,7 +38,6 @@ import Beds from "./Consultations/Beds";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import DateFormField from "../Form/FormFields/DateFormField";
-import { DiagnosisSelectFormField } from "../Common/DiagnosisSelectFormField";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import {
   FieldChangeEvent,
@@ -60,7 +59,15 @@ import useConfig from "../../Common/hooks/useConfig";
 import { useDispatch } from "react-redux";
 import useVisibility from "../../Utils/useVisibility";
 import dayjs from "../../Utils/dayjs";
-import AutocompleteFormField from "../Form/FormFields/Autocomplete.js";
+import {
+  ConditionVerificationStatuses,
+  ConsultationDiagnosis,
+  CreateDiagnosis,
+} from "../Diagnosis/types.js";
+import {
+  CreateDiagnosesBuilder,
+  EditDiagnosesBuilder,
+} from "../Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 const PageTitle = lazy(() => import("../Common/PageTitle"));
@@ -82,9 +89,8 @@ type FormDetails = {
   discharge_date: null;
   referred_to?: string;
   referred_to_external?: string;
-  icd11_diagnoses_object: ICD11DiagnosisModel[];
-  icd11_provisional_diagnoses_object: ICD11DiagnosisModel[];
-  icd11_principal_diagnosis?: ICD11DiagnosisModel["id"];
+  create_diagnoses: CreateDiagnosis[];
+  diagnoses: ConsultationDiagnosis[];
   verified_by: string;
   verified_by_object: UserModel | null;
   is_kasp: BooleanStrings;
@@ -128,9 +134,8 @@ const initForm: FormDetails = {
   discharge_date: null,
   referred_to: "",
   referred_to_external: "",
-  icd11_diagnoses_object: [],
-  icd11_provisional_diagnoses_object: [],
-  icd11_principal_diagnosis: undefined,
+  create_diagnoses: [],
+  diagnoses: [],
   verified_by: "",
   verified_by_object: null,
   is_kasp: "false",
@@ -324,18 +329,6 @@ export const ConsultationForm = (props: any) => {
           verified_by: "Declared Dead",
         },
       });
-    } else if (
-      event.name === "icd11_diagnoses_object" ||
-      event.name === "icd11_provisional_diagnoses_object"
-    ) {
-      dispatch({
-        type: "set_form",
-        form: {
-          ...state.form,
-          [event.name]: event.value,
-          icd11_principal_diagnosis: undefined,
-        },
-      });
     } else {
       dispatch({
         type: "set_form",
@@ -393,6 +386,11 @@ export const ConsultationForm = (props: any) => {
             death_datetime: res.data?.death_datetime || "",
             death_confirmed_doctor: res.data?.death_confirmed_doctor || "",
             InvestigationAdvice: res.data.investigation,
+            diagnoses: res.data.diagnoses.sort(
+              (a: ConsultationDiagnosis, b: ConsultationDiagnosis) =>
+                ConditionVerificationStatuses.indexOf(a.verification_status) -
+                ConditionVerificationStatuses.indexOf(b.verification_status)
+            ),
           };
           dispatch({ type: "set_form", form: { ...state.form, ...formData } });
           setBed(formData.bed);
@@ -588,57 +586,57 @@ export const ConsultationForm = (props: any) => {
           return;
         }
 
-        case "icd11_provisional_diagnoses_object": {
-          if (
-            state.form[field].length === 0 &&
-            state.form["icd11_diagnoses_object"].length === 0
-          ) {
-            for (const err_field of [field, "icd11_diagnoses_object"])
-              errors[err_field] =
-                "Please select either Provisional Diagnosis or Final Diagnosis";
-            invalidForm = true;
-            break;
-          }
-          return;
-        }
-
-        case "icd11_principal_diagnosis": {
-          if (!state.form[field]) {
-            errors[field] = "Please select Principal Diagnosis";
-            invalidForm = true;
-            break;
-          }
-
-          if (
-            state.form[field] &&
-            state.form["icd11_diagnoses_object"].length &&
-            !state.form["icd11_provisional_diagnoses_object"] &&
-            !state.form["icd11_diagnoses_object"]
-              .map((d) => d.id)
-              .includes(state.form[field]!)
-          ) {
-            errors[field] =
-              "Please select Principal Diagnosis from Final Diagnosis";
-            invalidForm = true;
-            break;
-          }
-
-          if (
-            state.form[field] &&
-            state.form["icd11_provisional_diagnoses_object"].length &&
-            !state.form["icd11_diagnoses_object"] &&
-            !state.form["icd11_provisional_diagnoses_object"]
-              .map((d) => d.id)
-              .includes(state.form[field]!)
-          ) {
-            errors[field] =
-              "Please select Principal Diagnosis from Provisional Diagnosis";
-            invalidForm = true;
-            break;
-          }
-
-          return;
-        }
+        // case "icd11_provisional_diagnoses_object": {
+        //   if (
+        //     state.form[field].length === 0 &&
+        //     state.form["icd11_diagnoses_object"].length === 0
+        //   ) {
+        //     for (const err_field of [field, "icd11_diagnoses_object"])
+        //       errors[err_field] =
+        //         "Please select either Provisional Diagnosis or Final Diagnosis";
+        //     invalidForm = true;
+        //     break;
+        //   }
+        //   return;
+        // }
+
+        // case "icd11_principal_diagnosis": {
+        //   if (!state.form[field]) {
+        //     errors[field] = "Please select Principal Diagnosis";
+        //     invalidForm = true;
+        //     break;
+        //   }
+
+        //   if (
+        //     state.form[field] &&
+        //     state.form["icd11_diagnoses_object"].length &&
+        //     !state.form["icd11_provisional_diagnoses_object"] &&
+        //     !state.form["icd11_diagnoses_object"]
+        //       .map((d) => d.id)
+        //       .includes(state.form[field]!)
+        //   ) {
+        //     errors[field] =
+        //       "Please select Principal Diagnosis from Final Diagnosis";
+        //     invalidForm = true;
+        //     break;
+        //   }
+
+        //   if (
+        //     state.form[field] &&
+        //     state.form["icd11_provisional_diagnoses_object"].length &&
+        //     !state.form["icd11_diagnoses_object"] &&
+        //     !state.form["icd11_provisional_diagnoses_object"]
+        //       .map((d) => d.id)
+        //       .includes(state.form[field]!)
+        //   ) {
+        //     errors[field] =
+        //       "Please select Principal Diagnosis from Provisional Diagnosis";
+        //     invalidForm = true;
+        //     break;
+        //   }
+
+        //   return;
+        // }
 
         default:
           return;
@@ -714,14 +712,7 @@ export const ConsultationForm = (props: any) => {
         treatment_plan: state.form.treatment_plan,
         discharge_date: state.form.discharge_date,
         patient_no: state.form.patient_no,
-        icd11_diagnoses: state.form.icd11_diagnoses_object.map(
-          (o: ICD11DiagnosisModel) => o.id
-        ),
-        icd11_provisional_diagnoses:
-          state.form.icd11_provisional_diagnoses_object.map(
-            (o: ICD11DiagnosisModel) => o.id
-          ),
-        icd11_principal_diagnosis: state.form.icd11_principal_diagnosis,
+        create_diagnoses: isUpdate ? undefined : state.form.create_diagnoses,
         verified_by: state.form.verified_by,
         investigation: state.form.InvestigationAdvice,
         procedure: state.form.procedures,
@@ -1190,44 +1181,25 @@ export const ConsultationForm = (props: any) => {
                 <div className="flex flex-col gap-4 pb-4">
                   <div className="flex flex-col">
                     {sectionTitle("Diagnosis", true)}
-                    <p className="-mt-4 mb-4 space-x-1 text-sm text-gray-700">
-                      <span className="font-medium">
-                        Either Provisional or Final Diagnosis is mandatory
-                      </span>
-                      <span>| Diagnoses as per ICD-11 recommended by WHO</span>
+                    <p className="-mt-4 space-x-1 text-sm text-gray-700">
+                      <span>Diagnoses as per ICD-11 recommended by WHO</span>
                     </p>
                   </div>
 
-                  <div ref={fieldRef["icd11_provisional_diagnoses_object"]}>
-                    <DiagnosisSelectFormField
-                      {...field("icd11_provisional_diagnoses_object")}
-                      multiple
-                      label="Provisional Diagnosis"
-                    />
-                  </div>
-
-                  <div ref={fieldRef["icd11_diagnoses_object"]}>
-                    <DiagnosisSelectFormField
-                      {...field("icd11_diagnoses_object")}
-                      multiple
-                      label="Final Diagnosis"
-                    />
-                  </div>
-
-                  <div ref={fieldRef["icd11_principal_diagnosis"]}>
-                    <AutocompleteFormField
-                      {...field("icd11_principal_diagnosis")}
-                      label="Principal Diagnosis"
-                      placeholder="Search for diagnosis"
-                      options={
-                        state.form.icd11_diagnoses_object.length
-                          ? state.form.icd11_diagnoses_object
-                          : state.form.icd11_provisional_diagnoses_object
-                      }
-                      optionLabel={(option) => option.label}
-                      optionValue={(option) => option.id}
-                      required
-                    />
+                  <div ref={fieldRef["diagnoses"]}>
+                    {isUpdate ? (
+                      <EditDiagnosesBuilder value={state.form.diagnoses} />
+                    ) : (
+                      <CreateDiagnosesBuilder
+                        value={state.form.create_diagnoses}
+                        onChange={(diagnoses) => {
+                          handleFormFieldChange({
+                            name: "create_diagnoses",
+                            value: diagnoses,
+                          });
+                        }}
+                      />
+                    )}
                   </div>
                 </div>
 
diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index 31691c736f4..25b656a0a79 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -48,8 +48,11 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
   const [cameraAsset, setCameraAsset] = useState<ICameraAssetState>({
     id: "",
     accessKey: "",
+    middleware_address: "",
+    location_middleware: "",
   });
-  const [cameraMiddlewareHostname, setCameraMiddlewareHostname] = useState("");
+  const [facilityMiddlewareHostname, setFacilityMiddlewareHostname] =
+    useState("");
   const [cameraConfig, setCameraConfig] = useState<any>({});
   const [isLoading, setIsLoading] = useState(true);
   const [bedPresets, setBedPresets] = useState<any>([]);
@@ -66,13 +69,19 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
       const res = await dispatch(getPermittedFacility(facilityId));
 
       if (res.status === 200 && res.data) {
-        setCameraMiddlewareHostname(res.data.middleware_address);
+        setFacilityMiddlewareHostname(res.data.middleware_address);
       }
     };
 
     if (facilityId) fetchFacility();
   }, [dispatch, facilityId]);
 
+  const fallbackMiddleware =
+    cameraAsset.location_middleware || facilityMiddlewareHostname;
+
+  const currentMiddleware =
+    cameraAsset.middleware_address || fallbackMiddleware;
+
   useEffect(() => {
     if (cameraState) {
       setCameraState({
@@ -115,9 +124,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
               ...bedAssets.data,
               results: bedAssets.data.results.filter(
                 (asset: { asset_object: { meta: { asset_type: string } } }) => {
-                  return asset?.asset_object?.meta?.asset_type === "CAMERA"
-                    ? true
-                    : false;
+                  return asset?.asset_object?.meta?.asset_type === "CAMERA";
                 }
               ),
             },
@@ -130,6 +137,12 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
             setCameraAsset({
               id: bedAssets.data.results[0].asset_object.id,
               accessKey: config[2] || "",
+              middleware_address:
+                bedAssets.data.results[0].asset_object?.meta
+                  ?.middleware_hostname,
+              location_middleware:
+                bedAssets.data.results[0].asset_object.location_object
+                  ?.middleware_address,
             });
             setCameraConfig(bedAssets.data.results[0].meta);
             setCameraState({
@@ -170,8 +183,8 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
   );
 
   const url = !isIOS
-    ? `wss://${cameraMiddlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`
-    : `https://${cameraMiddlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/hls/live/index.m3u8?uuid=${cameraAsset?.accessKey}&channel=0`;
+    ? `wss://${currentMiddleware}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`
+    : `https://${currentMiddleware}/stream/${cameraAsset?.accessKey}/channel/0/hls/live/index.m3u8?uuid=${cameraAsset?.accessKey}&channel=0`;
 
   const {
     startStream,
@@ -182,7 +195,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
     : // eslint-disable-next-line react-hooks/rules-of-hooks
       useMSEMediaPlayer({
         config: {
-          middlewareHostname: cameraMiddlewareHostname,
+          middlewareHostname: currentMiddleware,
           ...cameraAsset,
         },
         url,
@@ -217,8 +230,28 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
     }
   };
 
+  const startStreamFeed = () => {
+    startStream({
+      onSuccess: () => setStreamStatus(StreamStatus.Playing),
+      onError: () => {
+        setStreamStatus(StreamStatus.Offline);
+        if (!statusReported) {
+          triggerGoal("Camera Feed Viewed", {
+            consultationId,
+            userId: authUser.id,
+            result: "error",
+          });
+          setStatusReported(true);
+        }
+      },
+    });
+  };
+
   useEffect(() => {
     if (cameraAsset.id) {
+      setTimeout(() => {
+        startStreamFeed();
+      }, 1000);
       getPresets({
         onSuccess: (resp) => setPresets(resp),
         onError: (_) => {
@@ -229,7 +262,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
       });
       getBedPresets(cameraAsset);
     }
-  }, [cameraAsset, cameraMiddlewareHostname]);
+  }, [cameraAsset, currentMiddleware]);
 
   useEffect(() => {
     let tId: any;
@@ -238,21 +271,8 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
         setStreamStatus(StreamStatus.Loading);
       }
       tId = setTimeout(() => {
-        startStream({
-          onSuccess: () => setStreamStatus(StreamStatus.Playing),
-          onError: () => {
-            setStreamStatus(StreamStatus.Offline);
-            if (!statusReported) {
-              triggerGoal("Camera Feed Viewed", {
-                consultationId,
-                userId: authUser.id,
-                result: "error",
-              });
-              setStatusReported(true);
-            }
-          },
-        });
-      }, 100);
+        startStreamFeed();
+      }, 5000);
     } else if (!statusReported) {
       triggerGoal("Camera Feed Viewed", {
         consultationId,
diff --git a/src/Components/Facility/Consultations/LiveFeed.tsx b/src/Components/Facility/Consultations/LiveFeed.tsx
index aba473e958d..cd3f055921e 100644
--- a/src/Components/Facility/Consultations/LiveFeed.tsx
+++ b/src/Components/Facility/Consultations/LiveFeed.tsx
@@ -177,6 +177,9 @@ const LiveFeed = (props: any) => {
   useEffect(() => {
     if (cameraAsset?.hostname) {
       fetchCameraPresets();
+      setTimeout(() => {
+        startStreamFeed();
+      }, 1000);
     }
   }, []);
 
@@ -192,6 +195,13 @@ const LiveFeed = (props: any) => {
     }
   }, [page.offset, cameraAsset.id, refreshPresetsHash]);
 
+  const startStreamFeed = () => {
+    startStream({
+      onSuccess: () => setStreamStatus(StreamStatus.Playing),
+      onError: () => setStreamStatus(StreamStatus.Offline),
+    });
+  };
+
   const viewOptions = (page: number) => {
     return presets
       ? Object.entries(presets)
@@ -207,11 +217,8 @@ const LiveFeed = (props: any) => {
     if (streamStatus !== StreamStatus.Playing) {
       setStreamStatus(StreamStatus.Loading);
       tId = setTimeout(() => {
-        startStream({
-          onSuccess: () => setStreamStatus(StreamStatus.Playing),
-          onError: () => setStreamStatus(StreamStatus.Offline),
-        });
-      }, 500);
+        startStreamFeed();
+      }, 5000);
     }
 
     return () => {
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index b069b371a72..138e74fb9b9 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -12,7 +12,7 @@ import DateFormField from "../Form/FormFields/DateFormField";
 import DialogModal from "../Common/Dialog";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import { FieldLabel } from "../Form/FormFields/FormField";
-import { HCXActions, PrescriptionActions } from "../../Redux/actions";
+import { HCXActions } from "../../Redux/actions";
 import { HCXClaimModel } from "../HCX/models";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
@@ -183,8 +183,6 @@ const DischargeModal = ({
     });
   };
 
-  const prescriptionActions = PrescriptionActions(consultationData.id ?? "");
-
   const handleFacilitySelect = (selected: FacilityModel) => {
     setFacility(selected);
     const { id, name } = selected || {};
@@ -238,7 +236,7 @@ const DischargeModal = ({
               setSelected={(selected) =>
                 handleFacilitySelect(selected as FacilityModel)
               }
-              selected={facility}
+              selected={facility ?? null}
               showAll
               freeText
               multiple={false}
@@ -284,18 +282,11 @@ const DischargeModal = ({
 
             <div className="mb-4">
               <FieldLabel>Discharge Prescription Medications</FieldLabel>
-              <PrescriptionBuilder
-                actions={prescriptionActions}
-                prescription_type="DISCHARGE"
-              />
+              <PrescriptionBuilder prescription_type="DISCHARGE" />
             </div>
             <div className="mb-4">
               <FieldLabel>Discharge PRN Prescriptions</FieldLabel>
-              <PrescriptionBuilder
-                actions={prescriptionActions}
-                prescription_type="DISCHARGE"
-                is_prn
-              />
+              <PrescriptionBuilder prescription_type="DISCHARGE" is_prn />
             </div>
           </div>
         )}
diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx
index 59c443cb64e..5302f7f9d53 100644
--- a/src/Components/Facility/DoctorVideoSlideover.tsx
+++ b/src/Components/Facility/DoctorVideoSlideover.tsx
@@ -68,7 +68,13 @@ export default function DoctorVideoSlideover(props: {
           home: false,
         },
       ].map((type, i) => (
-        <div key={i} className="mb-4">
+        <div
+          key={i}
+          className="mb-4"
+          id={`doctor-connect-${
+            type.home ? "home" : "remote"
+          }-${type.user_type.toLowerCase()}`}
+        >
           <div>
             <span className="text-lg font-semibold">{type.title}</span>
           </div>
diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index 43e515cec93..ab37ac20c96 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -48,11 +48,11 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
 
   return (
     <div key={`usr_${facility.id}`} className="w-full">
-      <div className="block h-full rounded-lg bg-white shadow hover:border-primary-500">
+      <div className="block h-full overflow-hidden rounded-lg bg-white shadow hover:border-primary-500">
         <div className="flex h-full">
           <Link
             href={`/facility/${facility.id}`}
-            className="group relative z-0 hidden w-1/4 items-center justify-center self-stretch bg-gray-300 md:flex"
+            className="group relative z-0 hidden w-1/4 min-w-[15%] items-center justify-center self-stretch bg-gray-300 md:flex"
           >
             {(facility.read_cover_image_url && (
               <img
@@ -67,7 +67,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
           <div className="h-full w-full grow">
             <Link
               href={`/facility/${facility.id}`}
-              className="group relative z-0 flex w-full items-center justify-center self-stretch bg-gray-300 md:hidden"
+              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch bg-gray-300 md:hidden"
             >
               {(facility.read_cover_image_url && (
                 <img
@@ -80,7 +80,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
               )}
             </Link>
 
-            <div className="flex h-fit w-full flex-col justify-between md:h-full">
+            <div className="flex h-fit w-full flex-col flex-wrap justify-between md:h-full">
               <div className="w-full p-4">
                 <div className="flow-root">
                   {facility.kasp_empanelled && (
@@ -88,7 +88,10 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                       {kasp_string}
                     </div>
                   )}
-                  <div className="flex items-center justify-between">
+                  <div
+                    className="flex flex-wrap items-center justify-between"
+                    id="facility-name-card"
+                  >
                     <Link
                       href={`/facility/${facility.id}`}
                       className="float-left text-xl font-bold capitalize text-inherit hover:text-inherit"
@@ -153,10 +156,10 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                   </a>
                 </div>
               </div>
-              <div className="flex-none border-t bg-gray-50 px-2 py-1 md:px-3">
+              <div className="flex flex-wrap border-t bg-gray-50 px-2 py-1 md:px-3">
                 <div className="flex justify-between py-2">
                   <div className="flex w-full flex-wrap justify-between gap-2">
-                    <div className="flex gap-2">
+                    <div className="flex flex-wrap gap-2">
                       <div
                         className={`tooltip ml-auto flex h-[38px] w-fit items-center justify-center rounded-md px-2 text-xl ${
                           facility.patient_count / facility.bed_count > 0.85
@@ -164,7 +167,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                             : "button-primary-border bg-primary-100"
                         }`}
                       >
-                        <span className="tooltip-text tooltip-bottom md:tooltip-right -translate-y-2">
+                        <span className="tooltip-text tooltip-top">
                           Live Patients / Total beds
                         </span>{" "}
                         <CareIcon
@@ -220,7 +223,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         </form>
                       </DialogModal>
                     </div>
-                    <div className="flex gap-2">
+                    <div className="flex flex-wrap gap-2">
                       {userType !== "Staff" ? (
                         <ButtonV2
                           id="facility-notify"
diff --git a/src/Components/Facility/FacilityConfigure.tsx b/src/Components/Facility/FacilityConfigure.tsx
index a838e5761f7..58547bfc585 100644
--- a/src/Components/Facility/FacilityConfigure.tsx
+++ b/src/Components/Facility/FacilityConfigure.tsx
@@ -139,28 +139,30 @@ export const FacilityConfigure = (props: IProps) => {
       }}
       className="w-full overflow-x-hidden"
     >
-      <div className="cui-card mt-4">
-        <form onSubmit={handleSubmit}>
-          <div className="mt-2 grid grid-cols-1 gap-4">
-            <div>
-              <TextFormField
-                name="middleware_address"
-                label="Facility Middleware Address"
-                required
-                value={state.form.middleware_address}
-                onChange={handleChange}
-                error={state.errors?.middleware_address}
-              />
+      <div className="mx-auto max-w-3xl">
+        <div className="cui-card mt-4">
+          <form onSubmit={handleSubmit}>
+            <div className="mt-2 grid grid-cols-1 gap-4">
+              <div>
+                <TextFormField
+                  name="middleware_address"
+                  label="Facility Middleware Address"
+                  required
+                  value={state.form.middleware_address}
+                  onChange={handleChange}
+                  error={state.errors?.middleware_address}
+                />
+              </div>
             </div>
-          </div>
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-            <Cancel onClick={() => navigate(`/facility/${facilityId}`)} />
-            <Submit onClick={handleSubmit} label="Update" />
-          </div>
-        </form>
-      </div>
+            <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+              <Cancel onClick={() => navigate(`/facility/${facilityId}`)} />
+              <Submit onClick={handleSubmit} label="Update" />
+            </div>
+          </form>
+        </div>
 
-      <ConfigureHealthFacility facilityId={facilityId} />
+        <ConfigureHealthFacility facilityId={facilityId} />
+      </div>
     </Page>
   );
 };
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 68990e64416..405ba236f05 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -62,7 +62,7 @@ export const FacilityHome = (props: any) => {
   const { t } = useTranslation();
   const { facilityId } = props;
   const dispatch: any = useDispatch();
-  const [facilityData, setFacilityData] = useState<FacilityModel>({});
+  const [facilityData, setFacilityData] = useState<FacilityModel | any>({});
   const [capacityData, setCapacityData] = useState<Array<CapacityModal>>([]);
   const [doctorData, setDoctorData] = useState<Array<DoctorModal>>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -495,7 +495,7 @@ export const FacilityHome = (props: any) => {
             </div>
             <div className="mt-10 flex items-center gap-3">
               <div>
-                {facilityData.features?.some((feature) =>
+                {facilityData.features?.some((feature: any) =>
                   FACILITY_FEATURE_TYPES.some((f) => f.id === feature)
                 ) && (
                   <h1 className="text-lg font-semibold">Available features</h1>
@@ -617,6 +617,16 @@ export const FacilityHome = (props: any) => {
                 <CareIcon className="care-l-monitor-heart-rate text-lg" />
                 <span>Central Nursing Station</span>
               </ButtonV2>
+              <ButtonV2
+                variant="primary"
+                ghost
+                border
+                className="mt-2 flex w-full flex-row justify-center md:w-auto"
+                onClick={() => navigate(`/facility/${facilityId}/livefeed`)}
+              >
+                <CareIcon className="care-l-video text-lg" />
+                <span>Live Monitoring</span>
+              </ButtonV2>
               <ButtonV2
                 variant="primary"
                 ghost
@@ -629,6 +639,7 @@ export const FacilityHome = (props: any) => {
                 <span className="text-sm">Add Details of a Patient</span>
               </ButtonV2>
               <ButtonV2
+                id="view-patient-facility-list"
                 variant="primary"
                 ghost
                 border
diff --git a/src/Components/Facility/FacilityUsers.tsx b/src/Components/Facility/FacilityUsers.tsx
index 3008e54f830..caff279ad7e 100644
--- a/src/Components/Facility/FacilityUsers.tsx
+++ b/src/Components/Facility/FacilityUsers.tsx
@@ -308,7 +308,10 @@ export default function FacilityUsers(props: any) {
               <div className="px-6 py-4">
                 <div className="flex flex-col justify-between lg:flex-row">
                   {user.username && (
-                    <div className="inline-flex w-fit items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium leading-5 text-blue-800">
+                    <div
+                      id="user-view-name"
+                      className="inline-flex w-fit items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium leading-5 text-blue-800"
+                    >
                       {user.username}
                     </div>
                   )}
diff --git a/src/Components/Facility/LiveFeedScreen.tsx b/src/Components/Facility/LiveFeedScreen.tsx
new file mode 100644
index 00000000000..e744ef404cd
--- /dev/null
+++ b/src/Components/Facility/LiveFeedScreen.tsx
@@ -0,0 +1,230 @@
+import { Fragment, useContext, useEffect, useState } from "react";
+import useFilters from "../../Common/hooks/useFilters";
+import useFullscreen from "../../Common/hooks/useFullscreen";
+import { FacilityModel } from "./models";
+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 { SidebarShrinkContext } from "../Common/Sidebar/Sidebar";
+import { AssetData } from "../Assets/AssetTypes";
+import { Popover, Transition } from "@headlessui/react";
+import { FieldLabel } from "../Form/FormFields/FormField";
+import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
+import LiveFeedTile from "./LiveFeedTile";
+import { getCameraConfig } from "../../Utils/transformUtils";
+import { getPermittedFacility, listAssets } from "../../Redux/actions";
+import { useDispatch } from "react-redux";
+
+const PER_PAGE_LIMIT = 6;
+
+interface Props {
+  facilityId: string;
+}
+
+export default function LiveFeedScreen({ facilityId }: Props) {
+  const dispatch = useDispatch<any>();
+  const [isFullscreen, setFullscreen] = useFullscreen();
+  const sidebar = useContext(SidebarShrinkContext);
+
+  const [facility, setFacility] = useState<FacilityModel>();
+  const [assets, setAssets] = useState<AssetData[]>();
+  const [totalCount, setTotalCount] = useState(0);
+  const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
+    limit: PER_PAGE_LIMIT,
+  });
+
+  const [refresh_presets_hash, setRefreshPresetsHash] = useState<number>(
+    Number(new Date())
+  );
+
+  // To automatically collapse sidebar.
+  useEffect(() => {
+    sidebar.setShrinked(true);
+
+    return () => {
+      sidebar.setShrinked(sidebar.shrinked);
+    };
+  }, []);
+
+  useEffect(() => {
+    async function fetchFacilityOrObject() {
+      if (facility) return facility;
+      const res = await dispatch(getPermittedFacility(facilityId));
+      if (res.status !== 200) return;
+      setFacility(res.data);
+      return res.data as FacilityModel;
+    }
+
+    async function fetchData() {
+      setAssets(undefined);
+
+      const filters = {
+        ...qParams,
+        page: qParams.page || 1,
+        limit: PER_PAGE_LIMIT,
+        offset: (qParams.page ? qParams.page - 1 : 0) * PER_PAGE_LIMIT,
+        asset_class: "ONVIF",
+        facility: facilityId || "",
+        location: qParams.location,
+        bed_is_occupied: qParams.bed_is_occupied,
+      };
+
+      const [facilityObj, res] = await Promise.all([
+        fetchFacilityOrObject(),
+        dispatch(listAssets(filters)),
+      ]);
+
+      if (!facilityObj || res.status !== 200) {
+        return;
+      }
+      console.log(facilityObj, res.data);
+      const entries = res.data.results;
+
+      setTotalCount(entries.length);
+      setAssets(entries);
+    }
+    fetchData();
+    setRefreshPresetsHash(Number(new Date()));
+  }, [
+    dispatch,
+    facilityId,
+    qParams.page,
+    qParams.location,
+    qParams.ordering,
+    qParams.bed_is_occupied,
+  ]);
+
+  return (
+    <Page
+      title="Live Monitoring"
+      backUrl={`/facility/${facilityId}/`}
+      noImplicitPadding
+      breadcrumbs={false}
+      options={
+        <div className="flex flex-row-reverse items-center gap-4 md:flex-row">
+          <Popover className="relative">
+            <Popover.Button>
+              <ButtonV2 variant="secondary" border>
+                <CareIcon className="care-l-setting text-lg" />
+                Settings and Filters
+              </ButtonV2>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel className="absolute z-30 mt-1 w-80 -translate-x-1/3 px-4 sm:px-0 md:w-96 md:-translate-x-1/2 lg:max-w-3xl">
+                <div className="rounded-lg shadow-lg ring-1 ring-gray-400">
+                  <div className="rounded-t-lg bg-gray-100 px-6 py-4">
+                    <div className="flow-root rounded-md">
+                      <span className="block text-sm text-gray-800">
+                        <span className="font-bold ">{totalCount}</span> Camera
+                        present
+                      </span>
+                    </div>
+                  </div>
+                  <div className="relative flex flex-col gap-8 rounded-b-lg bg-white p-6">
+                    <div>
+                      <FieldLabel className="text-sm">
+                        Filter by Location
+                      </FieldLabel>
+                      <div>
+                        <LocationSelect
+                          key={qParams.location}
+                          name="Facilities"
+                          setSelected={(location) => {
+                            location
+                              ? updateQuery({ location })
+                              : removeFilter("location");
+                          }}
+                          selected={qParams.location}
+                          showAll={false}
+                          multiple={false}
+                          facilityId={facilityId}
+                          errors=""
+                          errorClassName="hidden"
+                        />
+                      </div>
+                    </div>
+                    <CheckBoxFormField
+                      name="bed_is_occupied"
+                      label="Hide Cameras without Patient"
+                      value={
+                        qParams.bed_is_occupied === "true" ||
+                        qParams.bed_is_occupied === undefined
+                      }
+                      onChange={({ name, value }) => {
+                        if (value) {
+                          updateQuery({ [name]: value });
+                        } else {
+                          removeFilter(name);
+                        }
+                      }}
+                      labelClassName="text-sm"
+                      errorClassName="hidden"
+                    />
+                    <ButtonV2
+                      variant="secondary"
+                      border
+                      onClick={() => setFullscreen(!isFullscreen)}
+                      className="tooltip !h-11"
+                    >
+                      <CareIcon
+                        className={classNames(
+                          isFullscreen
+                            ? "care-l-compress-arrows"
+                            : "care-l-expand-arrows-alt",
+                          "text-lg"
+                        )}
+                      />
+                      {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
+                    </ButtonV2>
+                  </div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </Popover>
+
+          <Pagination
+            className=""
+            cPage={qParams.page}
+            defaultPerPage={PER_PAGE_LIMIT}
+            data={{ totalCount }}
+            onChange={(page) => updatePage(page)}
+          />
+        </div>
+      }
+    >
+      {assets === undefined ? (
+        <Loading />
+      ) : assets.length === 0 ? (
+        <div className="flex h-[80vh] w-full items-center justify-center text-center text-black">
+          No Camera present in this location or facility.
+        </div>
+      ) : (
+        <div className="mt-1 grid grid-cols-1 gap-2 pl-4 xl:grid-cols-1 3xl:grid-cols-2">
+          {assets.map((asset, idx) => (
+            <div className="text-clip" key={idx}>
+              {/* <LiveFeedTile assetId={asset.asset.id} key={asset?.bed.id} /> */}
+              <LiveFeedTile
+                middlewareHostname={facility?.middleware_address}
+                asset={getCameraConfig(asset)}
+                showRefreshButton={true}
+                refreshPresetsHash={refresh_presets_hash}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </Page>
+  );
+}
diff --git a/src/Components/Facility/LiveFeedTile.tsx b/src/Components/Facility/LiveFeedTile.tsx
new file mode 100644
index 00000000000..945240b9c6c
--- /dev/null
+++ b/src/Components/Facility/LiveFeedTile.tsx
@@ -0,0 +1,1045 @@
+// import axios from "axios";
+// import React, { useEffect, useState, useRef, useCallback } from "react";
+// import * as Notification from "../../Utils/Notifications.js";
+// import { useDispatch } from "react-redux";
+// import ReactPlayer from "react-player";
+// import { getAsset, listAssetBeds } from "../../Redux/actions";
+// import { statusType, useAbortableEffect } from "../../Common/utils";
+// import { useTranslation } from "react-i18next";
+// import useFullscreen from "../../Common/hooks/useFullscreen.js";
+// interface LiveFeedTileProps {
+//   assetId: string;
+// }
+
+// interface CameraPosition {
+//   x: number;
+//   y: number;
+//   zoom: number;
+// }
+
+// // string:string dictionary
+// interface CameraPreset {
+//   [key: string]: string;
+// }
+
+// export default function LiveFeedTile(props: LiveFeedTileProps) {
+//   const dispatch: any = useDispatch();
+//   const { assetId } = props;
+//   const [sourceUrl, setSourceUrl] = useState<string>();
+//   const [asset, setAsset] = useState<any>();
+//   const [presets, setPresets] = useState<CameraPreset[]>([]);
+//   const [bedPresets, setBedPresets] = useState<any>([]);
+//   const [loading, setLoading] = useState<boolean>(true);
+//   // const [showControls, setShowControls] = useState<boolean>(false);
+//   const [showDefaultPresets, setShowDefaultPresets] = useState<boolean>(false);
+//   const [position, setPosition] = useState<CameraPosition>({
+//     x: 0,
+//     y: 0,
+//     zoom: 0,
+//   });
+//   const { t } = useTranslation();
+//   const [_isFullscreen, setFullscreen] = useFullscreen();
+//   // const [toggle, setToggle] = useState(false);
+
+//   useEffect(() => {
+//     let loadingTimeout: any;
+//     if (loading === true)
+//       loadingTimeout = setTimeout(() => {
+//         setLoading(false);
+//       }, 6000);
+//     return () => {
+//       if (loadingTimeout) clearTimeout(loadingTimeout);
+//     };
+//   }, [loading]);
+
+//   const fetchData = useCallback(
+//     async (status: statusType) => {
+//       setLoading(true);
+//       console.log("fetching asset");
+//       const assetData: any = await dispatch(getAsset(assetId));
+//       if (!status.aborted) {
+//         // setLoading(false);
+//         if (!assetData.data)
+//           Notification.Error({
+//             msg: t("something_went_wrong"),
+//           });
+//         else {
+//           setAsset(assetData.data);
+//         }
+//       }
+//     },
+//     [dispatch, assetId]
+//   );
+
+//   useAbortableEffect(
+//     (status: statusType) => fetchData(status),
+//     [dispatch, fetchData]
+//   );
+//   const requestStream = () => {
+//     axios
+//       .post(`https://${asset.meta.middleware_hostname}/start`, {
+//         uri: "rtsp://remote:qwerty123@192.168.1.64:554/",
+//       })
+//       .then((resp: any) => {
+//         setSourceUrl(
+//           `https://${asset.meta.middleware_hostname}${resp.data.uri}`
+//         );
+//       })
+//       .catch((_ex: any) => {
+//         // console.error('Error while refreshing',ex);
+//       });
+//   };
+//   const stopStream = (url: string | undefined) => {
+//     console.log("stop", url);
+//     if (url) {
+//       const urlSegments = url.split("/");
+//       const id = urlSegments?.pop();
+//       axios
+//         .post(`https://${asset.meta.middleware_hostname}/stop`, {
+//           id,
+//         })
+//         .then((resp: any) => {
+//           console.log(resp);
+//           // setSourceUrl(`https://${middlewareHostname}${resp.data.uri}`);
+//         })
+//         .catch((_ex: any) => {
+//           // console.error('Error while refreshing',ex);
+//         });
+//     }
+//   };
+//   const getCameraStatus = (asset: any) => {
+//     axios
+//       .get(
+//         `https://${asset.meta.middleware_hostname}/status?hostname=${asset.hostname}&port=${asset.port}&username=${asset.username}&password=${asset.password}`
+//       )
+//       .then((resp: any) => {
+//         setPosition(resp.data.position);
+//       })
+//       .catch((_ex: any) => {
+//         // console.error('Error while refreshing',ex);
+//       });
+//   };
+//   const getPresets = (asset: any) => {
+//     const url = `https://${asset.meta.middleware_hostname}/presets?hostname=${asset.hostname}&port=${asset.port}&username=${asset.username}&password=${asset.password}`;
+//     axios
+//       .get(url)
+//       .then((resp: any) => {
+//         setPresets(resp.data);
+//       })
+//       .catch((_ex: any) => {
+//         // console.error("Error while refreshing", ex);
+//       });
+//   };
+//   const getBedPresets = async (_asset: any) => {
+//     const bedAssets = await dispatch(listAssetBeds({ asset: props.assetId }));
+//     setBedPresets(bedAssets.data.results);
+//   };
+//   const gotoBedPreset = (preset: any) => {
+//     absoluteMove(preset.meta.position);
+//   };
+//   const gotoPreset = (preset: number) => {
+//     axios
+//       .post(`https://${asset.meta.middleware_hostname}/gotoPreset`, {
+//         ...asset,
+//         preset,
+//       })
+//       .then((resp: any) => {
+//         console.log(resp.data);
+//       })
+//       .catch((_ex: any) => {
+//         // console.error('Error while refreshing',ex);
+//       });
+//   };
+//   const requestPTZ = (action: string) => {
+//     setLoading(true);
+//     if (!position) {
+//       getCameraStatus(asset);
+//     } else {
+//       const data = {
+//         x: 0,
+//         y: 0,
+//         zoom: 0,
+//       } as any;
+//       console.log(action);
+//       // Relative X Y Coordinates
+//       switch (action) {
+//         case "up":
+//           data.y = 0.05;
+//           break;
+//         case "down":
+//           data.y = -0.05;
+//           break;
+//         case "left":
+//           data.x = -0.05;
+//           break;
+//         case "right":
+//           data.x = 0.05;
+//           break;
+//         case "zoomIn":
+//           data.zoom = 0.05;
+//           break;
+//         case "zoomOut":
+//           data.zoom = -0.05;
+//           break;
+//         case "stop":
+//           stopStream(sourceUrl);
+//           setSourceUrl(undefined);
+//           return;
+//         case "reset":
+//           setSourceUrl(undefined);
+//           requestStream();
+//           return;
+//         default:
+//           break;
+//       }
+//       axios
+//         .post(`https://${asset.meta.middleware_hostname}/relativeMove`, {
+//           ...data,
+//           ...asset,
+//         })
+//         .then((resp: any) => {
+//           console.log(resp.data);
+//           getCameraStatus(asset);
+//         })
+//         .catch((_ex: any) => {
+//           // console.error('Error while refreshing',ex);
+//         });
+//     }
+//   };
+
+//   const absoluteMove = (data: any) => {
+//     setLoading(true);
+//     axios
+//       .post(`https://${asset.meta.middleware_hostname}/absoluteMove`, {
+//         ...data,
+//         ...asset,
+//       })
+//       .then((_resp: any) => {
+//         getCameraStatus(asset);
+//       })
+//       .catch((ex: any) => {
+//         console.error("Error while absolute move", ex);
+//       });
+//   };
+
+//   useEffect(() => {
+//     if (asset) {
+//       getPresets(asset);
+//       getBedPresets(asset);
+//       requestStream();
+//     }
+//   }, [asset]);
+
+//   useEffect(() => {
+//     if (bedPresets.length > 0) absoluteMove(bedPresets[0].meta.position);
+//   }, [bedPresets]);
+
+//   // useEffect(() => {
+//   //   const timer = setTimeout(() => {
+//   //     setShowControls(toggle);
+//   //   }, 300);
+//   //   return () => clearTimeout(timer);
+//   // }, [toggle]);
+
+//   const liveFeedPlayerRef = useRef<any>(null);
+//   const handleClickFullscreen = () => {
+//     if (liveFeedPlayerRef.current) {
+//       setFullscreen(true, liveFeedPlayerRef.current.wrapper);
+//     }
+//   };
+
+//   const viewOptions = presets
+//     ? Object.entries(presets)
+//         .map(([key, value]) => ({ label: key, value }))
+//         .slice(0, 10)
+//     : Array.from(Array(10), (_, i) => ({
+//         label: t("monitor") + (i + 1),
+//         value: i + 1,
+//       }));
+
+//   const cameraPTZ = [
+//     { icon: "fa fa-arrow-up", label: t("up"), action: "up" },
+//     { icon: "fa fa-arrow-down", label: t("down"), action: "down" },
+//     { icon: "fa fa-arrow-left", label: t("left"), action: "left" },
+//     { icon: "fa fa-arrow-right", label: t("right"), action: "right" },
+//     { icon: "fa fa-search-plus", label: t("zoom_in"), action: "zoomIn" },
+//     { icon: "fa fa-search-minus", label: t("zoom_out"), action: "zoomOut" },
+//     { icon: "fa fa-stop", label: t("stop"), action: "stop" },
+//     { icon: "fa fa-undo", label: t("reset"), action: "reset" },
+//   ];
+
+//   return (
+//     <div className="mb-2 mt-4 px-6">
+//       <div className="mt-4 flex flex-col">
+//         <div className="group relative mt-4 flex flex-col">
+//           <div>
+//             {sourceUrl ? (
+//               <div>
+//                 <ReactPlayer
+//                   url={sourceUrl}
+//                   ref={liveFeedPlayerRef}
+//                   playing={true}
+//                   muted={true}
+//                   onError={(
+//                     e: any,
+//                     data: any,
+//                     hlsInstance: any,
+//                     hlsGlobal: any
+//                   ) => {
+//                     // requestStream();
+//                     console.log("Error", e);
+//                     console.log("Data", data);
+//                     console.log("HLS Instance", hlsInstance);
+//                     console.log("HLS Global", hlsGlobal);
+//                     if (e === "hlsError") {
+//                       const recovered = hlsInstance.recoverMediaError();
+//                       console.log(recovered);
+//                     }
+//                   }}
+//                 />
+//               </div>
+//             ) : (
+//               <div className="flex h-[50vw] w-[88vw] flex-col items-center justify-center bg-gray-500 xl:h-[25vw] xl:w-[44vw] 3xl:h-[18vw] 3xl:w-[32vw]">
+//                 <p className="font-bold text-black">
+//                   STATUS: <span className="text-red-600">OFFLINE</span>
+//                 </p>
+//                 <p className="font-semibold text-black">
+//                   {t("feed_is_currently_not_live")}
+//                 </p>
+//               </div>
+//             )}
+//           </div>
+//           <div className="invisible absolute h-[50vw] w-[88vw] group-hover:visible xl:h-[25vw] xl:w-[44vw] 3xl:h-[18vw] 3xl:w-[32vw]">
+//             <div className="flex h-full items-end justify-center">
+//               <div className="flex flex-row justify-between">
+//                 <div className="mt-5 flex flex-1 flex-row justify-evenly rounded border border-white bg-green-100 p-2">
+//                   {cameraPTZ.map((option: any) => (
+//                     <div
+//                       key={option.action}
+//                       onClick={(_) => {
+//                         // console.log(option.action);
+//                         requestPTZ(option.action);
+//                       }}
+//                     >
+//                       <button className="rounded border border-green-100 bg-green-100 p-2 hover:bg-green-200">
+//                         <span className="sr-only">{option.label}</span>
+//                         <i className={`${option.icon} md:p-2`}></i>
+//                       </button>
+//                     </div>
+//                   ))}
+//                   <button
+//                     className="rounded border border-green-100 bg-green-100 p-2 hover:bg-green-200"
+//                     onClick={handleClickFullscreen}
+//                   >
+//                     <span className="sr-only">{t("full_screen")}</span>
+//                     <i className="fas fa-expand hover:text-black"></i>
+//                   </button>
+//                 </div>
+//                 {/* <div className="flex flex-col justify-center mt-5 mr-4 md:mt-auto md:mr-0">
+//                     <button onClick={handleClickFullscreen}>
+//                     </button>
+//                   </div> */}
+//               </div>
+//             </div>
+//           </div>
+//           <div
+//             className={
+//               (loading ? "absolute" : "hidden") +
+//               " z-10 h-[50vw] w-[88vw] bg-gray-500 bg-opacity-75 transition-opacity xl:h-[25vw] xl:w-[44vw] 3xl:h-[18vw] 3xl:w-[32vw]"
+//             }
+//           >
+//             {/* div with "Loading" at the center */}
+//             <div className="flex h-full items-center justify-center">
+//               <svg
+//                 className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+//                 xmlns="http://www.w3.org/2000/svg"
+//                 fill="none"
+//                 viewBox="0 0 24 24"
+//               >
+//                 <circle
+//                   className="opacity-25"
+//                   cx="12"
+//                   cy="12"
+//                   r="10"
+//                   stroke="currentColor"
+//                   strokeWidth="4"
+//                 ></circle>
+//                 <path
+//                   className="opacity-75"
+//                   fill="currentColor"
+//                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+//                 ></path>
+//               </svg>
+//               <div className="text-2xl text-white">{t("moving_camera")}</div>
+//             </div>
+//           </div>
+//         </div>
+//         <div className="my-auto mt-4 flex max-w-[86vw] flex-wrap gap-4 xl:max-w-[43vw] 3xl:max-w-[30vw]">
+//           <button
+//             className="rounded-md border border-white bg-green-200 px-3 py-2 font-semibold text-black hover:bg-green-300"
+//             onClick={() => {
+//               setShowDefaultPresets(!showDefaultPresets);
+//             }}
+//           >
+//             {showDefaultPresets
+//               ? t("show_patient_presets")
+//               : t("show_default_presets")}
+//           </button>
+//           {showDefaultPresets
+//             ? viewOptions.map((option: any) => (
+//                 <div
+//                   onClick={() => {
+//                     setLoading(true);
+//                     gotoPreset(option.value);
+//                   }}
+//                 >
+//                   <button className="w-full rounded-md border border-white bg-green-100 px-3 py-2 font-semibold text-black hover:bg-green-200">
+//                     {option.label}
+//                   </button>
+//                 </div>
+//               ))
+//             : bedPresets.map((preset: any, index: number) => (
+//                 <div
+//                   onClick={() => {
+//                     setLoading(true);
+//                     gotoBedPreset(preset);
+//                   }}
+//                   key={preset.id}
+//                 >
+//                   <button className="w-full rounded-md border border-white bg-green-100 px-3 py-2 font-semibold text-black hover:bg-green-200">
+//                     {preset.meta.preset_name
+//                       ? preset.meta.preset_name
+//                       : `Unnamed Preset ${index + 1}`}
+//                   </button>
+//                 </div>
+//               ))}
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }
+
+import { useEffect, useState, useRef } from "react";
+import { useDispatch } from "react-redux";
+import useKeyboardShortcut from "use-keyboard-shortcut";
+import {
+  listAssetBeds,
+  partialUpdateAssetBed,
+  deleteAssetBed,
+} from "../../Redux/actions";
+import { getCameraPTZ } from "../../Common/constants";
+import {
+  StreamStatus,
+  useMSEMediaPlayer,
+} from "../../Common/hooks/useMSEplayer";
+import { useFeedPTZ } from "../../Common/hooks/useFeedPTZ";
+import * as Notification from "../../Utils/Notifications.js";
+import { AxiosError } from "axios";
+import { BedSelect } from "../Common/BedSelect";
+import { BedModel } from "./models";
+import useWindowDimensions from "../../Common/hooks/useWindowDimensions";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import ConfirmDialog from "../Common/ConfirmDialog";
+import { FieldLabel } from "../Form/FormFields/FormField";
+import useFullscreen from "../../Common/hooks/useFullscreen";
+import { FeedCameraPTZHelpButton } from "./Consultations/Feed";
+
+const LiveFeed = (props: any) => {
+  const middlewareHostname =
+    props.middlewareHostname || "dev_middleware.coronasafe.live";
+  const [presetsPage, setPresetsPage] = useState(0);
+  const cameraAsset = props.asset;
+  const [presets, setPresets] = useState<any>([]);
+  const [bedPresets, setBedPresets] = useState<any>([]);
+  const [showDefaultPresets, setShowDefaultPresets] = useState<boolean>(false);
+  const [precision, setPrecision] = useState(1);
+  const [streamStatus, setStreamStatus] = useState<StreamStatus>(
+    StreamStatus.Offline
+  );
+  const [videoStartTime, setVideoStartTime] = useState<Date | null>(null);
+  const [bed, setBed] = useState<BedModel>({});
+  const [preset, setNewPreset] = useState<string>("");
+  const [loading, setLoading] = useState<string | undefined>();
+  const dispatch: any = useDispatch();
+  const [page, setPage] = useState({
+    count: 0,
+    limit: 8,
+    offset: 0,
+  });
+  const [toDelete, setToDelete] = useState<any>(null);
+  const [toUpdate, setToUpdate] = useState<any>(null);
+  const [_isFullscreen, setFullscreen] = useFullscreen();
+
+  const { width } = useWindowDimensions();
+  const extremeSmallScreenBreakpoint = 320;
+  const isExtremeSmallScreen =
+    width <= extremeSmallScreenBreakpoint ? true : false;
+  const liveFeedPlayerRef = useRef<any>(null);
+
+  const videoEl = liveFeedPlayerRef.current as HTMLVideoElement;
+
+  const url = `wss://${middlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`;
+
+  const { startStream } = useMSEMediaPlayer({
+    config: {
+      middlewareHostname,
+      ...cameraAsset,
+    },
+    url,
+    videoEl,
+  });
+
+  const refreshPresetsHash = props.refreshPresetsHash;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [currentPreset, setCurrentPreset] = useState<any>();
+  const {
+    absoluteMove,
+    getCameraStatus,
+    getPTZPayload,
+    getPresets,
+    gotoPreset,
+    relativeMove,
+  } = useFeedPTZ({
+    config: {
+      middlewareHostname,
+      ...cameraAsset,
+    },
+    dispatch,
+  });
+
+  const fetchCameraPresets = () =>
+    getPresets({
+      onSuccess: (resp) => {
+        setPresets(resp);
+      },
+      onError: (resp) => {
+        resp instanceof AxiosError &&
+          Notification.Error({
+            msg: "Camera is offline",
+          });
+      },
+    });
+
+  const calculateVideoLiveDelay = () => {
+    const video = liveFeedPlayerRef.current as HTMLVideoElement;
+    if (!video || !videoStartTime) return 0;
+
+    const timeDifference =
+      (new Date().getTime() - videoStartTime.getTime()) / 1000;
+
+    return timeDifference - video.currentTime;
+  };
+
+  const getBedPresets = async (id: any) => {
+    const bedAssets = await dispatch(
+      listAssetBeds({
+        asset: id,
+        limit: page.limit,
+        offset: page.offset,
+      })
+    );
+    setBedPresets(bedAssets?.data?.results);
+    setPage({
+      ...page,
+      count: bedAssets?.data?.count,
+    });
+  };
+
+  const deletePreset = async (id: any) => {
+    const res = await dispatch(deleteAssetBed(id));
+    if (res?.status === 204) {
+      Notification.Success({ msg: "Preset deleted successfully" });
+      getBedPresets(cameraAsset.id);
+    } else {
+      Notification.Error({
+        msg: "Error while deleting Preset: " + (res?.data?.detail || ""),
+      });
+    }
+    setToDelete(null);
+  };
+
+  const updatePreset = async (currentPreset: any) => {
+    const data = {
+      bed_id: bed.id,
+      preset_name: preset,
+    };
+    const response = await dispatch(
+      partialUpdateAssetBed(
+        {
+          asset: currentPreset.asset_object.id,
+          bed: bed.id,
+          meta: {
+            ...currentPreset.meta,
+            ...data,
+          },
+        },
+        currentPreset?.id
+      )
+    );
+    if (response && response.status === 200) {
+      Notification.Success({ msg: "Preset Updated" });
+    } else {
+      Notification.Error({ msg: "Something Went Wrong" });
+    }
+    getBedPresets(cameraAsset?.id);
+    fetchCameraPresets();
+    setToUpdate(null);
+  };
+
+  const gotoBedPreset = (preset: any) => {
+    setLoading("Moving");
+    absoluteMove(preset.meta.position, {
+      onSuccess: () => setLoading(undefined),
+    });
+  };
+
+  useEffect(() => {
+    if (cameraAsset?.hostname) {
+      fetchCameraPresets();
+    }
+  }, []);
+
+  useEffect(() => {
+    setNewPreset(toUpdate?.meta?.preset_name);
+    setBed(toUpdate?.bed_object);
+  }, [toUpdate]);
+
+  useEffect(() => {
+    getBedPresets(cameraAsset.id);
+    if (bedPresets?.[0]?.position) {
+      absoluteMove(bedPresets[0]?.position, {});
+    }
+  }, [page.offset, cameraAsset.id, refreshPresetsHash]);
+
+  const viewOptions = (page: number) => {
+    return presets
+      ? Object.entries(presets)
+          .map(([key, value]) => ({ label: key, value }))
+          .slice(page, page + 10)
+      : Array.from(Array(10), (_, i) => ({
+          label: "Monitor " + (i + 1),
+          value: i + 1,
+        }));
+  };
+  useEffect(() => {
+    let tId: any;
+    if (streamStatus !== StreamStatus.Playing) {
+      setStreamStatus(StreamStatus.Loading);
+      tId = setTimeout(() => {
+        startStream({
+          onSuccess: () => setStreamStatus(StreamStatus.Playing),
+          onError: () => setStreamStatus(StreamStatus.Offline),
+        });
+      }, 500);
+    }
+
+    return () => {
+      clearTimeout(tId);
+    };
+  }, [startStream, streamStatus]);
+
+  const handlePagination = (cOffset: number) => {
+    setPage({
+      ...page,
+      offset: cOffset,
+    });
+  };
+
+  const cameraPTZActionCBs: { [key: string]: (option: any) => void } = {
+    precision: () => {
+      setPrecision((precision: number) =>
+        precision === 16 ? 1 : precision * 2
+      );
+    },
+    reset: () => {
+      setStreamStatus(StreamStatus.Loading);
+      setVideoStartTime(null);
+      startStream({
+        onSuccess: () => setStreamStatus(StreamStatus.Playing),
+        onError: () => setStreamStatus(StreamStatus.Offline),
+      });
+    },
+    fullScreen: () => {
+      if (!liveFeedPlayerRef.current) return;
+      setFullscreen(true, liveFeedPlayerRef.current);
+    },
+    updatePreset: (option) => {
+      getCameraStatus({
+        onSuccess: async (data) => {
+          console.log({ currentPreset, data });
+          if (currentPreset?.asset_object?.id && data?.position) {
+            setLoading(option.loadingLabel);
+            console.log("Updating Preset");
+            const response = await dispatch(
+              partialUpdateAssetBed(
+                {
+                  asset: currentPreset.asset_object.id,
+                  bed: currentPreset.bed_object.id,
+                  meta: {
+                    ...currentPreset.meta,
+                    position: data?.position,
+                  },
+                },
+                currentPreset?.id
+              )
+            );
+            if (response && response.status === 200) {
+              Notification.Success({ msg: "Preset Updated" });
+              getBedPresets(cameraAsset?.id);
+              fetchCameraPresets();
+            }
+            setLoading(undefined);
+          }
+        },
+      });
+    },
+    other: (option) => {
+      setLoading(option.loadingLabel);
+      relativeMove(getPTZPayload(option.action, precision), {
+        onSuccess: () => setLoading(undefined),
+      });
+    },
+  };
+
+  const cameraPTZ = getCameraPTZ(precision).map((option) => {
+    const cb =
+      cameraPTZActionCBs[
+        cameraPTZActionCBs[option.action] ? option.action : "other"
+      ];
+    return { ...option, callback: () => cb(option) };
+  });
+
+  // Voluntarily disabling eslint, since length of `cameraPTZ` is constant and
+  // hence shall not cause issues. (https://news.ycombinator.com/item?id=24363703)
+  for (const option of cameraPTZ) {
+    if (!option.shortcutKey) continue;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useKeyboardShortcut(option.shortcutKey, option.callback);
+  }
+
+  return (
+    <div>
+      {toDelete && (
+        <ConfirmDialog
+          show
+          title="Are you sure you want to delete this preset?"
+          description={
+            <span>
+              <p>
+                Preset: <strong>{toDelete.meta.preset_name}</strong>
+              </p>
+              <p>
+                Bed: <strong>{toDelete.bed_object.name}</strong>
+              </p>
+            </span>
+          }
+          action="Delete"
+          variant="danger"
+          onClose={() => setToDelete(null)}
+          onConfirm={() => deletePreset(toDelete.id)}
+        />
+      )}
+      {toUpdate && (
+        <ConfirmDialog
+          show
+          title="Update Preset"
+          description={"Preset: " + toUpdate.meta.preset_name}
+          action="Update"
+          variant="primary"
+          onClose={() => setToUpdate(null)}
+          onConfirm={() => updatePreset(toUpdate)}
+        >
+          <div className="mt-4 flex flex-col">
+            <FieldLabel required>Bed</FieldLabel>
+            <BedSelect
+              name="bed"
+              setSelected={(selected) => setBed(selected as BedModel)}
+              selected={bed}
+              error=""
+              multiple={false}
+              location={cameraAsset.location_id}
+              facility={cameraAsset.facility_id}
+            />
+          </div>
+        </ConfirmDialog>
+      )}
+      <div className="mt-4 flex flex-col">
+        <div className="relative mt-4 flex flex-col gap-4 lg:flex-row">
+          <div className="flex flex-1 flex-col items-center">
+            {/* ADD VIDEO PLAYER HERE */}
+            <div className="relative mb-4 aspect-video w-full rounded bg-primary-100 lg:mb-0">
+              <video
+                id="mse-video"
+                autoPlay
+                muted
+                playsInline
+                className="z-10 h-full w-full"
+                ref={liveFeedPlayerRef}
+                onPlay={() => {
+                  setVideoStartTime(() => new Date());
+                }}
+                onWaiting={() => {
+                  const delay = calculateVideoLiveDelay();
+                  if (delay > 5) {
+                    setStreamStatus(StreamStatus.Loading);
+                  }
+                }}
+              ></video>
+
+              {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" />
+                    <span>Slow Network Detected</span>
+                  </div>
+                )}
+
+              {loading && (
+                <div className="absolute bottom-0 right-0 rounded-tl bg-white/75 p-4">
+                  <div className="flex items-center gap-2">
+                    <div className="an h-4 w-4 animate-spin rounded-full border-2 border-b-0 border-primary-500" />
+                    <p className="text-base font-bold">{loading}</p>
+                  </div>
+                </div>
+              )}
+              {/* { streamStatus > 0 && */}
+              <div className="absolute bottom-0 right-0 flex h-full w-full items-center justify-center p-4">
+                {streamStatus === StreamStatus.Offline && (
+                  <div className="text-center">
+                    <p className="font-bold text-black">
+                      STATUS: <span className="text-red-600">OFFLINE</span>
+                    </p>
+                    <p className="font-semibold text-black">
+                      Feed is currently not live.
+                    </p>
+                    <p className="font-semibold text-black">
+                      Click refresh button to try again.
+                    </p>
+                  </div>
+                )}
+                {streamStatus === StreamStatus.Stop && (
+                  <div className="text-center">
+                    <p className="font-bold text-black">
+                      STATUS: <span className="text-red-600">STOPPED</span>
+                    </p>
+                    <p className="font-semibold text-black">Feed is Stooped.</p>
+                    <p className="font-semibold text-black">
+                      Click refresh button to start feed.
+                    </p>
+                  </div>
+                )}
+                {streamStatus === StreamStatus.Loading && (
+                  <div className="text-center">
+                    <p className="font-bold text-black">
+                      STATUS: <span className="text-red-600"> LOADING</span>
+                    </p>
+                    <p className="font-semibold text-black">
+                      Fetching latest feed.
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+            <div
+              className={`${
+                isExtremeSmallScreen ? " flex flex-wrap " : " md:flex "
+              } mt-4 max-w-lg`}
+            >
+              {cameraPTZ.map((option) => {
+                const shortcutKeyDescription =
+                  option.shortcutKey &&
+                  option.shortcutKey
+                    .join(" + ")
+                    .replace("Control", "Ctrl")
+                    .replace("ArrowUp", "↑")
+                    .replace("ArrowDown", "↓")
+                    .replace("ArrowLeft", "←")
+                    .replace("ArrowRight", "→");
+
+                return (
+                  <button
+                    className="tooltip flex-1 border border-green-100 bg-green-100 p-2 hover:bg-green-200"
+                    onClick={option.callback}
+                  >
+                    <span className="sr-only">{option.label}</span>
+                    {option.icon ? (
+                      <CareIcon className={`care-${option.icon}`} />
+                    ) : (
+                      <span className="flex h-full w-8 items-center justify-center px-2 font-bold">
+                        {option.value}x
+                      </span>
+                    )}
+                    <span className="tooltip-text tooltip-top -translate-x-1/2 text-sm font-semibold">{`${option.label}  (${shortcutKeyDescription})`}</span>
+                  </button>
+                );
+              })}
+              <div className="hideonmobilescreen pl-3">
+                <FeedCameraPTZHelpButton cameraPTZ={cameraPTZ} />
+              </div>
+            </div>
+          </div>
+
+          <div className="mx-4 flex max-w-sm flex-col">
+            <nav className="flex flex-wrap">
+              <button
+                className={`flex-1 p-4  text-center font-bold  text-gray-700 hover:text-gray-800  ${
+                  showDefaultPresets
+                    ? "border-b-2 border-primary-500 text-primary-600"
+                    : ""
+                }`}
+                onClick={() => {
+                  setShowDefaultPresets(true);
+                }}
+              >
+                Default Presets
+              </button>
+              <button
+                className={`flex-1 p-4  text-center font-bold  text-gray-700 hover:text-gray-800  ${
+                  !showDefaultPresets
+                    ? "border-b-2 border-primary-500 text-primary-600"
+                    : ""
+                }`}
+                onClick={() => {
+                  setShowDefaultPresets(false);
+                }}
+              >
+                Patient Presets
+              </button>
+            </nav>
+            <div className="my-2 w-full space-y-4">
+              <div
+                className={`grid ${
+                  isExtremeSmallScreen ? " sm:grid-cols-2 " : " grid-cols-2 "
+                } my-auto gap-2`}
+              >
+                {showDefaultPresets ? (
+                  <>
+                    {viewOptions(presetsPage)?.map((option: any, i) => (
+                      <button
+                        key={i}
+                        className="max- flex w-full flex-wrap gap-2 truncate rounded-md border border-white bg-green-100 p-3  text-black hover:bg-green-500 hover:text-white"
+                        onClick={() => {
+                          setLoading(`Moving to Preset ${option.label}`);
+                          gotoPreset(
+                            { preset: option.value },
+                            {
+                              onSuccess: () => {
+                                setLoading(undefined);
+                                console.log("Preset Updated", option);
+                              },
+                            }
+                          );
+                        }}
+                      >
+                        {option.label}
+                      </button>
+                    ))}
+                  </>
+                ) : (
+                  <>
+                    {bedPresets?.map((preset: any, index: number) => (
+                      <div className="flex flex-col">
+                        <button
+                          key={preset.id}
+                          className="flex flex-col truncate rounded-t-md border border-white bg-green-100 p-2  text-black hover:bg-green-500 hover:text-white"
+                          onClick={() => {
+                            setLoading("Moving");
+                            gotoBedPreset(preset);
+                            setCurrentPreset(preset);
+                            getBedPresets(cameraAsset?.id);
+                            fetchCameraPresets();
+                          }}
+                        >
+                          <span className="justify-start text-xs font-semibold">
+                            {preset.bed_object.name}
+                          </span>
+                          <span className="mx-auto">
+                            {preset.meta.preset_name
+                              ? preset.meta.preset_name
+                              : `Unnamed Preset ${index + 1}`}
+                          </span>
+                        </button>
+                        <div className="flex">
+                          <button
+                            onClick={() => setToUpdate(preset)}
+                            className="flex w-1/2 items-center justify-center gap-2 bg-green-200 py-1 text-sm text-green-800 hover:bg-green-800 hover:text-green-200 "
+                          >
+                            <i className="fa-solid fa-pencil"></i>
+                          </button>
+                          <button
+                            onClick={() => setToDelete(preset)}
+                            className="flex w-1/2 items-center justify-center gap-2 bg-red-200 py-1 text-sm text-red-800 hover:bg-red-800 hover:text-red-200 "
+                          >
+                            <i className="fa-solid fa-trash-can"></i>
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </>
+                )}
+              </div>
+              {/* Page Number Next and Prev buttons */}
+              {showDefaultPresets ? (
+                <div className="flex flex-row gap-1">
+                  <button
+                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    disabled={presetsPage < 10}
+                    onClick={() => {
+                      setPresetsPage(presetsPage - 10);
+                    }}
+                  >
+                    <i className="fas fa-arrow-left"></i>
+                  </button>
+                  <button
+                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    disabled={presetsPage >= presets?.length}
+                    onClick={() => {
+                      setPresetsPage(presetsPage + 10);
+                    }}
+                  >
+                    <i className="fas fa-arrow-right"></i>
+                  </button>
+                </div>
+              ) : (
+                <div className="flex flex-row gap-1">
+                  <button
+                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    disabled={page.offset === 0}
+                    onClick={() => {
+                      handlePagination(page.offset - page.limit);
+                    }}
+                  >
+                    <i className="fas fa-arrow-left"></i>
+                  </button>
+                  <button
+                    className="flex-1 p-4  text-center font-bold  text-gray-700 hover:bg-gray-300 hover:text-gray-800"
+                    disabled={page.offset + page.limit >= page.count}
+                    onClick={() => {
+                      handlePagination(page.offset + page.limit);
+                    }}
+                  >
+                    <i className="fas fa-arrow-right"></i>
+                  </button>
+                </div>
+              )}
+              {props?.showRefreshButton && (
+                <button
+                  className="w-full rounded-md border border-white bg-green-100 px-3 py-2 font-semibold text-black hover:bg-green-500 hover:text-white"
+                  onClick={() => {
+                    getBedPresets(cameraAsset?.id);
+                    fetchCameraPresets();
+                  }}
+                >
+                  <CareIcon className="care-l-redo h-4 text-lg" /> Refresh
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LiveFeed;
diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
index 3fbd80ac8b2..674c161428d 100644
--- a/src/Components/Facility/TreatmentSummary.tsx
+++ b/src/Components/Facility/TreatmentSummary.tsx
@@ -236,13 +236,6 @@ const TreatmentSummary = (props: any) => {
                       : "    ---"}
                   </div>
 
-                  <div>
-                    <b>Diagnosis :</b>
-                    {consultationData.diagnosis
-                      ? consultationData.diagnosis
-                      : "    ---"}
-                  </div>
-
                   <div>
                     <b>Physical Examination info :</b>
                     {dailyRounds.physical_examination_info
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index f5ddde19d2d..bd0f4eafeda 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -3,6 +3,7 @@ import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
 import { NormalPrescription, PRNPrescription } from "../Medicine/models";
 import { AssetData } from "../Assets/AssetTypes";
 import { UserBareMinimum } from "../Users/models";
+import { ConsultationDiagnosis, CreateDiagnosis } from "../Diagnosis/types";
 
 export interface LocalBodyModel {
   name: string;
@@ -52,10 +53,10 @@ export interface FacilityModel {
   ward_object?: WardModel;
   modified_date?: string;
   created_date?: string;
-  state: number;
-  district: number;
-  local_body: number;
-  ward: number;
+  state?: number;
+  district?: number;
+  local_body?: number;
+  ward?: number;
 }
 
 export interface CapacityModal {
@@ -113,10 +114,8 @@ export interface ConsultationModel {
   consultation_status?: number;
   is_kasp?: boolean;
   kasp_enabled_date?: string;
-  diagnosis?: string;
-  icd11_diagnoses_object?: ICD11DiagnosisModel[];
-  icd11_provisional_diagnoses_object?: ICD11DiagnosisModel[];
-  icd11_principal_diagnosis?: ICD11DiagnosisModel["id"];
+  readonly diagnoses?: ConsultationDiagnosis[];
+  create_diagnoses?: CreateDiagnosis[]; // Used for bulk creating diagnoses upon consultation creation
   deprecated_verified_by?: string;
   verified_by?: string;
   verified_by_object?: UserBareMinimum;
@@ -222,10 +221,3 @@ export interface CurrentBed {
   end_date: string;
   meta: Record<string, any>;
 }
-
-// Voluntarily made as `type` for it to achieve type-safety when used with
-// `useAsyncOptions<ICD11DiagnosisModel>`
-export type ICD11DiagnosisModel = {
-  id: string;
-  label: string;
-};
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index db2d1e888df..4ad68e96d73 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -10,6 +10,7 @@ import {
 import { useTranslation } from "react-i18next";
 
 interface Props {
+  id?: string;
   name?: string;
   selected: any | any[];
   fetchData: (search: string) => Promise<any> | undefined;
@@ -31,6 +32,7 @@ interface Props {
 
 const AutoCompleteAsync = (props: Props) => {
   const {
+    id,
     name,
     selected,
     fetchData,
@@ -82,6 +84,7 @@ const AutoCompleteAsync = (props: Props) => {
         <div className="relative mt-1">
           <div className="flex">
             <Combobox.Input
+              id={id}
               name={name}
               className="cui-input-base truncate pr-16"
               placeholder={
@@ -100,29 +103,31 @@ const AutoCompleteAsync = (props: Props) => {
               }}
               autoComplete="off"
             />
-            <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-secondary-900">
-                {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"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        onChange(null);
-                      }}
-                    />
-                    <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
-                      {t("clear_selection")}
-                    </span>
-                  </div>
-                )}
-                {loading ? (
-                  <CareIcon className="care-l-spinner -mb-1.5 animate-spin" />
-                ) : (
-                  <CareIcon className="care-l-angle-down -mb-1.5" />
-                )}
-              </div>
-            </Combobox.Button>
+            {!disabled && (
+              <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
+                  {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"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          onChange(null);
+                        }}
+                      />
+                      <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
+                        {t("clear_selection")}
+                      </span>
+                    </div>
+                  )}
+                  {loading ? (
+                    <CareIcon className="care-l-spinner -mb-1.5 animate-spin" />
+                  ) : (
+                    <CareIcon className="care-l-angle-down -mb-1.5" />
+                  )}
+                </div>
+              </Combobox.Button>
+            )}
           </div>
           <DropdownTransition>
             <Combobox.Options className="cui-dropdown-base absolute top-12 z-10 text-sm">
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index c4b3ea3686e..bf3840b2c44 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -160,32 +160,34 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
               onBlur={() => value && setQuery("")}
               autoComplete="off"
             />
-            <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-              <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
-                <span>{value?.icon}</span>
-
-                {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"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        props.onChange(undefined);
-                      }}
-                    />
-                    <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
-                      {t("clear_selection")}
-                    </span>
-                  </div>
-                )}
-
-                {props.isLoading ? (
-                  <CareIcon className="care-l-spinner animate-spin" />
-                ) : (
-                  <CareIcon className="care-l-angle-down" />
-                )}
-              </div>
-            </Combobox.Button>
+            {!props.disabled && (
+              <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+                <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
+                  <span>{value?.icon}</span>
+
+                  {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"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          props.onChange(undefined);
+                        }}
+                      />
+                      <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
+                        {t("clear_selection")}
+                      </span>
+                    </div>
+                  )}
+
+                  {props.isLoading ? (
+                    <CareIcon className="care-l-spinner animate-spin" />
+                  ) : (
+                    <CareIcon className="care-l-angle-down" />
+                  )}
+                </div>
+              </Combobox.Button>
+            )}
           </div>
 
           <DropdownTransition>
diff --git a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
index 35a125ae07d..9004dea939d 100644
--- a/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/Components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -119,15 +119,17 @@ export const AutocompleteMutliSelect = <T, V>(
               onChange={(event) => setQuery(event.target.value.toLowerCase())}
               autoComplete="off"
             />
-            <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 className="care-l-angle-down -mb-1.5" />
-                )}
-              </div>
-            </Combobox.Button>
+            {!props.disabled && (
+              <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-gray-900">
+                  {props.isLoading ? (
+                    <CareIcon className="care-l-spinner animate-spin" />
+                  ) : (
+                    <CareIcon className="care-l-angle-down -mb-1.5" />
+                  )}
+                </div>
+              </Combobox.Button>
+            )}
           </div>
           {value.length !== 0 && (
             <div className="flex flex-wrap gap-2 p-2">
diff --git a/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx b/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
index 02aa03fdf71..02f98a7ba17 100644
--- a/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
+++ b/src/Components/Form/FormFields/NumericWithUnitsFormField.tsx
@@ -35,7 +35,9 @@ export default function NumericWithUnitsFormField(props: Props) {
           autoComplete={props.autoComplete}
           required={field.required}
           value={numValue}
-          onChange={(e) => field.handleChange(e.target.value + " " + unitValue)}
+          onChange={(e) =>
+            field.handleChange(Number(e.target.value) + " " + unitValue)
+          }
         />
         <div className="absolute inset-y-0 right-0 flex items-center">
           <select
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index 6aa70f801de..b6af2bfaa24 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -138,7 +138,7 @@ const phoneNumberTypeIcons: Record<PhoneNumberType, string> = {
 const PhoneNumberTypesHelp = ({ types }: { types: PhoneNumberType[] }) => (
   <div className="flex gap-1">
     {types.map((type) => (
-      <span className="tooltip mt-1">
+      <span key={type} className="tooltip mt-1">
         <CareIcon
           className={classNames(
             `care-l-${phoneNumberTypeIcons[type]}`,
diff --git a/src/Components/Form/SelectMenuV2.tsx b/src/Components/Form/SelectMenuV2.tsx
index f26ce03f0c6..464a754cebe 100644
--- a/src/Components/Form/SelectMenuV2.tsx
+++ b/src/Components/Form/SelectMenuV2.tsx
@@ -9,7 +9,7 @@ type OptionCallback<T, R> = (option: T) => R;
 
 type SelectMenuProps<T, V = T> = {
   id?: string;
-  options: T[];
+  options: readonly T[];
   disabled?: boolean | undefined;
   value: V | undefined;
   placeholder?: ReactNode;
diff --git a/src/Components/Medicine/AdministerMedicine.tsx b/src/Components/Medicine/AdministerMedicine.tsx
index 5141d8f26bd..8798b476b06 100644
--- a/src/Components/Medicine/AdministerMedicine.tsx
+++ b/src/Components/Medicine/AdministerMedicine.tsx
@@ -1,10 +1,8 @@
 import { useState } from "react";
-import { PrescriptionActions } from "../../Redux/actions";
 import ConfirmDialog from "../Common/ConfirmDialog";
 import { Prescription } from "./models";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { Success } from "../../Utils/Notifications";
-import { useDispatch } from "react-redux";
 import PrescriptionDetailCard from "./PrescriptionDetailCard";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { formatDateTime } from "../../Utils/utils";
@@ -12,16 +10,18 @@ import { useTranslation } from "react-i18next";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import dayjs from "../../Utils/dayjs";
+import useSlug from "../../Common/hooks/useSlug";
+import request from "../../Utils/request/request";
+import MedicineRoutes from "./routes";
 
 interface Props {
   prescription: Prescription;
-  actions: ReturnType<ReturnType<typeof PrescriptionActions>["prescription"]>;
   onClose: (success: boolean) => void;
 }
 
 export default function AdministerMedicine({ prescription, ...props }: Props) {
   const { t } = useTranslation();
-  const dispatch = useDispatch<any>();
+  const consultation = useSlug("consultation");
   const [isLoading, setIsLoading] = useState(false);
   const [notes, setNotes] = useState<string>("");
   const [isCustomTime, setIsCustomTime] = useState(false);
@@ -52,13 +52,14 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
       onClose={() => props.onClose(false)}
       onConfirm={async () => {
         setIsLoading(true);
-        const res = await dispatch(
-          props.actions.administer({
+        const { res } = await request(MedicineRoutes.administerPrescription, {
+          pathParams: { consultation, external_id: prescription.id },
+          body: {
             notes,
             administered_date: isCustomTime ? customTime : undefined,
-          })
-        );
-        if (res.status === 201) {
+          },
+        });
+        if (res?.ok) {
           Success({ msg: t("medicines_administered") });
         }
         setIsLoading(false);
@@ -67,11 +68,7 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
       className="w-full md:max-w-4xl"
     >
       <div className="mt-4 flex flex-col gap-8">
-        <PrescriptionDetailCard
-          prescription={prescription}
-          readonly
-          actions={props.actions}
-        />
+        <PrescriptionDetailCard prescription={prescription} readonly />
 
         <div className="flex flex-col gap-4 lg:flex-row lg:gap-6">
           <TextAreaFormField
diff --git a/src/Components/Medicine/CreatePrescriptionForm.tsx b/src/Components/Medicine/CreatePrescriptionForm.tsx
index 2a58c632d20..d6691ebbc03 100644
--- a/src/Components/Medicine/CreatePrescriptionForm.tsx
+++ b/src/Components/Medicine/CreatePrescriptionForm.tsx
@@ -4,41 +4,50 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import { MedicineAdministrationRecord, Prescription } from "./models";
-import { PrescriptionActions } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
 import { useState } from "react";
 import NumericWithUnitsFormField from "../Form/FormFields/NumericWithUnitsFormField";
 import { useTranslation } from "react-i18next";
 import MedibaseAutocompleteFormField from "./MedibaseAutocompleteFormField";
 import dayjs from "../../Utils/dayjs";
 import { PrescriptionFormValidator } from "./validators";
+import MedicineRoutes from "./routes";
+import request from "../../Utils/request/request";
+import useSlug from "../../Common/hooks/useSlug";
+import { Success } from "../../Utils/Notifications";
 
 export default function CreatePrescriptionForm(props: {
   prescription: Prescription;
-  create: ReturnType<typeof PrescriptionActions>["create"];
   onDone: () => void;
 }) {
-  const dispatch = useDispatch<any>();
-  const [isCreating, setIsCreating] = useState(false);
   const { t } = useTranslation();
+  const consultation = useSlug("consultation");
+  const [isCreating, setIsCreating] = useState(false);
 
   return (
     <Form<Prescription>
       disabled={isCreating}
       defaults={props.prescription}
       onCancel={props.onDone}
-      onSubmit={async (obj) => {
-        obj["medicine"] = obj.medicine_object?.id;
-        delete obj.medicine_object;
+      onSubmit={async (body) => {
+        body["medicine"] = body.medicine_object?.id;
+        delete body.medicine_object;
 
         setIsCreating(true);
-        const res = await dispatch(props.create(obj));
+        const { res, error } = await request(
+          MedicineRoutes.createPrescription,
+          {
+            pathParams: { consultation },
+            body,
+          }
+        );
         setIsCreating(false);
-        if (res.status !== 201) {
-          return res.data;
-        } else {
-          props.onDone();
+
+        if (!res?.ok) {
+          return error;
         }
+
+        Success({ msg: t("Medicine prescribed") });
+        props.onDone();
       }}
       noPadding
       validate={PrescriptionFormValidator()}
diff --git a/src/Components/Medicine/DiscontinuePrescription.tsx b/src/Components/Medicine/DiscontinuePrescription.tsx
index 38dd66a95a8..f54ba9974fc 100644
--- a/src/Components/Medicine/DiscontinuePrescription.tsx
+++ b/src/Components/Medicine/DiscontinuePrescription.tsx
@@ -1,22 +1,22 @@
 import { useState } from "react";
-import { PrescriptionActions } from "../../Redux/actions";
 import ConfirmDialog from "../Common/ConfirmDialog";
 import { Prescription } from "./models";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { Success } from "../../Utils/Notifications";
-import { useDispatch } from "react-redux";
 import PrescriptionDetailCard from "./PrescriptionDetailCard";
 import { useTranslation } from "react-i18next";
+import request from "../../Utils/request/request";
+import MedicineRoutes from "./routes";
+import useSlug from "../../Common/hooks/useSlug";
 
 interface Props {
   prescription: Prescription;
-  actions: ReturnType<ReturnType<typeof PrescriptionActions>["prescription"]>;
   onClose: (discontinued: boolean) => void;
 }
 
 export default function DiscontinuePrescription(props: Props) {
   const { t } = useTranslation();
-  const dispatch = useDispatch<any>();
+  const consultation = useSlug("consultation");
   const [isDiscontinuing, setIsDiscontinuing] = useState(false);
   const [discontinuedReason, setDiscontinuedReason] = useState<string>("");
 
@@ -29,10 +29,13 @@ export default function DiscontinuePrescription(props: Props) {
       variant="danger"
       onConfirm={async () => {
         setIsDiscontinuing(true);
-        const res = await dispatch(
-          props.actions.discontinue(discontinuedReason)
-        );
-        if (res.status === 201) {
+        const { res } = await request(MedicineRoutes.discontinuePrescription, {
+          pathParams: { consultation, external_id: props.prescription.id },
+          body: {
+            discontinued_reason: discontinuedReason,
+          },
+        });
+        if (res?.ok) {
           Success({ msg: t("prescription_discontinued") });
         }
         setIsDiscontinuing(false);
@@ -41,11 +44,7 @@ export default function DiscontinuePrescription(props: Props) {
       className="w-full md:max-w-4xl"
     >
       <div className="mt-4 flex flex-col gap-8">
-        <PrescriptionDetailCard
-          prescription={props.prescription}
-          readonly
-          actions={props.actions}
-        />
+        <PrescriptionDetailCard prescription={props.prescription} readonly />
         <TextAreaFormField
           label={t("reason_for_discontinuation")}
           placeholder={t("optional")}
diff --git a/src/Components/Medicine/EditPrescriptionForm.tsx b/src/Components/Medicine/EditPrescriptionForm.tsx
index d5261f70c7e..42a9b39f7ea 100644
--- a/src/Components/Medicine/EditPrescriptionForm.tsx
+++ b/src/Components/Medicine/EditPrescriptionForm.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import Form from "../Form/Form";
 import { Prescription } from "./models";
 import request from "../../Utils/request/request";
-import routes from "../../Redux/api";
 import * as Notification from "../../Utils/Notifications";
 import useSlug from "../../Common/hooks/useSlug";
 import { RequiredFieldValidator } from "../Form/FieldValidators";
@@ -16,6 +15,7 @@ import {
 import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { EditPrescriptionFormValidator } from "./validators";
+import MedicineRoutes from "./routes";
 
 interface Props {
   initial: Prescription;
@@ -27,8 +27,11 @@ const handleSubmit = async (
   oldObj: Prescription,
   { discontinued_reason, ...newObj }: Prescription
 ) => {
-  const discontinue = await request(routes.discontinuePrescription, {
-    pathParams: { consultation_external_id, external_id: oldObj.id },
+  const discontinue = await request(MedicineRoutes.discontinuePrescription, {
+    pathParams: {
+      consultation: consultation_external_id,
+      external_id: oldObj.id,
+    },
     body: {
       discontinued_reason: discontinued_reason
         ? `Edit: ${discontinued_reason}`
@@ -43,8 +46,8 @@ const handleSubmit = async (
     return;
   }
 
-  const { res } = await request(routes.createPrescription, {
-    pathParams: { consultation_external_id },
+  const { res } = await request(MedicineRoutes.createPrescription, {
+    pathParams: { consultation: consultation_external_id },
     body: {
       ...newObj,
       // Forcing the medicine to be the same as the old one
diff --git a/src/Components/Medicine/ManagePrescriptions.tsx b/src/Components/Medicine/ManagePrescriptions.tsx
index 95d5b17d3c2..16e8ffedcb2 100644
--- a/src/Components/Medicine/ManagePrescriptions.tsx
+++ b/src/Components/Medicine/ManagePrescriptions.tsx
@@ -1,17 +1,11 @@
 import { useTranslation } from "react-i18next";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import useAppHistory from "../../Common/hooks/useAppHistory";
-import { PrescriptionActions } from "../../Redux/actions";
 import ButtonV2 from "../Common/components/ButtonV2";
 import Page from "../Common/components/Page";
 import PrescriptionBuilder from "./PrescriptionBuilder";
 
-interface Props {
-  consultationId: string;
-}
-
-export default function ManagePrescriptions({ consultationId }: Props) {
-  const actions = PrescriptionActions(consultationId);
+export default function ManagePrescriptions() {
   const { t } = useTranslation();
   const { goBack } = useAppHistory();
 
@@ -23,13 +17,13 @@ export default function ManagePrescriptions({ consultationId }: Props) {
             <h3 className="mb-4 text-lg font-semibold">
               {t("prescription_medications")}
             </h3>
-            <PrescriptionBuilder actions={actions} />
+            <PrescriptionBuilder />
           </div>
           <div>
             <h3 className="mb-4 mt-8 text-lg font-semibold">
               {t("prn_prescriptions")}
             </h3>
-            <PrescriptionBuilder actions={actions} is_prn />
+            <PrescriptionBuilder is_prn />
           </div>
         </div>
         <div className="flex w-full flex-col-reverse gap-3 md:flex-row md:items-center">
diff --git a/src/Components/Medicine/MedicineAdministration.tsx b/src/Components/Medicine/MedicineAdministration.tsx
index 5d8347ba5a5..d899a3800fb 100644
--- a/src/Components/Medicine/MedicineAdministration.tsx
+++ b/src/Components/Medicine/MedicineAdministration.tsx
@@ -1,27 +1,27 @@
 import { useEffect, useMemo, useState } from "react";
-import { PrescriptionActions } from "../../Redux/actions";
 import PrescriptionDetailCard from "./PrescriptionDetailCard";
 import { MedicineAdministrationRecord, Prescription } from "./models";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { useDispatch } from "react-redux";
 import { Error, Success } from "../../Utils/Notifications";
-import { formatDateTime } from "../../Utils/utils";
+import { classNames, formatDateTime } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import dayjs from "../../Utils/dayjs";
 import TextFormField from "../Form/FormFields/TextFormField";
+import request from "../../Utils/request/request";
+import MedicineRoutes from "./routes";
+import useSlug from "../../Common/hooks/useSlug";
 
 interface Props {
   prescriptions: Prescription[];
-  action: ReturnType<typeof PrescriptionActions>["prescription"];
   onDone: () => void;
 }
 
 export default function MedicineAdministration(props: Props) {
   const { t } = useTranslation();
-  const dispatch = useDispatch<any>();
+  const consultation = useSlug("consultation");
   const [shouldAdminister, setShouldAdminister] = useState<boolean[]>([]);
   const [notes, setNotes] = useState<MedicineAdministrationRecord["notes"][]>(
     []
@@ -46,34 +46,35 @@ export default function MedicineAdministration(props: Props) {
     );
   }, [props.prescriptions]);
 
-  const handleSubmit = () => {
-    const records: MedicineAdministrationRecord[] = [];
-    prescriptions.forEach((prescription, i) => {
-      if (shouldAdminister[i]) {
-        records.push({
-          prescription,
-          notes: notes[i],
-          administered_date: isCustomTime[i] ? customTime[i] : undefined,
-        });
-      }
-    });
+  const handleSubmit = async () => {
+    const administrations = prescriptions
+      .map((prescription, i) => ({
+        prescription,
+        notes: notes[i],
+        administered_date: isCustomTime[i] ? customTime[i] : undefined,
+      }))
+      .filter((_, i) => shouldAdminister[i]);
 
-    Promise.all(
-      records.map(async ({ prescription, ...record }) => {
-        const res = await dispatch(
-          props.action(prescription?.id ?? "").administer(record)
-        );
-        if (res.status !== 201) {
-          Error({ msg: t("medicines_administered_error") });
-        }
-      })
-    ).then(() => {
-      Success({ msg: t("medicines_administered") });
-      props.onDone();
-    });
+    const ok = await Promise.all(
+      administrations.map(({ prescription, ...body }) =>
+        request(MedicineRoutes.administerPrescription, {
+          pathParams: { consultation, external_id: prescription.id },
+          body,
+        }).then(({ res }) => !!res?.ok)
+      )
+    );
+
+    if (!ok) {
+      Error({ msg: t("medicines_administered_error") });
+      return;
+    }
+
+    Success({ msg: t("medicines_administered") });
+    props.onDone();
   };
 
   const selectedCount = shouldAdminister.filter(Boolean).length;
+  const is_prn = prescriptions.some((obj) => obj.is_prn);
 
   return (
     <div className="flex flex-col gap-3">
@@ -82,10 +83,14 @@ export default function MedicineAdministration(props: Props) {
           key={obj.id}
           prescription={obj}
           readonly
-          actions={props.action(obj?.id ?? "")}
           selected={shouldAdminister[index]}
         >
-          <div className="mt-4 flex w-full max-w-[600px] flex-col gap-2 border-t-2 border-dashed border-gray-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0">
+          <div
+            className={classNames(
+              "mt-4 flex w-full flex-col gap-2 border-t-2 border-dashed border-gray-500 py-2 pt-4 md:ml-4 md:mt-0 md:border-l-2 md:border-t-0 md:pl-4 md:pt-0",
+              is_prn ? "max-w-sm" : "max-w-[600px]"
+            )}
+          >
             <CheckBoxFormField
               name="should_administer"
               label={t("select_for_administration")}
@@ -108,7 +113,12 @@ export default function MedicineAdministration(props: Props) {
                   : t("never")}
               </span>
             </div>
-            <div className="flex flex-col gap-4 lg:flex-row lg:gap-6">
+            <div
+              className={classNames(
+                "flex gap-4",
+                is_prn ? "flex-wrap" : "flex-col lg:flex-row lg:gap-6"
+              )}
+            >
               <TextAreaFormField
                 label={t("administration_notes")}
                 className="w-full"
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
new file mode 100644
index 00000000000..1bcfc24a80a
--- /dev/null
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventCell.tsx
@@ -0,0 +1,126 @@
+import dayjs from "../../../Utils/dayjs";
+import { MedicineAdministrationRecord, Prescription } from "../models";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import { classNames, formatDateTime, formatTime } from "../../../Utils/utils";
+import DialogModal from "../../Common/Dialog";
+import PrescrpitionActivityTimeline from "../PrescrpitionTimeline";
+import { useState } from "react";
+import PrescriptionDetailCard from "../PrescriptionDetailCard";
+
+interface Props {
+  administrations: MedicineAdministrationRecord[];
+  interval: { start: Date; end: Date };
+  prescription: Prescription;
+  refetch: () => void;
+}
+
+export default function AdministrationEventCell({
+  administrations,
+  interval: { start, end },
+  prescription,
+  refetch,
+}: Props) {
+  const [showTimeline, setShowTimeline] = useState(false);
+  // Check if cell belongs to an administered prescription
+  const administered = administrations
+    .filter((administration) =>
+      dayjs(administration.administered_date).isBetween(start, end)
+    )
+    .sort(
+      (a, b) =>
+        new Date(a.administered_date!).getTime() -
+        new Date(b.administered_date!).getTime()
+    );
+
+  const hasComment = administered.some((obj) => !!obj.notes);
+
+  if (administered.length) {
+    return (
+      <>
+        <DialogModal
+          onClose={() => setShowTimeline(false)}
+          title={
+            <PrescriptionDetailCard prescription={prescription} readonly />
+          }
+          className="w-full md:max-w-4xl"
+          show={showTimeline}
+        >
+          <div className="mt-6 text-sm font-medium text-gray-700">
+            Administrations between{" "}
+            <span className="text-black">{formatTime(start, "HH:mm")}</span> and{" "}
+            <span className="text-black">{formatTime(end, "HH:mm")}</span> on{" "}
+            <span className="text-black">
+              {formatDateTime(start, "DD/MM/YYYY")}
+            </span>
+          </div>
+          <PrescrpitionActivityTimeline
+            interval={{ start, end }}
+            prescription={prescription}
+            showPrescriptionDetails
+            onRefetch={refetch}
+          />
+        </DialogModal>
+        <button
+          className="scale-100 transition-transform duration-200 ease-in-out hover:scale-110"
+          onClick={() => setShowTimeline(true)}
+        >
+          <div className="relative mx-auto max-w-min">
+            <CareIcon
+              icon="l-check-circle"
+              className="text-xl text-primary-500"
+            />
+            {administered.length > 1 && (
+              <span className="absolute -bottom-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-white">
+                {administered.length}
+              </span>
+            )}
+          </div>
+          {hasComment && (
+            <CareIcon icon="l-notes" className="text-xl text-primary-500" />
+          )}
+        </button>
+      </>
+    );
+  }
+
+  // Check if cell belongs to after prescription.created_date
+  if (dayjs(start).isAfter(prescription.created_date)) {
+    return <CareIcon icon="l-minus-circle" className="text-xl text-gray-400" />;
+  }
+
+  // Check if cell belongs to a discontinued prescription
+  if (
+    prescription.discontinued &&
+    dayjs(end).isAfter(prescription.discontinued_date)
+  ) {
+    if (!dayjs(prescription.discontinued_date).isBetween(start, end)) return;
+
+    return (
+      <div className="tooltip">
+        <CareIcon
+          icon="l-ban"
+          className={classNames(
+            "text-xl",
+            dayjs(prescription.discontinued_date).isBetween(start, end)
+              ? "text-danger-700"
+              : "text-gray-400"
+          )}
+        />
+        <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs">
+          <p>
+            Discontinued on{" "}
+            <strong>{formatDateTime(prescription.discontinued_date)}</strong>
+          </p>
+          <p>
+            Reason:{" "}
+            {prescription.discontinued_reason ? (
+              <strong>{prescription.discontinued_reason}</strong>
+            ) : (
+              <span className="italic">Not specified</span>
+            )}
+          </p>
+        </span>
+      </div>
+    );
+  }
+}
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
new file mode 100644
index 00000000000..a83fa38bd9c
--- /dev/null
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationEventSeperator.tsx
@@ -0,0 +1,22 @@
+import { formatDateTime } from "../../../Utils/utils";
+
+export default function AdministrationEventSeperator({ date }: { date: Date }) {
+  // Show date if it's 00:00
+  if (date.getHours() === 0) {
+    return (
+      <div className="mx-auto flex h-[58px] w-10 flex-col items-center justify-center bg-gray-50 text-center text-xs font-bold text-gray-600 transition-all duration-200 ease-in-out group-hover:bg-primary-500 group-hover:text-white">
+        <span className="-rotate-90 uppercase duration-500 ease-in-out">
+          <p> {formatDateTime(date, "DD/MM")}</p>
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex h-[58px] flex-col items-center justify-center text-center text-xs font-bold text-gray-500 transition-all duration-200 ease-in-out">
+      <span className="font-bold duration-500 ease-in-out">
+        {/* <p>{formatDateTime(date, "HH")}</p> */}
+      </span>
+    </div>
+  );
+}
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
new file mode 100644
index 00000000000..9de207146de
--- /dev/null
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
@@ -0,0 +1,106 @@
+import { useTranslation } from "react-i18next";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import useRangePagination from "../../../Common/hooks/useRangePagination";
+import { classNames, formatDateTime } from "../../../Utils/utils";
+import ButtonV2 from "../../Common/components/ButtonV2";
+import { Prescription } from "../models";
+import MedicineAdministrationTableRow from "./AdministrationTableRow";
+
+interface Props {
+  prescriptions: Prescription[];
+  pagination: ReturnType<typeof useRangePagination>;
+  onRefetch: () => void;
+}
+
+export default function MedicineAdministrationTable({
+  pagination,
+  prescriptions,
+  onRefetch,
+}: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full whitespace-nowrap">
+        <thead className="sticky top-0 z-20 bg-gray-50 text-xs font-medium text-black">
+          <tr>
+            <th className="sticky left-0 z-20 bg-gray-50 py-3 pl-4 text-left">
+              <div className="flex justify-between gap-2">
+                <span className="text-sm">{t("medicine")}</span>
+                <span className="hidden px-2 text-center text-xs leading-none lg:block">
+                  <p>Dosage &</p>
+                  <p>{!prescriptions[0]?.is_prn ? "Frequency" : "Indicator"}</p>
+                </span>
+              </div>
+            </th>
+
+            <th>
+              <ButtonV2
+                size="small"
+                circle
+                ghost
+                border
+                className="mx-2 px-1"
+                variant="secondary"
+                disabled={!pagination.hasPrevious}
+                onClick={pagination.previous}
+                tooltip="Previous 24 hours"
+                tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
+              >
+                <CareIcon icon="l-angle-left-b" className="text-base" />
+              </ButtonV2>
+            </th>
+            {pagination.slots?.map(({ start }, index) => (
+              <>
+                <th
+                  key={`administration-interval-${index}`}
+                  className={classNames(
+                    "leading-none",
+                    start.getHours() === 0
+                      ? "text-base font-bold text-gray-800"
+                      : "text-sm font-semibold text-gray-700"
+                  )}
+                >
+                  {formatDateTime(
+                    start,
+                    start.getHours() === 0 ? "DD/MM" : "h a"
+                  )}
+                </th>
+                <th key={`administration-slot-${index}`} className="flex w-6" />
+              </>
+            ))}
+            <th>
+              <ButtonV2
+                size="small"
+                circle
+                ghost
+                border
+                className="mx-2 px-1"
+                variant="secondary"
+                disabled={!pagination.hasNext}
+                onClick={pagination.next}
+                tooltip="Next 24 hours"
+                tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
+              >
+                <CareIcon icon="l-angle-right-b" className="text-base" />
+              </ButtonV2>
+            </th>
+
+            <th className="py-3 pr-2 text-right"></th>
+          </tr>
+        </thead>
+
+        <tbody className="divide-y divide-gray-200">
+          {prescriptions.map((obj) => (
+            <MedicineAdministrationTableRow
+              key={obj.id}
+              prescription={obj}
+              intervals={pagination.slots!}
+              refetch={onRefetch}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
new file mode 100644
index 00000000000..40675640411
--- /dev/null
+++ b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
@@ -0,0 +1,249 @@
+import { useTranslation } from "react-i18next";
+import { Prescription } from "../models";
+import { useState } from "react";
+import useQuery from "../../../Utils/request/useQuery";
+import MedicineRoutes from "../routes";
+import { classNames, formatDateTime } from "../../../Utils/utils";
+import useSlug from "../../../Common/hooks/useSlug";
+import DiscontinuePrescription from "../DiscontinuePrescription";
+import AdministerMedicine from "../AdministerMedicine";
+import DialogModal from "../../Common/Dialog";
+import PrescriptionDetailCard from "../PrescriptionDetailCard";
+import ButtonV2, { Cancel, Submit } from "../../Common/components/ButtonV2";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import EditPrescriptionForm from "../EditPrescriptionForm";
+import AdministrationEventSeperator from "./AdministrationEventSeperator";
+import AdministrationEventCell from "./AdministrationEventCell";
+
+interface Props {
+  prescription: Prescription;
+  intervals: { start: Date; end: Date }[];
+  refetch: () => void;
+}
+
+export default function MedicineAdministrationTableRow({
+  prescription,
+  ...props
+}: Props) {
+  const { t } = useTranslation();
+  const consultation = useSlug("consultation");
+  // const [showActions, setShowActions] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+  const [showEdit, setShowEdit] = useState(false);
+  const [showAdminister, setShowAdminister] = useState(false);
+  const [showDiscontinue, setShowDiscontinue] = useState(false);
+
+  const { data, loading, refetch } = useQuery(
+    MedicineRoutes.listAdministrations,
+    {
+      pathParams: { consultation },
+      query: {
+        prescription: prescription.id,
+        administered_date_after: formatDateTime(
+          props.intervals[0].start,
+          "YYYY-MM-DD"
+        ),
+        administered_date_before: formatDateTime(
+          props.intervals[props.intervals.length - 1].end,
+          "YYYY-MM-DD"
+        ),
+        archived: false,
+      },
+      key: `${prescription.last_administered_on}`,
+    }
+  );
+
+  return (
+    <tr
+      className={classNames(
+        "group transition-all duration-200 ease-in-out",
+        loading ? "bg-gray-300" : "bg-white hover:bg-primary-100"
+      )}
+    >
+      {showDiscontinue && (
+        <DiscontinuePrescription
+          prescription={prescription}
+          onClose={(success) => {
+            setShowDiscontinue(false);
+            if (success) {
+              props.refetch();
+            }
+          }}
+        />
+      )}
+      {showAdminister && (
+        <AdministerMedicine
+          prescription={prescription}
+          onClose={(success) => {
+            setShowAdminister(false);
+            if (success) {
+              props.refetch();
+            }
+          }}
+        />
+      )}
+      {showDetails && (
+        <DialogModal
+          title={t("prescription_details")}
+          onClose={() => setShowDetails(false)}
+          className="w-full md:max-w-4xl"
+          show
+        >
+          <div className="mt-4 flex flex-col gap-4">
+            <PrescriptionDetailCard prescription={prescription} readonly />
+            <div className="flex w-full flex-col items-center justify-end gap-2 md:flex-row">
+              <Cancel
+                onClick={() => setShowDetails(false)}
+                label={t("close")}
+              />
+              <Submit
+                disabled={
+                  prescription.discontinued ||
+                  prescription.prescription_type === "DISCHARGE"
+                }
+                variant="danger"
+                onClick={() => setShowDiscontinue(true)}
+              >
+                <CareIcon icon="l-ban" className="text-lg" />
+                {t("discontinue")}
+              </Submit>
+              <Submit
+                disabled={
+                  prescription.discontinued ||
+                  prescription.prescription_type === "DISCHARGE"
+                }
+                variant="secondary"
+                border
+                onClick={() => {
+                  setShowDetails(false);
+                  setShowEdit(true);
+                }}
+              >
+                <CareIcon icon="l-pen" className="text-lg" />
+                {t("edit")}
+              </Submit>
+              <Submit
+                disabled={
+                  prescription.discontinued ||
+                  prescription.prescription_type === "DISCHARGE"
+                }
+                onClick={() => setShowAdminister(true)}
+              >
+                <CareIcon className="care-l-syringe text-lg" />
+                {t("administer")}
+              </Submit>
+            </div>
+          </div>
+        </DialogModal>
+      )}
+      {showEdit && (
+        <DialogModal
+          onClose={() => setShowEdit(false)}
+          show={showEdit}
+          title={`${t("edit")} ${t(
+            prescription.is_prn ? "prn_prescription" : "prescription_medication"
+          )}: ${
+            prescription.medicine_object?.name ?? prescription.medicine_old
+          }`}
+          description={
+            <div className="mt-2 flex w-full justify-start gap-2 text-warning-500">
+              <CareIcon icon="l-info-circle" className="text-base" />
+              <span>{t("edit_caution_note")}</span>
+            </div>
+          }
+          className="w-full max-w-3xl lg:min-w-[600px]"
+        >
+          <EditPrescriptionForm
+            initial={prescription}
+            onDone={(success) => {
+              setShowEdit(false);
+              if (success) {
+                props.refetch();
+              }
+            }}
+          />
+        </DialogModal>
+      )}
+      <td
+        className="bg-gray-white sticky left-0 z-10 cursor-pointer bg-white py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
+        onClick={() => setShowDetails(true)}
+      >
+        <div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
+          <div className="flex items-center gap-2">
+            <span
+              className={classNames(
+                "text-sm font-semibold",
+                prescription.discontinued ? "text-gray-700" : "text-gray-900"
+              )}
+            >
+              {prescription.medicine_object?.name ?? prescription.medicine_old}
+            </span>
+
+            {prescription.discontinued && (
+              <span className="hidden rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700 lg:block">
+                {t("discontinued")}
+              </span>
+            )}
+
+            {prescription.route && (
+              <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
+                {t(prescription.route)}
+              </span>
+            )}
+          </div>
+
+          <div className="flex gap-1 text-xs font-semibold text-gray-900 lg:flex-col lg:px-2 lg:text-center">
+            <p>{prescription.dosage}</p>
+            <p>
+              {!prescription.is_prn
+                ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
+                : prescription.indicator}
+            </p>
+          </div>
+        </div>
+      </td>
+
+      <td />
+
+      {/* Administration Cells */}
+      {props.intervals.map(({ start, end }, index) => (
+        <>
+          <td key={`event-seperator-${index}`}>
+            <AdministrationEventSeperator date={start} />
+          </td>
+
+          <td key={`event-socket-${index}`} className="text-center">
+            {!data?.results ? (
+              <CareIcon
+                icon="l-spinner"
+                className="animate-spin text-lg text-gray-500"
+              />
+            ) : (
+              <AdministrationEventCell
+                administrations={data.results}
+                interval={{ start, end }}
+                prescription={prescription}
+                refetch={refetch}
+              />
+            )}
+          </td>
+        </>
+      ))}
+      <td />
+
+      {/* Action Buttons */}
+      <td className="space-x-1 pr-2 text-right">
+        <ButtonV2
+          type="button"
+          size="small"
+          disabled={prescription.discontinued}
+          ghost
+          border
+          onClick={() => setShowAdminister(true)}
+        >
+          {t("administer")}
+        </ButtonV2>
+      </td>
+    </tr>
+  );
+}
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/BulkAdminister.tsx b/src/Components/Medicine/MedicineAdministrationSheet/BulkAdminister.tsx
new file mode 100644
index 00000000000..abd609871c8
--- /dev/null
+++ b/src/Components/Medicine/MedicineAdministrationSheet/BulkAdminister.tsx
@@ -0,0 +1,47 @@
+import { useTranslation } from "react-i18next";
+import { Prescription } from "../models";
+import { useState } from "react";
+import ButtonV2 from "../../Common/components/ButtonV2";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import SlideOver from "../../../CAREUI/interactive/SlideOver";
+import MedicineAdministration from "../MedicineAdministration";
+
+interface Props {
+  prescriptions: Prescription[];
+  onDone: () => void;
+}
+
+export default function BulkAdminister({ prescriptions, onDone }: Props) {
+  const { t } = useTranslation();
+  const [showBulkAdminister, setShowBulkAdminister] = useState(false);
+
+  return (
+    <>
+      <ButtonV2
+        ghost
+        border
+        onClick={() => setShowBulkAdminister(true)}
+        className="w-full"
+        disabled={prescriptions.length === 0}
+      >
+        <CareIcon icon="l-syringe" className="text-lg" />
+        <span className="hidden lg:block">{t("administer_medicines")}</span>
+        <span className="block lg:hidden">{t("administer")}</span>
+      </ButtonV2>
+      <SlideOver
+        title={t("administer_medicines")}
+        dialogClass="w-full max-w-sm sm:max-w-md md:max-w-[1300px]"
+        open={showBulkAdminister}
+        setOpen={setShowBulkAdminister}
+      >
+        <MedicineAdministration
+          prescriptions={prescriptions}
+          onDone={() => {
+            setShowBulkAdminister(false);
+            onDone();
+          }}
+        />
+      </SlideOver>
+    </>
+  );
+}
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
new file mode 100644
index 00000000000..187d5447314
--- /dev/null
+++ b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
@@ -0,0 +1,158 @@
+import { useTranslation } from "react-i18next";
+import useSlug from "../../../Common/hooks/useSlug";
+import useQuery from "../../../Utils/request/useQuery";
+import MedicineRoutes from "../routes";
+import { useMemo, useState } from "react";
+import { computeActivityBounds } from "./utils";
+import useBreakpoints from "../../../Common/hooks/useBreakpoints";
+import SubHeading from "../../../CAREUI/display/SubHeading";
+import ButtonV2 from "../../Common/components/ButtonV2";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import BulkAdminister from "./BulkAdminister";
+import useRangePagination from "../../../Common/hooks/useRangePagination";
+import MedicineAdministrationTable from "./AdministrationTable";
+import Loading from "../../Common/Loading";
+import ScrollOverlay from "../../../CAREUI/interactive/ScrollOverlay";
+
+interface Props {
+  readonly?: boolean;
+  is_prn: boolean;
+}
+
+const DEFAULT_BOUNDS = { start: new Date(), end: new Date() };
+
+const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
+  const { t } = useTranslation();
+  const consultation = useSlug("consultation");
+
+  const [showDiscontinued, setShowDiscontinued] = useState(false);
+
+  const filters = { is_prn, prescription_type: "REGULAR", limit: 100 };
+
+  const { data, loading, refetch } = useQuery(
+    MedicineRoutes.listPrescriptions,
+    {
+      pathParams: { consultation },
+      query: { ...filters, discontinued: showDiscontinued ? undefined : false },
+    }
+  );
+
+  const discontinuedPrescriptions = useQuery(MedicineRoutes.listPrescriptions, {
+    pathParams: { consultation },
+    query: { ...filters, discontinued: true },
+    prefetch: !showDiscontinued,
+  });
+
+  const discontinuedCount = discontinuedPrescriptions.data?.count;
+
+  const { activityTimelineBounds, prescriptions } = useMemo(
+    () => ({
+      prescriptions: data?.results?.sort(
+        (a, b) => +a.discontinued - +b.discontinued
+      ),
+      activityTimelineBounds: data
+        ? computeActivityBounds(data.results)
+        : undefined,
+    }),
+    [data]
+  );
+
+  const daysPerPage = useBreakpoints({ default: 1, "2xl": 2 });
+  const pagination = useRangePagination({
+    bounds: activityTimelineBounds ?? DEFAULT_BOUNDS,
+    perPage: daysPerPage * 24 * 60 * 60 * 1000,
+    slots: (daysPerPage * 24) / 4, // Grouped by 4 hours
+    defaultEnd: true,
+  });
+
+  return (
+    <div>
+      <SubHeading
+        title={is_prn ? "PRN Prescriptions" : "Prescriptions"}
+        lastModified={
+          prescriptions?.[0]?.last_administered_on ??
+          prescriptions?.[0]?.modified_date
+        }
+        options={
+          !readonly &&
+          !!data?.results && (
+            <>
+              <ButtonV2
+                variant="secondary"
+                border
+                href="prescriptions"
+                className="w-full"
+              >
+                <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>
+              <BulkAdminister
+                prescriptions={data.results}
+                onDone={() => refetch()}
+              />
+            </>
+          )
+        }
+      />
+
+      <ScrollOverlay
+        className="rounded-lg border shadow"
+        overlay={
+          <div className="flex items-center gap-2 pb-2">
+            <span className="text-sm">Scroll to view more prescriptions</span>
+            <CareIcon icon="l-arrow-down" className="animate-bounce text-2xl" />
+          </div>
+        }
+        disableOverlay={loading || !prescriptions?.length}
+      >
+        {loading && <Loading />}
+        {prescriptions?.length === 0 && <NoPrescriptions prn={is_prn} />}
+
+        {!!prescriptions?.length && (
+          <MedicineAdministrationTable
+            prescriptions={prescriptions}
+            pagination={pagination}
+            onRefetch={() => {
+              refetch();
+              discontinuedPrescriptions.refetch();
+            }}
+          />
+        )}
+
+        {!showDiscontinued && !!discontinuedCount && (
+          <ButtonV2
+            variant="secondary"
+            className="group sticky left-0 w-full rounded-b-lg rounded-t-none bg-gray-100"
+            onClick={() => setShowDiscontinued(true)}
+          >
+            <span className="flex w-full items-center justify-start gap-1 text-xs transition-all duration-200 ease-in-out group-hover:gap-3 md:text-sm">
+              <CareIcon icon="l-eye" className="text-lg" />
+              <span>
+                Show <strong>{discontinuedCount}</strong> discontinued
+                prescription(s)
+              </span>
+            </span>
+          </ButtonV2>
+        )}
+      </ScrollOverlay>
+    </div>
+  );
+};
+
+export default MedicineAdministrationSheet;
+
+const NoPrescriptions = ({ prn }: { prn: boolean }) => {
+  return (
+    <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
+      <CareIcon icon="l-tablets" className="text-5xl" />
+      <h3 className="text-lg font-medium">
+        {prn
+          ? "No PRN Prescriptions Prescribed"
+          : "No Prescriptions Prescribed"}
+      </h3>
+    </div>
+  );
+};
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/utils.ts b/src/Components/Medicine/MedicineAdministrationSheet/utils.ts
new file mode 100644
index 00000000000..93ee5fb4b08
--- /dev/null
+++ b/src/Components/Medicine/MedicineAdministrationSheet/utils.ts
@@ -0,0 +1,34 @@
+import { Prescription } from "../models";
+
+export function computeActivityBounds(prescriptions: Prescription[]) {
+  // get start by finding earliest of all presciption's created_date
+  const start = new Date(
+    prescriptions.reduce(
+      (earliest, curr) =>
+        earliest < curr.created_date ? earliest : curr.created_date,
+      prescriptions[0]?.created_date ?? new Date()
+    )
+  );
+
+  // get end by finding latest of all presciption's last_administered_on
+  const end = new Date(
+    prescriptions
+      .filter((prescription) => prescription.last_administered_on)
+      .reduce(
+        (latest, curr) =>
+          curr.last_administered_on && curr.last_administered_on > latest
+            ? curr.last_administered_on
+            : latest,
+        prescriptions[0]?.created_date ?? new Date()
+      )
+  );
+
+  // floor start to 00:00 of the day
+  start.setHours(0, 0, 0, 0);
+
+  // ceil end to 00:00 of the next day
+  end.setDate(end.getDate() + 1);
+  end.setHours(0, 0, 0, 0);
+
+  return { start, end };
+}
diff --git a/src/Components/Medicine/MedicineAdministrationsTable.tsx b/src/Components/Medicine/MedicineAdministrationsTable.tsx
deleted file mode 100644
index 4ffc25e43f0..00000000000
--- a/src/Components/Medicine/MedicineAdministrationsTable.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import ResponsiveMedicineTable from "../Common/components/ResponsiveMedicineTables";
-import { formatDateTime } from "../../Utils/utils";
-import { PrescriptionActions } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
-import { MedicineAdministrationRecord } from "./models";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import RecordMeta from "../../CAREUI/display/RecordMeta";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  consultation_id: string;
-}
-
-export default function MedicineAdministrationsTable({
-  consultation_id,
-}: Props) {
-  const { t } = useTranslation();
-  const dispatch = useDispatch<any>();
-  const [items, setItems] = useState<MedicineAdministrationRecord[]>();
-
-  const { listAdministrations } = useMemo(
-    () => PrescriptionActions(consultation_id),
-    [consultation_id]
-  );
-
-  const fetchItems = useCallback(() => {
-    dispatch(listAdministrations()).then((res: any) =>
-      setItems(res.data.results)
-    );
-  }, [consultation_id]);
-
-  useEffect(() => {
-    fetchItems();
-  }, [consultation_id]);
-
-  const lastModified = items?.[0]?.modified_date;
-
-  return (
-    <div>
-      <div className="mb-2 flex flex-wrap items-center justify-between">
-        <div className="flex items-center font-semibold leading-relaxed text-gray-900">
-          <span className="mr-3 text-lg">
-            {t("medicine_administration_history")}
-          </span>
-          <div className="text-gray-600">
-            <CareIcon className="care-l-history-alt pr-2" />
-            <span className="text-xs">
-              {lastModified && formatDateTime(lastModified)}
-            </span>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col">
-        <div className="-my-2 overflow-x-auto py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-          <div className="inline-block min-w-full border-b border-gray-200 align-middle shadow sm:rounded-lg">
-            <ResponsiveMedicineTable
-              theads={["medicine", "notes", "administered_on"].map((_) => t(_))}
-              list={
-                items?.map((obj) => ({
-                  ...obj,
-                  medicine:
-                    obj.prescription?.medicine_object?.name ??
-                    obj.prescription?.medicine_old,
-                  created_date__pretty: (
-                    <span className="flex gap-1">
-                      <RecordMeta time={obj.created_date} /> by{" "}
-                      {obj.administered_by?.first_name}{" "}
-                      {obj.administered_by?.last_name}
-                    </span>
-                  ),
-                  ...obj,
-                })) || []
-              }
-              objectKeys={["medicine", "notes", "created_date__pretty"]}
-              fieldsToDisplay={[2, 3]}
-            />
-            {items?.length === 0 && (
-              <div className="text-semibold flex items-center justify-center py-2 text-gray-600">
-                {t("no_data_found")}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/Components/Medicine/PrescriptionAdministrationsTable.tsx b/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
deleted file mode 100644
index c80b66f44c6..00000000000
--- a/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
+++ /dev/null
@@ -1,652 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { PrescriptionActions } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
-import { MedicineAdministrationRecord, Prescription } from "./models";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
-import SlideOver from "../../CAREUI/interactive/SlideOver";
-import MedicineAdministration from "./MedicineAdministration";
-import DiscontinuePrescription from "./DiscontinuePrescription";
-import AdministerMedicine from "./AdministerMedicine";
-import DialogModal from "../Common/Dialog";
-import PrescriptionDetailCard from "./PrescriptionDetailCard";
-import { useTranslation } from "react-i18next";
-import SubHeading from "../../CAREUI/display/SubHeading";
-import dayjs from "../../Utils/dayjs";
-import {
-  classNames,
-  formatDate,
-  formatDateTime,
-  formatTime,
-} from "../../Utils/utils";
-import useRangePagination from "../../Common/hooks/useRangePagination";
-import EditPrescriptionForm from "./EditPrescriptionForm";
-
-interface DateRange {
-  start: Date;
-  end: Date;
-}
-
-interface Props {
-  prn: boolean;
-  prescription_type?: Prescription["prescription_type"];
-  consultation_id: string;
-  readonly?: boolean;
-}
-
-interface State {
-  prescriptions: Prescription[];
-  administrationsTimeBounds: DateRange;
-}
-
-export default function PrescriptionAdministrationsTable({
-  prn,
-  consultation_id,
-  readonly,
-}: Props) {
-  const dispatch = useDispatch<any>();
-  const { t } = useTranslation();
-
-  const [state, setState] = useState<State>();
-  const [showDiscontinued, setShowDiscontinued] = useState(false);
-  const [discontinuedCount, setDiscontinuedCount] = useState<number>();
-  const pagination = useRangePagination({
-    bounds: state?.administrationsTimeBounds ?? {
-      start: new Date(),
-      end: new Date(),
-    },
-    perPage: 24 * 60 * 60 * 1000,
-    slots: 24,
-    defaultEnd: true,
-  });
-  const [showBulkAdminister, setShowBulkAdminister] = useState(false);
-
-  const { list, prescription } = useMemo(
-    () => PrescriptionActions(consultation_id),
-    [consultation_id]
-  );
-
-  const refetch = useCallback(async () => {
-    const filters = {
-      is_prn: prn,
-      prescription_type: "REGULAR",
-    };
-
-    const res = await dispatch(
-      list(showDiscontinued ? filters : { ...filters, discontinued: false })
-    );
-
-    setState({
-      prescriptions: (res.data.results as Prescription[]).sort(
-        (a, b) => (a.discontinued ? 1 : 0) - (b.discontinued ? 1 : 0)
-      ),
-      administrationsTimeBounds: getAdministrationBounds(res.data.results),
-    });
-
-    if (showDiscontinued === false) {
-      const discontinuedRes = await dispatch(
-        list({ ...filters, discontinued: true, limit: 0 })
-      );
-      setDiscontinuedCount(discontinuedRes.data.count);
-    }
-  }, [consultation_id, showDiscontinued, dispatch]);
-
-  useEffect(() => {
-    refetch();
-  }, [refetch]);
-
-  return (
-    <div>
-      {state?.prescriptions && (
-        <SlideOver
-          title={t("administer_medicines")}
-          dialogClass="w-full max-w-sm sm:max-w-md md:max-w-[1300px]"
-          open={showBulkAdminister}
-          setOpen={setShowBulkAdminister}
-        >
-          <MedicineAdministration
-            prescriptions={state.prescriptions}
-            action={prescription}
-            onDone={() => {
-              setShowBulkAdminister(false);
-              refetch();
-            }}
-          />
-        </SlideOver>
-      )}
-
-      <SubHeading
-        title={prn ? "PRN Prescriptions" : "Prescriptions"}
-        lastModified={
-          state?.prescriptions?.[0]?.last_administered_on ??
-          state?.prescriptions?.[0]?.modified_date
-        }
-        options={
-          !readonly && (
-            <>
-              <ButtonV2
-                variant="secondary"
-                border
-                href="prescriptions"
-                className="w-full"
-              >
-                <CareIcon className="care-l-pen text-lg" />
-                <span className="hidden lg:block">
-                  {t("edit_prescriptions")}
-                </span>
-                <span className="block lg:hidden">{t("edit")}</span>
-              </ButtonV2>
-              <ButtonV2
-                ghost
-                border
-                onClick={() => setShowBulkAdminister(true)}
-                className="w-full"
-                disabled={
-                  state === undefined || state.prescriptions.length === 0
-                }
-              >
-                <CareIcon className="care-l-syringe text-lg" />
-                <span className="hidden lg:block">
-                  {t("administer_medicines")}
-                </span>
-                <span className="block lg:hidden">{t("administer")}</span>
-              </ButtonV2>
-            </>
-          )
-        }
-      />
-
-      <div className="relative overflow-x-auto rounded border border-white shadow">
-        <table className="w-full  whitespace-nowrap rounded">
-          <thead className="bg-white text-xs font-medium text-black">
-            <tr>
-              <th className="sticky left-0 z-10 bg-white py-3 pl-4 text-left">
-                <div className="flex justify-between gap-2">
-                  <span className="text-sm">{t("medicine")}</span>
-                  <span className="hidden px-2 text-center text-xs leading-none lg:block">
-                    <p>Dosage &</p>
-                    <p>
-                      {!state?.prescriptions[0]?.is_prn
-                        ? "Frequency"
-                        : "Indicator"}
-                    </p>
-                  </span>
-                </div>
-              </th>
-
-              <th>
-                <ButtonV2
-                  size="small"
-                  circle
-                  ghost
-                  border
-                  className="mx-2 px-1"
-                  variant="secondary"
-                  disabled={!pagination.hasPrevious}
-                  onClick={pagination.previous}
-                  tooltip="Previous 24 hours"
-                  tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
-                >
-                  <CareIcon icon="l-angle-left-b" className="text-base" />
-                </ButtonV2>
-              </th>
-              {state === undefined
-                ? Array.from({ length: 24 }, (_, i) => i).map((i) => (
-                    <th
-                      className="tooltip py-2 text-center font-semibold leading-none text-gray-900"
-                      key={i}
-                    >
-                      <p className="h-4 w-6 animate-pulse rounded bg-gray-500" />
-                    </th>
-                  ))
-                : pagination.slots?.map(({ start, end }, index) => (
-                    <th
-                      className="tooltip px-0.5 py-2 text-center font-semibold leading-none text-gray-900"
-                      key={index}
-                    >
-                      <p>{formatDateTime(start, "DD/MM")}</p>
-                      <p>{formatDateTime(start, "HH:mm")}</p>
-
-                      <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs font-normal">
-                        Administration(s) between
-                        <br />
-                        <strong>{formatTime(start)}</strong> and{" "}
-                        <strong>{formatTime(end)}</strong>
-                        <br />
-                        on <strong>{formatDate(start)}</strong>
-                      </span>
-                    </th>
-                  ))}
-              <th>
-                <ButtonV2
-                  size="small"
-                  circle
-                  ghost
-                  border
-                  className="mx-2 px-1"
-                  variant="secondary"
-                  disabled={!pagination.hasNext}
-                  onClick={pagination.next}
-                  tooltip="Next 24 hours"
-                  tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
-                >
-                  <CareIcon icon="l-angle-right-b" className="text-base" />
-                </ButtonV2>
-              </th>
-
-              <th className="py-3 pr-2 text-right"></th>
-            </tr>
-          </thead>
-
-          <tbody className="divide-y divide-gray-200">
-            {state?.prescriptions?.map((item) => (
-              <PrescriptionRow
-                key={item.id}
-                prescription={item}
-                intervals={pagination.slots!}
-                actions={prescription(item.id ?? "")}
-                refetch={refetch}
-              />
-            ))}
-          </tbody>
-        </table>
-
-        {showDiscontinued === false && !!discontinuedCount && (
-          <ButtonV2
-            variant="secondary"
-            className="sticky left-0 z-10 w-full"
-            ghost
-            onClick={() => setShowDiscontinued(true)}
-          >
-            <span className="flex w-full justify-start gap-1 text-sm">
-              <CareIcon icon="l-eye" className="text-lg" />
-              <span>
-                Show <strong>{discontinuedCount}</strong> other discontinued
-                prescription(s)
-              </span>
-            </span>
-          </ButtonV2>
-        )}
-
-        {state?.prescriptions.length === 0 && (
-          <div className="my-16 flex w-full flex-col items-center justify-center gap-4 text-gray-500">
-            <CareIcon className="care-l-tablets text-5xl" />
-            <h3 className="text-lg font-medium">
-              {prn
-                ? "No PRN Prescriptions Prescribed"
-                : "No Prescriptions Prescribed"}
-            </h3>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface PrescriptionRowProps {
-  prescription: Prescription;
-  intervals: DateRange[];
-  actions: ReturnType<ReturnType<typeof PrescriptionActions>["prescription"]>;
-  refetch: () => void;
-}
-
-const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
-  const dispatch = useDispatch<any>();
-  const { t } = useTranslation();
-  // const [showActions, setShowActions] = useState(false);
-  const [showDetails, setShowDetails] = useState(false);
-  const [showEdit, setShowEdit] = useState(false);
-  const [showAdminister, setShowAdminister] = useState(false);
-  const [showDiscontinue, setShowDiscontinue] = useState(false);
-  const [administrations, setAdministrations] =
-    useState<MedicineAdministrationRecord[]>();
-
-  useEffect(() => {
-    setAdministrations(undefined);
-
-    const getAdministrations = async () => {
-      const res = await dispatch(
-        props.actions.listAdministrations({
-          administered_date_after: formatDateTime(
-            props.intervals[0].start,
-            "YYYY-MM-DD"
-          ),
-          administered_date_before: formatDateTime(
-            props.intervals[props.intervals.length - 1].end,
-            "YYYY-MM-DD"
-          ),
-        })
-      );
-
-      setAdministrations(res.data.results);
-    };
-
-    getAdministrations();
-  }, [prescription.id, dispatch, props.intervals]);
-
-  return (
-    <tr
-      className={classNames(
-        "group border-separate border border-gray-300 bg-gray-100 transition-all duration-200 ease-in-out hover:border-primary-300 hover:bg-primary-100"
-      )}
-    >
-      {showDiscontinue && (
-        <DiscontinuePrescription
-          prescription={prescription}
-          actions={props.actions}
-          onClose={(success) => {
-            setShowDiscontinue(false);
-            if (success) {
-              props.refetch();
-            }
-          }}
-        />
-      )}
-      {showAdminister && (
-        <AdministerMedicine
-          prescription={prescription}
-          actions={props.actions}
-          onClose={(success) => {
-            setShowAdminister(false);
-            if (success) {
-              props.refetch();
-            }
-          }}
-        />
-      )}
-      {showDetails && (
-        <DialogModal
-          title={t("prescription_details")}
-          onClose={() => setShowDetails(false)}
-          className="w-full md:max-w-4xl"
-          show
-        >
-          <div className="mt-4 flex flex-col gap-4">
-            <PrescriptionDetailCard
-              prescription={prescription}
-              actions={props.actions}
-              readonly
-            />
-            <div className="flex w-full flex-col items-center justify-end gap-2 md:flex-row">
-              <Cancel
-                onClick={() => setShowDetails(false)}
-                label={t("close")}
-              />
-              <Submit
-                disabled={
-                  prescription.discontinued ||
-                  prescription.prescription_type === "DISCHARGE"
-                }
-                variant="danger"
-                onClick={() => setShowDiscontinue(true)}
-              >
-                <CareIcon className="care-l-ban text-lg" />
-                {t("discontinue")}
-              </Submit>
-              <Submit
-                disabled={
-                  prescription.discontinued ||
-                  prescription.prescription_type === "DISCHARGE"
-                }
-                variant="secondary"
-                border
-                onClick={() => {
-                  setShowDetails(false);
-                  setShowEdit(true);
-                }}
-              >
-                <CareIcon icon="l-pen" className="text-lg" />
-                {t("edit")}
-              </Submit>
-              <Submit
-                disabled={
-                  prescription.discontinued ||
-                  prescription.prescription_type === "DISCHARGE"
-                }
-                onClick={() => setShowAdminister(true)}
-              >
-                <CareIcon className="care-l-syringe text-lg" />
-                {t("administer")}
-              </Submit>
-            </div>
-          </div>
-        </DialogModal>
-      )}
-      {showEdit && (
-        <DialogModal
-          onClose={() => setShowEdit(false)}
-          show={showEdit}
-          title={`${t("edit")} ${t(
-            prescription.is_prn ? "prn_prescription" : "prescription_medication"
-          )}: ${
-            prescription.medicine_object?.name ?? prescription.medicine_old
-          }`}
-          description={
-            <div className="mt-2 flex w-full justify-start gap-2 text-warning-500">
-              <CareIcon icon="l-info-circle" className="text-base" />
-              <span>{t("edit_caution_note")}</span>
-            </div>
-          }
-          className="w-full max-w-3xl lg:min-w-[600px]"
-        >
-          <EditPrescriptionForm
-            initial={prescription}
-            onDone={(success) => {
-              setShowEdit(false);
-              if (success) {
-                props.refetch();
-              }
-            }}
-          />
-        </DialogModal>
-      )}
-      <td
-        className="sticky left-0 z-10 cursor-pointer bg-gray-100 py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
-        onClick={() => setShowDetails(true)}
-      >
-        <div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
-          <div className="flex items-center gap-2">
-            <span
-              className={classNames(
-                "text-sm font-semibold",
-                prescription.discontinued ? "text-gray-700" : "text-gray-900"
-              )}
-            >
-              {prescription.medicine_object?.name ?? prescription.medicine_old}
-            </span>
-
-            {prescription.discontinued && (
-              <span className="hidden rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700 lg:block">
-                {t("discontinued")}
-              </span>
-            )}
-
-            {prescription.route && (
-              <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
-                {t(prescription.route)}
-              </span>
-            )}
-          </div>
-
-          <div className="flex gap-1 text-xs font-semibold text-gray-900 lg:flex-col lg:px-2 lg:text-center">
-            <p>{prescription.dosage}</p>
-            <p>
-              {!prescription.is_prn
-                ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
-                : prescription.indicator}
-            </p>
-          </div>
-        </div>
-      </td>
-
-      <td />
-      {/* Administration Cells */}
-      {props.intervals.map(({ start, end }, index) => (
-        <td className="text-center" key={index}>
-          {administrations === undefined ? (
-            <CareIcon
-              icon="l-spinner"
-              className="animate-spin text-lg text-gray-500"
-            />
-          ) : (
-            <AdministrationCell
-              administrations={administrations}
-              interval={{ start, end }}
-              prescription={prescription}
-            />
-          )}
-        </td>
-      ))}
-      <td />
-
-      {/* Action Buttons */}
-      <td className="space-x-1 pr-2 text-right">
-        <ButtonV2
-          type="button"
-          size="small"
-          disabled={prescription.discontinued}
-          ghost
-          border
-          onClick={() => setShowAdminister(true)}
-        >
-          {t("administer")}
-        </ButtonV2>
-      </td>
-    </tr>
-  );
-};
-
-interface AdministrationCellProps {
-  administrations: MedicineAdministrationRecord[];
-  interval: DateRange;
-  prescription: Prescription;
-}
-
-const AdministrationCell = ({
-  administrations,
-  interval: { start, end },
-  prescription,
-}: AdministrationCellProps) => {
-  // Check if cell belongs to an administered prescription
-  const administered = administrations.filter((administration) =>
-    dayjs(administration.administered_date).isBetween(start, end)
-  );
-
-  if (administered.length) {
-    return (
-      <div className="tooltip">
-        <div className="relative mx-auto max-w-min">
-          <CareIcon
-            icon="l-check-circle"
-            className="text-xl text-primary-500"
-          />
-          {administered.length > 1 && (
-            <span className="absolute -bottom-1 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-white">
-              {administered.length}
-            </span>
-          )}
-        </div>
-        <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs">
-          <p>
-            Administered on{" "}
-            <strong>{formatDateTime(administered[0].administered_date)}</strong>
-          </p>
-          <p>
-            {administered.length > 1
-              ? `Administered ${administered.length} times`
-              : `Administered ${formatTime(administered[0].administered_date)}`}
-          </p>
-        </span>
-      </div>
-    );
-  }
-
-  // Check if cell belongs to a discontinued prescription
-  if (
-    prescription.discontinued &&
-    dayjs(end).isAfter(prescription.discontinued_date)
-  ) {
-    if (!dayjs(prescription.discontinued_date).isBetween(start, end)) return;
-
-    return (
-      <div className="tooltip">
-        <CareIcon
-          icon="l-ban"
-          className={classNames(
-            "text-xl",
-            dayjs(prescription.discontinued_date).isBetween(start, end)
-              ? "text-danger-700"
-              : "text-gray-400"
-          )}
-        />
-        <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs">
-          <p>
-            Discontinued on{" "}
-            <strong>{formatDateTime(prescription.discontinued_date)}</strong>
-          </p>
-          <p>
-            Reason:{" "}
-            {prescription.discontinued_reason ? (
-              <strong>{prescription.discontinued_reason}</strong>
-            ) : (
-              <span className="italic">Not specified</span>
-            )}
-          </p>
-        </span>
-      </div>
-    );
-  }
-
-  // Check if cell belongs to after prescription.created_date
-  if (dayjs(start).isAfter(prescription.created_date)) {
-    return <CareIcon icon="l-minus-circle" className="text-xl text-gray-400" />;
-  }
-
-  // Check if prescription.created_date is between start and end
-  // if (dayjs(prescription.created_date).isBetween(start, end)) {
-  //   return (
-  //     <div className="tooltip">
-  //       <CareIcon icon="l-play-circle" className="text-xl text-gray-500" />
-  //       <span className="tooltip-text tooltip-top -translate-x-1/2 text-xs">
-  //         <p>
-  //           Prescribed on{" "}
-  //           <strong>{formatDateTime(prescription.created_date)}</strong>
-  //         </p>
-  //       </span>
-  //     </div>
-  //   );
-  // }
-};
-
-function getAdministrationBounds(prescriptions: Prescription[]) {
-  // get start by finding earliest of all presciption's created_date
-  const start = new Date(
-    prescriptions.reduce(
-      (earliest, curr) =>
-        earliest < curr.created_date ? earliest : curr.created_date,
-      prescriptions[0]?.created_date ?? new Date()
-    )
-  );
-
-  // get end by finding latest of all presciption's last_administered_on
-  const end = new Date(
-    prescriptions
-      .filter((prescription) => prescription.last_administered_on)
-      .reduce(
-        (latest, curr) =>
-          curr.last_administered_on && curr.last_administered_on > latest
-            ? curr.last_administered_on
-            : latest,
-        prescriptions[0]?.created_date ?? new Date()
-      )
-  );
-
-  // floor start to previous hour
-  start.setMinutes(0, 0, 0);
-
-  // ceil end to next hour
-  end.setMinutes(0, 0, 0);
-  end.setHours(end.getHours() + 1);
-
-  return { start, end };
-}
diff --git a/src/Components/Medicine/PrescriptionBuilder.tsx b/src/Components/Medicine/PrescriptionBuilder.tsx
index f7a4dd49c93..39bf9b2f506 100644
--- a/src/Components/Medicine/PrescriptionBuilder.tsx
+++ b/src/Components/Medicine/PrescriptionBuilder.tsx
@@ -1,56 +1,49 @@
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NormalPrescription, Prescription, PRNPrescription } from "./models";
 import DialogModal from "../Common/Dialog";
 import CreatePrescriptionForm from "./CreatePrescriptionForm";
 import PrescriptionDetailCard from "./PrescriptionDetailCard";
-import { PrescriptionActions } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
 import DiscontinuePrescription from "./DiscontinuePrescription";
 import AdministerMedicine from "./AdministerMedicine";
 import { useTranslation } from "react-i18next";
+import useQuery from "../../Utils/request/useQuery";
+import MedicineRoutes from "./routes";
+import useSlug from "../../Common/hooks/useSlug";
 
 interface Props {
   prescription_type?: Prescription["prescription_type"];
-  actions: ReturnType<typeof PrescriptionActions>;
   is_prn?: boolean;
   disabled?: boolean;
 }
 
 export default function PrescriptionBuilder({
   prescription_type,
-  actions,
   is_prn = false,
   disabled,
 }: Props) {
   const { t } = useTranslation();
-  const dispatch = useDispatch<any>();
-
-  const [prescriptions, setPrescriptions] = useState<Prescription[]>();
+  const consultation = useSlug("consultation");
   const [showCreate, setShowCreate] = useState(false);
   const [showDiscontinueFor, setShowDiscontinueFor] = useState<Prescription>();
   const [showAdministerFor, setShowAdministerFor] = useState<Prescription>();
 
-  const fetchPrescriptions = useCallback(() => {
-    dispatch(actions.list({ is_prn, prescription_type })).then((res: any) =>
-      setPrescriptions(res.data.results)
-    );
-  }, [dispatch, is_prn]);
-
-  useEffect(() => {
-    fetchPrescriptions();
-  }, []);
+  const { data, refetch } = useQuery(MedicineRoutes.listPrescriptions, {
+    pathParams: { consultation },
+    query: { is_prn, prescription_type, limit: 100 },
+  });
 
   return (
     <div>
       {showDiscontinueFor && (
         <DiscontinuePrescription
           prescription={showDiscontinueFor}
-          actions={actions.prescription(showDiscontinueFor?.id ?? "")}
           onClose={(success) => {
             setShowDiscontinueFor(undefined);
-            if (success) fetchPrescriptions();
+            if (success) {
+              refetch();
+            }
           }}
           key={showDiscontinueFor.id}
         />
@@ -58,20 +51,20 @@ export default function PrescriptionBuilder({
       {showAdministerFor && (
         <AdministerMedicine
           prescription={showAdministerFor}
-          actions={actions.prescription(showAdministerFor?.id ?? "")}
           onClose={(success) => {
             setShowAdministerFor(undefined);
-            if (success) fetchPrescriptions();
+            if (success) {
+              refetch();
+            }
           }}
           key={showAdministerFor.id}
         />
       )}
       <div className="flex flex-col gap-3">
-        {prescriptions?.map((obj, index) => (
+        {data?.results.map((obj, index) => (
           <PrescriptionDetailCard
             key={index}
             prescription={obj}
-            actions={actions.prescription(obj?.id ?? "")}
             onDiscontinueClick={() => setShowDiscontinueFor(obj)}
             onAdministerClick={() => setShowAdministerFor(obj)}
             readonly={disabled}
@@ -114,10 +107,9 @@ export default function PrescriptionBuilder({
                 prescription_type,
               } as Prescription
             }
-            create={actions.create}
             onDone={() => {
               setShowCreate(false);
-              fetchPrescriptions();
+              refetch();
             }}
           />
         </DialogModal>
diff --git a/src/Components/Medicine/PrescriptionDetailCard.tsx b/src/Components/Medicine/PrescriptionDetailCard.tsx
index bf27aa34068..4333eeb1a88 100644
--- a/src/Components/Medicine/PrescriptionDetailCard.tsx
+++ b/src/Components/Medicine/PrescriptionDetailCard.tsx
@@ -3,7 +3,6 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 import ReadMore from "../Common/components/Readmore";
 import ButtonV2 from "../Common/components/ButtonV2";
-import { PrescriptionActions } from "../../Redux/actions";
 import { useTranslation } from "react-i18next";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
 
@@ -14,7 +13,6 @@ export default function PrescriptionDetailCard({
   prescription: Prescription;
   readonly?: boolean;
   children?: React.ReactNode;
-  actions: ReturnType<ReturnType<typeof PrescriptionActions>["prescription"]>;
   onDiscontinueClick?: () => void;
   onAdministerClick?: () => void;
   selected?: boolean;
@@ -105,16 +103,17 @@ export default function PrescriptionDetailCard({
                 {prescription.indicator}
               </Detail>
               <Detail
-                className="col-span-4 md:col-span-2"
+                className="col-span-9 md:col-span-2"
                 label={t("max_dosage_24_hrs")}
               >
                 {prescription.max_dosage}
               </Detail>
               <Detail
-                className="col-span-5 md:col-span-2"
+                className="col-span-9 md:col-span-2"
                 label={t("min_time_bw_doses")}
               >
-                {prescription.max_dosage}
+                {prescription.min_hours_between_doses &&
+                  prescription.min_hours_between_doses + " hrs."}
               </Detail>
             </>
           ) : (
@@ -149,7 +148,7 @@ export default function PrescriptionDetailCard({
         </div>
 
         <div className="flex flex-col gap-1 text-xs text-gray-600 md:mt-3 md:flex-row md:items-center">
-          <span className="flex gap-1">
+          <span className="flex gap-1 font-medium">
             Prescribed
             <RecordMeta
               time={prescription.created_date}
@@ -184,7 +183,9 @@ const Detail = (props: {
         {props.children ? (
           <span className="font-medium">{props.children}</span>
         ) : (
-          <span className="italic text-gray-500">{t("not_specified")}</span>
+          <span className="whitespace-nowrap text-xs font-medium text-gray-500">
+            {t("not_specified")}
+          </span>
         )}
       </div>
     </div>
diff --git a/src/Components/Medicine/PrescriptionsTable.tsx b/src/Components/Medicine/PrescriptionsTable.tsx
index 903f01b32a7..a1b039e71dd 100644
--- a/src/Components/Medicine/PrescriptionsTable.tsx
+++ b/src/Components/Medicine/PrescriptionsTable.tsx
@@ -1,8 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import ResponsiveMedicineTable from "../Common/components/ResponsiveMedicineTables";
+import { useState } from "react";
+import ResponsiveMedicineTable from "./ResponsiveMedicineTables";
 import { formatDateTime } from "../../Utils/utils";
-import { PrescriptionActions } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
 import { Prescription } from "./models";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
@@ -14,11 +12,13 @@ import AdministerMedicine from "./AdministerMedicine";
 import DialogModal from "../Common/Dialog";
 import PrescriptionDetailCard from "./PrescriptionDetailCard";
 import { useTranslation } from "react-i18next";
+import useSlug from "../../Common/hooks/useSlug";
+import useQuery from "../../Utils/request/useQuery";
+import MedicineRoutes from "./routes";
 
 interface Props {
   is_prn?: boolean;
   prescription_type?: Prescription["prescription_type"];
-  consultation_id: string;
   onChange?: () => void;
   readonly?: boolean;
 }
@@ -26,35 +26,22 @@ interface Props {
 export default function PrescriptionsTable({
   is_prn = false,
   prescription_type = "REGULAR",
-  consultation_id,
   onChange,
   readonly,
 }: Props) {
-  const dispatch = useDispatch<any>();
+  const consultation = useSlug("consultation");
   const { t } = useTranslation();
-
-  const [prescriptions, setPrescriptions] = useState<Prescription[]>();
   const [showBulkAdminister, setShowBulkAdminister] = useState(false);
   const [showDiscontinueFor, setShowDiscontinueFor] = useState<Prescription>();
   const [showAdministerFor, setShowAdministerFor] = useState<Prescription>();
   const [detailedViewFor, setDetailedViewFor] = useState<Prescription>();
 
-  const { list, prescription } = useMemo(
-    () => PrescriptionActions(consultation_id),
-    [consultation_id]
-  );
-
-  const fetchPrescriptions = useCallback(() => {
-    dispatch(list({ is_prn, prescription_type })).then((res: any) =>
-      setPrescriptions(res.data.results)
-    );
-  }, [consultation_id]);
-
-  useEffect(() => {
-    fetchPrescriptions();
-  }, [consultation_id]);
+  const { data } = useQuery(MedicineRoutes.listPrescriptions, {
+    pathParams: { consultation },
+    query: { is_prn, prescription_type, limit: 100 },
+  });
 
-  const lastModified = prescriptions?.[0]?.modified_date;
+  const lastModified = data?.results[0]?.modified_date;
   const tkeys =
     prescription_type === "REGULAR"
       ? is_prn
@@ -66,7 +53,7 @@ export default function PrescriptionsTable({
 
   return (
     <div>
-      {prescriptions && (
+      {data?.results && (
         <SlideOver
           title={t("administer_medicines")}
           dialogClass="w-full max-w-sm sm:max-w-md md:max-w-[1200px]"
@@ -74,8 +61,7 @@ export default function PrescriptionsTable({
           setOpen={setShowBulkAdminister}
         >
           <MedicineAdministration
-            prescriptions={prescriptions}
-            action={prescription}
+            prescriptions={data?.results}
             onDone={() => {
               setShowBulkAdminister(false);
               onChange?.();
@@ -86,7 +72,6 @@ export default function PrescriptionsTable({
       {showDiscontinueFor && (
         <DiscontinuePrescription
           prescription={showDiscontinueFor}
-          actions={prescription(showDiscontinueFor.id ?? "")}
           onClose={(success) => {
             setShowDiscontinueFor(undefined);
             if (success) onChange?.();
@@ -97,7 +82,6 @@ export default function PrescriptionsTable({
       {showAdministerFor && (
         <AdministerMedicine
           prescription={showAdministerFor}
-          actions={prescription(showAdministerFor.id ?? "")}
           onClose={(success) => {
             setShowAdministerFor(undefined);
             if (success) onChange?.();
@@ -115,7 +99,6 @@ export default function PrescriptionsTable({
           <div className="mt-4 flex flex-col gap-4">
             <PrescriptionDetailCard
               prescription={detailedViewFor}
-              actions={prescription(detailedViewFor.id ?? "")}
               key={detailedViewFor.id}
               readonly
             />
@@ -198,7 +181,7 @@ export default function PrescriptionsTable({
               maxWidthColumn={0}
               theads={Object.keys(tkeys).map((_) => t(_))}
               list={
-                prescriptions?.map((obj) => ({
+                data?.results.map((obj) => ({
                   ...obj,
                   medicine: obj.medicine_object?.name ?? obj.medicine_old,
                   route__pretty:
@@ -277,7 +260,7 @@ export default function PrescriptionsTable({
                   : undefined
               }
             />
-            {prescriptions?.length === 0 && (
+            {data?.results.length === 0 && (
               <div className="text-semibold flex items-center justify-center py-2 text-gray-600">
                 {t("no_data_found")}
               </div>
diff --git a/src/Components/Medicine/PrescrpitionTimeline.tsx b/src/Components/Medicine/PrescrpitionTimeline.tsx
new file mode 100644
index 00000000000..425bdecd894
--- /dev/null
+++ b/src/Components/Medicine/PrescrpitionTimeline.tsx
@@ -0,0 +1,232 @@
+import dayjs from "../../Utils/dayjs";
+import useSlug from "../../Common/hooks/useSlug";
+import useQuery from "../../Utils/request/useQuery";
+import { classNames, formatDateTime } from "../../Utils/utils";
+import { MedicineAdministrationRecord, Prescription } from "./models";
+import MedicineRoutes from "./routes";
+import Timeline, {
+  TimelineEvent,
+  TimelineNode,
+  TimelineNodeNotes,
+} from "../../CAREUI/display/Timeline";
+import ButtonV2 from "../Common/components/ButtonV2";
+import { useState } from "react";
+import ConfirmDialog from "../Common/ConfirmDialog";
+import request from "../../Utils/request/request";
+import RecordMeta from "../../CAREUI/display/RecordMeta";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+
+interface MedicineAdministeredEvent extends TimelineEvent<"administered"> {
+  administration: MedicineAdministrationRecord;
+}
+
+type PrescriptionTimelineEvents =
+  | TimelineEvent<"created" | "discontinued">
+  | MedicineAdministeredEvent;
+
+interface Props {
+  interval: { start: Date; end: Date };
+  prescription: Prescription;
+  showPrescriptionDetails?: boolean;
+  onRefetch?: () => void;
+}
+
+export default function PrescrpitionTimeline({
+  prescription,
+  interval,
+  onRefetch,
+}: Props) {
+  const consultation = useSlug("consultation");
+  const { data, refetch, loading } = useQuery(
+    MedicineRoutes.listAdministrations,
+    {
+      pathParams: { consultation },
+      query: {
+        prescription: prescription.id,
+        administered_date_after: formatDateTime(interval.start, "YYYY-MM-DD"),
+        administered_date_before: formatDateTime(interval.end, "YYYY-MM-DD"),
+      },
+    }
+  );
+
+  const events = data && compileEvents(prescription, data.results, interval);
+
+  if (loading && !data) {
+    return (
+      <div className="my-8 flex justify-center">
+        <CareIcon icon="l-spinner" className="animate-spin text-2xl" />
+      </div>
+    );
+  }
+
+  return (
+    <Timeline
+      className={classNames(
+        "py-4 md:px-3",
+        loading && data && "animate-pulse opacity-70"
+      )}
+      name="prescription"
+    >
+      {events?.map((event, index) => {
+        switch (event.type) {
+          case "created":
+          case "discontinued":
+            return (
+              <TimelineNode
+                key={`activity-${event.type}-${prescription.id}`}
+                event={event}
+                isLast={index === events.length - 1}
+              />
+            );
+
+          case "administered":
+            return (
+              <MedicineAdministeredNode
+                key={`activity-${event.type}-${prescription.id}`}
+                event={event}
+                onArchived={() => {
+                  onRefetch?.();
+                  refetch();
+                }}
+                isLastNode={index === events.length - 1}
+                hideArchive={prescription.discontinued}
+              />
+            );
+        }
+      })}
+    </Timeline>
+  );
+}
+
+const MedicineAdministeredNode = ({
+  event,
+  onArchived,
+  isLastNode,
+  hideArchive,
+}: {
+  event: MedicineAdministeredEvent;
+  onArchived: () => void;
+  isLastNode: boolean;
+  hideArchive?: boolean;
+}) => {
+  const consultation = useSlug("consultation");
+  const [showArchiveConfirmation, setShowArchiveConfirmation] = useState(false);
+  const [isArchiving, setIsArchiving] = useState(false);
+
+  return (
+    <>
+      <TimelineNode
+        name="medicine"
+        event={event}
+        className={classNames(event.cancelled && "opacity-70")}
+        // TODO: to add administered dosage when Titrated Prescriptions are implemented
+        // titleSuffix={`administered ${event.administration.dosage}.`}
+        actions={
+          !event.cancelled &&
+          !hideArchive && (
+            <ButtonV2
+              size="small"
+              border
+              ghost
+              variant="secondary"
+              onClick={() => setShowArchiveConfirmation(true)}
+            >
+              Archive
+            </ButtonV2>
+          )
+        }
+        isLast={isLastNode}
+      >
+        {event.cancelled && (
+          <TimelineNodeNotes icon="l-archive">
+            <span className="md:flex md:gap-1">
+              Prescription was archived{" "}
+              <RecordMeta
+                time={event.administration.archived_on}
+                user={event.administration.administered_by}
+                inlineUser
+              />
+            </span>
+          </TimelineNodeNotes>
+        )}
+      </TimelineNode>
+      <ConfirmDialog
+        show={showArchiveConfirmation}
+        disabled={isArchiving}
+        variant="warning"
+        title="Archive Administration"
+        description="Are you sure you want to archive this administration?"
+        action="Archive"
+        onConfirm={async () => {
+          setIsArchiving(true);
+
+          const { res } = await request(MedicineRoutes.archiveAdministration, {
+            pathParams: { consultation, external_id: event.administration.id },
+          });
+
+          if (res?.status === 200) {
+            setIsArchiving(false);
+            setShowArchiveConfirmation(false);
+            onArchived();
+          }
+        }}
+        onClose={() => setShowArchiveConfirmation(false)}
+      />
+    </>
+  );
+};
+
+const compileEvents = (
+  prescription: Prescription,
+  administrations: MedicineAdministrationRecord[],
+  interval: { start: Date; end: Date }
+): PrescriptionTimelineEvents[] => {
+  const events: PrescriptionTimelineEvents[] = [];
+
+  if (
+    dayjs(prescription.created_date).isBetween(interval.start, interval.end)
+  ) {
+    events.push({
+      type: "created",
+      icon: "l-plus-circle",
+      timestamp: prescription.created_date,
+      by: prescription.prescribed_by,
+      notes: prescription.notes,
+    });
+  }
+
+  administrations
+    .sort(
+      (a, b) =>
+        new Date(a.created_date).getTime() - new Date(b.created_date).getTime()
+    )
+    .forEach((administration) => {
+      events.push({
+        type: "administered",
+        icon: "l-syringe",
+        timestamp: administration.created_date,
+        by: administration.administered_by,
+        cancelled: !!administration.archived_on,
+        administration,
+        notes: administration.notes,
+      });
+    });
+
+  if (
+    prescription?.discontinued &&
+    dayjs(prescription.discontinued_date).isBetween(
+      interval.start,
+      interval.end
+    )
+  ) {
+    events.push({
+      type: "discontinued",
+      icon: "l-times-circle",
+      timestamp: prescription.discontinued_date,
+      by: undefined,
+      notes: prescription.discontinued_reason,
+    });
+  }
+
+  return events;
+};
diff --git a/src/Components/Common/components/ResponsiveMedicineTables.tsx b/src/Components/Medicine/ResponsiveMedicineTables.tsx
similarity index 97%
rename from src/Components/Common/components/ResponsiveMedicineTables.tsx
rename to src/Components/Medicine/ResponsiveMedicineTables.tsx
index bbed23e7c07..ccec9a7c69d 100644
--- a/src/Components/Common/components/ResponsiveMedicineTables.tsx
+++ b/src/Components/Medicine/ResponsiveMedicineTables.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import AccordionV2 from "./AccordionV2";
-import { classNames } from "../../../Utils/utils";
+import AccordionV2 from "../Common/components/AccordionV2";
+import { classNames } from "../../Utils/utils";
 
 function getWindowSize() {
   const { innerWidth, innerHeight } = window;
diff --git a/src/Components/Medicine/models.ts b/src/Components/Medicine/models.ts
index 0c49d199b21..ee42b03eca2 100644
--- a/src/Components/Medicine/models.ts
+++ b/src/Components/Medicine/models.ts
@@ -10,7 +10,7 @@ interface BasePrescription {
   notes?: string;
   meta?: object;
   readonly prescription_type?: "DISCHARGE" | "REGULAR";
-  readonly discontinued?: boolean;
+  readonly discontinued: boolean;
   discontinued_reason?: string;
   readonly prescribed_by: PerformedByModel;
   readonly discontinued_date: string;
@@ -50,13 +50,15 @@ export interface PRNPrescription extends BasePrescription {
 export type Prescription = NormalPrescription | PRNPrescription;
 
 export type MedicineAdministrationRecord = {
-  readonly id?: string;
-  readonly prescription?: Prescription;
+  readonly id: string;
+  readonly prescription: Prescription;
   notes: string;
   administered_date?: string;
-  readonly administered_by?: PerformedByModel;
-  readonly created_date?: string;
-  readonly modified_date?: string;
+  readonly administered_by: PerformedByModel;
+  readonly archived_by: PerformedByModel | undefined;
+  readonly archived_on: string | undefined;
+  readonly created_date: string;
+  readonly modified_date: string;
 };
 
 export type MedibaseMedicine = {
diff --git a/src/Components/Medicine/routes.ts b/src/Components/Medicine/routes.ts
new file mode 100644
index 00000000000..c0c4a602227
--- /dev/null
+++ b/src/Components/Medicine/routes.ts
@@ -0,0 +1,59 @@
+import { Type } from "../../Redux/api";
+import { PaginatedResponse } from "../../Utils/request/types";
+import { MedicineAdministrationRecord, Prescription } from "./models";
+
+const MedicineRoutes = {
+  listPrescriptions: {
+    path: "/api/v1/consultation/{consultation}/prescriptions/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<Prescription>>(),
+  },
+
+  createPrescription: {
+    path: "/api/v1/consultation/{consultation}/prescriptions/",
+    method: "POST",
+    TBody: Type<Prescription>(),
+    TRes: Type<Prescription>(),
+  },
+
+  listAdministrations: {
+    path: "/api/v1/consultation/{consultation}/prescription_administration/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<MedicineAdministrationRecord>>(),
+  },
+
+  getAdministration: {
+    path: "/api/v1/consultation/{consultation}/prescription_administration/{external_id}/",
+    method: "GET",
+    TRes: Type<MedicineAdministrationRecord>(),
+  },
+
+  getPrescription: {
+    path: "/api/v1/consultation/{consultation}/prescriptions/{external_id}/",
+    method: "GET",
+    TRes: Type<Prescription>(),
+  },
+
+  administerPrescription: {
+    path: "/api/v1/consultation/{consultation}/prescriptions/{external_id}/administer/",
+    method: "POST",
+    TBody: Type<Partial<MedicineAdministrationRecord>>(),
+    TRes: Type<MedicineAdministrationRecord>(),
+  },
+
+  discontinuePrescription: {
+    path: "/api/v1/consultation/{consultation}/prescriptions/{external_id}/discontinue/",
+    method: "POST",
+    TBody: Type<{ discontinued_reason: string }>(),
+    TRes: Type<Record<string, never>>(),
+  },
+
+  archiveAdministration: {
+    path: "/api/v1/consultation/{consultation}/prescription_administration/{external_id}/archive/",
+    method: "POST",
+    TBody: Type<Record<string, never>>(),
+    TRes: Type<Record<string, never>>(),
+  },
+} as const;
+
+export default MedicineRoutes;
diff --git a/src/Components/Notifications/NoticeBoard.tsx b/src/Components/Notifications/NoticeBoard.tsx
index 7fd16efb3cf..8ad3afba0f8 100644
--- a/src/Components/Notifications/NoticeBoard.tsx
+++ b/src/Components/Notifications/NoticeBoard.tsx
@@ -1,43 +1,23 @@
-import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { getNotifications } from "../../Redux/actions";
 import Page from "../Common/components/Page";
 import Loading from "../Common/Loading";
 import { formatDateTime } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 export const NoticeBoard = () => {
-  const dispatch: any = useDispatch();
-  const [isLoading, setIsLoading] = useState(true);
-  const [data, setData] = useState<any[]>([]);
   const { t } = useTranslation();
-
-  useEffect(() => {
-    setIsLoading(true);
-    dispatch(
-      getNotifications(
-        { offset: 0, event: "MESSAGE", medium_sent: "SYSTEM" },
-        new Date().getTime().toString()
-      )
-    )
-      .then((res: any) => {
-        if (res && res.data) {
-          setData(res.data.results);
-        }
-        setIsLoading(false);
-      })
-      .catch(() => {
-        setIsLoading(false);
-      });
-  }, [dispatch]);
+  const { data, loading } = useQuery(routes.getNotifications, {
+    query: { offset: 0, event: "MESSAGE", medium_sent: "SYSTEM" },
+  });
 
   let notices;
 
-  if (data?.length) {
+  if (data?.results.length) {
     notices = (
       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
-        {data.map((item) => (
+        {data.results.map((item) => (
           <div
             key={`usr_${item.id}`}
             className="overflow-hidden rounded shadow-md"
@@ -71,7 +51,7 @@ export const NoticeBoard = () => {
     );
   }
 
-  if (isLoading) return <Loading />;
+  if (loading) return <Loading />;
   return (
     <Page title={t("Notice Board")} hideBack={true} breadcrumbs={false}>
       <div>{notices}</div>
diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index 5f124516a14..864208a432f 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -1,13 +1,5 @@
 import { navigate } from "raviger";
 import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import {
-  getNotifications,
-  markNotificationAsRead,
-  getUserPnconfig,
-  updateUserPnconfig,
-  getPublicKey,
-} from "../../Redux/actions";
 import Spinner from "../Common/Spinner";
 import { NOTIFICATION_EVENTS } from "../../Common/constants";
 import { Error } from "../../Utils/Notifications.js";
@@ -24,6 +16,8 @@ import SelectMenuV2 from "../Form/SelectMenuV2";
 import { useTranslation } from "react-i18next";
 import CircularProgress from "../Common/components/CircularProgress";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
 
 const RESULT_LIMIT = 14;
 
@@ -38,14 +32,16 @@ const NotificationTile = ({
   onClickCB,
   setShowNotifications,
 }: NotificationTileProps) => {
-  const dispatch: any = useDispatch();
   const [result, setResult] = useState(notification);
   const [isMarkingAsRead, setIsMarkingAsRead] = useState(false);
   const { t } = useTranslation();
 
   const handleMarkAsRead = async () => {
     setIsMarkingAsRead(true);
-    await dispatch(markNotificationAsRead(result.id));
+    await request(routes.markNotificationAsRead, {
+      pathParams: { id: result.id },
+      body: { read_at: new Date() },
+    });
     setResult({ ...result, read_at: new Date() });
     setIsMarkingAsRead(false);
   };
@@ -153,7 +149,6 @@ export default function NotificationsList({
   handleOverflow,
 }: NotificationsListProps) {
   const { username } = useAuthUser();
-  const dispatch: any = useDispatch();
   const [data, setData] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [offset, setOffset] = useState(0);
@@ -180,12 +175,14 @@ export default function NotificationsList({
 
   const intialSubscriptionState = async () => {
     try {
-      const res = await dispatch(getUserPnconfig({ username: username }));
+      const res = await request(routes.getUserPnconfig, {
+        pathParams: { username: username },
+      });
       const reg = await navigator.serviceWorker.ready;
       const subscription = await reg.pushManager.getSubscription();
-      if (!subscription && !res?.data?.pf_endpoint) {
+      if (!subscription && !res.data?.pf_endpoint) {
         setIsSubscribed("NotSubscribed");
-      } else if (subscription?.endpoint === res?.data?.pf_endpoint) {
+      } else if (subscription?.endpoint === res.data?.pf_endpoint) {
         setIsSubscribed("SubscribedOnThisDevice");
       } else {
         setIsSubscribed("SubscribedOnAnotherDevice");
@@ -247,9 +244,11 @@ export default function NotificationsList({
                   pf_p256dh: "",
                   pf_auth: "",
                 };
-                await dispatch(
-                  updateUserPnconfig(data, { username: username })
-                );
+
+                await request(routes.updateUserPnconfig, {
+                  pathParams: { username: username },
+                  body: data,
+                });
 
                 setIsSubscribed("NotSubscribed");
                 setIsSubscribing(false);
@@ -271,8 +270,8 @@ export default function NotificationsList({
 
   async function subscribe() {
     setIsSubscribing(true);
-    const response = await dispatch(getPublicKey());
-    const public_key = response.data.public_key;
+    const response = await request(routes.getPublicKey);
+    const public_key = response.data?.public_key;
     const sw = await navigator.serviceWorker.ready;
     const push = await sw.pushManager.subscribe({
       userVisibleOnly: true,
@@ -297,11 +296,12 @@ export default function NotificationsList({
       pf_auth: auth,
     };
 
-    const res = await dispatch(
-      updateUserPnconfig(data, { username: username })
-    );
+    const { res } = await request(routes.updateUserPnconfig, {
+      pathParams: { username: username },
+      body: data,
+    });
 
-    if (res.status >= 200 && res.status <= 300) {
+    if (res?.ok) {
       setIsSubscribed("SubscribedOnThisDevice");
     }
     setIsSubscribing(false);
@@ -310,8 +310,11 @@ export default function NotificationsList({
   const handleMarkAllAsRead = async () => {
     setIsMarkingAllAsRead(true);
     await Promise.all(
-      data.map(async (notification) => {
-        return await dispatch(markNotificationAsRead(notification.id));
+      data.map((notification) => {
+        return request(routes.markNotificationAsRead, {
+          pathParams: { id: notification.id },
+          body: { read_at: new Date() },
+        });
       })
     );
     setReload(!reload);
@@ -320,10 +323,10 @@ export default function NotificationsList({
 
   useEffect(() => {
     setIsLoading(true);
-    dispatch(
-      getNotifications({ offset, event: eventFilter, medium_sent: "SYSTEM" })
-    )
-      .then((res: any) => {
+    request(routes.getNotifications, {
+      query: { offset, event: eventFilter, medium_set: "SYSTEM" },
+    })
+      .then((res) => {
         if (res && res.data) {
           setData(res.data.results);
           setUnreadCount(
@@ -341,7 +344,7 @@ export default function NotificationsList({
         setOffset((prev) => prev - RESULT_LIMIT);
       });
     intialSubscriptionState();
-  }, [dispatch, reload, open, offset, eventFilter, isSubscribed]);
+  }, [reload, open, offset, eventFilter, isSubscribed]);
 
   if (!offset && isLoading) {
     manageResults = (
diff --git a/src/Components/Notifications/ShowPushNotification.tsx b/src/Components/Notifications/ShowPushNotification.tsx
index 09b62bb9333..35e9ecd7e70 100644
--- a/src/Components/Notifications/ShowPushNotification.tsx
+++ b/src/Components/Notifications/ShowPushNotification.tsx
@@ -1,29 +1,34 @@
-import { useDispatch } from "react-redux";
-import { getNotificationData } from "../../Redux/actions";
-import { useEffect } from "react";
 import { DetailRoute } from "../../Routers/types";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { NotificationData } from "./models";
 
 export default function ShowPushNotification({ id }: DetailRoute) {
-  const dispatch: any = useDispatch();
+  useQuery(routes.getNotificationData, {
+    pathParams: { id },
+    onResponse(res) {
+      if (res.data) {
+        window.location.href = resultUrl(res.data);
+      }
+    },
+  });
 
-  const resultUrl = async () => {
-    const res = await dispatch(getNotificationData({ id }));
-    const data = res.data.caused_objects;
-    switch (res.data.event) {
+  const resultUrl = ({ caused_objects, event }: NotificationData) => {
+    switch (event) {
       case "PATIENT_CREATED":
-        return `/facility/${data.facility}/patient/${data.patient}`;
+        return `/facility/${caused_objects?.facility}/patient/${caused_objects?.patient}`;
       case "PATIENT_UPDATED":
-        return `/facility/${data.facility}/patient/${data.patient}`;
+        return `/facility/${caused_objects?.facility}/patient/${caused_objects?.patient}`;
       case "PATIENT_CONSULTATION_CREATED":
-        return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}`;
+        return `/facility/${caused_objects?.facility}/patient/${caused_objects?.patient}/consultation/${caused_objects?.consultation}`;
       case "PATIENT_CONSULTATION_UPDATED":
-        return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}`;
+        return `/facility/${caused_objects?.facility}/patient/${caused_objects?.patient}/consultation/${caused_objects?.consultation}`;
       case "PATIENT_CONSULTATION_UPDATE_CREATED":
-        return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}/daily-rounds/${data.daily_round}`;
+        return `/facility/${caused_objects?.facility}/patient/${caused_objects?.patient}/consultation/${caused_objects?.consultation}/daily-rounds/${caused_objects?.daily_round}`;
       case "PATIENT_CONSULTATION_UPDATE_UPDATED":
-        return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}/daily-rounds/${data.daily_round}`;
+        return `/facility/${caused_objects?.facility}/patient/${caused_objects?.patient}/consultation/${caused_objects?.consultation}/daily-rounds/${caused_objects?.daily_round}`;
       case "INVESTIGATION_SESSION_CREATED":
-        return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}/investigation/${data.session}`;
+        return `/facility/${caused_objects?.facility}/patient/${caused_objects?.patient}/consultation/${caused_objects?.consultation}/investigation/${caused_objects?.session}`;
       case "MESSAGE":
         return "/notice_board/";
       default:
@@ -31,13 +36,5 @@ export default function ShowPushNotification({ id }: DetailRoute) {
     }
   };
 
-  useEffect(() => {
-    resultUrl()
-      .then((url) => {
-        window.location.href = url;
-      })
-      .catch((err) => console.log(err));
-  }, []);
-
   return <></>;
 }
diff --git a/src/Components/Notifications/models.tsx b/src/Components/Notifications/models.tsx
new file mode 100644
index 00000000000..edb29178cb5
--- /dev/null
+++ b/src/Components/Notifications/models.tsx
@@ -0,0 +1,29 @@
+export interface NotificationData {
+  id: string;
+  title: string;
+  caused_objects: cause_object;
+  caused_by: any;
+  content: string;
+  offset: number;
+  event: string;
+  event_type: string;
+  medium_sent: string;
+  created_date: string;
+  read_at: string;
+  message: string;
+  public_key: string;
+}
+
+export interface cause_object {
+  facility: string;
+  patient: string;
+  consultation: string;
+  daily_round: string;
+  session: string;
+}
+
+export interface PNconfigData {
+  pf_auth: string;
+  pf_endpoint: string;
+  pf_p256dh: string;
+}
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 61b18faa367..6a52d68130c 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -16,9 +16,14 @@ import {
   getAllPatient,
   getAnyFacility,
   getDistrict,
+  getFacilityAssetLocation,
   getLocalBody,
 } from "../../Redux/actions";
-import { statusType, useAbortableEffect } from "../../Common/utils";
+import {
+  statusType,
+  useAbortableEffect,
+  parseOptionId,
+} from "../../Common/utils";
 
 import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import ButtonV2 from "../Common/components/ButtonV2";
@@ -36,7 +41,6 @@ import RecordMeta from "../../CAREUI/display/RecordMeta";
 import SearchInput from "../Form/SearchInput";
 import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
-import { parseOptionId } from "../../Common/utils";
 import { formatAge, parsePhoneNumber } from "../../Utils/utils.js";
 import { useDispatch } from "react-redux";
 import useFilters from "../../Common/hooks/useFilters";
@@ -45,6 +49,8 @@ import Page from "../Common/components/Page.js";
 import dayjs from "dayjs";
 import { triggerGoal } from "../../Integrations/Plausible.js";
 import useAuthUser from "../../Common/hooks/useAuthUser.js";
+import useQuery from "../../Utils/request/useQuery.js";
+import routes from "../../Redux/api.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -104,6 +110,7 @@ export const PatientManager = () => {
   const [districtName, setDistrictName] = useState("");
   const [localbodyName, setLocalbodyName] = useState("");
   const [facilityBadgeName, setFacilityBadge] = useState("");
+  const [locationBadgeName, setLocationBadge] = useState("");
   const [phone_number, setPhoneNumber] = useState("");
   const [phoneNumberError, setPhoneNumberError] = useState("");
   const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
@@ -199,6 +206,8 @@ export const PatientManager = () => {
       qParams.last_consultation_admitted_bed_type_list || undefined,
     last_consultation_discharge_reason:
       qParams.last_consultation_discharge_reason || undefined,
+    last_consultation_current_bed__location:
+      qParams.last_consultation_current_bed__location || undefined,
     srf_id: qParams.srf_id || undefined,
     number_of_doses: qParams.number_of_doses || undefined,
     covin_id: qParams.covin_id || undefined,
@@ -344,6 +353,7 @@ export const PatientManager = () => {
     qParams.age_min,
     qParams.last_consultation_admitted_bed_type_list,
     qParams.last_consultation_discharge_reason,
+    qParams.last_consultation_current_bed__location,
     qParams.facility,
     qParams.facility_type,
     qParams.district,
@@ -443,12 +453,37 @@ export const PatientManager = () => {
     [dispatch, qParams.facility]
   );
 
+  const fetchLocationBadgeName = useCallback(
+    async (status: statusType) => {
+      const res =
+        qParams.last_consultation_current_bed__location &&
+        (await dispatch(
+          getFacilityAssetLocation(
+            qParams.facility,
+            qParams.last_consultation_current_bed__location
+          )
+        ));
+
+      if (!status.aborted) {
+        setLocationBadge(res?.data?.name);
+      }
+    },
+    [dispatch, qParams.last_consultation_current_bed__location]
+  );
+
   useAbortableEffect(
     (status: statusType) => {
       fetchFacilityBadgeName(status);
+      fetchLocationBadgeName(status);
     },
-    [fetchFacilityBadgeName]
+    [fetchFacilityBadgeName, fetchLocationBadgeName]
   );
+
+  const { data: permittedFacilities } = useQuery(
+    routes.getPermittedFacilities,
+    {}
+  );
+
   const LastAdmittedToTypeBadges = () => {
     const badge = (key: string, value: any, id: string) => {
       return (
@@ -519,27 +554,23 @@ export const PatientManager = () => {
             <div className="h-20 w-full min-w-[5rem] rounded-lg border border-gray-300 bg-gray-50 md:w-20">
               {patient?.last_consultation?.current_bed &&
               patient?.last_consultation?.discharge_date === null ? (
-                <div className="flex h-full flex-col items-center justify-center">
-                  <span className="tooltip w-full truncate px-1 text-center text-sm text-gray-900">
+                <div className="tooltip flex h-full flex-col items-center justify-center">
+                  <span className="w-full truncate px-1 text-center text-sm text-gray-900">
                     {
                       patient?.last_consultation?.current_bed?.bed_object
                         ?.location_object?.name
                     }
-                    <span className="tooltip-text tooltip-bottom">
-                      {
-                        patient?.last_consultation?.current_bed?.bed_object
-                          ?.location_object?.name
-                      }
-                    </span>
                   </span>
                   <span className="w-full truncate px-1 text-center text-base font-bold">
-                    {patient?.last_consultation?.current_bed?.bed_object.name}
-                    <span className="tooltip-text tooltip-bottom">
-                      {
-                        patient?.last_consultation?.current_bed?.bed_object
-                          ?.name
-                      }
-                    </span>
+                    {patient?.last_consultation?.current_bed?.bed_object?.name}
+                  </span>
+                  <span className="tooltip-text tooltip-bottom text-sm font-medium lg:-translate-y-1/2">
+                    {
+                      patient?.last_consultation?.current_bed?.bed_object
+                        ?.location_object?.name
+                    }
+                    <br />
+                    {patient?.last_consultation?.current_bed?.bed_object?.name}
                   </span>
                 </div>
               ) : patient.last_consultation?.suggestion === "DC" ? (
@@ -757,9 +788,13 @@ export const PatientManager = () => {
             <ButtonV2
               id="add-patient-details"
               onClick={() => {
-                qParams.facility
-                  ? navigate(`/facility/${qParams.facility}/patient`)
-                  : setShowDialog(true);
+                if (qParams.facility)
+                  navigate(`/facility/${qParams.facility}/patient`);
+                else if (permittedFacilities?.results.length === 1)
+                  navigate(
+                    `/facility/${permittedFacilities?.results[0].id}/patient`
+                  );
+                else setShowDialog(true);
               }}
               className="w-full lg:w-fit"
             >
@@ -779,6 +814,7 @@ export const PatientManager = () => {
             />
             {showDoctorConnect && (
               <ButtonV2
+                id="doctor-connect-patient-button"
                 onClick={() => {
                   triggerGoal("Doctor Connect Clicked", {
                     facilityId: qParams.facility,
@@ -940,6 +976,11 @@ export const PatientManager = () => {
               "last_consultation_medico_legal_case"
             ),
             value("Facility", "facility", facilityBadgeName),
+            value(
+              "Location",
+              "last_consultation_current_bed__location",
+              locationBadgeName
+            ),
             badge("Facility Type", "facility_type"),
             value("District", "district", districtName),
             ordering(),
diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
index 97f5a6c6b9c..7bc7f7b861f 100644
--- a/src/Components/Patient/PatientFilter.tsx
+++ b/src/Components/Patient/PatientFilter.tsx
@@ -34,6 +34,7 @@ import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
 import AccordionV2 from "../Common/components/AccordionV2";
 import { dateQueryString } from "../../Utils/utils";
 import dayjs from "dayjs";
+import { LocationSelect } from "../Common/LocationSelect";
 
 const getDate = (value: any) =>
   value && dayjs(value).isValid() && dayjs(value).toDate();
@@ -79,6 +80,8 @@ export default function PatientFilter(props: any) {
       filter.last_consultation_admitted_bed_type_list
         ? filter.last_consultation_admitted_bed_type_list.split(",")
         : [],
+    last_consultation_current_bed__location:
+      filter.last_consultation_current_bed__location || "",
     last_consultation_discharge_reason:
       filter.last_consultation_discharge_reason || null,
     srf_id: filter.srf_id || null,
@@ -128,6 +131,7 @@ export default function PatientFilter(props: any) {
     last_consultation_discharge_date_before: "",
     last_consultation_discharge_date_after: "",
     last_consultation_admitted_to_list: [],
+    last_consultation_current_bed__location: "",
     srf_id: "",
     number_of_doses: null,
     covin_id: "",
@@ -239,6 +243,7 @@ export default function PatientFilter(props: any) {
       last_consultation_discharge_date_after,
       last_consultation_admitted_bed_type_list,
       last_consultation_discharge_reason,
+      last_consultation_current_bed__location,
       number_of_doses,
       covin_id,
       srf_id,
@@ -256,6 +261,8 @@ export default function PatientFilter(props: any) {
       district: district || "",
       lsgBody: lsgBody || "",
       facility: facility || "",
+      last_consultation_current_bed__location:
+        last_consultation_current_bed__location || "",
       facility_type: facility_type || "",
       date_declared_positive_before: dateQueryString(
         date_declared_positive_before
@@ -588,13 +595,29 @@ export default function PatientFilter(props: any) {
             <FacilitySelect
               multiple={false}
               name="facility"
+              showAll={false}
               selected={filterState.facility_ref}
-              showAll
               setSelected={(obj) => setFacility(obj, "facility")}
             />
           </div>
-
           <div className="w-full flex-none">
+            <FieldLabel className="text-sm">Location</FieldLabel>
+            <LocationSelect
+              disabled={!filterState.facility}
+              name="facility"
+              selected={filterState.last_consultation_current_bed__location}
+              multiple={false}
+              errors=""
+              facilityId={filterState.facility}
+              setSelected={(selected) =>
+                setFilterState({
+                  ...filterState,
+                  last_consultation_current_bed__location: selected,
+                })
+              }
+            />
+          </div>
+          <div className="-mt-6 w-full flex-none">
             <FieldLabel className="text-sm">Facility type</FieldLabel>
             <SelectMenuV2
               placeholder="Show all"
diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index 1392b7af6eb..fd6213d8e08 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -8,7 +8,7 @@ import {
   TELEMEDICINE_ACTIONS,
 } from "../../Common/constants";
 import { ConsultationModel, PatientCategory } from "../Facility/models";
-import { Switch } from "@headlessui/react";
+import { Switch, Menu } from "@headlessui/react";
 
 import { Link } from "raviger";
 import { useState } from "react";
@@ -26,8 +26,9 @@ import Beds from "../Facility/Consultations/Beds";
 import { PatientModel } from "./models";
 import request from "../../Utils/request/request.js";
 import routes from "../../Redux/api.js";
-import { Menu } from "@headlessui/react";
 import DropdownMenu from "../Common/components/Menu.js";
+import { triggerGoal } from "../../Integrations/Plausible.js";
+import useAuthUser from "../../Common/hooks/useAuthUser.js";
 
 export default function PatientInfoCard(props: {
   patient: PatientModel;
@@ -36,6 +37,8 @@ export default function PatientInfoCard(props: {
   consultationId: string;
   showAbhaProfile?: boolean;
 }) {
+  const authUser = useAuthUser();
+
   const [open, setOpen] = useState(false);
   const [showLinkABHANumber, setShowLinkABHANumber] = useState(false);
   const [showABHAProfile, setShowABHAProfile] = useState(
@@ -459,6 +462,11 @@ export default function PatientInfoCard(props: {
                               });
                               setOpen(true);
                             }
+                            triggerGoal("Patient Card Button Clicked", {
+                              buttonName: action[1],
+                              consultationId: consultation?.id,
+                              userId: authUser?.id,
+                            });
                           }}
                         >
                           <CareIcon
@@ -489,6 +497,11 @@ export default function PatientInfoCard(props: {
                             onClick={() => {
                               close();
                               setShowABHAProfile(true);
+                              triggerGoal("Patient Card Button Clicked", {
+                                buttonName: "Show ABHA Profile",
+                                consultationId: consultation?.id,
+                                userId: authUser?.id,
+                              });
                             }}
                           >
                             <CareIcon className="care-l-user-square text-lg text-primary-500" />
@@ -497,6 +510,11 @@ export default function PatientInfoCard(props: {
                           <div
                             className="dropdown-item-primary pointer-events-auto m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out"
                             onClick={() => {
+                              triggerGoal("Patient Card Button Clicked", {
+                                buttonName: "Link Care Context",
+                                consultationId: consultation?.id,
+                                userId: authUser?.id,
+                              });
                               close();
                               setShowLinkCareContext(true);
                             }}
@@ -532,6 +550,11 @@ export default function PatientInfoCard(props: {
                 <Switch
                   checked={medicoLegalCase}
                   onChange={(checked) => {
+                    triggerGoal("Patient Card Button Clicked", {
+                      buttonName: "Medico Legal Case",
+                      consultationId: consultation?.id,
+                      userId: authUser?.id,
+                    });
                     setMedicoLegalCase(checked);
                     switchMedicoLegalCase(checked);
                   }}
diff --git a/src/Components/Resource/BadgesList.tsx b/src/Components/Resource/BadgesList.tsx
index 31b8f1c17ae..4ab4f3cc8e4 100644
--- a/src/Components/Resource/BadgesList.tsx
+++ b/src/Components/Resource/BadgesList.tsx
@@ -1,63 +1,25 @@
-import { useState, useEffect } from "react";
-import { getAnyFacility } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
 import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
+
+export function useFacilityQuery(facilityId: string | undefined) {
+  return useQuery(routes.getAnyFacility, {
+    pathParams: { id: facilityId as string },
+    prefetch: !!facilityId,
+  });
+}
 
 export default function BadgesList(props: any) {
   const { appliedFilters, FilterBadges } = props;
-  const [orginFacilityName, setOrginFacilityName] = useState("");
-  const [approvingFacilityName, setApprovingFacilityName] = useState("");
-  const [assignedFacilityName, setAssignedFacilityName] = useState("");
-  const dispatch: any = useDispatch();
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!appliedFilters.origin_facility) return setOrginFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(appliedFilters.origin_facility, "origin_facility_name")
-      );
-      setOrginFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, appliedFilters.origin_facility]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!appliedFilters.approving_facility)
-        return setApprovingFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(
-          appliedFilters.approving_facility,
-          "approving_facility_name"
-        )
-      );
-      setApprovingFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, appliedFilters.approving_facility]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!appliedFilters.assigned_facility) return setAssignedFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(
-          appliedFilters.assigned_facility,
-          "assigned_facility_name"
-        )
-      );
-      setAssignedFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, appliedFilters.assigned_facility]);
+  const originFacility = useFacilityQuery(appliedFilters.origin_facility);
+  const approvingFacility = useFacilityQuery(appliedFilters.approving_facility);
+  const assignedFacility = useFacilityQuery(appliedFilters.assigned_facility);
 
   const getDescShiftingFilterOrder = (ordering: any) => {
-    let desc = "";
-    SHIFTING_FILTER_ORDER.map((item: any) => {
-      if (item.text === ordering) {
-        desc = item.desc;
-      }
-    });
-    return desc;
+    const foundItem = SHIFTING_FILTER_ORDER.find(
+      (item) => item.text === ordering
+    );
+    return foundItem ? foundItem.desc : "";
   };
 
   return (
@@ -75,13 +37,25 @@ export default function BadgesList(props: any) {
         }),
         ...dateRange("Modified", "modified_date"),
         ...dateRange("Created", "created_date"),
-        value("Origin facility", "origin_facility", orginFacilityName),
+        value(
+          "Origin facility",
+          "origin_facility",
+          appliedFilters.origin_facility ? originFacility?.data?.name || "" : ""
+        ),
         value(
           "Approving facility",
           "approving_facility",
-          approvingFacilityName
+          appliedFilters.approving_facility
+            ? approvingFacility?.data?.name || ""
+            : ""
+        ),
+        value(
+          "Assigned facility",
+          "assigned_facility",
+          appliedFilters.assigned_facility
+            ? assignedFacility?.data?.name || ""
+            : ""
         ),
-        value("Assigned facility", "assigned_facility", assignedFacilityName),
       ]}
     />
   );
diff --git a/src/Components/Resource/CommentSection.tsx b/src/Components/Resource/CommentSection.tsx
index 01bd67454f5..5b9929ed19f 100644
--- a/src/Components/Resource/CommentSection.tsx
+++ b/src/Components/Resource/CommentSection.tsx
@@ -1,60 +1,18 @@
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getResourceComments, addResourceComments } from "../../Redux/actions";
+import { useState } from "react";
 import * as Notification from "../../Utils/Notifications.js";
-import Pagination from "../Common/Pagination";
 import { formatDateTime } from "../../Utils/utils";
 import CircularProgress from "../Common/components/CircularProgress";
 import ButtonV2 from "../Common/components/ButtonV2";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
+import routes from "../../Redux/api";
+import PaginatedList from "../../CAREUI/misc/PaginatedList";
+import { IComment } from "./models";
+import request from "../../Utils/request/request";
 
-interface CommentSectionProps {
-  id: string;
-}
-const CommentSection = (props: CommentSectionProps) => {
-  const dispatch: any = useDispatch();
-  const initialData: any = [];
-  const [comments, setComments] = useState(initialData);
+const CommentSection = (props: { id: string }) => {
   const [commentBox, setCommentBox] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
 
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalCount, setTotalCount] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const limit = 8;
-
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setCurrentPage(page);
-    setOffset(offset);
-  };
-
-  const fetchData = useCallback(
-    async (status: statusType = { aborted: false }) => {
-      setIsLoading(true);
-      const res = await dispatch(
-        getResourceComments(props.id, { limit, offset })
-      );
-      if (!status.aborted) {
-        if (res && res.data) {
-          setComments(res.data?.results);
-          setTotalCount(res.data.count);
-        }
-        setIsLoading(false);
-      }
-    },
-    [props.id, dispatch, offset]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
-
-  const onSubmitComment = () => {
+  const onSubmitComment = async () => {
     const payload = {
       comment: commentBox,
     };
@@ -64,66 +22,85 @@ const CommentSection = (props: CommentSectionProps) => {
       });
       return;
     }
-    dispatch(addResourceComments(props.id, payload)).then((_: any) => {
-      Notification.Success({ msg: "Comment added successfully" });
-      fetchData();
+    const { res } = await request(routes.addResourceComments, {
+      pathParams: { id: props.id },
+      body: payload,
     });
+    if (res?.ok) {
+      Notification.Success({ msg: "Comment added successfully" });
+    }
     setCommentBox("");
   };
-
   return (
-    <div className="flex w-full flex-col">
-      <TextAreaFormField
-        name="comment"
-        placeholder="Type your comment"
-        value={commentBox}
-        onChange={(e) => setCommentBox(e.value)}
-      />
-      <div className="flex w-full justify-end">
-        <ButtonV2 onClick={onSubmitComment}>Post Your Comment</ButtonV2>
-      </div>
-      <div className="w-full">
-        {isLoading ? (
-          <CircularProgress className="h-12 w-12" />
-        ) : (
-          comments.map((comment: any) => (
-            <div
-              key={comment.id}
-              className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+    <PaginatedList
+      route={routes.getResourceComments}
+      pathParams={{ id: props.id }}
+    >
+      {(_, query) => (
+        <div className="flex w-full flex-col">
+          <TextAreaFormField
+            name="comment"
+            placeholder="Type your comment"
+            value={commentBox}
+            onChange={(e) => setCommentBox(e.value)}
+          />
+
+          <div className="flex w-full justify-end">
+            <ButtonV2
+              onClick={async () => {
+                await onSubmitComment();
+                query.refetch();
+              }}
             >
-              <div className="flex  w-full ">
-                <p className="text-justify">{comment.comment}</p>
-              </div>
-              <div className="mt-3">
-                <span className="text-xs text-gray-500">
-                  {formatDateTime(comment.modified_date) || "-"}
-                </span>
-              </div>
-              <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
-                  {comment.created_by_object?.first_name?.charAt(0) || "U"}
-                </div>
-                <span className="pl-2 text-sm text-gray-700">
-                  {comment.created_by_object?.first_name || "Unknown"}{" "}
-                  {comment.created_by_object?.last_name}
-                </span>
+              Post Your Comment
+            </ButtonV2>
+          </div>
+          <div className="w-full">
+            <div>
+              <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
+                <span>No comments available</span>
+              </PaginatedList.WhenEmpty>
+              <PaginatedList.WhenLoading>
+                <CircularProgress className="h-12 w-12" />
+              </PaginatedList.WhenLoading>
+              <PaginatedList.Items<IComment>>
+                {(item) => <Comment {...item} />}
+              </PaginatedList.Items>
+              <div className="flex w-full items-center justify-center">
+                <PaginatedList.Paginator hideIfSinglePage />
               </div>
             </div>
-          ))
-        )}
-      </div>
-      {totalCount > limit && (
-        <div className="mt-4 flex w-full justify-center">
-          <Pagination
-            cPage={currentPage}
-            defaultPerPage={limit}
-            data={{ totalCount }}
-            onChange={handlePagination}
-          />
+          </div>
         </div>
       )}
-    </div>
+    </PaginatedList>
   );
 };
 
 export default CommentSection;
+
+export const Comment = ({
+  comment,
+  created_by_object,
+  modified_date,
+}: IComment) => (
+  <div className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800">
+    <div className="flex  w-full ">
+      <p className="text-justify">{comment}</p>
+    </div>
+    <div className="mt-3">
+      <span className="text-xs text-gray-500">
+        {formatDateTime(modified_date) || "-"}
+      </span>
+    </div>
+    <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
+        {created_by_object?.first_name?.charAt(0) || "U"}
+      </div>
+      <span className="pl-2 text-sm text-gray-700">
+        {created_by_object?.first_name || "Unknown"}{" "}
+        {created_by_object?.last_name}
+      </span>
+    </div>
+  </div>
+);
diff --git a/src/Components/Resource/ListFilter.tsx b/src/Components/Resource/ListFilter.tsx
index 7a47732db64..afe48eedfd0 100644
--- a/src/Components/Resource/ListFilter.tsx
+++ b/src/Components/Resource/ListFilter.tsx
@@ -1,8 +1,5 @@
-import { useEffect, useState } from "react";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { RESOURCE_FILTER_ORDER } from "../../Common/constants";
-import { getAnyFacility } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
 import { RESOURCE_CHOICES } from "../../Common/constants";
 import useMergeState from "../../Common/hooks/useMergeState";
 import { navigate } from "raviger";
@@ -15,6 +12,8 @@ import { DateRange } from "../Common/DateRangeInputV2";
 import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
 import dayjs from "dayjs";
 import { dateQueryString } from "../../Utils/utils";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 const clearFilterState = {
   origin_facility: "",
@@ -37,9 +36,6 @@ const getDate = (value: any) =>
 
 export default function ListFilter(props: any) {
   const { filter, onChange, closeFilter } = props;
-  const [isOriginLoading, setOriginLoading] = useState(false);
-  const [isResourceLoading, setResourceLoading] = useState(false);
-  const [isAssignedLoading, setAssignedLoading] = useState(false);
   const [filterState, setFilterState] = useMergeState({
     origin_facility: filter.origin_facility || "",
     origin_facility_ref: null,
@@ -55,55 +51,42 @@ export default function ListFilter(props: any) {
     ordering: filter.ordering || null,
     status: filter.status || null,
   });
-  const dispatch: any = useDispatch();
 
-  useEffect(() => {
-    async function fetchData() {
-      if (filter.origin_facility) {
-        setOriginLoading(true);
-        const res = await dispatch(
-          getAnyFacility(filter.origin_facility, "origin_facility")
-        );
-        if (res && res.data) {
-          setFilterState({ origin_facility_ref: res.data });
-        }
-        setOriginLoading(false);
+  const { loading: orginFacilityLoading } = useQuery(routes.getAnyFacility, {
+    prefetch: filter.origin_facility !== undefined,
+    pathParams: { id: filter.origin_facility },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        setFilterState({
+          origin_facility_ref: filter.origin_facility === "" ? "" : data,
+        });
       }
-    }
-    fetchData();
-  }, [dispatch]);
+    },
+  });
 
-  useEffect(() => {
-    async function fetchData() {
-      if (filter.approving_facility) {
-        setResourceLoading(true);
-        const res = await dispatch(
-          getAnyFacility(filter.approving_facility, "approving_facility")
-        );
-        if (res && res.data) {
-          setFilterState({ approving_facility_ref: res.data });
-        }
-        setResourceLoading(false);
+  const { loading: resourceFacilityLoading } = useQuery(routes.getAnyFacility, {
+    prefetch: filter.approving_facility !== undefined,
+    pathParams: { id: filter.approving_facility },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        setFilterState({
+          approving_facility_ref: filter.approving_facility === "" ? "" : data,
+        });
       }
-    }
-    fetchData();
-  }, [dispatch]);
+    },
+  });
 
-  useEffect(() => {
-    async function fetchData() {
-      if (filter.assigned_facility) {
-        setAssignedLoading(true);
-        const res = await dispatch(
-          getAnyFacility(filter.assigned_facility, "assigned_facility")
-        );
-        if (res && res.data) {
-          setFilterState({ assigned_facility_ref: res.data });
-        }
-        setAssignedLoading(false);
+  const { loading: assignedFacilityLoading } = useQuery(routes.getAnyFacility, {
+    pathParams: { id: filter.assigned_facility },
+    prefetch: filter.assigned_facility !== undefined,
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        setFilterState({
+          assigned_facility_ref: filter.assigned_facility === "" ? "" : data,
+        });
       }
-    }
-    fetchData();
-  }, [dispatch]);
+    },
+  });
 
   const setFacility = (selected: any, name: string) => {
     setFilterState({
@@ -178,7 +161,7 @@ export default function ListFilter(props: any) {
 
       <div>
         <FieldLabel>Origin facility</FieldLabel>
-        {isOriginLoading ? (
+        {orginFacilityLoading && filter.origin_facility ? (
           <CircularProgress />
         ) : (
           <FacilitySelect
@@ -194,7 +177,7 @@ export default function ListFilter(props: any) {
 
       <div>
         <FieldLabel>Resource approving facility</FieldLabel>
-        {isResourceLoading ? (
+        {filter.approving_facility && resourceFacilityLoading ? (
           <CircularProgress />
         ) : (
           <FacilitySelect
@@ -210,7 +193,7 @@ export default function ListFilter(props: any) {
 
       <div>
         <FieldLabel>Assigned facility</FieldLabel>
-        {isAssignedLoading ? (
+        {filter.approving_facility && assignedFacilityLoading ? (
           <CircularProgress />
         ) : (
           <FacilitySelect
diff --git a/src/Components/Resource/ListView.tsx b/src/Components/Resource/ListView.tsx
index 24b4e263039..5eb5a93fb8f 100644
--- a/src/Components/Resource/ListView.tsx
+++ b/src/Components/Resource/ListView.tsx
@@ -1,11 +1,6 @@
-import { useState, useEffect, lazy } from "react";
-
+import { lazy } from "react";
 import { navigate } from "raviger";
-import { useDispatch } from "react-redux";
-import {
-  listResourceRequests,
-  downloadResourceRequests,
-} from "../../Redux/actions";
+import { downloadResourceRequests } from "../../Redux/actions";
 import ListFilter from "./ListFilter";
 import { formatFilter } from "./Commons";
 import BadgesList from "./BadgesList";
@@ -17,62 +12,27 @@ import { useTranslation } from "react-i18next";
 import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import dayjs from "../../Utils/dayjs";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 const Loading = lazy(() => import("../Common/Loading"));
 const PageTitle = lazy(() => import("../Common/PageTitle"));
 
 export default function ListView() {
-  const dispatch: any = useDispatch();
   const { qParams, Pagination, FilterBadges, advancedFilter, resultsPerPage } =
     useFilters({});
-  const [data, setData] = useState<any[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslation();
 
   const onBoardViewBtnClick = () =>
     navigate("/resource/board", { query: qParams });
   const appliedFilters = formatFilter(qParams);
 
-  const refreshList = () => {
-    fetchData();
-  };
-
-  const fetchData = () => {
-    setIsLoading(true);
-    dispatch(
-      listResourceRequests(
-        formatFilter({
-          ...qParams,
-          offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
-        }),
-        "resource-list-call"
-      )
-    ).then((res: any) => {
-      if (res && res.data) {
-        setData(res.data.results);
-        setTotalCount(res.data.count);
-      }
-      setIsLoading(false);
-    });
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, [
-    qParams.status,
-    qParams.facility,
-    qParams.origin_facility,
-    qParams.approving_facility,
-    qParams.assigned_facility,
-    qParams.emergency,
-    qParams.created_date_before,
-    qParams.created_date_after,
-    qParams.modified_date_before,
-    qParams.modified_date_after,
-    qParams.ordering,
-    qParams.page,
-  ]);
+  const { loading, data, refetch } = useQuery(routes.listResourceRequests, {
+    query: formatFilter({
+      ...qParams,
+      offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
+    }),
+  });
 
   const showResourceCardList = (data: any) => {
     if (data && !data.length) {
@@ -175,7 +135,7 @@ export default function ListView() {
             <div className="mt-2 flex">
               <button
                 data-testid="resource-details"
-                onClick={(_) => navigate(`/resource/${resource.external_id}`)}
+                onClick={(_) => navigate(`/resource/${resource.id}`)}
                 className="btn btn-default mr-2 w-full bg-white"
               >
                 <i className="fas fa-eye mr-2" /> All Details
@@ -218,14 +178,14 @@ export default function ListView() {
       <BadgesList {...{ appliedFilters, FilterBadges }} />
 
       <div className="px-1">
-        {isLoading ? (
+        {loading ? (
           <Loading />
         ) : (
           <div>
             <div className="-mb-4 mr-2 mt-4 flex justify-end">
               <button
                 className="text-xs hover:text-blue-800"
-                onClick={refreshList}
+                onClick={() => refetch()}
               >
                 <i className="fa fa-refresh mr-1" aria-hidden="true"></i>
                 Refresh List
@@ -233,9 +193,9 @@ export default function ListView() {
             </div>
 
             <div className="mb-5 flex flex-wrap md:-mx-4">
-              {showResourceCardList(data)}
+              {data?.results && showResourceCardList(data?.results)}
             </div>
-            <Pagination totalCount={totalCount} />
+            <Pagination totalCount={data?.count || 0} />
           </div>
         )}
       </div>
diff --git a/src/Components/Resource/ResourceBoard.tsx b/src/Components/Resource/ResourceBoard.tsx
index 66bf559be0d..d57c7a0d36f 100644
--- a/src/Components/Resource/ResourceBoard.tsx
+++ b/src/Components/Resource/ResourceBoard.tsx
@@ -1,17 +1,16 @@
 import { useState, useEffect } from "react";
-import { useDispatch } from "react-redux";
-import {
-  listResourceRequests,
-  downloadResourceRequests,
-} from "../../Redux/actions";
+import { downloadResourceRequests } from "../../Redux/actions";
 import { navigate } from "raviger";
 import { classNames } from "../../Utils/utils";
 import { useDrag, useDrop } from "react-dnd";
 import { formatDateTime } from "../../Utils/utils";
 import { ExportButton } from "../Common/Export";
 import dayjs from "../../Utils/dayjs";
-
-const limit = 14;
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { PaginatedResponse } from "../../Utils/request/types";
+import { IResource } from "./models";
+import request from "../../Utils/request/request";
 
 interface boardProps {
   board: string;
@@ -118,7 +117,6 @@ const ResourceCard = ({ resource }: any) => {
                   </dd>
                 </dt>
               </div>
-
               {resource.assigned_to_object && (
                 <div className="sm:col-span-1">
                   <dt
@@ -136,11 +134,10 @@ const ResourceCard = ({ resource }: any) => {
               )}
             </dl>
           </div>
-
           <div className="mt-2 flex">
             <button
               data-testid="resource-details"
-              onClick={(_) => navigate(`/resource/${resource.external_id}`)}
+              onClick={(_) => navigate(`/resource/${resource.id}`)}
               className="btn btn-default mr-2 w-full bg-white"
             >
               <i className="fas fa-eye mr-2" /> All Details
@@ -157,11 +154,7 @@ export default function ResourceBoard({
   filterProp,
   formatFilter,
 }: boardProps) {
-  const dispatch: any = useDispatch();
-  const [data, setData] = useState<any[]>([]);
-  const [totalCount, setTotalCount] = useState();
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isLoading, setIsLoading] = useState({ board: false, more: false });
+  const [isLoading, setIsLoading] = useState({ board: "BOARD", more: false });
   const [{ isOver }, drop] = useDrop(() => ({
     accept: "resource-card",
     drop: (item: any) => {
@@ -171,29 +164,13 @@ export default function ResourceBoard({
     },
     collect: (monitor) => ({ isOver: !!monitor.isOver() }),
   }));
-
-  const fetchData = () => {
-    setIsLoading((loading) => reduceLoading("BOARD", loading));
-    dispatch(
-      listResourceRequests(
-        formatFilter({ ...filterProp, status: board }),
-        board
-      )
-    ).then((res: any) => {
-      if (res && res.data) {
-        setData(res.data.results);
-        setTotalCount(res.data.count);
-        setCurrentPage(1);
-      }
-      setIsLoading((loading) => reduceLoading("COMPLETE", loading));
-    });
-  };
+  const [offset, setOffSet] = useState(0);
+  const [data, setData] = useState<PaginatedResponse<IResource>>();
 
   useEffect(() => {
-    fetchData();
+    setIsLoading((loading) => reduceLoading("BOARD", loading));
   }, [
     board,
-    dispatch,
     filterProp.facility,
     filterProp.origin_facility,
     filterProp.approving_facility,
@@ -206,31 +183,50 @@ export default function ResourceBoard({
     filterProp.ordering,
   ]);
 
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setCurrentPage(page);
-    setIsLoading((loading) => reduceLoading("MORE", loading));
-    dispatch(
-      listResourceRequests(
-        formatFilter({ ...filterProp, status: board, offset: offset }),
-        board
-      )
-    ).then((res: any) => {
-      if (res && res.data) {
-        setData((data) => [...data, ...res.data.results]);
-        setTotalCount(res.data.count);
+  useQuery(routes.listResourceRequests, {
+    query: formatFilter({
+      ...filterProp,
+      status: board,
+    }),
+    onResponse: ({ res, data: listResourceData }) => {
+      if (res?.ok && listResourceData) {
+        setData(listResourceData);
       }
       setIsLoading((loading) => reduceLoading("COMPLETE", loading));
-    });
+    },
+  });
+
+  const handlePagination = async () => {
+    setIsLoading((loading) => reduceLoading("MORE", loading));
+    setOffSet(offset + 14);
+    const { res, data: newPageData } = await request(
+      routes.listResourceRequests,
+      {
+        query: formatFilter({
+          ...filterProp,
+          status: board,
+          offset: offset,
+        }),
+      }
+    );
+    if (res?.ok && newPageData) {
+      setData((prev) =>
+        prev
+          ? { ...prev, results: [...prev.results, ...newPageData.results] }
+          : newPageData
+      );
+    }
+    setIsLoading((loading) => reduceLoading("COMPLETE", loading));
   };
 
   const boardFilter = (filter: string) => {
-    return data
+    return data?.results
       .filter(({ status }) => status === filter)
       .map((resource: any) => (
         <ResourceCard key={`resource_${resource.id}`} resource={resource} />
       ));
   };
+
   return (
     <div
       ref={drop}
@@ -254,7 +250,7 @@ export default function ResourceBoard({
             />
           </h3>
           <span className="ml-2 rounded-lg bg-primary-500 px-2 text-white">
-            {totalCount || "0"}
+            {data?.count || "0"}
           </span>
         </div>
       </div>
@@ -273,20 +269,21 @@ export default function ResourceBoard({
               </div>
             </div>
           </div>
-        ) : data?.length > 0 ? (
+        ) : data && data?.results.length > 0 ? (
           boardFilter(board)
         ) : (
           <p className="mx-auto p-4">No requests to show.</p>
         )}
         {!isLoading.board &&
-          data?.length < (totalCount || 0) &&
+          data &&
+          data?.results.length < (data?.count || 0) &&
           (isLoading.more ? (
             <div className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white">
               Loading
             </div>
           ) : (
             <button
-              onClick={(_) => handlePagination(currentPage + 1, limit)}
+              onClick={(_) => handlePagination()}
               className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white"
             >
               More...
diff --git a/src/Components/Resource/ResourceCreate.tsx b/src/Components/Resource/ResourceCreate.tsx
index cf9e5f6f22a..d0a6c36272b 100644
--- a/src/Components/Resource/ResourceCreate.tsx
+++ b/src/Components/Resource/ResourceCreate.tsx
@@ -1,8 +1,7 @@
-import { useReducer, useState, useEffect, lazy } from "react";
+import { useReducer, useState, lazy } from "react";
 
 import { FacilitySelect } from "../Common/FacilitySelect";
 import * as Notification from "../../Utils/Notifications.js";
-import { useDispatch } from "react-redux";
 import { navigate } from "raviger";
 import {
   OptionsType,
@@ -11,8 +10,6 @@ import {
 } from "../../Common/constants";
 import { parsePhoneNumber } from "../../Utils/utils";
 import { phonePreg } from "../../Common/validation";
-
-import { createResource, getAnyFacility } from "../../Redux/actions";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
@@ -26,6 +23,9 @@ import { FieldLabel } from "../Form/FormFields/FormField";
 import Card from "../../CAREUI/display/Card";
 import Page from "../Common/components/Page";
 import { PhoneNumberValidator } from "../Form/FieldValidators";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -87,10 +87,7 @@ export default function ResourceCreate(props: resourceProps) {
   const { goBack } = useAppHistory();
   const { facilityId } = props;
   const { t } = useTranslation();
-
-  const dispatchAction: any = useDispatch();
   const [isLoading, setIsLoading] = useState(false);
-  const [facilityName, setFacilityName] = useState("");
 
   const resourceFormReducer = (state = initialState, action: any) => {
     switch (action.type) {
@@ -113,18 +110,10 @@ export default function ResourceCreate(props: resourceProps) {
 
   const [state, dispatch] = useReducer(resourceFormReducer, initialState);
 
-  useEffect(() => {
-    async function fetchFacilityName() {
-      if (facilityId) {
-        const res = await dispatchAction(getAnyFacility(facilityId));
-
-        setFacilityName(res?.data?.name || "");
-      } else {
-        setFacilityName("");
-      }
-    }
-    fetchFacilityName();
-  }, [dispatchAction, facilityId]);
+  const { data: facilityData } = useQuery(routes.getAnyFacility, {
+    prefetch: facilityId !== undefined,
+    pathParams: { id: String(facilityId) },
+  });
 
   const validateForm = () => {
     const errors = { ...initError };
@@ -184,11 +173,11 @@ export default function ResourceCreate(props: resourceProps) {
     if (validForm) {
       setIsLoading(true);
 
-      const data = {
+      const resourceData = {
         status: "PENDING",
         category: state.form.category,
         sub_category: state.form.sub_category,
-        origin_facility: props.facilityId,
+        origin_facility: String(props.facilityId),
         approving_facility: (state.form.approving_facility || {}).id,
         assigned_facility: (state.form.assigned_facility || {}).id,
         emergency: state.form.emergency === "true",
@@ -202,16 +191,18 @@ export default function ResourceCreate(props: resourceProps) {
         requested_quantity: state.form.requested_quantity || 0,
       };
 
-      const res = await dispatchAction(createResource(data));
+      const { res, data } = await request(routes.createResource, {
+        body: resourceData,
+      });
       setIsLoading(false);
 
-      if (res && res.data && (res.status == 201 || res.status == 200)) {
+      if (res?.ok && data) {
         await dispatch({ type: "set_form", form: initForm });
         Notification.Success({
           msg: "Resource request created successfully",
         });
 
-        navigate(`/resource/${res.data.id}`);
+        navigate(`/resource/${data.id}`);
       }
     }
   };
@@ -224,7 +215,7 @@ export default function ResourceCreate(props: resourceProps) {
     <Page
       title={t("create_resource_request")}
       crumbsReplacements={{
-        [facilityId]: { name: facilityName },
+        [facilityId]: { name: facilityData?.name || "" },
         resource: { style: "pointer-events-none" },
       }}
       backUrl={`/facility/${facilityId}`}
diff --git a/src/Components/Resource/ResourceDetails.tsx b/src/Components/Resource/ResourceDetails.tsx
index 67adc7edd82..c42cd79b8e5 100644
--- a/src/Components/Resource/ResourceDetails.tsx
+++ b/src/Components/Resource/ResourceDetails.tsx
@@ -1,61 +1,41 @@
-import { useState, useCallback, lazy } from "react";
-
-import { useDispatch } from "react-redux";
+import { useState, lazy } from "react";
 import { classNames, formatDateTime } from "../../Utils/utils";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getResourceDetails, deleteResourceRecord } from "../../Redux/actions";
 import { navigate } from "raviger";
 import * as Notification from "../../Utils/Notifications.js";
 import CommentSection from "./CommentSection";
 import ButtonV2 from "../Common/components/ButtonV2";
 import Page from "../Common/components/Page";
 import ConfirmDialog from "../Common/ConfirmDialog";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
 const Loading = lazy(() => import("../Common/Loading"));
 
 export default function ResourceDetails(props: { id: string }) {
-  const dispatch: any = useDispatch();
-  const initialData: any = {};
-  const [data, setData] = useState(initialData);
-  const [isLoading, setIsLoading] = useState(true);
   const [isPrintMode, setIsPrintMode] = useState(false);
-
   const [openDeleteResourceDialog, setOpenDeleteResourceDialog] =
     useState(false);
-
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const res = await dispatch(getResourceDetails({ id: props.id }));
-      if (!status.aborted) {
-        if (res && res.data) {
-          setData(res.data);
-        } else {
-          navigate("/not-found");
-        }
-        setIsLoading(false);
+  const { data, loading } = useQuery(routes.getResourceDetails, {
+    pathParams: { id: props.id },
+    onResponse: ({ res, data }) => {
+      if (!res && !data) {
+        navigate("/not-found");
       }
     },
-    [props.id, dispatch]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
+  });
 
   const handleResourceDelete = async () => {
     setOpenDeleteResourceDialog(true);
-
-    const res = await dispatch(deleteResourceRecord(props.id));
+    const { res, data } = await request(routes.deleteResourceRecord, {
+      pathParams: { id: props.id },
+    });
     if (res?.status === 204) {
       Notification.Success({
         msg: "Resource record has been deleted successfully.",
       });
     } else {
       Notification.Error({
-        msg: "Error while deleting Resource: " + (res?.data?.detail || ""),
+        msg: "Error while deleting Resource: " + (data?.detail || ""),
       });
     }
 
@@ -223,7 +203,7 @@ export default function ResourceDetails(props: { id: string }) {
     );
   };
 
-  if (isLoading) {
+  if (loading || !data) {
     return <Loading />;
   }
 
@@ -273,7 +253,7 @@ export default function ResourceDetails(props: { id: string }) {
               <ButtonV2
                 data-testid="update-status"
                 className="mt-4 w-full sm:mt-2"
-                href={`/resource/${data.external_id}/update`}
+                href={`/resource/${data.id}/update`}
               >
                 Update Status/Details
               </ButtonV2>
diff --git a/src/Components/Resource/ResourceDetailsUpdate.tsx b/src/Components/Resource/ResourceDetailsUpdate.tsx
index ce0751e7b2e..c692618a774 100644
--- a/src/Components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/Components/Resource/ResourceDetailsUpdate.tsx
@@ -1,15 +1,7 @@
 import * as Notification from "../../Utils/Notifications.js";
-
 import { Cancel, Submit } from "../Common/components/ButtonV2";
-import { lazy, useCallback, useEffect, useReducer, useState } from "react";
-import {
-  getResourceDetails,
-  getUserList,
-  updateResource,
-} from "../../Redux/actions";
+import { lazy, useReducer, useState } from "react";
 import { navigate, useQueryParams } from "raviger";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-
 import Card from "../../CAREUI/display/Card";
 import CircularProgress from "../Common/components/CircularProgress";
 import { FacilitySelect } from "../Common/FacilitySelect";
@@ -22,9 +14,11 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import UserAutocompleteFormField from "../Common/UserAutocompleteFormField";
-
 import useAppHistory from "../../Common/hooks/useAppHistory";
-import { useDispatch } from "react-redux";
+import useQuery from "../../Utils/request/useQuery.js";
+import routes from "../../Redux/api.js";
+import { UserModel } from "../Users/models.js";
+import request from "../../Utils/request/request.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -67,13 +61,9 @@ const initialState = {
 
 export const ResourceDetailsUpdate = (props: resourceProps) => {
   const { goBack } = useAppHistory();
-  const dispatchAction: any = useDispatch();
   const [qParams, _] = useQueryParams();
   const [isLoading, setIsLoading] = useState(true);
-  const [assignedQuantity, setAssignedQuantity] = useState(0);
-  const [requestTitle, setRequestTitle] = useState("");
-  const [assignedUser, SetAssignedUser] = useState(null);
-  const [assignedUserLoading, setAssignedUserLoading] = useState(false);
+  const [assignedUser, SetAssignedUser] = useState<UserModel>();
   const resourceFormReducer = (state = initialState, action: any) => {
     switch (action.type) {
       case "set_form": {
@@ -95,23 +85,13 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
 
   const [state, dispatch] = useReducer(resourceFormReducer, initialState);
 
-  useEffect(() => {
-    async function fetchData() {
-      if (state.form.assigned_to) {
-        setAssignedUserLoading(true);
-
-        const res = await dispatchAction(
-          getUserList({ id: state.form.assigned_to })
-        );
-
-        if (res && res.data && res.data.count)
-          SetAssignedUser(res.data.results[0]);
-
-        setAssignedUserLoading(false);
+  const { loading: assignedUserLoading } = useQuery(routes.userList, {
+    onResponse: ({ res, data }) => {
+      if (res?.ok && data && data.count) {
+        SetAssignedUser(data.results[0]);
       }
-    }
-    fetchData();
-  }, [dispatchAction, state.form.assigned_to]);
+    },
+  });
 
   const validateForm = () => {
     const errors = { ...initError };
@@ -147,13 +127,25 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
     dispatch({ type: "set_form", form });
   };
 
+  const { data: resourceDetails } = useQuery(routes.getResourceDetails, {
+    pathParams: { id: props.id },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        const d = data;
+        d["status"] = qParams.status || data.status;
+        dispatch({ type: "set_form", form: d });
+      }
+      setIsLoading(false);
+    },
+  });
+
   const handleSubmit = async () => {
     const validForm = validateForm();
 
     if (validForm) {
       setIsLoading(true);
 
-      const data = {
+      const resourceData = {
         category: "OXYGEN",
         status: state.form.status,
         origin_facility: state.form.origin_facility_object?.id,
@@ -167,14 +159,17 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
         assigned_quantity:
           state.form.status === "PENDING"
             ? state.form.assigned_quantity
-            : assignedQuantity,
+            : resourceDetails?.assigned_quantity || 0,
       };
 
-      const res = await dispatchAction(updateResource(props.id, data));
+      const { res, data } = await request(routes.updateResource, {
+        pathParams: { id: props.id },
+        body: resourceData,
+      });
       setIsLoading(false);
 
-      if (res && res.status == 200 && res.data) {
-        dispatch({ type: "set_form", form: res.data });
+      if (res && res.status == 200 && data) {
+        dispatch({ type: "set_form", form: data });
         Notification.Success({
           msg: "Resource request updated successfully",
         });
@@ -186,31 +181,6 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
     }
   };
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const res = await dispatchAction(getResourceDetails({ id: props.id }));
-      if (!status.aborted) {
-        if (res && res.data) {
-          setRequestTitle(res.data.title);
-          setAssignedQuantity(res.data.assigned_quantity);
-          const d = res.data;
-          d["status"] = qParams.status || res.data.status;
-          dispatch({ type: "set_form", form: d });
-        }
-        setIsLoading(false);
-      }
-    },
-    [props.id, dispatchAction, qParams.status]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
-
   if (isLoading) {
     return <Loading />;
   }
@@ -219,7 +189,7 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
     <Page
       title="Update Resource Request"
       backUrl={`/resource/${props.id}`}
-      crumbsReplacements={{ [props.id]: { name: requestTitle } }}
+      crumbsReplacements={{ [props.id]: { name: resourceDetails?.title } }}
     >
       <div className="mt-4">
         <Card className="flex w-full flex-col">
diff --git a/src/Components/Resource/models.ts b/src/Components/Resource/models.ts
new file mode 100644
index 00000000000..f10ac988552
--- /dev/null
+++ b/src/Components/Resource/models.ts
@@ -0,0 +1,41 @@
+import { PerformedByModel } from "../HCX/misc";
+
+export interface IComment {
+  id: string;
+  created_by_object: PerformedByModel;
+  created_date: string;
+  modified_date: string;
+  comment: string;
+  created_by: number;
+}
+
+export interface IResource {
+  id: string;
+  title: string;
+  emergency: boolean;
+  status?: string;
+  origin_facility_object: {
+    name: string;
+  };
+  approving_facility_object: {
+    name: string;
+  };
+  assigned_facility_object: {
+    name: string;
+  };
+  assigned_quantity: number;
+  modified_date: string;
+  category: any;
+  sub_category: number;
+  origin_facility: string;
+  approving_facility: string;
+  assigned_facility: string;
+  reason: string;
+  refering_facility_contact_name: string;
+  refering_facility_contact_number: string;
+  requested_quantity: number;
+  assigned_to_object: PerformedByModel;
+  created_by_object: PerformedByModel;
+  created_date: string;
+  last_edited_by_object: PerformedByModel;
+}
diff --git a/src/Components/Shifting/BadgesList.tsx b/src/Components/Shifting/BadgesList.tsx
index ce0a0cb5753..c3e5f5b8c48 100644
--- a/src/Components/Shifting/BadgesList.tsx
+++ b/src/Components/Shifting/BadgesList.tsx
@@ -1,17 +1,17 @@
-import { getAnyFacility, getUserList } from "../../Redux/actions";
-import { useEffect, useState } from "react";
-
 import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
-import { useDispatch } from "react-redux";
+import { useFacilityQuery } from "../Resource/BadgesList";
 import { useTranslation } from "react-i18next";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { UserModel } from "../Users/models";
+
+export function formatFacilityBadgeValue(user: UserModel | undefined) {
+  return user ? `${user.first_name} ${user.last_name}` : "";
+}
 
 export default function BadgesList(props: any) {
   const { qParams, FilterBadges } = props;
-  const [assignedUsername, setAssignedUsername] = useState("");
-  const [assignedFacilityName, setAssignedFacilityName] = useState("");
-  const [originFacilityName, setOriginFacilityName] = useState("");
-  const [approvingFacilityName, setApprovingFacilityName] = useState("");
-  const dispatch: any = useDispatch();
+
   const { t } = useTranslation();
 
   const booleanFilterOptions = {
@@ -19,62 +19,21 @@ export default function BadgesList(props: any) {
     falseValue: t("no"),
   };
 
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.assigned_to) return setAssignedUsername("");
-      const res = await dispatch(
-        getUserList({ id: qParams.assigned_to }, "assigned_user_name")
-      );
-      const { first_name, last_name } = res?.data?.results[0] || {};
-      setAssignedUsername(`${first_name} ${last_name}`);
-    }
-    fetchData();
-  }, [dispatch, qParams.assigned_to]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.origin_facility) return setOriginFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(qParams.origin_facility, "origin_facility_name")
-      );
-      setOriginFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, qParams.origin_facility]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.shifting_approving_facility)
-        return setApprovingFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(
-          qParams.shifting_approving_facility,
-          "shifting_approving_facility_name"
-        )
-      );
-      setApprovingFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, qParams.shifting_approving_facility]);
+  const { data: assignedUser } = useQuery(routes.userList, {
+    query: { id: qParams.assigned_to },
+    prefetch: !!qParams.assigned_to,
+  });
+  const originFacility = useFacilityQuery(qParams.origin_facility);
+  const approvingFacility = useFacilityQuery(
+    qParams.shifting_approving_facility
+  );
+  const assignedFacility = useFacilityQuery(qParams.assigned_facility);
 
-  useEffect(() => {
-    async function fetchData() {
-      if (!qParams.assigned_facility) return setAssignedFacilityName("");
-      const res = await dispatch(
-        getAnyFacility(qParams.assigned_facility, "assigned_facility_name")
-      );
-      setAssignedFacilityName(res?.data?.name);
-    }
-    fetchData();
-  }, [dispatch, qParams.assigned_facility]);
   const getDescShiftingFilterOrder = (ordering: any) => {
-    let desc = "";
-    SHIFTING_FILTER_ORDER.map((item: any) => {
-      if (item.text === ordering) {
-        desc = item.desc;
-      }
-    });
-    return desc;
+    const foundItem = SHIFTING_FILTER_ORDER.find(
+      (item) => item.text === ordering
+    );
+    return foundItem ? foundItem.desc : "";
   };
 
   return (
@@ -91,17 +50,29 @@ export default function BadgesList(props: any) {
         ...dateRange(t("modified"), "modified_date"),
         badge(t("disease_status"), "disease_status"),
         badge(t("breathlessness_level"), "breathlessness_level"),
-        value(t("assigned_to"), "assigned_to", assignedUsername),
+        value(
+          t("assigned_to"),
+          "assigned_to",
+          qParams.assigned_to
+            ? formatFacilityBadgeValue(assignedUser?.results[0])
+            : ""
+        ),
         value(
           t("assigned_facility"),
           "assigned_facility",
-          assignedFacilityName
+          qParams.assigned_facility ? assignedFacility?.data?.name || "" : ""
+        ),
+        value(
+          t("origin_facility"),
+          "origin_facility",
+          qParams.origin_facility ? originFacility?.data?.name || "" : ""
         ),
-        value(t("origin_facility"), "origin_facility", originFacilityName),
         value(
           t("shifting_approval_facility"),
           "shifting_approving_facility",
-          approvingFacilityName
+          qParams.shifting_approving_facility
+            ? approvingFacility?.data?.name || ""
+            : ""
         ),
         value(
           t("ordering"),
diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index a1473832236..767ab402265 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -1,46 +1,22 @@
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getShiftComments, addShiftComments } from "../../Redux/actions";
+import { useState } from "react";
 import CircularProgress from "../Common/components/CircularProgress";
 import * as Notification from "../../Utils/Notifications.js";
 import { formatDateTime } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import ButtonV2 from "../Common/components/ButtonV2";
+import routes from "../../Redux/api";
+import { IComment } from "../Resource/models";
+import PaginatedList from "../../CAREUI/misc/PaginatedList";
+import request from "../../Utils/request/request";
 
 interface CommentSectionProps {
   id: string;
 }
 const CommentSection = (props: CommentSectionProps) => {
-  const dispatch: any = useDispatch();
-  const initialData: any = [];
-  const [comments, setComments] = useState(initialData);
   const [commentBox, setCommentBox] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
   const { t } = useTranslation();
 
-  const fetchData = useCallback(
-    async (status: statusType = { aborted: false }) => {
-      setIsLoading(true);
-      const res = await dispatch(getShiftComments(props.id));
-      if (!status.aborted) {
-        if (res && res.data) {
-          setComments(res.data?.results);
-        }
-        setIsLoading(false);
-      }
-    },
-    [props.id, dispatch]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
-
-  const onSubmitComment = () => {
+  const onSubmitComment = async () => {
     const payload = {
       comment: commentBox,
     };
@@ -50,63 +26,91 @@ const CommentSection = (props: CommentSectionProps) => {
       });
       return;
     }
-    dispatch(addShiftComments(props.id, payload)).then((_: any) => {
+    const { res } = await request(routes.addShiftComments, {
+      pathParams: { id: props.id },
+      body: payload,
+    });
+    if (res?.ok) {
       Notification.Success({ msg: t("comment_added_successfully") });
-      fetchData();
+
       setCommentBox("");
-    });
+    }
   };
 
   return (
-    <div className="flex w-full flex-col">
-      <textarea
-        rows={3}
-        value={commentBox}
-        minLength={3}
-        placeholder={t("type_your_comment")}
-        className="mt-4 rounded-lg border border-gray-500 p-4 focus:ring-primary-500"
-        onChange={(e) => setCommentBox(e.target.value)}
-      />
-      <div className="flex w-full justify-end">
-        <ButtonV2 onClick={onSubmitComment} className="mt-4">
-          {t("post_your_comment")}
-        </ButtonV2>
-      </div>
-      <div className=" w-full">
-        {isLoading ? (
-          <CircularProgress />
-        ) : (
-          comments.map((comment: any) => (
-            <div
-              key={comment.id}
-              className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+    <PaginatedList
+      route={routes.getShiftComments}
+      pathParams={{ id: props.id }}
+    >
+      {(_, query) => (
+        <div className="flex w-full flex-col">
+          <textarea
+            rows={3}
+            value={commentBox}
+            minLength={3}
+            placeholder={t("type_your_comment")}
+            className="mt-4 rounded-lg border border-gray-500 p-4 focus:ring-primary-500"
+            onChange={(e) => setCommentBox(e.target.value)}
+          />
+          <div className="flex w-full justify-end">
+            <ButtonV2
+              className="mt-4"
+              onClick={async () => {
+                await onSubmitComment();
+                query.refetch();
+              }}
             >
-              <div className="flex  w-full ">
-                <p className="text-justify">{comment.comment}</p>
-              </div>
-              <div className="mt-3">
-                <span className="text-xs text-gray-500">
-                  {comment.modified_date
-                    ? formatDateTime(comment.modified_date)
-                    : "-"}
-                </span>
-              </div>
-              <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
-                  {comment.created_by_object?.first_name?.charAt(0) ||
-                    t("unknown")}
-                </div>
-                <span className="pl-2 text-sm text-gray-700">
-                  {comment.created_by_object?.first_name || t("unknown")}{" "}
-                  {comment.created_by_object?.last_name}
-                </span>
-              </div>
+              {t("post_your_comment")}
+            </ButtonV2>
+          </div>
+          <div className="w-full">
+            <PaginatedList.WhenLoading>
+              <CircularProgress />
+            </PaginatedList.WhenLoading>
+            <PaginatedList.Items<IComment>>
+              {(item) => <Comment {...item} />}
+            </PaginatedList.Items>
+            <div className="flex w-full items-center justify-center">
+              <PaginatedList.Paginator hideIfSinglePage />
             </div>
-          ))
-        )}
-      </div>
-    </div>
+          </div>
+        </div>
+      )}
+    </PaginatedList>
   );
 };
 
 export default CommentSection;
+
+export const Comment = ({
+  id,
+  comment,
+  created_by_object,
+  modified_date,
+}: IComment) => {
+  const { t } = useTranslation();
+  return (
+    <div
+      key={id}
+      className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
+    >
+      <div className="flex  w-full ">
+        <p className="text-justify">{comment}</p>
+      </div>
+      <div className="mt-3">
+        <span className="text-xs text-gray-500">
+          {modified_date ? formatDateTime(modified_date) : "-"}
+        </span>
+      </div>
+      <div className=" mr-auto flex items-center rounded-md border bg-gray-100 py-1 pl-2 pr-3">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-700 p-1 uppercase text-white">
+          {created_by_object?.first_name?.charAt(0) || t("unknown")}
+        </div>
+        <span className="pl-2 text-sm text-gray-700">
+          {created_by_object?.first_name || t("unknown")}{" "}
+          {created_by_object?.last_name}
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/Components/Shifting/ListFilter.tsx b/src/Components/Shifting/ListFilter.tsx
index 5f2233c2263..c5b3555e8c4 100644
--- a/src/Components/Shifting/ListFilter.tsx
+++ b/src/Components/Shifting/ListFilter.tsx
@@ -4,12 +4,12 @@ import {
   SHIFTING_FILTER_ORDER,
 } from "../../Common/constants";
 import { DateRange } from "../Common/DateRangeInputV2";
-import { useEffect, useState } from "react";
+
 import {
   SHIFTING_CHOICES_PEACETIME,
   SHIFTING_CHOICES_WARTIME,
 } from "../../Common/constants";
-import { getAnyFacility, getUserList } from "../../Redux/actions";
+
 import CircularProgress from "../Common/components/CircularProgress";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
@@ -20,12 +20,14 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { navigate } from "raviger";
 import useConfig from "../../Common/hooks/useConfig";
-import { useDispatch } from "react-redux";
+
 import useMergeState from "../../Common/hooks/useMergeState";
 import { useTranslation } from "react-i18next";
 import UserAutocompleteFormField from "../Common/UserAutocompleteFormField";
 import { dateQueryString, parsePhoneNumber } from "../../Utils/utils";
 import dayjs from "dayjs";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 const clearFilterState = {
   origin_facility: "",
@@ -57,9 +59,7 @@ const getDate = (value: any) =>
 export default function ListFilter(props: any) {
   const { kasp_enabled, kasp_string, wartime_shifting } = useConfig();
   const { filter, onChange, closeFilter } = props;
-  const [isOriginLoading, setOriginLoading] = useState(false);
-  const [isShiftingLoading, setShiftingLoading] = useState(false);
-  const [isAssignedLoading, setAssignedLoading] = useState(false);
+
   const { t } = useTranslation();
 
   const shiftStatusOptions = (
@@ -86,76 +86,60 @@ export default function ListFilter(props: any) {
     assigned_user_ref: null,
     assigned_to: filter.assigned_to || "",
     disease_status: filter.disease_status || "",
+
     is_antenatal: filter.is_antenatal || "",
     breathlessness_level: filter.breathlessness_level || "",
   });
-  const dispatch: any = useDispatch();
-
-  useEffect(() => {
-    async function fetchData() {
-      if (filter.origin_facility) {
-        setOriginLoading(true);
-        const res = await dispatch(
-          getAnyFacility(filter.origin_facility, "origin_facility")
-        );
-        if (res && res.data) {
-          setFilterState({ origin_facility_ref: res.data });
-        }
-        setOriginLoading(false);
+
+  const { loading: isOriginLoading } = useQuery(routes.getAnyFacility, {
+    prefetch: filter.origin_facility ? true : false,
+    pathParams: { id: filter.origin_facility },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        setFilterState({
+          origin_facility_ref: filter.origin_facility ? "" : data,
+        });
       }
-    }
-    fetchData();
-  }, [dispatch]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (filter.shifting_approving_facility) {
-        setShiftingLoading(true);
-        const res = await dispatch(
-          getAnyFacility(
-            filter.shifting_approving_facility,
-            "shifting_approving_facility"
-          )
-        );
-        if (res && res.data) {
-          setFilterState({ shifting_approving_facility_ref: res.data });
-        }
-        setShiftingLoading(false);
+    },
+  });
+
+  const { loading: isShiftingLoading } = useQuery(routes.getAnyFacility, {
+    prefetch: filter.shifting_approving_facility ? true : false,
+    pathParams: { id: filter.shifting_approving_facility },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        setFilterState({
+          shifting_approving_facility_ref: filter.shifting_approving_facility
+            ? ""
+            : data,
+        });
       }
-    }
-    fetchData();
-  }, [dispatch]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (filter.assigned_facility) {
-        setAssignedLoading(true);
-        const res = await dispatch(
-          getAnyFacility(filter.assigned_facility, "assigned_facility")
-        );
-        if (res && res.data) {
-          setFilterState({ assigned_facility_ref: res.data });
-        }
-        setAssignedLoading(false);
+    },
+  });
+
+  const { loading: isAssignedLoading } = useQuery(routes.getAnyFacility, {
+    prefetch: filter.assigned_facility ? true : false,
+    pathParams: { id: filter.assigned_facility },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        setFilterState({
+          assigned_facility_ref: filter.assigned_facility ? "" : data,
+        });
       }
-    }
-    fetchData();
-  }, [dispatch]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (filter.assigned_to) {
-        const res = await dispatch(getUserList({ id: filter.assigned_to }));
-        if (res && res.data && res.data.count) {
-          setFilterState({
-            ...filterState,
-            assigned_user_ref: res.data.results[0],
-          });
-        }
+    },
+  });
+
+  useQuery(routes.userList, {
+    query: { id: filter.assigned_to },
+    prefetch: filter.assigned_to ? true : false,
+    onResponse: ({ res, data }) => {
+      if (res?.ok && data?.count) {
+        setFilterState({
+          assigned_user_ref: filter.assigned_to ? "" : data.results[0],
+        });
       }
-    }
-    fetchData();
-  }, [dispatch]);
+    },
+  });
 
   const setFacility = (selected: any, name: string) => {
     const filterData: any = { ...filterState };
diff --git a/src/Components/Shifting/ListView.tsx b/src/Components/Shifting/ListView.tsx
index f3fb14a4c0a..ec11f4cf91f 100644
--- a/src/Components/Shifting/ListView.tsx
+++ b/src/Components/Shifting/ListView.tsx
@@ -1,9 +1,5 @@
-import {
-  completeTransfer,
-  downloadShiftRequests,
-  listShiftRequests,
-} from "../../Redux/actions";
-import { lazy, useEffect, useState } from "react";
+import { downloadShiftRequests } from "../../Redux/actions";
+import { lazy, useState } from "react";
 
 import BadgesList from "./BadgesList";
 import ButtonV2 from "../Common/components/ButtonV2";
@@ -15,19 +11,23 @@ import SearchInput from "../Form/SearchInput";
 import { formatAge, formatDateTime } from "../../Utils/utils";
 import { formatFilter } from "./Commons";
 import { navigate } from "raviger";
+
 import useConfig from "../../Common/hooks/useConfig";
-import { useDispatch } from "react-redux";
+
 import useFilters from "../../Common/hooks/useFilters";
+
 import { useTranslation } from "react-i18next";
 import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import dayjs from "../../Utils/dayjs";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
 export default function ListView() {
-  const dispatch: any = useDispatch();
   const { wartime_shifting } = useConfig();
   const {
     qParams,
@@ -37,9 +37,7 @@ export default function ListView() {
     advancedFilter,
     resultsPerPage,
   } = useFilters({});
-  const [data, setData] = useState<any[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
+
   const [modalFor, setModalFor] = useState({
     externalId: undefined,
     loading: false,
@@ -47,62 +45,26 @@ export default function ListView() {
   const authUser = useAuthUser();
   const { t } = useTranslation();
 
-  const handleTransferComplete = (shift: any) => {
+  const handleTransferComplete = async (shift: any) => {
     setModalFor({ ...modalFor, loading: true });
-    dispatch(completeTransfer({ externalId: modalFor })).then(() => {
-      navigate(
-        `/facility/${shift.assigned_facility}/patient/${shift.patient}/consultation`
-      );
+    await request(routes.completeTransfer, {
+      pathParams: { externalId: shift.external_id },
     });
+    navigate(
+      `/facility/${shift.assigned_facility}/patient/${shift.patient}/consultation`
+    );
   };
 
-  const refreshList = () => {
-    fetchData();
-  };
-
-  const fetchData = () => {
-    setIsLoading(true);
-    dispatch(
-      listShiftRequests(
-        formatFilter({
-          ...qParams,
-          offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
-        }),
-        "shift-list-call"
-      )
-    ).then((res: any) => {
-      if (res && res.data) {
-        setData(res.data.results);
-        setTotalCount(res.data.count);
-      }
-      setIsLoading(false);
-    });
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, [
-    qParams.status,
-    qParams.facility,
-    qParams.origin_facility,
-    qParams.shifting_approving_facility,
-    qParams.assigned_facility,
-    qParams.emergency,
-    qParams.is_up_shift,
-    qParams.patient_name,
-    qParams.created_date_before,
-    qParams.created_date_after,
-    qParams.modified_date_before,
-    qParams.modified_date_after,
-    qParams.patient_phone_number,
-    qParams.ordering,
-    qParams.is_kasp,
-    qParams.assigned_to,
-    qParams.disease_status,
-    qParams.is_antenatal,
-    qParams.breathlessness_level,
-    qParams.page,
-  ]);
+  const {
+    data: shiftData,
+    loading,
+    refetch: fetchData,
+  } = useQuery(routes.listShiftRequests, {
+    query: formatFilter({
+      ...qParams,
+      offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
+    }),
+  });
 
   const showShiftingCardList = (data: any) => {
     if (data && !data.length) {
@@ -327,14 +289,14 @@ export default function ListView() {
     >
       <BadgesList {...{ qParams, FilterBadges }} />
       <div>
-        {isLoading ? (
+        {loading ? (
           <Loading />
         ) : (
           <div>
             <div className="-mb-4 mr-2 mt-4 flex justify-end">
               <button
                 className="text-xs hover:text-blue-800"
-                onClick={refreshList}
+                onClick={() => fetchData()}
               >
                 <i className="fa fa-refresh mr-1" aria-hidden="true"></i>
                 {t("refresh_list")}
@@ -342,10 +304,10 @@ export default function ListView() {
             </div>
 
             <div className="mb-5 grid gap-x-6 md:grid-cols-2">
-              {showShiftingCardList(data)}
+              {showShiftingCardList(shiftData?.results || [])}
             </div>
             <div>
-              <Pagination totalCount={totalCount} />
+              <Pagination totalCount={shiftData?.count || 0} />
             </div>
           </div>
         )}
diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
index 7bffe429960..3d2a1f60b8b 100644
--- a/src/Components/Shifting/ShiftDetails.tsx
+++ b/src/Components/Shifting/ShiftDetails.tsx
@@ -7,10 +7,7 @@ import {
   TEST_TYPE_CHOICES,
 } from "../../Common/constants";
 import { Link, navigate } from "raviger";
-import { lazy, useCallback, useState } from "react";
-import { deleteShiftRecord, getShiftDetails } from "../../Redux/actions";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-
+import { lazy, useState } from "react";
 import ButtonV2 from "../Common/components/ButtonV2";
 import CommentSection from "./CommentsSection";
 import ConfirmDialog from "../Common/ConfirmDialog.js";
@@ -20,18 +17,18 @@ import QRCode from "qrcode.react";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
 import { formatAge, formatDateTime } from "../../Utils/utils";
 import useConfig from "../../Common/hooks/useConfig";
-import { useDispatch } from "react-redux";
+
 import { useTranslation } from "react-i18next";
+import useQuery from "../../Utils/request/useQuery.js";
+import routes from "../../Redux/api.js";
+import request from "../../Utils/request/request.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
 export default function ShiftDetails(props: { id: string }) {
   const { header_logo, kasp_full_string, wartime_shifting, kasp_enabled } =
     useConfig();
-  const dispatch: any = useDispatch();
-  const initialData: any = {};
-  const [data, setData] = useState(initialData);
-  const [isLoading, setIsLoading] = useState(true);
+
   const [isPrintMode, setIsPrintMode] = useState(false);
   const [isCopied, setIsCopied] = useState(false);
   const [openDeleteShiftDialog, setOpenDeleteShiftDialog] = useState(false);
@@ -41,38 +38,23 @@ export default function ShiftDetails(props: { id: string }) {
     ? SHIFTING_CHOICES_WARTIME
     : SHIFTING_CHOICES_PEACETIME;
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const res = await dispatch(getShiftDetails({ id: props.id }));
-      if (!status.aborted) {
-        if (res && res.data) {
-          setData(res.data);
-        }
-        setIsLoading(false);
-      }
-    },
-    [props.id, dispatch]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
+  const { data, loading } = useQuery(routes.getShiftDetails, {
+    pathParams: { id: props.id },
+  });
 
   const handleShiftDelete = async () => {
     setOpenDeleteShiftDialog(true);
 
-    const res = await dispatch(deleteShiftRecord(props.id));
+    const { res, data } = await request(routes.deleteShiftRecord, {
+      pathParams: { id: props.id },
+    });
     if (res?.status == 204) {
       Notification.Success({
         msg: t("shifting_deleted"),
       });
     } else {
       Notification.Error({
-        msg: t("error_deleting_shifting") + (res?.data?.detail || ""),
+        msg: t("error_deleting_shifting") + (data?.detail || ""),
       });
     }
 
@@ -454,20 +436,13 @@ export default function ShiftDetails(props: { id: string }) {
             </div>
           </div>
 
-          <div className="mt-2 flex justify-between">
+          {/* <div className="mt-2 flex justify-between">
             <div>
               <span className="font-semibold leading-relaxed">
                 {t("diagnosis")}:{" "}
               </span>
               {consultation.diagnosis || "-"}
             </div>
-          </div>
-
-          {/* <div className="mt-2 flex justify-between">
-            <div>
-              <span className="font-semibold leading-relaxed">Comorbidities (if any): </span>
-              {consultation.diagnosis || '-'}
-            </div>
           </div> */}
 
           <div className="mt-6 flex justify-between">
@@ -533,7 +508,7 @@ export default function ShiftDetails(props: { id: string }) {
     );
   };
 
-  if (isLoading) {
+  if (loading) {
     return <Loading />;
   }
 
@@ -562,15 +537,17 @@ export default function ShiftDetails(props: { id: string }) {
             <div className="flex gap-2">
               <ButtonV2
                 tooltip={
-                  ["COMPLETED", "CANCELLED"].includes(data.status)
-                    ? `A shifting request, once ${data.status.toLowerCase()} cannot be updated`
+                  ["COMPLETED", "CANCELLED"].includes(data?.status || "")
+                    ? `A shifting request, once ${data?.status.toLowerCase()} cannot be updated`
                     : ""
                 }
                 tooltipClassName="tooltip-top -translate-x-28 -translate-y-1 text-xs"
                 disabled={
-                  data.status === "COMPLETED" || data.status === "CANCELLED"
+                  data?.status === "COMPLETED" || data?.status === "CANCELLED"
+                }
+                onClick={() =>
+                  navigate(`/shifting/${data?.external_id}/update`)
                 }
-                onClick={() => navigate(`/shifting/${data.external_id}/update`)}
               >
                 {t("update_status_details")}
               </ButtonV2>
@@ -581,13 +558,13 @@ export default function ShiftDetails(props: { id: string }) {
             </div>
           }
         >
-          {data.assigned_to_object && (
+          {data?.assigned_to_object && (
             <div className="relative rounded-lg bg-primary-200 shadow">
               <div className="mx-auto max-w-screen-xl p-3 sm:px-6 lg:px-8">
                 <div className="pr-16 sm:px-16 sm:text-center">
                   <p className="font-bold text-primary-800">
                     <span className="inline">
-                      {t("assigned_to")}: {data.assigned_to_object.first_name}{" "}
+                      {t("assigned_to")}: {data?.assigned_to_object.first_name}{" "}
                       {data.assigned_to_object.last_name} -{" "}
                       {data.assigned_to_object.user_type}
                     </span>
@@ -602,51 +579,51 @@ export default function ShiftDetails(props: { id: string }) {
                 <span className="font-semibold leading-relaxed">
                   {t("patient_name")}:{" "}
                 </span>
-                <Link href={`/patient/${data.patient_object?.id}`}>
-                  {data.patient_object?.name}
+                <Link href={`/patient/${data?.patient_object?.id}`}>
+                  {data?.patient_object?.name}
                 </Link>
               </div>
               <div>
                 <span className="font-semibold leading-relaxed">Status: </span>
                 <span className="badge badge-pill badge-primary px-2 py-1">
                   {shiftStatusOptions.find(
-                    (option) => data.status === option.text
-                  )?.label || data.status}
+                    (option) => data?.status === option.text
+                  )?.label || data?.status}
                 </span>
               </div>
               <div>
                 <span className="font-semibold leading-relaxed">
                   {t("origin_facility")}:{" "}
                 </span>
-                {data.origin_facility_object?.name || "--"}
+                {data?.origin_facility_object?.name || "--"}
               </div>
               {wartime_shifting && (
                 <div>
                   <span className="font-semibold leading-relaxed">
                     {t("shifting_approving_facility")}:{" "}
                   </span>
-                  {data.shifting_approving_facility_object?.name || "--"}
+                  {data?.shifting_approving_facility_object?.name || "--"}
                 </div>
               )}
               <div>
                 <span className="font-semibold leading-relaxed">
                   {t("assigned_facility")}:{" "}
                 </span>
-                {data.assigned_facility_external ||
-                  data.assigned_facility_object?.name ||
+                {data?.assigned_facility_external ||
+                  data?.assigned_facility_object?.name ||
                   "--"}
               </div>
               <div>
                 <span className="font-semibold leading-relaxed">
                   {t("contact_person_at_the_facility")}:{" "}
                 </span>
-                {data.refering_facility_contact_name || "--"}
+                {data?.refering_facility_contact_name || "--"}
               </div>
               <div>
                 <span className="font-semibold leading-relaxed">
                   {t("phone_number_at_current_facility")}:{" "}
                 </span>
-                {data.refering_facility_contact_number ? (
+                {data?.refering_facility_contact_number ? (
                   <a href={`tel:${data.refering_facility_contact_number}`}>
                     {data.refering_facility_contact_number}
                   </a>
@@ -661,7 +638,7 @@ export default function ShiftDetails(props: { id: string }) {
                 </span>
                 <span className="badge badge-pill badge-danger px-2 py-1">
                   {" "}
-                  {data.emergency ? t("yes") : t("no")}
+                  {data?.emergency ? t("yes") : t("no")}
                 </span>
               </div>
               <div>
@@ -670,7 +647,7 @@ export default function ShiftDetails(props: { id: string }) {
                 </span>
                 <span className="badge badge-pill badge-warning px-2 py-1">
                   {" "}
-                  {data.is_up_shift ? t("yes") : t("no")}
+                  {data?.is_up_shift ? t("yes") : t("no")}
                 </span>
               </div>
               <div>
@@ -679,9 +656,9 @@ export default function ShiftDetails(props: { id: string }) {
                 </span>
                 <span className="badge badge-pill badge-warning px-2 py-1">
                   {" "}
-                  {data.patient_object.last_consultation?.last_daily_round
+                  {data?.patient_object.last_consultation?.last_daily_round
                     ?.patient_category ??
-                    data.patient_object.last_consultation?.category}
+                    data?.patient_object.last_consultation?.category}
                 </span>
               </div>
               {kasp_enabled && (
@@ -691,7 +668,7 @@ export default function ShiftDetails(props: { id: string }) {
                   </span>
                   <span className="badge badge-pill badge-warning px-2 py-1">
                     {" "}
-                    {data.is_kasp ? t("yes") : t("no")}
+                    {data?.is_kasp ? t("yes") : t("no")}
                   </span>
                 </div>
               )}
@@ -703,26 +680,26 @@ export default function ShiftDetails(props: { id: string }) {
                     </span>
                     <span className="badge badge-pill badge-warning px-2 py-1">
                       {" "}
-                      {data.is_kasp ? t("yes") : t("no")}
+                      {data?.is_kasp ? t("yes") : t("no")}
                     </span>
                   </div>
                   <div>
                     <span className="font-semibold leading-relaxed">
                       {t("vehicle_preference")}:{" "}
                     </span>
-                    {data.vehicle_preference || data.preferred_vehicle_choice}
+                    {data?.vehicle_preference || data?.preferred_vehicle_choice}
                   </div>
                   <div>
                     <span className="font-semibold leading-relaxed">
                       {t("facility_preference")}:{" "}
                     </span>
-                    {data.assigned_facility_type || "--"}
+                    {data?.assigned_facility_type || "--"}
                   </div>
                   <div>
                     <span className="font-semibold leading-relaxed">
                       {t("severity_of_breathlessness")}:{" "}
                     </span>
-                    {data.breathlessness_level || "--"}
+                    {data?.breathlessness_level || "--"}
                   </div>{" "}
                 </>
               )}
@@ -731,14 +708,14 @@ export default function ShiftDetails(props: { id: string }) {
                 <span className="font-semibold leading-relaxed">
                   {t("reason")}:{" "}
                 </span>
-                <span className="ml-2">{data.reason || "--"}</span>
+                <span className="ml-2">{data?.reason || "--"}</span>
               </div>
               <div className="md:col-span-2 md:row-span-2">
                 <span className="font-semibold leading-relaxed">
                   {t("ambulance_driver_name")}:{" "}
                 </span>
                 <span className="ml-2">
-                  {data.ambulance_driver_name || "--"}
+                  {data?.ambulance_driver_name || "--"}
                 </span>
               </div>
               <div className="md:col-span-2 md:row-span-2">
@@ -746,9 +723,9 @@ export default function ShiftDetails(props: { id: string }) {
                   {t("ambulance_phone_number")}:{" "}
                 </span>
                 <span className="ml-2">
-                  {data.ambulance_phone_number ? (
-                    <a href={`tel:${data.ambulance_phone_number}`}>
-                      {data.ambulance_phone_number}
+                  {data?.ambulance_phone_number ? (
+                    <a href={`tel:${data?.ambulance_phone_number}`}>
+                      {data?.ambulance_phone_number}
                     </a>
                   ) : (
                     "--"
@@ -759,13 +736,13 @@ export default function ShiftDetails(props: { id: string }) {
                 <span className="font-semibold leading-relaxed">
                   {t("ambulance_number")}:{" "}
                 </span>
-                <span className="ml-2">{data.ambulance_number || "--"}</span>
+                <span className="ml-2">{data?.ambulance_number || "--"}</span>
               </div>
               <div className="md:col-span-2 md:row-span-2">
                 <span className="font-semibold leading-relaxed">
                   {t("comments")}:{" "}
                 </span>
-                <span className="ml-2">{data.comments || "--"}</span>
+                <span className="ml-2">{data?.comments || "--"}</span>
               </div>
 
               <RecordMeta
@@ -774,7 +751,7 @@ export default function ShiftDetails(props: { id: string }) {
                     {t("created")}:
                   </span>
                 }
-                time={data.created_date}
+                time={data?.created_date}
               />
               <RecordMeta
                 prefix={
@@ -782,7 +759,7 @@ export default function ShiftDetails(props: { id: string }) {
                     {t("updated")}:
                   </span>
                 }
-                time={data.modified_date}
+                time={data?.modified_date}
               />
             </div>
 
@@ -812,7 +789,7 @@ export default function ShiftDetails(props: { id: string }) {
                 <h4 className="mt-8">
                   {t("details_of_patient")} {showCopyToclipBoard(data)}
                 </h4>
-                {showPatientCard(data.patient_object)}
+                {showPatientCard(data?.patient_object)}
               </div>
               <div className="mb-10 mr-3 md:mr-8">
                 <h4 className="mt-8">{t("comments")}</h4>
@@ -834,7 +811,7 @@ export default function ShiftDetails(props: { id: string }) {
                       {data?.created_by_object?.last_name}
                     </div>
                     <div className="text-xs">
-                      {data.created_date && formatDateTime(data.created_date)}
+                      {data?.created_date && formatDateTime(data?.created_date)}
                     </div>
                   </div>
                 </div>
@@ -848,7 +825,8 @@ export default function ShiftDetails(props: { id: string }) {
                       {data?.last_edited_by_object?.last_name}
                     </div>
                     <div className="text-xs">
-                      {data.modified_date && formatDateTime(data.modified_date)}
+                      {data?.modified_date &&
+                        formatDateTime(data?.modified_date)}
                     </div>
                   </div>
                 </div>
@@ -856,12 +834,12 @@ export default function ShiftDetails(props: { id: string }) {
               <div>
                 <h4 className="mt-8">{t("details_of_origin_facility")}</h4>
 
-                {showFacilityCard(data.origin_facility_object)}
+                {showFacilityCard(data?.origin_facility_object)}
               </div>
-              {!data.assigned_facility_external && (
+              {!data?.assigned_facility_external && (
                 <div>
                   <h4 className="mt-8">{t("details_of_assigned_facility")}</h4>
-                  {showFacilityCard(data.assigned_facility_object)}
+                  {showFacilityCard(data?.assigned_facility_object)}
                 </div>
               )}
               {wartime_shifting && (
@@ -869,7 +847,7 @@ export default function ShiftDetails(props: { id: string }) {
                   <h4 className="mt-8">
                     {t("details_of_shifting_approving_facility")}
                   </h4>
-                  {showFacilityCard(data.shifting_approving_facility_object)}
+                  {showFacilityCard(data?.shifting_approving_facility_object)}
                 </div>
               )}
             </div>
diff --git a/src/Components/Shifting/ShiftDetailsUpdate.tsx b/src/Components/Shifting/ShiftDetailsUpdate.tsx
index ec4eab661d9..36d2d120585 100644
--- a/src/Components/Shifting/ShiftDetailsUpdate.tsx
+++ b/src/Components/Shifting/ShiftDetailsUpdate.tsx
@@ -9,10 +9,9 @@ import {
   SHIFTING_VEHICLE_CHOICES,
 } from "../../Common/constants";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
-import { getShiftDetails, getUserList, updateShift } from "../../Redux/actions";
+
 import { navigate, useQueryParams } from "raviger";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { lazy, useCallback, useEffect, useReducer, useState } from "react";
+import { lazy, useReducer, useState } from "react";
 import { ConsultationModel } from "../Facility/models.js";
 import DischargeModal from "../Facility/DischargeModal.js";
 import { FacilitySelect } from "../Common/FacilitySelect";
@@ -26,7 +25,7 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import { parsePhoneNumber } from "../../Utils/utils.js";
 import useAppHistory from "../../Common/hooks/useAppHistory";
 import useConfig from "../../Common/hooks/useConfig";
-import { useDispatch } from "react-redux";
+
 import { useTranslation } from "react-i18next";
 import CircularProgress from "../Common/components/CircularProgress.js";
 import Card from "../../CAREUI/display/Card";
@@ -34,6 +33,10 @@ import RadioFormField from "../Form/FormFields/RadioFormField.js";
 import Page from "../Common/components/Page.js";
 import UserAutocompleteFormField from "../Common/UserAutocompleteFormField.js";
 import { UserModel } from "../Users/models.js";
+import useQuery from "../../Utils/request/useQuery.js";
+import routes from "../../Redux/api.js";
+import { IShift } from "./models.js";
+import request from "../../Utils/request/request.js";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -43,12 +46,14 @@ interface patientShiftProps {
 
 export const ShiftDetailsUpdate = (props: patientShiftProps) => {
   const { goBack } = useAppHistory();
+
   const { kasp_full_string, kasp_enabled, wartime_shifting } = useConfig();
-  const dispatchAction: any = useDispatch();
+
   const [qParams, _] = useQueryParams();
+
   const [isLoading, setIsLoading] = useState(true);
   const [assignedUser, SetAssignedUser] = useState<UserModel>();
-  const [assignedUserLoading, setAssignedUserLoading] = useState(false);
+
   const [consultationData, setConsultationData] = useState<ConsultationModel>(
     {} as ConsultationModel
   );
@@ -126,23 +131,13 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
 
   const [state, dispatch] = useReducer(shiftFormReducer, initialState);
 
-  useEffect(() => {
-    async function fetchData() {
-      if (state.form.assigned_to) {
-        setAssignedUserLoading(true);
-
-        const res = await dispatchAction(
-          getUserList({ id: state.form.assigned_to })
-        );
-
-        if (res && res.data && res.data.count)
-          SetAssignedUser(res.data.results[0]);
-
-        setAssignedUserLoading(false);
-      }
-    }
-    fetchData();
-  }, [dispatchAction, state.form.assigned_to]);
+  const { loading: assignedUserLoading } = useQuery(routes.userList, {
+    query: { id: state.form.assigned_to },
+    prefetch: state.form.assigned_to ? true : false,
+    onResponse: ({ res, data }) => {
+      if (res?.ok && data?.count) SetAssignedUser(data.results[0]);
+    },
+  });
 
   const validateForm = () => {
     const errors = { ...initError };
@@ -196,8 +191,7 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
       }
 
       setIsLoading(true);
-
-      const data: any = {
+      const data: Partial<IShift> = {
         origin_facility: state.form.origin_facility_object?.id,
         shifting_approving_facility:
           state.form?.shifting_approving_facility_object?.id,
@@ -233,11 +227,13 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
         data["status"] = state.form.status;
       }
 
-      const res = await dispatchAction(updateShift(props.id, data));
+      const { res, data: shiftData } = await request(routes.updateShift, {
+        pathParams: { id: props.id },
+        body: data,
+      });
       setIsLoading(false);
-
-      if (res && res.status == 200 && res.data) {
-        dispatch({ type: "set_form", form: res.data });
+      if (res?.ok && shiftData) {
+        dispatch({ type: "set_form", form: shiftData });
         Notification.Success({
           msg: t("shift_request_updated_successfully"),
         });
@@ -249,41 +245,29 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
     }
   };
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const res = await dispatchAction(getShiftDetails({ id: props.id }));
-      if (!status.aborted) {
-        if (res && res.data) {
-          const d = res.data;
-          setConsultationData(d.patient.last_consultation);
-          if (d.assigned_facility_external)
-            d["assigned_facility_object"] = {
-              id: -1,
-              name: res.data.assigned_facility_external,
-            };
-          d["initial_status"] = res.data.status;
-          d["status"] = qParams.status || res.data.status;
-          const patient_category =
-            d.patient.last_consultation?.last_daily_round?.patient_category ??
-            d.patient.last_consultation?.category;
-          d["patient_category"] = PATIENT_CATEGORIES.find(
-            (c) => c.text === patient_category
-          )?.id;
-          dispatch({ type: "set_form", form: d });
-        }
+  useQuery(routes.getShiftDetails, {
+    pathParams: { id: props.id },
+    onResponse: ({ res, data }) => {
+      if (res?.ok && data) {
+        const d = data;
+        setConsultationData(d.patient.last_consultation as ConsultationModel);
+        if (d.assigned_facility_external)
+          d["assigned_facility_object"] = {
+            id: -1,
+            name: String(data.assigned_facility_external),
+          };
+        d["initial_status"] = data.status;
+        d["status"] = qParams.status || data.status;
+        const patient_category =
+          d.patient.last_consultation?.last_daily_round?.patient_category ??
+          d.patient.last_consultation?.category;
+        d["patient_category"] =
+          PATIENT_CATEGORIES.find((c) => c.text === patient_category)?.id ?? "";
+        dispatch({ type: "set_form", form: d });
         setIsLoading(false);
       }
     },
-    [props.id, dispatchAction, qParams.status]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
+  });
 
   const vehicleOptions = SHIFTING_VEHICLE_CHOICES.map((obj) => obj.text);
   const facilityOptions = FACILITY_TYPES.map((obj) => obj.text);
diff --git a/src/Components/Shifting/ShiftingBoard.tsx b/src/Components/Shifting/ShiftingBoard.tsx
index 7c065d0c0a8..a822d878076 100644
--- a/src/Components/Shifting/ShiftingBoard.tsx
+++ b/src/Components/Shifting/ShiftingBoard.tsx
@@ -1,23 +1,22 @@
 import { useEffect, useState } from "react";
 import { classNames, formatAge, formatDateTime } from "../../Utils/utils";
-import {
-  completeTransfer,
-  downloadShiftRequests,
-  listShiftRequests,
-} from "../../Redux/actions";
+import { downloadShiftRequests } from "../../Redux/actions";
 import { useDrag, useDrop } from "react-dnd";
 
 import ButtonV2 from "../Common/components/ButtonV2";
 import ConfirmDialog from "../Common/ConfirmDialog";
 import { navigate } from "raviger";
 import useConfig from "../../Common/hooks/useConfig";
-import { useDispatch } from "react-redux";
+
 import { useTranslation } from "react-i18next";
 import { ExportButton } from "../Common/Export";
 import dayjs from "../../Utils/dayjs";
 import useAuthUser from "../../Common/hooks/useAuthUser";
-
-const limit = 14;
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
+import { PaginatedResponse } from "../../Utils/request/types";
+import { IShift } from "./models";
 
 interface boardProps {
   board: string;
@@ -38,7 +37,6 @@ const reduceLoading = (action: string, current: any) => {
 };
 
 const ShiftCard = ({ shift, filter }: any) => {
-  const dispatch: any = useDispatch();
   const { wartime_shifting } = useConfig();
   const [modalFor, setModalFor] = useState({
     externalId: undefined,
@@ -52,13 +50,14 @@ const ShiftCard = ({ shift, filter }: any) => {
   const authUser = useAuthUser();
   const { t } = useTranslation();
 
-  const handleTransferComplete = (shift: any) => {
+  const handleTransferComplete = async (shift: any) => {
     setModalFor({ ...modalFor, loading: true });
-    dispatch(completeTransfer({ externalId: modalFor })).then(() => {
-      navigate(
-        `/facility/${shift.assigned_facility}/patient/${shift.patient}/consultation`
-      );
+    await request(routes.completeTransfer, {
+      pathParams: { externalId: shift.external_id },
     });
+    navigate(
+      `/facility/${shift.assigned_facility}/patient/${shift.patient}/consultation`
+    );
   };
   return (
     <div ref={drag} className="mt-2 w-full">
@@ -259,11 +258,8 @@ export default function ShiftingBoard({
   filterProp,
   formatFilter,
 }: boardProps) {
-  const dispatch: any = useDispatch();
-  const [data, setData] = useState<any[]>([]);
-  const [totalCount, setTotalCount] = useState();
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isLoading, setIsLoading] = useState({ board: false, more: false });
+  const [offset, setOffSet] = useState(0);
+  const [isLoading, setIsLoading] = useState({ board: "BOARD", more: false });
   const [{ isOver }, drop] = useDrop(() => ({
     accept: "shift-card",
     drop: (item: any) => {
@@ -273,26 +269,24 @@ export default function ShiftingBoard({
     },
     collect: (monitor) => ({ isOver: !!monitor.isOver() }),
   }));
+  const [data, setData] = useState<PaginatedResponse<IShift>>();
 
-  const fetchData = () => {
-    setIsLoading((loading) => reduceLoading("BOARD", loading));
-    dispatch(
-      listShiftRequests(formatFilter({ ...filterProp, status: board }), board)
-    ).then((res: any) => {
-      if (res && res.data) {
-        setData(res.data.results);
-        setTotalCount(res.data.count);
-        setCurrentPage(1);
+  useQuery(routes.listShiftRequests, {
+    query: formatFilter({
+      ...filterProp,
+      status: board,
+    }),
+    onResponse: ({ res, data: listShiftData }) => {
+      if (res?.ok && listShiftData) {
+        setData(listShiftData);
       }
       setIsLoading((loading) => reduceLoading("COMPLETE", loading));
-    });
-  };
+    },
+  });
 
   useEffect(() => {
-    fetchData();
+    setIsLoading((loading) => reduceLoading("BOARD", loading));
   }, [
-    board,
-    dispatch,
     filterProp.facility,
     filterProp.origin_facility,
     filterProp.shifting_approving_facility,
@@ -313,27 +307,29 @@ export default function ShiftingBoard({
     filterProp.breathlessness_level,
   ]);
 
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setCurrentPage(page);
+  const handlePagination = async () => {
     setIsLoading((loading) => reduceLoading("MORE", loading));
-    dispatch(
-      listShiftRequests(
-        formatFilter({ ...filterProp, status: board, offset: offset }),
-        board
-      )
-    ).then((res: any) => {
-      if (res && res.data) {
-        setData((data) => [...data, ...res.data.results]);
-        setTotalCount(res.data.count);
-      }
-      setIsLoading((loading) => reduceLoading("COMPLETE", loading));
+    setOffSet(offset + 14);
+    const { res, data: newPageData } = await request(routes.listShiftRequests, {
+      query: formatFilter({
+        ...filterProp,
+        status: board,
+        offset: offset,
+      }),
     });
+    if (res?.ok && newPageData) {
+      setData((prev) =>
+        prev
+          ? { ...prev, results: [...prev.results, ...newPageData.results] }
+          : newPageData
+      );
+    }
+    setIsLoading((loading) => reduceLoading("COMPLETE", loading));
   };
   const { t } = useTranslation();
 
   const patientFilter = (filter: string) => {
-    return data
+    return data?.results
       .filter(({ status }) => status === filter)
       .map((shift: any) => (
         <ShiftCard key={`shift_${shift.id}`} shift={shift} filter={filter} />
@@ -363,7 +359,7 @@ export default function ShiftingBoard({
             />
           </h3>
           <span className="ml-2 rounded-lg bg-primary-500 px-2 text-white">
-            {totalCount || "0"}
+            {data?.count || "0"}
           </span>
         </div>
       </div>
@@ -382,20 +378,20 @@ export default function ShiftingBoard({
               </div>
             </div>
           </div>
-        ) : data?.length > 0 ? (
+        ) : data?.count ?? 0 > 0 ? (
           patientFilter(board)
         ) : (
           <p className="mx-auto p-4">{t("no_patients_to_show")}</p>
         )}
         {!isLoading.board &&
-          data?.length < (totalCount || 0) &&
+          (data?.count ?? 0) < (data?.results.length || 0) &&
           (isLoading.more ? (
             <div className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white">
               {t("loading")}
             </div>
           ) : (
             <button
-              onClick={(_) => handlePagination(currentPage + 1, limit)}
+              onClick={(_) => handlePagination()}
               className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white"
             >
               More...
diff --git a/src/Components/Shifting/models.ts b/src/Components/Shifting/models.ts
new file mode 100644
index 00000000000..010db870ab8
--- /dev/null
+++ b/src/Components/Shifting/models.ts
@@ -0,0 +1,44 @@
+import { FacilityModel } from "../Facility/models";
+import { PerformedByModel } from "../HCX/misc";
+import { AssignedToObjectModel, PatientModel } from "../Patient/models";
+
+export interface IShift {
+  id: string;
+  patient_object: PatientModel;
+  emergency: boolean;
+  status: string;
+  origin_facility_object: FacilityModel;
+  origin_facility: string;
+  shifting_approving_facility: string;
+  assigned_facility_external: string | null;
+  assigned_facility: string | null;
+  is_up_shift: boolean;
+  assigned_to: number;
+  patient_category: string;
+  shifting_approving_facility_object: FacilityModel;
+  assigned_facility_object: FacilityModel;
+  assigned_facility_external_object: FacilityModel;
+  modified_date: string;
+  external_id: string;
+  assigned_to_object?: AssignedToObjectModel;
+  refering_facility_contact_name: string;
+  refering_facility_contact_number: string;
+  is_kasp: boolean;
+  vehicle_preference: string;
+  preferred_vehicle_choice: string;
+  assigned_facility_type: string;
+  breathlessness_level: string;
+  reason: string;
+  ambulance_driver_name: string;
+  ambulance_phone_number: string | undefined;
+  ambulance_number: string;
+  comments: string;
+  created_date: string;
+  created_by_object: PerformedByModel;
+  last_edited_by_object: PerformedByModel;
+  is_assigned_to_user: boolean;
+  created_by: number;
+  last_edited_by: number;
+  patient: string | PatientModel;
+  initial_status?: string;
+}
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 150c102aff1..94791e55ae1 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -134,8 +134,12 @@ export default function ManageUsers() {
   );
 
   const addUser = (
-    <ButtonV2 className="w-full" onClick={() => navigate("/users/add")}>
-      <CareIcon className="care-l-plus w-full text-lg" />
+    <ButtonV2
+      id="addUserButton"
+      className="w-full"
+      onClick={() => navigate("/users/add")}
+    >
+      <CareIcon icon="l-plus" className="text-lg" />
       <p>Add New User</p>
     </ButtonV2>
   );
@@ -438,7 +442,7 @@ export default function ManageUsers() {
                   ) && (
                     <div className="flex-col md:flex-row">
                       <ButtonV2
-                        id="skills"
+                        id="avg-workinghour"
                         className="flex w-full items-center md:w-full"
                         onClick={() => {
                           setExpandWorkingHours(true);
@@ -702,6 +706,7 @@ function UserFacilities(props: { user: any }) {
         <FacilitySelect
           multiple={false}
           name="facility"
+          exclude_user={username}
           showAll={false} // Show only facilities that user has access to link (not all facilities)
           showNOptions={8}
           selected={facility}
@@ -726,7 +731,7 @@ function UserFacilities(props: { user: any }) {
         <div className="flex flex-col">
           {/* Home Facility section */}
           {user?.home_facility_object && (
-            <div className="mt-2">
+            <div className="mt-2" id="home-facility">
               <div className="mb-2 ml-2 text-lg font-bold">Home Facility</div>
               <div className="relative rounded p-2 transition hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg">
                 <div className="flex items-center justify-between">
@@ -757,7 +762,7 @@ function UserFacilities(props: { user: any }) {
 
           {/* Linked Facilities section */}
           {facilities.length > 0 && (
-            <div className="mt-2">
+            <div className="mt-2" id="linked-facility-list">
               <div className="mb-2 ml-2 text-lg font-bold">
                 Linked Facilities
               </div>
@@ -780,6 +785,7 @@ function UserFacilities(props: { user: any }) {
                         <div className="flex items-center gap-2">
                           <button
                             className="tooltip text-lg hover:text-primary-500"
+                            id="home-facility-icon"
                             onClick={() => {
                               if (user?.home_facility_object) {
                                 // has previous home facility
@@ -801,6 +807,7 @@ function UserFacilities(props: { user: any }) {
                             </span>
                           </button>
                           <button
+                            id="unlink-facility-button"
                             className="tooltip text-lg text-red-600"
                             onClick={() =>
                               setUnlinkFacilityData({
diff --git a/src/Components/Users/SkillsSlideOver.tsx b/src/Components/Users/SkillsSlideOver.tsx
index 343ea9062cc..833313d780a 100644
--- a/src/Components/Users/SkillsSlideOver.tsx
+++ b/src/Components/Users/SkillsSlideOver.tsx
@@ -117,6 +117,7 @@ export default ({ show, setShow, username }: IProps) => {
             {!isLoading && (
               <div className="tooltip flex items-center gap-2">
                 <SkillSelect
+                  id="select-skill"
                   multiple={false}
                   name="skill"
                   disabled={!authorizeForAddSkill}
@@ -128,6 +129,7 @@ export default ({ show, setShow, username }: IProps) => {
                   username={username}
                 />
                 <ButtonV2
+                  id="add-skill-button"
                   disabled={!authorizeForAddSkill}
                   onClick={() => addSkill(username, selectedSkill)}
                   className="w-6rem"
@@ -146,7 +148,7 @@ export default ({ show, setShow, username }: IProps) => {
                 <CircularProgress />
               </div>
             ) : (
-              <div className="mb-2 mt-4">
+              <div className="mb-2 mt-4" id="added-user-skills">
                 {hasSkills ? (
                   <SkillsArray
                     isLoading={isLoading}
diff --git a/src/Components/Users/SkillsSlideOverComponents.tsx b/src/Components/Users/SkillsSlideOverComponents.tsx
index 666f5a38e74..d03de928c74 100644
--- a/src/Components/Users/SkillsSlideOverComponents.tsx
+++ b/src/Components/Users/SkillsSlideOverComponents.tsx
@@ -45,6 +45,7 @@ export const SkillsArray = ({
             <div className="text-lg font-bold">{skill.skill_object.name}</div>
             <div>
               <ButtonV2
+                id="unlink-skill"
                 size="small"
                 variant="danger"
                 ghost={true}
diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
index 5c5ad46b9fa..441a6862634 100644
--- a/src/Components/Users/UserProfile.tsx
+++ b/src/Components/Users/UserProfile.tsx
@@ -417,7 +417,11 @@ export default function UserProfile() {
                 Local Body, District and State are Non Editable Settings.
               </p>
               <div className="flex flex-col gap-2">
-                <ButtonV2 onClick={(_) => setShowEdit(!showEdit)} type="button">
+                <ButtonV2
+                  onClick={(_) => setShowEdit(!showEdit)}
+                  type="button"
+                  id="edit-cancel-profile-button"
+                >
                   {showEdit ? "Cancel" : "Edit User Profile"}
                 </ButtonV2>
                 <ButtonV2 variant="danger" onClick={(_) => handleSignOut(true)}>
@@ -431,7 +435,10 @@ export default function UserProfile() {
             {!showEdit && (
               <div className="m-2 overflow-hidden rounded-lg bg-white px-4 py-5  shadow sm:rounded-lg sm:px-6">
                 <dl className="col-gap-4 row-gap-8 grid grid-cols-1 sm:grid-cols-2">
-                  <div className="my-2 sm:col-span-1">
+                  <div
+                    className="my-2 sm:col-span-1"
+                    id="username-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       Username
                     </dt>
@@ -439,7 +446,10 @@ export default function UserProfile() {
                       {details.username || "-"}
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="contactno-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       Contact No
                     </dt>
@@ -448,7 +458,10 @@ export default function UserProfile() {
                     </dd>
                   </div>
 
-                  <div className="my-2  sm:col-span-1">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="whatsapp-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       Whatsapp No
                     </dt>
@@ -456,7 +469,10 @@ export default function UserProfile() {
                       {details.alt_phone_number || "-"}
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="emailid-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       Email address
                     </dt>
@@ -464,7 +480,10 @@ export default function UserProfile() {
                       {details.email || "-"}
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="firstname-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       First Name
                     </dt>
@@ -472,7 +491,10 @@ export default function UserProfile() {
                       {details.first_name || "-"}
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="lastname-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       Last Name
                     </dt>
@@ -480,7 +502,7 @@ export default function UserProfile() {
                       {details.last_name || "-"}
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1">
+                  <div className="my-2  sm:col-span-1" id="age-profile-details">
                     <dt className="text-sm font-medium leading-5 text-black">
                       Age
                     </dt>
@@ -497,7 +519,10 @@ export default function UserProfile() {
                       {details.user_type || "-"}
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="gender-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       Gender
                     </dt>
@@ -534,7 +559,10 @@ export default function UserProfile() {
                       Skills
                     </dt>
                     <dd className="mt-1 text-sm leading-5 text-gray-900">
-                      <div className="flex flex-wrap gap-2">
+                      <div
+                        className="flex flex-wrap gap-2"
+                        id="already-linked-skills"
+                      >
                         {details.skills && details.skills.length
                           ? details.skills?.map((skill: SkillObjectModel) => {
                               return (
@@ -547,7 +575,10 @@ export default function UserProfile() {
                       </div>
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="averageworkinghour-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
                       Average weekly working hours
                     </dt>
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 44cadd8263c..071da764676 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -14,10 +14,6 @@ const minutesAgo = (timestamp: string) => {
   return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`;
 };
 
-const isWithinMinutes = (timestamp: string, minutes: number) => {
-  return dayjs().diff(dayjs(timestamp), "minute") < minutes;
-};
-
 export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
   const { connect, waveformCanvas, data, isOnline } = useHL7VitalsMonitor(
     props.config
@@ -39,8 +35,8 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
     connect(props.socketUrl);
   }, [props.socketUrl]);
 
-  const bpWithinMaxPersistence = !!(
-    (data.bp?.["date-time"] && isWithinMinutes(data.bp?.["date-time"], 30)) // Max blood pressure persistence is 30 minutes
+  const bpWithinMaxPersistence = dayjs(data.bp?.["date-time"]).isAfter(
+    props.patientCurrentBedAssignmentDate
   );
 
   return (
diff --git a/src/Components/VitalsMonitor/types.ts b/src/Components/VitalsMonitor/types.ts
index 60979a6f9b0..c73d7399b59 100644
--- a/src/Components/VitalsMonitor/types.ts
+++ b/src/Components/VitalsMonitor/types.ts
@@ -46,6 +46,7 @@ export interface ChannelOptions {
 }
 
 export interface IVitalsComponentProps {
+  patientCurrentBedAssignmentDate?: string;
   patientAssetBed?: PatientAssetBed;
   socketUrl: string;
   config?: ReturnType<typeof getVitalsCanvasSizeAndDuration>;
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 5f71583abd7..0fe1ba1a8bf 100644
--- a/src/Locale/en/Common.json
+++ b/src/Locale/en/Common.json
@@ -112,6 +112,7 @@
   "select": "Select",
   "lsg": "Lsg",
   "delete": "Delete",
+  "remove": "Remove",
   "max_size_for_image_uploaded_should_be": "Max size for image uploaded should be",
   "allowed_formats_are": "Allowed formats are",
   "recommended_aspect_ratio_for": "Recommended aspect ratio for",
@@ -127,10 +128,12 @@
   "submitting": "Submitting",
   "view_details": "View Details",
   "type_to_search": "Type to search",
-  "show_all": "Show All",
+  "show_all": "Show all",
+  "hide": "Hide",
   "select_skills": "Select and add some skills",
   "contact_your_admin_to_add_skills": "Contact your admin to add skills",
   "add": "Add",
+  "add_as": "Add as",
   "sort_by": "Sort By",
   "none": "None",
   "RESPIRATORY_SUPPORT_UNKNOWN": "None",
@@ -153,5 +156,4 @@
   "no_data_found": "No data found",
   "edit": "Edit",
   "clear_selection": "Clear selection"
-}
-
+}
\ No newline at end of file
diff --git a/src/Locale/en/Diagnosis.json b/src/Locale/en/Diagnosis.json
new file mode 100644
index 00000000000..6cb301c058e
--- /dev/null
+++ b/src/Locale/en/Diagnosis.json
@@ -0,0 +1,21 @@
+{
+    "diagnosis": "Diagnosis",
+    "diagnoses": "Diagnoses",
+    "diagnosis_already_added": "This diagnosis was already added",
+    "principal": "Principal",
+    "principal_diagnosis": "Principal diagnosis",
+    "unconfirmed": "Unconfirmed",
+    "provisional": "Provisional",
+    "differential": "Differential",
+    "confirmed": "Confirmed",
+    "refuted": "Refuted",
+    "entered-in-error": "Entered in error",
+    "help_unconfirmed": "There is not sufficient diagnostic and/or clinical evidence to treat this as a confirmed condition.",
+    "help_provisional": "This is a tentative diagnosis - still a candidate that is under consideration.",
+    "help_differential": "One of a set of potential (and typically mutually exclusive) diagnoses asserted to further guide the diagnostic process and preliminary treatment.",
+    "help_confirmed": "There is sufficient diagnostic and/or clinical evidence to treat this as a confirmed condition.",
+    "help_refuted": "This condition has been ruled out by subsequent diagnostic and clinical evidence.",
+    "help_entered-in-error": "The statement was entered in error and is not valid.",
+    "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
+    "icd11_as_recommended": "As per ICD-11 recommended by WHO"
+}
\ No newline at end of file
diff --git a/src/Locale/en/index.js b/src/Locale/en/index.js
index 950b441ba84..781ce97b009 100644
--- a/src/Locale/en/index.js
+++ b/src/Locale/en/index.js
@@ -14,6 +14,7 @@ import Resource from "./Resource.json";
 import SortOptions from "./SortOptions.json";
 import Bed from "./Bed.json";
 import Medicine from "./Medicine.json";
+import Diagnosis from "./Diagnosis.json";
 
 export default {
   ...Auth,
@@ -27,6 +28,7 @@ export default {
   ...Facility,
   ...Hub,
   ...Medicine,
+  ...Diagnosis,
   ...Notifications,
   ...Resource,
   ...Shifting,
diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx
index 1d2d6f4f7b6..a120c384a3d 100644
--- a/src/Redux/actions.tsx
+++ b/src/Redux/actions.tsx
@@ -1,9 +1,5 @@
 import { HCXClaimModel, HCXPolicyModel } from "../Components/HCX/models";
-import {
-  MedibaseMedicine,
-  MedicineAdministrationRecord,
-  Prescription,
-} from "../Components/Medicine/models";
+import { MedibaseMedicine } from "../Components/Medicine/models";
 import { fireRequest, fireRequestForFiles } from "./fireRequest";
 
 export const getConfig = () => {
@@ -634,30 +630,18 @@ export const updateUserDetails = (username: string, data: object) => {
 export const createShift = (params: object) => {
   return fireRequest("createShift", [], params);
 };
-export const updateShift = (id: string, params: object) => {
-  return fireRequest("updateShift", [id], params);
-};
-export const deleteShiftRecord = (id: string) => {
-  return fireRequest("deleteShiftRecord", [id], {});
-};
+
 export const listShiftRequests = (params: object, key: string) => {
   return fireRequest("listShiftRequests", [], params, null, key);
 };
-export const getShiftDetails = (pathParam: object) => {
-  return fireRequest("getShiftDetails", [], {}, pathParam);
-};
+
 export const completeTransfer = (pathParams: object) => {
   return fireRequest("completeTransfer", [], {}, pathParams);
 };
 export const downloadShiftRequests = (params: object) => {
   return fireRequest("downloadShiftRequests", [], params);
 };
-export const getShiftComments = (id: string) => {
-  return fireRequest("getShiftComments", [], {}, { id });
-};
-export const addShiftComments = (id: string, params: object) => {
-  return fireRequest("addShiftComments", [], params, { id });
-};
+
 // External Results
 export const externalResultList = (params: object, altKey: string) => {
   return fireRequest("externalResultList", [], params, null, altKey);
@@ -791,8 +775,8 @@ export const editInvestigation = (
 };
 
 // ICD11
-export const listICD11Diagnosis = (params: object, key: string) => {
-  return fireRequest("listICD11Diagnosis", [], params, null, key);
+export const listICD11Diagnosis = (params: object) => {
+  return fireRequest("listICD11Diagnosis", [], params, null);
 };
 // Medibase
 export const listMedibaseMedicines = (
@@ -803,30 +787,9 @@ export const listMedibaseMedicines = (
 };
 
 // Resource
-export const createResource = (params: object) => {
-  return fireRequest("createResource", [], params);
-};
-export const updateResource = (id: string, params: object) => {
-  return fireRequest("updateResource", [id], params);
-};
-export const deleteResourceRecord = (id: string) => {
-  return fireRequest("deleteResourceRecord", [id], {});
-};
-export const listResourceRequests = (params: object, key: string) => {
-  return fireRequest("listResourceRequests", [], params, null, key);
-};
-export const getResourceDetails = (pathParam: object) => {
-  return fireRequest("getResourceDetails", [], {}, pathParam);
-};
 export const downloadResourceRequests = (params: object) => {
   return fireRequest("downloadResourceRequests", [], params);
 };
-export const getResourceComments = (id: string, params: object) => {
-  return fireRequest("getResourceComments", [], params, { id });
-};
-export const addResourceComments = (id: string, params: object) => {
-  return fireRequest("addResourceComments", [], params, { id });
-};
 
 export const listAssets = (params: object) =>
   fireRequest("listAssets", [], params);
@@ -879,74 +842,6 @@ export const getAssetAvailability = (id: string) =>
 export const listPMJYPackages = (query?: string) =>
   fireRequest("listPMJYPackages", [], { query });
 
-/** Prescription related actions */
-export const PrescriptionActions = (consultation_external_id: string) => {
-  const pathParams = { consultation_external_id };
-
-  return {
-    list: (query?: Record<string, any>) => {
-      let altKey;
-      if (query?.is_prn !== undefined) {
-        altKey = query?.is_prn
-          ? "listPRNPrescriptions"
-          : "listNormalPrescriptions";
-      }
-      return fireRequest("listPrescriptions", [], query, pathParams, altKey);
-    },
-
-    create: (obj: Prescription) =>
-      fireRequest("createPrescription", [], obj, pathParams),
-
-    listAdministrations: (query?: object) =>
-      fireRequest("listAdministrations", [], query, pathParams),
-
-    getAdministration: (external_id: string) =>
-      fireRequest("getAdministration", [], {}, { ...pathParams, external_id }),
-
-    /** Returns actions specific to a prescription */
-    prescription(external_id: string) {
-      const pathParams = { consultation_external_id, external_id };
-
-      return {
-        /** Read a specific prescription of a consultation */
-        get: () => fireRequest("getPrescription", [], {}, pathParams),
-
-        /** Administer a prescription */
-        administer: (obj: MedicineAdministrationRecord) =>
-          fireRequest(
-            "administerPrescription",
-            [],
-            obj,
-            pathParams,
-            `administer-medicine-${external_id}`
-          ),
-
-        listAdministrations: (query?: {
-          administered_date_after?: string;
-          administered_date_before?: string;
-        }) =>
-          fireRequest(
-            "listAdministrations",
-            [],
-            { prescription: external_id, ...query },
-            pathParams,
-            `list-administrations-${external_id}`
-          ),
-
-        /** Discontinue a prescription */
-        discontinue: (discontinued_reason: string | undefined) =>
-          fireRequest(
-            "discontinuePrescription",
-            [],
-            { discontinued_reason },
-            pathParams,
-            `discontinue-medicine-${external_id}`
-          ),
-      };
-    },
-  };
-};
-
 // HCX Actions
 export const HCXActions = {
   checkEligibility: (policy: string) => {
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index 104fa0c0c75..1ff80b55304 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -1,4 +1,5 @@
 import { IConfig } from "../Common/hooks/useConfig";
+
 import {
   IAadhaarOtp,
   IAadhaarOtpTBody,
@@ -28,6 +29,8 @@ import {
   AssetUpdate,
 } from "../Components/Assets/AssetTypes";
 import {
+  ConsultationModel,
+  CurrentBed,
   FacilityModel,
   LocationModel,
   WardModel,
@@ -40,16 +43,21 @@ import {
   ILocalBodyByDistrict,
   IPartialUpdateExternalResult,
 } from "../Components/ExternalResult/models";
-import { Prescription } from "../Components/Medicine/models";
-import { PatientModel } from "../Components/Patient/models";
 import { UserModel } from "../Components/Users/models";
 import { PaginatedResponse } from "../Utils/request/types";
+import {
+  NotificationData,
+  PNconfigData,
+} from "../Components/Notifications/models";
+import { PatientModel } from "../Components/Patient/models";
+import { IComment, IResource } from "../Components/Resource/models";
+import { IShift } from "../Components/Shifting/models";
 
 /**
  * A fake function that returns an empty object casted to type T
  * @returns Empty object as type T
  */
-function Type<T>(): T {
+export function Type<T>(): T {
   return {} as T;
 }
 
@@ -128,6 +136,8 @@ const routes = {
 
   userList: {
     path: "/api/v1/users/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<UserModel>>(),
   },
 
   userListSkill: {
@@ -199,11 +209,14 @@ const routes = {
 
   getUserPnconfig: {
     path: "/api/v1/users/{username}/pnconfig/",
+    method: "GET",
+    TRes: Type<PNconfigData>(),
   },
 
   updateUserPnconfig: {
     path: "/api/v1/users/{username}/pnconfig/",
     method: "PATCH",
+    TRes: Type<PNconfigData>(),
   },
 
   // Skill Endpoints
@@ -216,6 +229,7 @@ const routes = {
 
   getPermittedFacilities: {
     path: "/api/v1/facility/",
+    TRes: Type<PaginatedResponse<FacilityModel>>(),
   },
 
   getAllFacilities: {
@@ -351,6 +365,7 @@ const routes = {
   listConsultationBeds: {
     path: "/api/v1/consultationbed/",
     method: "GET",
+    TRes: Type<PaginatedResponse<CurrentBed>>(),
   },
   createConsultationBed: {
     path: "/api/v1/consultationbed/",
@@ -733,23 +748,31 @@ const routes = {
     method: "POST",
   },
   updateShift: {
-    path: "/api/v1/shift",
+    path: "/api/v1/shift/{id}",
     method: "PUT",
+    TBody: Type<IShift>(),
+    TRes: Type<IShift>(),
   },
   deleteShiftRecord: {
-    path: "/api/v1/shift",
+    path: "/api/v1/shift/{id}",
     method: "DELETE",
+    TRes: Type<{ detail: string }>(),
   },
   listShiftRequests: {
     path: "/api/v1/shift/",
     method: "GET",
+    TRes: Type<PaginatedResponse<IShift>>(),
   },
   getShiftDetails: {
     path: "/api/v1/shift/{id}/",
+    method: "GET",
+    TRes: Type<IShift>(),
   },
   completeTransfer: {
     path: "/api/v1/shift/{externalId}/transfer/",
     method: "POST",
+    TBody: Type<IShift>(),
+    TRes: Type<Partial<PatientModel>>(),
   },
   downloadShiftRequests: {
     path: "/api/v1/shift/",
@@ -758,24 +781,35 @@ const routes = {
   getShiftComments: {
     path: "/api/v1/shift/{id}/comment/",
     method: "GET",
+    TRes: Type<PaginatedResponse<IComment>>(),
   },
   addShiftComments: {
     path: "/api/v1/shift/{id}/comment/",
     method: "POST",
+    TBody: Type<Partial<IComment>>(),
+    TRes: Type<IComment>(),
   },
+
   // Notifications
   getNotifications: {
     path: "/api/v1/notification/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<NotificationData>>(),
   },
   getNotificationData: {
     path: "/api/v1/notification/{id}/",
+    method: "GET",
+    TRes: Type<NotificationData>(),
   },
   markNotificationAsRead: {
     path: "/api/v1/notification/{id}/",
     method: "PATCH",
+    TRes: Type<NotificationData>(),
   },
   getPublicKey: {
     path: "/api/v1/notification/public_key/",
+    method: "GET",
+    TRes: Type<NotificationData>(),
   },
   sendNotificationMessages: {
     path: "/api/v1/notification/notify/",
@@ -843,21 +877,31 @@ const routes = {
   createResource: {
     path: "/api/v1/resource/",
     method: "POST",
+    TRes: Type<IResource>(),
+    TBody: Type<Partial<IResource>>(),
   },
   updateResource: {
-    path: "/api/v1/resource",
+    path: "/api/v1/resource/{id}",
     method: "PUT",
+    TRes: Type<IResource>(),
+    TBody: Type<Partial<IResource>>(),
   },
   deleteResourceRecord: {
-    path: "/api/v1/resource",
+    path: "/api/v1/resource/{id}",
     method: "DELETE",
+    TRes: Type<{
+      detail?: string;
+    }>(),
   },
   listResourceRequests: {
     path: "/api/v1/resource/",
     method: "GET",
+    TRes: Type<PaginatedResponse<IResource>>(),
   },
   getResourceDetails: {
     path: "/api/v1/resource/{id}/",
+    method: "GET",
+    TRes: Type<IResource>(),
   },
   downloadResourceRequests: {
     path: "/api/v1/resource/",
@@ -866,10 +910,13 @@ const routes = {
   getResourceComments: {
     path: "/api/v1/resource/{id}/comment/",
     method: "GET",
+    TRes: Type<PaginatedResponse<IComment>>(),
   },
   addResourceComments: {
     path: "/api/v1/resource/{id}/comment/",
     method: "POST",
+    TRes: Type<IComment>(),
+    TBody: Type<Partial<IComment>>(),
   },
 
   // Assets endpoints
@@ -1096,47 +1143,6 @@ const routes = {
     method: "GET",
   },
 
-  // Prescription endpoints
-
-  listPrescriptions: {
-    path: "/api/v1/consultation/{consultation_external_id}/prescriptions/",
-    method: "GET",
-  },
-
-  createPrescription: {
-    path: "/api/v1/consultation/{consultation_external_id}/prescriptions/",
-    method: "POST",
-    TBody: Type<Prescription>(),
-    TRes: Type<Prescription>(),
-  },
-
-  listAdministrations: {
-    path: "/api/v1/consultation/{consultation_external_id}/prescription_administration/",
-    method: "GET",
-  },
-
-  getAdministration: {
-    path: "/api/v1/consultation/{consultation_external_id}/prescription_administration/{external_id}/",
-    method: "GET",
-  },
-
-  getPrescription: {
-    path: "/api/v1/consultation/{consultation_external_id}/prescriptions/{external_id}/",
-    method: "GET",
-  },
-
-  administerPrescription: {
-    path: "/api/v1/consultation/{consultation_external_id}/prescriptions/{external_id}/administer/",
-    method: "POST",
-  },
-
-  discontinuePrescription: {
-    path: "/api/v1/consultation/{consultation_external_id}/prescriptions/{external_id}/discontinue/",
-    method: "POST",
-    TBody: Type<{ discontinued_reason: string }>(),
-    TRes: Type<Record<string, never>>(),
-  },
-
   // HCX Endpoints
 
   listPMJYPackages: {
diff --git a/src/Redux/fireRequest.tsx b/src/Redux/fireRequest.tsx
index 3d8c677d47d..892e6bd2ee9 100644
--- a/src/Redux/fireRequest.tsx
+++ b/src/Redux/fireRequest.tsx
@@ -152,7 +152,7 @@ export const fireRequest = (
           if (error.response.status > 400 && error.response.status < 500) {
             if (error.response.data && error.response.data.detail) {
               if (error.response.data.code === "token_not_valid") {
-                window.location.href = "/session-expired";
+                window.location.href = `/session-expired?redirect=${window.location.href}`;
               }
               Notification.Error({
                 msg: error.response.data.detail,
diff --git a/src/Routers/routes/FacilityRoutes.tsx b/src/Routers/routes/FacilityRoutes.tsx
index 77247df9189..be52ef4e72c 100644
--- a/src/Routers/routes/FacilityRoutes.tsx
+++ b/src/Routers/routes/FacilityRoutes.tsx
@@ -8,6 +8,7 @@ import ResourceCreate from "../../Components/Resource/ResourceCreate";
 import CentralNursingStation from "../../Components/Facility/CentralNursingStation";
 import FacilityLocationRoutes from "./FacilityLocationRoutes";
 import FacilityInventoryRoutes from "./FacilityInventoryRoutes";
+import LiveFeedScreen from "../../Components/Facility/LiveFeedScreen";
 
 export default {
   "/facility": () => <HospitalList />,
@@ -21,6 +22,9 @@ export default {
   "/facility/:facilityId/cns": ({ facilityId }: any) => (
     <CentralNursingStation facilityId={facilityId} />
   ),
+  "/facility/:facilityId/livefeed": ({ facilityId }: any) => (
+    <LiveFeedScreen facilityId={facilityId} />
+  ),
   "/facility/:facilityId": ({ facilityId }: any) => (
     <FacilityHome facilityId={facilityId} />
   ),
diff --git a/src/Utils/request/handleResponse.ts b/src/Utils/request/handleResponse.ts
index 2ecad95ac88..8698919c869 100644
--- a/src/Utils/request/handleResponse.ts
+++ b/src/Utils/request/handleResponse.ts
@@ -29,7 +29,7 @@ export default function handleResponse(
   if (res.status >= 400) {
     // Invalid token
     if (!silent && error?.code === "token_not_valid") {
-      navigate("/session-expired");
+      navigate(`/session-expired?redirect=${window.location.href}`);
     }
 
     notify?.Error({ msg: error?.detail || "Something went wrong...!" });
diff --git a/src/Utils/request/useQuery.ts b/src/Utils/request/useQuery.ts
index 2a8cb2e2ad4..2dab2910278 100644
--- a/src/Utils/request/useQuery.ts
+++ b/src/Utils/request/useQuery.ts
@@ -6,6 +6,7 @@ import { mergeRequestOptions } from "./utils";
 export interface QueryOptions<TData> extends RequestOptions<TData> {
   prefetch?: boolean;
   refetchOnWindowFocus?: boolean;
+  key?: string;
 }
 
 export default function useQuery<TData>(
diff --git a/src/Utils/request/utils.ts b/src/Utils/request/utils.ts
index f159df1b7a7..ec919c79490 100644
--- a/src/Utils/request/utils.ts
+++ b/src/Utils/request/utils.ts
@@ -1,4 +1,5 @@
 import { LocalStorageKeys } from "../../Common/constants";
+import * as Notification from "../Notifications";
 import { QueryParams, RequestOptions } from "./types";
 
 export function makeUrl(
@@ -38,6 +39,9 @@ const ensurePathNotMissingReplacements = (path: string) => {
   const missingParams = path.match(/\{.*\}/g);
 
   if (missingParams) {
+    Notification.Error({
+      msg: `Missing path params: ${missingParams.join(", ")}`,
+    });
     throw new Error(`Missing path params: ${missingParams.join(", ")}`);
   }
 };
@@ -78,7 +82,7 @@ export function mergeRequestOptions<TData>(
     ...overrides,
 
     query: { ...options.query, ...overrides.query },
-    body: { ...options.body, ...overrides.body },
+    body: { ...(options.body ?? {}), ...(overrides.body ?? {}) },
     pathParams: { ...options.pathParams, ...overrides.pathParams },
 
     onResponse: (res) => {
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index 3aef5b03d67..61c0b939695 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -92,6 +92,10 @@ export const relativeDate = (date: DateLike) => {
   return `${obj.fromNow()} at ${obj.format(TIME_FORMAT)}`;
 };
 
+export const formatName = (user: { first_name: string; last_name: string }) => {
+  return `${user.first_name} ${user.last_name}`;
+};
+
 export const relativeTime = (time?: DateLike) => {
   return `${dayjs(time).fromNow()}`;
 };
@@ -107,8 +111,35 @@ export const handleSignOut = (forceReload: boolean) => {
   Object.values(LocalStorageKeys).forEach((key) =>
     localStorage.removeItem(key)
   );
-  navigate("/");
-  if (forceReload) window.location.reload();
+  const redirectURL = new URLSearchParams(window.location.search).get(
+    "redirect"
+  );
+  const url = redirectURL ? `/?redirect=${redirectURL}` : "/";
+  if (forceReload) {
+    window.location.href = url;
+  } else {
+    navigate(url);
+  }
+};
+
+export const handleRedirection = () => {
+  const redirectParam = new URLSearchParams(window.location.search).get(
+    "redirect"
+  );
+  try {
+    if (redirectParam) {
+      const redirectURL = new URL(redirectParam);
+
+      if (redirectURL.origin === window.location.origin) {
+        const newPath = redirectURL.pathname + redirectURL.search;
+        window.location.href = `${window.location.origin}${newPath}`;
+        return;
+      }
+    }
+    window.location.href = "/facility";
+  } catch {
+    window.location.href = "/facility";
+  }
 };
 
 /**