diff --git a/frontend/components/global/Footer.vue b/frontend/components/global/Footer.vue
index 84a6adb..4d8e724 100644
--- a/frontend/components/global/Footer.vue
+++ b/frontend/components/global/Footer.vue
@@ -12,7 +12,7 @@
         /> -->
 
         <ClientOnly>
-            <div class="absolute top-0 w-full max-md:scale-200 origin-top">
+            <div class="absolute top-0 w-full max-md:scale-300 origin-top mask-b-from-0%">
                 <LightRays
                     rays-color="#007bff"
                     :rays-speed="1.75"
@@ -21,7 +21,7 @@
         </ClientOnly>
 
         <div class="flex flex-col gap-4 items-center justify-center relative z-20">
-            <div class="flex items-center flex-col gap-8 pb-[10px] pt-[80px] lg:pt-[100px] lg:pb-[50px] justify-center">
+            <div class="flex items-center flex-col gap-8 pb-2.5 pt-20 lg:pt-25 lg:pb-12.5 justify-center">
                 <img
                     src="/img/heymlz/heymlz-small-idle.gif"
                     loading="lazy"
@@ -46,7 +46,7 @@
                     <div class="flex items-center gap-4 mt-6 max-lg:justify-center">
                         <NuxtLink
                             to="#"
-                            class="flex-center size-[1.5rem]"
+                            class="flex-center size-6"
                         >
                             <Icon
                                 name="ci:instagram"
@@ -56,7 +56,7 @@
                         </NuxtLink>
                         <NuxtLink
                             to="#"
-                            class="flex-center size-[1.5rem]"
+                            class="flex-center size-6"
                         >
                             <Icon
                                 name="ci:facebook"
@@ -66,7 +66,7 @@
                         </NuxtLink>
                         <NuxtLink
                             to="#"
-                            class="flex-center size-[1.5rem]"
+                            class="flex-center size-6"
                         >
                             <Icon
                                 name="ci:tiktok"
@@ -76,7 +76,7 @@
                         </NuxtLink>
                         <NuxtLink
                             to="#"
-                            class="flex-center size-[1.5rem]"
+                            class="flex-center size-6"
                         >
                             <Icon
                                 name="ci:youtube"
diff --git a/frontend/components/global/SideDrawer.vue b/frontend/components/global/SideDrawer.vue
index 9bb0fae..9f841a2 100644
--- a/frontend/components/global/SideDrawer.vue
+++ b/frontend/components/global/SideDrawer.vue
@@ -38,7 +38,7 @@ watch(
     () => route.fullPath,
     () => {
         closeSideDrawer();
-    }
+    },
 );
 </script>
 
@@ -88,14 +88,17 @@ watch(
                 v-else
                 to="/signin"
                 class="w-full flex items-center justify-between gap-4 p-2 transition-all"
-                active-class="bg-black rounded-md text-white **:stroke-white"
+                active-class="bg-black rounded-md text-white"
             >
                 <div class="flex items-center gap-3">
-                    <div class="size-5 flex-center">
-                        <Icon
+                    <div class="size-6 flex-center">
+                        <!-- <Icon
                             name="ci:profile"
                             size="18"
                             class="**:stroke-black"
+                        /> -->
+                        <NuxtImg
+                            src="/img/mobile-drawer/profile.gif"
                         />
                     </div>
 
@@ -132,14 +135,12 @@ watch(
             <NuxtLink
                 to="/cart"
                 class="w-full flex items-center justify-between gap-4 p-2 transition-all"
-                active-class="bg-black rounded-md text-white **:stroke-white"
+                active-class="bg-black rounded-md text-white"
             >
                 <div class="flex items-center gap-3">
-                    <div class="size-5 flex-center">
-                        <Icon
-                            name="ci:cart"
-                            size="19"
-                            class="**:stroke-black"
+                    <div class="size-6 flex-center">
+                        <NuxtImg
+                            src="/img/mobile-drawer/cart.gif"
                         />
                     </div>
                     <span class="text-xs"> سبد خرید </span>
@@ -158,14 +159,18 @@ watch(
                 :key="index"
                 :to="link.path"
                 class="w-full flex items-center justify-between gap-3 p-2 transition-all"
-                active-class="bg-black rounded-md text-white **:stroke-white"
+                active-class="bg-black rounded-md text-white [&_.drawer-item-icon]:invert"
             >
                 <div class="flex items-center gap-3">
-                    <div class="size-5 flex-center">
-                        <Icon
+                    <div class="size-6 flex-center">
+                        <!-- <Icon
                             :name="link.icon"
                             size="18"
                             class="**:stroke-black"
+                        /> -->
+                        <NuxtImg
+                            :src="link.icon"
+                            class="drawer-item-icon"
                         />
                     </div>
                     <span class="text-xs"> {{ link.title }}</span>
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index 1d02863..d30e85d 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -109,22 +109,22 @@ export const NAV_LINKS = [
     {
         title: "خانه",
         path: "/",
-        icon: "ci:home",
+        icon: "/img/mobile-drawer/home.gif",
     },
     {
         title: "محصولات",
         path: "/products",
-        icon: "ci:airdrop",
+        icon: "/img/mobile-drawer/products.gif",
     },
     {
         title: "دسته بندی ها",
         path: "/category",
-        icon: "ci:delivery-boxes",
+        icon: "/img/mobile-drawer/category.gif",
     },
     {
         title: "ارتباط با ما",
         path: "/contact-us",
-        icon: "ci:call",
+        icon: "/img/mobile-drawer/contact.gif",
     },
 ];
 
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 4516b0c..153e429 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -26,10 +26,12 @@ if (response.isError) {
         <Hero class="mb-20 max-md:mt-[80px]" />
         <Preview />
         <ProductsShowcase class="lg:mb-12" />
-        <ProductsGrid
+        <div class="py-[5rem]">
+            <ProductsSlider
             title="محصولات پرفروش"
             :products="homeData!.products"
         />
+        </div>
         <Categories class="mt-12" />
         <Brands />
         <LatestStories class="mb-20" />
diff --git a/frontend/public/img/mobile-drawer/cart.gif b/frontend/public/img/mobile-drawer/cart.gif
new file mode 100644
index 0000000..6d05f2b
Binary files /dev/null and b/frontend/public/img/mobile-drawer/cart.gif differ
diff --git a/frontend/public/img/mobile-drawer/category.gif b/frontend/public/img/mobile-drawer/category.gif
new file mode 100644
index 0000000..c837a13
Binary files /dev/null and b/frontend/public/img/mobile-drawer/category.gif differ
diff --git a/frontend/public/img/mobile-drawer/contact.gif b/frontend/public/img/mobile-drawer/contact.gif
new file mode 100644
index 0000000..bf9854c
Binary files /dev/null and b/frontend/public/img/mobile-drawer/contact.gif differ
diff --git a/frontend/public/img/mobile-drawer/home.gif b/frontend/public/img/mobile-drawer/home.gif
new file mode 100644
index 0000000..024f6c6
Binary files /dev/null and b/frontend/public/img/mobile-drawer/home.gif differ
diff --git a/frontend/public/img/mobile-drawer/products.gif b/frontend/public/img/mobile-drawer/products.gif
new file mode 100644
index 0000000..c6d269a
Binary files /dev/null and b/frontend/public/img/mobile-drawer/products.gif differ
diff --git a/frontend/public/img/mobile-drawer/profile.gif b/frontend/public/img/mobile-drawer/profile.gif
new file mode 100644
index 0000000..e5790e0
Binary files /dev/null and b/frontend/public/img/mobile-drawer/profile.gif differ