diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 4297862e1..d2fac72d9 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -791,13 +791,16 @@ body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collaps
 #layout-sidenav ul li.active a i,#layout-sidenav ul li a:hover i{color:#ffffff}
 #layout-sidenav ul li span.counter{display:block;position:absolute;top:1.071em;right:1.071em;padding:.143em .429em .214em .286em;background-color:#d9350f;color:#ffffff;font-size:.786em;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,)}
-@media (max-width:480px){#layout-sidenav{font-size:10px}
+@media (min-width:768px) and (max-width:991px){#layout-sidenav{font-size:12px}
+.layout-sidenav-container{width:100px}
+}
+@media (max-width:767px){#layout-sidenav{font-size:10px}
 .layout-sidenav-container{width:80px}
 }
 html.mobile #layout-sidenav ul{overflow:auto;-webkit-overflow-scrolling:touch}
-#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.6) !important}
-#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover i,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover i{color:rgba(255,255,255,0.6) !important}
-#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover:after,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover:after{display:none !important}
+#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover,.atouch #layout-sidenav.layout-sidenav li:not(.active) a:hover{color:rgba(255,255,255,0.6) !important}
+#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover i,.atouch #layout-sidenav.layout-sidenav li:not(.active) a:hover i{color:rgba(255,255,255,0.6) !important}
+#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover:after,.atouch #layout-sidenav.layout-sidenav li:not(.active) a:hover:after{display:none !important}
 #layout-side-panel .fix-button{position:absolute;right:-25px;top:0;display:none;width:25px;height:25px;font-size:13px;background:#ecf0f1;z-index:120;opacity:0.5;filter:alpha(opacity=50);-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}
 #layout-side-panel .fix-button i{display:block;text-align:center;margin-top:5px;color:#aaaaaa}
 #layout-side-panel .fix-button:hover{text-decoration:none;display:block;opacity:1 !important;filter:alpha(opacity=100) !important}
diff --git a/modules/backend/assets/less/layout/sidenav.less b/modules/backend/assets/less/layout/sidenav.less
index 65bc4e350..259bc4f5d 100644
--- a/modules/backend/assets/less/layout/sidenav.less
+++ b/modules/backend/assets/less/layout/sidenav.less
@@ -83,7 +83,16 @@
     }
 }
 
-@media (max-width: @screen-xs) {
+@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    #layout-sidenav {
+        font-size: 12px;
+    }
+    .layout-sidenav-container {
+        width: 100px;
+    }
+}
+
+@media (max-width: @screen-xs-max) {
     #layout-sidenav {
         font-size: 10px;
     }
diff --git a/modules/backend/layouts/_mainmenu.htm b/modules/backend/layouts/_mainmenu.htm
index 57889b86f..87ede6ccb 100644
--- a/modules/backend/layouts/_mainmenu.htm
+++ b/modules/backend/layouts/_mainmenu.htm
@@ -24,7 +24,7 @@
                         <a href="<?= $item->url ?>">
                             <span class="nav-icon">
                                 <?php if ($item->iconSvg): ?>
-                                    <img class="svg-icon" src="<?= URL::asset($item->iconSvg) ?>">
+                                    <img class="svg-icon" src="<?= Url::asset($item->iconSvg) ?>">
                                 <?php endif ?>
 
                                 <i class="<?= $item->iconSvg ? 'svg-replace' : null ?> <?= $item->icon ?>"></i>
@@ -42,7 +42,7 @@
         <ul class="mainmenu-toolbar">
             <li class="mainmenu-preview with-tooltip">
                 <a
-                    href="<?= URL::to('/') ?>"
+                    href="<?= Url::to('/') ?>"
                     target="_blank"
                     title="<?= e(trans('backend::lang.tooltips.preview_website')) ?>">
                     <i class="icon-crosshairs"></i>
diff --git a/modules/backend/layouts/_sidenav.htm b/modules/backend/layouts/_sidenav.htm
index 696540a08..106c612e8 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 w-120">
+        <div class="layout-cell layout-sidenav-container">
             <div class="layout-relative">
                 <nav
                     id="layout-sidenav"