diff --git a/dashboard/index.html b/dashboard/index.html
index d5d486c33..89acb8c54 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -132,7 +132,7 @@
   <div id="mainContentContainer" class="animateMe ng-hide" ng-show="initialized">
 
     <!-- Navigation -->
-    <nav class="navbar navbar-default navbar-static-top shadow" role="navigation" style="margin-bottom: 0">
+    <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>
@@ -167,9 +167,12 @@
               <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 class="badge badge-danger" ng-show="notificationCount">{{ notificationCount === 100 ? '100+' : notificationCount }}</span>
+                <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>
@@ -217,7 +220,6 @@
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/settings')}" ng-show="user.isAtLeastAdmin" href="#/settings" ng-click="closeNavbar()"><i class="fa fa-wrench fa-fw"></i> {{ 'settings.title' | tr }}</a>
           <a class="nav-sidebar-item" ng-class="{ active: isActive('/user-directory')}" ng-show="user.isAtLeastAdmin" href="#/user-directory" ng-click="closeNavbar()"><i class="fa fa-users-gear fa-fw"></i> {{ 'users.title' | tr }}</a>
           <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('/support')}" ng-show="user.isAtLeastOwner" href="#/support" ng-click="closeNavbar()"><i class="fa fa-comment fa-fw"></i> {{ 'support.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>
       </div>
@@ -231,6 +233,8 @@
     <!-- <footer class="text-center ng-cloak">
       <span class="text-muted" ng-bind-html="config.footer | markdown2html"></span>
     </footer> -->
+
+    <input type="color" class="accent-color-input" value="#9141ac"/>
   </div>
 
 </body>
diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index 0b4ad6542..510785e66 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -851,4 +851,10 @@ app.controller('MainController', ['$scope', '$route', '$timeout', '$location', '
             $(this).find('[autofocus]:first').focus();
         });
     });
+
+    document.getElementsByClassName('accent-color-input')[0].addEventListener('change', (event) => {
+        const root = document.documentElement;
+        console.log('---', event.target.value)
+        root.style.setProperty('--accent-color', event.target.value);
+    });
 }]);
diff --git a/dashboard/public/views/eventlog.html b/dashboard/public/views/eventlog.html
index 07950de8f..35b92bcbd 100644
--- a/dashboard/public/views/eventlog.html
+++ b/dashboard/public/views/eventlog.html
@@ -1,12 +1,8 @@
 
 <div>
-  <div class="col-md-10 col-md-offset-1">
-      <h1>{{ 'eventlog.title' | tr }}</h1>
-  </div>
-</div>
+  <div class="col-md-12">
+    <h1>{{ 'eventlog.title' | tr }}</h1>
 
-<div>
-  <div class="col-md-10 col-md-offset-1">
     <div class="eventlog-filter">
       <input type="text" class="form-control" style="min-width: 350px;" ng-model="search" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="{{ 'main.searchPlaceholder' | tr }}"/>
       <multiselect ng-model="selectedActions" ms-header="{{ 'eventlog.filterAllEvents' | tr }}" options="a.name for a in actions" data-multiple="true"  ng-change="updateFilter(true)" filter-after-rows="5" scroll-after-rows="10"></multiselect>
@@ -19,11 +15,7 @@
       <button class="btn btn-default btn-outline" ng-click="showPrevPage()" ng-disabled="busy || currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
       <button class="btn btn-default btn-outline" ng-click="showNextPage()" ng-disabled="busy || pageItems.value > eventLogs.length">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
     </div>
-  </div>
-</div>
 
-<div>
-  <div class="col-md-10 col-md-offset-1">
     <div class="card card-block" style="max-width: 100%">
       <div>
         <center ng-show="busy"><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center>
diff --git a/dashboard/public/views/profile.html b/dashboard/public/views/profile.html
index 217b2f223..836c95f13 100644
--- a/dashboard/public/views/profile.html
+++ b/dashboard/public/views/profile.html
@@ -387,7 +387,10 @@
 
 <div class="content">
 
-  <h1 class="section-header">{{ 'profile.title' | tr }}</h1>
+  <h1 class="section-header">
+    {{ 'profile.title' | tr }}
+    <button class="btn btn-default btn-outline" ng-click="logout($event)"><i class="fa fa-sign-out"></i> {{ 'main.logout' | tr }}</button>
+  </h1>
 
   <div class="card">
     <div style="display: flex; flex-wrap: wrap;">
diff --git a/dashboard/public/views/profile.js b/dashboard/public/views/profile.js
index f3fc00513..d9a433493 100644
--- a/dashboard/public/views/profile.js
+++ b/dashboard/public/views/profile.js
@@ -23,6 +23,11 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
         $translate.use(newVal.id); // this switches the language and saves locally in localStorage['NG_TRANSLATE_LANG_KEY']
     });
 
