diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index bdaa9bf..0cb8e17 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -19,7 +19,7 @@ const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
     rootMargin: "0px 0px -40% 0px",
 });
 
-const showHeymlzAnimation = ref(true);
+const showHeymlzAnimation = ref(false);
 
 const { x: dragAxisX } = useDraggable(draggableEl, {
     initialValue: { x: 0, y: 0 },
@@ -32,10 +32,12 @@ watch(
     heymlzElementIsVisible,
     (newValue) => {
         if (newValue) {
-            showHeymlzAnimation.value = true;
             setTimeout(() => {
-                showHeymlzAnimation.value = false;
-            }, 3200);
+                showHeymlzAnimation.value = true;
+                setTimeout(() => {
+                    showHeymlzAnimation.value = false;
+                }, 2900);
+            }, 400);
         }
     },
     {
@@ -61,9 +63,7 @@ watch(
     (newValue) => {
         const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
         const percent = clientRect.width / 100;
-        const clipPercent =
-            (newValue + draggableEl.value!.clientWidth / 2 - clientRect.x - 8) /
-            percent;
+        const clipPercent = (newValue + draggableEl.value!.clientWidth / 2 - clientRect.x - 8) / percent;
         if (clipPercent >= 5 && clipPercent <= 95) {
             clipPathPercent.value = clipPercent;
         }
@@ -75,12 +75,8 @@ 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-h-6 md:typo-h-5 lg:typo-h-3 text-black">
-                    تفاوت محصلات ما را ببینید
-                </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>
             </div>
             <div
                 ref="previewContainerEl"
@@ -90,11 +86,7 @@ watch(
                     <NuxtImg
                         v-if="activeSlideVideo !== 'right'"
                         :src="homeData!.difreance_section.image1"
-                        :class="
-                            showHeymlzAnimation
-                                ? 'brightness-25 blur-sm'
-                                : 'brightness-[95%] blur-[0px]'
-                        "
+                        :class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
                         class="select-none absolute size-full object-cover transition-[filter] duration-250"
                         :alt="homeData!.difreance_section.title1"
                     />
@@ -117,11 +109,7 @@ watch(
                         <NuxtImg
                             v-if="activeSlideVideo !== 'left'"
                             :src="homeData!.difreance_section.image2"
-                            :class="
-                                showHeymlzAnimation
-                                    ? 'brightness-25 blur-sm'
-                                    : 'brightness-[95%] blur-[0px]'
-                            "
+                            :class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
                             class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
                             :alt="homeData!.difreance_section.title2"
                         />
@@ -136,7 +124,10 @@ watch(
                         />
                     </Transition>
 
-                    <Transition name="fade" :duration="250">
+                    <Transition
+                        name="fade"
+                        :duration="250"
+                    >
                         <NuxtImg
                             v-if="showHeymlzAnimation"
                             src="/img/heymlz/heymlz-pullingg.gif"
@@ -160,21 +151,13 @@ watch(
                     >
                         <div
                             ref="draggableEl"
-                            :class="
-                                showHeymlzAnimation
-                                    ? 'bg-neutral-200'
-                                    : 'bg-black'
-                            "
+                            :class="showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black'"
                             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"
                                 class="transition-all size-5 sm:size-6"
-                                :class="
-                                    showHeymlzAnimation
-                                        ? '**:stroke-black'
-                                        : '**:stroke-white'
-                                "
+                                :class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
                             />
                         </div>
                     </div>
@@ -220,11 +203,6 @@ watch(
 
 <style>
 .overlay-image {
-    clip-path: polygon(
-        v-bind('clipPathPercent + "%"') 0,
-        100% 0,
-        100% 100%,
-        v-bind('clipPathPercent + "%"') 100%
-    );
+    clip-path: polygon(v-bind('clipPathPercent + "%"') 0, 100% 0, 100% 100%, v-bind('clipPathPercent + "%"') 100%);
 }
 </style>