diff --git a/frontend/components/global/product-detail/RemainQuantity.vue b/frontend/components/global/product-detail/RemainQuantity.vue
index b47a72b..957e966 100644
--- a/frontend/components/global/product-detail/RemainQuantity.vue
+++ b/frontend/components/global/product-detail/RemainQuantity.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
     maxQuantity: number;
     quantity: number;
-}
+    showSlider: boolean;
+};
 
 // props
 
 defineProps<Props>();
-
 </script>
 
 <template>
@@ -22,11 +21,11 @@ defineProps<Props>();
             </span>
             عدد از این محصول موجود است
         </p>
-        <div class="h-2 rounded-full relative bg-slate-200 w-full">
+        <div v-if="showSlider" class="h-2 rounded-full relative bg-slate-200 w-full">
             <div
                 :style="{ width: `${quantity * (100 / maxQuantity)}%` }"
                 class="h-full absolute right-0 rounded-full bg-black transition-all ease-out"
             />
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/global/product-detail/UpdateQuantity.vue b/frontend/components/global/product-detail/UpdateQuantity.vue
index 6b4102c..b399800 100644
--- a/frontend/components/global/product-detail/UpdateQuantity.vue
+++ b/frontend/components/global/product-detail/UpdateQuantity.vue
@@ -7,9 +7,7 @@ import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
 
 // provide / inject
 
-const { selectedVariant } = inject(
-    "productVariant"
-) as ProductVariantProvideType;
+const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
 
 // state
 
@@ -46,15 +44,14 @@ watch(
 );
 
 watch(selectedVariant, (newValue) => {
-    quantity.value = newValue!.cart_quantity;
+    quantity.value = newValue!.cart_quantity === 0 ? 1 : newValue!.cart_quantity;
 });
 
 // lifecycle
 
 onMounted(() => {
-    quantity.value = selectedVariant.value!.cart_quantity;
+    quantity.value = selectedVariant.value!.cart_quantity === 0 ? 1 : selectedVariant.value!.cart_quantity;
 });
-
 </script>
 
 <template>
@@ -65,14 +62,20 @@ onMounted(() => {
         :max="selectedVariant!.in_stock"
     >
         <NumberFieldIncrement class="cursor-pointer">
-            <Icon name="ci:plus" class="**:stroke-slate-500 size-5" />
+            <Icon
+                name="ci:plus"
+                class="**:stroke-slate-500 size-5"
+            />
         </NumberFieldIncrement>
         <div class="relative">
             <div
                 :class="isAddCartItemPending ? 'opacity-100' : 'opacity-0'"
                 class="w-[40px] h-[25px] flex-center transition-all absolute bg-white"
             >
-                <Icon :name="'svg-spinners:180-ring-with-bg'" class="size-[25px]" />
+                <Icon
+                    :name="'svg-spinners:180-ring-with-bg'"
+                    class="size-[25px]"
+                />
             </div>
             <NumberFieldInput
                 @input="onInput"
@@ -81,7 +84,10 @@ onMounted(() => {
             />
         </div>
         <NumberFieldDecrement class="cursor-pointer">
-            <Icon name="ci:minus" class="**:stroke-slate-500 size-5" />
+            <Icon
+                name="ci:minus"
+                class="**:stroke-slate-500 size-5"
+            />
         </NumberFieldDecrement>
     </NumberFieldRoot>
 </template>
diff --git a/frontend/components/global/product/StickyCard.vue b/frontend/components/global/product/StickyCard.vue
index 61b486c..d2b7f41 100644
--- a/frontend/components/global/product/StickyCard.vue
+++ b/frontend/components/global/product/StickyCard.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
@@ -7,33 +6,49 @@ type Props = {
     title: string;
     color: string;
     price: string;
-}
+};
 
 // props
 
 const props = defineProps<Props>();
 const { picture, price, title, color } = toRefs(props);
 
+// methods
+
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+};
 </script>
 
 <template>
-    <div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 bg-white rounded-150">
+    <div
+        class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 gap-4 bg-white rounded-150"
+    >
         <div class="flex items-center gap-4">
             <div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
-                <NuxtImg :src="picture" :alt="title" class="object-cover absolute" />
+                <NuxtImg
+                    :src="picture"
+                    :alt="title"
+                    class="object-cover absolute"
+                />
             </div>
             <div class="flex flex-col gap-1.5">
                 <span class="typo-sub-h-md text-black">{{ title }}</span>
                 <div class="flex items-center gap-2">
                     <span class="typo-p-sm text-slate-500">رنگ</span>
-                    <ColorCircle class="!size-5" :style="{backgroundColor: color}" />
+                    <ColorCircle
+                        class="!size-5"
+                        :style="{ backgroundColor: color }"
+                    />
                 </div>
                 <span class="typo-p-md text-black">{{ price }}</span>
             </div>
         </div>
-        <Button class="rounded-full max-sm:h-[45px]">
-            افزودن
-            <span class="max-sm:hidden">به سبد</span>
+        <Button
+            @click="scrollToTop"
+            class="rounded-full max-sm:h-[45px]"
+        >
+            مشاهده
         </Button>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/home/Preview.vue b/frontend/components/home/Preview.vue
index 66168b6..bdaa9bf 100644
--- a/frontend/components/home/Preview.vue
+++ b/frontend/components/home/Preview.vue
@@ -139,7 +139,7 @@ watch(
                     <Transition name="fade" :duration="250">
                         <NuxtImg
                             v-if="showHeymlzAnimation"
-                            src="/img/heymlz/heymlz-pulling.gif"
+                            src="/img/heymlz/heymlz-pullingg.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}%`,
diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index 4322663..66b6fcf 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -37,13 +37,10 @@ const addItemToCart = async () => {
 
 // watch
 
-watch(
-    () => selectedVariantId.value,
-    (newId) => {
-        const newVariant = product.value!.variants.find((variant) => variant.id === newId)!;
-        changeSelectedVariant(newVariant);
-    }
-);
+watch([selectedVariantId, product], ([selectedVariantId, product]) => {
+    const newVariant = product!.variants.find((variant) => variant.id === selectedVariantId)!;
+    changeSelectedVariant(newVariant);
+});
 
 watch(
     () => selectedColor.value,
@@ -193,6 +190,7 @@ watch(
 
             <div class="w-full flex flex-col gap-6 mt-10">
                 <RemainQuantity
+                    :showSlider="selectedVariant!.cart_quantity === 0"
                     :maxQuantity="selectedVariant!.in_stock"
                     :quantity="selectedQuantity"
                 />
diff --git a/frontend/public/img/heymlz/heymlz-pulling.gif b/frontend/public/img/heymlz/heymlz-pullingg.gif
similarity index 100%
rename from frontend/public/img/heymlz/heymlz-pulling.gif
rename to frontend/public/img/heymlz/heymlz-pullingg.gif