diff --git a/templates/index.html b/templates/index.html
index 4b6c744..6543019 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -126,7 +126,12 @@
             text-decoration: none;
             color: {{ accent_color }};
         }
-
+        .nav-toggle {
+            display: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            text-align: right;
+        }
 
         @media (max-width: 768px) {
 
@@ -155,13 +160,23 @@
                 height: auto;
                 position: static;
                 padding: 10px;
-          }
+            }
+            .sidebar-nav ul {
+                display: none;
+            }
+            .nav-toggle {
+                display: block;
+            }
+            .sidebar-nav.active ul {
+                display: block;
+            }
         }
     </style>
 </head>
 <body>
     <div class="sidebar">
         <div class="sidebar-nav noto-sans-mono-font">
+            <div class="nav-toggle">☰</div>
             <nav>
                 <ul>
                     <li><a href="#">Home</a></li>
@@ -321,6 +336,17 @@
         window.addEventListener('resize', handleResize);
 
         loadImages(); // Initial load
+
+        function setupNavToggle() {
+            const navToggle = document.querySelector('.nav-toggle');
+            const sidebarNav = document.querySelector('.sidebar-nav');
+
+            navToggle.addEventListener('click', () => {
+                sidebarNav.classList.toggle('active');
+            });
+        }
+
+        setupNavToggle();
     </script>
 </body>
 </html>
