diff --git a/www/drive/file.css b/www/drive/file.css
index 489d95050..f28a9bfe2 100644
--- a/www/drive/file.css
+++ b/www/drive/file.css
@@ -14,6 +14,14 @@ body {
   display: flex;
   flex-flow: column;
 }
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 .app-container {
   flex: 1;
   overflow: auto;
@@ -28,7 +36,7 @@ body {
 }
 ul {
   list-style: none;
-  padding-left: 10px;
+  padding-left: 0px;
 }
 li {
   padding: 0px 5px;
@@ -65,7 +73,7 @@ span.fa-folder-open {
 #tree {
   border-right: 1px solid #ccc;
   box-sizing: border-box;
-  background: #eee;
+  background: #eeeeee;
   overflow: auto;
   resize: horizontal;
   width: 250px;
@@ -73,11 +81,12 @@ span.fa-folder-open {
   max-width: 500px;
   min-width: 200px;
   padding: 10px 0px;
+  color: #000000;
 }
 #tree li {
   cursor: auto;
 }
-#tree li > span.element:hover {
+#tree li:hover > span.element {
   text-decoration: underline;
 }
 #tree li.collapsed ul {
@@ -95,6 +104,10 @@ span.fa-folder-open {
 #tree .category2 {
   margin-top: 2em;
 }
+#tree .category2 .root > .fa {
+  min-width: 30px;
+  cursor: pointer;
+}
 #tree .fa.expcol {
   margin-left: -10px;
   font-size: 14px;
@@ -116,6 +129,7 @@ span.fa-folder-open {
 #tree ul {
   margin: 0px 0px 0px 10px;
   list-style: none;
+  padding-left: 10px;
 }
 #tree ul li {
   position: relative;
@@ -126,9 +140,9 @@ span.fa-folder-open {
   top: -0.25em;
   content: '';
   display: block;
-  border-left: 1px solid #888;
+  border-left: 1px solid #888888;
   height: 1em;
-  border-bottom: 1px solid #888;
+  border-bottom: 1px solid #888888;
   width: 17.5px;
 }
 #tree ul li:after {
@@ -137,7 +151,7 @@ span.fa-folder-open {
   bottom: -7px;
   content: '';
   display: block;
-  border-left: 1px solid #888;
+  border-left: 1px solid #888888;
   height: 100%;
 }
 #tree ul li.root {
@@ -155,7 +169,8 @@ span.fa-folder-open {
 /* CONTENT */
 #content {
   box-sizing: border-box;
-  background: #eee;
+  background: #eeeeee;
+  color: #000000;
   overflow: auto;
   flex: 1;
   display: flex;
@@ -166,12 +181,13 @@ span.fa-folder-open {
   margin-top: 10px;
 }
 #content .info-box {
-  margin: 0px auto;
-  padding: 5px;
+  height: 40px;
+  line-height: 40px;
+  padding-left: 10px;
+  margin: 10px auto;
   background: #ddddff;
-  border: 1px solid #bbb;
+  border: 1px solid #bbbbbb;
   border-radius: 5px;
-  margin-bottom: 10px;
 }
 #content .info-box span {
   cursor: pointer;
@@ -184,6 +200,9 @@ span.fa-folder-open {
 #content li:not(.header):hover .name {
   text-decoration: underline;
 }
+#content div.grid {
+  padding: 20px;
+}
 #content div.grid li {
   display: inline-block;
   margin: 10px 10px;
@@ -212,6 +231,7 @@ span.fa-folder-open {
 #content .list ul {
   display: table;
   width: 100%;
+  padding: 0px 10px;
 }
 #content .list li {
   display: table-row;
@@ -222,7 +242,7 @@ span.fa-folder-open {
 }
 #content .list li.header {
   cursor: default;
-  color: #888;
+  color: #888888;
 }
 #content .list li.header span:not(.fa) {
   text-align: left;
@@ -231,6 +251,9 @@ span.fa-folder-open {
 #content .list li.header span.sortdesc {
   float: right;
 }
+#content .list li.header > span {
+  padding: 15px 5px;
+}
 #content .list li.header > span.active {
   font-weight: bold;
 }
@@ -278,28 +301,40 @@ span.fa-folder-open {
 }
 /* Toolbar */
 #driveToolbar {
-  background: #ddd;
+  background: #dddddd;
+  color: #555555;
   height: 40px;
