diff --git a/public/css/style.css b/public/css/style.css
index b9dbb25..eb6315c 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -51,6 +51,28 @@ body {
   box-shadow: 0px 0px 5px black;
 }
 
+  /* Responsive Styles for Header */
+  @media (max-width: 768px) {
+      .navbar {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+      }
+      .nav-menu {
+          display: none;
+          flex-direction: column;
+          width: 100%;
+      }
+      .nav-menu.active {
+          display: flex;
+      }
+      .hamburger {
+          display: block;
+          cursor: pointer;
+      }
+  }
+
+
 #language {
   position: fixed;
   bottom: 4vh;
@@ -2499,4 +2521,4 @@ body {
 
   background-color: #0056b3; /* Darker shade for hover */
 
-}
\ No newline at end of file
+}
diff --git a/public/index.html b/public/index.html
index 364f813..848d7c1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -104,10 +104,28 @@
 
     <header>
         <!-- navbar section  -->
+        <header id="header" class="header">
+    <div class="container">
+        <div class="logo">
+            <!-- Logo content -->
+        </div>
+        <nav class="navbar">
+            <ul class="nav-menu">
+                <!-- Navigation links -->
+            </ul>
+            <button class="hamburger" aria-label="Toggle navigation">
+                ☰
+            </button>
+        </nav>
+    </div>
+</header>
+<header>
         <div class="navbar">
             <div class="logo"></div>
             <div class="main">
                 <nav>
+                    <div class="hamburger" onclick="toggleMenu()">☰</div>
+
                     <div class="HamBurger" onclick="toggleMenu()">&#9776;</div>
                     <ul id="navbar">
                         <li title="Login"><a href="/choose-file.html"><i class='bx bxs-user-circle'></i> Login</a></li>
@@ -1098,7 +1116,14 @@ <h2>What feature of Research-Nexas do you find most valuable?</h2>
     <script src="script/popup.js"></script>
 
     <script src="script/scripts.js"></script> <!-- Link to your service worker registration script -->
+    <script>
+    function toggleMenu() {
+        var menu = document.querySelector('.nav-menu');
+        menu.classList.toggle('active');
+    }
+    </script>
+
 
 </body>
 
-</html>
\ No newline at end of file
+</html>