diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 8149312e6..2dfe43ecf 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -28,12 +28,47 @@
     @toolbar-green: #5cb85c;
 
     box-sizing: border-box;
-    padding: 0px 6px;
+    padding: 0px;
 
     //background-color: #BBBBFF;
     background-color: @toolbar-default-bg;
     color: @toolbar-default-color;
-
+    &.pad {
+        @color: @toolbar-pad-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.code {
+        @color: @toolbar-code-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.slide {
+        @color: @toolbar-slide-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.poll {
+        @color: @toolbar-poll-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.whiteboard {
+        @color: @toolbar-whiteboard-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.drive {
+        @color: @toolbar-drive-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+    &.file {
+        @color: @toolbar-file-bg;
+        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
+        border-bottom: 2px solid @color;
+    }
+/*
     &.pad {
         background-color: @toolbar-pad-bg;
         color: @toolbar-pad-color;
@@ -62,7 +97,7 @@
         background-color: @toolbar-file-bg;
         color: @toolbar-file-color;
     }
-
+*/
     .fa {
         font: normal normal normal 14px/1 FontAwesome;
         font-family: FontAwesome;
@@ -78,6 +113,17 @@
         float: right;
     }
 
+
+    .dropdown-bar {
+        height: 100%;
+        display: inline-block;
+        button {
+            height: 100%;
+            border-radius: 0;
+            margin: 0;
+        }
+    }
+
     button {
         &#shareButton, &.buttonSuccess {
             // Bootstrap 4 colors
@@ -421,6 +467,7 @@
         position: absolute;
         left: 0px;
         height: 32px;
+        background: @toolbar-drive-bg;
 
         a.cryptpad-logo {
             cursor: pointer;
@@ -447,6 +494,7 @@
         }
     }
     .cryptpad-user {
+        height: 100%;
         position: absolute;
         right: 0;
         :not(.cryptpad-lag) span {
@@ -480,6 +528,13 @@
 .cryptpad-toolbar-rightside {
     height: 32px;
     text-align: right;
+    &> button {
+        height: 100%;
+        margin: 0;
+        border-radius: 0;
+        padding: 0 10px;
+
+    }
 }
 .cryptpad-toolbar-history {
     display: none;
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index acd2eed78..4526138cd 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -77,19 +77,19 @@
 // Toolbar
 @toolbar-pad-bg: #1c4fa0;
 @toolbar-pad-color: #fff;
-@toolbar-slide-bg: #a01c1c;
+@toolbar-slide-bg: #e57614;
 @toolbar-slide-color: #fff;
 @toolbar-code-bg: #ffae00;
 @toolbar-code-color: #000;
 @toolbar-poll-bg: #006304;
 @toolbar-poll-color: #fff;
-@toolbar-whiteboard-bg: #570063;
+@toolbar-whiteboard-bg: #800080;
 @toolbar-whiteboard-color: #fff;
 @toolbar-drive-bg: #0087ff;
 @toolbar-drive-color: #fff;
-@toolbar-file-bg: #ccffa0;
-@toolbar-file-color: #000;
-@toolbar-default-bg: #fff;
+@toolbar-file-bg: #cd2532;
+@toolbar-file-color: #fff;
+@toolbar-default-bg: #ddd;
 @toolbar-default-color: #000;
 
 
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index e64684f98..4e08b3e81 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -103,9 +103,39 @@
 }
 .cryptpad-toolbar {
   box-sizing: border-box;
-  padding: 0px 6px;
-  background-color: #fff;
+  padding: 0px;
+  background-color: #ddd;
   color: #000;
+  /*
+    &.pad {
+        background-color: @toolbar-pad-bg;
+        color: @toolbar-pad-color;
+    }
+    &.code {
+        background-color: @toolbar-code-bg;
+        color: @toolbar-code-color;
+    }
+    &.slide {
+        background-color: @toolbar-slide-bg;
+        color: @toolbar-slide-color;
+    }
+    &.poll {
+        background-color: @toolbar-poll-bg;
+        color: @toolbar-poll-color;
+    }
+    &.whiteboard {
+        background-color: @toolbar-whiteboard-bg;
+        color: @toolbar-whiteboard-color;
+    }
+    &.drive {
+        background-color: @toolbar-drive-bg;
+        color: @toolbar-drive-color;
+    }
+    &.file {
+        background-color: @toolbar-file-bg;
+        color: @toolbar-file-color;
+    }
+*/
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -117,32 +147,32 @@
   z-index: 9001;
 }
 .cryptpad-toolbar.pad {
-  background-color: #1c4fa0;
-  color: #fff;
+  background: linear-gradient(20deg, #1c4fa0 150px, #ddd 150px);
+  border-bottom: 2px solid #1c4fa0;
 }
 .cryptpad-toolbar.code {
-  background-color: #ffae00;
-  color: #000;
+  background: linear-gradient(20deg, #ffae00 150px, #ddd 150px);
+  border-bottom: 2px solid #ffae00;
 }
 .cryptpad-toolbar.slide {
-  background-color: #a01c1c;
-  color: #fff;
+  background: linear-gradient(20deg, #e57614 150px, #ddd 150px);
+  border-bottom: 2px solid #e57614;
 }
 .cryptpad-toolbar.poll {
-  background-color: #006304;
-  color: #fff;
+  background: linear-gradient(20deg, #006304 150px, #ddd 150px);
+  border-bottom: 2px solid #006304;
 }
 .cryptpad-toolbar.whiteboard {
-  background-color: #570063;
-  color: #fff;
+  background: linear-gradient(20deg, #800080 150px, #ddd 150px);
+  border-bottom: 2px solid #800080;
 }
 .cryptpad-toolbar.drive {
-  background-color: #0087ff;
-  color: #fff;
+  background: linear-gradient(20deg, #0087ff 150px, #ddd 150px);
+  border-bottom: 2px solid #0087ff;
 }
 .cryptpad-toolbar.file {
-  background-color: #ccffa0;
-  color: #000;
+  background: linear-gradient(20deg, #cd2532 150px, #ddd 150px);
+  border-bottom: 2px solid #cd2532;
 }
 .cryptpad-toolbar .fa {
   font: normal normal normal 14px/1 FontAwesome;
@@ -151,6 +181,15 @@
 .cryptpad-toolbar a {
   float: right;
 }
+.cryptpad-toolbar .dropdown-bar {
+  height: 100%;
+  display: inline-block;
+}
+.cryptpad-toolbar .dropdown-bar button {
+  height: 100%;
+  border-radius: 0;
+  margin: 0;
+}
 .cryptpad-toolbar button {
   border: 1px solid transparent;
   border-radius: .25rem;
@@ -502,6 +541,7 @@
   position: absolute;
   left: 0px;
   height: 32px;
+  background: #0087ff;
 }
 .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
   cursor: pointer;
@@ -525,6 +565,7 @@
   cursor: pointer;
 }
 .cryptpad-toolbar-top .cryptpad-user {
+  height: 100%;
   position: absolute;
   right: 0;
 }
@@ -554,6 +595,12 @@
   height: 32px;
   text-align: right;
 }
+.cryptpad-toolbar-rightside > button {
+  height: 100%;
+  margin: 0;
+  border-radius: 0;
+  padding: 0 10px;
+}
 .cryptpad-toolbar-history {
   display: none;
   text-align: center;
diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index 7f20cbef8..c16314f69 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -509,8 +509,8 @@ define([
             title: Messages.header_logoTitle,
             'class': "cryptpad-logo"
         }).append($imgTag);
-        var $span = $('<span>').text('CryptDrive');
-        var $aTagBig = $aTagSmall.clone().addClass('large').append($span);
+        //var $span = $('<span>').text('CryptDrive');
+        var $aTagBig = $aTagSmall.clone().addClass('large');//.append($span);
         $aTagSmall.addClass('narrow');
         var onClick = function (e) {
             e.preventDefault();
diff --git a/www/drive/file.css b/www/drive/file.css
index b609eacca..7db78b290 100644
--- a/www/drive/file.css
+++ b/www/drive/file.css
@@ -43,6 +43,30 @@ body {
     margin-top: 0.5em;
   }
 }
+.padColor {
+  color: #1c4fa0;
+}
+.codeColor {
+  color: #ffae00;
+}
+.slideColor {
+  color: #e57614;
+}
+.pollColor {
+  color: #006304;
+}
+.fileColor {
+  color: #cd2532;
+}
+.whiteboardColor {
+  color: #800080;
+}
+.driveColor {
+  color: #0087ff;
+}
+.defaultColor {
+  color: #ddd;
+}
 div:focus {
   outline: none;
 }
diff --git a/www/drive/file.less b/www/drive/file.less
index be12531e7..12b98119e 100644
--- a/www/drive/file.less
+++ b/www/drive/file.less
@@ -74,6 +74,15 @@ body {
     }
 }
 
+.padColor { color: @toolbar-pad-bg; }
+.codeColor { color: @toolbar-code-bg; }
+.slideColor { color: @toolbar-slide-bg; }
+.pollColor { color: @toolbar-poll-bg; }
+.fileColor { color: @toolbar-file-bg; }
+.whiteboardColor { color: @toolbar-whiteboard-bg; }
+.driveColor { color: @toolbar-drive-bg; }
+.defaultColor { color: @toolbar-default-bg; }
+
 div:focus {
     outline: none;
 }
diff --git a/www/drive/main.js b/www/drive/main.js
index 6456896bd..eee514ebb 100644
--- a/www/drive/main.js
+++ b/www/drive/main.js
@@ -154,11 +154,12 @@ define([
     var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
     var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
     var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
-    var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon"});
-    var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon"});
-    var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon"});
-    var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon"});
-    var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush"});
+    var $fileAppIcon = $('<span>', {"class": "fa fa-file-text-o file icon fileColor"});
+    var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon padColor"});
+    var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon codeColor"});
+    var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
+    var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
+    var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
     //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
     var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
     var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
@@ -1156,6 +1157,7 @@ define([
             else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone(); }
             else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone(); }
             else if (href.indexOf('/whiteboard/') !== -1) { $icon = $whiteboardIcon.clone(); }
+            else if (href.indexOf('/file/') !== -1) { $icon = $fileAppIcon.clone(); }
 
             return $icon;
         };
diff --git a/www/pad/inner.html b/www/pad/inner.html
index 5780d08d0..e701182db 100644
--- a/www/pad/inner.html
+++ b/www/pad/inner.html
@@ -24,7 +24,7 @@
         padding: 2px 0;
     }
     #cke_1_top .cryptpad-toolbar {
-        padding: 0 6px;
+        padding: 0;
         display: inline-block;
     }
     </style>