diff --git a/templates/layout.html b/templates/layout.html
index 6a24deb..4539bd4 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -42,12 +42,43 @@
             border-right: 1px solid #dee2e6;
             overflow-y: auto;
             flex-shrink: 0;
+            transition: transform 0.3s ease;
+            position: relative;
+            z-index: 1000;
+        }
+        .sidebar.collapsed {
+            transform: translateX(-250px);
+        }
+        .sidebar-toggle {
+            position: fixed;
+            top: 80px;
+            left: 10px;
+            z-index: 1001;
+            background-color: #0d6efd;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 8px 12px;
+            cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            transition: all 0.3s ease;
+        }
+        .sidebar-toggle:hover {
+            background-color: #0a58ca;
+            transform: scale(1.05);
+        }
+        .sidebar-toggle.shifted {
+            left: 270px;
+        }
+        .main-content.shifted {
+            margin-left: 0;
         }
         
         .main-content {
             flex: 1;
             overflow-y: auto;
             padding: 20px;
+            transition: margin-left 0.3s ease;
         }
         
         .folder-toggle {
@@ -231,7 +262,10 @@
     
     <div class="main-wrapper">
         <div class="content-wrapper">
-            <nav class="sidebar">
+            <button class="sidebar-toggle" id="sidebarToggle">
+                <i class="bi bi-list"></i>
+            </button>
+            <nav class="sidebar" id="sidebar">
                 <div class="pt-3">
                     <ul class="nav flex-column">
                         {{menu}}
@@ -273,6 +307,27 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // Sidebar toggle functionality
+            const sidebarToggle = document.getElementById('sidebarToggle');
+            const sidebar = document.getElementById('sidebar');
+            const mainContent = document.querySelector('.main-content');
+            
+            sidebarToggle.addEventListener('click', function() {
+                sidebar.classList.toggle('collapsed');
+                mainContent.classList.toggle('shifted');
+                sidebarToggle.classList.toggle('shifted');
+                
+                // Change icon
+                const icon = this.querySelector('i');
+                if (sidebar.classList.contains('collapsed')) {
+                    icon.classList.remove('bi-list');
+                    icon.classList.add('bi-chevron-right');
+                } else {
+                    icon.classList.remove('bi-chevron-right');
+                    icon.classList.add('bi-list');
+                }
+            });
+            
             // Open folders that contain the current active page
             const activeLink = document.querySelector('.nav-link.active');
             if (activeLink) {