diff --git a/src/components/Common/DateInputV2.tsx b/src/components/Common/DateInputV2.tsx
index 20027a004d2..8debee7ac7b 100644
--- a/src/components/Common/DateInputV2.tsx
+++ b/src/components/Common/DateInputV2.tsx
@@ -89,15 +89,18 @@ const DateInputV2: React.FC<Props> = ({
         );
         break;
       case "month":
-        setDatePickerHeaderDate((prev) =>
-          dayjs(prev).subtract(1, "year").toDate(),
-        );
+        setDatePickerHeaderDate((prev) => {
+          const newDate = dayjs(prev).subtract(1, "year").toDate();
+          if (min && newDate < min) {
+            return new Date(min.getFullYear(), min.getMonth(), 1);
+          }
+          return newDate;
+        });
         break;
       case "year":
-        setDatePickerHeaderDate((prev) =>
-          dayjs(prev).subtract(1, "year").toDate(),
-        );
-        setYear((prev) => dayjs(prev).subtract(10, "year").toDate());
+        if (!min || year.getFullYear() - 10 >= min.getFullYear()) {
+          setYear((prev) => dayjs(prev).subtract(10, "year").toDate());
+        }
         break;
     }
   };
@@ -108,11 +111,18 @@ const DateInputV2: React.FC<Props> = ({
         setDatePickerHeaderDate((prev) => dayjs(prev).add(1, "month").toDate());
         break;
       case "month":
-        setDatePickerHeaderDate((prev) => dayjs(prev).add(1, "year").toDate());
+        setDatePickerHeaderDate((prev) => {
+          const newDate = dayjs(prev).add(1, "year").toDate();
+          if (max && newDate > max) {
+            return new Date(max.getFullYear(), max.getMonth(), 1);
+          }
+          return newDate;
+        });
         break;
       case "year":
-        setDatePickerHeaderDate((prev) => dayjs(prev).add(1, "year").toDate());
-        setYear((prev) => dayjs(prev).add(10, "year").toDate());
+        if (!max || year.getFullYear() + 10 <= max.getFullYear()) {
+          setYear((prev) => dayjs(prev).add(10, "year").toDate());
+        }
         break;
     }
   };
