diff --git a/( b/(
deleted file mode 100644
index e69de29..0000000
diff --git a/components/LandingPage/CategoriesHero/page.jsx b/components/LandingPage/CategoriesHero/page.jsx
index 38349da..bff80ac 100644
--- a/components/LandingPage/CategoriesHero/page.jsx
+++ b/components/LandingPage/CategoriesHero/page.jsx
@@ -6,161 +6,85 @@ import see from "../../../public/images/3.png";
 import chr from "../../../public/images/4.png";
 import png from "../../../public/images/5.png";
 import shs from "../../../public/images/6.png";
+import back1 from "../../../public/images/back1.jpg";
+import back2 from "../../../public/images/back2.jpg";
+import back3 from "../../../public/images/back3.jpg";
+import back4 from "../../../public/images/back4.jpg";
+import back5 from "../../../public/images/back5.jpg";
 import React from "react";
+import PersianNumber from "plugins/PersianNumber";
 
 const CategoriesHero = () => {
+  const categories = [
+    {
+      name: "مراقبت پوست",
+      url: "/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت%20پوست",
+      products: 300,
+      brands: 20,
+      image: back1,
+    },
+    {
+      name: "آرایش لب",
+      url: "/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e/آرایش%20لب",
+      products: 30,
+      brands: 5,
+      image: back2,
+    },
+    {
+      name: "بهداشت جنسی",
+      url: "/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت%20جنسی",
+      products: 200,
+      brands: 10,
+      image: back3,
+    },
+    {
+      name: "کرم پودر",
+      url: "/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63/کرم%20پودر",
+      products: 250,
+      brands: 10,
+      image: back5,
+    },
+    {
+      name: "آرایش ناخن",
+      url: "/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش%20ناخن",
+      products: 10,
+      brands: 2,
+      image: back4,
+    },
+  ];
   return (
-    <div className="flex xs:flex-wrap justify-center  mt-10">
-      <div className="xs:m-2 lg:m-0">
-        <Link
-          href={`/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت پوست`}
-        >
-          <div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px]  rounded-full mx-2">
-            {" "}
-            <div className="flex justify-center relative">
-              <div className="absolute w-full">
-                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
-                  <Image
-                    src={yek}
-                    alt="مراقبت پوست فروشگاه اینترنتی وسمه"
-                    property
-                    loading="eager"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="text-center">
-            <p className="mb-0 text-black text-sm mt-2">مراقبت پوست</p>
-          </div>
-        </Link>
-      </div>
+    <>
+      <div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-5 lg:px-20">
+        {categories.map((category, index) => (
+          <Link href={category.url} key={index}>
+            <div className="rounded-lg overflow-hidden relative h-64 group cursor-pointer">
+              {/* Image as a background */}
+              <div
+                className="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-105"
+                style={{ backgroundImage: `url(${category.image.src})` }}
+              ></div>
 
-      <div className="xs:m-2 lg:m-0">
-        <Link
-          href={`/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e/آرایش لب`}
-        >
-          <div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px]  rounded-full mx-2">
-            {" "}
-            <div className="flex justify-center relative">
-              <div className="absolute w-full">
-                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
-                  <Image
-                    src={doo}
-                    alt="آرایش لب فروشگاه اینترنتی وسمه"
-                    property
-                    loading="eager"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="text-center">
-            <p className="mb-0 text-black text-sm mt-2">آرایش لب</p>
-          </div>
-        </Link>
-      </div>
+              {/* Optional: Add a semi-transparent overlay for better text readability */}
+              <div className="absolute inset-0 bg-black opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
 
-      <div className="xs:m-2 lg:m-0">
-        <Link
-          href={`/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش ناخن`}
-        >
-          <div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2 group tr03">
-            {" "}
-            <div className="flex justify-center relative">
-              <div className="absolute w-full">
-                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px]  ">
-                  <Image
-                    src={see}
-                    alt="آرایش ناخن فروشگاه اینترنتی وسمه"
-                    property
-                    loading="eager"
-                  />{" "}
-                </div>
+              {/* Text overlay */}
+              <div className="absolute bottom-0 p-4 right-0 z-10">
+                <p className="text-white text-right font-bold text-lg">
+                  {category.name}
+                </p>
+                <p className="text-gray-300 text-right text-sm rtl">
+                  +
+                  <PersianNumber number={category.products} style={"mx-1"} />
+                  محصول |
+                  <PersianNumber number={category.brands} style={"mx-1"} />
+                  برند
+                </p>
               </div>
             </div>
-          </div>
-          <div className="text-center">
-            <p className="mb-0 text-black text-sm mt-2"> آرایش ناخن</p>
-          </div>
-        </Link>
+          </Link>
+        ))}
       </div>
-
-      <div className="xs:m-2 lg:m-0">
-        <Link
-          href={`/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت جنسی`}
-        >
-          <div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
-            {" "}
-            <div className="flex justify-center relative">
-              <div className="absolute w-full">
-                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
-                  <Image
-                    src={chr}
-                    alt="بهداشت جنسی فروشگاه اینترنتی وسمه"
-                    property
-                    loading="eager"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="text-center">
-            <p className="mb-0 text-black text-sm mt-2">بهداشت جنسی</p>
-          </div>
-        </Link>
-      </div>
-
-      <div className="xs:m-2 lg:m-0">
-        <Link
-          href={`/categories/2e11e55c-0941-49f8-9d22-dfa21088f639/آرایش چشم`}
-        >
-          <div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
-            {" "}
-            <div className="flex justify-center relative">
-              <div className="absolute w-full">
-                <div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
-                  <Image
-                    src={png}
-                    alt="آرایش چشم فروشگاه اینترنتی وسمه"
-                    property
-                    loading="eager"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="text-center">
-            <p className="mb-0 text-black text-sm mt-2">آرایش چشم</p>
-          </div>
-        </Link>
-      </div>
-
-      <div className="xs:m-2 lg:m-0">
-        <Link
-          href={`/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63/کرم پودر`}
-        >
-          <div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px]  rounded-full mx-2">
-            {" "}
-            <div className="flex justify-center relative">
-              <div className="absolute  w-full">
-                <div className="xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
-                  <Image
-                    src={shs}
-                    alt="کرم پودر فروشگاه اینترنتی وسمه"
-                    property
-                    loading="eager"
-                  />{" "}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="text-center">
-            <p className="mb-0 text-black text-sm mt-2">کرم پودر</p>
-          </div>
-        </Link>
-      </div>
-    </div>
+    </>
   );
 };
 
