diff --git a/src/app/my/cart/[storeId]/page.tsx b/src/app/my/cart/[storeId]/page.tsx
index 49b227b..45160c9 100644
--- a/src/app/my/cart/[storeId]/page.tsx
+++ b/src/app/my/cart/[storeId]/page.tsx
@@ -1,4 +1,5 @@
 import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
 
 import CartConfirmButton from "../_components/cart-confirm-button";
 import CartItem from "../_components/cart-item";
@@ -43,6 +44,7 @@ export default async function MyCartPage({
   }, 0);
 
   if (cartItem.length === 0) {
+    redirect("/my/cart/all");
     return (
       <div className="flex flex-grow flex-col items-center justify-center space-y-4 text-center text-xl font-semibold">
         <ShoppingCart size={40} />
diff --git a/src/app/my/cart/_components/cart-item.tsx b/src/app/my/cart/_components/cart-item.tsx
index bdd73b1..d74ec1c 100644
--- a/src/app/my/cart/_components/cart-item.tsx
+++ b/src/app/my/cart/_components/cart-item.tsx
@@ -1,6 +1,19 @@
 "use client";
 
+import { Trash } from "lucide-react";
+
 import ImageCardPrimitive from "@/components/image-card/image-card-primitive";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 import useCart from "@/hooks/use-cart";
 
 export default function CartItem({
@@ -18,7 +31,7 @@ export default function CartItem({
   image: string;
   dishQuantity: number;
 }) {
-  const { updateCart } = useCart();
+  const { updateCart, removeFromCart } = useCart();
   const handleUpdateCart = async (number: number) => {
     await updateCart(id, number);
   };
@@ -31,12 +44,45 @@ export default function CartItem({
         maxAmount: dishQuantity - quantity,
       }}
       image={image}
+      className="relative"
     >
       <div className="flex justify-between">
         <h1 className="line-clamp-2 font-semibold">{name}</h1>
       </div>
 
       <div className="text-sm text-muted-foreground">$ {price}</div>
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button
+            size={"icon"}
+            variant="outline"
+            className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
+          >
+            <Trash className="h-3 w-3" strokeWidth={3} />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Remove Item</DrawerTitle>
+            <DrawerDescription>This action cannot be undone.</DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter>
+            <Button
+              variant={"destructive"}
+              onClick={() => {
+                removeFromCart(id);
+              }}
+            >
+              Delete
+            </Button>
+            <DrawerClose asChild>
+              <Button variant="outline" className="block w-full">
+                Cancel
+              </Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
     </ImageCardPrimitive>
   );
 }