diff --git a/index.html b/index.html
index 6ba292638..673e2df9c 100644
--- a/index.html
+++ b/index.html
@@ -90,7 +90,7 @@
     </div>
 
     <!-- nav bar -->
-    <nav>
+    <nav id = "main_navbar">
       <div class="container main-nav flex">
         <a href="./index.html" class="company-logo">
           <img src="./assets/asset 41.png" alt="company logo" />
diff --git a/mode-switch.js b/mode-switch.js
index c07d2d9a7..523369814 100644
--- a/mode-switch.js
+++ b/mode-switch.js
@@ -5,6 +5,7 @@ var darkModeEnabled = localStorage.getItem("dark-mode") === "true";
 
 // Function to toggle dark mode
 function toggleDarkMode() {
+  var nav = document.getElementById("main_navbar") 
   var footer = document.querySelector("footer");
   var tables = document.querySelectorAll(".wrapper .table");
   var linksTitle = document.querySelectorAll(".links-title");
@@ -25,7 +26,8 @@ function toggleDarkMode() {
 
   if (darkModeEnabled) {
     document.body.style.backgroundColor = "#111111";
-    
+    nav.style.backgroundColor = "#111111";
+    companyLogo.style = " -webkit-filter: invert(100%);";
     footer.style.backgroundColor = "#242525";
     tables.forEach(function (table) {
       table.style.backgroundColor = "#242426";
@@ -58,6 +60,8 @@ function toggleDarkMode() {
     });
   } else {
     document.body.style.backgroundColor = "#ffffff";
+    nav.style.backgroundColor = "#ffffff";
+    companyLogo.style = " fill : black;"
 
     footer.style.backgroundColor = "#ebf2fa";
     tables.forEach(function (table) {
diff --git a/style.css b/style.css
index 933b245ce..e3725c498 100644
--- a/style.css
+++ b/style.css
@@ -49,6 +49,10 @@ body {
 }
 nav {
     text-align: center;
+	position: sticky;
+	top:2px;
+	background-color: #fefefe;
+    z-index: 1;
     }
     
     nav ul{
@@ -187,6 +191,8 @@ ul {
 .nav-menu{
   display: flex;
   align-items: center;
+  column-gap: 15px;
+  width: max-content;
 }
 
 .nav-links ul {