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/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 = {