diff --git a/index.html b/index.html
index 4399007..5e4f32b 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,41 @@
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-    
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const sections = document.querySelectorAll("section");
+          const navLinks = document.querySelectorAll(".navbar .nav-link");
+
+          const observerOptions = {
+              threshold: 0.27, // Adjust to detect when 60% of the section is visible
+          };
+
+          const observer = new IntersectionObserver(function (entries) {
+              entries.forEach(entry => {
+                  const activeSectionId = entry.target.getAttribute("id");
+
+                  if (entry.isIntersecting) {
+                      // When the section is in view, add the active class to the corresponding nav link
+                      const activeLink = document.querySelector(`.navbar a[href="#${activeSectionId}"]`);
+                      if (activeLink) {
+                          activeLink.classList.add("active");
+                      }
+                  } else {
+                      // When the section is not in view, remove the active class from the corresponding nav link
+                      const inactiveLink = document.querySelector(`.navbar a[href="#${activeSectionId}"]`);
+                      if (inactiveLink) {
+                          inactiveLink.classList.remove("active");
+                      }
+                  }
+              });
+          }, observerOptions);
+
+          sections.forEach(section => {
+              observer.observe(section);
+          });
+      });
+  </script>
 
     <style>
         .chatbot-container {
@@ -322,11 +356,11 @@ <h1 class="site-title">ArcticDelights</h1>
 <nav class="navbar">
 
 
-<a href="#home">Home</a>
-<a href="#about">About</a>
-<a href="#menu">Menu</a>
+<a href="#home" class="nav-link">Home</a>
+<a href="#about" class="nav-link">About</a>
+<a href="#menu"  class="nav-link">Menu</a>
 <a href="offers.html">Offers</a>
-<a href="#review-section">Review</a>
+<a href="#review-section"  class="nav-link">Reviews</a>
 <a href="blog.html">Blogs</a>
 <a href="contact.html">Contact Us</a>
 <a href="#" id="my-order-btn">My Orders</a>
@@ -338,7 +372,6 @@ <h1 class="site-title">ArcticDelights</h1>
             <div class = "fas fa-heart" id = "wishlist-btn"></div>
             <div class="fas fa-search" id="search-btn"></div>
             <div class="fas fa-shopping-cart" id="cart-btn"><span id="cart-count">(0)</span></div>
-          
         </div>
         <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
@@ -815,13 +848,13 @@ <h3 id="pro-name">Very Very Peachy</h3>
             <div class="box"  data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200"
             data-aos-anchor-placement="top-bottom">
             <div class="picture">
-                <img src="https://images.unsplash.com/photo-1559340160-146586a4f9b6" alt="">
+                <img src="images/download (8).jpeg" alt="">
 
-                <h3 id="pro-name">Orange Pops</h3>
+                <h3 id="pro-name">Vanilla</h3>
 
-                <div class="flip">Refreshing frozen delights bursting with zesty orange flavor, offering a sunny, sweet, and tangy treat that’s perfect for cooling off on a hot day!</div>
+                <div class="flip">Vanilla ice cream is a classic, creamy flavor made from vanilla beans. It’s smooth, versatile, and pairs well with various toppings and desserts.</div>
             </div>
-                <div class="price"> $12.99 <span>20.99</span></div>
+                <div class="price"> $13.99 <span>15.99</span></div>
                 <button  id="inbox" onclick="addToCart('Orange Pops', 12.99)">Add to Cart</button><br>
                 <div class="noofitems">
                   <button class="plus-minus" onclick="decreaseQuantity('Orange Pops')">-</button>
@@ -837,14 +870,14 @@ <h3 id="pro-name">Orange Pops</h3>
             <div class="box"  data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200"
             data-aos-anchor-placement="top-bottom">
             <div class="picture">
-                <img src="https://images.unsplash.com/photo-1594305178909-03ab72b8205e" alt="">
+                <img src="/images/download (7).jpeg" alt="">
 
-                <h3 id="pro-name">Choco-Hazel Pops</h3>
+                <h3 id="pro-name">Chocolate</h3>
 
-                <div class="flip">Indulgent frozen treats infused with rich chocolate and crunchy hazelnuts, creating a decadent and nutty flavor experience that melts delightfully in every bite!</div>
+                <div class="flip">Chocolate ice cream is rich, smooth, and indulgent, made with cocoa or melted chocolate. It's a classic, loved for its deep, sweet flavor.</div>
             </div>
 
-                <div class="price"> $18.99 <span>20.99</span></div>
+                <div class="price"> $16.99 <span>20.99</span></div>
                 <button  id="inbox" onclick="addToCart('Choco-Hazel Pops', 18.99)">Add to Cart</button><br>
                 <div class="noofitems">
                   <button class="plus-minus" onclick="decreaseQuantity('Choco-Hazel Pops')">-</button>
@@ -860,15 +893,14 @@ <h3 id="pro-name">Choco-Hazel Pops</h3>
             <div class="box"  data-aos="fade-left" data-aos-duration="1200" data-aos-delay="200"
             data-aos-anchor-placement="top-bottom">
             <div class="picture">
-                <img src="https://images.unsplash.com/photo-1499638472904-ea5c6178a300" alt="">
+                <img src="images/download (3).jpeg" alt="">
 
-                <h3 id="pro-name">Very Very Peachy</h3>
-                <div class="price"> $16.99 <span>20.99</span></div>
+                <h3 id="pro-name">Superman Icecream</h3>
+                <div class="price"> $18.99 <span>21.99</span></div>
 
-                <div class="flip">A refreshing and juicy delight packed with the sweet, sunny flavor of ripe peaches, delivering a taste of summer in every delicious bite!</div>
+                <div class="flip">Superman ice cream is a colorful, fun treat with vibrant swirls of red, blue, and yellow. It often has fruity or vanilla bubblegum-like flavors.</div>
             </div>
 
-                <div class="price"> $15.99 <span>20.99</span></div>
                 <button  id="inbox" onclick="addToCart('Very Very Peachy',15.99)">Add to Cart</button><br>
                 <div class="noofitems">
                   <button class="plus-minus" onclick="decreaseQuantity('Very Very Peachy')">-</button>
diff --git a/script.js b/script.js
index 7ed6097..23277aa 100644
--- a/script.js
+++ b/script.js
@@ -50,6 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
         searchForm.classList.remove('active');
         cartItem.classList.remove('active');
     };