+    $scope.logout = function (event) {
+        event.stopPropagation();
+        Client.logout();
+    };
+
     $scope.sendPasswordReset = function () {
         Client.sendSelfPasswordReset($scope.user.email, function (error) {
             if (error) return console.error('Failed to reset password:', error);
diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss
index 0cfc8a36e..f5144b10d 100644
--- a/dashboard/src/theme.scss
+++ b/dashboard/src/theme.scss
@@ -55,6 +55,11 @@ $state-danger-border:                       $brand-danger;
 
 @import "pkg:bootstrap-sass";
 
+html {
+    // --accent-color: $brand-primary;
+    --accent-color: #9141ac;
+}
+
 // ----------------------------
 // Bootstrap extension
 // ----------------------------
@@ -65,6 +70,14 @@ h1, h2, h3, h4, h5, h6,
     font-weight: 400;
 }
 
+a {
+    color: var(--accent-color);
+}
+
+a:hover, a:focus {
+    color: var(--accent-color);
+}
+
 .hide-mobile {
     @media(max-width:767px) {
         display: none;
@@ -124,7 +137,8 @@ h1, h2, h3, h4, h5, h6,
 }
 
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
-    background-color: $brand-primary;
+    // background-color: $brand-primary;
+    background-color: var(--accent-color);
     color: white;
 }
 
@@ -226,6 +240,36 @@ html, body {
     }
 }
 
+.accent-color-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100px;
+  height: 100px;
+  background-color: transparent;
+  border: none;
+  border-radius: 100px 100px 0 100px;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  transition: all 100ms ease-in-out;
+}
+.accent-color-input::-webkit-color-swatch {
+  border-radius: 100px 100px 0 100px;
+  border: none;
+}
+.accent-color-input::-moz-color-swatch {
+  border-radius: 100px 100px 0 100px;
+  border: none;
+}
+.accent-color-input:hover {
+    width: 48px;
+    height: 48px;
+}
+
 .restart-banner {
     position: fixed;
     z-index: 20000;
@@ -273,20 +317,21 @@ html, body {
 }
 
 .content {
-    width: 100%;
-    max-width: 720px;
-    margin: 0 auto;
+    // width: 100%;
+    // max-width: 720px;
+    // margin: 0 auto;
+    margin-right: 40px;
 
     @media(min-width:768px) {
-        width: 720px;
+        // width: 720px;
 
         .title-toolbar {
             float: right !important;
         }
 
         &.content-large {
-            width: 970px;
-            max-width: 970px;
+            // width: 970px;
+            // max-width: 970px;
         }
     }
 }
@@ -295,7 +340,7 @@ html, body {
     display: block;
     width: 100%;
     flex-grow: 0;
-    background-color: white;
+    background-color: #f8f8f8;
     border-color: white;
 
     @media(min-width:768px) {
@@ -313,6 +358,15 @@ html, body {
     }
 }
 
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+    color: var(--accent-color);
+}
+
+.navbar-default .navbar-nav > li > a {
+    color: black;
+}
+
 .nav-sidebar {
     margin: 0 10px 0 10px;
     min-width: 200px;
@@ -334,13 +388,18 @@ html, body {
     margin-right: 10px;
 }
 
+.nav-sidebar-item i {
+    display: none;
+}
+
 .nav-sidebar-item.active {
-    color: #2196F3;
+    color: var(--accent-color);
     text-decoration: none;
+    font-weight: bold;
 }
 
 .nav-sidebar-item:hover {
-    background-color: #2196F3;
+    background-color: var(--accent-color);
     text-decoration: none;
     color: white;
 }
@@ -385,6 +444,7 @@ h1, h2, h3 {
     align-items: end;
     margin-top: 50px;
     gap: 5px;
+    padding-right: 15px;
 }
 
 h1.section-header {
@@ -498,9 +558,10 @@ textarea {
     .grid-item-content {
         position: relative;
         display: block;
-        background-color: #ffffffe3;
+        // background-color: #ffffffe3;
+        background-color: #f8f8f8e3;
         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
-        border-radius: 2px;
+        border-radius: 10px;
         height: 100%;
 
         &:focus-within {
@@ -1210,24 +1271,27 @@ multiselect {
 
 .card {
     position: relative;
-    background-color: white;
-    max-width: 720px;
-    margin: 0 auto;
+    background-color: #f8f8f8;
+    // background-color: #ebebeb;
+    // max-width: 720px;
+    // margin: 0 auto;
     margin-bottom: 15px;
     padding: 10px 15px;
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    // box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    // border-left: 1px solid #707070;
+    border-radius: 10px;
 }
 
 .card-small {
-    max-width: 600px;
+    // max-width: 600px;
 }
 
 .card-large {
-    max-width: 970px;
+    // max-width: 970px;
 }
 
 .card-expand {
-    max-width: initial;
+    // max-width: initial;
 }
 
 .text-success {