@@ -209,6 +219,33 @@ const DateInputV2: React.FC<Props> = ({
     return true;
   };
 
+  const isMonthWithinConstraints = (month: number) => {
+    const year = datePickerHeaderDate.getFullYear();
+
+    if (min && year < min.getFullYear()) return false;
+    if (max && year > max.getFullYear()) return false;
+
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    if (min && lastDay < min) return false;
+    if (max && firstDay > max) return false;
+
+    return true;
+  };
+
+  const isYearWithinConstraints = (year: number) => {
+    if (min && year < min.getFullYear()) return false;
+    if (max && year > max.getFullYear()) return false;
+
+    const yearStart = new Date(year, 0, 1);
+    const yearEnd = new Date(year, 11, 31);
+
+    if (min && yearEnd < min) return false;
+    if (max && yearStart > max) return false;
+
+    return true;
+  };
+
   const isSelectedMonth = (month: number) =>
     month === datePickerHeaderDate.getMonth();
 
@@ -216,25 +253,48 @@ const DateInputV2: React.FC<Props> = ({
     year === datePickerHeaderDate.getFullYear();
 
   const setMonthValue = (month: number) => () => {
-    setDatePickerHeaderDate(
-      new Date(
+    if (isMonthWithinConstraints(month)) {
+      const lastDayOfMonth = new Date(
         datePickerHeaderDate.getFullYear(),
-        month,
-        datePickerHeaderDate.getDate(),
-      ),
-    );
-    setType("date");
+        month + 1,
+        0,
+      ).getDate();
+      const newDate = Math.min(datePickerHeaderDate.getDate(), lastDayOfMonth);
+      setDatePickerHeaderDate(
+        new Date(datePickerHeaderDate.getFullYear(), month, newDate),
+      );
+      setType("date");
+    } else {
+      Notification.Error({
+        msg: outOfLimitsErrorMessage ?? "Cannot select month out of range",
+      });
+    }
   };
-
+  //min and max setting for year
   const setYearValue = (year: number) => () => {
-    setDatePickerHeaderDate(
-      new Date(
+    if (isYearWithinConstraints(year)) {
+      const newDate = new Date(
         year,
         datePickerHeaderDate.getMonth(),
         datePickerHeaderDate.getDate(),
-      ),
-    );
-    setType("date");
+      );
+      if (min && year === min.getFullYear() && newDate < min) {
+        setDatePickerHeaderDate(
+          new Date(min.getFullYear(), min.getMonth(), min.getDate()),
+        );
+      } else if (max && year === max.getFullYear() && newDate > max) {
+        setDatePickerHeaderDate(
+          new Date(max.getFullYear(), max.getMonth(), max.getDate()),
+        );
+      } else {
+        setDatePickerHeaderDate(newDate);
+      }
+      setType("date");
+    } else {
+      Notification.Error({
+        msg: outOfLimitsErrorMessage ?? "Cannot select year out of range",
+      });
+    }
   };
 
   useEffect(() => {
@@ -331,6 +391,7 @@ const DateInputV2: React.FC<Props> = ({
                     data-scribe-ignore
                     className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
                     placeholder={placeholder ?? t("select_date")}
+                    title={placeholder}
                     value={value ? dayjs(value).format(dateFormat) : ""}
                   />
                   <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
@@ -371,23 +432,62 @@ const DateInputV2: React.FC<Props> = ({
                       <div className="flex flex-col items-center gap-4 px-4 md:flex-row md:px-0">
                         <div className="flex flex-1 flex-col items-center justify-between">
                           <div className="flex">
-                            <button
-                              type="button"
-                              disabled={
-                                !isDateWithinConstraints(
-                                  getLastDay(),
-                                  datePickerHeaderDate.getMonth() - 1,
-                                )
-                              }
-                              className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
-                              onClick={decrement}
-                              data-test-id="decrement-date-range"
-                            >
-                              <CareIcon
-                                icon="l-angle-left-b"
-                                className="text-lg"
-                              />
-                            </button>
+                            {type === "date" && (
+                              <button
+                                type="button"
+                                disabled={
+                                  !isDateWithinConstraints(
+                                    getLastDay(),
+                                    datePickerHeaderDate.getMonth() - 1,
+                                    datePickerHeaderDate.getFullYear(),
+                                  )
+                                }
+                                className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                                onClick={decrement}
+                                data-test-id="decrement-date-range"
+                              >
+                                <CareIcon
+                                  icon="l-angle-left-b"
+                                  className="text-lg"
+                                />
+                              </button>
+                            )}
+                            {type === "month" && (
+                              <button
+                                type="button"
+                                disabled={
+                                  min &&
+                                  datePickerHeaderDate.getFullYear() <=
+                                    min.getFullYear()
+                                }
+                                className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                                onClick={decrement}
+                                data-test-id="decrement-month-range"
+                              >
+                                <CareIcon
+                                  icon="l-angle-left-b"
+                                  className="text-lg"
+                                />
+                              </button>
+                            )}
+
+                            {type === "year" && (
+                              <button
+                                type="button"
+                                disabled={
+                                  min &&
+                                  year.getFullYear() - 10 < min.getFullYear()
+                                }
+                                className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                                onClick={decrement}
+                                data-test-id="decrement-year-range"
+                              >
+                                <CareIcon
+                                  icon="l-angle-left-b"
+                                  className="text-lg"
+                                />
+                              </button>
+                            )}
 
                             <div className="flex items-center justify-center text-sm">
                               {type === "date" && (
@@ -411,23 +511,62 @@ const DateInputV2: React.FC<Props> = ({
                                 </p>
                               </div>
                             </div>
-                            <button
-                              type="button"
-                              disabled={
-                                (type === "year" &&
-                                  new Date().getFullYear() ===
-                                    year.getFullYear()) ||
-                                !isDateWithinConstraints(getLastDay())
-                              }
-                              className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
-                              onClick={increment}
-                              data-test-id="increment-date-range"
-                            >
-                              <CareIcon
-                                icon="l-angle-right-b"
-                                className="text-lg"
-                              />
-                            </button>
+                            {type === "date" && (
+                              <button
+                                type="button"
+                                disabled={
+                                  !isDateWithinConstraints(
+                                    getLastDay(),
+                                    datePickerHeaderDate.getMonth(),
+                                    datePickerHeaderDate.getFullYear(),
+                                  )
+                                }
+                                className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                                onClick={increment}
+                                data-test-id="increment-date-range"
+                              >
+                                <CareIcon
+                                  icon="l-angle-right-b"
+                                  className="text-lg"
+                                />
+                              </button>
+                            )}
+                            {type === "month" && (
+                              <button
+                                type="button"
+                                disabled={
+                                  max &&
+                                  datePickerHeaderDate.getFullYear() >=
+                                    max.getFullYear()
+                                }
+                                className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                                onClick={increment}
+                                data-test-id="increment-month-range"
+                              >
+                                <CareIcon
+                                  icon="l-angle-right-b"
+                                  className="text-lg"
+                                />
+                              </button>
+                            )}
+
+                            {type === "year" && (
+                              <button
+                                type="button"
+                                disabled={
+                                  max &&
+                                  year.getFullYear() + 10 > max.getFullYear()
+                                }
+                                className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
+                                onClick={increment}
+                                data-test-id="increment-year-range"
+                              >
+                                <CareIcon
+                                  icon="l-angle-right-b"
+                                  className="text-lg"
+                                />
+                              </button>
+                            )}
                           </div>
 
                           {type === "date" && (
@@ -510,10 +649,12 @@ const DateInputV2: React.FC<Props> = ({
                                     key={i}
                                     id={`month-${i}`}
                                     className={classNames(
-                                      "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
-                                      value && isSelectedMonth(i)
-                                        ? "bg-primary-500 text-white"
-                                        : "text-secondary-700 hover:bg-secondary-300",
+                                      "w-1/4 rounded-lg px-2 py-4 text-center text-sm font-semibold",
+                                      isSelectedMonth(i)
+                                        ? "bg-primary-500 text-white cursor-pointer"
+                                        : isMonthWithinConstraints(i)
+                                          ? "text-secondary-700 hover:bg-secondary-300 cursor-pointer"
+                                          : "!text-secondary-400 !cursor-not-allowed",
                                     )}
                                     onClick={setMonthValue(i)}
                                   >
@@ -533,16 +674,18 @@ const DateInputV2: React.FC<Props> = ({
                               {Array(12)
                                 .fill(null)
                                 .map((_, i) => {
-                                  const y = year.getFullYear() - 11 + i;
+                                  const y = year.getFullYear() - 10 + i;
                                   return (
                                     <div
                                       key={i}
                                       id={`year-${i}`}
                                       className={classNames(
-                                        "w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
-                                        value && isSelectedYear(y)
-                                          ? "bg-primary-500 text-white"
-                                          : "text-secondary-700 hover:bg-secondary-300",
+                                        "w-1/4 rounded-lg px-2 py-4 text-center text-sm font-semibold",
+                                        isSelectedYear(y)
+                                          ? "bg-primary-500 text-white cursor-pointer"
+                                          : isYearWithinConstraints(y)
+                                            ? "text-secondary-700 hover:bg-secondary-300 cursor-pointer"
+                                            : "!text-secondary-400 !cursor-not-allowed",
                                       )}
                                       onClick={setYearValue(y)}
                                     >
diff --git a/src/components/Common/Sidebar/Sidebar.tsx b/src/components/Common/Sidebar/Sidebar.tsx
index 423d0d6f18b..e6d9edbc2dd 100644
--- a/src/components/Common/Sidebar/Sidebar.tsx
+++ b/src/components/Common/Sidebar/Sidebar.tsx
@@ -6,12 +6,7 @@ import { useTranslation } from "react-i18next";
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import SlideOver from "@/CAREUI/interactive/SlideOver";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";
 
 import {
   ShrinkedSidebarItem,
@@ -243,24 +238,19 @@ const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => {
   const { t } = useTranslation();
   return (
     <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 ${shrinked ? "bg-gray-200" : "bg-gray-100"} text-gray-600 hover:bg-primary-200 hover:text-primary-800 ${
-              shrinked ? "mx-auto" : "mr-4"
-            } transition-all ease-in-out`}
-            onClick={toggle}
-          >
-            <CareIcon
-              icon={shrinked ? "l-arrow-bar-right" : "l-layout-sidebar-alt"}
-              className="text-lg transition"
-            />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>{shrinked ? t("expand_sidebar") : t("collapse_sidebar")}</p>
-        </TooltipContent>
-      </Tooltip>
+      <TooltipComponent
+        content={shrinked ? t("expand_sidebar") : t("collapse_sidebar")}
+      >
+        <button
+          className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 ${shrinked ? "bg-gray-200" : "bg-gray-100"} text-gray-600 hover:bg-primary-200 hover:text-primary-800 ${shrinked ? "mx-auto" : "mr-4"} transition-all ease-in-out`}
+          onClick={toggle}
+        >
+          <CareIcon
+            icon={shrinked ? "l-arrow-bar-right" : "l-layout-sidebar-alt"}
+            className="text-lg transition"
+          />
+        </button>
+      </TooltipComponent>
     </TooltipProvider>
   );
 };
diff --git a/src/components/Facility/DischargedPatientsList.tsx b/src/components/Facility/DischargedPatientsList.tsx
index 4fb8910f7a1..74bb6d95626 100644
--- a/src/components/Facility/DischargedPatientsList.tsx
+++ b/src/components/Facility/DischargedPatientsList.tsx
@@ -1,5 +1,5 @@
 import { Link, navigate } from "raviger";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CountBlock from "@/CAREUI/display/Count";
@@ -11,13 +11,11 @@ import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 import SortDropdownMenu from "@/components/Common/SortDropdown";
 import Tabs from "@/components/Common/Tabs";
 import { getDiagnosesByIds } from "@/components/Diagnosis/utils";
 import { ICD11DiagnosisModel } from "@/components/Facility/models";
-import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
-import SearchInput from "@/components/Form/SearchInput";
 import {
   DIAGNOSES_FILTER_LABELS,
   DiagnosesFilterKey,
@@ -52,16 +50,79 @@ const DischargedPatientsList = ({
     pathParams: { id: facility_external_id },
   });
 
-  const { qParams, updateQuery, advancedFilter, FilterBadges, updatePage } =
-    useFilters({
-      limit: 12,
-      cacheBlacklist: [
-        "name",
-        "patient_no",
-        "phone_number",
-        "emergency_phone_number",
-      ],
-    });
+  const {
+    qParams,
+    updateQuery,
+    advancedFilter,
+    FilterBadges,
+    updatePage,
+    clearSearch,
+  } = useFilters({
+    limit: 12,
+    cacheBlacklist: [
+      "name",
+      "patient_no",
+      "phone_number",
+      "emergency_phone_number",
+    ],
+  });
+
+  const searchOptions = [
+    {
+      key: "name",
+      label: "Name",
+      type: "text" as const,
+      placeholder: "search_by_patient_name",
+      value: qParams.name || "",
+      shortcutKey: "n",
+    },
+    {
+      key: "patient_no",
+      label: "IP/OP No",
+      type: "text" as const,
+      placeholder: "search_by_patient_no",
+      value: qParams.patient_no || "",
+      shortcutKey: "u",
+    },
+    {
+      key: "phone_number",
+      label: "Phone Number",
+      type: "phone" as const,
+      placeholder: "Search_by_phone_number",
+      value: qParams.phone_number || "",
+      shortcutKey: "p",
+    },
+    {
+      key: "emergency_contact_number",
+      label: "Emergency Contact Phone Number",
+      type: "phone" as const,
+      placeholder: "search_by_emergency_phone_number",
+      value: qParams.emergency_phone_number || "",
+      shortcutKey: "e",
+    },
+  ];
+
+  const handleSearch = useCallback(
+    (key: string, value: string) => {
+      const isValidPhoneNumber = (val: string) =>
+        val.length >= 13 || val === "";
+
+      const updatedQuery = {
+        phone_number:
+          key === "phone_number" && isValidPhoneNumber(value)
+            ? value
+            : undefined,
+        name: key === "name" ? value : undefined,
+        patient_no: key === "patient_no" ? value : undefined,
+        emergency_phone_number:
+          key === "emergency_contact_number" && isValidPhoneNumber(value)
+            ? value
+            : undefined,
+      };
+      updateQuery(updatedQuery);
+    },
+    [updateQuery],
+  );
 
   useEffect(() => {
     if (!qParams.phone_number && phone_number.length >= 13) {
@@ -200,56 +261,11 @@ const DischargedPatientsList = ({
       });
   };
 
-  const queryField = <T,>(name: string, defaultValue?: T) => {
-    return {
-      name,
-      value: qParams[name] || defaultValue,
-      onChange: (e: FieldChangeEvent<T>) => updateQuery({ [e.name]: e.value }),
-      className: "grow w-full mb-2",
-    };
-  };
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
   const [phone_number, setPhoneNumber] = useState("");
-  const [phoneNumberError, setPhoneNumberError] = useState("");
   const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
-  const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
-    useState("");
   const [count, setCount] = useState(0);
-
-  const setPhoneNum = (phone_number: string) => {
-    setPhoneNumber(phone_number);
-    if (phone_number.length >= 13) {
-      setPhoneNumberError("");
-      updateQuery({ phone_number });
-      return;
-    }
-
-    if (phone_number === "+91" || phone_number === "") {
-      setPhoneNumberError("");
-      qParams.phone_number && updateQuery({ phone_number: null });
-      return;
-    }
-
-    setPhoneNumberError("Enter a valid number");
-  };
-
-  const setEmergencyPhoneNum = (emergency_phone_number: string) => {
-    setEmergencyPhoneNumber(emergency_phone_number);
-    if (emergency_phone_number.length >= 13) {
-      setEmergencyPhoneNumberError("");
-      updateQuery({ emergency_phone_number });
-      return;
-    }
-
-    if (emergency_phone_number === "+91" || emergency_phone_number === "") {
-      setEmergencyPhoneNumberError("");
-      qParams.emergency_phone_number &&
-        updateQuery({ emergency_phone_number: null });
-      return;
-    }
-
-    setEmergencyPhoneNumberError("Enter a valid number");
-  };
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <Page
@@ -281,53 +297,22 @@ const DischargedPatientsList = ({
         </>
       }
     >
-      <div className="manualGrid my-4 mb-[-12px] mt-5 grid-cols-1 gap-3 px-2 sm:grid-cols-4 md:px-0">
-        <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
-          <div className="flex-1">
-            <CountBlock
-              text="Discharged Patients"
-              count={count}
-              loading={facilityQuery.loading}
-              icon="d-patient"
-              className="pb-12"
-            />
-          </div>
-        </div>
-        <div className="col-span-3 w-full">
-          <div className="col-span-2 mt-2">
-            <div className="mt-1 md:flex md:gap-4">
-              <SearchInput
-                label="Search by Patient"
-                placeholder="Enter patient name"
-                {...queryField("name")}
-              />
-              <SearchInput
-                label="Search by IP/OP Number"
-                placeholder="Enter IP/OP Number"
-                secondary
-                {...queryField("patient_no")}
-              />
-            </div>
-            <div className="md:flex md:gap-4">
-              <PhoneNumberFormField
-                label="Search by Primary Number"
-                {...queryField("phone_number", "+91")}
-                value={phone_number}
-                onChange={(e) => setPhoneNum(e.value)}
-                error={phoneNumberError}
-                types={["mobile", "landline"]}
-              />
-              <PhoneNumberFormField
-                label="Search by Emergency Number"
-                {...queryField("emergency_phone_number", "+91")}
-                value={emergency_phone_number}
-                onChange={(e) => setEmergencyPhoneNum(e.value)}
-                error={emergencyPhoneNumberError}
-                types={["mobile", "landline"]}
-              />
-            </div>
-          </div>
+      <div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
+        <div id="total-patientcount">
+          <CountBlock
+            text={t("total_patients")}
+            count={count || 0}
+            loading={isLoading}
+            icon="d-patient"
+          />
         </div>
+        <SearchByMultipleFields
+          id="patient-search"
+          options={searchOptions}
+          onSearch={handleSearch}
+          clearSearch={clearSearch}
+          className="w-full"
+        />
       </div>
       <div className="col-span-3 mt-6 flex flex-wrap">
         <FilterBadges
@@ -440,7 +425,10 @@ const DischargedPatientsList = ({
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
         query={{ ordering: "-modified_date", ...qParams }}
-        queryCB={(query) => setCount(query.data?.count || 0)}
+        queryCB={(query) => {
+          setCount(query.data?.count || 0);
+          setIsLoading(query.loading);
+        }}
         initialPage={qParams.page}
         onPageChange={updatePage}
       >
diff --git a/src/components/Facility/FacilityCard.tsx b/src/components/Facility/FacilityCard.tsx
index fbebe8a8d0a..2f6ecec204b 100644
--- a/src/components/Facility/FacilityCard.tsx
+++ b/src/components/Facility/FacilityCard.tsx
@@ -6,6 +6,8 @@ import { useTranslation } from "react-i18next";
 import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";
+
 import { Avatar } from "@/components/Common/Avatar";
 import ButtonV2, { Cancel, Submit } from "@/components/Common/ButtonV2";
 import DialogModal from "@/components/Common/Dialog";
@@ -98,19 +100,28 @@ export const FacilityCard = (props: {
                         >
                           {facility.name}
                         </Link>
-                        <div
-                          data-test-id="occupancy-badge"
-                          className={`tooltip flex items-center gap-1 text-sm ${(facility.patient_count || 0) / (facility.bed_count || 0) > 0.85 ? "justify-center rounded-md border border-red-600 bg-red-500 p-1 font-bold text-white" : "text-secondary-700"}`}
-                        >
-                          <span className="tooltip-text tooltip-top">
-                            {t("live_patients_total_beds")}
-                          </span>{" "}
-                          <CareIcon icon="l-bed" />
-                          <dt data-test-id="occupancy-badge-text">
-                            {t("occupancy")}: {facility.patient_count} /{" "}
-                            {facility.bed_count}{" "}
-                          </dt>
-                        </div>
+                        <TooltipProvider>
+                          <TooltipComponent
+                            content={t("live_patients_total_beds")}
+                          >
+                            <div
+                              data-test-id="occupancy-badge"
+                              className={`relative flex items-center gap-1 text-sm ${
+                                (facility.patient_count || 0) /
+                                  (facility.bed_count || 0) >
+                                0.85
+                                  ? "justify-center rounded-md border border-red-600 bg-red-500 p-1 font-bold text-white"
+                                  : "text-secondary-700"
+                              }`}
+                            >
+                              <CareIcon icon="l-bed" />
+                              <dt data-test-id="occupancy-badge-text">
+                                {t("occupancy")}: {facility.patient_count} /{" "}
+                                {facility.bed_count}
+                              </dt>
+                            </div>
+                          </TooltipComponent>
+                        </TooltipProvider>
                       </div>
                       <ButtonV2
                         id="view-cns-button"
diff --git a/src/components/Form/FormFields/AutocompleteMultiselect.tsx b/src/components/Form/FormFields/AutocompleteMultiselect.tsx
index 3c537dffa32..8dad2f3ff0d 100644
--- a/src/components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -171,16 +171,18 @@ export const AutocompleteMutliSelect = <T, V>(
             {!props.disabled && (
               <ComboboxButton
                 ref={comboButtonRef}
-                className="absolute inset-y-0 right-0 flex items-center pr-2"
+                className="absolute inset-y-0 right-0 flex items-center justify-center pr-2"
               >
-                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
+                <div
+                  className={`relative flex items-center justify-center text-lg text-secondary-900 ${value.some((val: any) => val.option) ? "-top-5" : ""}`}
+                >
                   {props.isLoading ? (
                     <CareIcon icon="l-spinner" className="animate-spin" />
                   ) : (
                     <CareIcon
                       id="dropdown-toggle"
                       icon="l-angle-down"
-                      className="-mb-1.5"
+                      className="text-lg"
                     />
                   )}
                 </div>
diff --git a/src/components/Form/FormFields/DateFormField.tsx b/src/components/Form/FormFields/DateFormField.tsx
index e867c24dd51..a3d26fa5554 100644
--- a/src/components/Form/FormFields/DateFormField.tsx
+++ b/src/components/Form/FormFields/DateFormField.tsx
@@ -37,7 +37,10 @@ const DateFormField = (props: Props) => {
   return (
     <FormField field={field}>
       <DateInputV2
-        className={classNames(field.error && "border-red-500")}
+        className={classNames(
+          field.error && "border-red-500",
+          "mr-9 text-ellipsis",
+        )}
         containerClassName={props.containerClassName}
         id={field.id}
         name={field.name}
diff --git a/src/components/Form/ModelCrudEditor.tsx b/src/components/Form/ModelCrudEditor.tsx
index 209695be265..a20b07eb458 100644
--- a/src/components/Form/ModelCrudEditor.tsx
+++ b/src/components/Form/ModelCrudEditor.tsx
@@ -120,7 +120,7 @@ export default function ModelCrudEditor<TRes extends Identifier, TReq, TErr>(
             onClick={() => handleDelete(props.item.id)}
             className="w-full text-xl text-red-500 hover:text-red-700 disabled:grayscale md:w-auto"
           >
-            <CareIcon icon="l-times-circle" />{" "}
+            <CareIcon icon="l-times-circle" />
             <span className="text-sm md:hidden">{t("remove")}</span>
           </button>
         )}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 0f4a817dec4..75ca7fdc700 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -9,20 +9,38 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
+const TooltipContent = TooltipPrimitive.Content;
+
+const TooltipComponent = React.forwardRef<
+  React.ElementRef<typeof TooltipContent>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-50 dark:text-gray-900",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+>(({ children, content, sideOffset = 4, className }, ref) => {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <TooltipProvider>
+      <Tooltip open={open} onOpenChange={setOpen} delayDuration={0}>
+        <TooltipTrigger asChild onClick={() => setOpen(!open)}>
+          {children}
+        </TooltipTrigger>
+        <TooltipContent
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(
+            "z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-50 dark:text-gray-900",
+            className,
+          )}
+        >
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+});
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export {
+  TooltipComponent,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  Tooltip,
+};