diff --git a/dashboard/index.html b/dashboard/index.html
index a1cd77198..092d5974b 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -133,8 +133,10 @@
 
     <div style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
 
-      <div class="nav-sidebar" ng-class="{'closed': sideBarClosed }">
-        <a href="#/" class="nav-sidebar-logo">
+      <button type="button" ng-click="onSidebarToggle()" class="btn nav-sidebar-toggle-button"><i class="fa-solid fa-bars"></i></button>
+
+      <div class="nav-sidebar" ng-class="{'open': sideBarOpen }">
+        <a href="#/" class="nav-sidebar-logo" ng-click="closeNavbar()">
           <img ng-src="{{ client.avatar }}" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
         </a>
         <div class="nav-sidebar-list">
@@ -153,7 +155,6 @@
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/volumes')}" ng-show="user.isAtLeastAdmin" href="#/volumes" ng-click="closeNavbar()"><i class="fa fa-hdd fa-fw"></i> {{ 'volumes.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/system')}" ng-show="user.isAtLeastAdmin" href="#/system" ng-click="closeNavbar()"><i class="fa fa-chart-area fa-fw"></i> {{ 'system.title' | tr }}</a>
         </div>
-        <button type="button" ng-click="onSidebarToggle()" class="btn nav-sidebar-toggle-button"><i class="fa-solid fa-angle-left" ng-class="{'fa-angle-right': sideBarClosed, 'fa-angle-left': !sideBarClosed }"></i></button>
       </div>
 
       <div style="flex-grow: 1; display: flex; flex-direction: column; padding: 10px 40px 0 40px; overflow: hidden; height: 100%;">
diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index 1c1c8a06f..3cf0ca324 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -670,14 +670,14 @@ app.controller('MainController', ['$scope', '$route', '$timeout', '$location', '
     $scope.notificationCount = 0;
     $scope.hideNavBarActions = $location.path() === '/logs';
     $scope.backgroundImageUrl = '';
-    $scope.sideBarClosed = false;
+    $scope.sideBarOpen = false;
 
     $scope.closeNavbar = function () {
-        $('.navbar-collapse').collapse('hide');
+        $scope.sideBarOpen = false;
     };
 
     $scope.onSidebarToggle = function () {
-        $scope.sideBarClosed = !$scope.sideBarClosed;
+        $scope.sideBarOpen = !$scope.sideBarOpen;
     };
 
     $scope.reboot = {
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index 38fd52e40..6a336717d 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -381,27 +381,39 @@ html, body {
 
 .nav-sidebar-toggle-button {
     position: absolute;
-    right: 0;
-    top: 50%;
-    width: 20px;
+    left: 10px;
+    top: 10px;
 }
 
 .nav-sidebar {
     position: relative;
-    transition: all 200ms ease;
+    z-index: 1000;
+    transition: all 250ms ease;
     width: 250px;
+    height: 100%;
     white-space: nowrap !important;
     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);
+    padding: 22px 10px 10px 10px;
 }
 
-.nav-sidebar.closed {
-    width: 0;
+@media(max-width:767px) {
+    .nav-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0;
+        padding: 22px 0 10px 0;
+        border-right: 0;
+    }
+
+    .nav-sidebar.open {
+        width: 100%;
+        padding: 22px 10px 10px 10px;
+    }
 }
 
 .nav-sidebar-logo img {