diff --git a/frontend/components/cart/CartItem.vue b/frontend/components/cart/CartItem.vue
deleted file mode 100644
index 88fa21f..0000000
--- a/frontend/components/cart/CartItem.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup lang="ts">
-// state
-
-const counter = ref(1);
-
-// methods
-
-const handleDeleteFromCart = () => {};
-</script>
-
-<template>
-    <div
-        class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50"
-    >
-        <div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
-            <div
-                class="size-[10rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
-            >
-                <img
-                    src="/img/product-1.jpg"
-                    class="object-cover size-full"
-                    alt="product"
-                />
-            </div>
-
-            <div class="flex flex-col w-full gap-5">
-                <span class="font-semibold typo-sub-h-md text-slate-600">
-                    موبایل
-                </span>
-
-                <span class="font-semibold typo-sub-h-xl text-black">
-                    فشارسنج بازویی امرن Omron M3
-                </span>
-
-                <div class="items-center justify-between hidden w-full lg:flex">
-                    <div class="flex items-center">
-                        <button
-                            @click="counter++"
-                            class="border size-10 flex-center rounded-100 border-slate-300"
-                        >
-                            <Icon name="bi:plus" class="**:stroke-slate-800" />
-                        </button>
-
-                        <div class="size-10 flex-center">{{ counter }}</div>
-
-                        <button
-                            @click="
-                                counter > 1 ? counter-- : handleDeleteFromCart
-                            "
-                            class="border size-10 flex-center rounded-100 border-slate-300"
-                        >
-                            <Icon
-                                v-if="counter == 1"
-                                name="bi:trash"
-                                class="**:fill-red-700"
-                            />
-                            <Icon
-                                v-else
-                                name="bi:dash"
-                                class="**:stroke-slate-800"
-                            />
-                        </button>
-                    </div>
-
-                    <span class="typo-p-lg text-black font-semibold">
-                        ۲,۸۹۱,۰۰۰&nbsp;تومان
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="flex items-center justify-between w-full lg:hidden">
-            <div class="flex items-center">
-                <button
-                    class="border size-10 flex-center rounded-100 border-slate-400"
-                >
-                    <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        class="stroke-slate-800"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M3.33334 8H12.6667"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        ></path>
-                        <path
-                            d="M8 3.33325V12.6666"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        ></path>
-                    </svg>
-                </button>
-
-                <div class="size-10 text-[1.125rem] flex-center">1</div>
-
-                <button
-                    class="border size-10 flex-center rounded-100 border-slate-400"
-                >
-                    <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        class="stroke-status-error-primary"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M2 4H14"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        ></path>
-                        <path
-                            d="M12.6667 4V13.3333C12.6667 14 12 14.6667 11.3333 14.6667H4.66668C4.00001 14.6667 3.33334 14 3.33334 13.3333V4"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        ></path>
-                        <path
-                            d="M5.33334 3.99992V2.66659C5.33334 1.99992 6.00001 1.33325 6.66668 1.33325H9.33334C10 1.33325 10.6667 1.99992 10.6667 2.66659V3.99992"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        ></path>
-                    </svg>
-                </button>
-            </div>
-
-            <span class="text-[1.125rem] text-slate-900 font-semibold">
-                ۲,۸۹۱,۰۰۰&nbsp;تومان
-            </span>
-        </div>
-    </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
new file mode 100644
index 0000000..698f1a4
--- /dev/null
+++ b/frontend/components/cart/index/CartItem.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+// imports
+
+import { useImage } from "@vueuse/core";
+import { useToast } from "~/composables/global/useToast";
+import useDeleteCartItem from "~/composables/api/orders/useDeleteCartAll";
+import { QUERY_KEYS } from "~/constants";
+import useAddCartItem from "~/composables/api/orders/useAddCartItem";
+
+// types
+
+type Props = {
+    data: CartItem;
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { data } = toRefs(props);
+
+// state
+
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { addToast } = useToast();
+
+const counter = ref(data.value.quantity);
+const debouncedCounter = refDebounced(counter, 700);
+
+const { isLoading: cartImageIsLoading } = useImage({
+    src: data.value.product.image,
+});
+
+// queries
+
+const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } =
+    useDeleteCartItem();
+
+const { mutateAsync: addCartItem } = useAddCartItem();
+
+// methods
+
+const invalidateCart = () => {
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
+};
+
+const handleDeleteFromCart = () => {
+    deleteCartItem(
+        { id: data.value.id },
+        {
+            onSuccess: () => {
+                invalidateCart();
+            },
+            onError: () => {
+                addToast({
+                    message: "خطایی در حذف محصول از سبد رخ داد",
+                    options: {
+                        status: "error",
+                    },
+                });
+            },
+        }
+    );
+};
+
+const handleIncreaseQuantity = () => {
+    if (counter.value == data.value.product.in_stock) {
+        addToast({
+            message: "به حداکثر موجودی انبار رسیده اید",
+            options: {
+                status: "error",
+                description: `تعداد موجودی ${data.value.product.in_stock} عدد میباشد`,
+            },
+        });
+    } else {
+        counter.value++;
+    }
+};
+
+const handleDecreaseQuantity = () => {
+    if (counter.value == 1) {
+        handleDeleteFromCart();
+    } else if (counter.value > 1) {
+        counter.value--;
+    }
+};
+
+// watch
+
+watch(
+    () => debouncedCounter.value,
+    (nv) => {
+        addCartItem(
+            { id: data.value.id, quantity: nv },
+            {
+                onSuccess: () => {
+                    invalidateCart();
+                },
+                onError: () => {
+                    invalidateCart();
+                    addToast({
+                        message: `خطایی در تغییر تعداد محصول ${data.value.product.title} رخ داد`,
+                        options: {
+                            status: "error",
+                        },
+                    });
+                },
+            }
+        );
+    }
+);
+</script>
+
+<template>
+    <li
+        class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50 overflow-hidden relative"
+    >
+        <img
+            src="/logo.png"
+            class="absolute -top-5 -left-5 rotate-[135deg] size-28"
+        />
+
+        <div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
+            <Skeleton
+                v-if="cartImageIsLoading"
+                class="!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
+            />
+
+            <div
+                v-else
+                class="size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
+            >
+                <img
+                    :src="data.product.image"
+                    class="object-cover size-full"
+                    alt="product"
+                />
+            </div>
+
+            <div class="flex flex-col w-full gap-4">
+                <span class="font-semibold typo-sub-h-sm text-slate-600">
+                    {{ data.product.category }}
+                </span>
+
+                <div class="flex items-center justify-start gap-3">
+                    <span class="font-semibold typo-sub-h-xl text-black">
+                        {{ data.product.title }}
+                    </span>
+                    <div
+                        v-if="data.product.discount > 0"
+                        class="text-white bg-blue-500 px-4 py-2 text-xs rounded-full flex items-center gap-1"
+                    >
+                        <Icon name="material-symbols:percent" class="size-4" />
+                        {{ data.product.discount }}
+                        % تخفیف
+                    </div>
+                </div>
+
+                <div class="flex items-center justify-start gap-1.5">
+                    <div
+                        v-if="!!data.product.color"
+                        class="px-3 py-1 rounded-full border border-slate-200 text-sm flex-center gap-1.5"
+                    >
+                        <span> رنگ </span>
+                        <span
+                            class="!size-4 shadow-black/30 shadow-inner rounded-full"
+                            :style="{
+                                backgroundColor: `${data.product.color}`,
+                            }"
+                        >
+                        </span>
+                    </div>
+                    <span
+                        v-if="data.product.product_attributes.length > 0"
+                        v-for="(variant, index) in data.product
+                            .product_attributes"
+                        :index="index"
+                        class="px-3 py-1 rounded-full border border-slate-200 text-sm"
+                    >
+                        {{ variant.value }}
+                    </span>
+                </div>
+
+                <div
+                    class="items-center justify-between hidden w-full lg:flex -mt-3"
+                >
+                    <div class="flex items-center">
+                        <button
+                            @click="handleIncreaseQuantity"
+                            class="border size-10 flex-center rounded-100 border-slate-300"
+                            :class="
+                                deleteCartItemIsPending
+                                    ? 'pointer-events-none'
+                                    : ''
+                            "
+                        >
+                            <Icon name="bi:plus" class="**:stroke-slate-800" />
+                        </button>
+
+                        <div class="size-10 flex-center">{{ counter }}</div>
+
+                        <button
+                            @click="handleDecreaseQuantity"
+                            class="border size-10 flex-center rounded-100 border-slate-300"
+                            :class="
+                                deleteCartItemIsPending
+                                    ? 'pointer-events-none'
+                                    : ''
+                            "
+                        >
+                            <Icon
+                                v-if="counter == 1"
+                                :name="
+                                    deleteCartItemIsPending
+                                        ? 'svg-spinners:3-dots-bounce'
+                                        : 'bi:trash'
+                                "
+                                class="**:fill-red-700"
+                            />
+                            <Icon
+                                v-else
+                                name="bi:dash"
+                                class="**:stroke-slate-800"
+                            />
+                        </button>
+                    </div>
+
+                    <div class="flex items-end gap-2">
+                        <div class="flex flex-col">
+                            <span
+                                v-if="data.product.discount > 0"
+                                class="typo-p-sm relative flex-center w-fit line-through"
+                            >
+                                {{ data.product.price }}
+                            </span>
+                            <span
+                                class="typo-p-xl relative flex-center w-fit font-medium"
+                            >
+                                {{ data.product.final_price }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex items-center justify-between w-full lg:hidden">
+            <div class="flex items-center">
+                <button
+                    @click="handleIncreaseQuantity"
+                    class="border size-10 flex-center rounded-100 border-slate-300"
+                    :class="
+                        deleteCartItemIsPending ? 'pointer-events-none' : ''
+                    "
+                >
+                    <Icon name="bi:plus" class="**:stroke-slate-800" />
+                </button>
+
+                <div class="size-10 text-[1.125rem] flex-center">1</div>
+
+                <button
+                    @click="handleDecreaseQuantity"
+                    class="border size-10 flex-center rounded-100 border-slate-300"
+                    :class="
+                        deleteCartItemIsPending ? 'pointer-events-none' : ''
+                    "
+                >
+                    <Icon
+                        v-if="counter == 1"
+                        :name="
+                            deleteCartItemIsPending
+                                ? 'svg-spinners:3-dots-bounce'
+                                : 'bi:trash'
+                        "
+                        class="**:fill-red-700"
+                    />
+                    <Icon v-else name="bi:dash" class="**:stroke-slate-800" />
+                </button>
+            </div>
+
+            <span class="text-[1.125rem] text-slate-900 font-semibold">
+                {{ data.product.price }}
+            </span>
+        </div>
+    </li>
+</template>
+
+<style scoped></style>