diff --git a/assets/css/style.css b/assets/css/style.css
index 380dfd7..004d691 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -541,6 +541,17 @@ body.nav-active { overflow: hidden; }
 /*-----------------------------------*\
   #HEADER
 \*-----------------------------------*/
+.cart-icon{
+  display: flex;
+  gap: 10px;
+  cursor: pointer;
+}
+span#cart-count {
+  transform: translateY(8px);
+}
+i.fas.fa-shopping-cart {
+  transform: translateY(15px);
+}
 
 .header .btn { display: none; }
 
@@ -989,12 +1000,20 @@ body.nav-active { overflow: hidden; }
 .menu .section-title { margin-block-end: 40px; }
 
 .menu .grid-list { margin-block-end: 50px; }
-
+.cart-btn{
+transform: translate(75rem,-13px);
+}
 .menu-card {
   display: flex;
   align-items: flex-start;
   gap: 20px;
 }
+button.cart-btn {
+  font-size: 2rem;
+  background-color: rgb(46, 41, 41);
+  color: rgb(182, 169, 169);
+  height: 0px;
+}
 
 .hover\:card .card-banner { background-color: var(--gold-crayola); }
 
diff --git a/assets/js/script.js b/assets/js/script.js
index 6403e32..9c734a5 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -13,6 +13,32 @@ window.addEventListener("load", function () {
 });
 
 
+const cartCountElement = document.getElementById('cart-count');
+const cartButtons = document.querySelectorAll('.cart-btn');
+
+let cart = {};
+
+function updateCartCount() {
+  const itemCount = Object.keys(cart).length;
+  cartCountElement.textContent = itemCount;
+}
+
+cartButtons.forEach(button => {
+  button.addEventListener('click', () => {
+    const dishId = button.getAttribute('data-id');
+    
+    if (cart[dishId]) {
+      delete cart[dishId];
+      button.textContent = 'Add to Cart';
+    } else {
+      cart[dishId] = true;
+      button.textContent = 'Remove from Cart';
+    }
+
+    updateCartCount();
+  });
+});
+
 /**
  * add event listener on multiple elements
  */
diff --git a/index.html b/index.html
index e97ba51..0c4aa25 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,8 @@
     - custom css link
   -->
   <link rel="stylesheet" href="./assets/css/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+</head>
 
   <!-- 
     - preload images
@@ -167,6 +169,13 @@
               <span class="span">Contact</span>
             </a>
           </li>
+          <li>
+            <div class="cart-icon">
+              <span id="cart-count">0</span> 
+              <i class="fas fa-shopping-cart"></i> 
+            </div>
+        
+          </li>
 
         </ul>
 
@@ -555,7 +564,7 @@ <h3 class="title-3">
 
                     <span class="span title-2">$25.50</span>
                   </div>
-
+                   <button class="cart-btn" data-id="1">Add to Cart</button>
                   <p class="card-text label-1">
                     Tomatoes, green bell pepper, sliced cucumber onion, olives, and feta cheese.
                   </p>
@@ -582,7 +591,7 @@ <h3 class="title-3">
 
                     <span class="span title-2">$40.00</span>
                   </div>
-
+                  <button class="cart-btn" data-id="2">Add to Cart</button>
                   <p class="card-text label-1">
                     Vegetables, cheeses, ground meats, tomato sauce, seasonings and spices
                   </p>
@@ -609,7 +618,7 @@ <h3 class="title-3">
 
                     <span class="span title-2">$10.00</span>
                   </div>
-
+                  <button class="cart-btn" data-id="3">Add to Cart</button>
                   <p class="card-text label-1">
                     Butternut Squash, Olive Oil, Garlic, Thyme, Black Pepper
                   </p>
@@ -638,7 +647,7 @@ <h3 class="title-3">
 
                     <span class="span title-2">$39.00</span>
                   </div>
-
+                  <button class="cart-btn" data-id="4">Add to Cart</button>
                   <p class="card-text label-1">
                     Vegetables, cheeses, ground meats, tomato sauce, seasonings and spices.
                   </p>
@@ -665,7 +674,7 @@ <h3 class="title-3">
 
                     <span class="span title-2">$25.00</span>
                   </div>
-
+                  <button class="cart-btn" data-id="5">Add to Cart</button>
                   <p class="card-text label-1">
                     Avocados with crab meat, red onion, crab salad stuffed red bell pepper and green bell pepper.
                   </p>
@@ -692,7 +701,7 @@ <h3 class="title-3">
 
                     <span class="span title-2">$49.00</span>
                   </div>
-
+                  <button class="cart-btn" data-id="6">Add to Cart</button>
                   <p class="card-text label-1">
                     Vegetables, cheeses, ground meats, tomato sauce, seasonings and spices
                   </p>