diff --git a/frontend/package.json b/frontend/package.json
index bc9fa52..8d357b1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "test": "vitest run",
     "preview": "vite preview"
   },
   "dependencies": {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d0b02da..26e9af1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,8 +4,10 @@ import Welcome from './components/Welcome';
 import About from './components/About';
 import Footer from './components/Footer';
 import Products from './components/entity/product/Products';
+import CartPage from './components/cart/CartPage';
 import Login from './components/Login';
 import { AuthProvider } from './context/AuthContext';
+import { CartProvider } from './context/CartContext';
 import { ThemeProvider } from './context/ThemeContext';
 import AdminProducts from './components/admin/AdminProducts';
 import { useTheme } from './context/ThemeContext';
@@ -23,6 +25,7 @@ function ThemedApp() {
             <Route path="/" element={<Welcome />} />
             <Route path="/about" element={<About />} />
             <Route path="/products" element={<Products />} />
+            <Route path="/cart" element={<CartPage />} />
             <Route path="/login" element={<Login />} />
             <Route path="/admin/products" element={<AdminProducts />} />
           </Routes>
@@ -36,9 +39,11 @@ function ThemedApp() {
 function App() {
   return (
     <AuthProvider>
-      <ThemeProvider>
-        <ThemedApp />
-      </ThemeProvider>
+      <CartProvider>
+        <ThemeProvider>
+          <ThemedApp />
+        </ThemeProvider>
+      </CartProvider>
     </AuthProvider>
   );
 }
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 7ce970f..4d4abc9 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { useTheme } from '../context/ThemeContext';
 
 const Footer: React.FC = () => {
@@ -20,8 +21,8 @@ const Footer: React.FC = () => {
           <div>
             <h2 className="font-bold text-xl mb-4 text-primary">Account</h2>
             <ul className="space-y-2">
-              <li><a href="#" className="hover:text-primary">My Cart</a></li>
-              <li><a href="#" className="hover:text-primary">Checkout</a></li>
+              <li><Link to="/cart" className="hover:text-primary">My Cart</Link></li>
+              <li><Link to="/cart" className="hover:text-primary">Checkout</Link></li>
               <li><a href="#" className="hover:text-primary">Shopping Details</a></li>
               <li><a href="#" className="hover:text-primary">Order</a></li>
               <li><a href="#" className="hover:text-primary">Help Center</a></li>
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index d7b393b..fb66426 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -1,10 +1,12 @@
 import { Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
+import { useCart } from '../context/CartContext';
 import { useTheme } from '../context/ThemeContext';
 import { useState } from 'react';
 
 export default function Navigation() {
   const { isLoggedIn, isAdmin, logout } = useAuth();
+  const { itemCount } = useCart();
   const { darkMode, toggleTheme } = useTheme();
   const [adminMenuOpen, setAdminMenuOpen] = useState(false);
 
@@ -29,6 +31,7 @@ export default function Navigation() {
             <div className="ml-10 flex items-baseline space-x-4">
               <Link to="/" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors`}>Home</Link>
               <Link to="/products" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors`}>Products</Link>
+              <Link to="/cart" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors`}>Cart</Link>
               <Link to="/about" className={`${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'} px-3 py-2 rounded-md text-sm font-medium transition-colors`}>About us</Link>
               {isAdmin && (
                 <div className="relative">
@@ -68,6 +71,18 @@ export default function Navigation() {
             </div>
           </div>
           <div className="flex items-center space-x-4">
+            <Link
+              to="/cart"
+              className={`relative px-3 py-2 rounded-md text-sm font-medium transition-colors ${darkMode ? 'text-light hover:text-primary' : 'text-gray-700 hover:text-primary'}`}
+              aria-label={`Open cart with ${itemCount} items`}
+            >
+              Cart
+              {itemCount > 0 && (
+                <span className="absolute -top-1 -right-2 min-w-[1.2rem] h-5 px-1 bg-primary text-white text-xs rounded-full flex items-center justify-center">
+                  {itemCount}
+                </span>
+              )}
+            </Link>
             <button
               onClick={toggleTheme}
               className="p-2 rounded-full focus:outline-none transition-colors"
diff --git a/frontend/src/components/cart/CartPage.tsx b/frontend/src/components/cart/CartPage.tsx
new file mode 100644
index 0000000..366b595
--- /dev/null
+++ b/frontend/src/components/cart/CartPage.tsx
@@ -0,0 +1,235 @@
+import { useMemo, useState } from 'react';
+import { useCart } from '../../context/CartContext';
+import { useTheme } from '../../context/ThemeContext';
+import { DEFAULT_DISCOUNT_RATE } from '../../types/cart';
+import {
+  getCartSubtotal,
+  getDiscountAmount,
+  getGrandTotal,
+  getLineTotal,
+  getShippingAmount,
+  getUnitPrice,
+} from '../../utils/cartCalculations';
+
+const formatCurrency = (value: number): string => {
+  return `$${value.toFixed(2)}`;
+};
+
+export default function CartPage() {
+  const { darkMode } = useTheme();
+  const { items, coupon, updateQuantity, removeItem, applyCoupon, clearCoupon, persistCart, lastUpdatedAt } = useCart();
+  const [couponInput, setCouponInput] = useState(coupon?.code ?? '');
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+
+  const summary = useMemo(() => {
+    const subtotal = getCartSubtotal(items);
+    const discountRate = coupon?.discountRate ?? DEFAULT_DISCOUNT_RATE;
+    const discount = getDiscountAmount(subtotal, discountRate);
+    const shipping = getShippingAmount(subtotal, Boolean(coupon?.freeShipping));
+    const grandTotal = getGrandTotal(subtotal, discount, shipping);
+
+    return {
+      subtotal,
+      discountRate,
+      discount,
+      shipping,
+      grandTotal,
+    };
+  }, [items, coupon]);
+
+  const handleApplyCoupon = () => {
+    const result = applyCoupon(couponInput);
+    setStatusMessage(result.message);
+  };
+
+  const handleUpdateCart = () => {
+    persistCart();
+    setStatusMessage('Cart updated.');
+  };
+
+  const discountLabel = `Discount (${Math.round(summary.discountRate * 100)}%)`;
+
+  return (
+    <div className={`min-h-screen pt-20 pb-16 px-3 md:px-6 ${darkMode ? 'bg-dark' : 'bg-gray-100'} transition-colors duration-300`}>
+      <div className="max-w-7xl mx-auto">
+        <h1 className={`text-3xl font-bold mb-6 ${darkMode ? 'text-light' : 'text-gray-800'} transition-colors duration-300`}>
+          Shopping Cart
+        </h1>
+
+        <div className="grid grid-cols-1 xl:grid-cols-[2.7fr_1fr] gap-6">
+          <section className={`rounded-xl border ${darkMode ? 'border-gray-700 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900' : 'border-gray-300 bg-white'} overflow-hidden`} aria-label="Cart table">
+            {items.length > 0 ? (
+              <>
+                <div className="overflow-x-auto">
+                  <table className="w-full min-w-[780px] border-collapse">
+                    <thead>
+                      <tr className={`${darkMode ? 'bg-gray-900/70 text-light' : 'bg-gray-100 text-gray-700'} text-left`}>
+                        <th className="px-4 py-4 font-semibold border-b border-gray-700/30">S. No.</th>
+                        <th className="px-4 py-4 font-semibold border-b border-gray-700/30">Product Image</th>
+                        <th className="px-4 py-4 font-semibold border-b border-gray-700/30">Product Name</th>
+                        <th className="px-4 py-4 font-semibold border-b border-gray-700/30">Unit Price</th>
+                        <th className="px-4 py-4 font-semibold border-b border-gray-700/30">Quantity</th>
+                        <th className="px-4 py-4 font-semibold border-b border-gray-700/30">Total</th>
+                        <th className="px-4 py-4 font-semibold border-b border-gray-700/30">Remove</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {items.map((item, index) => {
+                        const unitPrice = getUnitPrice(item.product.price, item.product.discount);
+                        const lineTotal = getLineTotal(item);
+
+                        return (
+                          <tr key={item.product.productId} className={`${darkMode ? 'text-light hover:bg-gray-900/40' : 'text-gray-800 hover:bg-gray-50'} transition-colors`}>
+                            <td className="px-4 py-4 border-b border-gray-700/20 text-center font-semibold">{index + 1}</td>
+                            <td className="px-4 py-4 border-b border-gray-700/20">
+                              <img
+                                src={`/${item.product.imgName}`}
+                                alt={item.product.name}
+                                className="h-16 w-16 object-contain rounded-md"
+                              />
+                            </td>
+                            <td className="px-4 py-4 border-b border-gray-700/20 font-semibold">{item.product.name}</td>
+                            <td className="px-4 py-4 border-b border-gray-700/20 font-semibold">{formatCurrency(unitPrice)}</td>
+                            <td className="px-4 py-4 border-b border-gray-700/20">
+                              <input
+                                type="number"
+                                min={0}
+                                value={item.quantity}
+                                onChange={(event) => {
+                                  const value = Number.parseInt(event.target.value, 10);
+                                  if (Number.isNaN(value)) {
+                                    return;
+                                  }
+
+                                  updateQuantity(item.product.productId, value);
+                                }}
+                                className={`w-20 rounded-lg border px-3 py-2 text-center ${
+                                  darkMode
+                                    ? 'bg-gray-900 border-gray-700 text-light focus:border-primary'
+                                    : 'bg-white border-gray-300 text-gray-700 focus:border-primary'
+                                } focus:outline-none focus:ring-1 focus:ring-primary`}
+                                aria-label={`Quantity for ${item.product.name}`}
+                              />
+                            </td>
+                            <td className="px-4 py-4 border-b border-gray-700/20 font-bold">{formatCurrency(lineTotal)}</td>
+                            <td className="px-4 py-4 border-b border-gray-700/20 text-center">
+                              <button
+                                type="button"
+                                onClick={() => removeItem(item.product.productId)}
+                                className="h-10 w-10 rounded-full border border-primary/50 text-primary hover:bg-primary hover:text-white transition-colors"
+                                aria-label={`Remove ${item.product.name} from cart`}
+                              >
+                                <span aria-hidden="true">X</span>
+                              </button>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+
+                <div className={`p-4 border-t ${darkMode ? 'border-gray-700/40' : 'border-gray-200'} flex flex-col gap-3 md:flex-row md:items-center md:justify-between`}>
+                  <div className="flex-1 flex flex-col sm:flex-row gap-3">
+                    <label htmlFor="coupon-code" className="sr-only">Coupon code</label>
+                    <input
+                      id="coupon-code"
+                      type="text"
+                      placeholder="Coupon Code"
+                      value={couponInput}
+                      onChange={(event) => setCouponInput(event.target.value)}
+                      className={`w-full sm:max-w-xs rounded-full border px-4 py-3 ${
+                        darkMode
+                          ? 'bg-gray-900 border-gray-700 text-light placeholder:text-gray-400'
+                          : 'bg-white border-gray-300 text-gray-700 placeholder:text-gray-500'
+                      } focus:outline-none focus:ring-2 focus:ring-primary`}
+                    />
+                    <button
+                      type="button"
+                      onClick={handleApplyCoupon}
+                      disabled={couponInput.trim().length === 0 || items.length === 0}
+                      className="rounded-full bg-primary px-6 py-3 font-semibold text-white transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                      Apply Coupon
+                    </button>
+                    {coupon && (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          clearCoupon();
+                          setCouponInput('');
+                          setStatusMessage('Coupon removed.');
+                        }}
+                        className={`rounded-full px-5 py-3 font-semibold ${
+                          darkMode
+                            ? 'bg-gray-800 text-light hover:bg-gray-700'
+                            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                        } transition-colors`}
+                      >
+                        Clear Coupon
+                      </button>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={handleUpdateCart}
+                    disabled={items.length === 0}
+                    className="rounded-full bg-primary px-8 py-3 font-semibold text-white transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    Update Cart
+                  </button>
+                </div>
+              </>
+            ) : (
+              <div className="p-12 text-center">
+                <p className={`${darkMode ? 'text-gray-300' : 'text-gray-600'} text-lg`}>Your cart is empty. Add products to continue.</p>
+              </div>
+            )}
+          </section>
+
+          <aside className={`rounded-xl border ${darkMode ? 'border-gray-700 bg-gradient-to-b from-gray-900 to-gray-800 text-light' : 'border-gray-300 bg-white text-gray-800'} h-fit overflow-hidden`} aria-label="Order summary">
+            <h2 className="px-6 py-5 text-3xl font-bold border-b border-gray-700/30">Order Summary</h2>
+            <div className="px-6 py-3 space-y-2">
+              <div className="flex items-center justify-between py-3 border-b border-gray-700/20">
+                <span className="font-semibold">Subtotal</span>
+                <span className="font-semibold">{formatCurrency(summary.subtotal)}</span>
+              </div>
+              <div className="flex items-center justify-between py-3 border-b border-gray-700/20">
+                <span className="font-semibold">{discountLabel}</span>
+                <span className="font-semibold">-{formatCurrency(summary.discount)}</span>
+              </div>
+              <div className="flex items-center justify-between py-3 border-b border-gray-700/20">
+                <span className="font-semibold">Shipping</span>
+                <span className="font-semibold">{formatCurrency(summary.shipping)}</span>
+              </div>
+              <div className="flex items-center justify-between py-3 text-xl">
+                <span className="font-bold">Grand Total</span>
+                <span className="font-bold">{formatCurrency(summary.grandTotal)}</span>
+              </div>
+            </div>
+            <div className="p-6 border-t border-gray-700/30">
+              <button
+                type="button"
+                className="w-full rounded-full bg-primary px-6 py-3 text-lg font-semibold text-white hover:bg-accent transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={items.length === 0}
+              >
+                Proceed To Checkout
+              </button>
+            </div>
+          </aside>
+        </div>
+
+        {statusMessage && (
+          <p className={`mt-4 text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`} role="status">
+            {statusMessage}
+          </p>
+        )}
+        {lastUpdatedAt && (
+          <p className={`mt-1 text-xs ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
+            Last updated at {lastUpdatedAt}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/entity/product/Products.tsx b/frontend/src/components/entity/product/Products.tsx
index af2319e..89de214 100644
--- a/frontend/src/components/entity/product/Products.tsx
+++ b/frontend/src/components/entity/product/Products.tsx
@@ -2,19 +2,9 @@ import { useState } from 'react';
 import axios from 'axios';
 import { useQuery } from 'react-query';
 import { api } from '../../../api/config';
+import { useCart } from '../../../context/CartContext';
 import { useTheme } from '../../../context/ThemeContext';
-
-interface Product {
-  productId: number;
-  name: string;
-  description: string;
-  price: number;
-  imgName: string;
-  sku: string;
-  unit: string;
-  supplierId: number;
-  discount?: number;
-}
+import type { Product } from '../../../types/product';
 
 const fetchProducts = async (): Promise<Product[]> => {
   const { data } = await axios.get(`${api.baseURL}${api.endpoints.products}`);
@@ -27,6 +17,7 @@ export default function Products() {
   const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
   const [showModal, setShowModal] = useState(false);
   const { data: products, isLoading, error } = useQuery('products', fetchProducts);
+  const { addItem } = useCart();
   const { darkMode } = useTheme();
 
   const filteredProducts = products?.filter(product => 
@@ -41,11 +32,11 @@ export default function Products() {
     }));
   };
 
-  const handleAddToCart = (productId: number) => {
+  const handleAddToCart = (product: Product) => {
+    const productId = product.productId;
     const quantity = quantities[productId] || 0;
     if (quantity > 0) {
-      // TODO: Implement cart functionality
-      alert(`Added ${quantity} items to cart`);
+      addItem(product, quantity);
       setQuantities(prev => ({
         ...prev,
         [productId]: 0
@@ -169,7 +160,7 @@ export default function Products() {
                         </button>
                       </div>
                       <button 
-                        onClick={() => handleAddToCart(product.productId)}
+                        onClick={() => handleAddToCart(product)}
                         className={`px-4 py-2 rounded-lg transition-colors ${
                           quantities[product.productId] 
                             ? 'bg-primary hover:bg-accent text-white' 
diff --git a/frontend/src/context/CartContext.tsx b/frontend/src/context/CartContext.tsx
new file mode 100644
index 0000000..5375302
--- /dev/null
+++ b/frontend/src/context/CartContext.tsx
@@ -0,0 +1,193 @@
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import type { AppliedCoupon, CartItem } from '../types/cart';
+import type { Product } from '../types/product';
+import { DEFAULT_DISCOUNT_RATE } from '../types/cart';
+
+interface CouponDefinition {
+  code: string;
+  discountRate: number;
+  freeShipping?: boolean;
+}
+
+interface CouponResult {
+  ok: boolean;
+  message: string;
+}
+
+interface CartContextType {
+  items: CartItem[];
+  itemCount: number;
+  coupon: AppliedCoupon | null;
+  addItem: (product: Product, quantity: number) => void;
+  updateQuantity: (productId: number, quantity: number) => void;
+  removeItem: (productId: number) => void;
+  applyCoupon: (couponCode: string) => CouponResult;
+  clearCoupon: () => void;
+  persistCart: () => void;
+  lastUpdatedAt: string | null;
+}
+
+interface PersistedCartState {
+  items: CartItem[];
+  coupon: AppliedCoupon | null;
+}
+
+const STORAGE_KEY = 'octocat-cart';
+
+const SUPPORTED_COUPONS: Record<string, CouponDefinition> = {
+  SAVE5: { code: 'SAVE5', discountRate: 0.05 },
+  SAVE10: { code: 'SAVE10', discountRate: 0.1 },
+  FREESHIP: { code: 'FREESHIP', discountRate: DEFAULT_DISCOUNT_RATE, freeShipping: true },
+};
+
+const CartContext = createContext<CartContextType | null>(null);
+
+const isValidCartItem = (item: unknown): item is CartItem => {
+  if (typeof item !== 'object' || item === null) {
+    return false;
+  }
+
+  const maybeCartItem = item as CartItem;
+  return Number.isFinite(maybeCartItem.quantity) && maybeCartItem.quantity > 0 && typeof maybeCartItem.product?.productId === 'number';
+};
+
+const readPersistedState = (): PersistedCartState => {
+  if (typeof window === 'undefined') {
+    return { items: [], coupon: null };
+  }
+
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return { items: [], coupon: null };
+    }
+
+    const parsed = JSON.parse(raw) as PersistedCartState;
+    return {
+      items: Array.isArray(parsed.items) ? parsed.items.filter(isValidCartItem) : [],
+      coupon: parsed.coupon ?? null,
+    };
+  } catch {
+    return { items: [], coupon: null };
+  }
+};
+
+export function CartProvider({ children }: { children: ReactNode }) {
+  const initialState = useMemo(() => readPersistedState(), []);
+  const [items, setItems] = useState<CartItem[]>(initialState.items);
+  const [coupon, setCoupon] = useState<AppliedCoupon | null>(initialState.coupon);
+  const [lastUpdatedAt, setLastUpdatedAt] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ items, coupon }));
+  }, [items, coupon]);
+
+  const addItem = (product: Product, quantity: number) => {
+    if (quantity <= 0) {
+      return;
+    }
+
+    setItems((prev) => {
+      const existing = prev.find((entry) => entry.product.productId === product.productId);
+      if (!existing) {
+        return [...prev, { product, quantity }];
+      }
+
+      return prev.map((entry) => {
+        if (entry.product.productId !== product.productId) {
+          return entry;
+        }
+
+        return { ...entry, quantity: entry.quantity + quantity };
+      });
+    });
+  };
+
+  const updateQuantity = (productId: number, quantity: number) => {
+    if (quantity <= 0) {
+      setItems((prev) => prev.filter((entry) => entry.product.productId !== productId));
+      return;
+    }
+
+    setItems((prev) =>
+      prev.map((entry) => {
+        if (entry.product.productId !== productId) {
+          return entry;
+        }
+
+        return { ...entry, quantity };
+      }),
+    );
+  };
+
+  const removeItem = (productId: number) => {
+    setItems((prev) => prev.filter((entry) => entry.product.productId !== productId));
+  };
+
+  const applyCoupon = (couponCode: string): CouponResult => {
+    const normalized = couponCode.trim().toUpperCase();
+
+    if (!normalized) {
+      return { ok: false, message: 'Enter a coupon code before applying.' };
+    }
+
+    const definition = SUPPORTED_COUPONS[normalized];
+    if (!definition) {
+      return { ok: false, message: 'This coupon is not recognized.' };
+    }
+
+    setCoupon({
+      code: definition.code,
+      discountRate: definition.discountRate,
+      freeShipping: definition.freeShipping,
+    });
+
+    return { ok: true, message: `${definition.code} applied successfully.` };
+  };
+
+  const clearCoupon = () => {
+    setCoupon(null);
+  };
+
+  const persistCart = () => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({ items, coupon }));
+    }
+
+    setLastUpdatedAt(new Date().toLocaleTimeString());
+  };
+
+  const itemCount = items.reduce((sum, entry) => sum + entry.quantity, 0);
+
+  return (
+    <CartContext.Provider
+      value={{
+        items,
+        itemCount,
+        coupon,
+        addItem,
+        updateQuantity,
+        removeItem,
+        applyCoupon,
+        clearCoupon,
+        persistCart,
+        lastUpdatedAt,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+
+  return context;
+}
diff --git a/frontend/src/test/CartPage.test.tsx b/frontend/src/test/CartPage.test.tsx
new file mode 100644
index 0000000..f3ebb5a
--- /dev/null
+++ b/frontend/src/test/CartPage.test.tsx
@@ -0,0 +1,99 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, beforeEach } from 'vitest';
+import CartPage from '../components/cart/CartPage';
+import { CartProvider } from '../context/CartContext';
+import { ThemeProvider } from '../context/ThemeContext';
+
+const CART_STORAGE_KEY = 'octocat-cart';
+
+const seedCart = () => {
+  localStorage.setItem(
+    CART_STORAGE_KEY,
+    JSON.stringify({
+      items: [
+        {
+          product: {
+            productId: 1,
+            name: 'Solar Panel',
+            description: 'Portable panel',
+            price: 100,
+            imgName: 'smart-fountain.png',
+            sku: 'SOL-001',
+            unit: 'each',
+            supplierId: 2,
+          },
+          quantity: 2,
+        },
+      ],
+      coupon: null,
+    }),
+  );
+};
+
+const renderCartPage = () => {
+  return render(
+    <CartProvider>
+      <ThemeProvider>
+        <CartPage />
+      </ThemeProvider>
+    </CartProvider>,
+  );
+};
+
+const getSummaryValue = (label: string | RegExp): string | null => {
+  const summary = screen.getByLabelText('Order summary');
+  const row = within(summary).getByText(label).parentElement;
+  return row?.lastElementChild?.textContent?.replace(/\s+/g, '') ?? null;
+};
+
+describe('CartPage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    seedCart();
+  });
+
+  it('shows default order summary values from cart state', () => {
+    renderCartPage();
+
+    expect(getSummaryValue('Subtotal')).toBe('$200.00');
+    expect(getSummaryValue('Discount (5%)')).toBe('-$10.00');
+    expect(getSummaryValue('Shipping')).toBe('$10.00');
+    expect(getSummaryValue('Grand Total')).toBe('$200.00');
+  });
+
+  it('recomputes totals when quantity changes', async () => {
+    renderCartPage();
+
+    const user = userEvent.setup();
+    const quantityInput = screen.getByLabelText('Quantity for Solar Panel');
+    await user.click(quantityInput);
+    await user.keyboard('{Control>}a{/Control}3');
+
+    expect(getSummaryValue('Subtotal')).toBe('$300.00');
+    expect(getSummaryValue('Discount (5%)')).toBe('-$15.00');
+    expect(getSummaryValue('Grand Total')).toBe('$295.00');
+  });
+
+  it('applies coupon and updates discount percentage', async () => {
+    renderCartPage();
+
+    const user = userEvent.setup();
+    await user.type(screen.getByLabelText('Coupon code'), 'SAVE10');
+    await user.click(screen.getByRole('button', { name: 'Apply Coupon' }));
+
+    expect(getSummaryValue('Discount (10%)')).toBe('-$20.00');
+    expect(getSummaryValue('Grand Total')).toBe('$190.00');
+  });
+
+  it('removes items and updates totals immediately', async () => {
+    renderCartPage();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Remove Solar Panel from cart' }));
+
+    expect(screen.getByText('Your cart is empty. Add products to continue.')).toBeTruthy();
+    expect(getSummaryValue('Subtotal')).toBe('$0.00');
+    expect(getSummaryValue('Grand Total')).toBe('$0.00');
+  });
+});
diff --git a/frontend/src/test/cartCalculations.test.ts b/frontend/src/test/cartCalculations.test.ts
new file mode 100644
index 0000000..4aa1dec
--- /dev/null
+++ b/frontend/src/test/cartCalculations.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import type { CartItem } from '../types/cart';
+import {
+  getCartSubtotal,
+  getDiscountAmount,
+  getGrandTotal,
+  getLineTotal,
+  getShippingAmount,
+  getUnitPrice,
+} from '../utils/cartCalculations';
+
+const cartItem: CartItem = {
+  product: {
+    productId: 10,
+    name: 'Smart Feeder',
+    description: 'Automated feeding system',
+    price: 100,
+    imgName: 'feeder.png',
+    sku: 'FEED-001',
+    unit: 'each',
+    supplierId: 1,
+    discount: 0.1,
+  },
+  quantity: 2,
+};
+
+describe('cart calculations', () => {
+  it('calculates discounted unit and line totals', () => {
+    expect(getUnitPrice(cartItem.product.price, cartItem.product.discount)).toBe(90);
+    expect(getLineTotal(cartItem)).toBe(180);
+  });
+
+  it('calculates subtotal, discount, shipping and grand total', () => {
+    const subtotal = getCartSubtotal([cartItem]);
+    const discount = getDiscountAmount(subtotal, 0.05);
+    const shipping = getShippingAmount(subtotal, false);
+
+    expect(subtotal).toBe(180);
+    expect(discount).toBe(9);
+    expect(shipping).toBe(10);
+    expect(getGrandTotal(subtotal, discount, shipping)).toBe(181);
+  });
+
+  it('returns free shipping when coupon enables it', () => {
+    expect(getShippingAmount(250, true)).toBe(0);
+    expect(getShippingAmount(0, false)).toBe(0);
+  });
+});
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
new file mode 100644
index 0000000..bb02c60
--- /dev/null
+++ b/frontend/src/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/frontend/src/types/cart.ts b/frontend/src/types/cart.ts
new file mode 100644
index 0000000..070323c
--- /dev/null
+++ b/frontend/src/types/cart.ts
@@ -0,0 +1,15 @@
+import type { Product } from './product';
+
+export interface CartItem {
+  product: Product;
+  quantity: number;
+}
+
+export interface AppliedCoupon {
+  code: string;
+  discountRate: number;
+  freeShipping?: boolean;
+}
+
+export const DEFAULT_DISCOUNT_RATE = 0.05;
+export const SHIPPING_FEE = 10;
diff --git a/frontend/src/types/product.ts b/frontend/src/types/product.ts
new file mode 100644
index 0000000..35cb544
--- /dev/null
+++ b/frontend/src/types/product.ts
@@ -0,0 +1,11 @@
+export interface Product {
+  productId: number;
+  name: string;
+  description: string;
+  price: number;
+  imgName: string;
+  sku: string;
+  unit: string;
+  supplierId: number;
+  discount?: number;
+}
diff --git a/frontend/src/utils/cartCalculations.ts b/frontend/src/utils/cartCalculations.ts
new file mode 100644
index 0000000..b83dba9
--- /dev/null
+++ b/frontend/src/utils/cartCalculations.ts
@@ -0,0 +1,34 @@
+import type { CartItem } from '../types/cart';
+import { SHIPPING_FEE } from '../types/cart';
+
+const roundToCents = (value: number): number => Math.round(value * 100) / 100;
+
+export const getUnitPrice = (price: number, discount?: number): number => {
+  const safeDiscount = discount ?? 0;
+  return roundToCents(price * (1 - safeDiscount));
+};
+
+export const getLineTotal = (item: CartItem): number => {
+  const unitPrice = getUnitPrice(item.product.price, item.product.discount);
+  return roundToCents(unitPrice * item.quantity);
+};
+
+export const getCartSubtotal = (items: CartItem[]): number => {
+  return roundToCents(items.reduce((sum, item) => sum + getLineTotal(item), 0));
+};
+
+export const getDiscountAmount = (subtotal: number, discountRate: number): number => {
+  return roundToCents(subtotal * discountRate);
+};
+
+export const getShippingAmount = (subtotal: number, freeShipping = false): number => {
+  if (subtotal <= 0) {
+    return 0;
+  }
+
+  return freeShipping ? 0 : SHIPPING_FEE;
+};
+
+export const getGrandTotal = (subtotal: number, discountAmount: number, shipping: number): number => {
+  return roundToCents(Math.max(0, subtotal - discountAmount + shipping));
+};
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index cce92b7..7c9a6b8 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -11,5 +12,10 @@ export default defineConfig({
   },
   define: {
     'process.env.CODESPACE_NAME': JSON.stringify(process.env.CODESPACE_NAME),
-  }
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+  },
 })