diff --git a/Css-files/content.css b/Css-files/content.css
index 64ab424..03ef653 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -564,3 +564,32 @@ input
   margin-top: 5px;
 }
 
+.added-to-cart {
+  position: absolute;
+  margin-top: -30px;
+  margin-left: 53px;
+  display: flex;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
+  opacity: 0;
+}
+
+.check-mark{
+  width: 17px !important;
+  height : 17px !important;
+  font-size: 16.5px;
+}
+
+.js-display-added-to-cart {
+  opacity: 1;
+}
+
+#badgeCount {
+  position: relative;
+  top: -7px;
+  right: 1px;
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  padding: 5px 8px;
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/Favicon image/check-mark.png b/Favicon image/check-mark.png
new file mode 100644
index 0000000..5b80285
Binary files /dev/null and b/Favicon image/check-mark.png differ
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
index 3d1f4b4..d500963 100644
--- a/Html-files/Electronic.html
+++ b/Html-files/Electronic.html
@@ -390,6 +390,18 @@
 ::-webkit-scrollbar-button {
   display: none;
 }
+
+#badgeCount {
+  position: relative;
+  top: -7px;
+  right: 1px;
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  padding: 5px 8px;
+  font-size: 12px;
+}
+
 /*Animation sliders*/
           .wrapper{
             width: 100%;
@@ -531,7 +543,7 @@
                     <li><a href="menu.html" style="color: black;">About</a></li>
                     <li><a href="services.html" style="color: black;">Services</a></li>
                     <li><a href="contact.html" style="color: black;">Contact us</a></li>
-                    <li><a href="cart.html" style="color: black;">Cart</a></li>
+                    <li><a href="cart.html" style="color: black;">Cart <span class="badge-count" id="badgeCount"></span></a></li>
                 </ul>
             </nav>
         </header>
@@ -827,5 +839,6 @@ <h2 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h2>
     document.querySelector('.slide').prepend(items[items.length - 1]) 
 })
     </script>
+    <script src="cart.js"></script>
 </body>
 </html>
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 05f6549..59a9c8d 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -24,66 +24,80 @@
     rel="stylesheet">
   <style>
     /*Preloader CSS*/
