diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts
index bd5002d386f..9090f72505a 100644
--- a/cypress/e2e/users_spec/user_creation.cy.ts
+++ b/cypress/e2e/users_spec/user_creation.cy.ts
@@ -193,18 +193,6 @@ describe("User Creation", () => {
     userPage.verifyMultipleBadgesWithSameId(alreadylinkedusersviews);
   });
 
-  // the below commented out codes, will be used in the upcoming refactoring of this module, since it is a inter-dependent of partially converted code, currently taking it down
-
-  //   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']").should("not.exist");
-  //   });
-
   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..b7e1e8b53e9
--- /dev/null
+++ b/cypress/e2e/users_spec/user_manage.cy.ts
@@ -0,0 +1,101 @@
+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";
+
+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 = "devdistrictadmin";
+  const usernamerealname = "Dummy Doctor";
+  const facilitytolinkusername = "Dummy Shifting Center";
+  const workinghour = "23";
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.awaitUrl("/users");
+  });
+
+  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(usernametolinkskill);
+    userPage.checkUsernameText(usernametolinkskill);
+    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/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..70e617f7e35
--- /dev/null
+++ b/cypress/pageobject/Users/ManageUserPage.ts
@@ -0,0 +1,116 @@
+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.get("#profilenamelink").click();
+  }
+
+  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();
+  }
+
+  clickDoctorConnectButton() {
+    cy.get("#doctor-connect-patient-button").click();
+  }
+
+  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/package-lock.json b/package-lock.json
index baa3205a234..0da53d597ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23708,4 +23708,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
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/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/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/FacilitySelect.tsx b/src/Components/Common/FacilitySelect.tsx
index 19494081aa3..1aabc36013b 100644
--- a/src/Components/Common/FacilitySelect.tsx
+++ b/src/Components/Common/FacilitySelect.tsx
@@ -6,7 +6,7 @@ import { FacilityModel } from "../Facility/models";
 
 interface FacilitySelectProps {
   name: string;
-  exclude_user: string;
+  exclude_user?: string;
   errors?: string | undefined;
   className?: string;
   searchAll?: boolean;
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/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/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..26bed83635b 100644
--- a/src/Components/Facility/CentralNursingStation.tsx
+++ b/src/Components/Facility/CentralNursingStation.tsx
@@ -273,6 +273,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/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
index 2c9b8631077..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,
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index f2ef13fa833..6a5a5da242c 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -4,7 +4,7 @@ import {
   OptionsType,
   SYMPTOM_CHOICES,
 } from "../../../Common/constants";
-import { ConsultationModel, ICD11DiagnosisModel } from "../models";
+import { ConsultationModel } from "../models";
 import {
   getConsultation,
   getPatient,
@@ -13,7 +13,6 @@ import {
 } 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";
@@ -43,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"));
@@ -218,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>
@@ -430,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 ||
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/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 d8c8baeb802..a50b3fc985c 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -88,7 +88,10 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                       {kasp_string}
                     </div>
                   )}
