diff --git a/frontend/components/global/Brands.vue b/frontend/components/global/Brands.vue
index d8cfe08..76f8866 100644
--- a/frontend/components/global/Brands.vue
+++ b/frontend/components/global/Brands.vue
@@ -13,53 +13,65 @@ const {} = toRefs(props);
 
 <template>
     <div class="relative w-full flex flex-col justify-center min-h-[450px] h-svh">
-        <div class="flex-col-center gap-6 mb-32">
+        <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>
-            <p class="text-slate-500 text-center max-w-[750px] typo-p-lg xl:typo-p-xl">
+            <p class="text-slate-500 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl">
                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
                 متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
             </p>
         </div>
         <div class="-rotate-z-2 z-20">
             <div
-                class="bg-blue-500 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[140px]"
+                class="bg-blue-500 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[90px] sm:h-[140px]"
             >
                 <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-[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-[45px] invert opacity-85" />
+                    <NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[25px] sm:h-[45px] invert opacity-85" />
                 </template>
             </div>
         </div>
 
         <div class="rotate-z-2 z-10">
             <div
-                class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[140px]"
+                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-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
                 </template>
                 <template v-for="i in 1">
-                    <NuxtImg src="/img/brands/brand-1.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
-                    <NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px] grayscale opacity-40" />
                 </template>
             </div>
         </div>
diff --git a/frontend/components/global/LoadingOverlay.vue b/frontend/components/global/LoadingOverlay.vue
index 20843ba..81ef700 100644
--- a/frontend/components/global/LoadingOverlay.vue
+++ b/frontend/components/global/LoadingOverlay.vue
@@ -1,52 +1,48 @@
 <script lang="ts" setup>
-
 // state
 
 const { $gsap: gsap } = useNuxtApp();
-const showLoadingOverlay = useState("showLoadingOverlay");
 const disableLoadingOverlay = useState("disableLoadingOverlay");
 const shouldRenderLoadingOverlay = ref(true);
 
 const isWindowScrollLocked = useScrollLock(window);
 
-// watch
-
-watch(() => showLoadingOverlay.value, (value) => {
-    if (!value) {
-        const timeline = gsap.timeline();
-
-        const imageElement = document.querySelector("#loading-overlay-image") as HTMLImageElement;
-
-        imageElement.src = "/img/heymlz-loading-2.gif";
-
-        timeline
-            .to("#loading-overlay", {
-                scale: 1
-            })
-            .to("#loading-overlay", {
-                opacity: 0,
-                delay: 2,
-                onComplete: () => {
-                    shouldRenderLoadingOverlay.value = false;
-                    isWindowScrollLocked.value = false;
-                    disableLoadingOverlay.value = true;
-                }
-            });
-    }
-}, {
-    once: true
-});
-
-
 // lifecycle
 
-onMounted(() => {
+onMounted(async () => {
+    const timeline = gsap.timeline();
+
+    timeline.to("#loading-overlay", {
+        opacity: 1,
+    });
+
     isWindowScrollLocked.value = true;
 
-    const newImage = new Image();
-    newImage.src = "/img/heymlz-loading-2.gif";
-});
+    const preload = (url: string) => {
+        return new Promise((resolve) => {
+            const image = new Image();
+            image.src = url;
+            image.onload = () => resolve(true);
+        });
+    };
 
+    await Promise.all([
+        preload("/img/heymlz/heymlz-fast-loading.gif"),
+        preload("/img/heymlz/heymlz-pulling.gif"),
+        preload("/img/heymlz/heymlz-falling.gif"),
+        preload("/img/heymlz/heymlz-seat.gif"),
+    ]);
+
+    timeline.to("#loading-overlay", {
+        opacity: 0,
+        delay: 5.5,
+        onComplete: () => {
+            shouldRenderLoadingOverlay.value = false;
+            isWindowScrollLocked.value = false;
+            disableLoadingOverlay.value = true;
+        },
+    });
+});
 </script>
 
 <template>