-    #preloader {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: hsl(20, 43%, 93%);
-      /* Light background color */
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      transition: opacity 2s ease-out, visibility 2s ease-out;
-      opacity: 1;
-      visibility: visible;
-      z-index: 9999;
-      /* Ensure the preloader is above all other content */
-    }
-
-
-    /* When hidden, preloader transitions out */
-    #preloader.hidden {
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    #loader {
-      display: block;
-      position: relative;
-      width: 150px;
-      height: 150px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: hsl(304, 14%, 46%);
-      animation: spin 3s linear infinite;
-    }
-
-    #loader:before {
-      content: "";
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      right: 5px;
-      bottom: 5px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: hsl(357, 37%, 62%);
-      animation: spin 2s linear infinite;
-    }
-
-    #loader:after {
-      content: "";
-      position: absolute;
-      top: 15px;
-      left: 15px;
-      right: 15px;
-      bottom: 15px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: hsl(357, 93%, 84%);
-      animation: spin 1.5s linear infinite;
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: hsl(20, 43%, 93%); /* Light background color */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: opacity 2s ease-out, visibility 2s ease-out;
+    opacity: 1;
+    visibility: visible;
+    z-index: 9999; /* Ensure the preloader is above all other content */
+}
+
+
+/* When hidden, preloader transitions out */
+#preloader.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+#loader {
+    display: block;
+    position: relative;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: hsl(304, 14%, 46%);
+    animation: spin 3s linear infinite;
+}
+
+#loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: hsl(357, 37%, 62%);
+    animation: spin 2s linear infinite;
+}
+
+#loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: hsl(357, 93%, 84%);
+    animation: spin 1.5s linear infinite;
+}
+
+#badgeCount {
+  position: relative;
+  top: -7px;
+  right: 1px;
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  padding: 5px 8px;
+  font-size: 12px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
     }
 
     @keyframes spin {
@@ -247,44 +261,45 @@
 <body>
   <div id="preloader">
     <div id="loader"></div>
-  </div>
-  <div class="circle-container">
-    <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
-    <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
-    <div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
-    <div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
-    <div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
-    <div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
-    <div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
-    <div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
-    <div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
-    <div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
-    <div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
-    <div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
-    <div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
-    <div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
-    <div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
-    <div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
-    <div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
-    <div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
-    <div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
-    <div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
-  </div>
-  <div class="head_container" style="background-color: transparent;font-family: Georgia;">
-    <header>
-      <nav class="navbar">
-        <ul id="header-items">
-          <li><a href="../Home.html" style="color: black;font-family: var(--ff-philosopher);">Home</a></li>
-          <li><a href="menu.html" style="color: black;font-family: var(--ff-philosopher);">About</a></li>
-          <li><a href="services.html" style="color: black;font-family: var(--ff-philosopher);">Services</a></li>
-          <li><a href="contact.html" style="color: black;font-family: var(--ff-philosopher);">Contact us</a></li>
-          <li><a href="cart.html" style="color: black;font-family: var(--ff-philosopher);">Cart</a></li>
-        </ul>
-      </nav>
-    </header>
-
-    <div class="mainhead">
-      <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
+</div>
+    <div class="circle-container">
+        <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
+        <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
+        <div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
+        <div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
+        <div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
+        <div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
+        <div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
+        <div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
+        <div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
+        <div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
+        <div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
+        <div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
+        <div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
+        <div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
+        <div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
+        <div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
+        <div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
+        <div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
+        <div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
+        <div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
+    </div>
+    <div class="head_container" style="background-color: transparent;font-family: Georgia;">
+        <header>
+            <nav class="navbar">
+                <ul id="header-items">
+                    <li><a href="../index.html" style="color: black;font-family: var(--ff-philosopher);">Home</a></li>
+                    <li><a href="menu.html" style="color: black;font-family: var(--ff-philosopher);">About</a></li>
+                    <li><a href="services.html" style="color: black;font-family: var(--ff-philosopher);">Services</a></li>
+                    <li><a href="contact.html" style="color: black;font-family: var(--ff-philosopher);">Contact us</a></li>
+                    <li><a href="cart.html" style="color: black;font-family: var(--ff-philosopher);">Cart <span class="badge-count" id="badgeCount"></span></a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <div class="mainhead">
+            <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
+        </div>
     </div>
   </div>
 
@@ -418,7 +433,7 @@ <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow
       </div>
     </div>
   </footer>
-  <script src="cart.js">
+    <script src="cart.js"></script>
 
   </script>
 
diff --git a/Html-files/cart.js b/Html-files/cart.js
index 6bcbb6b..addf607 100644
--- a/Html-files/cart.js
+++ b/Html-files/cart.js
@@ -1,39 +1,43 @@
 //CODE FOR TABLE OF ADD TO CART
 document.addEventListener('DOMContentLoaded', () => {
     loadCartFromLocalStorage();
-
-    document.getElementById('cart-items').addEventListener('click', (event) => {
-        if (event.target.classList.contains('increase-quantity')) {
-            updateQuantity(event.target, 1);
-        } else if (event.target.classList.contains('decrease-quantity')) {
-            updateQuantity(event.target, -1);
-        }
-    });
+    updateBadgeCount() ; // update badge on load
+    if (document.getElementById('cart-items')){
+        document.getElementById('cart-items').addEventListener('click', (event) => {
+            if (event.target.classList.contains('increase-quantity')) {
+                updateQuantity(event.target, 1);
+            } else if (event.target.classList.contains('decrease-quantity')) {
+                updateQuantity(event.target, -1);
+            }
+        });
+    }
 });
 
 function loadCartFromLocalStorage() {
     const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
     const cartItemsContainer = document.getElementById('cart-items');
-    cartItemsContainer.innerHTML = ''; // Clear existing items
+    if(cartItemsContainer){
+        cartItemsContainer.innerHTML = ''; // Clear existing items
 
-    cartItems.forEach(item => {
-        const cartItemRow = document.createElement('tr');
-        cartItemRow.className = 'cart-item';
-        cartItemRow.setAttribute('data-product-id', item.id);
-        cartItemRow.setAttribute('data-product-price', item.price);
-        cartItemRow.innerHTML = `
-            <td>${item.name}</td>
-            <td>$${item.price.toFixed(2)}</td>
-            <td class="quantity">${item.quantity}</td>
-            <td>
-                <button class="decrease-quantity">-</button>
-                <button class="increase-quantity">+</button>
-            </td>
-        `;
-        cartItemsContainer.appendChild(cartItemRow);
-    });
+        cartItems.forEach(item => {
+            const cartItemRow = document.createElement('tr');
+            cartItemRow.className = 'cart-item';
+            cartItemRow.setAttribute('data-product-id', item.id);
+            cartItemRow.setAttribute('data-product-price', item.price);
+            cartItemRow.innerHTML = `
+                <td>${item.name}</td>
+                <td>$${item.price.toFixed(2)}</td>
+                <td class="quantity">${item.quantity}</td>
+                <td>
+                    <button class="decrease-quantity">-</button>
+                    <button class="increase-quantity">+</button>
+                </td>
+            `;
+            cartItemsContainer.appendChild(cartItemRow);
+        });
 
-    updateTotal();
+        updateTotal();
+    }
 }
 
 function updateQuantity(button, change) {
@@ -70,6 +74,7 @@ function saveCartToLocalStorage() {
         });
     });
     localStorage.setItem('cartItems', JSON.stringify(cartItems));
