diff --git a/app/component/ItemDoctor.js b/app/component/ItemDoctor.js
index ff97923..938d9eb 100644
--- a/app/component/ItemDoctor.js
+++ b/app/component/ItemDoctor.js
@@ -11,7 +11,7 @@ import ClockD from "@/components/icons/ClockD";
 import LikeD from "@/components/icons/LikeD";
 import PointD from "@/components/icons/PointD";
 
-function ItemDoctor({ doctor, loading, setDoctors }) {
+function ItemDoctor({ doctor, loading, setDoctors, priority = false }) {
   const handleLoading = () => {
     setDoctors((prevDoctors) =>
       prevDoctors.map((item) =>
@@ -33,6 +33,7 @@ function ItemDoctor({ doctor, loading, setDoctors }) {
             alt="image-doctor"
             src={doctor?.img?.[0]?.url || "/assets/images/user.png"}
             className="object-contain rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
+            priority={priority}
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
diff --git a/app/component/Logo.js b/app/component/Logo.js
index d1fac10..e05a070 100644
--- a/app/component/Logo.js
+++ b/app/component/Logo.js
@@ -13,7 +13,7 @@ function Logo({ isAbsolute, matchedCity }) {
           height={30}
           alt="logo"
         />
-        <p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold font-kalame">
+        <p className="text-[#526CAC] text-[14px] lg:text-[16px] font-bold">
           {matchedCity?.site_name || "نوبت ۷۲۴"}
         </p>
       </div>
diff --git a/app/globals.css b/app/globals.css
index 7a6b021..505889a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,116 +2,69 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Font Kalame */
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf);
-  font-weight: 100;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf);
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf);
-  font-weight: 300;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf);
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf);
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf);
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf);
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf);
-  font-weight: 800;
-}
-
-@font-face {
-  font-family: kalame;
-  src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf);
-  font-weight: 900;
-}
-
 /* Font Vazir */
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Thin.ttf);
   font-weight: 100;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-ExtraLight.ttf);
   font-weight: 200;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Light.ttf);
   font-weight: 300;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Regular.ttf);
   font-weight: 400;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Medium.ttf);
   font-weight: 500;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-SemiBold.ttf);
   font-weight: 600;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Bold.ttf);
   font-weight: 700;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-ExtraBold.ttf);
   font-weight: 800;