-                  <div className="flex flex-wrap 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"
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/LiveFeedScreen.tsx b/src/Components/Facility/LiveFeedScreen.tsx
new file mode 100644
index 00000000000..b9a2eabdc03
--- /dev/null
+++ b/src/Components/Facility/LiveFeedScreen.tsx
@@ -0,0 +1,303 @@
+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 { useTranslation } from "react-i18next";
+import { SortOption } from "../Common/SortDropdown";
+import { SelectFormField } from "../Form/FormFields/SelectFormField";
+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;
+
+const SORT_OPTIONS: SortOption[] = [
+  { isAscending: true, value: "bed__name" },
+  { isAscending: false, value: "-bed__name" },
+  { isAscending: false, value: "-created_date" },
+  { isAscending: true, value: "created_date" },
+];
+
+interface Props {
+  facilityId: string;
+}
+
+const getOrderingList = async (
+  facilityId: string,
+  setOrdering: (order: string) => void
+) => {
+  const orderData = localStorage.getItem("live-feed-order");
+  if (orderData) {
+    const order = JSON.parse(orderData);
+    const orderValue = order.find((item: any) => item.facility === facilityId);
+    setOrdering(orderValue.order);
+  }
+};
+
+const setOrderingList = async (facilityId: string, order: string) => {
+  const orderData = localStorage.getItem("live-feed-order") || "[]";
+  const orderList = JSON.parse(orderData);
+  const index = orderList.findIndex(
+    (item: any) => item.facility === facilityId
+  );
+  if (index !== -1) {
+    orderList[index].order = order;
+  } else {
+    orderList.push({ facility: facilityId, order });
+  }
+  localStorage.setItem("live-feed-order", JSON.stringify(orderList));
+};
+
+export default function LiveFeedScreen({ facilityId }: Props) {
+  const { t } = useTranslation();
+  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 [ordering, setOrdering] = useState<string>("bed__name");
+
+  const [refresh_presets_hash, setRefreshPresetsHash] = useState<number>(
+    Number(new Date())
+  );
+
+  // To automatically collapse sidebar.
+  useEffect(() => {
+    sidebar.setShrinked(true);
+
+    return () => {
+      sidebar.setShrinked(sidebar.shrinked);
+    };
+  }, []);
+
+  useEffect(() => {
+    getOrderingList(facilityId, setOrdering);
+  }, [facilityId]);
+
+  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,
+        ordering: qParams.ordering || ordering,
+        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 className="flex w-full items-center gap-2">
+                        <LocationSelect
+                          key={qParams.location}
+                          name="Facilities"
+                          setSelected={(location) => updateQuery({ location })}
+                          selected={qParams.location}
+                          showAll={false}
+                          multiple={false}
+                          facilityId={facilityId}
+                          errors=""
+                          errorClassName="hidden"
+                        />
+                        {qParams.location && (
+                          <ButtonV2
+                            variant="secondary"
+                            circle
+                            border
+                            onClick={() => removeFilter("location")}
+                          >
+                            Clear
+                          </ButtonV2>
+                        )}
+                      </div>
+                    </div>
+                    <SelectFormField
+                      name="ordering"
+                      label={t("sort_by")}
+                      required
+                      value={qParams.ordering || ordering}
+                      onChange={({ value }) => {
+                        updateQuery({ ordering: value });
+                        setOrderingList(facilityId, value);
+                      }}
+                      options={SORT_OPTIONS}
+                      optionLabel={({ value }) => t("SortOptions." + value)}
+                      optionIcon={({ isAscending }) => (
+                        <CareIcon
+                          className={
+                            isAscending
+                              ? "care-l-sort-amount-up"
+                              : "care-l-sort-amount-down"
+                          }
+                        />
+                      )}
+                      optionValue={({ value }) => value}
+                      labelClassName="text-sm"
+                      errorClassName="hidden"
+                    />
+                    <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/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/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 24762d10279..6a52d68130c 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -814,6 +814,7 @@ export const PatientManager = () => {
             />
             {showDoctorConnect && (
               <ButtonV2
+                id="doctor-connect-patient-button"
                 onClick={() => {
                   triggerGoal("Doctor Connect Clicked", {
                     facilityId: qParams.facility,
diff --git a/src/Components/Resource/BadgesList.tsx b/src/Components/Resource/BadgesList.tsx
index 6977861d596..4ab4f3cc8e4 100644
--- a/src/Components/Resource/BadgesList.tsx
+++ b/src/Components/Resource/BadgesList.tsx
@@ -2,10 +2,10 @@ import { SHIFTING_FILTER_ORDER } from "../../Common/constants";
 import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
 
-function useFacilityQuery(facilityId: string | undefined) {
+export function useFacilityQuery(facilityId: string | undefined) {
   return useQuery(routes.getAnyFacility, {
-    pathParams: { id: String(facilityId) },
-    prefetch: facilityId !== undefined,
+    pathParams: { id: facilityId as string },
+    prefetch: !!facilityId,
   });
 }
 
diff --git a/src/Components/Resource/CommentSection.tsx b/src/Components/Resource/CommentSection.tsx
index 25d8142dae7..5b9929ed19f 100644
--- a/src/Components/Resource/CommentSection.tsx
+++ b/src/Components/Resource/CommentSection.tsx
@@ -4,7 +4,6 @@ import { formatDateTime } from "../../Utils/utils";
 import CircularProgress from "../Common/components/CircularProgress";
 import ButtonV2 from "../Common/components/ButtonV2";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
-import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import { IComment } from "./models";
@@ -12,13 +11,6 @@ import request from "../../Utils/request/request";
 
 const CommentSection = (props: { id: string }) => {
   const [commentBox, setCommentBox] = useState("");
-  const { loading, refetch: resourceRefetch } = useQuery(
-    routes.getResourceComments,
-    {
-      pathParams: { id: props.id },
-      query: { limit: 8, offset: 0 },
-    }
-  );
 
   const onSubmitComment = async () => {
     const payload = {
@@ -36,49 +28,52 @@ const CommentSection = (props: { id: string }) => {
     });
     if (res?.ok) {
       Notification.Success({ msg: "Comment added successfully" });
-      resourceRefetch();
     }
     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">
-        {loading ? (
-          <CircularProgress className="h-12 w-12" />
-        ) : (
-          <PaginatedList
-            route={routes.getResourceComments}
-            pathParams={{ id: props.id }}
-          >
-            {() => (
-              <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>
+    <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();
+              }}
+            >
+              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>
-            )}
-          </PaginatedList>
-        )}
-      </div>
-    </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </PaginatedList>
   );
 };
 
diff --git a/src/Components/Resource/ListView.tsx b/src/Components/Resource/ListView.tsx
index 9496c6d38d4..5eb5a93fb8f 100644
--- a/src/Components/Resource/ListView.tsx
+++ b/src/Components/Resource/ListView.tsx
@@ -135,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
diff --git a/src/Components/Resource/ResourceBoard.tsx b/src/Components/Resource/ResourceBoard.tsx
index 217f2941e10..d57c7a0d36f 100644
--- a/src/Components/Resource/ResourceBoard.tsx
+++ b/src/Components/Resource/ResourceBoard.tsx
@@ -8,8 +8,9 @@ import { ExportButton } from "../Common/Export";
 import dayjs from "../../Utils/dayjs";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
-
-const limit = 14;
+import { PaginatedResponse } from "../../Utils/request/types";
+import { IResource } from "./models";
+import request from "../../Utils/request/request";
 
 interface boardProps {
   board: string;
@@ -136,7 +137,7 @@ const ResourceCard = ({ resource }: any) => {
           <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
@@ -153,8 +154,7 @@ export default function ResourceBoard({
   filterProp,
   formatFilter,
 }: boardProps) {
-  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) => {
@@ -165,24 +165,10 @@ export default function ResourceBoard({
     collect: (monitor) => ({ isOver: !!monitor.isOver() }),
   }));
   const [offset, setOffSet] = useState(0);
-
-  const { data, refetch } = useQuery(routes.listResourceRequests, {
-    query: formatFilter({
-      ...filterProp,
-      status: board,
-      offset: offset,
-    }),
-    onResponse: ({ res, data }) => {
-      if (res && data) {
-        setCurrentPage(1);
-      }
-      setIsLoading((loading) => reduceLoading("COMPLETE", loading));
-    },
-  });
+  const [data, setData] = useState<PaginatedResponse<IResource>>();
 
   useEffect(() => {
     setIsLoading((loading) => reduceLoading("BOARD", loading));
-    refetch();
   }, [
     board,
     filterProp.facility,
@@ -197,25 +183,50 @@ export default function ResourceBoard({
     filterProp.ordering,
   ]);
 
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setOffSet(offset);
-    setCurrentPage(page);
+  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));
-    refetch();
+    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 &&
-      data?.results
-        .filter(({ status }) => status === filter)
-        .map((resource: any) => (
-          <ResourceCard key={`resource_${resource.id}`} resource={resource} />
-        ))
-    );
+    return data?.results
+      .filter(({ status }) => status === filter)
+      .map((resource: any) => (
+        <ResourceCard key={`resource_${resource.id}`} resource={resource} />
+      ));
   };
+
   return (
     <div
       ref={drop}
@@ -272,7 +283,7 @@ export default function ResourceBoard({
             </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/ResourceDetails.tsx b/src/Components/Resource/ResourceDetails.tsx
index 6917501eca4..c42cd79b8e5 100644
--- a/src/Components/Resource/ResourceDetails.tsx
+++ b/src/Components/Resource/ResourceDetails.tsx
@@ -253,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/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 1771a6ca22f..8d412aef7b8 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -442,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);
@@ -731,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">
@@ -762,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>
@@ -785,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
@@ -806,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/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 c8a627710dc..7e357bc04b5 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",
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 b066b98eec5..a120c384a3d 100644
--- a/src/Redux/actions.tsx
+++ b/src/Redux/actions.tsx
@@ -630,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);
@@ -787,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 = (
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index 7194aba5278..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,
@@ -29,6 +30,7 @@ import {
 } from "../Components/Assets/AssetTypes";
 import {
   ConsultationModel,
+  CurrentBed,
   FacilityModel,
   LocationModel,
   WardModel,
@@ -43,8 +45,13 @@ import {
 } from "../Components/ExternalResult/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
@@ -202,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
@@ -355,6 +365,7 @@ const routes = {
   listConsultationBeds: {
     path: "/api/v1/consultationbed/",
     method: "GET",
+    TRes: Type<PaginatedResponse<CurrentBed>>(),
   },
   createConsultationBed: {
     path: "/api/v1/consultationbed/",
@@ -737,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/",
@@ -762,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/",
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/utils.ts b/src/Utils/utils.ts
index 34d4070dbe9..61c0b939695 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -114,8 +114,12 @@ export const handleSignOut = (forceReload: boolean) => {
   const redirectURL = new URLSearchParams(window.location.search).get(
     "redirect"
   );
-  redirectURL ? navigate(`/?redirect=${redirectURL}`) : navigate("/");
-  if (forceReload) window.location.href = "/";
+  const url = redirectURL ? `/?redirect=${redirectURL}` : "/";
+  if (forceReload) {
+    window.location.href = url;
+  } else {
+    navigate(url);
+  }
 };
 
 export const handleRedirection = () => {