diff --git a/frontend/assets/css/other.utils.css b/frontend/assets/css/other.utils.css
index 45c7fec..a34b0b2 100644
--- a/frontend/assets/css/other.utils.css
+++ b/frontend/assets/css/other.utils.css
@@ -1,7 +1,7 @@
 @utility persian-number {
-    -moz-font-feature-settings: "ss03";
-    -webkit-font-feature-settings: "ss03";
-    font-feature-settings: "ss03";
+    -moz-font-feature-settings: "ss02";
+    -webkit-font-feature-settings: "ss02";
+    font-feature-settings: "ss02";
 }
 
 @utility text-gradient {
diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index 457a707..1e26aa7 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/frontend/components/global/BlogPost.vue
@@ -39,7 +39,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
 
             <Tag
                 v-if="variant === 'lg'"
-                class="bg-success-500 absolute left-6 top-6 z-20"
+                class="bg-slate-950 absolute left-6 top-6 z-20"
             >
                 {{ category.name }}
             </Tag>
@@ -49,7 +49,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
                 class="aspect-square w-full rounded-150 overflow-hidden relative"
             >
                 <Tag
-                    class="bg-success-500 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
+                    class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
                 >
                     {{ category.name }}
                 </Tag>
diff --git a/frontend/components/global/LoadingOverlay.vue b/frontend/components/global/LoadingOverlay.vue
index 57494c6..fecd7bf 100644
--- a/frontend/components/global/LoadingOverlay.vue
+++ b/frontend/components/global/LoadingOverlay.vue
@@ -92,7 +92,7 @@ onMounted(() => {
                 src="/img/heymlz/heymlz-text-logo.png"
                 class="invert w-[250px]"
             />
-            <div class="bg-slate-800 w-[400px] h-1 rounded-full overflow-hidden">
+            <div class="bg-slate-800 w-[300px] sm:w-[400px] h-1 rounded-full overflow-hidden">
                 <div
                     class="bg-slate-100 h-full w-full transition-all duration-250"
                     :style="progressStyle"
diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index f82f172..b033fa7 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -97,7 +97,9 @@ const changeSlide = (id: number) => {
                     :key="slide"
                     class="py-4"
                 >
-                    <div class="brightness-[97%] bg-white aspect-square rounded-[12px] md:rounded-200 w-full" />
+                    <div class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full">
+                        <Icon name="ci:image-slash" class="size-[40px] sm:size-[60px] **:fill-black/20" />
+                    </div>
                 </SwiperSlide>
             </Swiper>
 
diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index 745cdb8..f96e0dc 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -22,11 +22,17 @@ type Props = {
 // props
 
 const props = defineProps<Props>();
-const { id } = toRefs(props);
+const { id, colors } = toRefs(props);
 
 // state
 
 const { colorObject } = useImageColor(`#product-image-${id.value}`);
+
+// computed
+
+const limitedColors = computed(() => {
+    return colors.value.slice(0, 3);
+});
 </script>
 
 <template>
@@ -51,33 +57,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
                     <div
                         class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
                     >
-                        <Rate v-if="rate" :rate="rate" />
+                        <Rate
+                            v-if="rate"
+                            :rate="rate"
+                        />
                         <Tag v-if="tag">
                             {{ tag }}
                         </Tag>
                     </div>
                     <div
-                        :class="
-                            colorObject?.isLight && !darkLayer
-                                ? 'text-black'
-                                : 'text-white'
-                        "
+                        :class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
                         class="absolute inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
                     >
                         <div class="flex flex-col gap-2 items-start w-full">
-                            <span
-                                class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full"
-                            >
+                            <span class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full">
                                 {{ title }}
                             </span>
-                            <div
-                                class="flex items-center justify-between w-full mt-1"
-                            >
-                                <div
-                                    class="flex items-center gap-2 @[280px]:mt-1"
-                                >
+                            <div class="flex items-center justify-between w-full mt-1">
+                                <div class="flex items-center gap-2 @[280px]:mt-1">
                                     <ColorCircle
-                                        v-for="color in colors"
+                                        v-for="color in limitedColors"
                                         :key="color"
                                         :style="{ backgroundColor: color }"
                                         class="!size-5 @[280px]:!size-6"
@@ -93,18 +92,12 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
                     </div>
                 </div>
 
-                <div
-                    class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden"
-                >
+                <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden">
                     <span class="typo-sub-h-sm w-full truncate">
                         {{ title }}
                     </span>
-                    <div
-                        class="@[280px]:hidden flex items-center justify-between w-full mt-1"
-                    >
-                        <span
-                            class="typo-p-xs !font-semibold whitespace-nowrap"
-                        >
+                    <div class="@[280px]:hidden flex items-center justify-between w-full mt-1">
+                        <span class="typo-p-xs !font-semibold whitespace-nowrap">
                             {{ price }}
                         </span>
                     </div>
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index 21eece2..e5d9730 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -98,7 +98,19 @@ const limitedComments = computed(() => {
                     :username="'منصور مرزبان'"
                 />
 
-                <div class="flex items-center justify-center w-full">
+                <div
+                    class="h-[400px] lg:flex-grow w-full border-[0.5px] flex-col-center border-slate-200 bg-white rounded-xl"
+                >
+                    <NuxtImg
+                        src="/img/heymlz/heymlz-contact-us.gif"
+                        class="w-[200px] lg:w-[300px] translate-y-[-25px]"
+                    />
+                    <span class="text-xl text-black font-semibold translate-y-[-25px]"> هیچ نظری ثبت نشده است </span>
+                </div>
+                <div
+                    v-if="comments!.count > 0"
+                    class="flex items-center justify-center w-full"
+                >
                     <Pagination
                         v-if="showMoreComments"
                         :total="comments!.count"
diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index 66b6fcf..f5880de 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -59,6 +59,9 @@ watch(
     (newValue) => {
         selectedQuantity.value = 1;
         selectedSlide.value = newValue.images[0].id;
+    },
+    {
+        immediate: true,
     }
 );
 </script>
@@ -180,7 +183,7 @@ watch(
 
             <div class="flex items-center gap-6 flex-wrap">
                 <ProductVariant
-                    @click="variant.in_stock > 0 ? (selectedVariantId = variant.id) : undefined"
+                    @click="selectedVariantId = variant.id"
                     v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
                     :key="variant.id"
                     :variantDetail="variant"
@@ -190,57 +193,67 @@ watch(
 
             <div class="w-full flex flex-col gap-6 mt-10">
                 <RemainQuantity
+                    v-if="selectedVariant!.in_stock > 0"
                     :showSlider="selectedVariant!.cart_quantity === 0"
                     :maxQuantity="selectedVariant!.in_stock"
                     :quantity="selectedQuantity"
                 />
 
                 <div class="w-full flex gap-3">
-                    <template v-if="token">
-                        <Button
-                            v-if="selectedVariant!.cart_quantity === 0"
-                            @click="addItemToCart"
-                            :loading="isAddCartItemPending"
-                            :disabled="isAddCartItemPending"
-                            class="w-full rounded-full max-sm:h-[48px]"
-                            end-icon="ci:plus"
-                        >
-                            افزودن به سبد خرید
-                        </Button>
+                    <template v-if="selectedVariant!.in_stock > 0">
+                        <template v-if="token">
+                            <Button
+                                v-if="selectedVariant!.cart_quantity === 0"
+                                @click="addItemToCart"
+                                :loading="isAddCartItemPending"
+                                :disabled="isAddCartItemPending"
+                                class="w-full rounded-full max-sm:h-[48px]"
+                                end-icon="ci:plus"
+                            >
+                                افزودن به سبد خرید
+                            </Button>
+                            <NuxtLink
+                                v-else
+                                to="/cart"
+                                class="w-full"
+                            >
+                                <Button
+                                    class="w-full rounded-full h-full max-sm:h-[48px]"
+                                    end-icon="ci:cart"
+                                >
+                                    مشاهده در سبد خرید
+                                </Button>
+                            </NuxtLink>
+                        </template>
                         <NuxtLink
                             v-else
-                            to="/cart"
+                            to="/signin"
                             class="w-full"
                         >
                             <Button
                                 class="w-full rounded-full h-full max-sm:h-[48px]"
-                                end-icon="ci:cart"
+                                end-icon="ci:user"
                             >
-                                مشاهده در سبد خرید
+                                ابتدا وارد شوید
                             </Button>
                         </NuxtLink>
                     </template>
-                    <NuxtLink
+
+                    <Button
                         v-else
-                        to="/signin"
-                        class="w-full"
+                        class="w-full !cursor-default rounded-full h-full max-sm:h-[48px]"
+                        end-icon="ci:cart"
                     >
-                        <Button
-                            class="w-full rounded-full h-full max-sm:h-[48px]"
-                            end-icon="ci:user"
-                        >
-                            ابتدا وارد شوید
-                        </Button>
-                    </NuxtLink>
+                        اتمام موجودی
+                    </Button>
 
                     <QuantityCounter
-                        v-if="selectedVariant!.cart_quantity === 0"
+                        v-if="selectedVariant!.in_stock > 0 && selectedVariant!.cart_quantity === 0"
                         :disable="isAddCartItemPending"
                         v-model="selectedQuantity"
                         :max="selectedVariant!.in_stock"
                     />
-
-                    <UpdateQuantity v-else />
+                    <UpdateQuantity v-else-if="selectedVariant!.in_stock > 0" />
                 </div>
 
                 <InfoCard />
diff --git a/frontend/components/product/ProductVariant.vue b/frontend/components/product/ProductVariant.vue
index 3e16e09..e203e85 100644
--- a/frontend/components/product/ProductVariant.vue
+++ b/frontend/components/product/ProductVariant.vue
@@ -13,22 +13,12 @@ defineProps<Props>();
 
 <template>
     <div
-        :class="[
-            isSelected ? 'border-blue-500' : 'border-slate-300',
-            variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100',
-        ]"
-        class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4"
+        :class="isSelected ? 'border-blue-500' : 'border-slate-300'"
+        class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4 cursor-pointer"
     >
         <div>
             <div
-                :class="[
-                    isSelected
-                        ? 'ring-blue-500 bg-blue-500'
-                        : 'ring-slate-300 bg-slate-300',
-                    variantDetail.in_stock > 0
-                        ? ''
-                        : '!ring-slate-100 !bg-slate-300-100',
-                ]"
+                :class="isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300'"
                 class="size-3 mt-2 ring-2 ring-offset-2 rounded-full"
             ></div>
         </div>
@@ -38,27 +28,25 @@ defineProps<Props>();
                     {{ variantDetail.price }}
                 </span>
                 <div
-                    v-if="variantDetail.discount > 0"
-                    :class="
-                        variantDetail.in_stock > 0
-                            ? 'bg-blue-500'
-                            : 'bg-slate-400/60'
-                    "
-                    class="text-white mb-1 px-3 py-1 text-xs rounded-full w-fit flex items-center justify-center gap-1"
+                    v-if="variantDetail.in_stock > 0 && variantDetail.discount > 0"
+                    class="text-white mb-1 px-3 py-1 bg-blue-500 text-xs rounded-full w-fit flex items-center justify-center gap-1"
                 >
-                    <template v-if="variantDetail.in_stock > 0">
-                        <Icon name="bi:percent" class="size-3.5" />
-                        <span class="mt-px">
-                            {{ variantDetail.discount }}
-                        </span>
-                    </template>
-
-                    <span v-else class="mt-px"> اتمام موجودی </span>
+                    <Icon
+                        name="bi:percent"
+                        class="size-3.5"
+                    />
+                    <span class="mt-px">
+                        {{ variantDetail.discount }}
+                    </span>
+                </div>
+                <div
+                    v-if="variantDetail.in_stock === 0"
+                    class="text-slate-700 mb-1 px-3 py-1 bg-slate-200 text-xs rounded-full w-fit flex items-center justify-center gap-1"
+                >
+                    اتمام موجودی
                 </div>
             </div>
-            <div
-                class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4"
-            >
+            <div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
                 <!--                <div-->
                 <!--                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
                 <!--                >-->
diff --git a/frontend/pages/contact-us.vue b/frontend/pages/contact-us.vue
index 7f47c7c..dc7d036 100644
--- a/frontend/pages/contact-us.vue
+++ b/frontend/pages/contact-us.vue
@@ -168,7 +168,7 @@ const contactWays = ref([
             </div>
             <div class="w-full lg:w-4/12 h-full flex-center">
                 <NuxtImg
-                    src="/img/heymlz/contact-us.gif"
+                    src="/img/heymlz/heymlz-contact-us.gif"
                     class="size-2/3 -mt-5 lg:scale-150 drop-shadow-2xl"
                 />
             </div>
diff --git a/frontend/public/icons/image-slash.svg b/frontend/public/icons/image-slash.svg
new file mode 100644
index 0000000..463b5c5
--- /dev/null
+++ b/frontend/public/icons/image-slash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --><defs><style>.fa-secondary{opacity:.4}</style></defs><path class="fa-secondary" d="M64 146.4L64 416c0 35.3 28.7 64 64 64l359.4 0-81.2-64L320 416l-72 0-96 0c-9.3 0-17.8-5.4-21.8-13.9s-2.6-18.5 3.5-25.6l88-104c.3-.4 .6-.7 1-1.1L64 146.4zM89.5 44.9c23.1 18.1 46.2 36.2 69.3 54.3c5.3-2 11.1-3.2 17.2-3.2c26.5 0 48 21.5 48 48c0 2-.1 4-.4 6c34.8 27.3 69.7 54.6 104.5 81.9l20-29.4c4.5-6.6 11.9-10.5 19.8-10.5s15.4 3.9 19.8 10.5L499.4 366.1l75.9 59.5c.5-3.1 .7-6.3 .7-9.6l0-320c0-35.3-28.7-64-64-64L128 32c-14.4 0-27.8 4.8-38.5 12.9z"/><path class="fa-primary" d="M5.1 9.2C13.3-1.2 28.4-3.1 38.8 5.1l592 464c10.4 8.2 12.3 23.3 4.1 33.7s-23.3 12.3-33.7 4.1L9.2 42.9C-1.2 34.7-3.1 19.6 5.1 9.2z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/img/heymlz/contact-us.gif b/frontend/public/img/heymlz/heymlz-contact-us.gif
similarity index 100%
rename from frontend/public/img/heymlz/contact-us.gif
rename to frontend/public/img/heymlz/heymlz-contact-us.gif