diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index 694624d..f5880de 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -183,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"
@@ -193,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]"-->
                 <!--                >-->