diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index 3357e9c5..799841b6 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -291,4 +291,36 @@
       bottom: 96px;
     }
   }
+}
+
+
+// screen width is less than 768px
+@media (max-width: 1100px) {
+  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center {
+      flex: unset;
+  }
+
+  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
+      min-width: 110px;
+      font-size: 0em;
+
+      .sidebar-icon {
+          margin: 0px;
+      }
+  }
+}
+
+@media (max-width: 1000px) {
+  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center {
+      flex: unset;
+  }
+
+  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
+      min-width: 60px;
+      font-size: 0em;
+
+      .sidebar-icon {
+          margin: 0px;
+      }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index d388c3bc..3138e44b 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -29,7 +29,7 @@
     </div>
     <template v-if="getThemeDirective('appNavigation') != 'seperate'">
       <div
-        class="vdiv display--large"
+        class="vdiv"
         v-if="getThemeDirective('windowLayout') == 'twopanel'"
       ></div>
       <div class="app-chrome-item">