+  display: flex;
+  flex-flow: row;
+  border-top: 1px solid #cccccc;
+  border-bottom: ;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  box-sizing: content-box;
   /* The container <div> - needed to position the dropdown content */
 }
 #driveToolbar .newPadContainer {
   display: inline-block;
   height: 100%;
 }
-#driveToolbar button.newElement {
+#driveToolbar button.element {
   border-radius: 2px;
   height: 30px;
-  background: #888;
-  color: #eee;
+  background: #888888;
+  color: #eeeeee;
   font-size: 16px;
   border: none;
   font-weight: bold;
 }
-#driveToolbar button.newElement:hover {
+#driveToolbar button.element:hover {
   box-shadow: 0px 0px 2px #000;
 }
+#driveToolbar button.new {
+  padding: 0 20px;
+}
 #driveToolbar .dropdown-bar {
-  margin: 4px 5px;
+  margin: 5px 5px;
+  line-height: 1em;
   position: relative;
   display: inline-block;
 }
@@ -320,3 +355,32 @@ span.fa-folder-open {
   margin-top: -3px;
   margin-right: 2px;
 }
+#driveToolbar .leftside {
+  width: 250px;
+  margin: 0;
+  padding: 0;
+}
+#driveToolbar .rightside {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+}
+#driveToolbar .path {
+  display: inline-block;
+  height: 100%;
+  line-height: 40px;
+  cursor: default;
+}
+#driveToolbar .path .element {
+  padding: 5px;
+  border: 1px solid #dddddd;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+#driveToolbar .path .element.clickable {
+  cursor: pointer;
+}
+#driveToolbar .path .element.clickable:hover {
+  background: #ffffff;
+  border: 1px solid #888888;
+}
diff --git a/www/drive/file.less b/www/drive/file.less
index dd8de9279..30a5b6a8f 100644
--- a/www/drive/file.less
+++ b/www/drive/file.less
@@ -1,3 +1,22 @@
+@tree-bg: #eee;
+@tree-fg: #000;
+@tree-lines-col: #888;
+
+@content-bg: @tree-bg;
+@content-fg: @tree-fg;
+@info-box-bg: #ddddff;
+@info-box-border: #bbb;
+@table-header-fg: #888;
+@table-header-bg: #d8d8d8;
+
+@toolbar-bg: #ddd;
+@toolbar-fg: #555;
+@toolbar-border-col: #ccc;
+@toolbar-button-bg: #888;
+@toolbar-button-fg: #eee;
+@toolbar-path-bg: #fff;
+@toolbar-path-border: #888;
+
 /* PAGE */
 
 html, body {
@@ -16,6 +35,15 @@ body {
     flex-flow: column;
 }
 
+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 .app-container {
     flex: 1;
     overflow: auto;
@@ -32,7 +60,7 @@ body {
 
 ul {
     list-style: none;
-    padding-left: 10px;
+    padding-left: 0px; // Remove the default padding
 }
 
 li {
@@ -78,7 +106,7 @@ span {
 #tree {
     border-right: 1px solid #ccc;
     box-sizing: border-box;
-    background: #eee;
+    background: @tree-bg;
     overflow: auto;
     resize: horizontal;
     width: 250px;
@@ -86,9 +114,10 @@ span {
     max-width: 500px;
     min-width: 200px;
     padding: 10px 0px;
+    color: @tree-fg;
     li {
         cursor: auto;
-        &> span.element:hover {
+        &:hover > span.element {
             text-decoration: underline;
         }
         &.collapsed ul {
@@ -106,6 +135,12 @@ span {
     }
     .category2 {
         margin-top: 2em;
+        .root {
+            &> .fa {
+                min-width: 30px;
+                cursor: pointer;
+            }
+        }
     }
     .fa.expcol {
         margin-left: -10px;
@@ -130,6 +165,7 @@ span {
     ul {
         margin: 0px 0px 0px 10px;
         list-style: none;
+        padding-left: 10px;
         li {
             position: relative;
             &:before {
@@ -138,9 +174,9 @@ span {
                 top: -0.25em;
                 content: '';
                 display: block;
-                border-left: 1px solid #888;
+                border-left: 1px solid @tree-lines-col;
                 height: 1em;
-                border-bottom: 1px solid #888;
+                border-bottom: 1px solid @tree-lines-col;
                 width: 17.5px;
             }
             &:after {
@@ -149,7 +185,7 @@ span {
                 bottom: -7px;
                 content: '';
                 display: block;
-                border-left: 1px solid #888;
+                border-left: 1px solid @tree-lines-col;
                 height: 100%;
             }
             &.root {
@@ -173,7 +209,8 @@ span {
 
 #content {
     box-sizing: border-box;
-    background: #eee;
+    background: @content-bg;
+    color: @content-fg;
     overflow: auto;
     flex: 1;
     display: flex;
@@ -183,12 +220,13 @@ span {
         margin-top: 10px;
     }
     .info-box {
-        margin: 0px auto;
-        padding: 5px;
-        background: #ddddff;
-        border: 1px solid #bbb;
+        height: 40px;
+        line-height: 40px;
+        padding-left: 10px;
+        margin: 10px auto;
+        background: @info-box-bg;
+        border: 1px solid @info-box-border;
         border-radius: 5px;
-        margin-bottom: 10px;
         span {
             cursor: pointer;
             margin-left: 10px;
@@ -208,6 +246,7 @@ span {
         }
     }
     div.grid {
+        padding: 20px;
         li {
             display: inline-block;
             margin: 10px 10px;
@@ -241,6 +280,7 @@ span {
         ul {
             display: table;
             width: 100%;
+            padding: 0px 10px;
         }
         li {
             display: table-row;
@@ -252,7 +292,7 @@ span {
         li {
             &.header {
                 cursor: default;
-                color: #888;
+                color: @table-header-fg;
                 span {
                     &:not(.fa) {
                         text-align: left;
@@ -262,13 +302,14 @@ span {
                     }
                 }
                 &> span {
+                    padding: 15px 5px;
                     &.active {
                         font-weight: bold;
                     }
                     &.clickable {
                         cursor: pointer;
                         &:hover {
-                            background: #d8d8d8;
+                            background: @table-header-bg;
                         }
                     }
                 }
@@ -316,28 +357,43 @@ span {
 /* Toolbar */
 
 #driveToolbar {
-    background: #ddd;
+    background: @toolbar-bg;
+    color: @toolbar-fg;
     height: 40px;
+    display: flex;
+    flex-flow: row;
+    border-top: 1px solid @toolbar-border-col;
+    border-bottom: ;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    z-index: 100;
+    box-sizing: content-box;
+
     .newPadContainer {
         display: inline-block;
         height: 100%;
     }
 
-    button.newElement {
-        border-radius: 2px;
-        height: 30px;
-        background: #888;
-        color: #eee;
-        font-size: 16px;
-        border: none;
-        font-weight: bold;
-        &:hover {
-            box-shadow: 0px 0px 2px #000;
+    button {
+        &.element {
+            border-radius: 2px;
+            height: 30px;
+            background: @toolbar-button-bg;
+            color: @toolbar-button-fg;
+            font-size: 16px;
+            border: none;
+            font-weight: bold;
+            &:hover {
+                box-shadow: 0px 0px 2px #000;
+            }
+        }
+        &.new {
+            padding: 0 20px;
         }
     }
     /* The container <div> - needed to position the dropdown content */
     .dropdown-bar {
-        margin: 4px 5px;
+        margin: 5px 5px;
+        line-height: 1em;
         position: relative;
         display: inline-block;
         &.right {
@@ -358,6 +414,36 @@ span {
         margin-top: -3px;
         margin-right: 2px;
     }
+
+    .leftside {
+        width: 250px;
+        margin: 0;
+        padding: 0;
+    }
+    .rightside {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+    }
+    .path {
+        display: inline-block;
+        height: 100%;
+        line-height: 40px;
+        cursor: default;
+        .element {
+            padding: 5px;
+            border: 1px solid @toolbar-bg;
+            border-radius: 2px;
+            box-sizing: border-box;
+            &.clickable {
+                cursor: pointer;
+                &:hover {
+                    background: @toolbar-path-bg;
+                    border: 1px solid @toolbar-path-border;
+                }
+            }
+        }
+    }
 }
 
 
diff --git a/www/drive/inner.html b/www/drive/inner.html
index 379a8fed0..dc82c7ee2 100644
--- a/www/drive/inner.html
+++ b/www/drive/inner.html
@@ -11,6 +11,7 @@
 </head>
 <body>
     <div id="toolbar" class="toolbar-container"></div>
+    <div id="driveToolbar"></div>
     <div class="app-container">
         <div id="tree">
         </div>
diff --git a/www/drive/main.js b/www/drive/main.js
index 9f207fb4d..7056c7bcf 100644
--- a/www/drive/main.js
+++ b/www/drive/main.js
@@ -175,6 +175,7 @@ define([
 
         var $tree = $iframe.find("#tree");
         var $content = $iframe.find("#content");
+        var $driveToolbar = $iframe.find("#driveToolbar");
         var $contextMenu = $iframe.find("#treeContextMenu");
         var $contentContextMenu = $iframe.find("#contentContextMenu");
         var $defaultContextMenu = $iframe.find("#defaultContextMenu");
@@ -578,6 +579,10 @@ define([
                 onDrag(e.originalEvent, path);
             });
 
+            $element.on('mousedown', function (e) {
+                e.stopPropagation();
+            });
+
             // Add drop handlers if we are not in the trash and if the element is a folder
             if (!droppable || !isFolder) { return; }
 
@@ -648,10 +653,10 @@ define([
         var getFileIcon = function (href) {
             var $icon = $fileIcon.clone();
 
-            if (href.indexOf('/pad/') !== -1) { $icon = $padIcon.clone() }
-            else if (href.indexOf('/code/') !== -1) { $icon = $codeIcon.clone() }
-            else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone() }
-            else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone() }
+            if (href.indexOf('/pad/') !== -1) { $icon = $padIcon.clone(); }
+            else if (href.indexOf('/code/') !== -1) { $icon = $codeIcon.clone(); }
+            else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone(); }
+            else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone(); }
 
             return $icon;
         };
@@ -732,32 +737,41 @@ define([
             return title;
         };
 
+        var getPrettyName = function (name) {
+            var pName;
+            switch (name) {
+                case ROOT: pName = ROOT_NAME; break;
+                case TRASH: pName = TRASH_NAME; break;
+                case UNSORTED: pName = UNSORTED_NAME; break;
+                case TEMPLATE: pName = TEMPLATE_NAME; break;
+                case FILES_DATA: pName = FILES_DATA_NAME; break;
+                default: pName = name;
+            }
+            return pName;
+        };
+
         // Create the title block with the "parent folder" button
         var createTitle = function (path) {
-            var isTrash = path[0] === TRASH;
-            // Create title and "Up" icon
-            var name = path[path.length - 1];
-            if (name === ROOT && path.length === 1) { name = ROOT_NAME; }
-            else if (name === TRASH && path.length === 1) { name = TRASH_NAME; }
-            else if (name === UNSORTED && path.length === 1) { name = UNSORTED_NAME; }
-            else if (name === TEMPLATE && path.length === 1) { name = TEMPLATE_NAME; }
-            else if (name === FILES_DATA && path.length === 1) { name = FILES_DATA_NAME; }
-            else if (filesOp.isPathInTrash(path)) { name = getTrashTitle(path); }
-            var $title = $('<h1>').text(name);
-            if (path.length > 1) {
-                var $parentFolder = $upIcon.clone().addClass("parentFolder")
-                    .click(function() {
-                        var newPath = path.slice();
-                        newPath.pop();
-                        if (isTrash && path.length === 4) {
-                            // path = [TRASH, "{DirName}", 0, 'element']
-                            // --> parent is TRASH
-                            newPath = [TRASH];
-                        }
-                        module.displayDirectory(newPath);
+            if (!path || path.length === 0) { return; }
+            var isTrash = filesOp.isPathInTrash(path);
+            var $title = $('<span>', {'class': 'path unselectable'});
+            path.forEach(function (p, idx) {
+                if (isTrash && [1,2].indexOf(idx) !== -1) { return; }
+
+                var $span = $('<span>', {'class': 'element'});
+                if (idx < path.length - 1) {
+                    $span.addClass('clickable');
+                    $span.click(function (e) {
+                        module.displayDirectory(path.slice(0, idx + 1));
                     });
-                $title.append($parentFolder);
-            }
+                }
+
+                var name = p;
+                if (idx === 0) { name = getPrettyName(p); }
+                else { $title.append(' > '); }
+
+                $span.text(name).appendTo($title);
+            });
             return $title;
         };
 
@@ -807,10 +821,10 @@ define([
             });
 
             var $listButton = $('<button>', {
-                'class': 'newElement'
+                'class': 'element'
             }).append($listIcon.clone());
             var $gridButton = $('<button>', {
-                'class': 'newElement'
+                'class': 'element'
             }).append($gridIcon.clone());
 
             $listButton.click(function () {
@@ -871,7 +885,7 @@ define([
             var $block = Cryptpad.createDropdown(dropdownConfig);
 
             // Custom style:
-            $block.find('button').addClass('newElement');
+            $block.find('button').addClass('new').addClass('element');
 
             // Handlers
             $block.find('a.newFolder').click(function () {
@@ -1072,9 +1086,11 @@ define([
 
         // Drive content toolbar
         var createToolbar = function (path) {
-            var $toolbar = $('<div>', {
-                id: 'driveToolbar'
-            });
+            var $toolbar = $driveToolbar;
+            $toolbar.html('');
+            var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
+            $leftside.width($tree.width());
+            var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
             return $toolbar;
         };
 
@@ -1130,7 +1146,7 @@ define([
             var sortedFiles = sortElements(false, [FILES_DATA], keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc(), false, true);
             sortedFiles.forEach(function (file) {
                 var $icon = getFileIcon(file.href);
-                var $element = $('<li>', { 'class': 'file-element element' })
+                var $element = $('<li>', { 'class': 'file-element element' });
                 addFileData(file.href, file.title, $element, false);
                 $element.prepend($icon).dblclick(function () {
                     openFile(file.href);
@@ -1225,7 +1241,6 @@ define([
             }
 
             var $toolbar = createToolbar(path);
-            var $title = createTitle(path);
             var $info = createInfoBox(path);
 
             var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
@@ -1236,9 +1251,10 @@ define([
             }
             var $list = $('<ul>').appendTo($dirContent);
 
-            var $modeButton = createViewModeButton().appendTo($toolbar);
+            var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside'));
+            var $title = createTitle(path).appendTo($toolbar.find('.rightside'));
             if (!filesOp.isPathInTrash(path)) {
-                createNewButton(isInRoot).appendTo($toolbar);
+                createNewButton(isInRoot).appendTo($toolbar.find('.leftside'));
             }
 
             var $folderHeader = getFolderListHeader();
@@ -1270,7 +1286,8 @@ define([
                     $element.appendTo($list);
                 });
             }
-            $content.append($toolbar).append($title).append($info).append($dirContent);
+            //$content.append($toolbar).append($title).append($info).append($dirContent);
+            $content.append($info).append($dirContent);
             appStatus.ready(true);
         };
 
@@ -1290,15 +1307,15 @@ define([
         };
 
         var createTreeElement = function (name, $icon, path, draggable, droppable, collapsable, active) {
-            var $name = $('<span>', { 'class': 'folder-element element' }).text(name)
-                .click(function () {
-                    module.displayDirectory(path);
-                });
+            var $name = $('<span>', { 'class': 'folder-element element' }).text(name);
             var $collapse;
             if (collapsable) {
                 $collapse = $expandIcon.clone();
             }
-            var $element = $('<li>').append($collapse).append($icon).append($name);
+            var $element = $('<li>').append($collapse).append($icon).append($name)
+                .click(function () {
+                    module.displayDirectory(path);
+                });
             if (draggable) { $element.attr('draggable', true); }
             if (collapsable) {
                 $element.addClass('collapsed');
@@ -1401,19 +1418,9 @@ define([
         var createTrash = function ($container, path) {
             var $icon = filesOp.isFolderEmpty(files[TRASH]) ? $trashEmptyIcon.clone() : $trashIcon.clone();
             var isOpened = filesOp.comparePath(path, currentPath);
-            var $trash = $('<span>', {
-                    'class': 'tree-trash element'
-                }).text(TRASH_NAME).prepend($icon)
-                .click(function () {
-                    module.displayDirectory(path);
-                });
-            var $trashElement = $('<li>').append($trash);
+            var $trashElement = createTreeElement(TRASH_NAME, $icon, [TRASH], false, true, false, isOpened);
             $trashElement.addClass('root');
-            $trashElement.data('path', [TRASH]);
-            addDragAndDropHandlers($trashElement, path, true, true);
             $trashElement.contextmenu(openTrashTreeContextMenu);
-            if (isOpened) { $trash.addClass('active'); }
-
             var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category2' }).append($trashElement);
             $container.append($trashList);
         };
@@ -1701,6 +1708,18 @@ define([
             return false;
         });
 
+        $iframe.find('#tree').mousedown(function (e) {
+            if (APP.resizeTree) { return; }
+            APP.resizeTree = window.setInterval(function () {
+                $driveToolbar.find('.leftside').width($tree.width());
+            }, 100);
+        });
+        $(ifrw).mouseup(function (e) {
+            window.clearInterval(APP.resizeTree);
+            APP.resizeTree = undefined;
+        });
+
+
         refresh();
     };