diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d0b02da..92f1b05 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,8 +5,10 @@ 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 { 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';
 
@@ -25,6 +27,7 @@ function ThemedApp() {
             <Route path="/products" element={<Products />} />
             <Route path="/login" element={<Login />} />
             <Route path="/admin/products" element={<AdminProducts />} />
+            <Route path="/cart" element={<Cart />} />
           </Routes>
         </main>
         <Footer />
@@ -37,7 +40,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..be7a24f
--- /dev/null
+++ b/frontend/src/components/Cart.tsx
@@ -0,0 +1,116 @@
+import { Link } from 'react-router-dom';
+import { useTheme } from '../context/ThemeContext';
+import { useCart } from '../context/CartContext';
+
+export default function Cart() {
+  const { darkMode } = useTheme();
+  const { cartItems, removeFromCart, updateQuantity, clearCart } = useCart();
+
+  const total = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+  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-4xl mx-auto">
+        <h1 className={`text-3xl font-bold ${darkMode ? 'text-light' : 'text-gray-800'} mb-8 transition-colors duration-300`}>
+          Shopping Cart
+        </h1>
+
+        {cartItems.length === 0 ? (
+          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg p-12 text-center shadow-lg transition-colors duration-300`}>
+            <svg className="w-20 h-20 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" 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>
+            <p className={`text-xl ${darkMode ? 'text-gray-400' : 'text-gray-500'} mb-6`}>Your cart is empty</p>
+            <Link
+              to="/products"
+              className="bg-primary hover:bg-accent text-white px-6 py-3 rounded-lg font-medium transition-colors"
+            >
+              Browse Products
+            </Link>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-6">
+            <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-lg overflow-hidden transition-colors duration-300`}>
+              {cartItems.map((item, index) => (
+                <div
+                  key={item.productId}
+                  className={`flex items-center gap-4 p-4 ${index < cartItems.length - 1 ? `border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'}` : ''}`}
+                >
+                  <img
+                    src={`/${item.imgName}`}
+                    alt={item.name}
+                    className={`w-20 h-20 object-contain rounded ${darkMode ? 'bg-gray-700' : 'bg-gray-100'} p-1 flex-shrink-0`}
+                  />
+                  <div className="flex-grow min-w-0">
+                    <h3 className={`font-semibold ${darkMode ? 'text-light' : 'text-gray-800'} truncate transition-colors duration-300`}>
+                      {item.name}
+                    </h3>
+                    <p className="text-primary font-bold">${item.price.toFixed(2)}</p>
+                  </div>
+                  <div className={`flex items-center space-x-2 ${darkMode ? 'bg-gray-700' : 'bg-gray-200'} rounded-lg p-1 flex-shrink-0`}>
+                    <button
+                      onClick={() => updateQuantity(item.productId, item.quantity - 1)}
+                      className={`w-8 h-8 flex items-center justify-center ${darkMode ? 'text-light' : 'text-gray-700'} hover:text-primary transition-colors`}
+                      aria-label={`Decrease quantity of ${item.name}`}
+                    >
+                      <span aria-hidden="true">-</span>
+                    </button>
+                    <span className={`${darkMode ? 'text-light' : 'text-gray-800'} min-w-[2rem] text-center`}>
+                      {item.quantity}
+                    </span>
+                    <button
+                      onClick={() => updateQuantity(item.productId, item.quantity + 1)}
+                      className={`w-8 h-8 flex items-center justify-center ${darkMode ? 'text-light' : 'text-gray-700'} hover:text-primary transition-colors`}
+                      aria-label={`Increase quantity of ${item.name}`}
+                    >
+                      <span aria-hidden="true">+</span>
+                    </button>
+                  </div>
+                  <p className={`font-bold ${darkMode ? 'text-light' : 'text-gray-800'} w-20 text-right flex-shrink-0`}>
+                    ${(item.price * item.quantity).toFixed(2)}
+                  </p>
+                  <button
+                    onClick={() => removeFromCart(item.productId)}
+                    className="text-gray-400 hover:text-red-500 transition-colors flex-shrink-0"
+                    aria-label={`Remove ${item.name} from cart`}
+                  >
+                    <svg className="w-5 h-5" 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>
+
+            <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-lg p-6 transition-colors duration-300`}>
+              <div className="flex justify-between items-center mb-6">
+                <span className={`text-xl font-bold ${darkMode ? 'text-light' : 'text-gray-800'}`}>Total</span>
+                <span className="text-2xl font-bold text-primary">${total.toFixed(2)}</span>
+              </div>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  to="/products"
+                  className={`flex-1 text-center px-6 py-3 rounded-lg font-medium border transition-colors ${darkMode ? 'border-gray-600 text-light hover:border-primary hover:text-primary' : 'border-gray-300 text-gray-700 hover:border-primary hover:text-primary'}`}
+                >
+                  Continue Shopping
+                </Link>
+                <button
+                  onClick={clearCart}
+                  className={`flex-1 px-6 py-3 rounded-lg font-medium transition-colors ${darkMode ? 'bg-gray-700 text-gray-300 hover:bg-gray-600' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`}
+                >
+                  Clear Cart
+                </button>
+                <Link
+                  to="/checkout"
+                  className="flex-1 text-center bg-primary hover:bg-accent text-white px-6 py-3 rounded-lg font-medium transition-colors"
+                >
+                  Proceed to Checkout
+                </Link>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index d7b393b..0943f17 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -1,11 +1,13 @@
 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 { totalItems } = useCart();
   const [adminMenuOpen, setAdminMenuOpen] = useState(false);
 
   return (
@@ -68,6 +70,20 @@ 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={`Cart with ${totalItems} items`}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className={`h-6 w-6 ${darkMode ? 'text-light' : '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>
+              {totalItems > 0 && (
+                <span className="absolute -top-1 -right-1 bg-primary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
+                  {totalItems > 99 ? '99+' : totalItems}
+                </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..66b4dfb 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()) ||
@@ -41,14 +43,19 @@ export default function Products() {
     }));
   };
 
-  const handleAddToCart = (productId: number) => {
-    const quantity = quantities[productId] || 0;
+  const handleAddToCart = (product: Product) => {
+    const quantity = quantities[product.productId] || 0;
     if (quantity > 0) {
-      // TODO: Implement cart functionality
-      alert(`Added ${quantity} items to cart`);
+      addToCart({
+        productId: product.productId,
+        name: product.name,
+        price: product.discount ? product.price * (1 - product.discount) : product.price,
+        quantity,
+        imgName: product.imgName,
+      });
       setQuantities(prev => ({
         ...prev,
-        [productId]: 0
+        [product.productId]: 0
       }));
     }
   };
@@ -169,7 +176,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..b0c88a2
--- /dev/null
+++ b/frontend/src/context/CartContext.tsx
@@ -0,0 +1,71 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+export interface CartItem {
+  productId: number;
+  name: string;
+  price: number;
+  quantity: number;
+  imgName: string;
+}
+
+interface CartContextType {
+  cartItems: CartItem[];
+  addToCart: (item: CartItem) => void;
+  removeFromCart: (productId: number) => void;
+  updateQuantity: (productId: number, quantity: number) => void;
+  clearCart: () => void;
+  totalItems: number;
+}
+
+const CartContext = createContext<CartContextType | null>(null);
+
+export function CartProvider({ children }: { children: ReactNode }) {
+  const [cartItems, setCartItems] = useState<CartItem[]>([]);
+
+  const addToCart = (item: CartItem) => {
+    setCartItems(prev => {
+      const existing = prev.find(i => i.productId === item.productId);
+      if (existing) {
+        return prev.map(i =>
+          i.productId === item.productId
+            ? { ...i, quantity: i.quantity + item.quantity }
+            : i
+        );
+      }
+      return [...prev, item];
+    });
+  };
+
+  const removeFromCart = (productId: number) => {
+    setCartItems(prev => prev.filter(i => i.productId !== productId));
+  };
+
+  const updateQuantity = (productId: number, quantity: number) => {
+    if (quantity <= 0) {
+      removeFromCart(productId);
+    } else {
+      setCartItems(prev =>
+        prev.map(i => (i.productId === productId ? { ...i, quantity } : i))
+      );
+    }
+  };
+
+  const clearCart = () => setCartItems([]);
+
+  const totalItems = cartItems.reduce((sum, i) => sum + i.quantity, 0);
+
+  return (
+    <CartContext.Provider value={{ cartItems, addToCart, removeFromCart, updateQuantity, clearCart, totalItems }}>
+      {children}
+    </CartContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useCart() {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
+}