diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index 0e149ba..bd383d9 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -32,7 +32,12 @@ const megaMenuCategories = computed(() => {
                 subitems: item.subcategorys.map((item) => {
                     return {
                         title: item.name,
-                        link: item.slug,
+                        subitems: item.subcategorys.map((item) => {
+                            return {
+                                title: item.name,
+                                link: item.slug,
+                            };
+                        }),
                     };
                 }),
             };
diff --git a/frontend/components/global/MegaMenu.vue b/frontend/components/global/MegaMenu.vue
index 0843000..32c99e7 100644
--- a/frontend/components/global/MegaMenu.vue
+++ b/frontend/components/global/MegaMenu.vue
@@ -7,7 +7,10 @@ type Props = {
         title: string;
         subitems: {
             title: string;
-            link: string;
+            subitems: {
+                title: string;
+                link: string;
+            }[];
         }[];
     }[];
 };
@@ -157,14 +160,12 @@ onMounted(() => {
             />
 
             <div class="container relative z-10">
-                <div
-                    class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200"
-                >
+                <div class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200">
                     <div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8">
                         <button
                             v-for="(item, index) in items"
                             :key="item.title"
-                            class="text-black transition-all p-4 rounded-xl cursor-default text-start max-lg:text-sm"
+                            class="text-black transition-all p-4 rounded-xl cursor-default text-start text-sm max-lg:text-xs"
                             :class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
                             :id="`mega-menu-tab-${index}`"
                             @mouseenter="menuTabMouseEnter(index)"
@@ -188,17 +189,26 @@ onMounted(() => {
                                     // justifyContent: 'center',
                                 }"
                             >
-                                <NuxtLink
-                                    v-for="item in selectedItemSubItems"
-                                    :to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
-                                    @click="closeAfterNavigate"
-                                    class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all max-lg:text-sm"
+                                <template
+                                    v-for="mainItem in selectedItemSubItems"
+                                    :key="mainItem.title"
                                 >
-                                    <span class="truncate w-[90%] flex items-center gap-2">
+                                
+                                    <span class="text-primary px-4 py-2 flex items-center gap-2 text-sm max-lg:text-xs font-semibold">
                                         <span class="w-2 h-[3px] rounded-full bg-blue-400"> </span>
-                                        {{ item.title }}
+                                        {{ mainItem.title }}
                                     </span>
-                                </NuxtLink>
+                                    <NuxtLink
+                                        v-for="item in mainItem.subitems"
+                                        :to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
+                                        @click="closeAfterNavigate"
+                                        class="px-4 py-2 whitespace-nowrap h-fit text-slate-500/85 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all text-sm max-lg:text-xs"
+                                    >
+                                        <span class="truncate w-[90%]">
+                                            {{ item.title }}
+                                        </span>
+                                    </NuxtLink>
+                                </template>
                             </div>
                         </Transition>
                     </div>
diff --git a/frontend/components/global/ProductsGrid.vue b/frontend/components/global/ProductsGrid.vue
index 6af65f3..30723e8 100644
--- a/frontend/components/global/ProductsGrid.vue
+++ b/frontend/components/global/ProductsGrid.vue
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
                     :id="product.id"
                     :slug="product.slug"
                     :title="product.name"
-                    :picture="product.variants[0].images[0].image"
+                    :picture="product.image ?? product.variants[0].images[0].image"
                     :colors="product.colors"
                     :price="product.variants[0].price"
                     :rate="product.rating"
diff --git a/frontend/components/global/ServiceHighlights.vue b/frontend/components/global/ServiceHighlights.vue
index 6090dce..a864877 100644
--- a/frontend/components/global/ServiceHighlights.vue
+++ b/frontend/components/global/ServiceHighlights.vue
@@ -13,12 +13,12 @@ const highlights = ref<Highlight[]>([
     {
         icon: "/img/heymlz/footer-support.gif",
         title: "خدمات مشتری",
-        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما",
+        description: "پشتیبانی ویژه، راه‌حلی پایدار برای شما",
     },
     {
         icon: "/img/heymlz/footer-send.gif",
-        title: "ارسال سریع و رایگان",
-        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
+        title: "ارسال سریع و مطمئن",
+        description: "پردازش محصولات با سرعت بالا و ارسال مطمئن",
     },
     {
         icon: "/img/heymlz/footer-share.gif",
diff --git a/frontend/components/global/product-detail/ProductsSlider.vue b/frontend/components/global/product-detail/ProductsSlider.vue
index d486ae1..f08954a 100644
--- a/frontend/components/global/product-detail/ProductsSlider.vue
+++ b/frontend/components/global/product-detail/ProductsSlider.vue
@@ -91,7 +91,7 @@ const onSwiper = (swiper: SwiperClass) => {
                         :id="product.id"
                         :slug="product.slug"
                         :title="product.name"
-                        :picture="product.variants[0].images[0].image"
+                        :picture="product.image ?? product.variants[0].images[0].image"
                         :colors="product.colors"
                         :price="product.variants[0].price"
                         :rate="product.rating"
diff --git a/frontend/components/product/ProductHero/index.vue b/frontend/components/product/ProductHero/index.vue
index 592b13c..325ff4d 100644
--- a/frontend/components/product/ProductHero/index.vue
+++ b/frontend/components/product/ProductHero/index.vue
@@ -77,14 +77,32 @@ watch(
 </script>
 
 <template>
-    <div class="flex max-lg:flex-col gap-12 xl:gap-16 container pt-[5rem] pb-28">
+    <div class="flex max-lg:flex-col lg:gap-12 xl:gap-16 container pt-[5rem] pb-28">
         <div class="flex flex-col gap-3 lg:hidden">
-            <NuxtLink
-                to="#"
-                class="typo-label-sm"
-            >
-                {{ product!.category.name }}
-            </NuxtLink>
+            <div class="flex items-center justify-between w-full">
+                <NuxtLink
+                    to="#"
+                    class="typo-label-sm"
+                >
+                    {{ product!.category.name }}
+                </NuxtLink>
+                <button
+                    @click="saveProductHandler"
+                    :disabled="isSaveProductPending || isFetchingPending || !token"
+                    class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
+                >
+                    <Icon
+                        v-if="isSaveProductPending || isFetchingPending"
+                        name="svg-spinners:180-ring-with-bg"
+                    />
+
+                    <Icon
+                        v-else
+                        :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
+                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'bi:bookmark'"
+                    />
+                </button>
+            </div>
             <h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2">
                 {{ product!.name }}
             </h1>
@@ -122,17 +140,17 @@ watch(
             v-model:selectedSlide="selectedSlide"
             :slides="selectedVariant!.images"
         />
-        <div class="lg:w-1/2 flex flex-col gap-3 lg:mt-12">
-            <div class="flex items-center justify-between w-full">
+        <div class="lg:w-1/2 flex flex-col gap-3 mt-12">
+            <div class="flex items-center justify-between w-full max-lg:hidden">
                 <NuxtLink
                     to="#"
-                    class="typo-label-sm max-lg:hidden"
-                >   
+                    class="typo-label-sm"
+                >
                     {{ product!.category.name }}
                 </NuxtLink>
                 <button
                     @click="saveProductHandler"
-                    :disabled="isSaveProductPending || isFetchingPending"
+                    :disabled="isSaveProductPending || isFetchingPending || !token"
                     class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
                 >
                     <Icon
@@ -189,7 +207,10 @@ watch(
                 />
             </div>
 
-            <ProductDescription :description="product!.description" />
+            <ProductDescription
+                class="max-lg:hidden"
+                :description="product!.description"
+            />
 
             <div class="flex items-center gap-4">
                 <span class="typo-md sm:typo-p-lg"> تنوع رنگی : </span>
@@ -305,6 +326,11 @@ watch(
 
                 <Share />
             </div>
+
+            <ProductDescription
+                class="lg:hidden"
+                :description="product!.description"
+            />
         </div>
     </div>
 </template>
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index a67d595..56f126e 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -37,7 +37,7 @@ export const API_ENDPOINTS = {
     },
     products: {
         get_all: "/products",
-        categories: "/products/categories",
+        categories: "/products/categories/v2",
         saved: "/accounts/favorites",
     },
     resellers_products: {
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index 0b400c9..bb10682 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -1,4 +1,4 @@
-export { };
+export {};
 
 declare global {
     type ApiPaginated<T> = {
@@ -105,9 +105,13 @@ declare global {
         category: SubCategory;
         colors: string[];
         added_to_favorites: boolean;
+        image: string | null;
     };
 
-    type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">;
+    type ProductListItem = Pick<
+        Product,
+        "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors" | "image"
+    >;
 
     type Article = {
         id: number;
@@ -156,6 +160,7 @@ declare global {
         image: string;
         product_count: number;
         parent: string;
+        subcategorys: SubCategory[];
     };
 
     type Address = {