diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index 8f8b6a5..17ba187 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -26,7 +26,7 @@ const { $queryClient: queryClient } = useNuxtApp();
 const { addToast } = useToast();
 
 const counter = ref(data.value.quantity);
-const debouncedCounter = refDebounced(counter, 700);
+const debouncedCounter = refDebounced(counter, 500);
 
 const { isLoading: cartImageIsLoading } = useImage({
     src: data.value.product.image,
@@ -34,8 +34,7 @@ const { isLoading: cartImageIsLoading } = useImage({
 
 // queries
 
-const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } =
-    useDeleteCartItem();
+const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } = useDeleteCartItem();
 
 const { mutateAsync: addCartItem } = useAddCartItem();
 
@@ -96,6 +95,7 @@ watch(
             {
                 onSuccess: () => {
                     invalidateCart();
+                    queryClient.refetchQueries({ queryKey: [QUERY_KEYS.product, data.value.product.id] });
                 },
                 onError: () => {
                     invalidateCart();
@@ -134,24 +134,23 @@ watch(
 
             <div class="flex flex-col w-full gap-3 lg:gap-4">
                 <div class="flex items-center justify-between gap-3">
-                    <span
-                        class="font-semibold typo-sub-h-xs lg:typo-sub-h-sm text-slate-600"
-                    >
+                    <span class="font-semibold typo-sub-h-xs lg:typo-sub-h-sm text-slate-600">
                         {{ data.product.category }}
                     </span>
                     <div
                         v-if="data.discount > 0"
                         class="text-white bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[10px] lg:text-xs rounded-full flex items-center gap-1"
                     >
-                        <Icon name="bi:percent" class="size-4" />
+                        <Icon
+                            name="bi:percent"
+                            class="size-4"
+                        />
                         {{ data.discount }}
                         تخفیف
                     </div>
                 </div>
 
-                <span
-                    class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black"
-                >
+                <span class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black">
                     {{ data.product.title }}
                 </span>
 
@@ -171,8 +170,7 @@ watch(
                     </div>
                     <span
                         v-if="data.product.product_attributes.length > 0"
-                        v-for="(variant, index) in data.product
-                            .product_attributes"
+                        v-for="(variant, index) in data.product.product_attributes"
                         :index="index"
                         class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm"
                     >
@@ -180,20 +178,17 @@ watch(
                     </span>
                 </div>
 
-                <div
-                    class="items-center justify-between hidden w-full lg:flex -mt-1"
-                >
+                <div class="items-center justify-between hidden w-full lg:flex -mt-1">
                     <div class="flex items-center">
                         <button
                             @click="handleIncreaseQuantity"
                             class="border size-10 flex-center rounded-100 border-slate-300"
-                            :class="
-                                deleteCartItemIsPending
-                                    ? 'pointer-events-none'
-                                    : ''
-                            "
+                            :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
                         >
-                            <Icon name="bi:plus" class="**:stroke-slate-800" />
+                            <Icon
+                                name="bi:plus"
+                                class="**:stroke-slate-800"
+                            />
                         </button>
 
                         <div class="size-10 flex-center">{{ counter }}</div>
@@ -201,19 +196,11 @@ watch(
                         <button
                             @click="handleDecreaseQuantity"
                             class="border size-10 flex-center rounded-100 border-slate-300"
-                            :class="
-                                deleteCartItemIsPending
-                                    ? 'pointer-events-none'
-                                    : ''
-                            "
+                            :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
                         >
                             <Icon
                                 v-if="counter == 1"
-                                :name="
-                                    deleteCartItemIsPending
-                                        ? 'svg-spinners:3-dots-bounce'
-                                        : 'bi:trash'
-                                "
+                                :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
                                 class="**:fill-red-700"
                             />
                             <Icon
@@ -232,9 +219,7 @@ watch(
                             >
                                 {{ data.price }}
                             </span>
-                            <span
-                                class="typo-p-xl relative flex-center w-fit font-medium"
-                            >
+                            <span class="typo-p-xl relative flex-center w-fit font-medium">
                                 {{ data.final_price }}
                             </span>
                         </div>
@@ -248,11 +233,12 @@ watch(
                 <button
                     @click="handleIncreaseQuantity"
                     class="border size-7 p-1 lg:size-10 flex-center rounded-50 border-slate-300"
-                    :class="
-                        deleteCartItemIsPending ? 'pointer-events-none' : ''
-                    "
+                    :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
                 >
-                    <Icon name="bi:plus" class="**:stroke-slate-800" />
+                    <Icon
+                        name="bi:plus"
+                        class="**:stroke-slate-800"
+                    />
                 </button>
 
                 <div class="size-10 text-sm flex-center">
@@ -262,20 +248,18 @@ watch(
                 <button
                     @click="handleDecreaseQuantity"
                     class="border size-7 lg:size-10 p-1 flex-center rounded-50 border-slate-300"
-                    :class="
-                        deleteCartItemIsPending ? 'pointer-events-none' : ''
-                    "
+                    :class="deleteCartItemIsPending ? 'pointer-events-none' : ''"
                 >
                     <Icon
                         v-if="counter == 1"
-                        :name="
-                            deleteCartItemIsPending
-                                ? 'svg-spinners:3-dots-bounce'
-                                : 'bi:trash'
-                        "
+                        :name="deleteCartItemIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:trash'"
                         class="**:fill-red-700"
                     />
-                    <Icon v-else name="bi:dash" class="**:stroke-slate-800" />
+                    <Icon
+                        v-else
+                        name="bi:dash"
+                        class="**:stroke-slate-800"
+                    />
                 </button>
             </div>