diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index d6c2dce2b6c..6f05d6aec72 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -10,19 +10,38 @@ import { formatPhoneNumber, parsePhoneNumber } from "../../Utils/utils";
 import DialogModal from "../Common/Dialog";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import useConfig from "../../Common/hooks/useConfig";
-import { classNames } from "../../Utils/utils";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
-
+import { getBedTypes } from "../../Common/constants";
+import useQuery from "../../Utils/request/useQuery";
+import { Occupany_badge } from "./Facilitybedoccupancybadge";
 export const FacilityCard = (props: { facility: any; userType: any }) => {
   const { facility, userType } = props;
   const { kasp_string } = useConfig();
+  const config = useConfig();
+  const capacityQuery = useQuery(routes.getCapacity, {
+    pathParams: { facilityId: `${facility.id}` },
+  });
 
   const { t } = useTranslation();
   const [notifyModalFor, setNotifyModalFor] = useState(undefined);
   const [notifyMessage, setNotifyMessage] = useState("");
   const [notifyError, setNotifyError] = useState("");
-
+  const occupancy = {
+    total_occupancy: {
+      occupied: facility.patient_count,
+      total: facility.total_count,
+      tooltip:
+        "Total patients marked as admitted in consultation/ Total no. of registered bed",
+      badge_title: "Occupancy",
+    },
+    icu: {
+      occupied: 0,
+      total: 0,
+      tooltip: "ICU bed type/ Number of ICU beds registered",
+      badge_title: "ICU Occupancy",
+    },
+  };
   const handleNotifySubmit = async (id: any) => {
     if (notifyMessage.trim().length >= 1) {
       setNotifyError("");
@@ -45,6 +64,34 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
     }
   };
 
+  getBedTypes(config).forEach((x) => {
+    const res = capacityQuery.data?.results.find((data) => {
+      return data.room_type === x.id;
+    });
+    if (
+      res &&
+      res.current_capacity !== undefined &&
+      res.total_capacity !== undefined &&
+      (res.room_type === 20 || res.room_type === 10)
+    ) {
+      occupancy.icu.total = occupancy.icu.total + res.total_capacity;
+      occupancy.icu.occupied = occupancy.icu.occupied + res.current_capacity;
+    }
+  });
+  const Badge: JSX.Element[] = [];
+  for (const key in occupancy) {
+    const element = occupancy[key as keyof typeof occupancy];
+    Badge.push(
+      <Occupany_badge
+        key={key}
+        title={element.badge_title}
+        tooltip={element.tooltip}
+        occupied={element.occupied}
+        total={element.total}
+      />,
+    );
+  }
+
   return (
     <div key={`usr_${facility.id}`} className="w-full">
       <div className="block h-full overflow-hidden rounded-lg bg-white shadow hover:border-primary-500">
@@ -172,37 +219,9 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                 {/* <div className="flex justify-between py-2"> */}
                 <div className="flex w-full flex-wrap justify-between gap-2 py-2">
                   <div className="flex flex-wrap gap-2">
-                    <div
-                      id="occupany-badge"
-                      className={`tooltip button-size-default ml-auto flex w-fit items-center justify-center rounded-md px-2 ${
-                        facility.patient_count / facility.bed_count > 0.85
-                          ? "button-danger-border bg-red-500"
-                          : "button-primary-border bg-primary-100"
-                      }`}
-                    >
-                      <span className="tooltip-text tooltip-top">
-                        Live Patients / Total beds
-                      </span>{" "}
-                      <CareIcon
-                        icon="l-bed"
-                        className={classNames(
-                          "mr-2",
-                          facility.patient_count / facility.bed_count > 0.85
-                            ? "text-white"
-                            : "text-primary-600",
-                        )}
-                      />{" "}
-                      <dt
-                        className={`text-sm font-semibold ${
-                          facility.patient_count / facility.bed_count > 0.85
-                            ? "text-white"
-                            : "text-secondary-700"
-                        }`}
-                      >
-                        Occupancy: {facility.patient_count} /{" "}
-                        {facility.bed_count}{" "}
-                      </dt>{" "}
-                    </div>
+
+                    {Badge}
+
                     <DialogModal
                       show={notifyModalFor === facility.id}
                       title={
diff --git a/src/Components/Facility/Facilitybedoccupancybadge.tsx b/src/Components/Facility/Facilitybedoccupancybadge.tsx
new file mode 100644
index 00000000000..adc5fe945a0
--- /dev/null
+++ b/src/Components/Facility/Facilitybedoccupancybadge.tsx
@@ -0,0 +1,44 @@
+import { classNames } from "../../Utils/utils";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+
+export const Occupany_badge = (props: {
+  occupied: number;
+  total: number;
+  tooltip: string;
+  title: string;
+}) => {
+  let total_capacity = props.total;
+  const occupied_capacity = props.occupied,
+    tooltip = props.tooltip,
+    badge_title = props.title;
+  if (total_capacity == undefined) {
+    total_capacity = 0;
+  }
+  return (
+    <div
+      id="occupany-badge"
+      className={`tooltip button-size-default ml-auto flex w-fit items-center justify-center rounded-md px-2 ${occupied_capacity / total_capacity > 0.85 ? "button-danger-border bg-red-500" : "button-primary-border bg-primary-100"}`}
+    >
+      <span
+        className="tooltip-text tooltip-top"
+        style={{ whiteSpace: "pre-line" }}
+      >
+        {tooltip}
+      </span>{" "}
+      <CareIcon
+        icon="l-bed"
+        className={classNames(
+          "mr-2",
+          occupied_capacity / total_capacity > 0.85
+            ? "text-white"
+            : "text-primary-600",
+        )}
+      />{" "}
+      <dt
+        className={`text-sm font-semibold ${occupied_capacity / total_capacity > 0.85 ? "text-white" : "text-gray-700"}`}
+      >
+        {badge_title}: {occupied_capacity} / {total_capacity}{" "}
+      </dt>{" "}
+    </div>
+  );
+};