+  font-display: swap;
 }
 
 @font-face {
   font-family: vazir;
   src: url(../public/fonts/vazir/Vazirmatn-RD-FD-Black.ttf);
   font-weight: 900;
+  font-display: swap;
 }
 
 body {
@@ -121,7 +74,9 @@ body {
   background: #fafafa;
 }
 
-body * {
+/* transition-colors only on theme-sensitive elements, not every DOM node */
+.dark,
+[data-theme] {
   @apply transition-colors duration-500;
 }
 
@@ -147,9 +102,6 @@ html {
   border-radius: 20px;
 }
 
-.font-kalame {
-  font-family: kalame;
-}
 
 .auto-complete-selector .MuiInputBase-root svg path {
   stroke: #525252 !important;
@@ -164,7 +116,6 @@ html {
 }
 
 .bg-banner-home {
-  background: url(../public/assets/images/banner-home.png);
   position: relative;
 }
 
@@ -292,9 +243,6 @@ html {
     border-radius: 8px !important;
   }
 
-  .MuiModal-root div:nth-child(3) {
-    /* border-radius: 0 !important; */
-  }
 }
 
 /* Hidden Scroll */
diff --git a/app/layout.js b/app/layout.js
index 0436eaa..dbcaeb1 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -16,9 +16,7 @@ export async function generateMetadata() {
 
   const baseMetadata = {
     title: matchedCity ? matchedCity.title : "نوبت724",
-    description: matchedCity
-      ? matchedCity.description
-      : "نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید",
+    description: matchedCity?.description || "نوبت 724 - سیستم آنلاین نوبت‌دهی برای پزشکان و کلینیک‌ها. با استفاده از نوبت 724، به راحتی نوبت پزشکی خود را به صورت آنلاین رزرو کنید و از خدمات سریع و کارآمد ما بهره‌مند شوید",
     keywords: matchedCity
       ? matchedCity.keywords
       : "نوبت 724, نوبت دهی, رزرو نوبت, پزشک, پزشکی, کلینیک, بیمارستان, نوبت آنلاین, سیستم نوبت دهی, سیستم نوبت دهی آنلاین, سیستم نوبت دهی پزشکی, سیستم نوبت دهی کلینیک, سیستم نوبت دهی بیمارستان, سیستم نوبت دهی آنلاین پزشکی, سیستم نوبت دهی آنلاین کلینیک, سیستم نوبت دهی آنلاین بیمارستان",
@@ -62,7 +60,7 @@ export default function RootLayout({ children }) {
       <head>
         <meta
           name="viewport"
-          content="width=device-width,initial-scale=1,maximum-scale=1"
+          content="width=device-width,initial-scale=1"
         />
       </head>
       <ThemeRegistry>
diff --git a/components/doctors/listDoctors/index.js b/components/doctors/listDoctors/index.js
index 0bb1a07..67dc7d3 100644
--- a/components/doctors/listDoctors/index.js
+++ b/components/doctors/listDoctors/index.js
@@ -57,11 +57,12 @@ function ListDoctors({
       <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
         {doctors && doctors.length ? (
           <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
-            {doctors?.map((doctor) => (
+            {doctors?.map((doctor, idx) => (
               <ItemDoctor
                 key={doctor.id}
                 doctor={doctor}
                 loading={loading}
+                priority={idx < 3}
                 setDoctors={setDoctors}
               />
             ))}
diff --git a/components/home/FrequentSearches.js b/components/home/FrequentSearches.js
index d73b153..946c228 100644
--- a/components/home/FrequentSearches.js
+++ b/components/home/FrequentSearches.js
@@ -13,26 +13,25 @@ function FrequentSearches() {
       <div className="overflow-auto hidden-scroll flex justify-start max-w-[620px]">
         <ul className="flex items-center justify-start gap-[14px] pl-[14px]">
           {childrenList.map((item, idx) => (
-            <Link
-              key={item.id || idx}
-              href={{
-                pathname: "/doctors",
-                query: {
-                  specialty: item.name,
-                },
-              }}
-            >
-              <li>
+            <li key={item.id || idx}>
+              <Link
+                href={{
+                  pathname: "/doctors",
+                  query: {
+                    specialty: item.name,
+                  },
+                }}
+              >
                 <Button
                   variant="contained"
                   color="secondary"
-                  className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] 
+                  className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px]
                 !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
                 >
                   {item.name}
                 </Button>
-              </li>
-            </Link>
+              </Link>
+            </li>
           ))}
         </ul>
       </div>
diff --git a/components/home/TextHeader.js b/components/home/TextHeader.js
index 131709b..8b655b8 100644
--- a/components/home/TextHeader.js
+++ b/components/home/TextHeader.js
@@ -7,11 +7,11 @@ async function TextHeader() {
 
   return (
     <div className="z-[50]">
-      <h1 className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
+      <h1 className="text-[#F17732] text-center text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
         با {matchedCity?.site_name}
       </h1>
       <h2
-        className="text-[#525252] text-center mt-2.5 font-kalame text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px] 
+        className="text-[#525252] text-center mt-2.5 text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px]
             font-bold flex items-center gap-0.5 sm:gap-1 md:gap-2"
       >
         <div className="max-w-[18px] sm:max-w-[22px]">
diff --git a/components/home/index.js b/components/home/index.js
index 4d8d040..a0bd6e2 100644
--- a/components/home/index.js
+++ b/components/home/index.js
@@ -1,11 +1,19 @@
 // Components
+import Image from "next/image";
 import SearchBar from "./search";
 import TextHeader from "./TextHeader";
 import FrequentSearches from "./FrequentSearches";
 
 function HomePage() {
   return (
-    <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover md:!min-h-[115vh]">
+    <div className="bg-banner-home after:z-[2] md:!min-h-[115vh]">
+      <Image
+        src="/assets/images/banner-home.png"
+        alt=""
+        fill
+        priority
+        className="!object-cover !object-bottom -z-10"
+      />
       <div className="padding-responsive z-20 min-h-screen py-[120px] flex items-center justify-center flex-col gap-[40px]">
         <TextHeader />
         <SearchBar />
diff --git a/components/layout/footer/index.js b/components/layout/footer/index.js
index 90b6256..aef4e1e 100644
--- a/components/layout/footer/index.js
+++ b/components/layout/footer/index.js
@@ -122,6 +122,7 @@ function Footer({ matchedCity }) {
                 <Link
                   href={matchedCity?.socialMedia[item.name] || "/"}
                   className="min-h-fit"
+                  aria-label={item.name}
                 >
                   {item.icon}
                 </Link>
diff --git a/next.config.js b/next.config.js
index 365e829..0f990b8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,7 +3,6 @@ const nextConfig = {
   // Add other configurations below
   reactStrictMode: true,
   images: {
-    unoptimized: true,
     remotePatterns: [
       {
         protocol: 'https',