diff --git a/src/main/java/io/codeka/gaia/dashboard/controller/DashboardControllerAdvice.java b/src/main/java/io/codeka/gaia/dashboard/controller/DashboardControllerAdvice.java
index 1b5df9f73..d95d6c547 100644
--- a/src/main/java/io/codeka/gaia/dashboard/controller/DashboardControllerAdvice.java
+++ b/src/main/java/io/codeka/gaia/dashboard/controller/DashboardControllerAdvice.java
@@ -3,6 +3,7 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.actuate.info.InfoEndpoint;
 import org.springframework.web.bind.annotation.ControllerAdvice;
+import org.springframework.web.bind.annotation.CookieValue;
 import org.springframework.web.bind.annotation.ModelAttribute;
 
 import java.util.Map;
@@ -21,4 +22,10 @@ public class DashboardControllerAdvice {
     public Map<String, Object> buildInformation(){
         return infoEndpoint.info();
     }
+
+    @ModelAttribute("sidebar_collapsed")
+    public boolean sidebarCollapsed(@CookieValue(name = "sidebar_collapsed", defaultValue = "false") String cookieValue){
+        return Boolean.valueOf(cookieValue);
+    }
+
 }
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index dcb377d2f..b45356453 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -10,7 +10,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/job.html b/src/main/resources/templates/job.html
index 689c0c827..58b0e42d5 100644
--- a/src/main/resources/templates/job.html
+++ b/src/main/resources/templates/job.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/module.html b/src/main/resources/templates/module.html
index 793498edd..b2e5a25ba 100644
--- a/src/main/resources/templates/module.html
+++ b/src/main/resources/templates/module.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/module_description.html b/src/main/resources/templates/module_description.html
index d56838cc1..9e75e37c8 100644
--- a/src/main/resources/templates/module_description.html
+++ b/src/main/resources/templates/module_description.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/modules.html b/src/main/resources/templates/modules.html
index c94c09596..8638bd0b7 100644
--- a/src/main/resources/templates/modules.html
+++ b/src/main/resources/templates/modules.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/new_stack.html b/src/main/resources/templates/new_stack.html
index 8678f568f..77cc39a17 100644
--- a/src/main/resources/templates/new_stack.html
+++ b/src/main/resources/templates/new_stack.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/settings.html b/src/main/resources/templates/settings.html
index 48fe0d241..43115fe26 100644
--- a/src/main/resources/templates/settings.html
+++ b/src/main/resources/templates/settings.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/stack.html b/src/main/resources/templates/stack.html
index b574b9d28..41a42fbe5 100644
--- a/src/main/resources/templates/stack.html
+++ b/src/main/resources/templates/stack.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/stacks.html b/src/main/resources/templates/stacks.html
index 4e1ea5415..8dfa05db7 100644
--- a/src/main/resources/templates/stacks.html
+++ b/src/main/resources/templates/stacks.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/users.html b/src/main/resources/templates/users.html
index 97795b6eb..30c1f90f0 100644
--- a/src/main/resources/templates/users.html
+++ b/src/main/resources/templates/users.html
@@ -9,7 +9,7 @@
 <div class="full_container">
     <div class="inner_container">
 
-        <div id="sidebar-placeholder"></div>
+        <div id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}"></div>
 
         <!-- right content -->
         <div id="content">
diff --git a/src/main/resources/templates/vue_templates/sidebar.vue b/src/main/resources/templates/vue_templates/sidebar.vue
index d65964bf3..3a503becd 100644
--- a/src/main/resources/templates/vue_templates/sidebar.vue
+++ b/src/main/resources/templates/vue_templates/sidebar.vue
@@ -1,5 +1,5 @@
 <template id="sidebar-template">
-    <nav id="sidebar">
+    <nav id="sidebar" th:class="${sidebar_collapsed ? 'active' : ''}">
         <div>
             <div class="sidebar-part">
                 <div class="sidebar-header">
@@ -37,15 +37,20 @@
     </nav>
 </template>
 
-<script type="application/ecmascript">
+<script th:inline="javascript"  type="application/ecmascript">
+    let sidebar_collapsed = [[${sidebar_collapsed}]];
+
     new Vue({
-        el: "#sidebar-placeholder",
-        template: "#sidebar-template"
+        el: "#sidebar",
+        template: "#sidebar-template",
     });
 
     $(document).ready(function () {
         /*-- sidebar js --*/
+        // sidebarCollapse button is in another part (header)
         $('#sidebarCollapse').on('click', function () {
+            sidebar_collapsed = ! sidebar_collapsed;
+            document.cookie = `sidebar_collapsed=${sidebar_collapsed}`;
             $('#sidebar').toggleClass('active');
         });
     });