diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 66e596d..42a2ead 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -43,6 +43,7 @@
         "cmdk": "^1.1.1",
         "date-fns": "^3.6.0",
         "embla-carousel-react": "^8.6.0",
+        "framer-motion": "^12.23.24",
         "input-otp": "^1.4.2",
         "lucide-react": "^0.462.0",
         "next-themes": "^0.3.0",
@@ -4517,6 +4518,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -5170,6 +5198,21 @@
         "node": ">= 18"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9f8ace1..22787d0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,6 +45,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.24",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 416435e..374c8fe 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,10 @@ import Browse from "./pages/Browse";
 import Sell from "./pages/Sell";
 import ProductDetailsPage from "./pages/ProductDetail";
 import Navbar from "./components/Navbar";
+import { CartProvider } from "./components/CartContext.jsx";
+import Home from "./pages/Home.jsx";
+import Cart from "./pages/Cart.jsx";
+import Payment from "./pages/Payment";
 import Dashboard from "./pages/Dashboard";
 const queryClient = new QueryClient();
 
@@ -20,16 +24,22 @@ const App = () => (
       <BrowserRouter>
             <Navbar />
       <div className="pt-[50px]">
-
+        <CartProvider>
+        
         <Routes>
           <Route path="/" element={<Index />} />
+
           <Route path="/signup" element={<SignUp />} />
           <Route path="/signin" element={<SignIn />} />
           <Route path="/browse" element={<Browse />} />
           <Route path="/product/:id" element={<ProductDetailsPage />} />
+          <Route path="/CartHome" element={<Home />} />
+          <Route path="/cart" element={<Cart />} />
+          <Route path="/payment" element={<Payment />} />
           <Route path="/sell" element={<Sell />} />
           <Route path="/dashboard" element={<Dashboard />} />
         </Routes>
+        </CartProvider>
         </div>
       </BrowserRouter>
     </TooltipProvider>
diff --git a/frontend/src/components/CartContext.jsx b/frontend/src/components/CartContext.jsx
new file mode 100644
index 0000000..a1f5945
--- /dev/null
+++ b/frontend/src/components/CartContext.jsx
@@ -0,0 +1,38 @@
+import React, { createContext, useReducer, useEffect, useState } from "react";
+
+export const CartContext = createContext();
+
+const initialState = {
+  cart: JSON.parse(localStorage.getItem("cart")) || [],
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_ITEM":
+      return { ...state, cart: [...state.cart, action.payload] };
+    case "REMOVE_ITEM":
+      return {
+        ...state,
+        cart: state.cart.filter((_, i) => i !== action.payload),
+      };
+    case "CLEAR_CART":
+      return { ...state, cart: [] };
+    default:
+      return state;
+  }
+};
+
+export const CartProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [notification, setNotification] = useState(null);
+
+  useEffect(() => {
+    localStorage.setItem("cart", JSON.stringify(state.cart));
+  }, [state.cart]);
+
+  return (
+    <CartContext.Provider value={{ state, dispatch, notification, setNotification }}>
+      {children}
+    </CartContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/pages/Cart.jsx b/frontend/src/pages/Cart.jsx
new file mode 100644
index 0000000..a48c0b2
--- /dev/null
+++ b/frontend/src/pages/Cart.jsx
@@ -0,0 +1,271 @@
+import React, { useContext } from "react";
+import { CartContext } from "../components/CartContext";
+import { Link } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+
+const Cart = () => {
+  const { state, dispatch } = useContext(CartContext);
+
+  // Group items by ID and calculate quantities
+  const cartItems = state.cart.reduce((acc, item) => {
+    const existingItem = acc.find(i => i.id === item.id);
+    if (existingItem) {
+      existingItem.quantity += 1;
+      existingItem.totalPrice = existingItem.quantity * existingItem.price;
+    } else {
+      acc.push({ ...item, quantity: 1, totalPrice: item.price });
+    }
+    return acc;
+  }, []);
+
+  const subtotal = cartItems.reduce((sum, item) => sum + item.totalPrice, 0);
+  const shipping = subtotal > 0 ? 99 : 0;
+  const total = subtotal + shipping;
+
+  const updateQuantity = (id, newQuantity) => {
+    if (newQuantity < 1) return;
+    
+    // Find all items with this ID
+    const items = state.cart.filter(item => item.id === id);
+    
+    if (newQuantity > items.length) {
+      // Add more items
+      const itemToAdd = items[0];
+      dispatch({ type: "ADD_ITEM", payload: itemToAdd });
+    } else if (newQuantity < items.length) {
+      // Remove items
+      const itemsToRemove = items.length - newQuantity;
+      for (let i = 0; i < itemsToRemove; i++) {
+        const lastIndex = state.cart.map((item, index) => ({ item, index }))
+          .filter(({ item }) => item.id === id)
+          .pop().index;
+        dispatch({ type: "REMOVE_ITEM", payload: lastIndex });
+      }
+    }
+  };
+
+  const removeItemCompletely = (id) => {
+    const itemsToRemove = state.cart
+      .map((item, index) => ({ item, index }))
+      .filter(({ item }) => item.id === id)
+      .map(({ index }) => index)
+      .reverse(); // Remove from end to avoid index issues
+
+    itemsToRemove.forEach(index => {
+      dispatch({ type: "REMOVE_ITEM", payload: index });
+    });
+  };
+
+  const clearCart = () => {
+    dispatch({ type: "CLEAR_CART" });
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4 sm:px-6 lg:px-8">
+      {/* Header */}
+      <motion.div
+        className="max-w-6xl mx-auto text-center mb-8"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+      >
+        <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
+          Your Shopping Cart
+        </h1>
+        <p className="text-gray-600 text-lg">
+          {cartItems.length === 0 ? "Your cart is waiting to be filled! 🛍️" : `You have ${cartItems.length} unique item${cartItems.length > 1 ? 's' : ''} in your cart`}
+        </p>
+      </motion.div>
+
+      <div className="max-w-6xl mx-auto flex flex-col lg:flex-row gap-8">
+        {/* Cart Items */}
+        <div className="flex-1">
+          {cartItems.length === 0 ? (
+            <motion.div
+              className="bg-white rounded-2xl shadow-lg p-8 text-center"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+            >
+              <div className="text-6xl mb-4">🛒</div>
+              <h3 className="text-2xl font-semibold text-gray-800 mb-4">
+                Your cart is empty
+              </h3>
+              <p className="text-gray-600 mb-6">
+                Discover amazing products and add them to your cart!
+              </p>
+              <Link
+                to="/"
+                className="inline-block bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105"
+              >
+                Start Shopping
+              </Link>
+            </motion.div>
+          ) : (
+            <>
+              {/* Cart Header */}
+              <div className="flex justify-between items-center mb-6">
+                <h2 className="text-2xl font-bold text-gray-800">
+                  Cart Items ({state.cart.length})
+                </h2>
+                <button
+                  onClick={clearCart}
+                  className="text-red-500 hover:text-red-700 font-semibold flex items-center gap-2 transition-colors duration-200"
+                >
+                  <span>🗑️</span>
+                  Clear Cart
+                </button>
+              </div>
+
+              {/* Cart Items List */}
+              <div className="space-y-4">
+                <AnimatePresence>
+                  {cartItems.map((item, index) => (
+                    <motion.div
+                      key={item.id}
+                      className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden"
+                      initial={{ opacity: 0, x: -50 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: 50 }}
+                      transition={{ duration: 0.3, delay: index * 0.1 }}
+                    >
+                      <div className="p-6 flex flex-col sm:flex-row items-center gap-4">
+                        {/* Product Image */}
+                        <div className="flex-shrink-0 w-20 h-20 md:w-24 md:h-24 rounded-xl overflow-hidden">
+                          <img
+                            src={item.image}
+                            alt={item.name}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+
+                        {/* Product Info */}
+                        <div className="flex-1 text-center sm:text-left">
+                          <h3 className="text-lg font-semibold text-gray-800 mb-1">
+                            {item.name}
+                          </h3>
+                          <p className="text-gray-600 text-sm mb-2">
+                            ₹{item.price.toLocaleString()} each
+                          </p>
+                          <div className="flex items-center justify-center sm:justify-start gap-4">
+                            {/* Quantity Controls */}
+                            <div className="flex items-center gap-3 bg-gray-100 rounded-lg px-3 py-1">
+                              <button
+                                onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                                className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors duration-200 text-lg font-bold"
+                                disabled={item.quantity <= 1}
+                              >
+                                −
+                              </button>
+                              <span className="font-semibold text-gray-800 min-w-8 text-center">
+                                {item.quantity}
+                              </span>
+                              <button
+                                onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                                className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors duration-200 text-lg font-bold"
+                              >
+                                +
+                              </button>
+                            </div>
+
+                            {/* Total Price for this item */}
+                            <div className="text-lg font-bold text-blue-600">
+                              ₹{(item.totalPrice).toLocaleString()}
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Remove Button */}
+                        <button
+                          onClick={() => removeItemCompletely(item.id)}
+                          className="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-red-50 text-red-500 rounded-xl hover:bg-red-100 transition-all duration-200 transform hover:scale-110"
+                          title="Remove all"
+                        >
+                          <span className="text-xl">🗑️</span>
+                        </button>
+                      </div>
+                    </motion.div>
+                  ))}
+                </AnimatePresence>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Order Summary - Only show when cart has items */}
+        {cartItems.length > 0 && (
+          <motion.div
+            className="lg:w-96"
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.2 }}
+          >
+            <div className="bg-white rounded-2xl shadow-lg p-6 sticky top-6">
+              <h3 className="text-2xl font-bold text-gray-800 mb-6 pb-4 border-b">
+                Order Summary
+              </h3>
+
+              {/* Price Breakdown */}
+              <div className="space-y-3 mb-6">
+                <div className="flex justify-between text-gray-600">
+                  <span>Subtotal ({state.cart.length} items)</span>
+                  <span>₹{subtotal.toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between text-gray-600">
+                  <span>Shipping</span>
+                  <span>{shipping > 0 ? `₹${shipping}` : "Free"}</span>
+                </div>
+                {shipping > 0 && subtotal < 999 && (
+                  <div className="text-sm text-green-600 bg-green-50 p-2 rounded-lg">
+                    🚚 Add ₹{(999 - subtotal).toLocaleString()} more for free shipping!
+                  </div>
+                )}
+                <div className="border-t pt-3 mt-3">
+                  <div className="flex justify-between text-lg font-bold text-gray-800">
+                    <span>Total</span>
+                    <span className="text-2xl text-blue-600">
+                      ₹{total.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="space-y-3">
+                <Link
+                  to="/payment"
+                  className="block w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center py-4 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
+                >
+                  Proceed to Payment
+                </Link>
+                <Link
+                  to="/"
+                  className="block w-full border-2 border-gray-300 text-gray-700 text-center py-3 rounded-xl font-semibold hover:border-blue-500 hover:text-blue-600 transition-all duration-300"
+                >
+                  Continue Shopping
+                </Link>
+              </div>
+
+              {/* Security Badge */}
+              <div className="mt-6 pt-4 border-t border-gray-200 text-center">
+                <div className="flex items-center justify-center gap-2 text-sm text-gray-500 mb-2">
+                  <span>🔒</span>
+                  <span>Secure Checkout</span>
+                </div>
+                <p className="text-xs text-gray-400">
+                  Your payment information is encrypted and secure
+                </p>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </div>
+
+      {/* Background Decoration */}
+      <div className="fixed top-0 left-0 w-full h-full pointer-events-none -z-10">
+        <div className="absolute top-1/4 right-1/4 w-64 h-64 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
+        <div className="absolute bottom-1/4 left-1/4 w-64 h-64 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-1000"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Cart;
\ No newline at end of file
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
new file mode 100644
index 0000000..b62ca17
--- /dev/null
+++ b/frontend/src/pages/Home.jsx
@@ -0,0 +1,187 @@
+import React, { useContext } from "react";
+import { CartContext } from "../components/CartContext";
+import { Link } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+
+const products = [
+  {
+    id: 1,
+    name: "Wireless Headphones",
+    price: 2999,
+    image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+    description: "Premium sound quality with noise cancellation"
+  },
+  {
+    id: 2,
+    name: "Smartwatch",
+    price: 1999,
+    image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+    description: "Track your fitness and stay connected"
+  },
+  {
+    id: 3,
+    name: "Bluetooth Speaker",
+    price: 1499,
+    image: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+    description: "Portable speaker with crystal clear audio"
+  },
+  {
+    id: 4,
+    name: "Gaming Mouse",
+    price: 1299,
+    image: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+    description: "High precision gaming mouse with RGB lighting"
+  },
+  {
+    id: 5,
+    name: "Laptop Stand",
+    price: 899,
+    image: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+    description: "Ergonomic aluminum laptop stand"
+  },
+  {
+    id: 6,
+    name: "Wireless Keyboard",
+    price: 1799,
+    image: "https://images.unsplash.com/photo-1587829741301-dc798b83add3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+    description: "Mechanical wireless keyboard"
+  }
+];
+
+const Home = () => {
+  const { dispatch, setNotification, notification } = useContext(CartContext);
+
+  const addToCart = (product) => {
+    dispatch({ type: "ADD_ITEM", payload: product });
+    setNotification(product);
+    setTimeout(() => setNotification(null), 2000);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4 sm:px-6 lg:px-8">
+      {/* Header */}
+      <motion.header 
+        className="text-center mb-12"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
+          Discover Amazing Products
+        </h1>
+        <p className="text-gray-600 text-lg max-w-2xl mx-auto">
+          Explore our curated collection of premium electronics and accessories
+        </p>
+      </motion.header>
+
+      {/* Products Grid */}
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
+          {products.map((product, index) => (
+            <motion.div
+              key={product.id}
+              className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group flex flex-col"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              whileHover={{ y: -5 }}
+            >
+              {/* Product Image - Fixed with proper height */}
+              <div className="relative h-64 md:h-72 lg:h-80 overflow-hidden">
+                <img 
+                  src={product.image}
+                  alt={product.name}
+                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                  loading="lazy"
+                />
+                <div className="" />
+              </div>
+
+              {/* Product Info */}
+              <div className="p-6 flex-1 flex flex-col">
+                <div className="flex justify-between items-start mb-3">
+                  <h3 className="text-xl font-semibold text-gray-800 line-clamp-1">
+                    {product.name}
+                  </h3>
+                  <span className="text-2xl font-bold text-blue-600">
+                    ₹{product.price.toLocaleString()}
+                  </span>
+                </div>
+                
+                <p className="text-gray-600 text-sm mb-4 line-clamp-2 flex-1">
+                  {product.description}
+                </p>
+
+                <motion.button
+                  onClick={() => addToCart(product)}
+                  className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl mt-auto"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  Add to Cart 🛒
+                </motion.button>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      {/* Floating Cart Button */}
+      <motion.div
+        className="fixed bottom-6 right-6 z-50"
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+      >
+        <Link
+          to="/cart"
+          className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4 rounded-full shadow-2xl hover:shadow-3xl transition-all duration-300 flex items-center gap-2 font-semibold text-lg"
+        >
+          View Cart 
+          <span className="text-xl">🛒</span>
+        </Link>
+      </motion.div>
+
+      {/* Notification */}
+      <AnimatePresence>
+        {notification && (
+          <motion.div
+            className="fixed top-4 right-4 md:top-6 md:right-6 bg-white shadow-2xl border border-gray-200 rounded-2xl p-4 flex items-center gap-4 max-w-sm z-50"
+            initial={{ opacity: 0, x: 100, scale: 0.8 }}
+            animate={{ opacity: 1, x: 0, scale: 1 }}
+            exit={{ opacity: 0, x: 100, scale: 0.8 }}
+            transition={{ 
+              type: "spring", 
+              stiffness: 500, 
+              damping: 30 
+            }}
+          >
+            <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+              <img 
+                src={notification.image} 
+                alt={notification.name} 
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-semibold text-gray-800 truncate">
+                {notification.name}
+              </p>
+              <p className="text-green-600 text-sm font-medium">
+                Added to cart successfully! 🎉
+              </p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Background Decoration */}
+      <div className="fixed top-0 left-0 w-full h-full pointer-events-none -z-10">
+        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
+        <div className="absolute top-1/3 right-1/4 w-64 h-64 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-1000"></div>
+        <div className="absolute bottom-1/4 left-1/2 w-64 h-64 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-500"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/frontend/src/pages/Payment.jsx b/frontend/src/pages/Payment.jsx
new file mode 100644
index 0000000..9e02637
--- /dev/null
+++ b/frontend/src/pages/Payment.jsx
@@ -0,0 +1,496 @@
+import React, { useState, useContext } from "react";
+import { CartContext } from "../components/CartContext";
+import { Link, useNavigate } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+
+const Payment = () => {
+  const { state, dispatch } = useContext(CartContext);
+  const navigate = useNavigate();
+  const [paymentMethod, setPaymentMethod] = useState("card");
+  const [formData, setFormData] = useState({
+    cardNumber: "",
+    cardName: "",
+    expiry: "",
+    cvv: "",
+    upiId: "",
+    wallet: "",
+    bank: ""
+  });
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const total = state.cart.reduce((sum, item) => sum + item.price, 0);
+  const tax = total * 0.18;
+  const shipping = 99;
+  const finalTotal = total + tax + shipping;
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    
+    // Format card number with spaces
+    if (name === "cardNumber") {
+      const formattedValue = value.replace(/\s/g, '').replace(/(\d{4})/g, '$1 ').trim();
+      setFormData(prev => ({ ...prev, [name]: formattedValue }));
+      return;
+    }
+    
+    // Format expiry date
+    if (name === "expiry") {
+      const formattedValue = value.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
+      setFormData(prev => ({ ...prev, [name]: formattedValue }));
+      return;
+    }
+
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handlePayment = async (e) => {
+    e.preventDefault();
+    setIsProcessing(true);
+
+    // Simulate payment processing
+    setTimeout(() => {
+      setIsProcessing(false);
+      dispatch({ type: "CLEAR_CART" });
+      navigate("/success");
+    }, 3000);
+  };
+
+  const paymentMethods = [
+    { id: "card", name: "Credit/Debit Card", icon: "💳", color: "from-blue-500 to-blue-700" },
+    { id: "upi", name: "UPI Payment", icon: "📱", color: "from-green-500 to-green-700" },
+    { id: "wallet", name: "Wallet", icon: "👛", color: "from-purple-500 to-purple-700" },
+    { id: "netbanking", name: "Net Banking", icon: "🏦", color: "from-orange-500 to-orange-700" },
+  ];
+
+  const wallets = [
+    { id: "paytm", name: "Paytm", icon: "📲" },
+    { id: "phonepe", name: "PhonePe", icon: "📳" },
+    { id: "amazonpay", name: "Amazon Pay", icon: "🛒" },
+    { id: "other", name: "Other Wallets", icon: "💰" },
+  ];
+
+  const banks = [
+    { id: "sbi", name: "State Bank of India" },
+    { id: "hdfc", name: "HDFC Bank" },
+    { id: "icici", name: "ICICI Bank" },
+    { id: "axis", name: "Axis Bank" },
+    { id: "kotak", name: "Kotak Mahindra Bank" },
+    { id: "other", name: "Other Banks" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <motion.div
+          className="text-center mb-8"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
+            Secure Checkout
+          </h1>
+          <p className="text-gray-600 text-lg">
+            Complete your purchase with secure payment
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Payment Methods & Form */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Payment Method Selection */}
+            <motion.div
+              className="bg-white rounded-2xl shadow-lg overflow-hidden"
+              initial={{ opacity: 0, x: -50 }}
+              animate={{ opacity: 1, x: 0 }}
+            >
+              <div className="p-6 border-b border-gray-200">
+                <h3 className="text-xl font-semibold text-gray-800 mb-4">
+                  Select Payment Method
+                </h3>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                  {paymentMethods.map((method) => (
+                    <motion.button
+                      key={method.id}
+                      onClick={() => setPaymentMethod(method.id)}
+                      className={`p-4 rounded-xl border-2 transition-all duration-200 ${
+                        paymentMethod === method.id
+                          ? `border-blue-500 bg-gradient-to-r ${method.color} text-white shadow-lg`
+                          : "border-gray-200 hover:border-gray-300 bg-white text-gray-700"
+                      }`}
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="flex flex-col items-center gap-2">
+                        <span className="text-2xl">{method.icon}</span>
+                        <span className="font-medium text-sm text-center">{method.name}</span>
+                      </div>
+                    </motion.button>
+                  ))}
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Payment Form */}
+            <motion.div
+              className="bg-white rounded-2xl shadow-lg overflow-hidden"
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+            >
+              <div className="p-6">
+                <h3 className="text-xl font-semibold text-gray-800 mb-6">
+                  {paymentMethod === "card" && "Card Details"}
+                  {paymentMethod === "upi" && "UPI Payment"}
+                  {paymentMethod === "wallet" && "Digital Wallet"}
+                  {paymentMethod === "netbanking" && "Net Banking"}
+                </h3>
+
+                <form onSubmit={handlePayment}>
+                  <AnimatePresence mode="wait">
+                    {/* Card Payment */}
+                    {paymentMethod === "card" && (
+                      <motion.div
+                        key="card"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="space-y-6"
+                      >
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Card Number
+                          </label>
+                          <input
+                            type="text"
+                            name="cardNumber"
+                            value={formData.cardNumber}
+                            onChange={handleInputChange}
+                            placeholder="1234 5678 9012 3456"
+                            maxLength="19"
+                            className="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-lg"
+                            required
+                          />
+                        </div>
+
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Cardholder Name
+                          </label>
+                          <input
+                            type="text"
+                            name="cardName"
+                            value={formData.cardName}
+                            onChange={handleInputChange}
+                            placeholder="John Doe"
+                            className="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
+                            required
+                          />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                          <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                              Expiry Date
+                            </label>
+                            <input
+                              type="text"
+                              name="expiry"
+                              value={formData.expiry}
+                              onChange={handleInputChange}
+                              placeholder="MM/YY"
+                              maxLength="5"
+                              className="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
+                              required
+                            />
+                          </div>
+                          <div>
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                              CVV
+                            </label>
+                            <input
+                              type="text"
+                              name="cvv"
+                              value={formData.cvv}
+                              onChange={handleInputChange}
+                              placeholder="123"
+                              maxLength="3"
+                              className="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
+                              required
+                            />
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-3 p-4 bg-blue-50 rounded-xl">
+                          <span className="text-2xl">🔒</span>
+                          <div>
+                            <p className="font-medium text-blue-800">Secure Payment</p>
+                            <p className="text-blue-600 text-sm">Your card details are encrypted and secure</p>
+                          </div>
+                        </div>
+                      </motion.div>
+                    )}
+
+                    {/* UPI Payment */}
+                    {paymentMethod === "upi" && (
+                      <motion.div
+                        key="upi"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="space-y-6"
+                      >
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            UPI ID
+                          </label>
+                          <input
+                            type="text"
+                            name="upiId"
+                            value={formData.upiId}
+                            onChange={handleInputChange}
+                            placeholder="yourname@upi"
+                            className="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 text-lg"
+                            required
+                          />
+                        </div>
+                        
+                        <div className="grid grid-cols-2 gap-4">
+                          <button
+                            type="button"
+                            className="p-4 border-2 border-green-500 rounded-xl text-green-600 font-semibold hover:bg-green-50 transition-all duration-200"
+                          >
+                            📱 PhonePe
+                          </button>
+                          <button
+                            type="button"
+                            className="p-4 border-2 border-blue-500 rounded-xl text-blue-600 font-semibold hover:bg-blue-50 transition-all duration-200"
+                          >
+                            📲 Google Pay
+                          </button>
+                        </div>
+
+                        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
+                          <div className="flex items-center gap-3">
+                            <span className="text-2xl">💡</span>
+                            <div>
+                              <p className="font-medium text-yellow-800">Quick Payment</p>
+                              <p className="text-yellow-700 text-sm">You'll be redirected to your UPI app to complete the payment</p>
+                            </div>
+                          </div>
+                        </div>
+                      </motion.div>
+                    )}
+
+                    {/* Wallet Payment */}
+                    {paymentMethod === "wallet" && (
+                      <motion.div
+                        key="wallet"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="space-y-6"
+                      >
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-4">
+                            Select Your Wallet
+                          </label>
+                          <div className="grid grid-cols-2 gap-4">
+                            {wallets.map(wallet => (
+                              <button
+                                key={wallet.id}
+                                type="button"
+                                onClick={() => setFormData(prev => ({ ...prev, wallet: wallet.id }))}
+                                className={`p-4 rounded-xl border-2 transition-all duration-200 ${
+                                  formData.wallet === wallet.id
+                                    ? "border-purple-500 bg-purple-50 text-purple-700"
+                                    : "border-gray-200 hover:border-gray-300"
+                                }`}
+                              >
+                                <div className="flex flex-col items-center gap-2">
+                                  <span className="text-2xl">{wallet.icon}</span>
+                                  <span className="font-medium text-sm">{wallet.name}</span>
+                                </div>
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+
+                        {formData.wallet && (
+                          <motion.div
+                            initial={{ opacity: 0, height: 0 }}
+                            animate={{ opacity: 1, height: "auto" }}
+                            className="bg-purple-50 border border-purple-200 rounded-xl p-4"
+                          >
+                            <p className="text-purple-700 text-sm text-center">
+                              You'll be redirected to {wallets.find(w => w.id === formData.wallet)?.name} to complete your payment
+                            </p>
+                          </motion.div>
+                        )}
+                      </motion.div>
+                    )}
+
+                    {/* Net Banking */}
+                    {paymentMethod === "netbanking" && (
+                      <motion.div
+                        key="netbanking"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="space-y-6"
+                      >
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Select Your Bank
+                          </label>
+                          <select
+                            name="bank"
+                            value={formData.bank}
+                            onChange={handleInputChange}
+                            className="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-200"
+                            required
+                          >
+                            <option value="">Choose your bank</option>
+                            {banks.map(bank => (
+                              <option key={bank.id} value={bank.id}>
+                                {bank.name}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+
+                        <div className="bg-orange-50 border border-orange-200 rounded-xl p-6 text-center">
+                          <div className="text-4xl mb-4">🏦</div>
+                          <h4 className="font-semibold text-orange-800 mb-2">
+                            Secure Net Banking
+                          </h4>
+                          <p className="text-orange-700 text-sm">
+                            You'll be redirected to your bank's secure portal to complete the payment
+                          </p>
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+
+                  {/* Pay Button */}
+                  <motion.button
+                    type="submit"
+                    disabled={isProcessing}
+                    className={`w-full mt-8 py-4 px-6 rounded-xl font-semibold text-lg transition-all duration-300 ${
+                      isProcessing
+                        ? "bg-gray-400 cursor-not-allowed"
+                        : "bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transform hover:scale-105"
+                    } text-white shadow-lg hover:shadow-xl`}
+                    whileTap={{ scale: 0.98 }}
+                  >
+                    {isProcessing ? (
+                      <div className="flex items-center justify-center gap-3">
+                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                        <span>Processing Payment...</span>
+                      </div>
+                    ) : (
+                      `Pay ₹${finalTotal.toLocaleString()}`
+                    )}
+                  </motion.button>
+                </form>
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Order Summary */}
+          <div className="lg:col-span-1">
+            <motion.div
+              className="bg-white rounded-2xl shadow-lg p-6 sticky top-6"
+              initial={{ opacity: 0, x: 50 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.2 }}
+            >
+              <h3 className="text-xl font-bold text-gray-800 mb-6 pb-4 border-b">
+                Order Summary
+              </h3>
+
+              {/* Items List */}
+              <div className="space-y-4 mb-6 max-h-64 overflow-y-auto">
+                {state.cart.map((item, index) => (
+                  <div key={index} className="flex items-center gap-3 py-2">
+                    <img
+                      src={item.image}
+                      alt={item.name}
+                      className="w-12 h-12 rounded-lg object-cover flex-shrink-0"
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-gray-800 text-sm truncate">
+                        {item.name}
+                      </p>
+                      <p className="text-gray-600 text-sm">₹{item.price.toLocaleString()}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Price Breakdown */}
+              <div className="space-y-3 border-t pt-4">
+                <div className="flex justify-between text-gray-600">
+                  <span>Subtotal ({state.cart.length} items)</span>
+                  <span>₹{total.toLocaleString()}</span>
+                </div>
+                <div className="flex justify-between text-gray-600">
+                  <span>Shipping</span>
+                  <span>₹{shipping}</span>
+                </div>
+                <div className="flex justify-between text-gray-600">
+                  <span>Tax (18%)</span>
+                  <span>₹{tax.toLocaleString()}</span>
+                </div>
+                <div className="border-t pt-3 mt-3">
+                  <div className="flex justify-between text-lg font-bold text-gray-800">
+                    <span>Total Amount</span>
+                    <span className="text-xl text-blue-600">
+                      ₹{finalTotal.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Back to Cart */}
+              <Link
+                to="/cart"
+                className="block w-full text-center border-2 border-gray-300 text-gray-700 py-3 rounded-xl font-semibold hover:border-blue-500 hover:text-blue-600 transition-all duration-300 mt-6"
+              >
+                ← Back to Cart
+              </Link>
+            </motion.div>
+          </div>
+        </div>
+
+        {/* Security Badges */}
+        <motion.div
+          className="flex flex-wrap justify-center gap-8 mt-12 text-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.4 }}
+        >
+          {[
+            { icon: "🔒", text: "256-bit SSL Secure" },
+            { icon: "🛡️", text: "PCI DSS Compliant" },
+            { icon: "💰", text: "100% Money Back" },
+            { icon: "⚡", text: "Instant Refund" }
+          ].map((badge, index) => (
+            <div key={index} className="flex items-center gap-2 text-sm text-gray-600">
+              <span className="text-lg">{badge.icon}</span>
+              <span>{badge.text}</span>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+
+      {/* Background Decoration */}
+      <div className="fixed top-0 left-0 w-full h-full pointer-events-none -z-10">
+        <div className="absolute top-1/4 right-1/4 w-64 h-64 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
+        <div className="absolute bottom-1/4 left-1/4 w-64 h-64 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-1000"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Payment;
\ No newline at end of file