diff --git a/frontend/components/cart/index/DeleteCartAllModal.vue b/frontend/components/cart/index/DeleteCartAllModal.vue
new file mode 100644
index 0000000..fb146de
--- /dev/null
+++ b/frontend/components/cart/index/DeleteCartAllModal.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+// imports
+
+import useDeleteCartAll from "~/composables/api/orders/useDeleteCartAll";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
+
+// state
+
+const { $queryClient: queryClient } = useNuxtApp();
+const router = useRouter();
+const { addToast } = useToast();
+
+const isShow = ref(false);
+
+// queries
+
+const { mutateAsync: deleteCartAll, isPending: deleteCartAllIsPending } =
+    useDeleteCartAll();
+
+// methods
+
+const handleSubmit = () => {
+    deleteCartAll(undefined, {
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
+            isShow.value = false;
+            addToast({
+                message: "سبد با موفقیت حذف شد",
+                options: {
+                    status: "success",
+                },
+            });
+            setTimeout(() => {
+                router.push({ name: "index" });
+            }, 1000);
+        },
+        onError: () => {
+            addToast({
+                message: "خطایی در حذف سبد رخ داد",
+                options: {
+                    status: "error",
+                },
+            });
+        },
+    });
+};
+</script>
+
+<template>
+    <Modal
+        v-model="isShow"
+        title="ورژن جدید"
+        contectClass="!w-[90vw] lg:!w-[35vw]"
+        @close="isShow = false"
+    >
+        <template #trigger>
+            <Button class="rounded-full" end-icon="bi:trash" size="md">
+                حذف همه
+            </Button>
+        </template>
+
+        <template #content>
+            <div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
+                <p>آیا از حذف تمام محصولات از سبد خرید اطمینان دارید؟</p>
+                <p>این فرایند غیر قابل بازگشت است</p>
+            </div>
+
+            <div class="py-6 border-t border-slate-200 flex gap-3">
+                <Button
+                    @click="handleSubmit"
+                    class="rounded-full px-10"
+                    size="md"
+                >
+                    <Icon
+                        v-if="deleteCartAllIsPending"
+                        name="svg-spinners:3-dots-bounce"
+                    />
+                    <span v-else>بله</span>
+                </Button>
+                <DialogClose aria-label="Close">
+                    <Button
+                        variant="outlined"
+                        class="rounded-full px-10"
+                        size="md"
+                    >
+                        انصراف
+                    </Button>
+                </DialogClose>
+            </div>
+        </template>
+    </Modal>
+</template>
+
+<style scoped></style>