+    updateBadgeCount(); // update badge count after saving
 }
 //CODE FOR COUPON RECEIVED ON CLICKING ORDER NOW
   // Function to generate a random coupon code
@@ -88,7 +93,16 @@ const applyFirstTimeDiscount = () => {
         couponCode = generateCouponCode();
         localStorage.setItem('couponCode', couponCode);
     }
-    document.getElementById('couponCode').innerHTML = `Use coupon code <span style="font-weight: bold;"> ${couponCode} </span> for 30% off!`;
-    alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`);
+    if(document.getElementById('couponCode')){
+        document.getElementById('couponCode').innerHTML = `Use coupon code <span style="font-weight: bold;"> ${couponCode} </span> for 30% off!`;
+        alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`);
+    }
+    
 }
 window.onload = applyFirstTimeDiscount;
+
+function updateBadgeCount() {
+    const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
+    const totalQuantity = cartItems.reduce((total, item) => total + item.quantity, 0);
+    document.getElementById('badgeCount').innerText = totalQuantity;
+}
diff --git a/Html-files/contact.html b/Html-files/contact.html
index bafb143..3ada066 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -243,7 +243,7 @@
                 <li><a href="menu.html" style="color: hsl(203, 30%, 26%);">About</a></li>
                 <li><a href="services.html" style="color: hsl(203, 30%, 26%);">Services</a></li>
                 <li><a href="contact.html" style="color: hsl(203, 30%, 26%);">Contact us</a></li>
-                <li><a href="cart.html" style="color: hsl(203, 30%, 26%);">Cart</a></li>
+                <li><a href="cart.html" style="color: hsl(203, 30%, 26%);">Cart <span class="badge-count" id="badgeCount"></span></a></li>
             </ul>
         </nav>
 
@@ -628,6 +628,7 @@ <h3>Follow Us</h3>
     });
 });
     </script>
+    <script src="cart.js"></script>
 </body>
 
 </html>
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 28b6fe0..5280818 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -266,7 +266,7 @@
                     <li style="font-family: var(--ff-philosopher);"><a href="menu.html" style="color: black;">About</a></li>
                     <li style="font-family: var(--ff-philosopher);"><a href="services.html" style="color: black;">Services</a></li>
                     <li style="font-family: var(--ff-philosopher);"><a href="contact.html" style="color: black;">Contact us</a></li>
-                    <li style="font-family: var(--ff-philosopher);"><a href="cart.html" style="color: black;">Cart</a></li>
+                    <li style="font-family: var(--ff-philosopher);"><a href="cart.html" style="color: black;">Cart <span class="badge-count" id="badgeCount"></span></a></li>
                 </ul>
             </nav>
         </header>
@@ -286,6 +286,10 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">
         <h2 style="font-family: var(--ff-philosopher);">Entertainment</h2>
         <div class="menu_items">
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.01" >
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                  </div>
                 <img
                     src="https://i.pinimg.com/564x/59/aa/2e/59aa2edd369e1017039372ad860cfb8b.jpg">
                 
@@ -303,6 +307,10 @@ <h3 style="font-family: var(--ff-philosopher);">Phonograph</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.02">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/736x/11/c1/c5/11c1c5ba22a14271bef63012dcaa0631.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Radio</h3>
@@ -319,6 +327,10 @@ <h3 style="font-family: var(--ff-philosopher);">Radio</h3>
 
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.03">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/18/b4/41/18b441458ac78e10345b720d9af453ef.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Television</h3>
@@ -334,6 +346,10 @@ <h3 style="font-family: var(--ff-philosopher);">Television</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.04">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img src="https://i.pinimg.com/564x/1f/58/7f/1f587fe0533c8b4671fa29685fcaa9c2.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Movie Screen Carpet</h3>
                 <p style="font-family: Garamond;">$10.20</p>
