diff --git a/about.html b/about.html
index 084957e..05eaf7a 100644
--- a/about.html
+++ b/about.html
@@ -437,7 +437,7 @@
             
                 </li>
                 <li class="tab">
-                    <a href="about.html">About</a>
+                    <a href="about.html" class="active">About</a>
                     <div class="cursor"></div>
                 </li>
                 <li class="tab">
@@ -821,6 +821,7 @@ <h2>Subscription Successful!</h2>
   })();
   </script>
 <script src="script/progressbar.js"></script>
+<script src="active.js"></script>
 
 </body>
 </html> 
\ No newline at end of file
diff --git a/active.js b/active.js
new file mode 100644
index 0000000..462ade7
--- /dev/null
+++ b/active.js
@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const tabs = document.querySelectorAll(".tab a");
+    const currentPage = window.location.pathname;
+
+    tabs.forEach(tab => {
+        // Check if the link matches the current page URL
+        if (tab.getAttribute("href") === currentPage.split('/').pop()) {
+            tab.classList.add("active");
+        }
+    });
+});
diff --git a/contact.html b/contact.html
index 9acb901..adcbce3 100644
--- a/contact.html
+++ b/contact.html
@@ -92,7 +92,7 @@
                         </ul>
                     </li>
                     <li class="tab" style="margin-left: 15px;">
-                        <a href="contact.html">Contact Us</a>
+                        <a href="contact.html" class="active">Contact Us</a>
                         <div class="cursor"></div>
                     </li>
                 </ul>
@@ -281,6 +281,7 @@ <h1>Subscribe to Newsletter</h1>
 </script>
 
 <script src="script/progressbar.js"></script>
+<script src="active.js"></script>
 
 </body>
 
diff --git a/features.html b/features.html
index e145540..aa0de86 100644
--- a/features.html
+++ b/features.html
@@ -89,7 +89,7 @@
                         <div class="cursor"></div>
                     </li>
                     <li class="tab">
-                        <a href="features.html">Features</a>
+                        <a href="features.html" class="active">Features</a>
                         <div class="cursor"></div>
                     </li>
                     <li class="dropdown tab">
@@ -323,6 +323,7 @@ <h2>Subscription Successful!</h2>
     })();
     </script>
 <script src="script/progressbar.js"></script>
+<script src="active.js"></script>
 
 </body>
 
diff --git a/index.html b/index.html
index cb9d673..58df243 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@
             <div class="tabs-container">
                 <ul id="tabs" class="tabs">
                     <li class="tab">
-                        <a href="index.html">Home</a>
+                        <a href="index.html" class="active">Home</a>
                         <div class="cursor"></div>
                     </li>
                     <li class="tab">
@@ -847,6 +847,8 @@ <h2>Subscription Successful!</h2>
     });
     </script>
 <script src="./script/popup.js"></script>
+<script src="active.js"></script>
+
 
 </body>
 
diff --git a/mens.html b/mens.html
index 0f9c5ab..53a8ba1 100644
--- a/mens.html
+++ b/mens.html
@@ -1314,5 +1314,6 @@ <h2>Subscription Successful!</h2>
 <script src="script/progressbar.js"></script>
 
 
+
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index d8efa15..0744f69 100644
--- a/style.css
+++ b/style.css
@@ -210,6 +210,16 @@ html {
   font-size: 20px;
 }
 
+/* navbar active ----------------*/
+.tab a.active {
+  background-color: black;
+  color: white;
+  padding: 10px px; /* Add padding if needed */
+  border-radius: 30px; /* Add border-radius for rounded corners if desired */
+}
+
+
+
 .utils {
   width: 8%;
   height: 70px;