diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index bd383d9..707273d 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -92,11 +92,15 @@ const megaMenuCategories = computed(() => {
                     >
                         <NuxtLink
                             to="/signin"
-                            class="flex-center"
+                            class="flex-center header-navbar-item"
                         >
-                            <Icon
+                            <!-- <Icon
                                 name="ci:profile"
                                 class="**:stroke-black size-5 lg:size-6 header-navbar-item"
+                            /> -->
+                            <NuxtImg
+                                src="/img/navbar/profile.gif"
+                                class="size-7 lg:size-8 mt-0.5"
                             />
                         </NuxtLink>
                     </Tooltip>
@@ -105,21 +109,29 @@ const megaMenuCategories = computed(() => {
                             to="/products"
                             class="flex-center header-navbar-item"
                         >
-                            <Icon
+                            <!-- <Icon
                                 name="ci:search"
                                 class="**:stroke-black size-4.5 lg:size-[21px]"
+                            /> -->
+                            <NuxtImg
+                                src="/img/navbar/search.gif"
+                                class="size-7 lg:size-8 mt-0.5"
                             />
                         </NuxtLink>
                     </Tooltip>
                     <Tooltip title="سبد خرید">
                         <NuxtLink
                             to="/cart"
-                            class="flex-center"
+                            class="flex-center header-navbar-item"
                         >
                             <button class="relative">
-                                <Icon
+                                <!-- <Icon
                                     name="ci:cart"
                                     class="**:stroke-black size-5 lg:size-6 header-navbar-item"
+                                /> -->
+                                <NuxtImg
+                                    src="/img/navbar/cart.gif"
+                                    class="size-7 lg:size-8"
                                 />
 
                                 <div
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 2ab977a..68a066d 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -83,6 +83,20 @@ const onSlideChange = (swiper: SwiperClass) => {
                         centeredSlides: true,
                         slidesPerView: 3.65,
                     },
+                    2000: {
+                        coverflowEffect: {
+                            stretch: -100,
+                        },
+                        centeredSlides: true,
+                        slidesPerView: 4,
+                    },
+                    3000: {
+                        coverflowEffect: {
+                            stretch: -100,
+                        },
+                        centeredSlides: true,
+                        slidesPerView: 6,
+                    },
                 }"
             >
                 <SwiperSlide
diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index e2fe4ff..a831af3 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -72,7 +72,7 @@ watch(
 </script>
 
 <template>
-    <div class="container select-none mb-40 lg:mb-40 max-lg:mt-20 lg:-mt-32">
+    <div class="container select-none mb-40 lg:mb-40 max-lg:mt-20 lg:-mt-32 3xl:mb-85">
         <div>
             <div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
                 <span class="typo-p-sm md:typo-p-md text-slate-500"> مقایسه محصولات </span>
@@ -80,7 +80,7 @@ watch(
             </div>
             <div
                 ref="previewContainerEl"
-                class="rounded-200 overflow-hidden h-[70svh] relative"
+                class="rounded-200 overflow-hidden h-[70svh] max-h-200 relative"
             >
                 <Transition name="fade">
                     <NuxtImg
diff --git a/frontend/components/home/ProductsShowcase.vue b/frontend/components/home/ProductsShowcase.vue
index 51cc37c..5b08701 100644
--- a/frontend/components/home/ProductsShowcase.vue
+++ b/frontend/components/home/ProductsShowcase.vue
@@ -89,7 +89,7 @@ const childImageVariants = {
 </script>
 
 <template>
-    <section class="relative z-[999] h-[115svh] min-h-[1000px] pb-20 bg-black overflow-y-hidden flex-center">
+    <section class="relative z-[999] h-[115svh] min-h-[1000px] max-h-350 pb-20 bg-black overflow-y-hidden flex-center">
         <AnimatePresence mode="popLayout">
             <template
                 v-for="(slide, index) in homeData!.show_case_slider"
diff --git a/frontend/public/img/navbar/cart.gif b/frontend/public/img/navbar/cart.gif
new file mode 100644
index 0000000..6d05f2b
Binary files /dev/null and b/frontend/public/img/navbar/cart.gif differ
diff --git a/frontend/public/img/navbar/profile.gif b/frontend/public/img/navbar/profile.gif
new file mode 100644
index 0000000..e5790e0
Binary files /dev/null and b/frontend/public/img/navbar/profile.gif differ
diff --git a/frontend/public/img/navbar/search.gif b/frontend/public/img/navbar/search.gif
new file mode 100644
index 0000000..d0c9153
Binary files /dev/null and b/frontend/public/img/navbar/search.gif differ