@@ -351,6 +367,10 @@ <h3 style="font-family: var(--ff-philosopher);">Movie Screen Carpet</h3>
         </div>
         <div class="menu_items">
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.05">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/33/10/f4/3310f46d5d8b689d844d11fc308a84f5.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Toys</h3>
@@ -366,6 +386,10 @@ <h3 style="font-family: var(--ff-philosopher);">Toys</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.06">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/b8/ba/6f/b8ba6fce89bff7963fa9e10d86062a29.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Puppet Show</h3>
@@ -381,6 +405,10 @@ <h3 style="font-family: var(--ff-philosopher);">Puppet Show</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.07">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/56/5e/b4/565eb4a4263d6020ed2133b8a4b14991.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Marbles</h3>
@@ -396,6 +424,10 @@ <h3 style="font-family: var(--ff-philosopher);">Marbles</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="1.08">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img src="https://i.pinimg.com/564x/29/cb/76/29cb764ce3d9b2407a3dfa41c8b3ceeb.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Drinks</h3>
                 <p style="font-family: Garamond;">$10.20</p>
@@ -419,8 +451,15 @@ <h3 style="font-family: var(--ff-philosopher);">Drinks</h3>
         <h2 style="font-family: var(--ff-philosopher);">Gadgets</h2>
         <div class="menu_items">
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="2.01">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+
+                </div>
                 <img
-                    src="data:image/jpeg;base64,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">
+
+                    src="https://i0.wp.com/www.printmag.com/wp-content/uploads/2011/11/2a34d8_8fd22c546762416496eb8ab0c88c3db4mv2.jpg">
+
                 <h3 style="font-family: var(--ff-philosopher);">Telephone</h3>
                 <p style="font-family: Garamond;">$5.10</p>
                 <button class="butt add-to-cart-button" data-product-id="2.01" data-product-name="Telephone"
@@ -434,6 +473,10 @@ <h3 style="font-family: var(--ff-philosopher);">Telephone</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="2.02">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/22/dd/23/22dd2351b72eb11a7d5b040caa484188.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Pager</h3>
@@ -449,6 +492,10 @@ <h3 style="font-family: var(--ff-philosopher);">Pager</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="Snacks">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/0a/5f/a2/0a5fa201b0cdfd24323b07d9423b53ed.jpg">
                 <h3 style="font-family:var(--ff-philosopher);">Camera</h3>
@@ -464,6 +511,10 @@ <h3 style="font-family:var(--ff-philosopher);">Camera</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="2.04">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img src="https://i.pinimg.com/564x/51/1b/f5/511bf5dad0334204d182a0828850ca35.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Type Writer</h3>
                 <p style="font-family: Garamond;">$5.10</p>
@@ -483,6 +534,10 @@ <h3 style="font-family: var(--ff-philosopher);">Type Writer</h3>
         <h2>Weapons & Transport</h2>
         <div class="menu_items">
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="3.01">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/ca/83/ef/ca83ef07ebddf2e5b4a6210575342737.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Cross Bow</h3>
@@ -498,6 +553,10 @@ <h3 style="font-family: var(--ff-philosopher);">Cross Bow</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="3.02">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/ec/27/3a/ec273a4e8ea84196a1bc4f3e5e0a8527.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Catapult</h3>
@@ -513,6 +572,10 @@ <h3 style="font-family: var(--ff-philosopher);">Catapult</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="3.03">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img
                     src="https://i.pinimg.com/564x/b1/c1/1c/b1c11cfdf073f1565d1546ee18f1028a.jpg">
                 <h3 style="font-family: var(--ff-philosopher);">Sedan Chair</h3>
@@ -528,6 +591,10 @@ <h3 style="font-family: var(--ff-philosopher);">Sedan Chair</h3>
                 </div>
             </div>
             <div class="items">
+                <div class="added-to-cart js-added-to-cart" data-product-id="3.04">
+                    <img src="../Favicon image/check-mark.png" class="check-mark">
+                    <div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
+                </div>
                 <img src="https://ahdictionary.com/application/resources/arts/A5palanquin.jpg">
                 <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
                 <p style="font-family: Garamond;">$15.80</p>
@@ -736,6 +803,23 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(304, 14%, 46%);">Follow
     });
     
       </script>
