diff --git a/frontend/components/global/product-detail/QuantityCounter.vue b/frontend/components/global/product-detail/QuantityCounter.vue
index 8cbe6f2..29a8748 100644
--- a/frontend/components/global/product-detail/QuantityCounter.vue
+++ b/frontend/components/global/product-detail/QuantityCounter.vue
@@ -5,6 +5,7 @@
 type Props = {
     modelValue: number;
     max: number;
+    disable: boolean;
 }
 
 // props
@@ -48,6 +49,7 @@ const onInput = (e: any) => {
 
 <template>
     <NumberFieldRoot
+        :disabled="disable"
         class="rounded-full border-slate-200 border-[1.5px] flex items-center bg-white gap-4 p-4"
         v-model="currentQuantity"
         :min="1"
@@ -58,7 +60,7 @@ const onInput = (e: any) => {
         </NumberFieldIncrement>
         <NumberFieldInput
             @input="onInput"
-            class="field-sizing-content bg-transparent w-[30px] text-center outline-none typo-label-md text-black"
+            class="field-sizing-content w-[30px] bg-transparent text-center outline-none typo-label-md text-black"
         />
         <NumberFieldDecrement class="cursor-pointer">
             <Icon name="ci:minus" class="**:stroke-slate-500 size-5" />