diff --git a/dashboard/index.html b/dashboard/index.html
index 3565674b6..c672b9673 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -131,81 +131,12 @@
 
   <div id="mainContentContainer" class="animateMe ng-hide" ng-show="initialized">
 
-    <!-- Navigation -->
-    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
-      <div class="container-fluid">
-        <div class="navbar-header">
-          <a class="navbar-brand navbar-brand-icon" href="#/"><img ng-src="{{ client.avatar }}" width="40" height="40"/></a>
-          <a class="navbar-brand" href="#/">{{ config.cloudronName || 'Cloudron' }}</a>
-        </div>
-        <!-- /.navbar-header -->
-
-        <div class="collapse navbar-collapse">
-          <ul class="nav navbar-nav navbar-right" ng-hide="hideNavBarActions">
-            <li ng-show="user.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')">
-              <a ng-click="openSubscriptionSetup()" style="cursor: pointer">
-                <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
-                  {{ subscription.plan.id === 'free' ? ('settings.appstoreAccount.subscriptionSetupAction' | tr) : ('settings.appstoreAccount.subscriptionReactivateAction' | tr) }}
-                </span>
-              </a>
-            </li>
-            <li ng-show="!user.isAtLeastOwner && subscription.plan.id === 'expired'">
-              <a>
-                <span class="badge badge-danger">Subscription Expired</span>
-              </a>
-            </li>
-            <!-- <li>
-              <a ng-class="{ active: isActive('/apps')}" href="#/apps" ng-click="closeNavbar()"><i class="fa fa-grip fa-fw"></i> {{ 'apps.title' | tr }}</a>
-            </li>
-            <li ng-show="user.isAtLeastAdmin">
-              <a ng-class="{ active: isActive('/appstore')}" href="#/appstore" ng-click="closeNavbar()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ 'appstore.title' | tr }}</a>
-            </li>
-            <li ng-show="user.isAtLeastUserManager">
-              <a ng-class="{ active: isActive('/users')}" href="#/users" ng-click="closeNavbar()"><i class="fa fa-users fa-fw"></i> {{ 'main.navbar.users' | tr }}</a>
-            </li> -->
-            <li ng-show="user.isAtLeastAdmin">
-              <a href="#/notifications" ng-click="closeNavbar()">
-                <i class="fas fa-bell" ng-show="notificationCount"></i>
-                <i class="far fa-bell" ng-hide="notificationCount"></i>
-                <span ng-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
-              </a>
-            </li>
-            <li ng-show="user.isAtLeastAdmin">
-              <a ng-class="{ active: isActive('/support')}" href="#/support" ng-click="closeNavbar()"><i class="fa fa-question fa-fw"></i></a>
-            </li>
-            <li>
-              <a href="#/profile" ng-click="closeNavbar()"><img ng-src="{{user.avatarUrl}}" style="width: 24px; height: 24px;"/> {{user.username}}</a>
-            </li>
-<!--               <li class="dropdown">
-              <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img ng-src="{{user.avatarUrl}}" style="width: 24px; height: 24px;"/> {{user.username}} <span class="caret"></span></a>
-              <ul class="dropdown-menu" role="menu">
-                <li><a href="#/profile" ng-click="closeNavbar()"><i class="fa fa-user fa-fw"></i> {{ 'profile.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastMailManager" class="divider"></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/backups" ng-click="closeNavbar()"><i class="fa fa-archive fa-fw"></i> {{ 'backups.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/branding" ng-click="closeNavbar()"><i class="fa fa-passport fa-fw"></i> {{ 'branding.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/domains" ng-click="closeNavbar()"><i class="fa fa-globe fa-fw"></i> {{ 'domains.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastMailManager"><a href="#/email" ng-click="closeNavbar()"><i class="fa fa-envelope fa-fw"></i> {{ 'emails.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/eventlog" ng-click="closeNavbar()"><i class="fa fa-list-alt fa-fw"></i> {{ 'eventlog.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/network" ng-click="closeNavbar()"><i class="fas fa-network-wired fa-fw"></i> {{ 'network.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/services" ng-click="closeNavbar()"><i class="fa fa-cogs fa-fw"></i> {{ 'services.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/settings" ng-click="closeNavbar()"><i class="fa fa-wrench fa-fw"></i> {{ 'settings.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/user-directory" ng-click="closeNavbar()"><i class="fa fa-users-gear fa-fw"></i> {{ 'users.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/volumes" ng-click="closeNavbar()"><i class="fa fa-hdd fa-fw"></i> {{ 'volumes.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin" class="divider"></li>
-                <li ng-show="user.isAtLeastOwner"><a href="#/support" ng-click="closeNavbar()"><i class="fa fa-comment fa-fw"></i> {{ 'support.title' | tr }}</a></li>
-                <li ng-show="user.isAtLeastAdmin"><a href="#/system" ng-click="closeNavbar()"><i class="fa fa-chart-area fa-fw"></i> {{ 'system.title' | tr }}</a></li>
-                <li class="divider"></li>
-                <li><a href="" ng-click="logout($event)"><i class="fa fa-sign-out-alt fa-fw"></i> {{ 'main.logout' | tr }}</a></li>
-              </ul>
-            </li> -->
-          </ul>
-        </div>
-      </div>
-    </nav>
-
-    <div class="layout-root">
+    <div style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
 
       <div class="nav-sidebar">
+        <a href="#/" class="nav-sidebar-logo">
+          <img ng-src="{{ client.avatar }}" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
+        </a>
         <div class="nav-sidebar-list">
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/apps')}" href="#/apps" ng-click="closeNavbar()"><i class="fa fa-grip fa-fw"></i> {{ 'apps.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/appstore')}" ng-show="user.isAtLeastAdmin" href="#/appstore" ng-click="closeNavbar()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ 'appstore.title' | tr }}</a>
@@ -224,9 +155,34 @@
         </div>
       </div>
 
-      <div style="display: flex; flex-direction: column; flex-grow: 1; overflow: auto;">
-        <div ng-view id="ng-view" class="layout-content"></div>
-        <div id="app"></div>
+      <div style="flex-grow: 1; display: flex; flex-direction: column; padding: 10px 40px 0 40px; overflow: hidden; height: 100%;">
+        <div class="header-toolbar">
+          <div style="flex-grow: 1;"></div>
+          <div ng-show="user.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
+            <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
+              {{ subscription.plan.id === 'free' ? ('settings.appstoreAccount.subscriptionSetupAction' | tr) : ('settings.appstoreAccount.subscriptionReactivateAction' | tr) }}
+            </span>
+          </div>
+          <div ng-show="!user.isAtLeastOwner && subscription.plan.id === 'expired'">
+            <span class="badge badge-danger">Subscription Expired</span>
+          </div>
+          <a ng-show="user.isAtLeastAdmin" href="#/notifications">
+            <i class="fas fa-bell" ng-show="notificationCount"></i>
+            <i class="far fa-bell" ng-hide="notificationCount"></i>
+            <span ng-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
+          </a>
+          <a ng-show="user.isAtLeastAdmin" href="#/support">
+            <i class="fa fa-question fa-fw"></i>
+          </a>
+          <a href="#/profile">
+            <img ng-src="{{user.avatarUrl}}" class="header-toolbar-avatar"/> {{user.username}}
+          </a>
+        </div>
+
+        <div style="overflow: auto; flex-grow: 1;">
+          <div ng-view id="ng-view" class="layout-content"></div>
+          <div id="app"></div>
+        </div>
       </div>
     </div>
 
diff --git a/dashboard/src/components/Index.vue b/dashboard/src/components/Index.vue
index f97f1cfe5..ada55f12a 100644
--- a/dashboard/src/components/Index.vue
+++ b/dashboard/src/components/Index.vue
@@ -51,6 +51,9 @@ export default {
       } else {
         that.view = '';
       }
+
+      // hack for layout to avoid consuming space if vue view is not active
+      document.getElementById('app').style.height = that.view ? 'auto' : '0';
     }
 
     window.addEventListener('hashchange', onHashChange);
diff --git a/dashboard/src/components/VolumesView.vue b/dashboard/src/components/VolumesView.vue
index 6d60942fa..f8dfacc2f 100644
--- a/dashboard/src/components/VolumesView.vue
+++ b/dashboard/src/components/VolumesView.vue
@@ -47,7 +47,7 @@
 
           <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
             <label for="volumePort">{{ $t('volumes.addVolumeDialog.port') }}</label>
-            <input type="number" class="form-control" v-model="volumeDialogData.port" id="volumePort">
+            <NumberInput v-model="volumeDialogData.port" id="volumePort" min="0"/>
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
@@ -110,7 +110,7 @@
 
 <script>
 
-import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, PasswordInput, TableView, TextInput } from 'pankow';
+import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
 
 import Card from  './Card.vue';
 
@@ -132,6 +132,7 @@ export default {
     Dropdown,
     FormGroup,
     InputDialog,
+    NumberInput,
     PasswordInput,
     TableView,
     TextInput,
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index fd66a0065..3dbbf8b1a 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -56,8 +56,8 @@ $state-danger-border:                       $brand-danger;
 @import "pkg:bootstrap-sass";
 
 html {
-    // --accent-color: $brand-primary;
-    --accent-color: #9141ac;
+    --accent-color: var(--pankow-color-primary);
+    // --accent-color: #9141ac;
     --card-background: #f7f7f8;
     --navbar-background: #f3f4f6;
     --body-background: white;
@@ -332,7 +332,7 @@ html, body {
     // width: 100%;
     // max-width: 720px;
     // margin: 0 auto;
-    margin-right: 40px;
+    // margin-right: 40px;
 
     @media(min-width:768px) {
         // width: 720px;
@@ -380,13 +380,25 @@ html, body {
 }
 
 .nav-sidebar {
-    margin: 0 20px 0 0;
-    min-width: 200px;
+    min-width: 250px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    padding: 10px;
+    padding-top: 22px;
+    background-color: var(--navbar-background);
+    border-right: 1px solid var(--pankow-color-background-hover);
+}
+
+.nav-sidebar-logo img {
+  margin-right: 10px;
+}
+
+.nav-sidebar-logo,
+.nav-sidebar-logo:hover {
+    color: var(--pankow-text-color);
+    text-decoration: none;
     padding-left: 10px;
-    // background-color: var(--navbar-background);
 }
 
 .nav-sidebar-list {
@@ -398,8 +410,7 @@ html, body {
     display: block;
     color: black;
     border-radius: 3px;
-    padding: 10px;
-    margin-right: 10px;
+    padding: 10px 15px;
 }
 
 .nav-sidebar-item i {
@@ -415,9 +426,8 @@ html, body {
 }
 
 .nav-sidebar-item:hover {
-    background-color: var(--accent-color);
+    background-color: var(--pankow-color-background-hover);
     text-decoration: none;
-    color: white;
 }
 
 .nav-sidebar-item.active i ,
@@ -425,6 +435,34 @@ html, body {
     opacity: 1;
 }
 
+.header-toolbar {
+    display: flex;
+    padding: 10px;
+    align-items: center;
+    gap: 15px;
+}
+
+.header-toolbar a {
+    display: block;
+    padding: 6px 15px;
+    border-radius: var(--pankow-border-radius);
+    color: var(--pankow-text-color);
+}
+
+.header-toolbar a:focus,
+.header-toolbar a:active,
+.header-toolbar a:hover {
+    text-decoration: none;
+    background-color: var(--pankow-color-background-hover);
+}
+
+.header-toolbar-avatar {
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
+    border-radius: var(--pankow-border-radius);
+}
+
 .panel-body {
     padding: 15px 0;
 }