diff --git a/customize.dist/images/avatar.png b/customize.dist/images/avatar.png
new file mode 100644
index 000000000..5605809af
Binary files /dev/null and b/customize.dist/images/avatar.png differ
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index 5f75301a2..2094ab624 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -577,7 +577,7 @@ noscript {
         line-height: 24px;
         vertical-align: middle;
         .usage {
-            height: 24px;
+            height: 100%;
             display: inline-block;
             background: blue;
             position: absolute;
diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less
index 46c01e697..cf35f72e2 100644
--- a/customize.dist/src/less/dropdown.less
+++ b/customize.dist/src/less/dropdown.less
@@ -32,6 +32,9 @@
         z-index: 1000;
         max-height: 300px;
         overflow-y: auto;
+        font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+        font-size: 16px;
+        line-height: 1em;
 
         &.left {
             right: 0;
@@ -45,7 +48,7 @@
             color: black;
             padding: 5px 16px;
             text-decoration: none;
-            display: block;
+            display: flex;
             cursor: pointer;
             -webkit-user-select: none;
             -moz-user-select: none;
@@ -53,6 +56,16 @@
             user-select: none;
             float: none;
             text-align: left;
+            font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+            font-size: 16px;
+            line-height: 1em;
+
+
+            .fa {
+                width: 20px;
+                text-align: center;
+                margin-right: 5px;
+            }
 
             &:hover {
                 background-color: #f1f1f1;
@@ -77,7 +90,13 @@
             margin: 0;
             white-space: normal;
             text-align: left;
+            color: black;
+            font-size: 14px;
+            * {
+                font-size: 14px;
+            }
             h2 {
+                color: black;
                 font-weight: bold;
                 text-align: center;
                 background-color: #EEEEEE;
diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 3a01e9a78..fca423e9a 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -28,16 +28,38 @@
 #cke_1_contents {
     margin-top: -1px;
     display: flex;
+    overflow: visible;
 }
 
+.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; }
+
 .userlist-drawer {
     font: normal normal normal 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    min-width: 175px;
     width: 175px;
     display: block;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 10px;
     box-sizing: border-box;
+    .close {
+        position: absolute;
+        margin-top: -11px;
+        margin-left: 149px;
+        font-size: 15px;
+        opacity: 0.5;
+        cursor: pointer;
+        &:hover {
+            opacity: 1;
+        }
+    }
     h2 {
         color: inherit;
         font-size: 1.2em;
@@ -96,24 +118,20 @@ body {
             }
             .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
                 background-color: lighten(@bgcolor, 8%);
-                button:hover {
+                button:hover, button.active {
                     background-color: @bgcolor;
                 }
             }
             .hoverable:hover {
-                .editable {
+                .editable, .pencilIcon {
                     cursor: text;
                     border: 1px solid darken(@bgcolor, 15%);
                     background: darken(@bgcolor, 10%);
+                    transition: all 0.15s;
                     color: @color;
                 }
-                .pencilIcon {
-                    border: 1px solid darken(@bgcolor, 15%);
-                    background: darken(@bgcolor, 10%);
-                    color: @color;
-                    &:hover {
-                        background: darken(@bgcolor, 5%);
-                    }
+                .editable {
+                    cursor: text;
                 }
             }
             .saveIcon {
@@ -129,7 +147,7 @@ body {
                 background: darken(@bgcolor, 10%);
                 color: @color;
             }
-            .dropdown-bar-content {
+            /*.dropdown-bar-content {
                 background: darken(@bgcolor, 5%);
                 border: 1px solid @color;
                 color: @color;
@@ -155,7 +173,7 @@ body {
                         background-color: @bgcolor;
                     }
                 }
-            }
+            }*/
         }
     }
 
@@ -229,9 +247,6 @@ body {
             margin: 0;
             background: transparent;
         }
-        .dropdown-bar-content {
-            line-height: 14px;
-        }
     }
 
     .separator {
@@ -248,6 +263,7 @@ body {
     }
 
     button {
+        transition: all 0.15s;
         .unselectable();
         &#shareButton, &.buttonSuccess {
             // Bootstrap 4 colors
@@ -297,14 +313,9 @@ body {
         }
     }
     .cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button {
-        //background-color: #fff;
-        //border-color: #ccc;
         background: transparent;
         &:hover {
-            //color: #292b2c;
             background-color: rgba(50,50,50,0.3);
-            //background-color: #e6e6e6;
-            border-color: #adadad;
         }
     }
 
@@ -603,7 +614,7 @@ body {
         display: inline-flex;
         align-items: center;
         line-height: @toolbar-top-height;
-        margin: 0 20px;
+        margin: 0 10px;
         .title, .pencilIcon, .saveIcon {
             font-size: 25px;
             vertical-align: middle;
@@ -671,6 +682,8 @@ body {
         }
         order: 2;
         text-align: center;
+        font-size: 32px;
+        margin-left: 10px;
         &> button {
             display: flex;
             align-items: center;
@@ -696,10 +709,6 @@ body {
                 color: inherit;
             }
         }
-        .dropdown-bar-content {
-            font-size: 12px;
-            line-height: 14px;
-        }
     }
     .cryptpad-link {
         display: inline-flex;
@@ -728,6 +737,7 @@ body {
         display: inline-block;
         order: 5;
         line-height: @toolbar-top-height;
+        color: white;
         &> * {
             display: inline-block;
             height: 100%;
@@ -739,13 +749,15 @@ body {
             cursor: pointer;
         }
         .cryptpad-user-dropdown {
-            margin-left: 20px;
+            z-index: 10000;
+            //margin-left: 20px;
             height: 64px;
             width: 64px;
             padding: 0px;
             box-sizing: border-box;
             text-align: center;
             background-color: rgba(0,0,0,0.3);
+            transition: all 0.15s;
             &:hover {
                 background-color: rgba(0,0,0,0.4);
             }
@@ -838,6 +850,9 @@ body {
         display: flex;
         flex-flow: column;
         z-index:1000;
+        .fa {
+            font-size: 17px;
+        }
         &> span {
             box-sizing: border-box;
             width: 150px;
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index b50b83c01..e373765ac 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -241,7 +241,7 @@ define(function () {
     out.fm_templateName = "Modèles";
     out.fm_searchName = "Recherche";
     out.fm_searchPlaceholder = "Rechercher...";
-    out.fm_newButton = "Ajouter à ce dossier";
+    out.fm_newButton = "Nouveau";
     out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant";
     out.fm_newFolder = "Nouveau dossier";
     out.fm_newFile = "Nouveau pad";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 149d1ebff..9f7f34be7 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -244,7 +244,7 @@ define(function () {
     out.fm_templateName = "Templates";
     out.fm_searchName = "Search";
     out.fm_searchPlaceholder = "Search...";
-    out.fm_newButton = "Add to this folder";
+    out.fm_newButton = "New";
     out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder";
     out.fm_newFolder = "New folder";
     out.fm_newFile = "New pad";
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 8209149c7..755e75a8e 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -263,5 +263,28 @@ define([
         };
     };
 
+    var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
+    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"});
+    UI.getIcon = function (type) {
+        var $icon;
+
+        switch(type) {
+            case 'pad': $icon = $padIcon.clone(); break;
+            case 'file': $icon = $fileAppIcon.clone(); break;
+            case 'code': $icon = $codeIcon.clone(); break;
+            case 'slide': $icon = $slideIcon.clone(); break;
+            case 'poll': $icon = $pollIcon.clone(); break;
+            case 'whiteboard': $icon = $whiteboardIcon.clone(); break;
+            default: $icon = $fileIcon.clone();
+        }
+
+        return $icon;
+    };
+
     return UI;
 });
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 66fccba1c..92254b9fa 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -12,12 +12,13 @@ define([
     '/common/common-metadata.js',
     '/common/common-codemirror.js',
     '/common/common-file.js',
+    '/file/file-crypto.js',
 
     '/common/clipboard.js',
     '/common/pinpad.js',
     '/customize/application_config.js'
 ], function ($, Config, Messages, Store, Util, Hash, UI, History, UserList, Title, Metadata,
-            CodeMirror, Files, Clipboard, Pinpad, AppConfig) {
+            CodeMirror, Files, FileCrypto, Clipboard, Pinpad, AppConfig) {
 
 /*  This file exposes functionality which is specific to Cryptpad, but not to
     any particular pad type. This includes functions for committing metadata
@@ -65,6 +66,7 @@ define([
     common.errorLoadingScreen = UI.errorLoadingScreen;
     common.notify = UI.notify;
     common.unnotify = UI.unnotify;
+    common.getIcon = UI.getIcon;
 
     // import common utilities for export
     common.find = Util.find;
@@ -850,8 +852,9 @@ define([
     common.createUsageBar = function (cb) {
         // getPinnedUsage updates common.account.usage, and other values
         // so we can just use those and only check for errors
+        var $container = $('<span>', {'class':'limit-container'});
         var todo = function (err) {
-            var $container = $('<span>', {'class':'limit-container'});
+            $container.html('');
             if (err) {
                 return void window.setTimeout(function () {
                     common.getPinnedUsage(todo);
@@ -867,8 +870,7 @@ define([
 
             var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container);
             var quota = usage/limit;
-            var width = Math.floor(Math.min(quota, 1)*$limit.width()); // the bar is 200px width
-            var $usage = $('<span>', {'class': 'usage'}).css('width', width+'px');
+            var $usage = $('<span>', {'class': 'usage'}).css('width', quota*100+'%');
 
             var makeDonateButton = function () {
                 $('<a>', {
@@ -921,9 +923,9 @@ define([
             window.setTimeout(function () {
                 common.getPinnedUsage(todo);
             }, LIMIT_REFRESH_RATE);
-            cb(err, $container);
         };
         common.getPinnedUsage(todo);
+        cb(null, $container);
     };
 
     var prepareFeedback = common.prepareFeedback = function (key) {
@@ -975,9 +977,14 @@ define([
                     var ev = {
                         target: data.target
                     };
+                    if (data.filter && !data.filter(file)) {
+                        common.log('TODO: invalid avatar (type or size)');
+                        return;
+                    }
                     data.FM.handleFile(file, ev);
                     if (callback) { callback(); }
                 });
+                if (data.accept) { $input.attr('accept', data.accept); }
                 button.click(function () { $input.click(); });
                 break;
             case 'template':
@@ -1099,8 +1106,7 @@ define([
                 }
                 button = $('<button>', {
                     title: Messages.historyButton,
-                    'class': "fa fa-history",
-                    style: 'font:'+size+' FontAwesome'
+                    'class': "fa fa-history history",
                 });
                 if (data.histConfig) {
                     button
@@ -1130,6 +1136,70 @@ define([
         return button;
     };
 
+    common.avatarAllowedTypes = [
+        'image/png',
+        'image/jpeg',
+        'image/jpg',
+        'image/gif',
+    ];
+    common.displayAvatar = function ($container, href) {
+        var MutationObserver = window.MutationObserver;
+        $container.html('');
+        if (href) {
+            var parsed = common.parsePadUrl(href);
+            var secret = common.getSecrets('file', parsed.hash);
+            if (secret.keys && secret.channel) {
+                var cryptKey = secret.keys && secret.keys.fileKeyStr;
+                var hexFileName = common.base64ToHex(secret.channel);
+                var src = common.getBlobPathFromHex(hexFileName);
+                common.getFileSize(href, function (e, data) {
+                    if (e) { return void console.error(e); }
+                    if (typeof data !== "number") { return; }
+                    if (common.bytesToMegabytes(data) > 0.5) { return; }
+                    var $img = $('<media-tag>').appendTo($container);
+                    $img.attr('src', src);
+                    $img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
+                    require(['/common/media-tag.js'], function (MediaTag) {
+                        MediaTag.CryptoFilter.setAllowedMediaTypes(common.avatarAllowedTypes);
+                        MediaTag($img[0]);
+                        var observer = new MutationObserver(function(mutations) {
+                            mutations.forEach(function(mutation) {
+                                if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                                    console.log(mutation);
+                                    if (mutation.addedNodes.length > 1 ||
+                                        mutation.addedNodes[0].nodeName !== 'IMG') {
+                                        $img.remove();
+                                        return;
+                                        //TODO display default avatar
+                                    }
+                                    var $image = $img.find('img');
+                                    var onLoad = function () {
+                                        var w = $image.width();
+                                        var h = $image.height();
+                                        if (w>h) {
+                                            $image.css('max-height', '100%');
+                                            $img.css('flex-direction', 'row');
+                                            return;
+                                        }
+                                        $image.css('max-width', '100%');
+                                        $img.css('flex-direction', 'column');
+                                    };
+                                    if ($image[0].complete) { onLoad(); }
+                                    $image.on('load', onLoad);
+                                }
+                            });
+                        });
+                        observer.observe($img[0], {
+                            attributes: false,
+                            childList: true,
+                            characterData: false
+                        });
+                    });
+                });
+            }
+        }
+    };
+
     // Create a button with a dropdown menu
     // input is a config object with parameters:
     //  - container (optional): the dropdown container (span)
diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js
index d760c0f5c..6d27920aa 100644
--- a/www/common/diffMarked.js
+++ b/www/common/diffMarked.js
@@ -156,7 +156,6 @@ define([
                 MediaTag(el);
                 var observer = new MutationObserver(function(mutations) {
                     mutations.forEach(function(mutation) {
-                        console.log(mutation);
                         if (mutation.type === 'childList') {
                             var list_values = [].slice.call(el.children);
                             mediaMap[el.getAttribute('src')] = list_values;
diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index bd5440128..5a171f40b 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -71,7 +71,7 @@ define([
         $('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
         $('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer);
         $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
-        //$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
+        $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
         $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
 
         $toolbar.append($topContainer)
@@ -177,9 +177,8 @@ define([
         var numberOfViewUsers = numberOfUsers - userList.length;
 
         // Update the userlist
-        var $usersTitle = $('<h2>').text(Messages.users);
-        var $editUsers = $userlistContent;
-        $editUsers.html('').append($usersTitle);
+        var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html('');
+
 
         var $editUsersList = $('<div>', {'class': 'userlist-others'});
 
@@ -248,7 +247,10 @@ define([
             throw new Error("You must provide a `userList` object to display the userlist");
         }
         var $content = $('<div>', {'class': 'userlist-drawer'});
+        var $closeIcon = $('<span>', {"class": "fa fa-window-close close"}).appendTo($content);
+        $('<h2>').text(Messages.users).appendTo($content);
         $('<p>', {'class': USERLIST_CLS}).appendTo($content);
+
         toolbar.userlistContent = $content;
 
         var $container = $('<span>', {id: 'userButtons'});
@@ -263,15 +265,41 @@ define([
             config.$contentContainer.prepend($content);
         }
 
+        var $ck = config.$container.find('.cke_toolbox_main');
+        var hide = function () {
+            $content.hide();
+            $button.removeClass('active');
+            $ck.css({
+                'display': '',
+                'padding-left': '',
+                'margin-bottom': ''
+            });
+        };
+        var show = function () {
+            $content.show();
+            $button.addClass('active');
+            $ck.css({
+                'display': 'inline-block',
+                'padding-left': '175px',
+                'margin-bottom': '-3px'
+            });
+            $content.css('margin-top', (-$ck.height())+'px');
+        };
+
+        $closeIcon.click(hide);
         $button.click(function () {
-            $content.toggle();
             var visible = $content.is(':visible');
+            if (visible) { hide(); }
+            else { show(); }
+            visible = !visible;
             Cryptpad.setAttribute('userlist-drawer', visible);
             Cryptpad.feedback(visible?'USERLIST_SHOW': 'USERLIST_HIDE');
         });
 
+
         Cryptpad.getAttribute('userlist-drawer', function (err, val) {
-            if (val === false) { $content.hide(); }
+            if (val === false) { return void hide(); }
+            show();
         });
 
         return $container;
@@ -658,9 +686,10 @@ define([
     };
 
     var createNewPad = function (toolbar) {
-        var $newPad = $('<span>', {
+        /*var $newPad = $('<span>', {
             'class': NEWPAD_CLS + " dropdown-bar"
-        }).appendTo(toolbar.$top);
+        }).appendTo(toolbar.$top);*/
+        var $newPad = toolbar.$top.find('.'+NEWPAD_CLS).show();
 
         var pads_options = [];
         Config.availablePadTypes.forEach(function (p) {
@@ -673,19 +702,20 @@ define([
                     'target': '_blank',
                     'href': '/' + p + '/',
                 },
-                content: Messages.type[p]
+                content: $('<div>').append(Cryptpad.getIcon(p)).html() + Messages.type[p]
             });
         });
         var dropdownConfig = {
             text: '', // Button initial text
             options: pads_options, // Entries displayed in the menu
             container: $newPad,
+            left: true,
             feedback: /drive/.test(window.location.pathname)?
                 'DRIVE_NEWPAD': 'NEWPAD',
         };
         var $newPadBlock = Cryptpad.createDropdown(dropdownConfig);
         $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
-        $newPadBlock.find('button').addClass('fa fa-plus');
+        $newPadBlock.find('button').addClass('fa fa-th');
         return $newPadBlock;
     };
 
diff --git a/www/drive/file.less b/www/drive/file.less
index 6a19b8f8b..613dc714a 100644
--- a/www/drive/file.less
+++ b/www/drive/file.less
@@ -171,8 +171,16 @@ span {
     white-space: nowrap;
     max-width: 500px;
     min-width: 200px;
-    padding: 10px 0px;
+    padding: 0px;
     color: @tree-fg;
+    display: flex;
+    flex-flow: column;
+    max-height: 100%;
+    .categories-container {
+        flex: 1;
+        max-width: 500px;
+        overflow: auto;
+    }
     img.icon {
         margin-bottom: 3px;
         margin-left: -2px;
@@ -218,10 +226,20 @@ span {
         margin-top: 0;
     }
     #searchContainer {
+        margin-bottom: 20px;
         text-align: center;
-        padding: 5px 0;
+        padding: 0;
         input {
-            width: 80%;
+            outline-width: 0px;
+            border-radius: 0;
+            width: 100%;
+            border: 1px solid #ccc;
+            border-right: 0;
+            height: 32px;
+            padding: 0 5px;
+            &:focus {
+                outline-width: 0px;
+            }
         }
     }
     .fa.expcol {
@@ -284,7 +302,27 @@ span {
             }
         }
     }
-
+    .limit-container {
+        display: inline-flex;
+        flex-flow: column-reverse;
+        width: 100%;
+        margin-top: 20px;
+        .upgrade {
+            padding: 0;
+            line-height: 25px;
+            height: 25px;
+            margin: 0 3px;
+            border-radius: 0;
+        }
+        .cryptpad-limit-bar {
+            width: ~"calc(100% - 6px)";
+            height: 25px;
+            line-height: 25px;
+            .usage {
+                height: 100%;
+            }
+        }
+    }
 }
 
 /* CONTENT */
@@ -545,17 +583,15 @@ span {
 /* Toolbar */
 
 #driveToolbar {
-    background: @toolbar-bg;
-    color: @toolbar-fg;
+    background: lighten(@toolbar-drive-bg, 8%);
+    color: @toolbar-drive-color;
     //height: 30px;
     //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;
-    padding: 0 6px;
+    box-sizing: border-box;
+    height: 32px;
+    padding: 0;
     display: flex;
     flex-flow: row;
 
@@ -564,8 +600,71 @@ span {
         height: 100%;
     }
 
+    .history {
+        float: right;
+    }
+
+    .rightside, .leftside {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        .fa {
+            margin: 0;
+        }
+        button {
+            height: 100%;
+            padding: 0 10px;
+            border: none;
+            border-radius: 0;
+            box-sizing: border-box;
+            background: transparent;
+            font-size: 17px;
+            color: @toolbar-drive-color;
+            transition: all 0.15s;
+            .fa, span {
+                font-size: 17px;
+            }
+            &:hover {
+                background: @toolbar-drive-bg;
+            }
+            &.active {
+                display: none;
+            }
+        }
+    }
+    .rightside {
+        float: right;
+        & > * {
+            float: right;
+        }
+        #contextButtonsContainer {
+            display: inline-block;
+            height: 100%;
+        }
+        padding-left: 10px;
+    }
+    .leftside {
+        & > span {
+            height: 100%;
+            margin: 0;
+        }
+        button {
+            padding: 0 10px;
+            .fa {
+                margin-right: 5px;
+            }
+            .buttonTitle {
+                display: inline-flex;
+                height: 32px;
+                align-items: center;
+                span:not(.fa) {
+                    line-height: 23px;
+                }
+            }
+        }
+    }
+
     button {
-        height: 24px;
         font: @toolbar-button-font;
         span {
             font: @toolbar-button-font;
@@ -573,15 +672,6 @@ span {
         .fa, &.fa {
             font-family: FontAwesome;
         }
-        &.element {
-            height: 26px;
-            width: 26px;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        &.new {
-            padding: 0 5px;
-        }
     }
     /* The container <div> - needed to position the dropdown content */
     .dropdown-bar {
@@ -590,10 +680,10 @@ span {
         position: relative;
         display: inline-block;
     }
-    .right {
+    /*.right {
         float: right;
         /* Right-side buttons */
-        button {
+    /*    button {
             display: inline-block;
             &.active {
                 display: none;
@@ -602,28 +692,16 @@ span {
                 margin-right: 0px;
             }
         }
-    }
+    }*/
     .dropdown-bar-content {
         margin-right: 2px;
     }
 
-    .leftside {
-        width: auto;
-        margin: 0;
-        padding: 0;
-        display: inline-block;
-    }
-    .rightside {
-        margin: 0;
-        padding: 0;
-        display: inline-block;
-        float: right;
-    }
     .path {
         flex: 1;
         width: 100%;
-        height: 30px;
-        line-height: 30px;
+        height: 32px;
+        line-height: 32px;
         cursor: default;
         width: auto;
         overflow: hidden;
@@ -632,26 +710,21 @@ span {
         max-width: 100%;
         text-align: left;
         .element {
+            font-size: 17px;
             padding: 5px;
-            border: 1px solid @toolbar-bg;
-            border-radius: 2px;
+            border: 0;
+            background: darken(@toolbar-drive-bg, 10%);
+            color: @toolbar-drive-color;
             box-sizing: border-box;
+            transition: all 0.15s;
             &.clickable {
                 cursor: pointer;
                 &:hover {
-                    background: @toolbar-path-bg;
-                    border: 1px solid @toolbar-path-border;
+                    background: darken(@toolbar-drive-bg, 15%);
                 }
             }
         }
     }
-    #contextButtonsContainer {
-        float: right;
-        margin: 2px;
-        button {
-            vertical-align: top;
-        }
-    }
 }
 
 
diff --git a/www/drive/inner.js b/www/drive/inner.js
index 01c7c81c2..da7ddbe1f 100644
--- a/www/drive/inner.js
+++ b/www/drive/inner.js
@@ -1,7 +1,7 @@
 define([
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    'css!/drive/file.css',
+    'less!/drive/file.less',
     'less!/customize/src/less/cryptpad.less',
     'less!/customize/src/less/toolbar.less',
 ], function () {});
diff --git a/www/drive/main.js b/www/drive/main.js
index 7b5c5db3d..762de5d7d 100644
--- a/www/drive/main.js
+++ b/www/drive/main.js
@@ -158,13 +158,6 @@ define([
     //var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
     var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
     var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
-    var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
-    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"});
@@ -172,8 +165,8 @@ define([
     var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
     //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"});
     var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
-    var $listIcon = $('<span>', {"class": "fa fa-list"});
-    var $gridIcon = $('<span>', {"class": "fa fa-th"});
+    var $listIcon = $('<button>', {"class": "fa fa-list"});
+    var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
     var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
     var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
     var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
@@ -1141,7 +1134,7 @@ define([
         };
 
         var getFileIcon = function (id) {
-            var $icon = $fileIcon.clone();
+            var $icon = Cryptpad.getIcon();
 
             var data = filesOp.getFileData(id);
             if (!data) { return $icon; }
@@ -1149,15 +1142,16 @@ define([
             var href = data.href;
             if (!href) { return $icon; }
 
-            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(); }
-            else if (href.indexOf('/whiteboard/') !== -1) { $icon = $whiteboardIcon.clone(); }
-            else if (href.indexOf('/file/') !== -1) { $icon = $fileAppIcon.clone(); }
+            if (href.indexOf('/pad/') !== -1) { $icon = Cryptpad.getIcon('pad'); }
+            else if (href.indexOf('/code/') !== -1) { $icon = Cryptpad.getIcon('code'); }
+            else if (href.indexOf('/slide/') !== -1) { $icon = Cryptpad.getIcon('slide'); }
+            else if (href.indexOf('/poll/') !== -1) { $icon = Cryptpad.getIcon('poll'); }
+            else if (href.indexOf('/whiteboard/') !== -1) { $icon = Cryptpad.getIcon('whiteboard'); }
+            else if (href.indexOf('/file/') !== -1) { $icon = Cryptpad.getIcon('file'); }
 
             return $icon;
         };
+        var getIcon = Cryptpad.getIcon;
 
         // Create the "li" element corresponding to the file/folder located in "path"
         var createElement = function (path, elPath, root, isFolder) {
@@ -1285,7 +1279,10 @@ define([
                 }
 
                 if (idx === 0) { name = getPrettyName(p); }
-                else { $title.append(' > '); }
+                else {
+                    var $span2 = $('<span>', {'class': 'element'}).text(' > ');
+                    $title.append($span2);
+                }
 
                 $span.text(name).appendTo($title);
             });
@@ -1335,17 +1332,13 @@ define([
         };
 
         // Create the button allowing the user to switch from list to icons modes
-        var createViewModeButton = function () {
-            var $block = $('<div>', {
+        var createViewModeButton = function ($container) {
+            /*var $block = $('<div>', {
                 'class': 'dropdown-bar right changeViewModeContainer'
-            });
+            });*/
 
-            var $listButton = $('<button>', {
-                'class': 'element btn btn-secondary'
-            }).append($listIcon.clone());
-            var $gridButton = $('<button>', {
-                'class': 'element btn btn-secondary'
-            }).append($gridIcon.clone());
+            var $listButton = $listIcon.clone().addClass('element');
+            var $gridButton = $gridIcon.clone().addClass('element');
 
             $listButton.click(function () {
                 $gridButton.removeClass('active');
@@ -1369,11 +1362,10 @@ define([
             } else {
                 $gridButton.addClass('active');
             }
-            $block.append($listButton).append($gridButton);
-            return $block;
+            $container.append($listButton).append($gridButton);
         };
 
-        var createNewButton = function (isInRoot) {
+        var createNewButton = function (isInRoot, $container) {
             if (!APP.editable) { return; }
             if (!APP.loggedIn) { return; } // Anonymous users can use the + menu in the toolbar
 
@@ -1383,13 +1375,13 @@ define([
                 options.push({
                     tag: 'a',
                     attributes: {'class': 'newFolder'},
-                    content: Messages.fm_folder
+                    content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
                 });
                 options.push({tag: 'hr'});
                 options.push({
                     tag: 'a',
                     attributes: {'class': 'uploadFile'},
-                    content: Messages.uploadButton
+                    content: $('<div>').append(getIcon('file')).html() + Messages.uploadButton
                 });
                 options.push({tag: 'hr'});
             }
@@ -1407,21 +1399,21 @@ define([
                 options.push({
                     tag: 'a',
                     attributes: attributes,
-                    content: Messages.type[type]
+                    content: $('<div>').append(getIcon(type)).html() + Messages.type[type]
                 });
             });
             var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'}));
 
 
             var dropdownConfig = {
-                text: $plusIcon.html() + Messages.fm_newButton,
+                text: $plusIcon.html() + '<span>'+Messages.fm_newButton+'</span>',
                 options: options,
                 feedback: 'DRIVE_NEWPAD_LOCALFOLDER',
             };
             var $block = Cryptpad.createDropdown(dropdownConfig);
 
             // Custom style:
-            $block.find('button').addClass('btn').addClass('btn-primary').addClass('new');
+            $block.find('button').addClass('new');
             $block.find('button').attr('title', Messages.fm_newButtonTitle);
 
             // Handlers
@@ -1459,7 +1451,7 @@ define([
                 window.open('/' + type + '/');
             });
 
-            return $block;
+            $container.append($block);
         };
 
         var hideNewButton = function () {
@@ -1636,7 +1628,8 @@ define([
             $toolbar.html('');
             $('<div>', {'class': 'leftside'}).appendTo($toolbar);
             $('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
-            $('<div>', {'class': 'rightside'}).appendTo($toolbar);
+            var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
+            if (APP.$hist) { $rightside.append(APP.$hist); }
             return $toolbar;
         };
 
@@ -1857,12 +1850,12 @@ define([
                 if (mode) {
                     $dirContent.addClass(getViewModeClass());
                 }
-                createViewModeButton().appendTo($toolbar.find('.rightside'));
+                createViewModeButton($toolbar.find('.rightside'));
             }
             var $list = $('<ul>').appendTo($dirContent);
 
             // NewButton can be undefined if we're in read only mode
-            $toolbar.find('.leftside').append(createNewButton(isInRoot));
+            createNewButton(isInRoot, $toolbar.find('.leftside'));
 
             createTitle(path).appendTo($toolbar.find('.path'));
 
@@ -2127,10 +2120,15 @@ define([
             var s = $tree.scrollTop() || 0;
             $tree.html('');
             if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
-            if (displayedCategories.indexOf(ROOT) !== -1) { createTree($tree, [ROOT]); }
-            if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($tree, [TEMPLATE]); }
-            if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($tree, [FILES_DATA]); }
-            if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($tree, [TRASH]); }
+            var $div = $('<div>', {'class': 'categories-container'}).appendTo($tree);
+            if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
+            if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($div, [TEMPLATE]); }
+            if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($div, [FILES_DATA]); }
+            if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($div, [TRASH]); }
+
+            //$tree.append($('<div>', {'class': 'filler'}));
+            $tree.append(APP.$limit);
+
             $tree.scrollTop(s);
         };
 
@@ -2721,7 +2719,6 @@ define([
 
             var $rightside = toolbar.$rightside;
             $rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
-            var $leftside = toolbar.$leftside;
             var $userBlock = toolbar.$userAdmin;
             APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
 
@@ -2736,8 +2733,7 @@ define([
             /* add the usage */
             Cryptpad.createUsageBar(function (err, $limitContainer) {
                 if (err) { return void logError(err); }
-                $leftside.html('');
-                $leftside.append($limitContainer);
+                APP.$limit = $limitContainer;
             }, true);
 
             /* add a history button */
@@ -2755,8 +2751,9 @@ define([
                 $toolbar: APP.$bar,
                 href: window.location.origin + window.location.pathname + '#' + APP.hash
             };
-            var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
-            if (APP.loggedIn) { $rightside.append($hist); }
+            APP.$hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
+            APP.$hist.addClass('element');
+            //if (APP.loggedIn) { $rightside.append($hist); } TODO
 
             if (!readOnly && !APP.loggedIn) {
                 var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');
diff --git a/www/profile/main.js b/www/profile/main.js
index f170d1bc2..eb836d024 100644
--- a/www/profile/main.js
+++ b/www/profile/main.js
@@ -196,51 +196,105 @@ define([
             cb();
         };
         var rt = APP.lm.realtime;
-        var placeholder = "URL"; //TODO
+        var placeholder = "URL"; //XXX
         createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt);
     };
 
     var addAvatar = function ($container) {
         var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
         var $span = $('<span>').appendTo($block);
-        if (APP.lm.proxy.avatar) {
-            //var file = APP.lm.proxy.avatar;
-            var $img = $('<media-tag>').appendTo($span);
-            $img.attr('src', '/blob/45/45170bcd64aae1726b0b0e06c4360181a08bad9596640863');
-            $img.attr('data-crypto-key', 'cryptpad:5vs/ciPzSAyHeP6XRwxpFZt/cjkRC+EE2CRw+/xfcVI=');
-            require(['/common/media-tag.js'], function (MediaTag) {
-                var allowedMediaTypes = [
-                    'image/png',
-                    'image/jpeg',
-                    'image/jpg',
-                    'image/gif',
-                ];
-                MediaTag.CryptoFilter.setAllowedMediaTypes(allowedMediaTypes);
-                MediaTag($img[0]);
+        var allowedMediaTypes = Cryptpad.avatarAllowedTypes;
+        var displayAvatar = function () {
+            $span.html('');
+            if (!APP.lm.proxy.avatar) {
+                $('<img>', {
+                    src: '/customize/images/avatar.png',
+                    title: 'Avatar', // XXX
+                    alt: 'Avatar'
+                }).appendTo($span);
+                return;
+            }
+            Cryptpad.displayAvatar($span, APP.lm.proxy.avatar);
+
+            if (APP.readOnly) { return; }
+
+            var $delButton = $('<button>', {'class': 'delete btn btn-danger fa fa-times'}); //XXX
+            $span.append($delButton);
+            $delButton.click(function () {
+                console.log('clicked');
+                var oldChanId = Cryptpad.hrefToHexChannelId(APP.lm.proxy.avatar);
+                Cryptpad.unpinPads([oldChanId], function (e) {
+                    if (e) { Cryptpad.log(e); }
+                    console.log('unpinned');
+                    delete APP.lm.proxy.avatar;
+                    delete Cryptpad.getProxy().profile.avatar;
+                    Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
+                        console.log('synced1');
+                        var driveRt = Cryptpad.getStore().getProxy().info.realtime;
+                        Cryptpad.whenRealtimeSyncs(driveRt, function () {
+                            console.log('synced2');
+                            displayAvatar();
+                        });
+                    });
+                });
             });
-        }
+        };
+        displayAvatar();
         if (APP.readOnly) { return; }
 
-        //var $button = $('<button>', {'class': 'btn btn-success'}).text('TODO: change avatar');
-        //$block.append($button);
-
         var fmConfig = {
             noHandlers: true,
             noStore: true,
             body: $('body'),
             onUploaded: function (ev, data) {
-                console.log(data);
+                var chanId = Cryptpad.hrefToHexChannelId(data.url);
+                var profile = Cryptpad.getProxy().profile;
+                var old = profile.avatar;
+                var todo = function () {
+                    Cryptpad.pinPads([chanId], function (e) {
+                        if (e) { return void Cryptpad.log(e); }
+                        APP.lm.proxy.avatar = data.url;
+                        Cryptpad.getProxy().profile.avatar = data.url;
+                        Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
+                            var driveRt = Cryptpad.getStore().getProxy().info.realtime;
+                            Cryptpad.whenRealtimeSyncs(driveRt, function () {
+                                displayAvatar();
+                            });
+                        });
+                    });
+                };
+                if (old) {
+                    var oldChanId = Cryptpad.hrefToHexChannelId(old);
+                    Cryptpad.unpinPads([oldChanId], function (e) {
+                        if (e) { Cryptpad.log(e); }
+                        todo();
+                    });
+                    return;
+                }
+                todo();
             }
         };
         APP.FM = Cryptpad.createFileManager(fmConfig);
-        var data = {FM: APP.FM};
-        $block.append(Cryptpad.createButton('upload', false, data));
+        var data = {
+            FM: APP.FM,
+            filter: function (file) {
+                var sizeMB = Cryptpad.bytesToMegabytes(file.size);
+                var type = file.type;
+                return sizeMB <= 0.5 && allowedMediaTypes.indexOf(type) !== -1;
+            },
+            accept: ".gif,.jpg,.jpeg,.png"
+        };
+        var $upButton = Cryptpad.createButton('upload', false, data);
+        $upButton.text(" Upload a new avatar");
+        $upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
+        $block.append($upButton);
     };
 
     var addDescription = function ($container) {
         var $block = $('<div>', {id: DESCRIPTION_ID}).appendTo($container);
 
         if (APP.readOnly) {
+            if (!APP.lm.proxy.description.trim()) { return void $block.hide(); }
             var $div = $('<div>', {'class': 'rendered'}).appendTo($block);
             var val = Marked(APP.lm.proxy.description);
             $div.html(val);
@@ -274,13 +328,10 @@ define([
 
     var addPublicKey = function ($container) {
         var $block = $('<div>', {id: PUBKEY_ID});
-        var pubKey = Cryptpad.getProxy().edPublic;
-        $block.text(pubKey);
         $container.append($block);
     };
 
     var onReady = function () {
-        // TODO: on reconnect, this is called multiple times...
         APP.$container.find('#'+CREATE_ID).remove();
 
         if (!APP.initialized) {
@@ -332,13 +383,32 @@ define([
             var secret = Cryptpad.getSecrets();
             obj.profile = {};
             var channel = Cryptpad.createChannelId();
-            obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
-            obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
-            obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || '';
-            andThen(obj.profile.edit);
+            Cryptpad.pinPads([channel], function (e) {
+                if (e) {
+                    if (e === 'E_OVER_LIMIT') {
+                        Cryptpad.alert(Messages.pinLimitNotPinned, null, true);
+                    }
+                    return void Cryptpad.log('Error while creating your profile: ' + e); // XXX
+                }
+                obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
+                obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
+                obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || '';
+                andThen(obj.profile.edit);
+            });
         };
 
-        // TODO: if not logged in, display a register button here?
+        if (!Cryptpad.isLoggedIn()) { // XXX
+            var $p = $('<p>').text('TODO: You have to register to create a profile');
+            var $a = $('<a>', {
+                href: '/register/'
+            });
+            $('<button>', {
+                'class': 'btn btn-success',
+            }).text(Messages.login_register).appendTo($a);
+            $p.append($('<br>')).append($a);
+            APP.$container.append($p);
+            return;
+        }
         var $create = $('<div>', {id: CREATE_ID});
         var $button = $('<button>', {'class': 'btn btn-success'});
         $button.text('TODO: create a profile?').click(todo).appendTo($create); // XXX
diff --git a/www/profile/main.less b/www/profile/main.less
index e78b8cae3..50461e6fc 100644
--- a/www/profile/main.less
+++ b/www/profile/main.less
@@ -23,25 +23,43 @@
         width: 300px;
         //height: 350px;
         margin: 10px;
+        margin-right: 20px;
         text-align: center;
         &> span {
             display: inline-block;
-            line-height: 300px;
             text-align: center;
             height: 300px;
+            width: 300px;
             border: 1px solid black;
             border-radius: 10px;
             overflow: hidden;
+            position: relative;
+            .delete {
+                right: 0;
+                position: absolute;
+                opacity: 0.7;
+                &:hover {
+                    opacity: 1;
+                }
+            }
         }
         img {
-            max-width: 300px;
-            max-height: 300px;
+            max-width: 100%;
+            max-height: 100%;
+            vertical-align: top;
         }
         media-tag {
             height: 100%;
-            display: inline-block;
+            width: 100%;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
             img {
-                vertical-align: top;
+                min-width: 100%;
+                min-height: 100%;
+                max-width: none;
+                max-height: none;
+                flex-shrink: 0;
             }
         }
         button {
@@ -83,6 +101,7 @@
         position: relative;
         font-size: 16px;
         border: 1px solid #DDD;
+        margin-bottom: 20px;
         .rendered {
             padding: 0 15px;
         }