diff --git a/frontend/app.vue b/frontend/app.vue
index ad1e1ff..1665ab4 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -19,11 +19,11 @@ const closeModal = () => {
 
         <NuxtPwaManifest />
 
-        <UpdatePwaModal
-            :isShow="updateAvailable"
-            @update="handleUpdate"
-            @close="closeModal"
-        />
+<!--        <UpdatePwaModal-->
+<!--            :isShow="updateAvailable"-->
+<!--            @update="handleUpdate"-->
+<!--            @close="closeModal"-->
+<!--        />-->
 
         <NuxtLayout>
             <ToastProvider>
diff --git a/frontend/components/articles/ArticlesList.vue b/frontend/components/articles/ArticlesList.vue
index 3231515..0e832fa 100644
--- a/frontend/components/articles/ArticlesList.vue
+++ b/frontend/components/articles/ArticlesList.vue
@@ -11,10 +11,14 @@ type Props = {
 const props = defineProps<Props>();
 const { articles } = toRefs(props);
 
+// state
+
+const isMobile = useMediaQuery('(max-width: 1024px)');
+
 </script>
 
 <template>
-    <div class="columns-2 gap-8 w-full space-y-8">
+    <div class="columns-1 xs:columns-2 xl:columns-3 gap-6 sm:gap-8 w-full space-y-8">
         <BlogPost
             v-for="article in articles"
             :key="article.id"
@@ -24,6 +28,7 @@ const { articles } = toRefs(props);
             :comments="2"
             :id="article.id"
             :date="article.created_at"
+            :variant="isMobile ? 'sm' : 'lg'"
             tag="تگ ندارد"
         />
     </div>
diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index f50bd67..b6df274 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/frontend/components/global/BlogPost.vue
@@ -14,33 +14,33 @@ type Props = {
 
 // props
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     variant: "lg"
 });
-const {} = toRefs(props);
 
 </script>
 
 <template>
-    <NuxtLink :to="`/article/${id}`" class="block">
-        <div
+    <div>
+        <NuxtLink
+            :to="`/article/${id}`"
             :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
-            class="group w-full relative"
+            class="group w-full relative block"
         >
 
             <Tag
                 v-if="variant === 'lg'"
-                class="bg-success-500 absolute left-6 lg:left-10 top-6 lg:top-10 z-20"
+                class="bg-success-500 absolute left-6 top-6 z-20"
             >
                 اسپیکر
             </Tag>
 
             <div
                 v-if="variant === 'sm'"
-                class="h-[350px] rounded-150 overflow-hidden relative"
+                class="aspect-square w-full rounded-150 overflow-hidden relative"
             >
                 <Tag
-                    class="bg-success-500 absolute z-20 left-6 top-6"
+                    class="bg-success-500 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
                 >
                     اسپیکر
                 </Tag>
@@ -53,51 +53,45 @@ const {} = toRefs(props);
             </div>
 
             <div
-                :class="variant === 'lg' ? 'absolute px-6 lg:px-10' : 'invert mt-8'"
-                class="bottom-6 lg:bottom-10 flex flex-col gap-4 lg:gap-6 z-20"
+                :class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
+                class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
             >
 
                 <div class="flex items-center gap-4 lg:gap-6">
                     <div class="flex items-center gap-2">
                         <Icon
                             name="ci:comment"
-                            size="18"
-                            class="**:stroke-white"
+                            class="**:stroke-white size-3 md:size-3.5"
                         />
-                        <span class="typo-p-sm text-white">
+                        <span class="typo-p-xs md:typo-p-sm text-white">
                             ۰ نظر
                         </span>
                     </div>
                     <div class="flex items-center gap-2">
                         <Icon
                             name="ci:calendar"
-                            size="18"
-                            class="**:stroke-white"
+                            class="**:stroke-white size-3 md:size-3.5"
                         />
-                        <span class="typo-p-sm text-white">
-                        ۳۱ مهر ۱۴۰۳
-                    </span>
+                        <span class="typo-p-xs md:typo-p-sm text-white">
+                            ۳۱ مهر ۱۴۰۳
+                        </span>
                     </div>
                 </div>
 
                 <div class="flex gap-4 flex-col">
                     <span
                         :class="variant === 'lg' ? 'line-clamp-2' : ''"
-                        class="text-lg font-medium lg:typo-h-6 text-white"
+                        class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
                     >
                         {{ title }}
                     </span>
-<!--                    <p-->
-<!--                        :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"-->
-<!--                        class="text-white text-justify"-->
-<!--                        v-html="description"-->
-<!--                    />-->
+                    <p
+                        v-if="variant === 'sm'"
+                        class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
+                    >
+                        تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
+                    </p>
                 </div>
-
-                <NuxtLink :to="`/article/${id}`" class="underline text-white typo-p-md">
-                    بیشتر بخوانید...
-                </NuxtLink>
-
             </div>
 
             <img
@@ -111,6 +105,6 @@ const {} = toRefs(props);
                 v-if="variant === 'lg'"
                 class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
             />
-        </div>
-    </NuxtLink>
+        </NuxtLink>
+    </div>
 </template>
\ No newline at end of file
diff --git a/frontend/components/global/Brands.vue b/frontend/components/global/Brands.vue
index 29f873c..ca209e9 100644
--- a/frontend/components/global/Brands.vue
+++ b/frontend/components/global/Brands.vue
@@ -12,20 +12,20 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <div class="relative w-full flex flex-col justify-center min-h-[700px] h-[80svh]">
+    <div class="relative w-full flex flex-col justify-center min-h-[450px] md:h-[80svh]">
         <div class="-rotate-z-2 z-20">
             <div
                 class="bg-warning-500 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee-reverse"
             >
                 <span
                     v-for="i in 10"
-                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
+                    class="text-[40px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>
                 <span
                     v-for="i in 10"
-                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
+                    class="text-[40px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>
@@ -38,13 +38,13 @@ const {} = toRefs(props);
             >
                 <span
                     v-for="i in 10"
-                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
+                    class="text-[40px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>
                 <span
                     v-for="i in 10"
-                    class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
+                    class="text-[40px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
                 >
                     TEST {{ i }}
                 </span>
diff --git a/frontend/components/global/Footer.vue b/frontend/components/global/Footer.vue
index 651d6fc..b191475 100644
--- a/frontend/components/global/Footer.vue
+++ b/frontend/components/global/Footer.vue
@@ -1,99 +1,34 @@
-<script setup lang="ts">
-
-// imports
-
-import { NAV_LINKS } from "~/constants";
-
-</script>
-
 <template>
-    <footer class="w-full bg-black flex-center">
-        <div class="size-full grid grid-cols-2 items-stretch container">
-            <div
-                class="h-full flex flex-col items-start justify-between pe-[5rem] py-[5rem]"
-            >
-                <div class="flex flex-col items-start gap-[1.5rem] w-full">
-                    <span class="text-white typo-sub-h-xl font-light"
-                        >از آخرین اخبار، نوشته‌ها، مقالات و تخفیف‌ها با خبر شوید
-                        😎
-                    </span>
-                    <div class="flex flex-col items-start gap-[.75rem] w-full">
-                        <div
-                            class="flex items-center justify-start gap-[.5rem] w-full"
-                        >
-                            <Input
-                                placeholder="آدرس الکترونیکی شما"
-                                class="bg-slate-950 border-slate-800 hover:border-slate-800 w-8/12"
-                            />
-                            <Button
-                                class="invert rounded-100 size-[3rem] !**:stroke-black"
-                                end-icon="ci:arrow-left"
-                            />
-                        </div>
-                        <span class="text-slate-400 typo-p-sm">
-                            با عضویت, شما با
-                            <NuxtLink to="#" class="text-cyan-500 underline"
-                                >قوانین و مقررات</NuxtLink
-                            >
-                            سایت موافقت می کنید.
-                        </span>
-                    </div>
-                </div>
-                <span class="text-white typo-label-sm font-light">
-                    © ۲۰۲۵ - ملز; هوشمند ترین وبسایت ایران
+    <div class="bg-black relative overflow-hidden">
+
+        <img src="/img/footer-bg.jpg" alt="" class="absolute z-10 object-cover opacity-45" />
+
+        <div class="flex flex-col gap-4 items-center justify-center relative z-20">
+
+            <div class="flex items-center flex-col pb-[10px] pt-[80px] lg:py-[150px] justify-center">
+                <video
+                    src="/video/loading.mp4"
+                    autoplay
+                    muted
+                    loop
+                    class="size-[150px] lg:size-[220px] rounded-full"
+                />
+                <span class="font-bold text-2xl lg:text-5xl text-gradient bg-gradient-to-l from-blue-500 to-blue-700">
+                    فروشگاه هیملز
                 </span>
             </div>
 
-            <div
-                class="flex flex-col items-start ps-[5rem] py-[5rem] gap-[6.875rem]"
-            >
-                <div class="w-full flex items-start gap-[3rem]">
-                    <div class="flex flex-col gap-[1.5rem] w-full">
-                        <NuxtLink
-                            v-for="(link, index) in NAV_LINKS"
-                            :key="index"
-                            :to="link.path"
-                            class="typo-h-5 font-light text-white hover:text-white/70 transition-all"
-                        >
-                            {{ link.title }}
-                        </NuxtLink>
-                    </div>
-                    <div class="flex flex-col gap-[.75rem] w-full">
-                        <NuxtLink
-                            to="#"
-                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
-                        >
-                            سوالات متدوال
-                        </NuxtLink>
-                        <NuxtLink
-                            to="#"
-                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
-                        >
-                            قوانین و مقررات
-                        </NuxtLink>
-                        <NuxtLink
-                            to="#"
-                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
-                        >
-                            گزارش خطا و باگ
-                        </NuxtLink>
-                        <NuxtLink
-                            to="#"
-                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
-                        >
-                            حریم خصوصی
-                        </NuxtLink>
-                        <NuxtLink
-                            to="#"
-                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
-                        >
-                            تماس با ما
-                        </NuxtLink>
-                    </div>
-                </div>
+            <footer class="w-full flex max-lg:flex-col justify-between py-[100px] max-lg:gap-16 container items-center lg:items-start relative z-20">
+                <div class="flex flex-col gap-4 text-white max-w-[300px]">
 
-                <div class="flex items-center justify-end text-white w-full">
-                    <div class="flex items-center gap-[1rem]">
+                    <h3 class="font-bold text-xl xl:text-3xl max-lg:text-center">
+                        با ما در ارتباط باشید...
+                    </h3>
+
+                    <p class="text-md font-thin leading-[175%] mt-4 max-lg:text-center">
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها
+                    </p>
+                    <div class="flex items-center gap-4 mt-6 max-lg:justify-center">
                         <NuxtLink to="#" class="flex-center size-[1.5rem]">
                             <Icon
                                 name="ci:instagram"
@@ -124,7 +59,47 @@ import { NAV_LINKS } from "~/constants";
                         </NuxtLink>
                     </div>
                 </div>
-            </div>
+                <div class="flex justify-center lg:justify-end flex-1">
+                    <div class="flex flex-col gap-6 text-white max-lg:text-center">
+                        <h3 class="font-bold">
+                            لینک های مفید
+                        </h3>
+                        <ul class="flex flex-col gap-4 font-thin">
+                            <li>از طراحان گرافیک است</li>
+                            <li>تولید نامفهوم</li>
+                            <li>ستون و سطرآنچنان که لازم</li>
+                            <li>روزنامه و مجله در ستون</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="flex justify-end flex-1">
+                    <div class="flex flex-col gap-6 text-white max-lg:text-center">
+                        <h3 class="font-bold">
+                            لینک های مفید
+                        </h3>
+                        <ul class="flex flex-col gap-4 font-thin">
+                            <li>از طراحان گرافیک است</li>
+                            <li>تولید نامفهوم</li>
+                            <li>ستون و سطرآنچنان که لازم</li>
+                            <li>روزنامه و مجله در ستون</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="flex justify-end flex-1">
+                    <div class="flex flex-col gap-6 text-white max-lg:text-center">
+                        <h3 class="font-bold w-full">
+                            لینک های مفید
+                        </h3>
+                        <ul class="flex flex-col gap-4 font-thin">
+                            <li>از طراحان گرافیک است</li>
+                            <li>تولید نامفهوم</li>
+                            <li>ستون و سطرآنچنان که لازم</li>
+                            <li>روزنامه و مجله در ستون</li>
+                        </ul>
+                    </div>
+                </div>
+            </footer>
+
         </div>
-    </footer>
-</template>
\ No newline at end of file
+    </div>
+</template>
diff --git a/frontend/components/global/product/Comment.vue b/frontend/components/global/product/Comment.vue
index cfb13c1..46fd660 100644
--- a/frontend/components/global/product/Comment.vue
+++ b/frontend/components/global/product/Comment.vue
@@ -33,7 +33,7 @@ const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");
                     {{ formattedDate }}
                 </span>
             </div>
-            <Rating />
+            <Rating :rate="2"/>
         </div>
         <div class="typo-p-md">
             {{ content }}
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 1a6ba3c..070163b 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -22,7 +22,7 @@ const onSwiper = (swiper: SwiperClass) => {
 <template>
     <section
         ref="sectionTarget"
-        class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40 relative overflow-hidden"
+        class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
     >
 
         <div class="w-full flex justify-center items-center relative z-10">
diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index 078f021..48937f0 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -159,7 +159,7 @@ onUnmounted(() => {
 <template>
     <div
         id="header-slider-container"
-        class="w-full mb-20 z-50 max-md:mt-[80px]"
+        class="w-full z-50"
     >
         <div id="header-slider-wrapper" class="relative">
             <Swiper
diff --git a/frontend/components/home/LatestStories.vue b/frontend/components/home/LatestStories.vue
index 08c588e..98088bc 100644
--- a/frontend/components/home/LatestStories.vue
+++ b/frontend/components/home/LatestStories.vue
@@ -15,16 +15,17 @@ await suspense();
 
 <template>
     <section class="mt-20 container">
-        <div class="flex items-center justify-between mb-20">
+        <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>
             <NuxtLink to="/articles">
-                <Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2" end-icon="ci:arrow-left">
+                <Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2"
+                        end-icon="ci:arrow-left">
                     نمایش همه
                 </Button>
             </NuxtLink>
         </div>
-            <ArticlesList :articles="articles!.results" />
+        <ArticlesList :articles="[...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results]" />
     </section>
 </template>
\ No newline at end of file
diff --git a/frontend/components/home/MostRecentComments.vue b/frontend/components/home/MostRecentComments.vue
index b18b2c9..cfda703 100644
--- a/frontend/components/home/MostRecentComments.vue
+++ b/frontend/components/home/MostRecentComments.vue
@@ -51,7 +51,7 @@ const onSwiper = (swiper: SwiperClass) => {
                     <div class="flex justify-center items-center">
                         <div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
                             <Icon name="ci:instagram" size="28" class="**:stroke-white" />
-                            <p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-medium leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
+                            <p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-normal !leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
                                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
                                 استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
                                 در ستون و سطرآنچنان که لازم.
diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index fcf004d..a82bf06 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -47,94 +47,99 @@ watch(
 
 <template>
     <div class="container">
-        <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>
-            <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
+        <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>
+                <span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
                 تفاوت محصلات ما را ببینید
             </span>
-        </div>
-        <div
-            ref="previewContainerEl"
-            class="rounded-200 overflow-hidden h-[70svh] md:h-[80svh] relative"
-        >
-            <Transition name="fade">
-                <img
-                    v-if="activeSlideVideo !== 'right'"
-                    :src="homeData!.difreance_section.image1"
-                    class="select-none absolute size-full object-cover brightness-[95%]"
-                    :alt="homeData!.difreance_section.title1"
-                />
-                <video
-                    v-else
-                    autoplay
-                    muted
-                    src="/video/vid-3.mp4"
-                    class="select-none absolute size-full object-cover brightness-[95%]"
-                />
-            </Transition>
-
-            <div class="absolute size-full right-0 w-full">
+            </div>
+            <div
+                ref="previewContainerEl"
+                class="rounded-200 overflow-hidden h-[70svh] md:h-[80svh] relative"
+            >
                 <Transition name="fade">
                     <img
-                        v-if="activeSlideVideo !== 'left'"
-                        :src="homeData!.difreance_section.image2"
-                        class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
-                        :alt="homeData!.difreance_section.title2"
+                        v-if="activeSlideVideo !== 'right'"
+                        :src="homeData!.difreance_section.image1"
+                        class="select-none absolute size-full object-cover brightness-[95%]"
+                        :alt="homeData!.difreance_section.title1"
                     />
                     <video
                         v-else
                         autoplay
                         muted
                         src="/video/vid-3.mp4"
-                        class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                        class="select-none absolute size-full object-cover brightness-[95%]"
                     />
                 </Transition>
-                <div
-                    :style="{
+
+                <div class="absolute size-full right-0 w-full">
+                    <Transition name="fade">
+                        <img
+                            v-if="activeSlideVideo !== 'left'"
+                            :src="homeData!.difreance_section.image2"
+                            class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                            :alt="homeData!.difreance_section.title2"
+                        />
+                        <video
+                            v-else
+                            autoplay
+                            muted
+                            src="/video/vid-3.mp4"
+                            class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                        />
+                    </Transition>
+                    <div
+                        :style="{
                         left: `${clipPathPercent}%`,
                     }"
-                    class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
-                >
-                    <div
-                        ref="draggableEl"
-                        class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
+                        class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
                     >
-                        <Icon
-                            name="ci:arrows"
-                            size="24"
-                            class="**:stroke-white"
-                        />
+                        <div
+                            ref="draggableEl"
+                            class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
+                        >
+                            <Icon
+                                name="ci:arrows"
+                                size="24"
+                                class="**:stroke-white"
+                            />
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div
-                class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
-            >
-                <div class="flex flex-col gap-2 text-black">
+                <div
+                    class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
+                >
+                    <div class="flex flex-col gap-2 text-black">
                     <span class="typo-p-sm md:typo-p-md">
                         {{ homeData!.difreance_section.description1 }}
                     </span>
-                    <NuxtLink
-                        :to="homeData!.difreance_section.link1"
-                        class="typo-h-6 md:typo-h-5 lg:typo-h-3"
-                    >
-                        {{ homeData!.difreance_section.title1 }}
-                    </NuxtLink>
-                </div>
-                <div class="flex flex-col gap-2 text-black">
+                        <NuxtLink
+                            :to="homeData!.difreance_section.link1"
+                            class="typo-h-6 md:typo-h-5 lg:typo-h-3"
+                        >
+                            {{ homeData!.difreance_section.title1 }}
+                        </NuxtLink>
+                    </div>
+                    <div class="flex flex-col gap-2 text-black">
                     <span class="typo-p-sm md:typo-p-md text-end">
                         {{ homeData!.difreance_section.description2 }}
                     </span>
-                    <NuxtLink
-                        :to="homeData!.difreance_section.link2"
-                        class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end"
-                    >
-                        {{ homeData!.difreance_section.title2 }}
-                    </NuxtLink>
+                        <NuxtLink
+                            :to="homeData!.difreance_section.link2"
+                            class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end"
+                        >
+                            {{ homeData!.difreance_section.title2 }}
+                        </NuxtLink>
+                    </div>
                 </div>
             </div>
         </div>
+
+        <div class="h-80"></div>
+
     </div>
 </template>
 
diff --git a/frontend/components/home/ProductsShowcase.vue b/frontend/components/home/ProductsShowcase.vue
index a41f1d4..206cb54 100644
--- a/frontend/components/home/ProductsShowcase.vue
+++ b/frontend/components/home/ProductsShowcase.vue
@@ -94,7 +94,7 @@ onUnmounted(() => {
 <template>
     <div
         id="products-showcase-container"
-        class="mb-40 perspective-midrange w-full h-[125svh] bg-black flex items-center justify-center"
+        class="perspective-midrange w-full h-[125svh] bg-black flex items-center justify-center"
     >
         <NuxtLink
             v-for="slide in homeData!.show_case_slider"
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index 1b0bcd8..1c0c592 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -42,7 +42,7 @@ const submitComment = async () => {
             >
                 <h3 class="typo-h-3">نظرات کاربران</h3>
                 <div class="flex flex-col gap-2">
-                    <Rating />
+                    <Rating :rate="2" />
                     <span class="typo-p-sm">
                         بر اساس {{ comments?.count }} نظر
                     </span>
diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index 730ce69..d1e8451 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -84,7 +84,7 @@ watch(() => selectedVariant.value, (newValue) => {
                         درصد تخفیف
                     </div>
                 </div>
-                <Rating />
+                <Rating :rate="3" />
             </div>
 
             <div
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 16cf1f5..a2726c7 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -25,14 +25,18 @@ if (response.isError) {
 <template>
     <div class="w-full">
         <LoadingOverlay />
-        <Hero />
+        <Hero class="mb-20 max-md:mt-[80px]" />
         <Preview />
-        <ProductsShowcase />
-<!--        <ProductsSlider title="محصولات پرفروش" />-->
-        <ProductsGrid title="محصولات پرفروش" :products="[...homeData!.products,...homeData!.products]"/>
-        <Categories />
+        <ProductsShowcase class="mb-40" />
+        <ProductsGrid
+            title="محصولات پرفروش"
+            :products="[...homeData!.products,...homeData!.products]"
+        />
+        <Categories class="mt-40" />
         <Brands />
         <MostRecentComments />
-        <LatestStories />
+        <ClientOnly>
+            <LatestStories class="mb-20" />
+        </ClientOnly>
     </div>
 </template>
\ No newline at end of file
diff --git a/frontend/public/img/footer-bg-2.jpg b/frontend/public/img/footer-bg-2.jpg
new file mode 100644
index 0000000..bb9de9b
Binary files /dev/null and b/frontend/public/img/footer-bg-2.jpg differ
diff --git a/frontend/public/img/footer-bg-3.jpg b/frontend/public/img/footer-bg-3.jpg
new file mode 100644
index 0000000..6a2f957
Binary files /dev/null and b/frontend/public/img/footer-bg-3.jpg differ
diff --git a/frontend/public/img/footer-bg.jpg b/frontend/public/img/footer-bg.jpg
new file mode 100644
index 0000000..0c8cc77
Binary files /dev/null and b/frontend/public/img/footer-bg.jpg differ
diff --git a/frontend/public/video/loading.mp4 b/frontend/public/video/loading.mp4
index e69de29..32b3718 100644
Binary files a/frontend/public/video/loading.mp4 and b/frontend/public/video/loading.mp4 differ
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
index 5f53c79..db2b7c2 100644
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -106,7 +106,7 @@ declare global {
             full_name: string;
             profile_photo: string;
         };
-        category: number;
+        category: SubCategory;
     };
 
     type UserComment = {