diff --git a/blog.html b/blog.html
index 6aeb925a..01ecedc7 100644
--- a/blog.html
+++ b/blog.html
@@ -19,7 +19,7 @@
 </head>
 <body>
      <!--header-->
-     <header id="header" class="shadow bg-light">
+     <header id="header" class="shadow">
       <nav class="container navbar">
           <a href="index.html" class="nav-brand text-dark">
             WordWise
diff --git a/category.html b/category.html
index 837240f4..0ef97672 100644
--- a/category.html
+++ b/category.html
@@ -18,7 +18,7 @@
 
 
     <!--header-->
-    <header id="header" class="shadow bg-light">
+    <header id="header" class="shadow">
       <nav class="container navbar">
           <a href="index.html" class="nav-brand text-dark">
             WordWise
@@ -238,11 +238,11 @@ <h2 class="footer-title secondary-title">Tags</h2>
 
                    <div class="tags">
                        <div class="d-flex flex-wrap">
-                           <a href="#" class="nav-link btn bg-light">Travel</a>
-                           <a href="#" class="nav-link btn bg-light">Food</a>
-                           <a href="#" class="nav-link btn bg-light">Lifestyle</a>
-                           <a href="#" class="nav-link btn bg-light">Techonogy</a>
-                           <a href="#" class="nav-link btn bg-light">Fashion</a>
+                           <a href="#" class=" btn bg-light">Travel</a>
+                           <a href="#" class=" btn bg-light">Food</a>
+                           <a href="#" class=" btn bg-light">Lifestyle</a>
+                           <a href="#" class=" btn bg-light">Techonogy</a>
+                           <a href="#" class=" btn bg-light">Fashion</a>
                        </div>
                    </div>
 
@@ -250,10 +250,10 @@ <h2 class="footer-title secondary-title mt-2">Social</h2>
 
                    <div class="tags social" id="contact">
                        <div class="d-flex flex-wrap">
-                           <a href="#" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
-                           <a href="#" class="nav-link btn bg-light"><i class="fab fa-twitter"></i></a>
-                           <a href="#" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
-                           <a href="#" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
+                           <a href="#" class="btn bg-light"><i class="fab fa-facebook-f"></i></a>
+                           <a href="#" class="btn bg-light"><i class="fab fa-twitter"></i></a>
+                           <a href="#" class="btn bg-light"><i class="fab fa-instagram"></i></a>
+                           <a href="#" class="btn bg-light"><i class="fab fa-dribbble"></i></a>
                        </div>
                    </div>
 
diff --git a/index.html b/index.html
index bd7104da..5bf6516f 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
 </head>
 <body>
     <!--header-->
-    <header id="header" class="shadow bg-light">
+    <header id="header" class="shadow">
         <nav class="container navbar">
             <a href="index.html" class="nav-brand text-dark">
               WordWise
diff --git a/main.js b/main.js
index ee2eec2e..bd7b3e93 100644
--- a/main.js
+++ b/main.js
@@ -47,13 +47,37 @@ function myFunction() {
   }
 }
 
+//Active Nav bar 
+const navLinks = document.querySelectorAll('.nav-link');
+const setActiveLink = () => {
+  const activePath = localStorage.getItem('activeLink');
+  if (activePath) {
+    navLinks.forEach(link => {
+      const linkHref = link.getAttribute('href');
+      if (linkHref === activePath) {
+        link.classList.add('active');
+      } else {
+        link.classList.remove('active');
+      }
+    });
+  }
+};
+
+document.addEventListener('DOMContentLoaded', setActiveLink);
+
+navLinks.forEach(link => {
+  link.addEventListener('click', function() {
+    navLinks.forEach(link => link.classList.remove('active'));
 
+    this.classList.add('active');
+
+    localStorage.setItem('activeLink', this.getAttribute('href'));
+  });
+});
 
 
-// Theme Switcher
-//determines if the user has a set theme
 function detectColorScheme() {
-  var theme = "light";    //default to light
+  var theme = "light";   
 
 
   //local storage is used to override OS theme settings
diff --git a/start.html b/start.html
index a7a37530..fec944c8 100644
--- a/start.html
+++ b/start.html
@@ -19,7 +19,7 @@
 </head>
 <body>
      <!--header-->
-     <header id="header" class="shadow bg-light">
+     <header id="header" class="shadow ">
       <nav class="container navbar">
           <a href="index.html" class="nav-brand text-dark">
             WordWise
@@ -34,10 +34,10 @@
           <div class="collapse">
               <ul class="navbar-nav">
                   <a href="index.html" class="nav-link">Home</a>
-                  <a href="blog" class="nav-link"> Leading Blog</a>
+                  <a href="blog.html" class="nav-link"> Leading Blog</a>
                   <a href="start.html" class="nav-link">Start Writing</a>
                   <a href="category.html" class="nav-link">Categories</a>
-                  <a href="#contact" class="nav-link">About</a>
+                  <a href="#About" class="nav-link">About</a>
                   <a href="#contact" class="nav-link">Contact </a>
               </ul>
           </div>
@@ -61,9 +61,6 @@
                       <a href="#" class="nav-link">
                           <i class="fa-brands fa-dribbble"></i>
                       </a>
-
-
-
               </ul>
           </div>
           <div class="theme-switch-wrapper">
diff --git a/style.css b/style.css
index 221d8f21..469a3771 100644
--- a/style.css
+++ b/style.css
@@ -119,6 +119,7 @@ header {
   flex-direction: row;
   justify-content: space-around;
   border-bottom: 1px solid black;
+  background-color: #343a40;
 }
 
 body {
@@ -302,6 +303,12 @@ a {
   text-align: right;
 }
 
+.container{
+  background-color: #343a40;
+}
+
+/*section*/
+/* navigation menu*/
 .navbar {
   position: relative;
   display: flex;
@@ -331,7 +338,13 @@ a {
 }
 
 .nav-link:hover {
-  color: var(--primary-color);
+  color: #c9d3db;
+  text-decoration: underline;
+}
+
+.nav-link.active {
+  color: #c9d3db;
+  text-decoration: underline;
 }
 
 .search-box {
