diff --git a/public_html/static/all.css b/public_html/static/all.css
index 45ca37f..1ef1e0b 100644
--- a/public_html/static/all.css
+++ b/public_html/static/all.css
@@ -121,15 +121,16 @@
     border: 1px solid gray;
 }
 
+
+/* collapsing sidebar */
 .sidebar-wrapper {
-    width: 250px; /* Default width of the sidebar */
-    transition: width 0.3s; /* Smooth transition for collapsing */
-    overflow-x: hidden; /* Hide horizontal scrollbar */
+    width: 250px;
+    transition: width 0.5s ease;
+    overflow-x: hidden;
 }
 .sidebar-wrapper.collapsed {
-    width: 0; /* Collapsed width */
+    width: 2em;
 }
 .sidebar-content {
-    width: 250px; /* Keep content width for centering */
+    width: 250px;
 }
-
diff --git a/public_html/templates/page-footer.php b/public_html/templates/page-footer.php
index b075cd3..227eda7 100644
--- a/public_html/templates/page-footer.php
+++ b/public_html/templates/page-footer.php
@@ -9,9 +9,11 @@
     </div>
 
 <script>
+    // slide the sidebar to the left instead of default up
     document.getElementById('toggleSidebarButton').addEventListener('click', function () {
         document.getElementById('sidebar').classList.toggle('collapsed');
     });
+
 </script>
 
 </body>
diff --git a/public_html/templates/page-menu.php b/public_html/templates/page-menu.php
index d423f5a..919cf74 100644
--- a/public_html/templates/page-menu.php
+++ b/public_html/templates/page-menu.php
@@ -5,7 +5,6 @@
                 <button class="btn btn-primary mb-3" type="button" id="toggleSidebarButton">
                     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 b6deb9c..939cec6 100644
--- a/public_html/templates/page-sidebar.php
+++ b/public_html/templates/page-sidebar.php
@@ -13,6 +13,6 @@
 
             <!-- /Sidebar -->
 
-        <div class="col-md-9">
+        <div class="col-md-9" id="main-content">
 
             <!-- Main content -->