diff --git a/modules/backend/lang/en/lang.php b/modules/backend/lang/en/lang.php
index 0c1b21c5c..277b46828 100644
--- a/modules/backend/lang/en/lang.php
+++ b/modules/backend/lang/en/lang.php
@@ -306,6 +306,7 @@ return [
         'app_tagline' => 'App Tagline',
         'app_tagline_description' => 'This name is shown on the sign in screen for the back-end.',
         'colors' => 'Colors',
+        'appearance' => 'Appearance',
         'primary_color' => 'Primary color',
         'secondary_color' => 'Secondary color',
         'accent_color' => 'Accent color',
diff --git a/modules/backend/layouts/_mainmenu.htm b/modules/backend/layouts/_mainmenu.htm
index 54657e731..2117b12be 100644
--- a/modules/backend/layouts/_mainmenu.htm
+++ b/modules/backend/layouts/_mainmenu.htm
@@ -1,9 +1,9 @@
 <?php
     $activeItem = BackendMenu::getActiveMainMenuItem();
     $mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings');
-    $navbarMode = 'navbar-mode-inline'; // Supported: inline, tile, collapse.
+    $navbarMode = Backend\Models\BrandSettings::get('menu_mode', 'inline');
 ?>
-<nav class="navbar control-toolbar <?= $navbarMode ?>" id="layout-mainmenu" role="navigation">
+<nav class="navbar control-toolbar navbar-mode-<?= $navbarMode ?>" id="layout-mainmenu" role="navigation">
     <div class="toolbar-item toolbar-primary">
         <div data-control="toolbar">
             <a class="menu-toggle" href="javascript:;">
diff --git a/modules/backend/models/brandsettings/fields.yaml b/modules/backend/models/brandsettings/fields.yaml
index 10739d45c..41a9a0476 100644
--- a/modules/backend/models/brandsettings/fields.yaml
+++ b/modules/backend/models/brandsettings/fields.yaml
@@ -28,19 +28,19 @@ tabs:
         primary_color:
             label: backend::lang.branding.primary_color
             type: colorpicker
-            tab: backend::lang.branding.colors
+            tab: backend::lang.branding.appearance
             availableColors: [#16a085, #27ae60, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6]
 
         secondary_color:
             label: backend::lang.branding.secondary_color
             type: colorpicker
-            tab: backend::lang.branding.colors
+            tab: backend::lang.branding.appearance
             availableColors: [#16a085, #27ae60, #2980b9, #8e44ad, #34495e, #f39c12, #d35400, #c0392b, #bdc3c7, #7f8c8d]
 
         accent_color:
             label: backend::lang.branding.accent_color
             type: colorpicker
-            tab: backend::lang.branding.colors
+            tab: backend::lang.branding.appearance
             availableColors: [#16a085, #27ae60, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6]
 
         custom_css:
@@ -50,4 +50,11 @@ tabs:
             size: giant
             language: css
 
-
+        menu_mode:
+            label: Menu display mode
+            tab: backend::lang.branding.appearance
+            type: radio
+            options:
+                inline: Inline
+                tile: Tiles
+                collapse: Collapsed
diff --git a/modules/system/assets/ui/less/checkbox.less b/modules/system/assets/ui/less/checkbox.less
index 8f12c863f..607ef90fa 100644
--- a/modules/system/assets/ui/less/checkbox.less
+++ b/modules/system/assets/ui/less/checkbox.less
@@ -90,13 +90,13 @@
 
         &:after {
             content: '';
-            width: 14px;
-            height: 14px;
+            width: 12px;
+            height: 12px;
             background-color: @color-checkbox-checked;
             display: inline-block;
             position: absolute;
             left: 0;
-            top: 3px;
+            top: 2px;
             .border-radius(17px);
         }
     }
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index 8f0e52310..e981d9e00 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -2303,7 +2303,7 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
 .custom-checkbox label:hover:before,.custom-radio label:hover:before{border-color:#c0c9cc}
 .custom-checkbox label:active:before,.custom-radio label:active:before{border-color:#a3b0b6}
 .custom-checkbox input[type=radio]:checked + label:before,.custom-radio input[type=radio]:checked + label:before{border-color:#1f99dc;line-height:17px;border-width:2px}
-.custom-checkbox input[type=radio]:checked + label:after,.custom-radio input[type=radio]:checked + label:after{content:'';width:14px;height:14px;background-color:#1f99dc;display:inline-block;position:absolute;left:0;top:3px;-webkit-border-radius:17px;-moz-border-radius:17px;border-radius:17px}
+.custom-checkbox input[type=radio]:checked + label:after,.custom-radio input[type=radio]:checked + label:after{content:'';width:12px;height:12px;background-color:#1f99dc;display:inline-block;position:absolute;left:0;top:2px;-webkit-border-radius:17px;-moz-border-radius:17px;border-radius:17px}
 .custom-checkbox input[type=radio][data-radio-color=green]:checked + label:before,.custom-radio input[type=radio][data-radio-color=green]:checked + label:before{border-color:#76a544}
 .custom-checkbox input[type=radio][data-radio-color=green]:checked + label:after,.custom-radio input[type=radio][data-radio-color=green]:checked + label:after{background-color:#76a544}
 .custom-checkbox input[type=radio][data-radio-color=red]:checked + label:before,.custom-radio input[type=radio][data-radio-color=red]:checked + label:before{border-color:#bb2424}