diff --git a/index.html b/index.html
index da36c6c..8e2361c 100644
--- a/index.html
+++ b/index.html
@@ -532,7 +532,13 @@ <h2>Ajivika</h2>
         </div>
             <!-- Floating Image Button -->
     
-        
+        <!-- hamburger menu -->
+    <button class="hamburger" onclick="toggleMenu()">
+        <span class="bar"></span>
+        <span class="bar"></span>
+        <span class="bar"></span>
+    </button>
+    <!-- Navigation Links -->
         <ul class="nav-links">
             <li><a href="./index.html"><i class="fas fa-home"></i><span>Home</span></a></li>
             <li><a href="./about.html"><i class="fas fa-address-card"></i> <span>About Us</span></a></li>
@@ -569,6 +575,13 @@ <h2>Ajivika</h2>
 
     <!-- Home Page Content -->
     
+    <script>
+        // hamburger menu js
+        function toggleMenu() {
+            const navLinks = document.querySelector('.nav-links');
+            navLinks.classList.toggle('active');
+        }
+    </script>
 
     <!-- Google Translate Script -->
     <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
diff --git a/styles.css b/styles.css
index 307ddf7..6e57720 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ body {
 .nav-links a {
     color: #fff;
     text-decoration: double;
-    font-size: 1.1em;
+    font-size: 18px;
     display: flex;
     align-items: center;
     transition: color 0.3s ease, background-color 0.3s ease;
@@ -62,7 +62,7 @@ body {
 /* Sections */
 .section {
     padding: 60px 20px;
-    max-width: 1200px;
+    max-width: 100%;
     margin: auto;
 }
 
@@ -75,6 +75,27 @@ body {
     background-color: #f47200;
 }
 
+.hamburger {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    justify-content: space-between;
+    background: transparent;
+    border: none;
+    padding: 0;
+}
+
+.hamburger span {
+    height: 3px;
+    width: 100%;
+    background: #fff;
+    display: block;
+    border-radius: 10px;
+    margin: 8px 0;
+    width: 45px;
+    height: 6px;
+}
+
 /* Headings */
 h1, h2 {
     margin-bottom: 20px;
@@ -104,3 +125,43 @@ footer {
     bottom: 0;
     width: 100%;
 }
+
+@media (max-width: 956px) {
+    .nav-links a {
+        font-size: 15px;
+    }
+    
+}
+
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .nav-links.active {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 70px;
+        right: 10%;
+        background-color: rgb(43, 43, 40);
+        width: 50%;
+        border-radius: 10px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .nav-links.active li {
+        margin-right: 0;
+        text-align: center;
+    }
+
+    .nav-links.active a {
+        padding: 10px 20px;
+        border-radius: 0;
+    }
+    
+}
\ No newline at end of file