diff --git a/public_html/static/all.css b/public_html/static/all.css
index d3e3197..45ca37f 100644
--- a/public_html/static/all.css
+++ b/public_html/static/all.css
@@ -120,3 +120,16 @@
 .widget {
     border: 1px solid gray;
 }
+
+.sidebar-wrapper {
+    width: 250px; /* Default width of the sidebar */
+    transition: width 0.3s; /* Smooth transition for collapsing */
+    overflow-x: hidden; /* Hide horizontal scrollbar */
+}
+.sidebar-wrapper.collapsed {
+    width: 0; /* Collapsed width */
+}
+.sidebar-content {
+    width: 250px; /* Keep content width for centering */
+}
+
diff --git a/public_html/templates/page-header.php b/public_html/templates/page-header.php
index 0855ccd..a846733 100644
--- a/public_html/templates/page-header.php
+++ b/public_html/templates/page-header.php
@@ -5,9 +5,9 @@
     <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="static/all.css">
     <script src="static/bootstrap.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <title>Jilo Web</title>
 </head>
 
diff --git a/public_html/templates/page-menu.php b/public_html/templates/page-menu.php
index ecc3e3c..9709cc7 100644
--- a/public_html/templates/page-menu.php
+++ b/public_html/templates/page-menu.php
@@ -2,6 +2,10 @@
         <!-- 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">
+                    sidebar
+                </button>
+
                 <li><a href="index.php">home</a></li>
 <?php if ( isset($_SESSION['username']) ) { ?>
                 <li><a href="?page=config">config</a></li>
diff --git a/public_html/templates/page-sidebar.php b/public_html/templates/page-sidebar.php
index d54dfb2..adbc835 100644
--- a/public_html/templates/page-sidebar.php
+++ b/public_html/templates/page-sidebar.php
@@ -1,18 +1,13 @@
         <div class="row">
 
             <!-- Sidebar -->
-            <div class="col-md-3">
-                <button class="btn btn-primary mb-3" type="button" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
-                    sidebar
-                </button>
-                <div class="collapse show" id="sidebar">
-                    <div class="card card-body bg-light">
-                        <ul class="list-group">
-                            <li class="list-group-item"><a href="#">stats</a></li>
-                            <li class="list-group-item"><a href="#">config</a></li>
-                            <li class="list-group-item"><a href="#">logs</a></li>
-                        </ul>
-                    </div>
+            <div class="col-md-3 sidebar-wrapper collapse show" id="sidebar">
+                <div class="card card-body bg-light">
+                    <ul class="list-group">
+                        <li class="list-group-item"><a href="#">stats</a></li>
+                        <li class="list-group-item"><a href="#">config</a></li>
+                        <li class="list-group-item"><a href="#">logs</a></li>
+                    </ul>
                 </div>
             </div>
             <!-- /Sidebar -->