diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index 17ba187..9fee44b 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -150,9 +150,12 @@ watch(
                     </div>
                 </div>
 
-                <span class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black">
+                <NuxtLink
+                    :to="`product/${data.product.id}`"
+                    class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black underline underline-offset-2"
+                >
                     {{ data.product.title }}
-                </span>
+                </NuxtLink>
 
                 <div class="flex items-center justify-start gap-1.5">
                     <div
diff --git a/frontend/components/global/Brands.vue b/frontend/components/global/Brands.vue
index 569db9a..370b2d5 100644
--- a/frontend/components/global/Brands.vue
+++ b/frontend/components/global/Brands.vue
@@ -12,11 +12,9 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <div class="relative w-full flex flex-col justify-center min-h-[450px] h-svh">
+    <div class="relative w-full flex flex-col justify-center py-32 lg:py-48">
         <div class="flex-col-center gap-6 mb-24 sm:mb-32 container">
-            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
-                مجله در ستون و سطرآنچ
-            </span>
+            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> مجله در ستون و سطرآنچ </span>
             <p class="text-slate-500 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl">
                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
                 متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
@@ -30,13 +28,19 @@ const {} = toRefs(props);
                     <div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
                         HEYMLZ
                     </div>
-                    <NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[25px] sm:h-[45px] invert opacity-85" />
+                    <NuxtImg
+                        src="/img/heymlz/heymlz-logo.png"
+                        class="h-[25px] sm:h-[45px] invert opacity-85"
+                    />
                 </template>
                 <template v-for="i in 10">
                     <div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
                         HEYMLZ
                     </div>
-                    <NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[25px] sm:h-[45px] invert opacity-85" />
+                    <NuxtImg
+                        src="/img/heymlz/heymlz-logo.png"
+                        class="h-[25px] sm:h-[45px] invert opacity-85"
+                    />
                 </template>
             </div>
         </div>
@@ -46,32 +50,104 @@ const {} = toRefs(props);
                 class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
             >
                 <template v-for="i in 1">
-                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
+                    <NuxtImg
+                        src="/img/brands/brand-1.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-2.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-3.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-4.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-5.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-6.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-1.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-2.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-3.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-4.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-5.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-6.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
                 </template>
                 <template v-for="i in 1">
-                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
-                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
+                    <NuxtImg
+                        src="/img/brands/brand-1.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-2.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-3.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-4.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-5.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-6.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-1.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-2.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-3.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-4.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-5.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
+                    <NuxtImg
+                        src="/img/brands/brand-6.png"
+                        class="h-[25px] sm:h-[45px]"
+                    />
                 </template>
             </div>
         </div>
diff --git a/frontend/components/global/DataField.vue b/frontend/components/global/DataField.vue
index 75e8fae..fb13443 100644
--- a/frontend/components/global/DataField.vue
+++ b/frontend/components/global/DataField.vue
@@ -18,10 +18,16 @@ withDefaults(defineProps<Props>(), {
 <template>
     <div class="w-full flex flex-col gap-2">
         <div class="flex items-center gap-1 ps-2">
-            <label :for="id" class="typo-label-xs lg:typo-label-sm">{{
-                label
-            }}</label>
-            <span v-if="!!required && required" class="text-danger-600">*</span>
+            <label
+                :for="id"
+                class="typo-label-xs lg:typo-label-sm"
+                >{{ label }}</label
+            >
+            <span
+                v-if="!!required && required"
+                class="text-danger-600"
+                >*</span
+            >
         </div>
         <slot />
         <div
diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index 9ae43bc..06097a3 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -123,7 +123,7 @@ const isHomePage = computed(() => route.path === "/");
 
             <div class="header-navbar-item flex items-center justify-end h-full">
                 <NuxtImg
-                    src="/logo/logo-row.png"
+                    src="/img/heymlz/heymlz-logomotion.gif"
                     class="h-2/3"
                 />
             </div>
diff --git a/frontend/components/global/SideDrawer.vue b/frontend/components/global/SideDrawer.vue
index bd434ff..9bb0fae 100644
--- a/frontend/components/global/SideDrawer.vue
+++ b/frontend/components/global/SideDrawer.vue
@@ -20,6 +20,8 @@ defineProps<Props>();
 const { token } = useAuth();
 const { data: account } = useGetAccount();
 
+const route = useRoute();
+
 // emit
 
 const emit = defineEmits(["update:modelValue"]);
@@ -29,13 +31,22 @@ const emit = defineEmits(["update:modelValue"]);
 const closeSideDrawer = () => {
     emit("update:modelValue", false);
 };
+
+// watch
+
+watch(
+    () => route.fullPath,
+    () => {
+        closeSideDrawer();
+    }
+);
 </script>
 
 <template>
     <Transition name="fade">
         <div
             v-if="modelValue"
-            class="md:hidden fixed inset-0 h-svh z-999 size-full bg-black/50 cursor-pointer"
+            class="md:hidden fixed inset-0 min-h-svh z-1001 size-full bg-black/50 cursor-pointer"
             @click="closeSideDrawer"
         />
     </Transition>
@@ -43,61 +54,127 @@ const closeSideDrawer = () => {
     <div
         @click.stop
         :class="modelValue ? 'translate-x-0' : 'translate-x-[100%]'"
-        class="md:hidden cursor-default flex top-0 right-0 fixed z-999 transition-all duration-500 rounded-e-xl flex-col bg-white w-[300px] h-full gap-8 pt-12"
+        class="md:hidden cursor-default flex top-0 right-0 fixed z-1002 transition-all duration-500 flex-col bg-white w-[300px] h-full px-4"
     >
-        <div class="flex items-center flex-col justify-end gap-[1.5rem]">
-            <Tooltip v-if="!!account && !!token" title="حساب کاربری">
-                <NuxtLink
-                    :to="{ name: 'profile' }"
-                    class="flex items-center justify-center"
-                >
-                    <Avatar
-                        class="!size-7"
-                        :src="account.profile_photo"
-                        :alt="
-                            account.first_name && account.last_name
-                                ? `${account.first_name.charAt(
-                                      0
-                                  )} ${account.last_name.charAt(0)}`
-                                : 'بدون نام کاربری'
-                        "
-                    />
-                </NuxtLink>
-            </Tooltip>
-            <Tooltip v-else title="ورود">
-                <NuxtLink to="/signin" class="flex-center">
-                    <Icon
-                        name="ci:profile"
-                        size="24px"
-                        class="**:stroke-black"
-                    />
-                </NuxtLink>
-            </Tooltip>
-            <Tooltip title="محصولات">
-                <NuxtLink to="/products" class="flex-center">
-                    <Icon
-                        name="ci:search"
-                        size="21px"
-                        class="**:stroke-black"
-                    />
-                </NuxtLink>
-            </Tooltip>
-            <Tooltip title="سبد خرید">
-                <NuxtLink to="/cart" class="flex-center">
-                    <Icon name="ci:cart" size="24px" class="**:stroke-black" />
-                </NuxtLink>
-            </Tooltip>
+        <div class="flex items-center flex-col justify-end gap-2 border-b border-slate-200 py-5">
+            <NuxtLink
+                v-if="!!account && !!token"
+                :to="{ name: 'profile' }"
+                class="w-full flex items-center justify-between gap-3 p-2 transition-all"
+                active-class="bg-black rounded-md text-white **:stroke-white"
+            >
+                <div class="flex items-center gap-3">
+                    <div class="size-5 flex-center">
+                        <Avatar
+                            class="!size-5"
+                            :src="account.profile_photo"
+                            :alt="
+                                account.first_name && account.last_name
+                                    ? `${account.first_name.charAt(0)} ${account.last_name.charAt(0)}`
+                                    : 'بدون نام کاربری'
+                            "
+                        />
+                    </div>
+                    <span class="text-xs"> {{ account.first_name }} {{ account.last_name }} </span>
+                </div>
+                <Icon
+                    name="bi:chevron-left"
+                    size="12"
+                    class="**:stroke-black/50 opacity-70"
+                />
+            </NuxtLink>
+
+            <NuxtLink
+                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"
+            >
+                <div class="flex items-center gap-3">
+                    <div class="size-5 flex-center">
+                        <Icon
+                            name="ci:profile"
+                            size="18"
+                            class="**:stroke-black"
+                        />
+                    </div>
+
+                    <span class="text-xs"> ورود به حساب </span>
+                </div>
+                <Icon
+                    name="bi:chevron-left"
+                    size="12"
+                    class="**:stroke-black/50 opacity-70"
+                />
+            </NuxtLink>
+            <!-- 
+            <NuxtLink
+                to="/products"
+                class="w-full flex items-center justify-between gap-4 p-2"
+                active-class="bg-black rounded-md text-white **:stroke-white"
+            >
+                <div class="flex items-center gap-3">
+                    <div class="size-5 flex-center">
+                        <Icon
+                            name="ci:search"
+                            size="18"
+                            class="**:stroke-black"
+                        />
+                    </div>
+                    <span class="text-xs"> جست و جو </span>
+                </div>
+                <Icon
+                    name="bi:chevron-left"
+                    size="12"
+                    class="**:stroke-black/50 opacity-70"
+                />
+            </NuxtLink> -->
+            <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"
+            >
+                <div class="flex items-center gap-3">
+                    <div class="size-5 flex-center">
+                        <Icon
+                            name="ci:cart"
+                            size="19"
+                            class="**:stroke-black"
+                        />
+                    </div>
+                    <span class="text-xs"> سبد خرید </span>
+                </div>
+                <Icon
+                    name="bi:chevron-left"
+                    size="12"
+                    class="**:stroke-black/50 opacity-70"
+                />
+            </NuxtLink>
         </div>
 
-        <nav
-            class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
-        >
+        <nav class="flex-center flex-col gap-2 typo-label-sm font-light text-black/80 py-5">
             <NuxtLink
                 v-for="(link, index) in NAV_LINKS"
                 :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"
             >
-                {{ link.title }}
+                <div class="flex items-center gap-3">
+                    <div class="size-5 flex-center">
+                        <Icon
+                            :name="link.icon"
+                            size="18"
+                            class="**:stroke-black"
+                        />
+                    </div>
+                    <span class="text-xs"> {{ link.title }}</span>
+                </div>
+                <Icon
+                    name="bi:chevron-left"
+                    size="12"
+                    class="**:stroke-black/50 opacity-70"
+                />
             </NuxtLink>
         </nav>
     </div>
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 858dceb..24d5c33 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -20,13 +20,13 @@ const onSwiper = (swiper: SwiperClass) => {
 <template>
     <section
         ref="sectionTarget"
-        class="flex flex-col justify-center gap-4 bg-black h-[110svh] sm:h-[150svh] relative overflow-hidden"
+        class="flex flex-col justify-center gap-4 bg-black sm:min-h-[110svh] relative overflow-hidden shrink-0 py-24 lg:py-32"
     >
-        <div class="w-full relative translate-y-[-55px] sm:translate-y-[-130px] flex-center z-10 container">
+        <div class="w-full relative flex-center z-10 container">
             <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4"> دسته بندی ها </span>
         </div>
 
-        <div class="w-full my-20 relative">
+        <div class="w-full mt-44 lg:mt-64 relative">
             <NuxtImg
                 class="aspect-square w-[240px] md:w-[300px] lg:w-[350px] translate-y-[-164px] md:translate-y-[-206px] lg:translate-y-[-240px] absolute left-1/2 -translate-x-1/2 z-10"
                 :style="{
@@ -89,7 +89,7 @@ const onSwiper = (swiper: SwiperClass) => {
             </div>
         </div>
 
-        <div class="w-full flex justify-center items-center">
+        <div class="w-full flex justify-center items-center mt-14">
             <NuxtLink to="/category">
                 <Button
                     variant="primary"
diff --git a/frontend/components/home/LatestStories.vue b/frontend/components/home/LatestStories.vue
index 85fbeb2..29f8ec2 100644
--- a/frontend/components/home/LatestStories.vue
+++ b/frontend/components/home/LatestStories.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // state
 
 import useGetArticles from "~/composables/api/blog/useGetArticles";
@@ -10,22 +9,24 @@ const { data: articles, suspense } = useGetArticles(page);
 // ssr
 
 await suspense();
-
 </script>
 
 <template>
-    <section class="mt-20 container">
+    <section class="container">
         <div class="flex items-center justify-between mb-12 md:mb-20">
-            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
-                مقالات اخیر سایت
-            </span>
+            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> مقالات اخیر سایت </span>
             <NuxtLink to="/articles">
-                <Button variant="primary" class="rounded-full max-sm:typo-label-sm max-sm:py-2"
-                        end-icon="ci:arrow-left">
+                <Button
+                    variant="primary"
+                    class="rounded-full max-sm:typo-label-sm max-sm:py-2"
+                    end-icon="ci:arrow-left"
+                >
                     نمایش همه
                 </Button>
             </NuxtLink>
         </div>
-        <ArticlesList :articles="[...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results]" />
+        <ArticlesList
+            :articles="[...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results]"
+        />
     </section>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index 35f53a8..a244520 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -72,7 +72,7 @@ watch(
 </script>
 
 <template>
-    <div class="container mb-40 lg:mb-80 mt-20">
+    <div class="container mb-40 lg:mb-40 max-lg:mt-20 lg:-mt-32">
         <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>
diff --git a/frontend/components/home/ProductsShowcase.vue b/frontend/components/home/ProductsShowcase.vue
index e9eaa75..c1ceab7 100644
--- a/frontend/components/home/ProductsShowcase.vue
+++ b/frontend/components/home/ProductsShowcase.vue
@@ -85,14 +85,14 @@ onUnmounted(() => {
 <template>
     <section
         id="products-showcase-container"
-        class="perspective-midrange relative z-[99999]"
+        class="perspective-midrange relative z-[999]"
     >
-        <div class="w-full h-[102svh] bg-black">
+        <div class="w-full min-h-[120svh] lg:min-h-[102svh] bg-black">
             <NuxtLink
                 v-for="slide in homeData!.show_case_slider"
                 :key="slide.id"
                 :to="slide.link"
-                class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
+                class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center max-lg:-mt-16 lg:mt-5"
             >
                 <NuxtImg
                     class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
@@ -102,12 +102,8 @@ onUnmounted(() => {
                     }"
                     alt=""
                 />
-                <div
-                    class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20"
-                >
-                    <span
-                        class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3"
-                    >
+                <div class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20">
+                    <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
                         {{ slide.title }}
                     </span>
                     <p
@@ -115,10 +111,13 @@ onUnmounted(() => {
                     >
                         {{ slide.description }}
                     </p>
-                    <NuxtLink :to="slide.link" class="relative">
+                    <NuxtLink
+                        :to="slide.link"
+                        class="relative"
+                    >
                         <NuxtImg
                             src="/img/heymlz/heymlz-falling.gif"
-                            class="absolute top-[106px] sm:top-[105px] lg:top-[117px] left-1/2 -translate-1/2 w-[250px] drop-shadow-md"
+                            class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
                         />
                         <Button
                             variant="primary"
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index 4ac059c..527d3c8 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -94,17 +94,21 @@ export const NAV_LINKS = [
     {
         title: "خانه",
         path: "/",
+        icon: "ci:home",
     },
     {
         title: "محصولات",
         path: "/products",
+        icon: "ci:airdrop",
     },
     {
         title: "دسته بندی ها",
         path: "/category",
+        icon: "ci:delivery-boxes",
     },
     {
         title: "ارتباط با ما",
         path: "/contact-us",
+        icon: "ci:call",
     },
 ];
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index baa68a0..a4883e1 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -33,12 +33,12 @@ onMounted(() => {
         <LoadingOverlay />
         <Hero class="mb-20 max-md:mt-[80px]" />
         <Preview />
-        <ProductsShowcase class="mb-40" />
+        <ProductsShowcase class="lg:mb-12" />
         <ProductsGrid
             title="محصولات پرفروش"
             :products="[...homeData!.products,...homeData!.products]"
         />
-        <Categories class="mt-40" />
+        <Categories class="mt-12" />
         <Brands />
         <LatestStories class="mb-20" />
     </div>
diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index d0577a3..ff73d9b 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 // import
 
-import useGetProducts, {
-    type GetProductsFilters,
-} from "~/composables/api/products/useGetProducts";
+import useGetProducts, { type GetProductsFilters } from "~/composables/api/products/useGetProducts";
 import { PRODUCT_RANGE } from "~/constants";
 
 // state
@@ -59,12 +57,8 @@ watch(
 
 <template>
     <div class="w-full container flex flex-col">
-        <div
-            class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5"
-        >
-            <div
-                class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full"
-            >
+        <div class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5">
+            <div class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full">
                 <!-- <div class="flex-center gap-[.75rem]">
                     <span class="text-xs lg:text-sm">خانه</span>
                     <span class="text-xs lg:text-sm">/</span>
@@ -75,9 +69,7 @@ watch(
                 <h1 class="typo-h-5 lg:typo-h-4">لیست محصولات</h1>
             </div>
 
-            <div
-                class="w-full flex items-center justify-between lg:justify-end gap-4"
-            >
+            <div class="w-full flex items-center justify-between lg:justify-end gap-4">
                 <Input
                     placeholder="جست و جو محصول ..."
                     v-model="search"
@@ -96,9 +88,7 @@ watch(
                 <Suspense>
                     <FilterButton />
                     <template #fallback>
-                        <Skeleton
-                            class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl"
-                        />
+                        <Skeleton class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl" />
                     </template>
                 </Suspense>
             </div>
@@ -107,24 +97,35 @@ watch(
             v-if="productsIsLoading"
             class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8 w-full"
         >
-            <div class="w-full flex flex-col gap-3" v-for="i in 8" :key="i">
+            <div
+                class="w-full flex flex-col gap-3"
+                v-for="i in 8"
+                :key="i"
+            >
                 <Skeleton
                     v-for="i in 3"
                     :key="i"
                     class="w-full"
                     :class="{
                         '!h-[11.75rem] lg:!h-[22.5rem] !rounded-2xl': i == 1,
-                        '!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [
-                            2, 3,
-                        ].includes(i),
+                        '!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [2, 3].includes(i),
                         '!w-1/2': i == 2,
                     }"
                 />
             </div>
         </ul>
-        <div v-else class="w-full h-max">
-            <div v-if="!products!.length" class="flex flex-grow w-full">
-                <Placeholder title="محصولی یافت نشد :(" icon="bi:search" />
+        <div
+            v-else
+            class="w-full h-max"
+        >
+            <div
+                v-if="!products!.length"
+                class="flex flex-grow w-full"
+            >
+                <Placeholder
+                    title="محصولی یافت نشد :("
+                    icon="bi:search"
+                />
             </div>
             <ProductsGrid
                 :with-header="false"
@@ -135,7 +136,10 @@ watch(
                 v-if="data && paginationData && data.count > 10"
                 class="w-full flex-center py-10"
             >
-                <Pagination :items="paginationData" :total="data.count" />
+                <Pagination
+                    :items="paginationData"
+                    :total="data.count"
+                />
             </div>
         </div>
     </div>
diff --git a/frontend/pages/signin.vue b/frontend/pages/signin.vue
index 9e8911b..724e3b1 100644
--- a/frontend/pages/signin.vue
+++ b/frontend/pages/signin.vue
@@ -39,10 +39,7 @@ const formRules = computed(() => {
     return {
         phone: {
             required: helpers.withMessage("Phone is required", required),
-            phoneValidator: helpers.withMessage(
-                "شماره تلفن وارد شده معتبر نمی باشد",
-                helpers.regex(/^[1-9][0-9]{9}$/)
-            ),
+            phoneValidator: helpers.withMessage("شماره تلفن وارد شده معتبر نمی باشد", helpers.regex(/^[1-9][0-9]{9}$/)),
         },
     };
 });
@@ -63,11 +60,7 @@ const {
 });
 
 const { mutateAsync: sendOtp, isPending: sendOtpIsPending } = useOtp();
-const {
-    mutateAsync: signIn,
-    isPending: signInIsPending,
-    status: signInStatus,
-} = useSignIn();
+const { mutateAsync: signIn, isPending: signInIsPending, status: signInStatus } = useSignIn();
 
 // computed
 
@@ -152,9 +145,7 @@ const resetForm = () => {
 <template>
     <div class="w-full flex h-svh items-center relative container">
         <div class="pattern -z-10 size-full fixed inset-0" />
-        <div
-            class="flex items-center justify-center flex-col size-full translate-y-[-100px]"
-        >
+        <div class="flex items-center justify-center flex-col size-full translate-y-[-100px]">
             <img
                 class="aspect-square w-[250px] sm:w-[325px] translate-y-[90px] sm:translate-y-[120px] animate-fade-in"
                 src="/img/heymlz/heymlz-signin.gif"
@@ -166,11 +157,12 @@ const resetForm = () => {
             <div
                 class="max-w-[600px] w-full p-6 h-[350px] sm:h-[400px] flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl"
             >
-                <h1 class="typo-h-6 sm:typo-h-5 mt-8">
-                    شماره خود را وارد کنید
-                </h1>
+                <h1 class="typo-h-6 sm:typo-h-5 mt-8">شماره خود را وارد کنید</h1>
 
-                <form @submit.prevent class="max-w-[500px] w-full mt-12">
+                <form
+                    @submit.prevent
+                    class="max-w-[500px] w-full mt-12"
+                >
                     <Input
                         v-if="!showOtp"
                         class="w-full tracking-[3px] persian-number"
@@ -186,9 +178,7 @@ const resetForm = () => {
                                     name="twemoji:flag-iran"
                                     size="24"
                                 />
-                                <span class="text-slate-500 typo-label-sm">
-                                    +۹۸
-                                </span>
+                                <span class="text-slate-500 typo-label-sm"> +۹۸ </span>
                             </div>
                         </template>
                     </Input>
@@ -196,13 +186,7 @@ const resetForm = () => {
                     <OtpInput
                         v-else
                         v-model="otpCode"
-                        :status="
-                            signInStatus === 'success'
-                                ? 'success'
-                                : signInStatus === 'error'
-                                ? 'error'
-                                : 'idle'
-                        "
+                        :status="signInStatus === 'success' ? 'success' : signInStatus === 'error' ? 'error' : 'idle'"
                         :disabled="signInIsPending || sendOtpIsPending"
                         :autofocus="true"
                         @complete="handleLogin"
@@ -220,7 +204,10 @@ const resetForm = () => {
                         ارسال کد
                     </Button>
 
-                    <div v-else class="flex items-center w-full gap-4 mt-4">
+                    <div
+                        v-else
+                        class="flex items-center w-full gap-4 mt-4"
+                    >
                         <Button
                             class="rounded-full w-full mt-4 max-sm:h-[45px]"
                             type="button"
@@ -235,11 +222,7 @@ const resetForm = () => {
                             type="submit"
                             @click="resendOtp"
                             :loading="signInIsPending || sendOtpIsPending"
-                            :disabled="
-                                signInIsPending ||
-                                isResendOtpBlocked ||
-                                sendOtpIsPending
-                            "
+                            :disabled="signInIsPending || isResendOtpBlocked || sendOtpIsPending"
                         >
                             ارسال مجدد کد
                             {{ isResendOtpBlocked ? otpBlockerTimePassed : "" }}
@@ -250,8 +233,11 @@ const resetForm = () => {
                         to="/"
                         class="flex items-center gap-2 justify-center mt-6"
                     >
-                        <span> بازگشت به فروشگاه </span>
-                        <Icon name="ci:left-rotation" size="24" />
+                        <Icon
+                            name="ci:left-rotation"
+                            class="lg:text-xl"
+                        />
+                        <span class="text-xs lg:text-sm"> بازگشت به فروشگاه </span>
                     </NuxtLink>
                 </form>
             </div>
diff --git a/frontend/public/img/heymlz/heymlz-logomotion.gif b/frontend/public/img/heymlz/heymlz-logomotion.gif
new file mode 100644
index 0000000..5bbd0ad
Binary files /dev/null and b/frontend/public/img/heymlz/heymlz-logomotion.gif differ
diff --git a/frontend/public/logo/logo-row.png b/frontend/public/logo/logo-row.png
deleted file mode 100644
index 6483170..0000000
Binary files a/frontend/public/logo/logo-row.png and /dev/null differ