diff --git a/public_html/templates/page-footer.php b/public_html/templates/page-footer.php
index d8fb647..b075cd3 100644
--- a/public_html/templates/page-footer.php
+++ b/public_html/templates/page-footer.php
@@ -8,6 +8,12 @@
 
     </div>
 
+<script>
+    document.getElementById('toggleSidebarButton').addEventListener('click', function () {
+        document.getElementById('sidebar').classList.toggle('collapsed');
+    });
+</script>
+
 </body>
 
 </html>
diff --git a/public_html/templates/page-menu.php b/public_html/templates/page-menu.php
index 9709cc7..d423f5a 100644
--- a/public_html/templates/page-menu.php
+++ b/public_html/templates/page-menu.php
@@ -2,7 +2,7 @@
         <!-- Menu -->
         <div class="menu-container">
             <ul class="menu-left">
-                <button class="btn btn-primary mb-3" type="button" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
+                <button class="btn btn-primary mb-3" type="button" id="toggleSidebarButton">
                     sidebar
                 </button>
 
diff --git a/public_html/templates/page-sidebar.php b/public_html/templates/page-sidebar.php
index adbc835..b6deb9c 100644
--- a/public_html/templates/page-sidebar.php
+++ b/public_html/templates/page-sidebar.php
@@ -1,8 +1,8 @@
         <div class="row">
 
             <!-- Sidebar -->
-            <div class="col-md-3 sidebar-wrapper collapse show" id="sidebar">
-                <div class="card card-body bg-light">
+            <div class="col-md-3 sidebar-wrapper bg-light" id="sidebar">
+                <div class="sidebar-content card card-body">
                     <ul class="list-group">
                         <li class="list-group-item"><a href="#">stats</a></li>
                         <li class="list-group-item"><a href="#">config</a></li>
@@ -10,6 +10,7 @@
                     </ul>
                 </div>
             </div>
+
             <!-- /Sidebar -->
 
         <div class="col-md-9">