diff --git a/frontend/components/global/CategoryCard.vue b/frontend/components/global/CategoryCard.vue
index ce29d50..9948f97 100644
--- a/frontend/components/global/CategoryCard.vue
+++ b/frontend/components/global/CategoryCard.vue
@@ -23,7 +23,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 </script>
 
 <template>
-    <div class="relative rounded-150 overflow-hidden w-full h-[500px] bg-white">
+    <div class="relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
         <img
             :id="`category-image-${id}`"
             class="absolute object-contain size-full"
diff --git a/frontend/components/global/ColorCircle.vue b/frontend/components/global/ColorCircle.vue
index 521f209..8d5e284 100644
--- a/frontend/components/global/ColorCircle.vue
+++ b/frontend/components/global/ColorCircle.vue
@@ -14,7 +14,7 @@ defineProps<Props>();
 
 <template>
     <div
-        class="size-[30px] ring ring-offset-1 rounded-full shadow-black/30 shadow-inner"
+        class="size-[25px] rounded-full shadow-black/30 shadow-inner"
         :class="selected ? 'ring-black' : 'ring-transparent'"
     />
 </template>
\ No newline at end of file
diff --git a/frontend/components/global/ComboBox.vue b/frontend/components/global/ComboBox.vue
index b49fe5e..ca7ddb6 100644
--- a/frontend/components/global/ComboBox.vue
+++ b/frontend/components/global/ComboBox.vue
@@ -57,13 +57,13 @@ watch(
                 class="!bg-transparent outline-none text-black h-full selection:bg-slate-100 placeholder-slate-400"
                 :placeholder="placeholder"
             />
-            <ComboboxTrigger>
+            <ComboboxTrigger class="cursor-pointer">
                 <Icon name="ci:chevron-down" class="size-5" />
             </ComboboxTrigger>
         </ComboboxAnchor>
 
         <ComboboxContent
-            class="absolute z-10 w-full mt-1.5 bg-slate-50 overflow-hidden rounded-xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
+            class="absolute z-10 w-full mt-4 bg-slate-50 overflow-hidden rounded-xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
         >
             <ComboboxViewport class="p-[1rem]">
                 <ComboboxEmpty
@@ -74,29 +74,35 @@ watch(
                     <ComboboxGroup>
                         <ComboboxSeparator
                             v-if="index !== 0"
-                            class="h-[1px] bg-slate-200 m-[1rem]"
+                            class="h-6"
                         />
 
                         <ComboboxLabel
-                            class="px-[1.2rem] w-full text-sm bg-black text-white rounded-full leading-[25px] py-1.5"
+                            class="flex items-center justify-between px-[1.2rem] w-full text-md text-black font-bold bg-slate-200/50 leading-[25px] py-3 rounded-lg"
                         >
-                            {{ group.name }}
+                            <span>
+                                {{ group.name }}
+                            </span>
+                            <Icon name="ci:delivery-boxes" size="18px"/>
                         </ComboboxLabel>
 
                         <ComboboxItem
                             v-for="option in group.children"
                             :key="option.name"
                             :value="option.name"
-                            class="text-sm leading-none text-black/90 my-1.5 rounded-full hover:!bg-slate-200 flex items-center py-2.5 px-[1.2rem] relative select-none data-[disabled]:text-slate-50 data-[disabled]:pointer-events-none"
+                            class="text-sm cursor-pointer leading-none text-slate-700 my-1.5 rounded-md hover:bg-slate-200/25 flex items-center py-2.5 px-[1.2rem] relative select-none data-[disabled]:text-slate-50 data-[disabled]:pointer-events-none"
                         >
                             <ComboboxItemIndicator
                                 class="absolute left-3 w-[25px] inline-flex items-center justify-center"
                             >
                                 <Icon name="ci:checkmark" size="18" />
                             </ComboboxItemIndicator>
-                            <span>
-                                {{ option.name }}
-                            </span>
+                            <div class="flex items-center gap-2">
+                                <Icon name="ci:minus" class="opacity-50"/>
+                                <span>
+                                     {{ option.name }}
+                                 </span>
+                            </div>
                         </ComboboxItem>
                     </ComboboxGroup>
                 </template>
diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index 73d0106..45e1d1e 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -3,7 +3,6 @@
 
 import useGetAccount from "~/composables/api/account/useGetAccount";
 import { useAuth } from "~/composables/api/auth/useAuth";
-import useBaseUrl from "~/composables/global/useBaseUrl";
 
 // types
 
@@ -16,7 +15,6 @@ type NavLink = {
 
 const { data: account } = useGetAccount();
 const { logout } = useAuth();
-const baseUrl = useBaseUrl();
 
 const nav_links = ref<NavLink[]>([
     {
@@ -53,18 +51,22 @@ const nav_links = ref<NavLink[]>([
                         v-if="!!account"
                         :title="account.first_name + ' ' + account.last_name"
                         @click="() => logout(true)"
-                        class="size-[1.5rem] relative overflow-hidden rounded-full bg-slate-300"
+                        class="size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full bg-slate-300"
                     >
-                        <img :src="baseUrl + account.profile_photo" alt="" />
+                        <img
+                            class="absolute object-cover size-full"
+                            :src="account.profile_photo"
+                            :alt="account.first_name + ' ' + account.last_name"
+                        />
                     </button>
                     <NuxtLink to="/signin" v-else class="flex-center">
-                        <Icon name="ci:profile" size="20px" class="**:stroke-black" />
+                        <Icon name="ci:profile" size="24px" class="**:stroke-black" />
                     </NuxtLink>
                     <button class="flex-center">
-                        <Icon name="ci:search" size="18px" class="**:stroke-black" />
+                        <Icon name="ci:search" size="21px" class="**:stroke-black" />
                     </button>
                     <button class="flex-center">
-                        <Icon name="ci:cart" size="20px" class="**:stroke-black" />
+                        <Icon name="ci:cart" size="24px" class="**:stroke-black" />
                     </button>
                 </div>
 
@@ -82,7 +84,16 @@ const nav_links = ref<NavLink[]>([
             </div>
 
             <div>
-                LOGO
+                <svg xmlns="http://www.w3.org/2000/svg" height="23" fill="none" viewBox="0 0 220 40">
+                    <path
+                        fill="#0E1534"
+                        d="M20 40c11.046 0 20-8.954 20-20V6a6 6 0 0 0-6-6H21v8.774c0 2.002.122 4.076 1.172 5.78a9.999 9.999 0 0 0 6.904 4.627l.383.062a.8.8 0 0 1 0 1.514l-.383.062a10 10 0 0 0-8.257 8.257l-.062.383a.8.8 0 0 1-1.514 0l-.062-.383a10 10 0 0 0-4.627-6.904C12.85 21.122 10.776 21 8.774 21H.024C.547 31.581 9.29 40 20 40Z"
+                    ></path>
+                    <path
+                        fill="#0E1534"
+                        d="M0 19h8.774c2.002 0 4.076-.122 5.78-1.172a10.018 10.018 0 0 0 3.274-3.274C18.878 12.85 19 10.776 19 8.774V0H6a6 6 0 0 0-6 6v13ZM46.455 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM211.711 12.104c5.591 0 8.289 3.905 8.289 8.428v8.495h-5.851V21.54c0-2.05-.748-3.742-2.893-3.742-2.145 0-2.86 1.692-2.86 3.742v7.486h-5.851V21.54c0-2.05-.715-3.742-2.861-3.742-2.145 0-2.893 1.692-2.893 3.742v7.486h-5.85v-8.495c0-4.523 2.697-8.428 8.288-8.428 3.056 0 5.266 1.204 6.274 3.189 1.072-1.985 3.413-3.19 6.208-3.19ZM180.427 23.82c1.885 0 2.698-1.725 2.698-3.776v-7.29h5.85v8.006c0 4.784-2.795 8.755-8.548 8.755-5.754 0-8.549-3.97-8.549-8.755v-8.006h5.851v7.29c0 2.05.812 3.776 2.698 3.776ZM163.275 29.547c-3.673 0-6.046-1.269-7.444-3.742l4.226-2.376c.585 1.041 1.462 1.562 2.925 1.562 1.203 0 1.755-.423 1.755-.944 0-1.985-8.581.033-8.581-6.28 0-3.06 2.6-5.533 7.021-5.533 3.868 0 5.981 1.887 6.924 3.71l-4.226 2.408c-.357-.976-1.463-1.562-2.568-1.562-.845 0-1.3.358-1.3.846 0 2.018 8.581.163 8.581 6.281 0 3.417-3.348 5.63-7.313 5.63ZM142.833 36.512h-5.851V20.858c0-4.98 3.738-8.592 8.939-8.592 5.071 0 8.939 3.873 8.939 8.592 0 5.207-3.446 8.657-8.614 8.657-1.203 0-2.405-.358-3.413-.912v7.909Zm3.088-12.497c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.124-3.088-3.124s-3.088 1.4-3.088 3.125c0 1.692 1.235 3.124 3.088 3.124ZM131.121 11.03c-1.918 0-3.51-1.595-3.51-3.515 0-1.92 1.592-3.515 3.51-3.515 1.918 0 3.511 1.595 3.511 3.515 0 1.92-1.593 3.515-3.511 3.515Zm-2.925 1.724h5.851v16.273h-5.851V12.754ZM116.97 29.515c-5.071 0-8.939-3.905-8.939-8.657 0-4.719 3.868-8.624 8.939-8.624s8.939 3.905 8.939 8.624c0 4.752-3.868 8.657-8.939 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM96.983 37c-4.03 0-6.956-1.79-8.451-4.98l4.843-2.603c.52 1.107 1.495 2.246 3.51 2.246 2.114 0 3.511-1.335 3.674-3.678-.78.684-2.016 1.204-3.868 1.204-4.519 0-8.16-3.482-8.16-8.364 0-4.718 3.869-8.559 8.94-8.559 5.201 0 8.939 3.613 8.939 8.592v6.444c0 5.858-4.064 9.698-9.427 9.698Zm.39-13.31c1.755 0 3.088-1.205 3.088-2.995 0-1.757-1.332-2.929-3.088-2.929-1.723 0-3.088 1.172-3.088 2.93 0 1.79 1.365 2.993 3.088 2.993ZM78.607 29.515c-5.071 0-8.94-3.905-8.94-8.657 0-4.719 3.869-8.624 8.94-8.624 5.07 0 8.939 3.905 8.939 8.624 0 4.752-3.869 8.657-8.94 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM59.013 7.06v16.434H68.7v5.533H58.2c-3.705 0-5.2-1.953-5.2-5.045V7.06h6.013Z"
+                    ></path>
+                </svg>
             </div>
 
         </div>
diff --git a/frontend/components/global/LoadingIndicator.vue b/frontend/components/global/LoadingIndicator.vue
new file mode 100644
index 0000000..b82349b
--- /dev/null
+++ b/frontend/components/global/LoadingIndicator.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+
+// state
+
+const nuxtApp = useNuxtApp();
+const isLoading = ref(false);
+
+// hook
+
+nuxtApp.hook("page:start", () => {
+    isLoading.value = true;
+});
+
+nuxtApp.hook("page:finish", () => {
+    isLoading.value = false;
+});
+
+</script>
+
+<template>
+    <Transition name="fade">
+        <div
+            v-if="isLoading"
+            class="h-[20px] flex items-center justify-center bg-black w-full left-0 top-0 fixed z-100"
+        >
+            <div class="absolute progress-indicator w-1/3 bg-white h-1 rounded-full"></div>
+        </div>
+    </Transition>
+</template>
+
+<style>
+
+.progress-indicator {
+    animation-name: progress;
+    animation-duration: 0.65s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes progress {
+    0% {
+        left: -50%;
+    }
+
+    100% {
+        left: 110%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/global/Rate.vue b/frontend/components/global/Rate.vue
index fdc5520..be6e1c4 100644
--- a/frontend/components/global/Rate.vue
+++ b/frontend/components/global/Rate.vue
@@ -1,6 +1,22 @@
+<script setup lang="ts">
+
+// type
+
+type Props = {
+    rate : number
+}
+
+// prop
+
+defineProps<Props>();
+
+</script>
+
 <template>
-    <div class="bg-white flex justify-center items-center gap-2 rounded-full border-[0.5px] border-slate-200 px-4 py-2 typo-p-sm">
-        <slot />
-        <Icon name="ci:star-solid" class="**:fill-warning-500 size-4.5" />
+    <div class="bg-white flex justify-center items-center gap-2 rounded-full border-[0.5px] border-slate-300 px-4 py-2 typo-p-sm">
+        <Icon name="ci:star-solid" class="**:fill-warning-400 size-4.5" />
+        <span class="mt-0.5">
+            {{ rate }}
+        </span>
     </div>
 </template>
\ No newline at end of file
diff --git a/frontend/components/global/ServiceHighlights.vue b/frontend/components/global/ServiceHighlights.vue
index fa7cf11..9206028 100644
--- a/frontend/components/global/ServiceHighlights.vue
+++ b/frontend/components/global/ServiceHighlights.vue
@@ -13,23 +13,23 @@ const highlights = ref<Highlight[]>([
     {
         icon: "ci:headset",
         title: "خدمات مشتری",
-        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار",
+        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما عزیزان"
     },
     {
         icon: "ci:delivery",
         title: "ارسال سریع و رایگان",
-        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
+        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار و خورده"
     },
     {
         icon: "ci:users",
         title: "معرفی به دوستان",
-        description: "دوستان خود را معرفی کنید و هر دو ۱۵٪ تخفیف بگیرید",
+        description: "دوستان خود را معرفی کنید و هر دو ۱۵٪ تخفیف بگیرید"
     },
     {
         icon: "ci:shield-done",
         title: "پرداخت امن",
-        description: "اطلاعات پرداخت شما به‌صورت امن پردازش می‌شود",
-    },
+        description: "اطلاعات پرداخت شما به‌صورت امن پردازش می‌شود"
+    }
 ]);
 </script>
 
@@ -38,13 +38,13 @@ const highlights = ref<Highlight[]>([
         <div class="w-full flex-center py-[5rem] gap-[1.25rem] container">
             <template v-for="(highlight, index) in highlights" :key="index">
                 <div class="flex flex-col-center gap-[.75rem] w-1/4 px-5">
-                    <div class="size-[1.5rem] flex-center">
-                        <Icon :name="highlight.icon" />
-                    </div>
+
+                    <Icon :name="highlight.icon" size="32px" />
+
                     <div class="w-full flex-col-center gap-[.25rem]">
-                    <span class="typo-sub-h-md text-black text-center">
-                        {{ highlight.title }}
-                    </span>
+                        <span class="typo-sub-h-md text-black text-center">
+                            {{ highlight.title }}
+                        </span>
                         <p class="text-slate-500 typo-p-sm mt-1 text-center">
                             {{ highlight.description }}
                         </p>
diff --git a/frontend/components/global/SideModal.vue b/frontend/components/global/SideModal.vue
index b1668f6..54107f9 100644
--- a/frontend/components/global/SideModal.vue
+++ b/frontend/components/global/SideModal.vue
@@ -54,7 +54,7 @@ watch(
 
                         <button
                             @click="isSideShow = !isSideShow"
-                            class="size-[3.5rem] -me-5 flex-center rounded-full cursor-pointer"
+                            class="cursor-pointer size-[3.5rem] -me-5 flex-center rounded-full"
                         >
                             <Icon
                                 name="ci:close"
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 8502fe1..d255779 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -29,12 +29,13 @@ const onSwiper = (swiper: SwiperClass) => {
 </script>
 
 <template>
-    <section class="flex flex-col gap-4 bg-black h-[110svh] mt-40 py-32">
+    <section class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40">
         <div class="w-full flex justify-center items-center">
             <span class="text-white typo-h-4">
                 دسته بندی ها
             </span>
         </div>
+
         <div class="w-full my-20 relative">
             <Swiper
                 :loop="true"
@@ -82,5 +83,14 @@ const onSwiper = (swiper: SwiperClass) => {
                 />
             </div>
         </div>
+
+        <div class="w-full flex justify-center items-center">
+            <NuxtLink to="/category">
+                <Button variant="solid" class="invert rounded-full px-8" end-icon="ci:arrow-left">
+                    مشاهده همه دسته ها
+                </Button>
+            </NuxtLink>
+        </div>
+
     </section>
 </template>
\ No newline at end of file
diff --git a/frontend/components/products/FilterButton.vue b/frontend/components/products/FilterButton.vue
index 74266ca..d5d6c04 100644
--- a/frontend/components/products/FilterButton.vue
+++ b/frontend/components/products/FilterButton.vue
@@ -5,8 +5,8 @@
         <template #button>
             <Button
                 end-icon="ci:filter"
-                variant="secondary"
-                class="rounded-full py-4 !bg-slate-100 !cursor-pointer"
+                variant="outlined"
+                class="rounded-full"
             >
                 فیلتر محصولات
             </Button>
diff --git a/frontend/composables/api/product/useGetCategories.ts b/frontend/composables/api/product/useGetCategories.ts
index 7170bc2..10b34aa 100644
--- a/frontend/composables/api/product/useGetCategories.ts
+++ b/frontend/composables/api/product/useGetCategories.ts
@@ -5,7 +5,7 @@ import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
 
 // types
 
-export type GetCategoriesResponse = { categories: Category[] };
+export type GetCategoriesResponse = Category[];
 
 const useGetCategories = () => {
 
@@ -17,7 +17,8 @@ const useGetCategories = () => {
 
     const handleGetCategories = async () => {
         const { data } = await axios.get<GetCategoriesResponse>(`${API_ENDPOINTS.products.categories}`);
-        return data.categories;
+        await new Promise(resolve => setTimeout(resolve, 5000));
+        return data;
     };
 
     return useQuery({
diff --git a/frontend/layouts/Default.vue b/frontend/layouts/Default.vue
index 3d5c39c..658121f 100644
--- a/frontend/layouts/Default.vue
+++ b/frontend/layouts/Default.vue
@@ -70,6 +70,9 @@ onServerPrefetch(async () => {
         class="w-full flex flex-col-center persian-number font-iran-yekan-x"
         dir="rtl"
     >
+
+        <LoadingIndicator />
+
         <Header />
         <main class="w-full overflow-x-hidden">
             <slot />
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 385145b..92ea721 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -3,24 +3,34 @@ export default defineNuxtConfig({
     compatibilityDate: "2024-11-01",
     ssr: true,
     devtools: { enabled: true },
-    css: ["~/assets/css/tailwind.css", "swiper/css"],
+    css: ["~/assets/css/tailwind.css", "swiper/css", "animate.css/animate.min.css"],
 
     routeRules: {
-        "/products": { prerender: false, ssr: false },
+        "/products": { prerender: false, ssr: false }
+    },
+
+    app: {
+        pageTransition: {
+            enterActiveClass:
+                "animate__animated animate__fadeIn animate__faster",
+            leaveActiveClass:
+                "animate__animated animate__fadeOut animate__faster",
+            mode: "out-in"
+        }
     },
 
     postcss: {
         plugins: {
             "@tailwindcss/postcss": {},
-            autoprefixer: {},
-        },
+            autoprefixer: {}
+        }
     },
 
     components: [
         {
             path: "~/components",
-            pathPrefix: false,
-        },
+            pathPrefix: false
+        }
     ],
 
     icon: {
@@ -28,9 +38,9 @@ export default defineNuxtConfig({
         customCollections: [
             {
                 prefix: "ci",
-                dir: "./public/icons",
-            },
-        ],
+                dir: "./public/icons"
+            }
+        ]
     },
 
     modules: [
@@ -41,9 +51,9 @@ export default defineNuxtConfig({
                     "DM Sans": "100..900",
                     Inter: "100..900",
                     download: true,
-                    inject: false,
-                },
-            },
+                    inject: false
+                }
+            }
         ],
         "@nuxt/icon",
         "reka-ui/nuxt",
@@ -53,7 +63,7 @@ export default defineNuxtConfig({
 
     runtimeConfig: {
         public: {
-            API_BASE_URL: "https://api.heymlz.com",
-        },
-    },
+            API_BASE_URL: "https://api.heymlz.com"
+        }
+    }
 });
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0f47a9a..2fb8544 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/integrations": "^12.4.0",
         "@vueuse/nuxt": "^12.3.0",
+        "animate.css": "^4.1.1",
         "axios": "^1.7.9",
         "fast-average-color": "^9.4.0",
         "gsap": "^3.12.5",
@@ -3685,6 +3686,12 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 62449d0..5fada15 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/integrations": "^12.4.0",
     "@vueuse/nuxt": "^12.3.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.7.9",
     "fast-average-color": "^9.4.0",
     "gsap": "^3.12.5",
diff --git a/frontend/pages/category.vue b/frontend/pages/category.vue
index 218cae3..56ffa91 100644
--- a/frontend/pages/category.vue
+++ b/frontend/pages/category.vue
@@ -15,17 +15,18 @@ const debouncedSearch = refDebounced(search, 300);
 
 const filteredCategories = computed(() => {
     if (debouncedSearch.value.length > 0) {
-        return categories.value!.filter((cat) =>
+        return categories.value?.filter((cat) =>
             cat.name.includes(debouncedSearch.value)
         );
     }
 
-    return categories.value!;
+    return categories.value;
 });
 
-// lifecycle
+// ssr
+
+await useAsyncData(async () => {
 
-onServerPrefetch(async () => {
     const response = await suspense();
 
     if (response.isError) {
@@ -34,7 +35,8 @@ onServerPrefetch(async () => {
             statusMessage: `Error in categories page prefetch`,
         });
     }
-});
+})
+
 </script>
 
 <template>
@@ -42,7 +44,7 @@ onServerPrefetch(async () => {
         <div class="py-[5rem] flex gap-6 justify-between items-center">
             <span class="typo-h-3 text-black">دسته بندی ها</span>
             <Input
-                class="max-w-[400px] w-full"
+                class="max-w-[400px] w-full rounded-full"
                 variant="outlined"
                 placeholder="جستجو..."
                 v-model="search"
@@ -60,7 +62,7 @@ onServerPrefetch(async () => {
         </div>
         <Transition name="fade" mode="out-in">
             <div
-                v-if="filteredCategories.length !== 0"
+                v-if="filteredCategories?.length !== 0"
                 v-auto-animate
                 class="grid grid-cols-3 gap-4 w-full mt-12"
             >
@@ -69,7 +71,7 @@ onServerPrefetch(async () => {
                     :key="category.id"
                     :id="category.id"
                     :category="category.name"
-                    picture="/img/product-1.jpg"
+                    :picture="category.icon"
                     :count="20"
                     description="یک دسته بندی تستasdasd"
                     dark-layer
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 7506064..6431c26 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -8,9 +8,9 @@ import useHomeData from "~/composables/api/home/useHomeData";
 
 const { suspense } = useHomeData();
 
-// lifecycle
+// ssr
 
-onServerPrefetch(async () => {
+await useAsyncData(async () => {
     const response = await suspense();
 
     if (response.isError) {
diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index f6bf05e..3050e6c 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
 // import
 
 import useGetProducts, {
@@ -65,15 +66,26 @@ watch(
                     <span>/</span>
                     <span>همه</span>
                 </div> -->
-                <h1 class="typo-h-3">همه محصولات</h1>
+                <h1 class="typo-h-3">لیست محصولات</h1>
             </div>
 
             <div class="w-full flex items-center justify-end gap-4">
                 <Input
                     placeholder="جست و جو محصول ..."
                     v-model="search"
-                    class="bg-slate-50 !border-slate-200 hover:border-slate-300 focus:!border-slate-800 !rounded-full w-8/12"
-                />
+                    variant="outlined"
+                    class="rounded-full w-8/12"
+                >
+                    <template #endItem>
+                        <div class="flex items-center gap-1">
+                            <Icon
+                                class="translate-y-[-1px]"
+                                name="ci:search"
+                                size="24"
+                            />
+                        </div>
+                    </template>
+                </Input>
                 <FilterButton />
             </div>
         </div>
@@ -101,17 +113,18 @@ watch(
             <ul v-else class="w-full grid grid-cols-3 gap-[1.5rem]">
                 <li v-for="(product, index) in products" :key="index">
                     <ProductCard
-                        brand="Samsung"
+                        :id="product.id"
+                        brand="برند محصول"
                         :title="product.name"
-                        picture="/assets/img/product-1.jpg"
-                        :colors="['#0000ff', '#00ff00', 'red']"
+                        :picture="product.image1"
+                        :colors="['white', 'black']"
                         :price="product.price"
                         :rate="product.rating"
-                        tag="New"
+                        :dark-layer="true"
                     />
                 </li>
             </ul>
-            <div class="w-full flex-center py-10">
+            <div v-if="products!.length > 10" class="w-full flex-center py-10">
                 <Pagination :items="paginationData" :total="data?.count" />
             </div>
         </div>
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index 147e603..3100cff 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -51,9 +51,21 @@ declare global {
         meta_title: string;
         meta_description: string;
         parent: number;
-        children: "string";
+        "product_count": string,
+        "subcategorys": SubCategory[]
     };
 
+    type SubCategory = {
+        "id": number,
+        "name": string,
+        "slug": string,
+        "icon": string,
+        "meta_title": string,
+        "meta_description": string,
+        "product_count": string,
+        "show": boolean
+    }
+
     type Address = {
         id: number;
         province: string;