+
     function filterItems() {
         const selectedPrice = priceFilter.value;
         const searchFlavor = flavorFilter.value.toLowerCase();
diff --git a/style.css b/style.css
index e79eac6..a83a2b2 100644
--- a/style.css
+++ b/style.css
@@ -144,6 +144,15 @@ button:hover {
   color: var(--text-color);
 }
 
+.nav-link {
+  font-weight: normal;
+  transition: font-weight 0.3s ease;
+}
+
+.nav-link.active {
+  font-weight: bold;
+}
+
 /*wishlist styles */
 
 .wishlist-container {
@@ -487,25 +496,19 @@ button:hover {
   
 .header .search-form {
   position: absolute;
-  top: calc(100% + 1rem);
-  /* Adjusted to position below header */
+  top: calc(100% + 1rem); /* Adjusted to position below header */
   right: 7%;
   background-color: var(--background-color);
-  width: 20rem;
-  /* Adjusted width for better fit */
+  width: 20rem; /* Adjusted width for better fit */
   height: auto;
-  display: none;
-  /* Initially hidden */
+  display: none; /* Initially hidden */
   padding: 1rem;
-  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
-  /* Added box shadow */
-  z-index: 100;
-  /* Ensure it's above other content */
+  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1); /* Added box shadow */
+  z-index: 100; /* Ensure it's above other content */
 }
 
 .header .search-form.active {
-  display: flex;
-  /* Show when active */
+  display: flex; /* Show when active */
 }
 
 .header .search-form input {
@@ -521,8 +524,7 @@ button:hover {
   cursor: pointer;
   font-size: 2.2rem;
   color: var(--text-color);
-  margin-left: 1rem;
-  /* Adjusted margin */
+  margin-left: 1rem; /* Adjusted margin */
 }
 
 .header .search-form label:hover {