diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 27767ad..bd5a48b 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -22,7 +22,6 @@ const Checkout = () => {
     let ship = searchParams.get('ship')
 
     const { cartState, clearCart } = useCart();
-    const [cart, setCart] = useState<any[]>([])
     const [totalCart, setTotalCart] = useState<number>(0)
     const [activePayment, setActivePayment] = useState<string>('credit-card')
     const [selectedCountry, setSelectedCountry] = useState<string>('')
@@ -42,41 +41,24 @@ const Checkout = () => {
         note: ''
     })
 
-    // Fetch cart data from API
-    useEffect(() => {
-        getCartData()
-    }, [])
+    // ✅ Use cartState.cartArray as the source of truth for BOTH guest and logged-in users
+    const cart = cartState.cartArray;
+    console.log("📦 Checkout - Cart from CartContext:", cart);
 
     // Calculate total whenever cart changes
     useEffect(() => {
         if (cart && cart.length > 0) {
-            const total = cart.reduce((acc: number, item: any) => acc + (item.price * item.quantity), 0)
-            setTotalCart(total)
+            const total = cart.reduce((acc: number, item: any) => {
+                const price = item.price || 0;
+                const quantity = item.quantity || item.quantityPurchase || 1;
+                return acc + (price * quantity);
+            }, 0);
+            setTotalCart(total);
+        } else {
+            setTotalCart(0);
         }
     }, [cart])
 
-    const getCartData = async () => {
-        const token = localStorage.getItem("token")
-        if (!token) {
-            console.error("❌ No token found in localStorage");
-            return;
-        }
-
-        try {
-            const res = await axios.get(`${BaseURL}/cart`, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    "Content-Type": "application/json"
-                },
-                withCredentials: true
-            })
-            console.log("Cart response ✅:", res.data);
-            setCart(res?.data?.cart?.items || [])
-        } catch (error) {
-            console.error("❌ Error fetching cart:", error)
-        }
-    }
-
     const handleCountryChange = (countryName: string) => {
         setSelectedCountry(countryName)
         const country = locationData.countries.find(c => c.name === countryName)
@@ -146,7 +128,6 @@ const Checkout = () => {
                     // Clear cart immediately after successful order
                     console.log("💳 Cash on Delivery order successful - clearing cart");
                     clearCart()
-                    setCart([])
                     router.push(`/order-success?orderId=${response.data.data._id}&orderNumber=${response.data.data.orderNumber}`)
                 }
             }
@@ -191,7 +172,6 @@ const Checkout = () => {
                     // Clear cart immediately after successful order
                     console.log("💳 Credit Card/Stripe order successful - clearing cart");
                     clearCart()
-                    setCart([])
                     router.push(`/order-success?orderId=${orderId}&orderNumber=${response.data.data.orderNumber}`)
                 }
             }
@@ -416,36 +396,46 @@ const Checkout = () => {
                                     {cart.length < 1 ? (
                                         <p className='text-button pt-3'>No product in cart</p>
                                     ) : (
-                                        cart.map((item, index) => (
-                                            <div key={index} className="item flex items-center justify-between w-full pb-5 border-b border-line gap-6 mt-5">
-                                                <div className="bg-img w-[100px] aspect-square flex-shrink-0 rounded-lg overflow-hidden">
-                                                    <Image
-                                                        src={item.product.thumbImage[0]}
-                                                        width={500}
-                                                        height={500}
-                                                        alt='img'
-                                                        className='w-full h-full'
-                                                    />
-                                                </div>
-                                                <div className="flex items-center justify-between w-full">
-                                                    <div>
-                                                        <div className="name text-title">{item.product.name}</div>
-                                                        <div className="caption1 text-secondary mt-2">
-                                                            <span className='size capitalize'>{item.size}</span>
-                                                            <span>/</span>
-                                                            <span className='color capitalize'>{item.color}</span>
+                                        cart.map((item: any, index: number) => {
+                                            // Handle both API format (item.product.name) and CartContext format (item.name)
+                                            const itemName = item.product?.name || item.name;
+                                            const itemImage = item.product?.thumbImage?.[0] || item.thumbImage?.[0] || item.images?.[0];
+                                            const itemSize = item.size || item.selectedSize || item.sizes?.[0];
+                                            const itemColor = item.color || item.selectedColor || item.variation?.[0]?.color;
+                                            const itemQuantity = item.quantity || item.quantityPurchase || 1;
+                                            const itemPrice = item.price;
+
+                                            return (
+                                                <div key={index} className="item flex items-center justify-between w-full pb-5 border-b border-line gap-6 mt-5">
+                                                    <div className="bg-img w-[100px] aspect-square flex-shrink-0 rounded-lg overflow-hidden">
+                                                        <Image
+                                                            src={itemImage}
+                                                            width={500}
+                                                            height={500}
+                                                            alt='img'
+                                                            className='w-full h-full'
+                                                        />
+                                                    </div>
+                                                    <div className="flex items-center justify-between w-full">
+                                                        <div>
+                                                            <div className="name text-title">{itemName}</div>
+                                                            <div className="caption1 text-secondary mt-2">
+                                                                <span className='size capitalize'>{itemSize}</span>
+                                                                <span>/</span>
+                                                                <span className='color capitalize'>{itemColor}</span>
+                                                            </div>
+                                                        </div>
+                                                        <div className="text-title">
+                                                            <span className='quantity'>{itemQuantity}</span>
+                                                            <span className='px-1'>x</span>
+                                                            <span>
+                                                                ${itemPrice}.00
+                                                            </span>
                                                         </div>
                                                     </div>
-                                                    <div className="text-title">
-                                                        <span className='quantity'>{item.quantity}</span>
-                                                        <span className='px-1'>x</span>
-                                                        <span>
-                                                            ${item.price}.00
-                                                        </span>
-                                                    </div>
                                                 </div>
-                                            </div>
-                                        ))
+                                            );
+                                        })
                                     )}
                                 </div>
                                 <div className="discount-block py-5 flex justify-between border-b border-line">