@@ -57,19 +53,18 @@ onMounted(() => {
     >
         <NuxtImg
             id="loading-overlay-image"
-            src="/img/heymlz/heymlz-loading-1.gif"
-            class="opacity-0 scale-70 absolute z-20"
+            src="/img/heymlz/heymlz-fast-loading.gif"
+            class="absolute z-20 w-[700px] brightness-75"
             alt=""
         />
-        <div
+        <!-- <div
             id="loading-overlay-gradient"
             class="opacity-0 scale-x-0 w-[1000px] h-[70px] bg-linear-to-r from-blue-500 via-violet-500 to-purple-500 blur-[150px] rounded-[100px]"
-        />
+        /> -->
     </div>
 </template>
 
 <style>
-
 #loading-overlay-image {
     animation-name: loading-overlay-image-animation;
     animation-duration: 1s;
@@ -79,7 +74,8 @@ onMounted(() => {
 
 #loading-overlay-gradient {
     animation: 1.5s normal 0.5s 1 forwards loading-overlay-gradient-animation,
-    1s ease-in-out 2s infinite alternate-reverse loading-overlay-gradient-pules-animation;
+        1s ease-in-out 2s infinite alternate-reverse
+            loading-overlay-gradient-pules-animation;
 }
 
 @keyframes loading-overlay-image-animation {
@@ -117,4 +113,4 @@ onMounted(() => {
         scale: 1 1 1;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index daf25f7..6c284cc 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -20,15 +20,15 @@ const onSwiper = (swiper: SwiperClass) => {
 <template>
     <section
         ref="sectionTarget"
-        class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
+        class="flex flex-col justify-center gap-4 bg-black h-[110svh] sm:h-[150svh] relative overflow-hidden"
     >
-        <div class="w-full relative translate-y-[-200px] z-10">
+        <div class="w-full relative translate-y-[-90px] sm:translate-y-[-200px] z-10 container">
             <div class="flex-col-center gap-6">
                 <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
                     دسته بندی ها
                 </span>
                 <p
-                    class="text-slate-300 text-center max-w-[750px] typo-p-lg xl:typo-p-xl"
+                    class="text-slate-300 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl"
                 >
                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و
                     با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
@@ -38,8 +38,8 @@ const onSwiper = (swiper: SwiperClass) => {
         </div>
 
         <div class="w-full my-20 relative">
-            <img
-                class="aspect-square w-[450px] translate-[-309px] absolute left-1/2 -translate-x-1/2 z-10"
+            <NuxtImg
+                class="aspect-square w-[240px] md:w-[300px] lg:w-[350px] translate-[-164px] md:translate-[-206px] lg:translate-[-240px] absolute left-1/2 -translate-x-1/2 z-10"
                 :style="{
                     filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
                 }"
diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index 6c280eb..25ba9d1 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -11,7 +11,6 @@ import useHomeData from "~/composables/api/home/useHomeData";
 const { data: homeData } = useHomeData();
 const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
 const swiper_instance = ref<SwiperClass | null>(null);
-const showLoadingOverlay = useState("showLoadingOverlay");
 
 const observerTarget = ref(null);
 const shouldPauseVideos = ref(false);
@@ -32,9 +31,6 @@ let scrollTrigger: ScrollTrigger;
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
-    setTimeout(() => {
-        showLoadingOverlay.value = false;
-    }, 1000);
     swiper_instance.value = swiper;
 };
 
diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index 8622cf5..4ebee14 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // import
 
 import useHomeData from "~/composables/api/home/useHomeData";
@@ -17,45 +16,54 @@ const previewContainerEl = ref<HTMLElement | null>(null);
 
 const heymlzElement = useTemplateRef<HTMLDivElement>("heymlzElement");
 const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
-    rootMargin: "0px 0px -40% 0px"
+    rootMargin: "0px 0px -40% 0px",
 });
 
 const showHeymlzAnimation = ref(false);
 
 const { x: dragAxisX } = useDraggable(draggableEl, {
     initialValue: { x: 0, y: 0 },
-    axis: "x"
+    axis: "x",
 });
 
 // watch
 
-watch(heymlzElementIsVisible, (newValue) => {
-    if (newValue) {
-        showHeymlzAnimation.value = true;
-        setTimeout(() => {
-            showHeymlzAnimation.value = false;
-        }, 3200);
+watch(
+    heymlzElementIsVisible,
+    (newValue) => {
+        if (newValue) {
+            showHeymlzAnimation.value = true;
+            setTimeout(() => {
+                showHeymlzAnimation.value = false;
+            }, 3200);
+        }
+    },
+    {
+        once: true,
     }
-}, {
-    once: true
-});
+);
 
-watch(() => clipPathPercent.value, (newValue) => {
-    if (newValue > 80) {
-        activeSlideVideo.value = "right";
-    } else if (newValue < 20) {
-        activeSlideVideo.value = "left";
-    } else {
-        activeSlideVideo.value = "none";
+watch(
+    () => clipPathPercent.value,
+    (newValue) => {
+        if (newValue > 80) {
+            activeSlideVideo.value = "right";
+        } else if (newValue < 20) {
+            activeSlideVideo.value = "left";
+        } else {
+            activeSlideVideo.value = "none";
+        }
     }
-});
+);
 
 watch(
     () => dragAxisX.value,
     (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;
         }
@@ -64,10 +72,12 @@ watch(
 </script>
 
 <template>
-    <div class="container">
+    <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>
@@ -80,7 +90,11 @@ watch(
                     <NuxtImg
                         v-if="activeSlideVideo !== 'right'"
                         :src="homeData!.difreance_section.image1"
-                        :class="showHeymlzAnimation ? 'brightness-35' : 'brightness-[95%]'"
+                        :class="
+                            showHeymlzAnimation
+                                ? 'brightness-35'
+                                : 'brightness-[95%]'
+                        "
                         class="select-none absolute size-full object-cover transition-[filter] duration-250"
                         :alt="homeData!.difreance_section.title1"
                     />
@@ -95,13 +109,19 @@ watch(
                     />
                 </Transition>
 
-                <div class="absolute size-full right-0 w-full" ref="heymlzElement">
-
+                <div
+                    class="absolute size-full right-0 w-full"
+                    ref="heymlzElement"
+                >
                     <Transition name="fade">
                         <NuxtImg
                             v-if="activeSlideVideo !== 'left'"
                             :src="homeData!.difreance_section.image2"
-                            :class="showHeymlzAnimation ? 'brightness-35' : 'brightness-[95%]'"
+                            :class="
+                                showHeymlzAnimation
+                                    ? 'brightness-35'
+                                    : 'brightness-[95%]'
+                            "
                             class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
                             :alt="homeData!.difreance_section.title2"
                         />
@@ -116,18 +136,13 @@ watch(
                         />
                     </Transition>
 
-                    <video
+                    <NuxtImg
                         v-if="showHeymlzAnimation"
-                        src="/video/heymlz/heymlz-pulling.webm"
-                        autoplay
-                        muted
-                        playsinline
-                        loop
-                        webkit-playsinline
-                        class="size-[400px] absolute translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
+                        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))'
+                            filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))',
                         }"
                     />
 
@@ -137,28 +152,35 @@ watch(
                         }"
                         :class="[
                             activeSlideVideo !== 'none' ? 'opacity-10' : '',
-                            showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'
+                            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-2 h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
                     >
-
                         <div
                             ref="draggableEl"
-                            :class="showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'"
+                            :class="
+                                showHeymlzAnimation
+                                    ? 'bg-neutral-300'
+                                    : 'bg-black'
+                            "
                             class="cursor-grab hover:scale-115 transition-transform rounded-full absolute size-11 flex items-center justify-center"
                         >
                             <Icon
                                 name="ci:arrows"
                                 size="24"
                                 class="transition-all"
-                                :class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
+                                :class="
+                                    showHeymlzAnimation
+                                        ? '**:stroke-black'
+                                        : '**:stroke-white'
+                                "
                             />
                         </div>
                     </div>
                 </div>
 
                 <div
-                    class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
+                    class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
                 >
                     <div
                         class="flex flex-col gap-2 text-black transition-opacity"
@@ -191,9 +213,6 @@ watch(
                 </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 1108f97..e9eaa75 100644
--- a/frontend/components/home/ProductsShowcase.vue
+++ b/frontend/components/home/ProductsShowcase.vue
@@ -87,7 +87,7 @@ onUnmounted(() => {
         id="products-showcase-container"
         class="perspective-midrange relative z-[99999]"
     >
-        <div class="w-full h-[125svh] bg-black">
+        <div class="w-full h-[102svh] bg-black">
             <NuxtLink
                 v-for="slide in homeData!.show_case_slider"
                 :key="slide.id"
@@ -118,12 +118,12 @@ onUnmounted(() => {
                     <NuxtLink :to="slide.link" class="relative">
                         <NuxtImg
                             src="/img/heymlz/heymlz-falling.gif"
-                            class="absolute top-[134px] left-1/2 -translate-1/2 w-[250px]"
+                            class="absolute top-[106px] sm:top-[105px] lg:top-[117px] left-1/2 -translate-1/2 w-[250px] drop-shadow-md"
                         />
                         <Button
                             variant="primary"
                             end-icon="ci:arrow-left"
-                            class="mt-8 max-sm:hidden max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
+                            class="mt-8 max-sm:py-2 max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
                         >
                             مشاهده دسته بندی
                         </Button>
diff --git a/frontend/plugins/error-handlers.ts b/frontend/plugins/error-handlers.ts
new file mode 100644
index 0000000..a008af9
--- /dev/null
+++ b/frontend/plugins/error-handlers.ts
@@ -0,0 +1,6 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    // Also possible
+    nuxtApp.hook('vue:error', (error, instance, info) => {
+        // handle error, e.g. report to a service
+    })
+})
\ No newline at end of file
diff --git a/frontend/public/img/heymlz/footer-security.gif b/frontend/public/img/heymlz/footer-security.gif
index 69830f6..7ba32e9 100644
Binary files a/frontend/public/img/heymlz/footer-security.gif and b/frontend/public/img/heymlz/footer-security.gif differ
diff --git a/frontend/public/img/heymlz/heymlz-falling.gif b/frontend/public/img/heymlz/heymlz-falling.gif
index f5443ff..adb9a12 100644
Binary files a/frontend/public/img/heymlz/heymlz-falling.gif and b/frontend/public/img/heymlz/heymlz-falling.gif differ
diff --git a/frontend/public/img/heymlz/heymlz-fast-loading.gif b/frontend/public/img/heymlz/heymlz-fast-loading.gif
new file mode 100644
index 0000000..c002a42
Binary files /dev/null and b/frontend/public/img/heymlz/heymlz-fast-loading.gif differ
diff --git a/frontend/public/img/heymlz/heymlz-full-loading.gif b/frontend/public/img/heymlz/heymlz-full-loading.gif
new file mode 100644
index 0000000..76a6276
Binary files /dev/null and b/frontend/public/img/heymlz/heymlz-full-loading.gif differ
diff --git a/frontend/public/img/heymlz/heymlz-loading-1.gif b/frontend/public/img/heymlz/heymlz-loading-1.gif
deleted file mode 100644
index afdfa4f..0000000
Binary files a/frontend/public/img/heymlz/heymlz-loading-1.gif and /dev/null differ
diff --git a/frontend/public/img/heymlz/heymlz-loading-2.gif b/frontend/public/img/heymlz/heymlz-loading-2.gif
deleted file mode 100644
index 6cdf0b1..0000000
Binary files a/frontend/public/img/heymlz/heymlz-loading-2.gif and /dev/null differ
diff --git a/frontend/public/img/heymlz/heymlz-loading-3.gif b/frontend/public/img/heymlz/heymlz-loading-3.gif
deleted file mode 100644
index 5cef722..0000000
Binary files a/frontend/public/img/heymlz/heymlz-loading-3.gif and /dev/null differ
diff --git a/frontend/public/img/heymlz/heymlz-pulling.gif b/frontend/public/img/heymlz/heymlz-pulling.gif
new file mode 100644
index 0000000..119cab6
Binary files /dev/null and b/frontend/public/img/heymlz/heymlz-pulling.gif differ
diff --git a/frontend/public/img/heymlz/heymlz-pulling.webp b/frontend/public/img/heymlz/heymlz-pulling.webp
deleted file mode 100644
index 8cbdf51..0000000
Binary files a/frontend/public/img/heymlz/heymlz-pulling.webp and /dev/null differ
diff --git a/frontend/public/img/heymlz/heymlz-seat.gif b/frontend/public/img/heymlz/heymlz-seat.gif
index bba9aea..ff140ba 100644
Binary files a/frontend/public/img/heymlz/heymlz-seat.gif and b/frontend/public/img/heymlz/heymlz-seat.gif differ