diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index 4ebee14..3af9626 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -75,9 +75,9 @@ watch(
     <div class="container mb-40 lg:mb-80 mt-20">
         <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-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>
@@ -92,8 +92,8 @@ watch(
                         :src="homeData!.difreance_section.image1"
                         :class="
                             showHeymlzAnimation
-                                ? 'brightness-35'
-                                : 'brightness-[95%]'
+                                ? 'brightness-50 blur-md'
+                                : 'brightness-[95%] blur-[0px]'
                         "
                         class="select-none absolute size-full object-cover transition-[filter] duration-250"
                         :alt="homeData!.difreance_section.title1"
@@ -119,8 +119,8 @@ watch(
                             :src="homeData!.difreance_section.image2"
                             :class="
                                 showHeymlzAnimation
-                                    ? 'brightness-35'
-                                    : 'brightness-[95%]'
+                                    ? 'brightness-50 blur-md'
+                                    : 'brightness-[95%] blur-[0px]'
                             "
                             class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
                             :alt="homeData!.difreance_section.title2"
@@ -136,15 +136,17 @@ watch(
                         />
                     </Transition>
 
-                    <NuxtImg
-                        v-if="showHeymlzAnimation"
-                        src="/img/heymlz/heymlz-pulling.gif"
-                        class="size-[250px] sm:size-[400px] absolute translate-x-[-62px] sm:translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
-                        :style="{
-                            left: `${clipPathPercent}%`,
-                            filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
-                        }"
-                    />
+                    <Transition name="fade" :duration="250">
+                        <NuxtImg
+                            v-if="showHeymlzAnimation"
+                            src="/img/heymlz/heymlz-pulling.gif"
+                            class="size-[250px] sm:size-[400px] absolute translate-x-[-62px] sm:translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
+                            :style="{
+                                left: `${clipPathPercent}%`,
+                                filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
+                            }"
+                        />
+                    </Transition>
 
                     <div
                         :style="{
@@ -154,21 +156,20 @@ watch(
                             activeSlideVideo !== 'none' ? 'opacity-10' : '',
                             showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black',
                         ]"
-                        class="select-none w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
+                        class="select-none w-[5px] sm:w-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
                     >
                         <div
                             ref="draggableEl"
                             :class="
                                 showHeymlzAnimation
-                                    ? 'bg-neutral-300'
+                                    ? 'bg-neutral-200'
                                     : 'bg-black'
                             "
-                            class="cursor-grab hover:scale-115 transition-transform rounded-full absolute size-11 flex items-center justify-center"
+                            class="touch-none cursor-grab hover:scale-115 transition-transform rounded-full absolute size-9 sm:size-11 flex items-center justify-center"
                         >
                             <Icon
                                 name="ci:arrows"
-                                size="24"
-                                class="transition-all"
+                                class="transition-all size-5 sm:size-6"
                                 :class="
                                     showHeymlzAnimation
                                         ? '**:stroke-black'
@@ -180,7 +181,8 @@ watch(
                 </div>
 
                 <div
-                    class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
+                    :class="showHeymlzAnimation ? 'opacity-0' : 'opacity-100'"
+                    class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity"
                 >
                     <div
                         class="flex flex-col gap-2 text-black transition-opacity"