diff --git a/app/static/css/sidebar.css b/app/static/css/sidebar.css
index 9f05590f5..ed3c9af3d 100644
--- a/app/static/css/sidebar.css
+++ b/app/static/css/sidebar.css
@@ -3,3 +3,77 @@
   color:black;
 
 }
+#sidebar-toggle svg {
+    fill: #fff;
+ }
+ 
+ @media (min-width: 992px) {
+    .footer {
+        padding-left: 0 !important;
+    }
+ }
+ 
+ #sidebar-toggle {
+    display: none;
+ }
+ 
+ #sidebar-toggle svg {
+    fill: #fff;
+ }
+ 
+ #sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 99;
+ }
+ 
+ #sidebar-overlay.active {
+    display: block;
+ }
+ 
+ @media (max-width: 991px) {
+ 
+ 
+    #sidebar-toggle {
+        display: block;
+        position: fixed;
+        top: 15px;
+        left: 0;
+        z-index: 200;
+        background-color: #275881;
+        border: none;
+        border-radius: 0 4px 4px 0;
+        padding: 10px 10px 5px 10px;
+        cursor: pointer;
+        transition: left 0.3s ease;
+    }
+ 
+    body.sidebar-is-open #sidebar-toggle {
+        left: 280px;
+    }
+ 
+    #sidebar {
+        left: -280px;
+        transition: left 0.3s ease;
+        z-index: 150;
+    }
+ 
+    #sidebar.sidebar-open {
+        left: 0;
+    }
+ 
+    .sidebar-push {
+        left: 0 !important;
+        width: 100vw !important;
+        margin-right: 0 !important;
+    }
+ 
+    .footer {
+        padding-left: 0 !important;
+    }
+ } 
\ No newline at end of file
diff --git a/app/static/js/sidebar.js b/app/static/js/sidebar.js
index 5a8d62b4a..3f84c5f93 100644
--- a/app/static/js/sidebar.js
+++ b/app/static/js/sidebar.js
@@ -7,4 +7,30 @@ $(document).ready(function() {
     $('.navbar li').removeAttr('tabindex');
     $('.navbar div').removeAttr('tabindex');
     }
+  $('#sidebar-toggle').on('click', function() {
+    if ($('#sidebar').hasClass('sidebar-open')) {
+      closeSidebar();
+    } else {
+      openSidebar();
+    }
+  });
+  $('#sidebar-overlay').on('click', function() {
+    closeSidebar();
+  });
   });
+
+function openSidebar() {
+  $('#sidebar').addClass('sidebar-open');
+  $('#sidebar-overlay').addClass('active');
+  $('body').addClass('sidebar-is-open');
+  $('#sidebar-toggle').attr('aria-expanded', true);
+}
+function closeSidebar() {
+  $('#sidebar').removeClass('sidebar-open');
+  $('#sidebar-overlay').removeClass('active');
+  $('body').removeClass('sidebar-is-open');
+  $('#sidebar-toggle').attr('aria-expanded', false);
+}
+
+
+
diff --git a/app/templates/sidebar.html b/app/templates/sidebar.html
index 74a216c4f..39676f748 100644
--- a/app/templates/sidebar.html
+++ b/app/templates/sidebar.html
@@ -1,3 +1,10 @@
+<button id="sidebar-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="sidebar">
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-list" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+  </svg>
+ </button>
+ <div id="sidebar-overlay"></div>
+ 
 <div id="sidebar" class="col-sm-2">
     <nav class="navbar">
       <!-- Logo -->