diff --git a/assets/js/main.js b/assets/js/main.js
index b466cc8..5b5d7ed 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,8 +1,10 @@
 document.addEventListener('DOMContentLoaded', function () {
     const sidebar = document.getElementById('sidebar');
-    const sidebarToggler = document.getElementById('sidebarToggler');
+    const sidebarTogglers = document.querySelectorAll('.sidebar-toggler');
 
-    sidebarToggler.addEventListener('click', function () {
-        sidebar.classList.toggle('show');
+    sidebarTogglers.forEach(toggler => {
+        toggler.addEventListener('click', function () {
+            sidebar.classList.toggle('show');
+        });
     });
-});
\ No newline at end of file
+});
diff --git a/index.php b/index.php
index c12dbc5..4402fde 100644
--- a/index.php
+++ b/index.php
@@ -27,7 +27,7 @@
                     <i class="bi bi-house-door-fill me-2 fs-4"></i>
                     <span class="fs-5">SmartHostel</span>
                 </a>
-                <button class="btn d-lg-none" id="sidebarToggler"><i class="bi bi-x-lg"></i></button>
+                <button class="btn d-lg-none sidebar-toggler"><i class="bi bi-x-lg"></i></button>
             </div>
             <ul class="nav flex-column">
                 <li class="nav-item">
@@ -59,7 +59,7 @@
 
         <main class="main-content flex-grow-1 p-4">
             <header class="d-flex justify-content-between align-items-center mb-4">
-                <button class="btn d-lg-none" id="sidebarToggler"><i class="bi bi-list"></i></button>
+                <button class="btn d-lg-none sidebar-toggler"><i class="bi bi-list"></i></button>
                 <h1 class="fs-3 mb-0">Admin Dashboard</h1>
                 <div class="d-flex align-items-center">
                     <i class="bi bi-person-circle fs-3 me-2"></i>