diff --git a/Projects/Food_Ordering_Website/cart.html b/Projects/Food_Ordering_Website/cart.html
new file mode 100644
index 00000000..2d468fb0
--- /dev/null
+++ b/Projects/Food_Ordering_Website/cart.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+
+  <!-- For hamburger menu -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css"
+    integrity="sha512-W/zrbCncQnky/EzL+/AYwTtosvrM+YG/V6piQLSe2HuKS6cmbw89kjYkp3tWFn1dkWV7L1ruvJyKbLz73Vlgfg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <title>Cart</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .cart-page {
+      width: 80%;
+      margin: 0 auto;
+      padding: 20px;
+      margin-top: 40px;
+    }
+    .cart h1 {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    .cart-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      border-bottom: 1px solid #ddd;
+    }
+    .cart-item img {
+      width: 50px;
+      height: 50px;
+      object-fit: cover;
+      margin-right: 20px;
+    }
+    .cart-item h2 {
+      margin: 0;
+      flex-grow: 1;
+    }
+    .cart-item p {
+      margin: 0;
+      padding: 5px;
+    }
+    .cart-item .quantity-controls {
+      display: flex;
+      align-items: center;
+      width: 100px;
+      font-size: 18px;
+
+    }
+    .cart-item .quantity-controls button {
+      margin: 0 5px;
+      padding: 10px;
+      font-size: 15px;
+    }
+    .cart-item .remove {
+      margin-left: 20px;
+      cursor: pointer;
+      color: white;
+      padding: 15px;
+      background-color: red;
+      border-radius: 20px;
+
+    }
+    .total {
+      text-align: right;
+      font-weight: bold;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="header-container">
+      <span><img class="logo" src="detailed-chef-logo-template_23-2148986823.avif" alt="" /></span>
+      <nav id="nav">
+        <ul id="nav-ul">
+          <li><a href="index.html">Home</a></li>
+          <li><a href="index.html#about">About</a></li>
+          <li><a href="index.html#menu">Menu</a></li>
+          <li><a href="index.html#review">Review</a></li>
+        </ul>
+      </nav>
+      <div class="container3">
+        <span><ion-icon name="search"></ion-icon></span>
+        <span><ion-icon name="heart"></ion-icon></span>
+        <a href="cart.html" class="cart"><span><ion-icon name="cart" ></ion-icon></span></a>
+      </div>
+      <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+      <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+      <span class="hamburger" id="button"><i class="fa-solid fa-bars"></i></span>
+    </div>
+  </header>
+  <div class="cart-page">
+    <h1>Your Cart</h1>
+    <div id="cart-items"></div>
+    <p class="total" id="total"></p>
+  </div>
+  <script>
+    // Function to update the cart in localStorage
+    function updateCart(cart) {
+      localStorage.setItem('cart', JSON.stringify(cart));
+    }
+
+    // Function to display the cart items
+    function displayCart() {
+      const cart = JSON.parse(localStorage.getItem('cart')) || [];
+      const cartItemsContainer = document.getElementById('cart-items');
+      const totalContainer = document.getElementById('total');
+      let total = 0;
+
+      cartItemsContainer.innerHTML = '';
+      cart.forEach((item, index) => {
+        if (!item.quantity) {
+          item.quantity = 1;
+        }
+        const cartItem = document.createElement('div');
+        cartItem.className = 'cart-item';
+        cartItem.innerHTML = `
+          <img src="${item.image}" alt="${item.item}">
+          <h2>${item.item}</h2>
+          <div class="quantity-controls">
+            <button onclick="changeQuantity(${index}, -1)">-</button>
+            <p>${item.quantity}</p>
+            <button onclick="changeQuantity(${index}, 1)">+</button>
+          </div>
+          <p>Rs.${(item.price * item.quantity).toFixed(2)}</p>
+          <span class="remove" onclick="removeItem(${index})">Remove</span>
+        `;
+        cartItemsContainer.appendChild(cartItem);
+        total += item.price * item.quantity;
+      });
+
+      totalContainer.textContent = `Total: Rs.${total.toFixed(2)}`;
+      updateCart(cart); // Update the cart in localStorage after setting default quantity
+    }
+
+    // Function to add an item to the cart
+    function addToCart(item) {
+      const cart = JSON.parse(localStorage.getItem('cart')) || [];
+      const existingItemIndex = cart.findIndex(cartItem => cartItem.item === item.item);
+
+      if (existingItemIndex !== -1) {
+        cart[existingItemIndex].quantity += 1;
+      } else {
+        item.quantity = 1;
+        cart.push(item);
+      }
+
+      updateCart(cart);
+      alert(`${item.item} has been added to your cart!`);
+    }
+
+    // Function to change the quantity of an item
+    function changeQuantity(index, change) {
+      const cart = JSON.parse(localStorage.getItem('cart')) || [];
+      cart[index].quantity += change;
+
+      if (cart[index].quantity <= 0) {
+        cart[index].quantity = 1;
+      }
+
+      updateCart(cart);
+      displayCart();
+    }
+
+    // Function to remove an item from the cart
+    function removeItem(index) {
+      const cart = JSON.parse(localStorage.getItem('cart')) || [];
+      cart.splice(index, 1);
+
+      updateCart(cart);
+      displayCart();
+    }
+
+    // Call displayCart when the page loads
+    window.onload = displayCart;
+  </script>
+</body>
+</html>
diff --git a/Projects/Food_Ordering_Website/index.html b/Projects/Food_Ordering_Website/index.html
index b1eef109..35a96f71 100644
--- a/Projects/Food_Ordering_Website/index.html
+++ b/Projects/Food_Ordering_Website/index.html
@@ -39,7 +39,7 @@
       <div class="container3">
         <span><ion-icon name="search"></ion-icon></span>
         <span><ion-icon name="heart"></ion-icon></span>
-        <span><ion-icon name="cart"></ion-icon></span>
+        <a href="cart.html" class="cart"><span><ion-icon name="cart" ></ion-icon></span></a>
       </div>
       <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
       <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
@@ -84,97 +84,86 @@ <h1 class="ourmenu">Our Menu</h1>
     </div>
     <div class="banner1">
       <div class="food1 card">
-        <img src="buger.jpg" alt="">
+        <img src="burger.png" alt="Burger">
         <h2>Burger</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.79 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.79 <button data-item="Burger" data-price="79" data-image="burger.png">Order</button></p>
       </div>
       <div class="food1">
-        <img src="cake.jpg" alt="">
+        <img src="cake.jpg" alt="Pineapple Cake">
         <h2>Pineapple Cake</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.149 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.149 <button data-item="Pineapple Cake" data-price="149" data-image="cake.jpg">Order</button></p>
       </div>
       <div class="food1">
-        <img src="pasta.jpg" alt="">
+        <img src="pasta.jpg" alt="Red Sauce Pasta">
         <h2>Red Sauce Pasta</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.89 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.89 <button data-item="Red Sauce Pasta" data-price="89" data-image="pasta.jpg">Order</button></p>
       </div>
       <div class="food1">
-        <img src="pizza.jpg" alt="">
+        <img src="pizza.jpg" alt="Mushroom Pizza">
         <h2>Mushroom Pizza</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.199 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.199 <button data-item="Mushroom Pizza" data-price="199" data-image="pizza.jpg">Order</button></p>
       </div>
     </div>
     <div class="banner1">
       <div class="card">
-      <div class="food1">
-        <img src="lasagna.webp" alt="">
-        <h2>Lasagna</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.299 <button> Order </button></p>
-      </div>
+        <div class="food1">
+          <img src="lasagna.webp" alt="Lasagna">
+          <h2>Lasagna</h2>
+          <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+          <p class="money">Rs.299 <button data-item="Lasagna" data-price="299" data-image="lasagna.webp">Order</button></p>
+        </div>
       </div>
       <div class="food1">
-        <img src="juse.jpg" alt="">
+        <img src="juse.jpg" alt="Mix Fruit Juice">
         <h2>Mix Fruit Juice</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.59 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.59 <button data-item="Mix Fruit Juice" data-price="59" data-image="juse.jpg">Order</button></p>
       </div>
       <div class="food1">
-        <img src="Spanchi.jpg" alt="">
+        <img src="Spanchi.jpg" alt="Muffin">
         <h2>Muffin</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.99 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.99 <button data-item="Muffin" data-price="99" data-image="Spanchi.jpg">Order</button></p>
       </div>
       <div class="food1">
-        <img src="sandwich.jpg" alt="">
+        <img src="sandwich.jpg" alt="Sandwich">
         <h2>Sandwich</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.179 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.179 <button data-item="Sandwich" data-price="179" data-image="sandwich.jpg">Order</button></p>
       </div>
     </div>
     <div class="banner1">
       <div class="food1">
-        <img src="ice_cream.jpg" alt="">
+        <img src="ice_cream.jpg" alt="Strawberry Ice Cream">
         <h2>Strawberry Ice Cream</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.49/scoop <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.49/scoop <button data-item="Strawberry Ice Cream" data-price="49" data-image="ice_cream.jpg">Order</button></p>
       </div>
       <div class="food1">
-        <img src="chocolate.jpg" alt="">
+        <img src="chocolate.jpg" alt="Vanilla Filled Chocolates">
         <h2>Vanilla Filled Chocolates</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.89 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.89 <button data-item="Vanilla Filled Chocolates" data-price="89" data-image="chocolate.jpg">Order</button></p>
       </div>
       <div class="food1">
-        <img src="chocolate_Drink.jpg" alt="">
+        <img src="chocolate_Drink.jpg" alt="Chocolate Shake">
         <h2>Chocolate Shake</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.89 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.89 <button data-item="Chocolate Shake" data-price="89" data-image="chocolate_Drink.jpg">Order</button></p>
       </div>
       <div class="food1">
-        <img src="gallary_4.jpg" alt="">
+        <img src="gallary_4.jpg" alt="Dry-fruit Cake">
         <h2>Dry-fruit Cake</h2>
-        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium
-          velit iure?</p>
-        <p class="money">Rs.129 <button> Order </button></p>
+        <p class="des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quae dolorum dicta praesentium velit iure?</p>
+        <p class="money">Rs.129 <button data-item="Dry-fruit Cake" data-price="129" data-image="gallary_4.jpg">Order</button></p>
       </div>
     </div>
-  </main>
+</main>
+
   <main class="main4" id="review">
     <div class="rev">
       <h1>Customer <span id="cust">Review</span></h1>
diff --git a/Projects/Food_Ordering_Website/index.js b/Projects/Food_Ordering_Website/index.js
index a5d51170..5fbb0b08 100644
--- a/Projects/Food_Ordering_Website/index.js
+++ b/Projects/Food_Ordering_Website/index.js
@@ -25,3 +25,29 @@ backToTopBtn.addEventListener("click", function(event) {
     event.preventDefault();
     window.scrollTo({top: 0, behavior: 'smooth'});
 });
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    const orderButtons = document.querySelectorAll('button[data-item]');
+
+    orderButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const item = button.getAttribute('data-item');
+        const price = parseFloat(button.getAttribute('data-price'));
+        const image = button.getAttribute('data-image');
+        const cart = JSON.parse(localStorage.getItem('cart')) || [];
+
+        const existingItemIndex = cart.findIndex(cartItem => cartItem.item === item);
+
+        if (existingItemIndex >= 0) {
+          cart[existingItemIndex].quantity += 1;
+        } else {
+          cart.push({ item, price, image, quantity: 1 });
+        }
+
+        localStorage.setItem('cart', JSON.stringify(cart));
+
+        alert(`${item} has been added to the cart.`);
+      });
+    });
+  });
diff --git a/Projects/Food_Ordering_Website/style.css b/Projects/Food_Ordering_Website/style.css
index 5286e958..4cb3752c 100644
--- a/Projects/Food_Ordering_Website/style.css
+++ b/Projects/Food_Ordering_Website/style.css
@@ -70,6 +70,11 @@ nav a:hover {
     margin-top: 5px;
 }
 
+.cart{
+    text-decoration: none;
+    color: black;
+}
+
 
 
 @media (max-width: 600px) {
