diff --git a/js/app/demo.js b/js/app/demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..418da4ca55b929bee70fd5da1c7af8bf8898b58f
--- /dev/null
+++ b/js/app/demo.js
@@ -0,0 +1,68 @@
+'use strict';
+
+class TablerDemo {
+  constructor() {
+    this.init();
+  };
+
+  init() {
+    this.config = this.getConfig();
+
+    console.log('config', this.config);
+  };
+
+  getConfig = function () {
+    return {
+      colorScheme: (localStorage.getItem('tablerColorScheme')) ? localStorage.getItem('tablerColorScheme') : 'light',
+      navPosition: (localStorage.getItem('tablerNavPosition')) ? localStorage.getItem('tablerNavPosition') : 'side',
+      sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'light',
+      sidebarSize: (localStorage.getItem('tablerSidebarSize')) ? localStorage.getItem('tablerSidebarSize') : 'default',
+      sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left'
+    };
+  };
+
+  setConfig = function (key, value, availableValues) {
+    if (availableValues && availableValues.indexOf(value) !== -1) {
+      key = 'tabler' + key.charAt(0).toUpperCase() + key.slice(1);
+
+      localStorage.setItem(key, value);
+    }
+
+    return this.getConfig();
+  };
+
+  renderManagerHtml(elem) {
+    elem.innerHTML = 'test2';
+  };
+
+  toggleColorScheme(colorScheme) {
+    return this.setConfig('colorScheme', colorScheme, ['dark', 'light']);
+  };
+
+  toggleNavPosition(position) {
+    return this.setConfig('navPosition', position, ['top', 'side']);
+  };
+
+  toggleSidebarPosition(position) {
+    return this.setConfig('sidebarPosition', position, ['left', 'right']);
+  };
+
+  toggleSidebarSize(size) {
+    return this.setConfig('sidebarSize', size, ['default', 'folded']);
+  };
+
+  toggleSidebarColor(color) {
+    return this.setConfig('sidebarColor', color, ['dark', 'light']);
+  };
+}
+
+const demo = new TablerDemo();
+window.DEMO = demo;
+
+document.addEventListener("DOMContentLoaded", function () {
+  let  elem = document.getElementById('layout-manager');
+
+  if (elem) {
+    demo.renderManagerHtml(elem);
+  }
+});
diff --git a/js/app/layout-manager.js b/js/app/layout-manager.js
deleted file mode 100644
index 82fadee5f5b1a88edea3648077373a01a06cbf15..0000000000000000000000000000000000000000
--- a/js/app/layout-manager.js
+++ /dev/null
@@ -1,19 +0,0 @@
-'use strict';
-
-class TablerLayoutManager {
-  static init() {
-    this.elem = document.getElementById('layout-manager');
-
-    if(this.elem) {
-      this.renderHtml();
-    }
-  }
-
-  static renderHtml() {
-    this.elem.innerHTML = 'test';
-  }
-}
-
-document.addEventListener("DOMContentLoaded", function() {
-  TablerLayoutManager.init();
-});
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 3961c897da514acfc66a15ea7d5a73c534be98c8..9db2dd9c4c6cf5d91527f7db508863a2024a636f 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -61,4 +61,8 @@ changelog:
   icon: file-plus
   label: v1.0
 
+customize:
+  url: #
+  title: Customize
+  icon: sliders
 
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index 9ff61a6bed3f56ebd41becb7e1006c45e8b22b9f..4b36f958e2d0e396797d08d9ab88262079faa05a 100644
--- a/pages/_includes/layout/js.html
+++ b/pages/_includes/layout/js.html
@@ -10,7 +10,7 @@
 
 <script src="{{ site.base }}/js/tabler.js"></script>
 <script src="{{ site.base }}/js/app/charts.js"></script>
-<script src="{{ site.base }}/js/app/layout-manager.js"></script>
+<script src="{{ site.base }}/js/app/demo.js"></script>
 
 <script>
    window.tabler = window.tabler || {};
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 287d620c5f4296a5cd6c23e9ba4fc567c2b74c94..f174644e4f5dc1b02980350f0321cbfb3c13c134 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -3,20 +3,16 @@ layout: base
 ---
 
 <div class="d-flex flex-row">
-   {% if page.nav-position == "left" or page.nav-position == "right" %}
    {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded fixed=true %}
-   {% endif %}
 
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
 
-      {% if page.nav-position == "top" or page.nav-position == "all" %}
       <div class="d-none d-lg-flex navbar navbar-expand-md">
          <div class="container">
             {% include layout/menu.html top=true %}
          </div>
       </div>
-      {% endif %}
 
       <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4">
          <!--{% include layout/page-title.html %}-->
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 280cd81c329ea23d18df2a9c188530a95403d05c..0f4c2c8c024469a038a20ba270f2cf15fa93b14f 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -124,6 +124,8 @@ Sidebar
   margin: 0;
   pointer-events: inherit;
   justify-content: start;
+  flex-wrap: nowrap;
+  overflow: auto;
 
   .nav {
     flex-direction: column;