diff --git a/components/Navbar/page.jsx b/components/Navbar/page.jsx
index 85b3da0..3b9e0f9 100644
--- a/components/Navbar/page.jsx
+++ b/components/Navbar/page.jsx
@@ -436,7 +436,7 @@ const Navbar = ({ theme }) => {
                       <div className="absolute left-5 ">
                         <Image
                           src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${dataNav[navItemHover]?.mainImage}`}
-                          className=" !w-[250px] h-[250px]  rounded-xl object-cover  "
+                          className=" !w-[250px]   rounded-xl   "
                           width={600}
                           height={600}
                           alt={`${dataNav[navItemHover]?.name} وسمه`}
diff --git a/public/images/back1.jpg b/public/images/back1.jpg
new file mode 100644
index 0000000..aa66342
Binary files /dev/null and b/public/images/back1.jpg differ
diff --git a/public/images/back2.jpg b/public/images/back2.jpg
new file mode 100644
index 0000000..497fec8
Binary files /dev/null and b/public/images/back2.jpg differ
diff --git a/public/images/back3.jpg b/public/images/back3.jpg
new file mode 100644
index 0000000..a1b9522
Binary files /dev/null and b/public/images/back3.jpg differ
diff --git a/public/images/back4.jpg b/public/images/back4.jpg
new file mode 100644
index 0000000..714ec59
Binary files /dev/null and b/public/images/back4.jpg differ
diff --git a/public/images/back5.jpg b/public/images/back5.jpg
new file mode 100644
index 0000000..63ab40a
Binary files /dev/null and b/public/images/back5.jpg differ