diff --git a/cypress/pageobject/Facility/FacilityHome.ts b/cypress/pageobject/Facility/FacilityHome.ts
index e021171ff0..dea7de0e7b 100644
--- a/cypress/pageobject/Facility/FacilityHome.ts
+++ b/cypress/pageobject/Facility/FacilityHome.ts
@@ -72,7 +72,7 @@ class FacilityHome {
   }
 
   verifyOccupancyBadgeVisibility() {
-    cy.get("#occupany-badge").should("be.visible");
+    cy.get('[data-test-id="occupancy-badge"]').should("be.visible");
   }
 
   verifyAndCloseNotifyModal() {
diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx
index 997b58794e..6b28ca4f96 100644
--- a/src/CAREUI/display/Count.tsx
+++ b/src/CAREUI/display/Count.tsx
@@ -11,15 +11,13 @@ interface Props {
 
 export default function CountBlock(props: Props) {
   return (
-    <div
-      className={classNames("rounded-lg bg-white p-4 shadow", props.className)}
-    >
-      <dl>
-        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-xl">
+    <div className={classNames("rounded-lg", props.className)}>
+      <dl className="flex gap-3">
+        <div className="flex aspect-square h-16 items-center justify-center rounded-lg border border-black/10 bg-primary-100 text-2xl">
           <CareIcon icon={props.icon} className="text-primary-600" />
         </div>
         <div>
-          <dt className="my-2 truncate text-sm font-semibold text-secondary-700">
+          <dt className="mb-1 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
           {props.loading ? (
diff --git a/src/Components/Common/Avatar.tsx b/src/Components/Common/Avatar.tsx
index a519901216..e4d42dd72a 100644
--- a/src/Components/Common/Avatar.tsx
+++ b/src/Components/Common/Avatar.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import { cn } from "@/lib/utils";
+import React, { useEffect, useRef, useState } from "react";
 
 const colors: string[] = [
   "#E6F3FF", // Light Blue
@@ -44,43 +45,54 @@ const initials = (name: string): string => {
 interface AvatarProps {
   colors?: [string, string];
   name: string;
+  imageUrl?: string;
   className?: string;
-  square?: boolean; // New prop to determine if the avatar should be square
 }
 
 const Avatar: React.FC<AvatarProps> = ({
   colors: propColors,
   name,
+  imageUrl,
   className,
-  square = false, // Default to false for backwards compatibility
 }) => {
-  const [bgColor, fgColor] = propColors || toColor(name);
+  const [bgColor] = propColors || toColor(name);
+  const [width, setWidth] = useState(0);
+  const avatarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      const avatarRect = avatarRef.current?.getBoundingClientRect();
+      const width = avatarRect?.width || 0;
+      setWidth(width);
+    };
+    updateWidth();
+    document.addEventListener("resize", updateWidth);
+    return () => document.removeEventListener("resize", updateWidth);
+  }, []);
 
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      viewBox="0 0 100 100"
-      className={className}
+    <div
+      ref={avatarRef}
+      className={cn(
+        `flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10 font-black text-black/10`,
+        className,
+      )}
+      style={{
+        background: bgColor,
+        borderRadius: width / 15 + "px",
+        fontSize: width / 2.5 + "px",
+      }}
     >
-      {square ? (
-        <rect width="100" height="100" fill={bgColor} />
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt={name}
+          className="aspect-square w-full object-cover"
+        />
       ) : (
-        <circle cx="50" cy="50" r="50" fill={bgColor} />
+        <div>{initials(name)}</div>
       )}
-      <text
-        fill={fgColor}
-        fontSize="42"
-        fontFamily="sans-serif"
-        x="50"
-        y="54"
-        textAnchor="middle"
-        dominantBaseline="middle"
-        alignmentBaseline="middle"
-      >
-        {initials(name)}
-      </text>
-    </svg>
+    </div>
   );
 };
 
diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
index 825507ffb2..9effc947dd 100644
--- a/src/Components/Common/Sidebar/SidebarUserCard.tsx
+++ b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -40,7 +40,7 @@ const SidebarUserCard: React.FC<SidebarUserCardProps> = ({ shrinked }) => {
               <div className="flex-none text-lg">
                 <Avatar
                   name={formatDisplayName(user)}
-                  className="w-8 text-sm font-medium"
+                  className="h-8 rounded-full text-black/50"
                 />
               </div>
               <div className="max-w-32">
diff --git a/src/Components/Facility/FacilityBlock.tsx b/src/Components/Facility/FacilityBlock.tsx
index 3232321637..0ad87b050c 100644
--- a/src/Components/Facility/FacilityBlock.tsx
+++ b/src/Components/Facility/FacilityBlock.tsx
@@ -24,15 +24,11 @@ export default function FacilityBlock(props: {
 
   return (
     <Element className="flex items-center gap-4 text-left text-inherit">
-      <div className="flex aspect-square h-14 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-gray-400 bg-gray-200">
-        {facility.read_cover_image_url ? (
-          <img
-            className="h-full w-full object-cover"
-            src={facility.read_cover_image_url}
-          />
-        ) : (
-          <Avatar name={facility.name!} square={true} />
-        )}
+      <div className="flex aspect-square h-14 shrink-0 items-center justify-center overflow-hidden">
+        <Avatar
+          name={facility.name!}
+          imageUrl={facility.read_cover_image_url}
+        />
       </div>
       <div>
         <b className="font-semibold">{facility.name}</b>
diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index 69b5b9d421..e874a0f85c 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -9,7 +9,6 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { formatPhoneNumber, parsePhoneNumber } from "../../Utils/utils";
 import DialogModal from "../Common/Dialog";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
-import { classNames } from "../../Utils/utils";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import careConfig from "@careConfig";
@@ -52,20 +51,18 @@ export const FacilityCard = (props: {
 
   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">
+      <div className="block h-full overflow-hidden rounded-lg border border-secondary-300 bg-white transition-all hover:border-secondary-400">
         <div className="flex h-full">
           <div className="h-full w-full grow">
             <Link
               href={`/facility/${facility.id}`}
-              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch bg-secondary-300 min-[425px]:hidden"
+              className="group relative z-0 flex w-full min-w-[15%] items-center justify-center self-stretch min-[425px]:hidden"
             >
-              {(facility.read_cover_image_url && (
-                <img
-                  src={facility.read_cover_image_url}
-                  alt={facility.name}
-                  className="h-full max-h-32 w-full object-cover"
-                />
-              )) || <Avatar name={facility.name ?? "Unknown"} square={true} />}
+              <Avatar
+                name={facility.name || ""}
+                imageUrl={facility.read_cover_image_url}
+                className="m-4 mb-0 md:m-0"
+              />
             </Link>
 
             <div className="mx-auto flex h-fit w-full max-w-full flex-col flex-wrap justify-between md:h-full lg:max-w-3xl">
@@ -73,21 +70,12 @@ export const FacilityCard = (props: {
                 <div className="flex flex-col gap-5 sm:flex-row">
                   <Link
                     href={`/facility/${facility.id}`}
-                    className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center rounded-md bg-secondary-300 sm:flex"
+                    className="hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] sm:block"
                   >
-                    {(facility.read_cover_image_url && (
-                      <img
-                        src={facility.read_cover_image_url}
-                        alt={facility.name}
-                        className="h-full w-full rounded-md object-cover"
-                      />
-                    )) || (
-                      <Avatar
-                        name={facility.name || ""}
-                        square={true}
-                        className="h-full w-full rounded-md object-cover"
-                      />
-                    )}
+                    <Avatar
+                      name={facility.name || ""}
+                      imageUrl={facility.read_cover_image_url}
+                    />
                   </Link>
                   <div className="flow-root grow">
                     {facility.kasp_empanelled && (
@@ -99,12 +87,27 @@ export const FacilityCard = (props: {
                       className="flex flex-wrap items-center justify-between"
                       id="facility-name-card"
                     >
-                      <Link
-                        href={`/facility/${facility.id}`}
-                        className="text-xl font-bold capitalize text-inherit hover:text-inherit"
-                      >
-                        {facility.name}
-                      </Link>
+                      <div>
+                        <Link
+                          href={`/facility/${facility.id}`}
+                          className="text-xl font-bold capitalize text-inherit hover:text-inherit"
+                        >
+                          {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>
+                            {t("occupancy")}: {facility.patient_count} /{" "}
+                            {facility.bed_count}{" "}
+                          </dt>
+                        </div>
+                      </div>
                       <ButtonV2
                         id="view-cns-button"
                         href={`/facility/${facility.id}/cns`}
@@ -116,9 +119,10 @@ export const FacilityCard = (props: {
                           icon="l-monitor-heart-rate"
                           className="text-lg"
                         />
-                        <span>View CNS</span>
+                        <span>{t("view_cns")}</span>
                       </ButtonV2>
                     </div>
+
                     <div className="mt-2 flex flex-wrap gap-1">
                       <Chip
                         text={facility.facility_type || ""}
@@ -170,47 +174,10 @@ export const FacilityCard = (props: {
                   </div>
                 </div>
               </div>
-              <div className="flex flex-wrap border-t bg-secondary-50 px-2 py-1 md:px-3">
+              <div className="flex flex-wrap border-t border-t-secondary-300 bg-secondary-50 px-2 py-1 md:px-3">
                 {/* <div className="flex justify-between py-2"> */}
                 <div className="flex w-full flex-wrap justify-between gap-2 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 || 0) /
-                          (facility.bed_count || 0) >
-                        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 || 0) /
-                            (facility.bed_count || 0) >
-                            0.85
-                            ? "text-white"
-                            : "text-primary-600",
-                        )}
-                      />{" "}
-                      <dt
-                        className={`text-sm font-semibold ${
-                          (facility.patient_count || 0) /
-                            (facility.bed_count || 0) >
-                          0.85
-                            ? "text-white"
-                            : "text-secondary-700"
-                        }`}
-                      >
-                        Occupancy: {facility.patient_count} /{" "}
-                        {facility.bed_count}{" "}
-                      </dt>{" "}
-                    </div>
                     <DialogModal
                       show={notifyModalFor === facility.id}
                       title={
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index a50b1e0939..56919e6fde 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -136,14 +136,6 @@ export const FacilityHome = ({ facilityId }: Props) => {
     </div>
   );
 
-  const CoverImage = () => (
-    <img
-      src={`${facilityData?.read_cover_image_url}`}
-      alt={facilityData?.name}
-      className="h-full w-full rounded-lg object-cover"
-    />
-  );
-
   return (
     <Page
       title={facilityData?.name || "Facility"}
@@ -171,28 +163,19 @@ export const FacilityHome = ({ facilityId }: Props) => {
         onDelete={() => facilityFetch()}
         facility={facilityData ?? ({} as FacilityModel)}
       />
-      {hasCoverImage ? (
-        <div
-          className={
-            "group relative h-48 w-full text-clip rounded-t bg-secondary-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0"
-          }
-        >
-          <CoverImage />
-          {editCoverImageTooltip}
-        </div>
-      ) : (
-        <div
-          className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch bg-secondary-300 md:hidden ${
-            hasPermissionToEditCoverImage && "cursor-pointer"
-          }`}
-          onClick={() =>
-            hasPermissionToEditCoverImage && setEditCoverImage(true)
-          }
-        >
-          <Avatar name={facilityData?.name ?? ""} square={true} />
-          {editCoverImageTooltip}
-        </div>
-      )}
+
+      <div
+        className={`group relative z-0 flex w-full shrink-0 items-center justify-center self-stretch md:hidden ${
+          hasPermissionToEditCoverImage && "cursor-pointer"
+        }`}
+        onClick={() => hasPermissionToEditCoverImage && setEditCoverImage(true)}
+      >
+        <Avatar
+          imageUrl={facilityData?.read_cover_image_url}
+          name={facilityData?.name ?? ""}
+        />
+        {editCoverImageTooltip}
+      </div>
       <div
         className={`bg-white ${
           hasCoverImage ? "rounded-b lg:rounded-t" : "rounded"
@@ -210,13 +193,13 @@ export const FacilityHome = ({ facilityId }: Props) => {
                     hasPermissionToEditCoverImage && setEditCoverImage(true)
                   }
                 >
-                  {hasCoverImage ? (
-                    <CoverImage />
-                  ) : (
-                    <div className="flex h-80 w-[88px] items-center justify-center rounded-lg bg-secondary-200 font-medium text-secondary-700 lg:h-80 lg:w-80">
-                      <Avatar name={facilityData?.name ?? ""} square={true} />
-                    </div>
-                  )}
+                  <div className="flex h-80 w-[88px] items-center justify-center rounded-lg font-medium text-secondary-700 lg:h-80 lg:w-80">
+                    <Avatar
+                      imageUrl={facilityData?.read_cover_image_url}
+                      name={facilityData?.name ?? ""}
+                    />
+                  </div>
+
                   {editCoverImageTooltip}
                 </div>
                 <div className="mb-6 grid gap-4 md:mb-0">
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 5259909beb..7d49ffdaad 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -494,7 +494,7 @@ export const PatientManager = () => {
 
       const children = (
         <div
-          className={`ring/0 hover:ring/100 group relative h-full w-full rounded-lg bg-white p-4 pl-5 text-black shadow transition-all duration-200 ease-in-out hover:pl-5 ${categoryClass}-ring overflow-hidden`}
+          className={`ring/0 hover:ring/100 group relative h-full w-full rounded-lg border border-secondary-300 bg-white p-4 pl-5 text-black transition-all duration-200 ease-in-out hover:border-secondary-400 hover:pl-5 ${categoryClass}-ring overflow-hidden`}
         >
           <div
             className={`absolute inset-y-0 left-0 flex h-full w-1 items-center rounded-l-lg transition-all duration-200 ease-in-out group-hover:w-5 ${categoryClass}`}
@@ -543,10 +543,9 @@ export const PatientManager = () => {
               ) : (
                 <div className="flex items-center justify-center">
                   <Avatar
-                    className="size-10 md:size-auto"
-                    name={patient.name!}
-                    square={true}
+                    name={patient.name || ""}
                     colors={["#F9FAFB", "#BFB8CB"]}
+                    className="border-0 border-b border-b-secondary-300"
                   />
                 </div>
               )}
diff --git a/src/Locale/en.json b/src/Locale/en.json
index a7c2d1a0c2..d4808fa185 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -642,6 +642,7 @@
   "litres_per_day": "Litres/day",
   "live": "Live",
   "live_monitoring": "Live Monitoring",
+  "live_patients_total_beds": "Live Patients / Total beds",
   "load_more": "Load More",
   "loading": "Loading...",
   "local_body": "Local body",
@@ -732,6 +733,7 @@
   "nursing_care": "Nursing Care",
   "nursing_information": "Nursing Information",
   "nutrition": "Nutrition",
+  "occupancy": "Occupancy",
   "occupation": "Occupation",
   "on": "On",
   "ongoing_medications": "Ongoing Medications",
@@ -1036,6 +1038,7 @@
   "view": "View",
   "view_abdm_records": "View ABDM Records",
   "view_asset": "View Assets",
+  "view_cns": "View CNS",
   "view_details": "View Details",
   "view_faciliy": "View Facility",
   "view_patients": "View Patients",