diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
new file mode 100644
index 0000000..22d4ff5
--- /dev/null
+++ b/src/app/cart/page.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import { useState } from "react";
+import { ShoppingCart, Trash2, Minus, Plus } from "lucide-react";
+import Link from "next/link";
+
+interface CartItem {
+  id: string;
+  name: string;
+  price: string;
+  quantity: number;
+  imageSrc: string;
+}
+
+export default function CartPage() {
+  const [cartItems, setCartItems] = useState<CartItem[]>([
+    {
+      id: "1",      name: "Classic Rainbow Lollipops",      price: "$12.99",      quantity: 2,
+      imageSrc: "http://img.b2bpic.net/free-photo/valentines-day-postcard-with-red-lollipops-white-background_1268-31406.jpg"},
+  ]);
+
+  const handleQuantityChange = (id: string, newQuantity: number) => {
+    if (newQuantity < 1) return;
+    setCartItems(cartItems.map(item =>
+      item.id === id ? { ...item, quantity: newQuantity } : item
+    ));
+  };
+
+  const handleRemove = (id: string) => {
+    setCartItems(cartItems.filter(item => item.id !== id));
+  };
+
+  const calculateTotal = () => {
+    return cartItems.reduce((total, item) => {
+      const price = parseFloat(item.price.replace("$", ""));
+      return total + (price * item.quantity);
+    }, 0).toFixed(2);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Sweet Baby C's"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Our Story", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Reviews", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+          ]}
+          button={{ text: "Continue Shopping", href: "/" }}
+        />
+      </div>
+
+      <div className="min-h-screen py-20 px-4 md:px-8">
+        <div className="max-w-4xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <ShoppingCart className="w-8 h-8" />
+            <h1 className="text-4xl font-bold">Shopping Cart</h1>
+          </div>
+
+          {cartItems.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-xl mb-6">Your cart is empty</p>
+              <Link
+                href="/"
+                className="inline-block px-6 py-3 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-full font-semibold hover:opacity-90 transition-opacity"
+              >
+                Continue Shopping
+              </Link>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-4 mb-8">
+                {cartItems.map((item) => (
+                  <div
+                    key={item.id}
+                    className="flex gap-4 p-4 bg-[var(--card)] rounded-lg border border-[var(--accent)]"
+                  >
+                    <img
+                      src={item.imageSrc}
+                      alt={item.name}
+                      className="w-24 h-24 object-cover rounded-lg"
+                    />
+                    <div className="flex-1">
+                      <h3 className="font-semibold mb-2">{item.name}</h3>
+                      <p className="text-lg font-bold mb-4">{item.price}</p>
+                      <div className="flex items-center gap-3">
+                        <button
+                          onClick={() => handleQuantityChange(item.id, item.quantity - 1)}
+                          className="p-1 rounded hover:bg-[var(--background-accent)] transition-colors"
+                          aria-label="Decrease quantity"
+                        >
+                          <Minus className="w-4 h-4" />
+                        </button>
+                        <span className="w-8 text-center font-semibold">{item.quantity}</span>
+                        <button
+                          onClick={() => handleQuantityChange(item.id, item.quantity + 1)}
+                          className="p-1 rounded hover:bg-[var(--background-accent)] transition-colors"
+                          aria-label="Increase quantity"
+                        >
+                          <Plus className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => handleRemove(item.id)}
+                      className="p-2 rounded hover:bg-red-100 text-red-600 transition-colors self-start"
+                      aria-label="Remove item"
+                    >
+                      <Trash2 className="w-5 h-5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              <div className="bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)]">
+                <div className="flex justify-between items-center mb-6">
+                  <span className="text-xl font-semibold">Total:</span>
+                  <span className="text-3xl font-bold text-[var(--primary-cta)]">${calculateTotal()}</span>
+                </div>
+                <button className="w-full py-3 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-full font-semibold hover:opacity-90 transition-opacity">
+                  Proceed to Checkout
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}