diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 61ffc948f..bffad01a8 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -586,6 +586,7 @@ body{webkit-font-smoothing:antialiased;font-family:sans-serif;background:#f9f9f9
 .layout > .layout-row > .layout-cell{display:table-cell;vertical-align:top;height:100%}
 .layout > .layout-row > .layout-cell.width-100{width:100px}
 .layout > .layout-row > .layout-cell.width-120{width:120px}
+.layout > .layout-row > .layout-cell.width-130{width:130px}
 .layout > .layout-row > .layout-cell.width-140{width:140px}
 .layout > .layout-row > .layout-cell.width-200{width:200px}
 .layout > .layout-row > .layout-cell.width-300{width:300px}
@@ -600,6 +601,7 @@ body{webkit-font-smoothing:antialiased;font-family:sans-serif;background:#f9f9f9
 .layout > .layout-row > .layout-cell.middle{vertical-align:middle}
 .layout > .layout-row > .layout-cell.width-100{width:100px}
 .layout > .layout-row > .layout-cell.width-120{width:120px}
+.layout > .layout-row > .layout-cell.width-130{width:130px}
 .layout > .layout-row > .layout-cell.width-140{width:140px}
 .layout > .layout-row > .layout-cell.width-200{width:200px}
 .layout > .layout-row > .layout-cell.width-300{width:300px}
@@ -616,6 +618,7 @@ body{webkit-font-smoothing:antialiased;font-family:sans-serif;background:#f9f9f9
 .layout > .layout-cell{display:table-cell;vertical-align:top;height:100%}
 .layout > .layout-cell.width-100{width:100px}
 .layout > .layout-cell.width-120{width:120px}
+.layout > .layout-cell.width-130{width:130px}
 .layout > .layout-cell.width-140{width:140px}
 .layout > .layout-cell.width-200{width:200px}
 .layout > .layout-cell.width-300{width:300px}
@@ -658,42 +661,51 @@ body.slim-container .layout.layout-container,body.slim-container .layout .layout
 .flex-layout-item.width-200{width:200px}
 .flex-layout-item.width-300{width:300px}
 body.mainmenu-open{overflow:hidden}
-.mainmenu-tooltip .tooltip-inner{font-size:16px;padding:6px 16px}
-nav#layout-mainmenu{background-color:#111111;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top}
+.mainmenu-tooltip .tooltip-inner{font-size:16px;padding:6px 16px;border-radius:0}
+nav#layout-mainmenu{background-color:#111111;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top;height:78px}
 nav#layout-mainmenu a{text-decoration:none}
 nav#layout-mainmenu a:focus{background:transparent}
 nav#layout-mainmenu ul{margin:0;padding:0;list-style:none;float:left;white-space:nowrap;overflow:hidden}
-nav#layout-mainmenu ul li{color:#555555;display:inline-block;vertical-align:top;margin-right:30px;position:relative; }
-nav#layout-mainmenu ul li a{padding:19px 0 15px;display:inline-block;font-size:16px;color:inherit;outline:none}
+nav#layout-mainmenu ul li{color:#555555;display:inline-block;vertical-align:top;position:relative}
+nav#layout-mainmenu ul li a{display:inline-block;font-size:14px;color:inherit;outline:none;padding:14px 0 10px}
 nav#layout-mainmenu ul li a:hover{background-color:transparent !important}
 nav#layout-mainmenu ul li a:active,nav#layout-mainmenu ul li a:focus{text-decoration:none;color:#555555}
-nav#layout-mainmenu ul li a i{position:relative;top:-2px;line-height:1;font-size:30px;vertical-align:middle;margin-right:10px}
+nav#layout-mainmenu ul li a i{line-height:1;font-size:30px;vertical-align:middle}
 nav#layout-mainmenu ul li a img.svg-icon{height:30px;width:30px;margin-right:10px;position:relative;top:0}
-nav#layout-mainmenu ul li a .nav-label{display:none}
-nav#layout-mainmenu ul li:last-child{margin-right:0}
-nav#layout-mainmenu ul li.active .nav-label{display:inline}
-nav#layout-mainmenu ul li.icon{margin-right:0}
-nav#layout-mainmenu ul li.icon i{margin-right:0}
-nav#layout-mainmenu ul li.icon a{padding:14px}
-nav#layout-mainmenu ul li.power-off i,nav#layout-mainmenu ul li.preview i{font-size:20px}
-nav#layout-mainmenu ul li.power-off a,nav#layout-mainmenu ul li.preview a{padding:25px 10px 19px 21px}
-nav#layout-mainmenu ul li.account{margin-right:0}
-nav#layout-mainmenu ul li.account > a{padding:16px 20px 13px 10px;font-size:18px;position:relative;z-index:200}
-nav#layout-mainmenu ul li.account img{width:35px;margin-right:15px;position:relative;top:-1px}
-nav#layout-mainmenu ul li.account ul{line-height:23px}
+nav#layout-mainmenu ul li.icon-only{margin-right:0}
+nav#layout-mainmenu ul li.icon-only a{padding:14px}
+nav#layout-mainmenu ul li.icon-only i{margin-right:0}
 nav#layout-mainmenu ul.nav{display:inline-block}
-nav#layout-mainmenu .menu-toggle{padding:19px 0 15px;display:inline-block;font-size:16px;color:inherit;outline:none;display:none}
-nav#layout-mainmenu .menu-toggle:hover{background-color:transparent !important}
-nav#layout-mainmenu .menu-toggle:active,nav#layout-mainmenu .menu-toggle:focus{text-decoration:none;color:#555555}
-nav#layout-mainmenu .menu-toggle i{position:relative;top:-2px;line-height:1;font-size:30px;vertical-align:middle;margin-right:10px}
 nav#layout-mainmenu .toolbar-item{padding-right:0}
 nav#layout-mainmenu .toolbar-item:before,nav#layout-mainmenu .toolbar-item:after{margin-top:0}
 nav#layout-mainmenu .toolbar-item:before{left:-12px}
 nav#layout-mainmenu .toolbar-item:after{right:-12px}
 nav#layout-mainmenu .toolbar-item.scroll-active-before:before{color:#ffffff}
 nav#layout-mainmenu .toolbar-item.scroll-active-after:after{color:#ffffff}
+nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-preview i{font-size:20px}
+nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-preview a{height:62px;line-height:62px;padding:0 15px;margin:8px 0 8px 11px}
+nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account{margin-right:0}
+nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account > a{height:78px;line-height:78px;padding:0 20px 0 10px;font-size:16px;letter-spacing:-1px;font-weight:bold;position:relative;z-index:590}
+nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account img{width:40px;margin-right:15px;border-radius:999px}
+nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account ul{line-height:23px}
+nav#layout-mainmenu:hover ul.mainmenu-nav li{-webkit-transition:opacity 0.15s ease;transition:opacity 0.15s ease;opacity:1}
+nav#layout-mainmenu ul.mainmenu-nav li a{position:relative;width:65px;height:65px}
+nav#layout-mainmenu ul.mainmenu-nav li a .nav-icon{text-align:center;display:block;position:absolute;top:50%;left:50%;margin-left:-15px;margin-top:-22.5px;width:30px;height:30px}
+nav#layout-mainmenu ul.mainmenu-nav li a .nav-icon i,nav#layout-mainmenu ul.mainmenu-nav li a .nav-icon img{margin:0}
+nav#layout-mainmenu ul.mainmenu-nav li a .nav-label{display:block;width:100px;height:20px;line-height:20px;position:absolute;bottom:0;left:50%;padding:0 5px;margin-left:-50px;font-size:15px;overflow:hidden;text-overflow:ellipsis;text-align:center}
+nav#layout-mainmenu ul.mainmenu-nav li{opacity:.65;-webkit-transition:opacity 5s ease;transition:opacity 5s ease;-webkit-transition-delay:5s;transition-delay:5s;margin-right:30px;padding:3px 0}
+nav#layout-mainmenu ul.mainmenu-nav li:first-child{margin-left:8px}
+nav#layout-mainmenu ul.mainmenu-nav li:last-child{margin-right:0}
+nav#layout-mainmenu ul.mainmenu-nav li.active{opacity:1}
+nav#layout-mainmenu ul.mainmenu-nav li.active a .nav-label{text-shadow:1px 1px 0 rgba(255,255,255,0.3)}
+nav#layout-mainmenu ul.mainmenu-nav li:hover .nav-label{width:auto;min-width:100px;text-overflow:all;overflow:visible;background-color:#111111;z-index:2}
+nav#layout-mainmenu .menu-toggle{display:inline-block;font-size:14px;color:inherit;outline:none;height:78px;line-height:78px;display:none}
+nav#layout-mainmenu .menu-toggle:hover{background-color:transparent !important}
+nav#layout-mainmenu .menu-toggle:active,nav#layout-mainmenu .menu-toggle:focus{text-decoration:none;color:#555555}
+nav#layout-mainmenu .menu-toggle i{line-height:1;font-size:30px;vertical-align:middle}
+nav#layout-mainmenu .menu-toggle > i{margin-right:10px}
 html.svg nav#layout-mainmenu img.svg-icon,html.svg .mainmenu-collapsed img.svg-icon{display:inline-block}
-nav#layout-mainmenu ul li .mainmenu-accountmenu{position:fixed;top:64px;right:0;background:#2b3e50;z-index:590;display:none}
+nav#layout-mainmenu ul li .mainmenu-accountmenu{position:fixed;top:78px;right:0;background:#2b3e50;z-index:590;display:none}
 nav#layout-mainmenu ul li .mainmenu-accountmenu.active{display:block}
 nav#layout-mainmenu ul li .mainmenu-accountmenu:after{content:'';display:block;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:12px solid #2b3e50;right:40px;top:-12px;position:absolute}
 nav#layout-mainmenu ul li .mainmenu-accountmenu ul{float:none;display:block}
@@ -715,13 +727,14 @@ nav#layout-mainmenu.navbar .menu-toggle{display:inline-block;color:#ffffff !impo
 .mainmenu-collapsed > div{display:relative;height:100%}
 .mainmenu-collapsed > div ul{overflow:hidden;padding:0;margin:0}
 .mainmenu-collapsed > div ul li{text-transform:uppercase;list-style:none;color:#555555}
-.mainmenu-collapsed > div ul li a{padding:19px 0 15px;display:inline-block;font-size:16px;color:inherit;outline:none;white-space:nowrap;display:block;padding:15px 20px}
+.mainmenu-collapsed > div ul li a{display:inline-block;font-size:14px;color:inherit;outline:none;white-space:nowrap;display:block;padding:15px 20px}
 .mainmenu-collapsed > div ul li a:hover{background-color:transparent !important}
 .mainmenu-collapsed > div ul li a:active,.mainmenu-collapsed > div ul li a:focus{text-decoration:none;color:#555555}
-.mainmenu-collapsed > div ul li a i{position:relative;top:-2px;line-height:1;font-size:30px;vertical-align:middle;margin-right:10px}
+.mainmenu-collapsed > div ul li a i{line-height:1;font-size:30px;vertical-align:middle}
 .mainmenu-collapsed > div ul li a:hover{text-decoration:none}
-.mainmenu-collapsed > div ul li a img.svg-icon{margin-right:10px;position:relative;top:-3px;width:30px;height:30px}
-.mainmenu-collapsed > div ul li a i{width:40px;text-align:left;display:inline-block}
+.mainmenu-collapsed > div ul li a .nav-icon{margin-right:10px}
+.mainmenu-collapsed > div ul li a .nav-icon img.svg-icon{position:relative;top:-3px;width:30px;height:30px}
+.mainmenu-collapsed > div ul li a .nav-icon i{width:30px;text-align:left;display:inline-block}
 .mainmenu-collapsed > div ul li.active a{padding:9px 20px 11px 20px}
 .mainmenu-collapsed .scroll-marker{position:absolute;left:0;width:100%;height:10px;display:none}
 .mainmenu-collapsed .scroll-marker:after{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f141";display:block;position:absolute;left:50%;margin-left:-3px;top:0;height:9px;font-size:10px;color:#555555}
@@ -737,14 +750,17 @@ body.mainmenu-open .mainmenu-collapsed ul{position:fixed;left:0;top:10px;bottom:
 }
 #layout-sidenav{background-color:#31495f;position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
 #layout-sidenav ul{position:relative;margin:0;padding:0;height:100%;overflow:hidden}
+#layout-sidenav ul,#layout-sidenav ul li:first-child a{-webkit-box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1);box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1)}
 #layout-sidenav ul:after{content:'';position:absolute;top:0;right:0;width:10px;height:100%;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)}
 #layout-sidenav ul li{display:block;text-align:center;position:relative}
-#layout-sidenav ul li a{padding:20px 13px;display:block;font-size:15px;color:rgba(255,255,255,0.35);font-weight:normal;position:relative}
+#layout-sidenav ul li a{padding:20px 10px;display:block;font-size:14px;color:rgba(255,255,255,0.35);font-weight:normal;position:relative}
 #layout-sidenav ul li a:hover{text-decoration:none;background-color:transparent}
 #layout-sidenav ul li a:focus{background:transparent}
 #layout-sidenav ul li a i{color:rgba(255,255,255,0.35);display:block;margin-bottom:5px;font-size:28px}
-#layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{background:#1f99dc;color:#ffffff}
+#layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{color:#ffffff}
 #layout-sidenav ul li.active a i,#layout-sidenav ul li a:hover i{color:#ffffff}
+#layout-sidenav ul li.active a{background:#1f99dc;text-shadow:1px 1px 0 rgba(0,0,0,0.2)}
+#layout-sidenav ul li.active a > i{text-shadow:none}
 #layout-sidenav ul li span.counter{display:block;position:absolute;top:15px;right:15px;padding:2px 6px 3px 4px;background-color:#d9350f;color:#ffffff;font-size:11px;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s}
 #layout-sidenav ul li span.counter.empty{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)}
 #layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover{color:rgba(255,255,255,0.35) !important}
diff --git a/modules/backend/assets/less/layout/layout.less b/modules/backend/assets/less/layout/layout.less
index e214193ca..f1bbe99d7 100644
--- a/modules/backend/assets/less/layout/layout.less
+++ b/modules/backend/assets/less/layout/layout.less
@@ -74,6 +74,7 @@ body {
 
         &.width-100 { width: 100px; }
         &.width-120 { width: 120px; }
+        &.width-130 { width: 130px; }
         &.width-140 { width: 140px; }
         &.width-200 { width: 200px; }
         &.width-300 { width: 300px; }
diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less
index 9946dbf05..5c0b78c6a 100644
--- a/modules/backend/assets/less/layout/mainmenu.less
+++ b/modules/backend/assets/less/layout/mainmenu.less
@@ -2,14 +2,19 @@
 // Top navigation bar
 // --------------------------------------------------
 
+@mainmenu-height: 78px;
+@mainmenu-tile-dimension: 65px;
+@mainmenu-tile-icon-dimension: 30px;
+@mainmenu-tile-label-height: 20px;
+@mainmenu-tile-label-width: 100px;
+
 body.mainmenu-open {
     overflow: hidden;
 }
 
-.main-menu-item-link() {
-    padding: 19px 0 15px;
+.mainmenu-item-link() {
     display: inline-block;
-    font-size: 16px;
+    font-size: 14px;
     color: inherit;
     outline: none;
 
@@ -23,12 +28,9 @@ body.mainmenu-open {
     }
 
     i {
-        position: relative;
-        top: -2px;
         line-height: 1;
         font-size: 30px;
         vertical-align: middle;
-        margin-right: 10px;
     }
 }
 
@@ -36,6 +38,7 @@ body.mainmenu-open {
     .tooltip-inner {
         font-size: 16px;
         padding: 6px 16px;
+        border-radius: 0;
     }
 }
 
@@ -45,6 +48,7 @@ nav#layout-mainmenu {
     line-height: 0;
     white-space: nowrap;
     vertical-align: top;
+    height: @mainmenu-height;
 
     a {
         text-decoration: none;
@@ -65,11 +69,11 @@ nav#layout-mainmenu {
             color: @color-mainmenu-inactive;
             display: inline-block;
             vertical-align: top;
-            margin-right: 30px;
             position: relative;
 
             a {
-                .main-menu-item-link();
+                .mainmenu-item-link();
+                padding: 14px 0 10px;
 
                 img.svg-icon {
                     height: 30px;
@@ -78,89 +82,12 @@ nav#layout-mainmenu {
                     position: relative;
                     top: 0;
                 }
-
-                .nav-label {
-                    display: none;
-                }
             }
 
-            &:last-child {
+            &.icon-only {
                 margin-right: 0;
-            }
-
-            &.active {
-                .nav-label {
-                    display: inline;
-                }
-            }
-/*
-            &.active {
-                &:after {
-                    content: ' ';
-                    position: absolute;
-                    bottom: 0;
-                    left: 50%;
-                    margin-left: -8.5px;
-                }
-
-                a {
-                    font-size: 18px;
-                    padding-top: 13px;
-                    padding-bottom: 8px;
-
-                    i {
-                        font-size: 40px;
-                    }
-
-                    img.svg-icon {
-                        height: 40px;
-                        width: 40px;
-                    }
-                }
-            }
-*/
-            &.icon {
-                margin-right: 0;
-
-                i {
-                    margin-right: 0;
-                }
-
-                a {
-                    padding: 14px;
-                }
-            }
-
-            &.power-off, &.preview {
-                i {
-                    font-size: 20px;
-                }
-
-                a {
-                    padding: 25px 10px 19px 21px;
-                }
-            }
-
-            &.account {
-                margin-right: 0;
-
-                > a {
-                    padding: 16px 20px 13px 10px;
-                    font-size: 18px;
-                    position: relative;
-                    z-index: 200; // Previous value 590 was overlappnig with drop-down menus on small screens
-                }
-
-                img {
-                    width: 35px;
-                    margin-right: 15px;
-                    position: relative;
-                    top: -1px;
-                }
-
-                ul {
-                    line-height: 23px;
-                }
+                a { padding: 14px; }
+                i { margin-right: 0; }
             }
         }
 
@@ -169,11 +96,6 @@ nav#layout-mainmenu {
         }
     }
 
-    .menu-toggle {
-        .main-menu-item-link();
-        display: none;
-    }
-
     .toolbar-item {
         padding-right: 0;
 
@@ -197,6 +119,151 @@ nav#layout-mainmenu {
             color: @color-mainmenu-active;
         }
     }
+
+    //
+    // Toolbar
+    //
+
+    ul.mainmenu-toolbar {
+        li.mainmenu-preview {
+            i {
+                font-size: 20px;
+            }
+
+            a {
+                height: @mainmenu-height - 16px;
+                line-height: @mainmenu-height - 16px;
+                padding: 0 15px;
+                margin: 8px 0 8px 11px;
+            }
+        }
+
+        li.mainmenu-account {
+            margin-right: 0;
+
+            > a {
+                height: @mainmenu-height;
+                line-height: @mainmenu-height;
+                padding: 0 20px 0 10px;
+                font-size: 16px;
+                letter-spacing: -1px;
+                font-weight: bold;
+                position: relative;
+                // z-index: 200; // Previous value 590 was overlappnig with drop-down menus on small screens
+                z-index: 590; // @todo Investigate: This causes the button to dim without 590
+            }
+
+            img {
+                width: 40px;
+                margin-right: 15px;
+                border-radius: 999px;
+            }
+
+            ul {
+                line-height: 23px;
+            }
+        }
+    }
+
+    //
+    // Tiles
+    //
+
+    &:hover {
+        ul.mainmenu-nav li {
+            .transition(opacity .15s ease);
+            opacity: 1;
+        }
+    }
+
+    ul.mainmenu-nav {
+        li a {
+            position: relative;
+            width: @mainmenu-tile-dimension;
+            height: @mainmenu-tile-dimension;
+
+            .nav-icon {
+                text-align: center;
+                display: block;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-left: -(@mainmenu-tile-icon-dimension / 2);
+                margin-top: -(@mainmenu-tile-dimension - @mainmenu-tile-label-height) / 2;
+                width: @mainmenu-tile-icon-dimension;
+                height: @mainmenu-tile-icon-dimension;
+                i, img { margin: 0; }
+            }
+
+            .nav-label {
+                display: block;
+                width: @mainmenu-tile-label-width;
+                height: @mainmenu-tile-label-height;
+                line-height: @mainmenu-tile-label-height;
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                padding: 0 5px;
+                margin-left: -(@mainmenu-tile-label-width / 2);
+                font-size: 15px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: center;
+            }
+        }
+
+        li {
+            opacity: .65;
+            .transition(opacity 5s ease);
+            .transition-delay(5s);
+
+            margin-right: 30px;
+            padding: 3px 0;
+
+            &:first-child {
+                margin-left: 8px;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            &.active {
+                opacity: 1;
+
+                a .nav-label {
+                    text-shadow: 1px 1px 0 rgba(255,255,255,.3);
+                }
+            }
+
+            &:hover {
+                .nav-label {
+                    width: auto;
+                    min-width: @mainmenu-tile-label-width;
+                    text-overflow: all;
+                    overflow: visible;
+                    background-color: @color-mainmenu;
+                    z-index: 2;
+                }
+            }
+        }
+    }
+
+    //
+    // Mobile
+    //
+
+    .menu-toggle {
+        .mainmenu-item-link();
+        height: @mainmenu-height;
+        line-height: @mainmenu-height;
+        display: none;
+
+        > i {
+            margin-right: 10px;
+        }
+    }
+
 }
 
 html.svg {
@@ -210,7 +277,7 @@ html.svg {
 
 nav#layout-mainmenu ul li .mainmenu-accountmenu {
     position: fixed;
-    top: 64px;
+    top: @mainmenu-height;
     right: 0;
     background: @color-accountmenu-bg;
     z-index: 590;
@@ -301,7 +368,7 @@ body.drag {
 
 @media (max-width: @menu-breakpoint-max) {
     nav#layout-mainmenu.navbar {
-        ul.nav {display: none;}
+        ul.nav { display: none; }
 
         .menu-toggle {
             display: inline-block;
@@ -335,7 +402,7 @@ body.drag {
                     color: @color-mainmenu-inactive;
 
                     a {
-                        .main-menu-item-link();
+                        .mainmenu-item-link();
 
                         white-space: nowrap;
                         display: block;
@@ -345,18 +412,21 @@ body.drag {
                             text-decoration: none;
                         }
 
-                        img.svg-icon {
+                        .nav-icon {
                             margin-right: 10px;
-                            position: relative;
-                            top: -3px;
-                            width: 30px;
-                            height: 30px;
-                        }
 
-                        i {
-                            width: 40px;
-                            text-align: left;
-                            display: inline-block;
+                            img.svg-icon {
+                                position: relative;
+                                top: -3px;
+                                width: 30px;
+                                height: 30px;
+                            }
+
+                            i {
+                                width: 30px;
+                                text-align: left;
+                                display: inline-block;
+                            }
                         }
                     }
 
@@ -379,6 +449,6 @@ body.mainmenu-open  .mainmenu-collapsed ul {
 }
 
 @media (min-width: @menu-breakpoint-min) {
-    #layout-canvas {position: static!important;}
-    .mainmenu-collapsed {display: none!important;}
-}
\ No newline at end of file
+    #layout-canvas { position: static!important; }
+    .mainmenu-collapsed { display: none!important; }
+}
diff --git a/modules/backend/assets/less/layout/sidenav.less b/modules/backend/assets/less/layout/sidenav.less
index 61d7d1c9e..1acdb5372 100644
--- a/modules/backend/assets/less/layout/sidenav.less
+++ b/modules/backend/assets/less/layout/sidenav.less
@@ -3,6 +3,13 @@
 // --------------------------------------------------
 
 #layout-sidenav {
+
+    background-color: @color-sidebarnav-bg;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    .box-sizing(border-box);
+
     .sidenav-shadow-element() {
         content: '';
         position: absolute;
@@ -11,16 +18,9 @@
         right: 0;
         width: 10px;
         height: 100%;
-        .box-shadow(inset -5px 0 3px rgba(0,0,0,0.1));
+        .box-shadow(inset -5px 0 3px rgba(0,0,0,.1));
     }
 
-    background-color: @color-sidebarnav-bg;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-
-    .box-sizing(border-box);
-
     ul {
         position: relative;
         margin: 0;
@@ -28,6 +28,10 @@
         height: 100%;
         overflow: hidden;
 
+        &, li:first-child a {
+            .box-shadow(inset 0 6px 3px -3px rgba(0,0,0,.1));
+        }
+
         &:after {
             .sidenav-shadow-element();
         }
@@ -38,9 +42,9 @@
             position: relative;
 
             a {
-                padding: 20px 13px;
+                padding: 20px 10px;
                 display: block;
-                font-size: 15px;
+                font-size: 14px;
                 color: @color-sidebarnav-inactive-text;
                 font-weight: normal;
                 position: relative;
@@ -63,12 +67,18 @@
             }
 
             &.active a, a:hover {
-                background: @color-sidebarnav-active-bg;
-
                 color: @color-sidebarnav-active-text;
                 i { color: @color-sidebarnav-active-icon; }
             }
 
+            &.active a {
+                background: @color-sidebarnav-active-bg;
+                text-shadow: 1px 1px 0 rgba(0,0,0,.2);
+                > i {
+                    text-shadow: none;
+                }
+            }
+
             span.counter {
                 display: block;
                 position: absolute;
diff --git a/modules/backend/layouts/_mainmenu.htm b/modules/backend/layouts/_mainmenu.htm
index fff0a3037..8734d9076 100644
--- a/modules/backend/layouts/_mainmenu.htm
+++ b/modules/backend/layouts/_mainmenu.htm
@@ -10,13 +10,13 @@
                 <?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
             </a>
 
-            <ul class="nav">
+            <ul class="nav mainmenu-nav">
                 <?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
                     <?php
                         $isActive = BackendMenu::isMainMenuItemActive($item);
                     ?>
-                    <li class="<?= $isActive ? 'active' : null ?> svg-icon-container svg-active-effects with-tooltip">
-                        <a href="<?= $item->url ?>" title="<?= e(trans($item->label)) ?>">
+                    <li class="<?= $isActive ? 'active' : null ?> svg-icon-container svg-active-effects">
+                        <a href="<?= $item->url ?>">
                             <span class="nav-icon">
                                 <?php if ($item->iconSvg): ?>
                                     <img class="svg-icon" src="<?= URL::asset($item->iconSvg) ?>">
@@ -34,8 +34,8 @@
         </div>
     </div>
     <div class="toolbar-item" data-calculate-width>
-        <ul>
-            <li class="icon preview with-tooltip">
+        <ul class="mainmenu-toolbar">
+            <li class="mainmenu-preview icon-only with-tooltip">
                 <a
                     href="<?= URL::to('/') ?>"
                     target="_blank"
@@ -43,9 +43,9 @@
                     <i class="icon-crosshairs"></i>
                 </a>
             </li>
-            <li class="highlight account">
+            <li class="mainmenu-account highlight">
                 <a href="javascript:;" onclick="$.oc.layout.toggleAccountMenu(this)">
-                    <img src="<?= $this->user->getAvatarThumb(35, ['extension' => 'png']) ?>">
+                    <img src="<?= $this->user->getAvatarThumb(80, ['mode' => 'crop', 'extension' => 'png']) ?>">
                     <span class="hidden-xs">
                         <?= e($this->user->first_name.' '.$this->user->last_name) ?>
                     </span>
diff --git a/modules/backend/layouts/_sidenav.htm b/modules/backend/layouts/_sidenav.htm
index 2c1f805d7..cfa150997 100644
--- a/modules/backend/layouts/_sidenav.htm
+++ b/modules/backend/layouts/_sidenav.htm
@@ -7,7 +7,7 @@
         $sideMenuItems = BackendMenu::listSideMenuItems();
     ?>
     <?php if ($sideMenuItems): ?>
-        <div class="layout-cell width-140">
+        <div class="layout-cell width-130">
             <div class="layout-relative">
                 <nav class="layout-sidenav" id="layout-sidenav" data-control="sidenav">
                     <ul class="nav">