+      <script>
+        const buttons = document.getElementsByClassName('butt add-to-cart-button');
+        for (let i =0; i < buttons.length; i++) {
+            buttons[i].addEventListener('click', function() {
+                const badgeCountElement = document.getElementById('badgeCount');
+                let currentCount = parseInt(badgeCountElement.innerText);
+                badgeCountElement.innerText = currentCount + 1;
+            })
+        }
+        
+        // document.getElement('add-to-cart-button').addEventListener('click', function() {
+        //     const badgeCountElement = document.getElementById('badgeCount');
+        //     let currentCount = parseInt(badgeCountElement.innerText);
+        //     badgeCountElement.innerText = currentCount + 1;
+        // });
+      </script>
+      <script src="cart.js"></script>
       
 </body>
 
diff --git a/Html-files/menu.js b/Html-files/menu.js
index b2a489d..95000de 100644
--- a/Html-files/menu.js
+++ b/Html-files/menu.js
@@ -36,8 +36,41 @@ document.querySelectorAll('.add-to-cart-button').forEach(button => {
 
         // Save updated cart to localStorage
         localStorage.setItem('cartItems', JSON.stringify(cartItems));
+
+        addedToCartDisplay(productId) ;
         
         // Optionally, you can show a message or confirmation
-        alert(`Item has been added to the cart successfully.`);
+        //alert(`Item has been added to the cart successfully.`);
     });
 });
+
+const addedMessageTimeouts = {} ;
+
+function addedToCartDisplay(productId){
+    let matchingProductId ;
+    document.querySelectorAll(`.js-added-to-cart`).forEach((item) => {
+        const currentProductId = item.dataset.productId ;
+        if(currentProductId === productId){
+            matchingProductId = productId ;
+            item.classList.add('js-display-added-to-cart') ;
+        }
+    });
+    const prevTimeoutId = addedMessageTimeouts[matchingProductId] ;
+    if(prevTimeoutId){
+        clearTimeout(prevTimeoutId) ;
+    }
+    
+    const timeoutId = setTimeout(()=> {
+        document.querySelectorAll(`.js-added-to-cart`).forEach((item) => {
+            const currentProductId = item.dataset.productId ;
+            if(currentProductId === productId){
+                matchingProductId = productId ;
+                item.classList.remove('js-display-added-to-cart') ;
+            }
+        });
+    },2000);
+
+    addedMessageTimeouts[matchingProductId] = timeoutId ;
+
+}
+
diff --git a/Html-files/services.html b/Html-files/services.html
index 6c35a86..cfaa991 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -180,50 +180,53 @@
     }
 }
     </style>
-    </head>
-
-    <body>
-        <div class="circle-container">
-            <div class="circle"
-                style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
-            <div class="circle"
-                style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
-            <div class="circle"
-                style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
-            <div class="circle"
-                style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
-            <div class="circle"
-                style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
-            <div class="circle"
-                style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
-            <div class="circle"
-                style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
-            <div class="circle"
-                style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
-            <div class="circle"
-                style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
-            <div class="circle"
-                style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
-            <div class="circle"
-                style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
-            <div class="circle"
-                style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
-            <div class="circle"
-                style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
-            <div class="circle"
-                style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
-            <div class="circle"
-                style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
-            <div class="circle"
-                style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
-            <div class="circle"
-                style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
-            <div class="circle"
-                style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
-            <div class="circle"
-                style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
-            <div class="circle"
-                style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
+
+</head>
+
+<body>
+    <div class="circle-container">
+        <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
+        <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
+        <div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
+        <div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
+        <div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
+        <div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
+        <div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
+        <div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
+        <div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
+        <div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
+        <div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
+        <div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
+        <div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
+        <div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
+        <div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
+        <div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
+        <div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
+        <div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
+        <div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
+        <div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
+    </div>
+
+    <div id="preloader">
+      <div id="loader"></div>
+    </div>
+
+    <div class="head_container_service" style="color: black;font-family: var(--ff-philosopher);">
+        <header style="font-family: var(--ff-philosopher);">
+            <nav class="navbar">
+                <ul id="header-items" style="color: black;font-family: var(--ff-philosopher);">
+                    <li><a href="../index.html" style="color: black;">Home</a></li>
+                    <li><a href="menu.html" style="color: black;">About</a></li>
+                    <li><a href="services.html" style="color: black;">Services</a></li>
+                    <li><a href="contact.html" style="color: black;">Contact us</a></li>
+                    <li><a href="cart.html" style="color: black;">Cart <span class="badge-count" id="badgeCount"></span></a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <div class="mainhead">
+            <h1  style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R V I C E S</h1>
+
         </div>
 
         <div id="preloader">
@@ -680,6 +683,8 @@
     });
 });
     </script>
-        </body>
+    <script src="cart.js"></script>
+</body>
+
 
     </html>
\ No newline at end of file