diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d0b02da..03206ad 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,12 +5,24 @@ import About from './components/About';
 import Footer from './components/Footer';
 import Products from './components/entity/product/Products';
 import Login from './components/Login';
+import Cart from './components/Cart';
+import Checkout from './components/Checkout';
 import { AuthProvider } from './context/AuthContext';
 import { ThemeProvider } from './context/ThemeContext';
+import { CartProvider } from './context/CartContext';
 import AdminProducts from './components/admin/AdminProducts';
 import { useTheme } from './context/ThemeContext';
 
-// Wrapper component to apply theme classes
+const ROUTE_PATHS = {
+  HOME: "/",
+  ABOUT: "/about",
+  PRODUCTS: "/products",
+  CART: "/cart",
+  CHECKOUT: "/checkout",
+  LOGIN: "/login",
+  ADMIN_PRODUCTS: "/admin/products"
+};
+
 function ThemedApp() {
   const { darkMode } = useTheme();
   
@@ -20,11 +32,13 @@ function ThemedApp() {
         <Navigation />
         <main className="flex-grow">
           <Routes>
-            <Route path="/" element={<Welcome />} />
-            <Route path="/about" element={<About />} />
-            <Route path="/products" element={<Products />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/admin/products" element={<AdminProducts />} />
+            <Route path={ROUTE_PATHS.HOME} element={<Welcome />} />
+            <Route path={ROUTE_PATHS.ABOUT} element={<About />} />
+            <Route path={ROUTE_PATHS.PRODUCTS} element={<Products />} />
+            <Route path={ROUTE_PATHS.CART} element={<Cart />} />
+            <Route path={ROUTE_PATHS.CHECKOUT} element={<Checkout />} />
+            <Route path={ROUTE_PATHS.LOGIN} element={<Login />} />
+            <Route path={ROUTE_PATHS.ADMIN_PRODUCTS} element={<AdminProducts />} />
           </Routes>
         </main>
         <Footer />
@@ -37,7 +51,9 @@ function App() {
   return (
     <AuthProvider>
       <ThemeProvider>
-        <ThemedApp />
+        <CartProvider>
+          <ThemedApp />
+        </CartProvider>
       </ThemeProvider>
     </AuthProvider>
   );
diff --git a/frontend/src/components/Cart.tsx b/frontend/src/components/Cart.tsx
new file mode 100644
index 0000000..4ecf8a7
--- /dev/null
+++ b/frontend/src/components/Cart.tsx
@@ -0,0 +1,175 @@
+import { useNavigate } from "react-router-dom";
+import { useCart } from "../context/CartContext";
+import { useTheme } from "../context/ThemeContext";
+import { TAX_RATE, SHIPPING_COST } from "../constants";
+
+interface CartItemDisplayProps {
+  productId: number;
+  name: string;
+  description: string;
+  price: number;
+  imgName: string;
+  quantity: number;
+  discount?: number;
+  onQuantityChange: (id: number, newQty: number) => void;
+  onRemove: (id: number) => void;
+  isDark: boolean;
+}
+
+function CartItemDisplay(props: CartItemDisplayProps) {
+  const effectivePrice = props.discount ? props.price * (1 - props.discount) : props.price;
+  const totalPrice = effectivePrice * props.quantity;
+
+  return (
+    <div className={`${props.isDark ? "bg-gray-800" : "bg-white"} rounded-lg p-6 shadow-lg transition-colors duration-300`}>
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className={`w-full sm:w-32 h-32 ${props.isDark ? "bg-gradient-to-t from-gray-700 to-gray-800" : "bg-gradient-to-t from-gray-100 to-white"} rounded-lg flex items-center justify-center transition-colors duration-300`}>
+          <img src={`/${props.imgName}`} alt={props.name} className="w-full h-full object-contain p-2" />
+        </div>
+        <div className="flex-grow">
+          <div className="flex justify-between items-start mb-2">
+            <div>
+              <h3 className={`text-xl font-semibold ${props.isDark ? "text-light" : "text-gray-800"} transition-colors duration-300`}>{props.name}</h3>
+              <p className={`${props.isDark ? "text-gray-400" : "text-gray-600"} text-sm transition-colors duration-300`}>{props.description}</p>
+            </div>
+            <button onClick={() => props.onRemove(props.productId)} className={`${props.isDark ? "text-gray-400 hover:text-red-400" : "text-gray-600 hover:text-red-600"} transition-colors`} aria-label={`Remove ${props.name} from cart`}>
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
+            </button>
+          </div>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-4">
+            <div className="flex items-center gap-4">
+              <span className={`${props.isDark ? "text-gray-400" : "text-gray-600"} text-sm transition-colors duration-300`}>Price:</span>
+              {props.discount ? (
+                <div><span className="text-gray-500 line-through text-sm mr-2">${props.price.toFixed(2)}</span><span className="text-primary text-lg font-bold">${effectivePrice.toFixed(2)}</span></div>
+              ) : (
+                <span className="text-primary text-lg font-bold">${effectivePrice.toFixed(2)}</span>
+              )}
+            </div>
+            <div className="flex items-center justify-between sm:justify-end gap-4">
+              <div className={`flex items-center space-x-3 ${props.isDark ? "bg-gray-700" : "bg-gray-200"} rounded-lg p-1 transition-colors duration-300`}>
+                <button onClick={() => props.onQuantityChange(props.productId, props.quantity - 1)} className={`w-8 h-8 flex items-center justify-center ${props.isDark ? "text-light" : "text-gray-700"} hover:text-primary transition-colors duration-300`} aria-label={`Decrease quantity of ${props.name}`}><span aria-hidden="true">-</span></button>
+                <span className={`${props.isDark ? "text-light" : "text-gray-800"} min-w-[2rem] text-center transition-colors duration-300`} aria-label={`Quantity of ${props.name}`}>{props.quantity}</span>
+                <button onClick={() => props.onQuantityChange(props.productId, props.quantity + 1)} className={`w-8 h-8 flex items-center justify-center ${props.isDark ? "text-light" : "text-gray-700"} hover:text-primary transition-colors duration-300`} aria-label={`Increase quantity of ${props.name}`}><span aria-hidden="true">+</span></button>
+              </div>
+              <div className="text-right">
+                <span className={`${props.isDark ? "text-gray-400" : "text-gray-600"} text-sm block transition-colors duration-300`}>Total:</span>
+                <span className="text-primary text-lg font-bold">${totalPrice.toFixed(2)}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Cart() {
+  const navigate = useNavigate();
+  const { cartItems, updateQuantity, removeFromCart, getTotalPrice } = useCart();
+  const { darkMode } = useTheme();
+
+  const handleItemQuantityUpdate = (productId: number, newQuantity: number) => {
+    if (newQuantity <= 0) {
+      removeFromCart(productId);
+    } else {
+      updateQuantity(productId, newQuantity);
+    }
+  };
+
+  const handleItemRemoval = (productId: number) => {
+    removeFromCart(productId);
+  };
+
+  const goToCheckout = () => {
+    navigate("/checkout");
+  };
+
+  const continueBrowsing = () => {
+    navigate("/products");
+  };
+
+  const pricingDetails = {
+    subtotalValue: getTotalPrice(),
+    taxRate: TAX_RATE,
+    shippingCostValue: SHIPPING_COST
+  };
+
+  const taxValue = pricingDetails.subtotalValue * pricingDetails.taxRate;
+  const grandTotalValue = pricingDetails.subtotalValue + taxValue + pricingDetails.shippingCostValue;
+
+  const hasItems = cartItems && cartItems.length > 0;
+
+  if (!hasItems) {
+    return (
+      <div className={`min-h-screen ${darkMode ? "bg-dark" : "bg-gray-100"} pt-20 pb-16 px-4 transition-colors duration-300`}>
+        <div className="max-w-7xl mx-auto">
+          <h1 className={`text-3xl font-bold ${darkMode ? "text-light" : "text-gray-800"} mb-6 transition-colors duration-300`}>Shopping Cart</h1>
+          <div className={`${darkMode ? "bg-gray-800" : "bg-white"} rounded-lg p-12 text-center shadow-lg transition-colors duration-300`}>
+            <svg className={`mx-auto h-24 w-24 ${darkMode ? "text-gray-600" : "text-gray-400"} mb-4 transition-colors duration-300`} fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
+              <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+            </svg>
+            <h2 className={`text-2xl font-semibold ${darkMode ? "text-light" : "text-gray-800"} mb-2 transition-colors duration-300`}>Your cart is empty</h2>
+            <p className={`${darkMode ? "text-gray-400" : "text-gray-600"} mb-6 transition-colors duration-300`}>Add some products to get started!</p>
+            <button onClick={continueBrowsing} className="bg-primary hover:bg-accent text-white px-6 py-3 rounded-lg font-medium transition-colors">Continue Shopping</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`min-h-screen ${darkMode ? "bg-dark" : "bg-gray-100"} pt-20 pb-16 px-4 transition-colors duration-300`}>
+      <div className="max-w-7xl mx-auto">
+        <h1 className={`text-3xl font-bold ${darkMode ? "text-light" : "text-gray-800"} mb-6 transition-colors duration-300`}>Shopping Cart</h1>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-4">
+            {cartItems.map((item) => (
+              <CartItemDisplay
+                key={item.productId}
+                productId={item.productId}
+                name={item.name}
+                description={item.description}
+                price={item.price}
+                imgName={item.imgName}
+                quantity={item.quantity}
+                discount={item.discount}
+                onQuantityChange={handleItemQuantityUpdate}
+                onRemove={handleItemRemoval}
+                isDark={darkMode}
+              />
+            ))}
+          </div>
+          <div className="lg:col-span-1">
+            <div className={`${darkMode ? "bg-gray-800" : "bg-white"} rounded-lg p-6 shadow-lg transition-colors duration-300 sticky top-24`}>
+              <h2 className={`text-2xl font-semibold ${darkMode ? "text-light" : "text-gray-800"} mb-6 transition-colors duration-300`}>Order Summary</h2>
+              <div className="space-y-4 mb-6">
+                <div className="flex justify-between">
+                  <span className={`${darkMode ? "text-gray-400" : "text-gray-600"} transition-colors duration-300`}>Subtotal</span>
+                  <span className={`${darkMode ? "text-light" : "text-gray-800"} font-medium transition-colors duration-300`}>${pricingDetails.subtotalValue.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className={`${darkMode ? "text-gray-400" : "text-gray-600"} transition-colors duration-300`}>Shipping</span>
+                  <span className="text-primary font-medium">FREE</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className={`${darkMode ? "text-gray-400" : "text-gray-600"} transition-colors duration-300`}>Tax ({(TAX_RATE * 100).toFixed(0)}%)</span>
+                  <span className={`${darkMode ? "text-light" : "text-gray-800"} font-medium transition-colors duration-300`}>${taxValue.toFixed(2)}</span>
+                </div>
+                <div className={`border-t ${darkMode ? "border-gray-700" : "border-gray-200"} pt-4 transition-colors duration-300`}>
+                  <div className="flex justify-between">
+                    <span className={`text-xl font-semibold ${darkMode ? "text-light" : "text-gray-800"} transition-colors duration-300`}>Total</span>
+                    <span className="text-xl font-bold text-primary">${grandTotalValue.toFixed(2)}</span>
+                  </div>
+                </div>
+              </div>
+              <div className="space-y-3">
+                <button onClick={goToCheckout} className="w-full bg-primary hover:bg-accent text-white px-6 py-3 rounded-lg font-medium transition-colors">Proceed to Checkout</button>
+                <button onClick={continueBrowsing} className={`w-full ${darkMode ? "bg-gray-700 hover:bg-gray-600 text-light" : "bg-gray-200 hover:bg-gray-300 text-gray-800"} px-6 py-3 rounded-lg font-medium transition-colors duration-300`}>Continue Shopping</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Checkout.tsx b/frontend/src/components/Checkout.tsx
new file mode 100644
index 0000000..0682288
--- /dev/null
+++ b/frontend/src/components/Checkout.tsx
@@ -0,0 +1,300 @@
+import { useState, FormEvent, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCart } from "../context/CartContext";
+import { useTheme } from "../context/ThemeContext";
+import { TAX_RATE, SHIPPING_COST, ORDER_SUCCESS_REDIRECT_DELAY } from "../constants";
+
+// NOTE: This is a demo checkout form. In production, NEVER handle raw payment card data on the frontend.
+// Use a PCI-DSS compliant payment gateway (Stripe, PayPal, etc.) with proper tokenization.
+interface CheckoutFormData {
+  fullName: string;
+  email: string;
+  phone: string;
+  address: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  cardNumber: string;
+  expiryDate: string;
+  cvv: string;
+}
+
+export default function Checkout() {
+  const navigate = useNavigate();
+  const { cartItems, getTotalPrice, clearCart } = useCart();
+  const { darkMode } = useTheme();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [formData, setFormData] = useState<CheckoutFormData>({
+    fullName: "",
+    email: "",
+    phone: "",
+    address: "",
+    city: "",
+    state: "",
+    zipCode: "",
+    cardNumber: "",
+    expiryDate: "",
+    cvv: ""
+  });
+
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleInputChange = (fieldName: keyof CheckoutFormData, value: string) => {
+    setFormData(prevData => ({
+      ...prevData,
+      [fieldName]: value
+    }));
+  };
+
+  const handleFormSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    clearCart();
+    setShowSuccessModal(true);
+    
+    timeoutRef.current = setTimeout(() => {
+      setShowSuccessModal(false);
+      navigate("/products");
+    }, ORDER_SUCCESS_REDIRECT_DELAY);
+  };
+
+  const calculatePricing = () => {
+    const subtotalAmount = getTotalPrice();
+    const taxAmount = subtotalAmount * TAX_RATE;
+    const shippingAmount = SHIPPING_COST;
+    const totalAmount = subtotalAmount + taxAmount + shippingAmount;
+    
+    return { subtotalAmount, taxAmount, shippingAmount, totalAmount };
+  };
+
+  const pricing = calculatePricing();
+
+  const inputBaseClasses = `w-full px-4 py-2 ${
+    darkMode ? "bg-gray-800 text-light border-gray-700" : "bg-white text-gray-800 border-gray-300"
+  } rounded-lg border focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-colors duration-300`;
+
+  const labelClasses = `block ${darkMode ? "text-light" : "text-gray-800"} font-medium mb-2 transition-colors duration-300`;
+
+  return (
+    <div className={`min-h-screen ${darkMode ? "bg-dark" : "bg-gray-100"} pt-20 pb-16 px-4 transition-colors duration-300`}>
+      <div className="max-w-7xl mx-auto">
+        <h1 className={`text-3xl font-bold ${darkMode ? "text-light" : "text-gray-800"} mb-6 transition-colors duration-300`}>Checkout</h1>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2">
+            <form onSubmit={handleFormSubmit} className={`${darkMode ? "bg-gray-800" : "bg-white"} rounded-lg p-6 shadow-lg transition-colors duration-300`}>
+              <h2 className={`text-2xl font-semibold ${darkMode ? "text-light" : "text-gray-800"} mb-6 transition-colors duration-300`}>Billing Information</h2>
+              
+              <div className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label htmlFor="fullName" className={labelClasses}>Full Name</label>
+                    <input
+                      type="text"
+                      id="fullName"
+                      value={formData.fullName}
+                      onChange={(e) => handleInputChange("fullName", e.target.value)}
+                      className={inputBaseClasses}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="email" className={labelClasses}>Email</label>
+                    <input
+                      type="email"
+                      id="email"
+                      value={formData.email}
+                      onChange={(e) => handleInputChange("email", e.target.value)}
+                      className={inputBaseClasses}
+                      required
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="phone" className={labelClasses}>Phone</label>
+                  <input
+                    type="tel"
+                    id="phone"
+                    value={formData.phone}
+                    onChange={(e) => handleInputChange("phone", e.target.value)}
+                    className={inputBaseClasses}
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="address" className={labelClasses}>Address</label>
+                  <input
+                    type="text"
+                    id="address"
+                    value={formData.address}
+                    onChange={(e) => handleInputChange("address", e.target.value)}
+                    className={inputBaseClasses}
+                    required
+                  />
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <label htmlFor="city" className={labelClasses}>City</label>
+                    <input
+                      type="text"
+                      id="city"
+                      value={formData.city}
+                      onChange={(e) => handleInputChange("city", e.target.value)}
+                      className={inputBaseClasses}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="state" className={labelClasses}>State</label>
+                    <input
+                      type="text"
+                      id="state"
+                      value={formData.state}
+                      onChange={(e) => handleInputChange("state", e.target.value)}
+                      className={inputBaseClasses}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="zipCode" className={labelClasses}>Zip Code</label>
+                    <input
+                      type="text"
+                      id="zipCode"
+                      value={formData.zipCode}
+                      onChange={(e) => handleInputChange("zipCode", e.target.value)}
+                      className={inputBaseClasses}
+                      required
+                    />
+                  </div>
+                </div>
+
+                <hr className={`${darkMode ? "border-gray-700" : "border-gray-200"} my-6 transition-colors duration-300`} />
+
+                <h2 className={`text-2xl font-semibold ${darkMode ? "text-light" : "text-gray-800"} mb-6 transition-colors duration-300`}>Payment Information</h2>
+
+                <div>
+                  <label htmlFor="cardNumber" className={labelClasses}>Card Number</label>
+                  <input
+                    type="text"
+                    id="cardNumber"
+                    value={formData.cardNumber}
+                    onChange={(e) => handleInputChange("cardNumber", e.target.value)}
+                    className={inputBaseClasses}
+                    placeholder="1234 5678 9012 3456"
+                    required
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label htmlFor="expiryDate" className={labelClasses}>Expiry Date</label>
+                    <input
+                      type="text"
+                      id="expiryDate"
+                      value={formData.expiryDate}
+                      onChange={(e) => handleInputChange("expiryDate", e.target.value)}
+                      className={inputBaseClasses}
+                      placeholder="MM/YY"
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="cvv" className={labelClasses}>CVV</label>
+                    <input
+                      type="text"
+                      id="cvv"
+                      value={formData.cvv}
+                      onChange={(e) => handleInputChange("cvv", e.target.value)}
+                      className={inputBaseClasses}
+                      placeholder="123"
+                      required
+                    />
+                  </div>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full bg-primary hover:bg-accent text-white px-6 py-3 rounded-lg font-medium transition-colors mt-6"
+                >
+                  Place Order
+                </button>
+              </div>
+            </form>
+          </div>
+
+          <div className="lg:col-span-1">
+            <div className={`${darkMode ? "bg-gray-800" : "bg-white"} rounded-lg p-6 shadow-lg transition-colors duration-300 sticky top-24`}>
+              <h2 className={`text-2xl font-semibold ${darkMode ? "text-light" : "text-gray-800"} mb-6 transition-colors duration-300`}>Order Summary</h2>
+              
+              <div className="space-y-4 mb-6">
+                <div className="max-h-64 overflow-y-auto space-y-3">
+                  {cartItems.map((item) => {
+                    const effectivePrice = item.discount ? item.price * (1 - item.discount) : item.price;
+                    return (
+                      <div key={item.productId} className="flex items-center gap-3">
+                        <div className={`w-16 h-16 ${darkMode ? "bg-gradient-to-t from-gray-700 to-gray-800" : "bg-gradient-to-t from-gray-100 to-white"} rounded flex items-center justify-center transition-colors duration-300`}>
+                          <img src={`/${item.imgName}`} alt={item.name} className="w-full h-full object-contain p-1" />
+                        </div>
+                        <div className="flex-grow">
+                          <h4 className={`text-sm font-medium ${darkMode ? "text-light" : "text-gray-800"} transition-colors duration-300`}>{item.name}</h4>
+                          <p className={`text-xs ${darkMode ? "text-gray-400" : "text-gray-600"} transition-colors duration-300`}>Qty: {item.quantity}</p>
+                        </div>
+                        <span className="text-primary font-bold">${(effectivePrice * item.quantity).toFixed(2)}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                <hr className={`${darkMode ? "border-gray-700" : "border-gray-200"} transition-colors duration-300`} />
+
+                <div className="flex justify-between">
+                  <span className={`${darkMode ? "text-gray-400" : "text-gray-600"} transition-colors duration-300`}>Subtotal</span>
+                  <span className={`${darkMode ? "text-light" : "text-gray-800"} font-medium transition-colors duration-300`}>${pricing.subtotalAmount.toFixed(2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className={`${darkMode ? "text-gray-400" : "text-gray-600"} transition-colors duration-300`}>Shipping</span>
+                  <span className="text-primary font-medium">FREE</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className={`${darkMode ? "text-gray-400" : "text-gray-600"} transition-colors duration-300`}>Tax ({(TAX_RATE * 100).toFixed(0)}%)</span>
+                  <span className={`${darkMode ? "text-light" : "text-gray-800"} font-medium transition-colors duration-300`}>${pricing.taxAmount.toFixed(2)}</span>
+                </div>
+                <div className={`border-t ${darkMode ? "border-gray-700" : "border-gray-200"} pt-4 transition-colors duration-300`}>
+                  <div className="flex justify-between">
+                    <span className={`text-xl font-semibold ${darkMode ? "text-light" : "text-gray-800"} transition-colors duration-300`}>Total</span>
+                    <span className="text-xl font-bold text-primary">${pricing.totalAmount.toFixed(2)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {showSuccessModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className={`${darkMode ? "bg-gray-800" : "bg-white"} rounded-lg p-8 max-w-md w-full text-center shadow-xl transition-colors duration-300`}>
+            <div className="flex justify-center mb-4">
+              <svg className="w-16 h-16 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <h2 className={`text-2xl font-bold ${darkMode ? "text-light" : "text-gray-800"} mb-2 transition-colors duration-300`}>Order Placed Successfully!</h2>
+            <p className={`${darkMode ? "text-gray-400" : "text-gray-600"} mb-4 transition-colors duration-300`}>Thank you for your purchase. Redirecting to products...</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index d7b393b..feee8da 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -1,12 +1,15 @@
 import { Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { useTheme } from '../context/ThemeContext';
+import { useCart } from '../context/CartContext';
 import { useState } from 'react';
 
 export default function Navigation() {
   const { isLoggedIn, isAdmin, logout } = useAuth();
   const { darkMode, toggleTheme } = useTheme();
+  const { getTotalItems } = useCart();
   const [adminMenuOpen, setAdminMenuOpen] = useState(false);
+  const cartItemCount = getTotalItems();
 
   return (
     <nav className={`${darkMode ? 'bg-dark/95' : 'bg-white/95'} backdrop-blur-sm fixed w-full z-50 shadow-md transition-colors duration-300`}>
@@ -68,6 +71,16 @@ export default function Navigation() {
             </div>
           </div>
           <div className="flex items-center space-x-4">
+            <Link to="/cart" className="relative p-2 rounded-full focus:outline-none transition-colors" aria-label="Shopping cart">
+              <svg xmlns="http://www.w3.org/2000/svg" className={`h-6 w-6 ${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} transition-colors`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              {cartItemCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">
+                  {cartItemCount}
+                </span>
+              )}
+            </Link>
             <button
               onClick={toggleTheme}
               className="p-2 rounded-full focus:outline-none transition-colors"
diff --git a/frontend/src/components/entity/product/Products.tsx b/frontend/src/components/entity/product/Products.tsx
index af2319e..3e1bf27 100644
--- a/frontend/src/components/entity/product/Products.tsx
+++ b/frontend/src/components/entity/product/Products.tsx
@@ -3,6 +3,7 @@ import axios from 'axios';
 import { useQuery } from 'react-query';
 import { api } from '../../../api/config';
 import { useTheme } from '../../../context/ThemeContext';
+import { useCart } from '../../../context/CartContext';
 
 interface Product {
   productId: number;
@@ -28,6 +29,7 @@ export default function Products() {
   const [showModal, setShowModal] = useState(false);
   const { data: products, isLoading, error } = useQuery('products', fetchProducts);
   const { darkMode } = useTheme();
+  const { addToCart } = useCart();
 
   const filteredProducts = products?.filter(product => 
     product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -44,12 +46,15 @@ export default function Products() {
   const handleAddToCart = (productId: number) => {
     const quantity = quantities[productId] || 0;
     if (quantity > 0) {
-      // TODO: Implement cart functionality
-      alert(`Added ${quantity} items to cart`);
-      setQuantities(prev => ({
-        ...prev,
-        [productId]: 0
-      }));
+      const product = products?.find(p => p.productId === productId);
+      if (product) {
+        addToCart(product, quantity);
+        alert(`Added ${quantity} ${product.name} to cart`);
+        setQuantities(prev => ({
+          ...prev,
+          [productId]: 0
+        }));
+      }
     }
   };
 
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
new file mode 100644
index 0000000..6c2b954
--- /dev/null
+++ b/frontend/src/constants.ts
@@ -0,0 +1,6 @@
+// Application-wide constants
+
+export const TAX_RATE = 0.08; // 8% tax rate
+export const SHIPPING_COST = 0; // Free shipping
+
+export const ORDER_SUCCESS_REDIRECT_DELAY = 3000; // 3 seconds
diff --git a/frontend/src/context/CartContext.tsx b/frontend/src/context/CartContext.tsx
new file mode 100644
index 0000000..cdfbf57
--- /dev/null
+++ b/frontend/src/context/CartContext.tsx
@@ -0,0 +1,104 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface Product {
+  productId: number;
+  name: string;
+  description: string;
+  price: number;
+  imgName: string;
+  sku: string;
+  unit: string;
+  supplierId: number;
+  discount?: number; // Expected as decimal (0.1 = 10% off)
+}
+
+interface CartItem extends Product {
+  quantity: number;
+}
+
+interface CartContextType {
+  cartItems: CartItem[];
+  addToCart: (product: Product, quantity: number) => void;
+  removeFromCart: (productId: number) => void;
+  updateQuantity: (productId: number, quantity: number) => void;
+  clearCart: () => void;
+  getTotalItems: () => number;
+  getTotalPrice: () => number;
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+export function CartProvider({ children }: { children: ReactNode }) {
+  const [cartItems, setCartItems] = useState<CartItem[]>([]);
+
+  const addToCart = (product: Product, quantity: number) => {
+    setCartItems((prev) => {
+      const existingItem = prev.find((item) => item.productId === product.productId);
+      if (existingItem) {
+        return prev.map((item) =>
+          item.productId === product.productId
+            ? { ...item, quantity: item.quantity + quantity }
+            : item
+        );
+      }
+      return [...prev, { ...product, quantity }];
+    });
+  };
+
+  const removeFromCart = (productId: number) => {
+    setCartItems((prev) => prev.filter((item) => item.productId !== productId));
+  };
+
+  const updateQuantity = (productId: number, quantity: number) => {
+    if (quantity <= 0) {
+      removeFromCart(productId);
+      return;
+    }
+    setCartItems((prev) =>
+      prev.map((item) =>
+        item.productId === productId ? { ...item, quantity } : item
+      )
+    );
+  };
+
+  const clearCart = () => {
+    setCartItems([]);
+  };
+
+  const getTotalItems = () => {
+    return cartItems.reduce((total, item) => total + item.quantity, 0);
+  };
+
+  const getTotalPrice = () => {
+    return cartItems.reduce((total, item) => {
+      const price = item.discount
+        ? item.price * (1 - item.discount)
+        : item.price;
+      return total + price * item.quantity;
+    }, 0);
+  };
+
+  return (
+    <CartContext.Provider
+      value={{
+        cartItems,
+        addToCart,
+        removeFromCart,
+        updateQuantity,
+        clearCart,
+        getTotalItems,
+        getTotalPrice,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (context === undefined) {
+    throw new Error("useCart must be used within a CartProvider");
+  }
+  return context;
+}