diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index eb1eb2ddac68946cc8d5624eaab724ab1a390bde..9e8790b715b90cbccee6bf5cb6c5c44a45aa1916 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -62,7 +62,8 @@ changelog:
   label: v1.0
 
 customize:
-  url: customize.html
+  url: '#customize'
   title: Customize
   icon: sliders
+  toggle: modal
 
diff --git a/pages/_includes/layout/customize.html b/pages/_includes/layout/customize.html
new file mode 100644
index 0000000000000000000000000000000000000000..17084a20c7624f59d713130428bcf5c91071d947
--- /dev/null
+++ b/pages/_includes/layout/customize.html
@@ -0,0 +1,40 @@
+<form action="#" class="js-layout-form">
+   <div class="form-group">
+      <label class="form-label">Color scheme</label>
+      {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Nav position</label>
+      {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Header color</label>
+      {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <!--<div class="form-group">-->
+   <!--<label class="form-label">Header fixed</label>-->
+   <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
+   <!--</div>-->
+   <div class="form-group">
+      <label class="form-label">Sidebar position</label>
+      {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar size</label>
+      {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar color</label>
+      {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar fixed</label>
+      {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
+   </div>
+
+
+
+   <!--<div class="form-footer">-->
+   <!--<button type="submit" class="btn btn-primary">Save options</button>-->
+   <!--</div>-->
+</form>
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index 9b0e4a6986e7f14310ef70426865d672c9350fd8..16dcb228b41bf5a45323c00fe085392bc035facb 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -4,7 +4,7 @@
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
    <li class="nav-item">
-      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
+      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
          <span class="nav-icon">
             {% include ui/icon.html icon=icon  %}
          </span>
diff --git a/pages/_includes/layout/modals.html b/pages/_includes/layout/modals.html
new file mode 100644
index 0000000000000000000000000000000000000000..6ead7fe03484055562f3f57875672555ef5e4f15
--- /dev/null
+++ b/pages/_includes/layout/modals.html
@@ -0,0 +1,13 @@
+<div class="modal fade" id="customize" tabindex="-1" role="dialog" aria-hidden="true">
+   <div class="modal-dialog" role="document">
+      <div class="modal-content">
+         <div class="modal-body">
+            <a class="close" data-dismiss="modal" aria-label="Close">
+               <span aria-hidden="true">&times;</span>
+            </a>
+
+            {% include layout/customize.html %}
+         </div>
+      </div>
+   </div>
+</div>
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 7588482f9e40579f3121edeecf21845b7584cbd7..61c28e70488fbceec0a8c40513b37a4299cc3f0a 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -21,3 +21,5 @@ layout: base
       </main>
    </div>
 </div>
+
+{% include layout/modals.html %}
diff --git a/pages/customize.html b/pages/customize.html
deleted file mode 100644
index 617e6094ef926bdef50deb8608d376d1feb9e649..0000000000000000000000000000000000000000
--- a/pages/customize.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Layout manager
----
-
-<div class="card">
-   <div class="card-header">
-      Layout manager
-   </div>
-   <div class="card-body">
-      <form action="" class="js-layout-form">
-         <div class="row">
-            <div class="col-4">
-               <div class="form-group">
-                  <label class="form-label">Color scheme</label>
-                  {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Nav position</label>
-                  {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Header color</label>
-                  {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <!--<div class="form-group">-->
-                  <!--<label class="form-label">Header fixed</label>-->
-                  <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
-               <!--</div>-->
-               <div class="form-group">
-                  <label class="form-label">Sidebar position</label>
-                  {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar size</label>
-                  {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar color</label>
-                  {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar fixed</label>
-                  {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
-               </div>
-
-
-
-               <!--<div class="form-footer">-->
-                  <!--<button type="submit" class="btn btn-primary">Save options</button>-->
-               <!--</div>-->
-            </div>
-         </div>
-      </form>
-   </div>
-</div>
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 4cf8bcd24920fe9e22a3aa204ae980328616b7d6..927c361ef9dbd525a7c95ff8b93c4ca585a5a98c 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -231,28 +231,32 @@ Responsive utils
     @include media-breakpoint-up(xl) {
       display: flex;
 
-      & ~ .layout-main {
-        margin-left: $sidenav-width;
-      }
+      &.navbar-fixed {
+        & ~ .layout-main {
+          margin-left: $sidenav-width;
+        }
 
-      &.navbar-right ~ .layout-main {
-        margin-left: 0;
-        margin-right: $sidenav-width;
+        &.navbar-right ~ .layout-main {
+          margin-left: 0;
+          margin-right: $sidenav-width;
+        }
       }
     }
 
     &.navbar-folded {
       display: flex;
 
-      @include media-breakpoint-up(lg) {
+      &.navbar-fixed {
+        @include media-breakpoint-up(lg) {
 
-        & ~ .layout-main {
-          margin-left: $sidenav-folded-width;
-        }
+          & ~ .layout-main {
+            margin-left: $sidenav-folded-width;
+          }
 
-        &.navbar-right ~ .layout-main {
-          margin-left: 0;
-          margin-right: $sidenav-folded-width;
+          &.navbar-right ~ .layout-main {
+            margin-left: 0;
+            margin-right: $sidenav-folded-width;
+          }
         }
       }
     }