diff --git a/templates/layout/default.php b/templates/layout/default.php
index 865002d..ce1dcf8 100644
--- a/templates/layout/default.php
+++ b/templates/layout/default.php
@@ -16,6 +16,8 @@
 use Cake\Core\Configure;
 
 $cakeDescription = 'Cerebrate';
+
+$sidebarOpen = $loggedUser->user_settings_by_name['ui.sidebar.expanded']->value;
 ?>
 <!DOCTYPE html>
 <html>
@@ -72,7 +74,7 @@ $cakeDescription = 'Cerebrate';
         <header class="navbar top-navbar navbar-dark">
             <?= $this->element('layouts/header') ?>
         </header>
-        <nav id="app-sidebar" class="collapse d-sm-block sidebar">
+        <nav id="app-sidebar" class="collapse d-sm-block sidebar <?= !empty($sidebarOpen) ? 'expanded' : '' ?>">
             <?= $this->element('layouts/sidebar') ?>
         </nav>
         <main role="main" class="content">
diff --git a/webroot/js/main.js b/webroot/js/main.js
index f2a5293..4de4f5e 100644
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -162,4 +162,18 @@ $(document).ready(() => {
     $('#globalSearch')
         .keydown(debouncedGlobalSearch)
         .keydown(focusSearchResults);
-})
+
+    $('.lock-sidebar a.btn-lock-sidebar').click(() => {
+        const $sidebar = $('.sidebar')
+        let expanded = $sidebar.hasClass('expanded');
+        if (expanded) {
+            $sidebar.removeClass('expanded')
+        } else {
+            $sidebar.addClass('expanded')
+        }
+        const settingName = 'ui.sidebar.expanded';
+        const url = `/user-settings/setSetting/${settingName}`
+        AJAXApi.quickFetchAndPostForm(url, {
+            value: expanded ? 0 : 1
+        }, { provideFeedback: false})
+    })
