diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 90c0524d7..a62c962fb 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -282,10 +282,6 @@ define([
         return h('div#container');
     };
 
-    Pages['/profile/'] = Pages['/profile/index.html'] = function () {
-        return h('div#container');
-    };
-
     Pages['/register/'] = Pages['/register/index.html'] = function () {
         return [h('div#main', [
             h('div.mainOverlay'),
@@ -513,5 +509,13 @@ define([
         ];
     };
 
+    Pages['/profile/'] = Pages['/profile/index.html'] = function () {
+        return [
+            h('div#toolbar'),
+            h('div#container'),
+            loadingScreen()
+        ];
+    };
+
     return Pages;
 });
diff --git a/customize.dist/src/less/sidebar-layout.less b/customize.dist/src/less/sidebar-layout.less
new file mode 100644
index 000000000..02126b169
--- /dev/null
+++ b/customize.dist/src/less/sidebar-layout.less
@@ -0,0 +1,97 @@
+@import '/customize/src/less/variables.less';
+@import '/customize/src/less/mixins.less';
+
+@leftside-bg: #eee;
+@leftside-color: #000;
+@rightside-color: #000;
+@description-color: #777;
+
+@button-width: 400px;
+@button-bg: #3066e5;
+@button-alt-bg: #fff;
+@button-red-bg: #e54e4e;
+
+
+.cp {
+    input[type="text"] {
+        padding-left: 10px;
+    }
+    #container {
+        font-size: 16px;
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        #leftSide {
+            color: @leftside-color;
+            width: 250px;
+            background: @leftside-bg;
+            display: flex;
+            flex-flow: column;
+            .categories {
+                flex: 1;
+                .category {
+                    .leftsideCategory();
+                }
+            }
+        }
+        #rightSide {
+            flex: 1;
+            padding: 5px 20px;
+            color: @rightside-color;
+            overflow: auto;
+            .element {
+                label:not(.noTitle), .label {
+                    display: block;
+                    font-weight: bold;
+                    margin-bottom: 0;
+                }
+                .description {
+                    display: block;
+                    color: @description-color;
+                    margin-bottom: 5px;
+                }
+                margin-bottom: 20px;
+            }
+            [type="text"], button {
+                vertical-align: middle;
+                height: 40px;
+                box-sizing: border-box;
+            }
+            .inputBlock {
+                display: inline-flex;
+                width: @button-width;
+                input {
+                    flex: 1;
+                    border-radius: 0.25em 0 0 0.25em;
+                    border: 1px solid #adadad;
+                    border-right: 0px;
+                }
+                button {
+                    border-radius: 0 0.25em 0.25em 0;
+                    //border: 1px solid #adadad;
+                    border-left: 0px;
+                }
+            }
+            button.btn {
+                background-color: @button-bg;
+                border-color: darken(@button-bg, 10%);
+                color: white;
+                &:hover {
+                    background-color: darken(@button-bg, 10%);
+                }
+                &.btn-danger {
+                    background-color: @button-red-bg;
+                    border-color: darken(@button-red-bg, 10%);
+                    color: white;
+                    &:hover {
+                        background-color: darken(@button-red-bg, 10%);
+                    }
+                }
+            }
+            &>div {
+                margin: 10px 0;
+            }
+        }
+    }
+}
+
diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 58fece5a2..6e8b60036 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -25,6 +25,7 @@
 .whiteboardColor { color: @toolbar-whiteboard-bg; }
 .driveColor { color: @toolbar-drive-bg; }
 .settingsColor { color: @toolbar-settings-bg; }
+.profileColor { color: @toolbar-settings-bg; }
 .defaultColor { color: @toolbar-default-bg; }
 
 .toolbar-container {
@@ -268,6 +269,11 @@ body {
         @color: @toolbar-settings-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-profile {
+        @bgcolor: @toolbar-profile-bg;
+        @color: @toolbar-profile-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 
@@ -302,8 +308,8 @@ body .cryptpad-toolbar {
     z-index: 9001;
 
     .dropdown-bar {
-        height: 100%;
-        display: inline-block;
+        //height: 100%;
+        //display: inline-block;
         button {
             height: 100%;
             border-radius: 0;
@@ -620,6 +626,32 @@ body .cryptpad-toolbar {
     }
 }
 
+.app-slide {
+    @media screen and (max-width: @media-medium-screen) {
+        .cryptpad-toolbar-leftside {
+            flex-flow: row wrap;
+            width: 175px;
+            height: auto;
+            .cryptpad-spinner { order: 0; }
+        }
+        .cryptpad-toolbar-rightside {
+            height: 2*@toolbar-line-height;
+        }
+    }
+    @media screen and (max-width: 320px) {
+        .cryptpad-toolbar-leftside {
+            flex-flow: row wrap;
+            width: 175px;
+            height: auto;
+            padding-top: @toolbar-line-height;
+            .cryptpad-spinner { order: 0; }
+        }
+        .cryptpad-toolbar-rightside {
+            height: auto;
+        }
+    }
+}
+
 .cryptpad-toolbar-top {
     display: flex;
     flex-flow: row;
@@ -727,7 +759,6 @@ body .cryptpad-toolbar {
         &:hover {
             background-color: rgba(0,0,0,0.3);
         }
-        order: 2;
         text-align: center;
         font-size: 32px;
         margin-left: 10px;
@@ -785,10 +816,14 @@ body .cryptpad-toolbar {
     }
     .cryptpad-user {
         height: 100%;
-        display: inline-block;
+        display: inline-flex;
         order: 5;
         line-height: @toolbar-top-height;
         color: white;
+        .cryptpad-upgrade { order: 1; }
+        .cryptpad-new { order: 2; }
+        .cryptpad-user-dropdown { order: 3; }
+        .cryptpad-backup { order: 4; }
         &> * {
             display: inline-block;
             height: 100%;
@@ -837,6 +872,14 @@ body .cryptpad-toolbar {
                 }
             }
         }
+        p.accountData {
+            &> span {
+                font-weight: bold;
+                span {
+                    font-weight: normal;
+                }
+            }
+        }
         .cryptpad-backup {
             margin: 0;
             border-radius: 0;
@@ -848,12 +891,14 @@ body .cryptpad-toolbar {
     }
 }
 .cryptpad-toolbar-leftside {
-    height: @toolbar-line-height;
+    //height: @toolbar-line-height;
     &:empty {
         height: 0;
     }
     float: left;
-    margin-bottom: -1px;
+    display: inline-flex;
+    align-items: center;
+    //margin-bottom: -1px;
     .cryptpad-dropdown-users {
         pre {
             /* needed for ckeditor */
@@ -869,17 +914,22 @@ body .cryptpad-toolbar {
     .dropdown-bar-content {
         margin-top: -1px;
     }
-    .limit-container a {
-        height: 26px;
-        margin: 3px 0;
-        line-height: 26px;
-        padding: 0 5px;
-        box-sizing: border-box;
-        border: 1px solid transparent;
-        font-size: 14px;
-        &:hover {
-            text-decoration: none;
-        }
+
+    & > span {
+        height: @toolbar-line-height;
+    }
+
+    #userButtons { order: 1; }
+    .shareButton { order: 2; }
+    .cryptpad-spinner { order: 3; }
+
+    #userButtons button {
+        width: 125px;
+        text-align: center;
+    }
+    .shareButton button {
+        width: 50px;
+        text-align: center;
     }
 }
 .cryptpad-toolbar-rightside {
@@ -986,11 +1036,12 @@ body .cryptpad-toolbar {
     }
 }
 .cryptpad-spinner {
-    line-height: @toolbar-top-height;
+    line-height: @toolbar-line-height;
+    padding: 0 20px;
     &> span.fa {
         height: 20px;
         width: 20px;
-        margin: 8px;
+        //margin: 8px;
         line-height: 20px;
         font-size: 20px;
         text-align: center;
@@ -1001,16 +1052,6 @@ body .cryptpad-toolbar {
     font-weight: bold;
     text-transform: uppercase;
 }
-.cryptpad-user {
-    p.accountData {
-        &> span {
-            font-weight: bold;
-            span {
-                font-weight: normal;
-            }
-        }
-    }
-}
 .cryptpad-dropdown-share {
     a {
         .fa {
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index edc46d250..c5b3f4be2 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -105,6 +105,8 @@
 @toolbar-default-color: #000;
 @toolbar-settings-bg: #0087ff;
 @toolbar-settings-color: #fff;
+@toolbar-profile-bg: #0087ff;
+@toolbar-profile-color: #fff;
 
 
 @topbar-back: #fff;
diff --git a/customize.dist/template.js b/customize.dist/template.js
index fbb97071e..ca0fb7bd3 100644
--- a/customize.dist/template.js
+++ b/customize.dist/template.js
@@ -12,7 +12,7 @@ $(function () {
     var Messages = Cryptpad.Messages;
     var $body = $('body');
     var isMainApp = function () {
-        return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings)\/$/.test(location.pathname);
+        return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings|profile)\/$/.test(location.pathname);
     };
 
     var rightLink = function (ref, loc, txt) {
@@ -145,7 +145,7 @@ $(function () {
                 } else if (/drive/.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require(['/drive/main.js'], ready);
-                } else if (/file/.test(pathname)) {
+                } else if (/\/file\//.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require([ '/file/main.js' ], ready);
                 } else if (/friends/.test(pathname)) {
@@ -163,6 +163,9 @@ $(function () {
                 } else if (/^\/settings\//.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require([ '/settings/main.js', ], ready);
+                } else if (/^\/profile\//.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/profile/main.js', ], ready);
                 }
             });
 
@@ -176,9 +179,7 @@ $(function () {
     ], function () {
         $body.append($topbar).append($main).append($footer);
 
-        if (/^\/profile\//.test(pathname)) {
-            require([ '/profile/main.js'], function () {});
-        } else if (/^\/user\//.test(pathname)) {
+        if (/^\/user\//.test(pathname)) {
             require([ '/user/main.js'], function () {});
         } else if (/^\/register\//.test(pathname)) {
             require([ '/register/main.js' ], function () {});
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index e4f69ec45..112a0dc0b 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -37,6 +37,7 @@ define(function () {
     out.disconnected = 'Déconnecté';
     out.synchronizing = 'Synchronisation';
     out.reconnecting = 'Reconnexion...';
+    out.typing = "Édition";
     out.lag = 'Latence';
     out.readonly = 'Lecture seule';
     out.anonymous = "Anonyme";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 27495077f..bbb6f22e1 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -41,6 +41,7 @@ define(function () {
     out.disconnected = 'Disconnected';
     out.synchronizing = 'Synchronizing';
     out.reconnecting = 'Reconnecting...';
+    out.typing = "Typing";
     out.lag = 'Lag';
     out.readonly = 'Read only';
     out.anonymous = "Anonymous";
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index af5ef56ce..2c11eb4a3 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -1662,7 +1662,7 @@ define([
                 content: Messages.user_rename
             });
         }
-        if (account && parsed && (!parsed.type || parsed.type !== 'profile')) {
+        if (account) {
             options.push({
                 tag: 'a',
                 attributes: {'class': 'profile'},
diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index 225f18fd2..cddc79b3e 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -29,12 +29,9 @@ define([
     // Top parts
     var USER_CLS = Bar.constants.userAdmin = "cryptpad-user";
     var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
-    var STATE_CLS = Bar.constants.state = 'cryptpad-state';
-    var LAG_CLS = Bar.constants.lag = 'cryptpad-lag';
     var LIMIT_CLS = Bar.constants.lag = 'cryptpad-limit';
     var TITLE_CLS = Bar.constants.title = "cryptpad-title";
     var NEWPAD_CLS = Bar.constants.newpad = "cryptpad-new";
-    var UPGRADE_CLS = Bar.constants.upgrade = "cryptpad-upgrade";
 
     // User admin menu
     var USERADMIN_CLS = Bar.constants.user = 'cryptpad-user-dropdown';
@@ -66,10 +63,6 @@ define([
         var $userContainer = $('<span>', {
             'class': USER_CLS
         }).appendTo($topContainer);
-        $('<button>', {'class': UPGRADE_CLS + ' buttonSuccess'}).hide().appendTo($userContainer);
-        $('<span>', {'class': SPINNER_CLS}).hide().appendTo($userContainer);
-        $('<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': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
@@ -124,17 +117,6 @@ define([
 
     // Userlist elements
 
-    var checkSynchronizing = function (toolbar, config) {
-        if (!toolbar.state) { return; }
-        var userList = config.userList.list.users;
-        var userNetfluxId = config.userList.userNetfluxId;
-        var meIdx = userList.indexOf(userNetfluxId);
-        if (meIdx === -1) {
-            toolbar.state.text(Messages.synchronizing);
-            return;
-        }
-        toolbar.state.text('');
-    };
     var getOtherUsers = function(config) {
         var userList = config.userList.list.users;
         var userData = config.userList.data;
@@ -283,7 +265,6 @@ define([
                 var users = userList.users;
                 if (users.indexOf(config.userList.userNetfluxId) !== -1) {toolbar.connected = true;}
                 if (!toolbar.connected) { return; }
-                checkSynchronizing(toolbar, config);
                 if (config.userList.data) {
                     updateUserList(toolbar, config);
                 }
@@ -315,7 +296,6 @@ define([
         var $button = $('<button>').appendTo($container);
         $('<span>',{'class': 'buttonTitle'}).appendTo($button);
 
-        toolbar.$leftside.prepend($('<span>', {'class': 'separator'}));
         toolbar.$leftside.prepend($container);
 
         if (config.$contentContainer) {
@@ -446,6 +426,7 @@ define([
             var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
             //$shareBlock.find('button').attr('id', 'shareButton');
             $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
+            $shareBlock.addClass('shareButton');
 
             if (hashes.editHash) {
                 $shareBlock.find('a.editShare').click(function () {
@@ -481,8 +462,8 @@ define([
             throw new Error("Unable to display the share button: hash required in the URL");
         }
         var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
-        //var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
-        var $button = $('<button>', {'title': Messages.shareButton}).append($shareIcon);//:.append($span);
+        var $button = $('<button>', {'title': Messages.shareButton}).append($shareIcon);
+        $button.addClass('shareButton');
         $button.click(function () {
             var url = window.location.href;
             var success = Cryptpad.Clipboard.copy(url);
@@ -607,6 +588,8 @@ define([
             'class': TITLE_CLS
         }).appendTo(toolbar.$top);
 
+        toolbar.$top.find('.filler').hide();
+
         var $hoverable = $('<span>', {'class': 'hoverable'}).appendTo($titleContainer);
 
         // Buttons
@@ -644,75 +627,27 @@ define([
         return $linkContainer;
     };
 
-    var checkLag = function (toolbar, config, $lagEl) {
-        var lag;
-        var $lag = $lagEl || toolbar.lag;
-        if (!$lag) { return; }
-        var getLag = config.network.getLag;
-        if(typeof getLag === "function") {
-            lag = getLag();
-        }
-        var title;
-        if (lag && toolbar.connected) {
-            $lag.attr('class', LAG_CLS);
-            toolbar.firstConnection = false;
-            title = Messages.lag + ' : ' + lag + ' ms\n';
-            if (lag > 30000) {
-                $lag.addClass('lag0');
-                title = Messages.redLight;
-            } else if (lag > 5000) {
-                $lag.addClass('lag1');
-                title += Messages.orangeLight;
-            } else if (lag > 1000) {
-                $lag.addClass('lag2');
-                title += Messages.orangeLight;
-            } else if (lag > 300) {
-                $lag.addClass('lag3');
-                title += Messages.greenLight;
-            } else {
-                $lag.addClass('lag4');
-                title += Messages.greenLight;
-            }
-        }
-        else if (!toolbar.firstConnection) {
-            $lag.attr('class', LAG_CLS);
-            $lag.addClass('dc');
-            title = Messages.redLight;
-        } else {
-            $lag.addClass('lag4');
-        }
-        if (title) {
-            $lag.attr('title', title);
-        }
-    };
-    var createLag = function (toolbar, config) {
-        var $a = toolbar.$userAdmin.find('.'+LAG_CLS).show();
-        var $container = $('<span>', {'class': 'bars'}).appendTo($a);
-        $('<span>', {'class': 'bar1'}).appendTo($container);
-        $('<span>', {'class': 'bar2'}).appendTo($container);
-        $('<span>', {'class': 'bar3'}).appendTo($container);
-        $('<span>', {'class': 'bar4'}).appendTo($container);
-        $('<span>', {'class': 'disconnected fa fa-exclamation-circle'}).appendTo($a);
-        if (config.network) {
-            checkLag(toolbar, config, $a);
-            setInterval(function () {
-                if (!toolbar.connected) { return; }
-                checkLag(toolbar, config);
-            }, 3000);
-        }
-        return $a;
-    };
-
+    var typing = -1;
     var kickSpinner = function (toolbar, config, local) {
         if (!toolbar.spinner) { return; }
         var $spin = toolbar.spinner;
-        $spin.find('.spin').show();
-        $spin.find('.synced').hide();
+
+        if (typing === -1) {
+            typing = 1;
+            $spin.text(Messages.typing);
+            $spin.interval = window.setInterval(function () {
+                var dots = Array(typing+1).join('.');
+                $spin.text(Messages.typing + dots);
+                typing++;
+                if (typing > 3) { typing = 0; }
+            }, 500);
+        }
         var onSynced = function () {
             if ($spin.timeout) { clearTimeout($spin.timeout); }
             $spin.timeout = setTimeout(function () {
-                $spin.find('.spin').hide();
-                $spin.find('.synced').show();
+                window.clearInterval($spin.interval);
+                typing = -1;
+                $spin.text(Messages.saved);
             }, local ? 0 : SPINNER_DISAPPEAR_TIME);
         };
         if (Cryptpad) {
@@ -727,16 +662,9 @@ define([
         };
     };
     var createSpinner = function (toolbar, config) {
-        var $spin = toolbar.$userAdmin.find('.'+SPINNER_CLS).show();
-        $('<span>', {
-            id: uid(),
-            'class': 'spin fa fa-spinner fa-pulse',
-        }).appendTo($spin).hide();
-        $('<span>', {
-            id: uid(),
-            'class': 'synced fa fa-check',
-            title: Messages.synced
-        }).appendTo($spin);
+        var $spin = $('<span>', {'class': SPINNER_CLS}).appendTo(toolbar.$leftside);
+        $spin.text(Messages.synchronizing);
+
         if (config.realtime) {
             config.realtime.onPatch(ks(toolbar, config));
             config.realtime.onMessage(ks(toolbar, config, true));
@@ -744,10 +672,6 @@ define([
         return $spin;
     };
 
-    var createState = function (toolbar) {
-        return toolbar.$userAdmin.find('.'+STATE_CLS).text(Messages.synchronizing).show();
-    };
-
     var createLimit = function (toolbar) {
         if (!Config.enablePinning) { return; }
         var $limitIcon = $('<span>', {'class': 'fa fa-exclamation-triangle'});
@@ -853,34 +777,6 @@ define([
         return $userAdmin;
     };
 
-    var createUpgrade = function (/*toolbar*/) {
-        return; // TODO
-        /*if (ApiConfig.removeDonateButton) { return; }
-        if (Cryptpad.account.plan) { return; }
-
-        var text;
-        var feedback;
-        var url;
-        if (ApiConfig.allowSubscriptions && Cryptpad.isLoggedIn()) {
-            text = Messages.upgradeAccount;
-            feedback = "UPGRADE_ACCOUNT";
-            url = Cryptpad.upgradeURL;
-        } else {
-            text = Messages.supportCryptpad;
-            feedback = "SUPPORT_CRYPTPAD";
-            url = Cryptpad.donateURL;
-        }
-
-        var $upgrade = toolbar.$top.find('.' + UPGRADE_CLS).attr({
-            'title': Messages.supportCryptpad
-        }).text(text).show()
-        .click(function () {
-            Cryptpad.feedback(feedback);
-            window.open(url,'_blank');
-        });
-        return $upgrade;*/
-    };
-
     // Events
     var initClickEvents = function (toolbar, config) {
         var removeDropdowns =  function () {
@@ -1036,11 +932,11 @@ define([
         tb['fileshare'] = createFileShare;
         tb['title'] = createTitle;
         tb['pageTitle'] = createPageTitle;
-        tb['lag'] = createLag;
+        tb['lag'] = $.noop;
         tb['spinner'] = createSpinner;
-        tb['state'] = createState;
+        tb['state'] = $.noop;
         tb['limit'] = createLimit;
-        tb['upgrade'] = createUpgrade;
+        tb['upgrade'] = $.noop;
         tb['newpad'] = createNewPad;
         tb['useradmin'] = createUserAdmin;
 
@@ -1068,18 +964,14 @@ define([
 
         var failed = toolbar.failed = function () {
             toolbar.connected = false;
-            if (toolbar.state) {
-                toolbar.state.text(Messages.disconnected);
-            }
-            checkLag(toolbar, config);
+            toolbar.spinner.text(Messages.disconnected);
+            //checkLag(toolbar, config);
         };
         toolbar.reconnecting = function (userId) {
             if (config.userList) { config.userList.userNetfluxId = userId; }
             toolbar.connected = false;
-            if (toolbar.state) {
-                toolbar.state.text(Messages.reconnecting);
-            }
-            checkLag(toolbar, config);
+            toolbar.spinner.text(Messages.reconnecting);
+            //checkLag(toolbar, config);
         };
 
         // On log out, remove permanently the realtime elements of the toolbar
diff --git a/www/drive/file.less b/www/drive/file.less
index 0a0ca7151..676ac8f89 100644
--- a/www/drive/file.less
+++ b/www/drive/file.less
@@ -67,10 +67,16 @@ img.icon {
     flex-flow: row;
     @media screen and (max-width: @size-mobile) {
         display: block;
+        #driveToolbar {
+            .path .element {
+                display: none;
+            }
+        }
         #tree {
             resize: none;
             width: 100%;
             max-width: unset;
+            max-height: unset;
             border-bottom: 1px solid @toolbar-border-col;
             .category {
                 margin-top: 0.5em;
diff --git a/www/drive/main.js b/www/drive/main.js
index f8e518987..a097d67fe 100644
--- a/www/drive/main.js
+++ b/www/drive/main.js
@@ -2723,7 +2723,7 @@ define([
 
             var userList = APP.userList = info.userList;
             var config = {
-                displayed: ['useradmin', 'spinner', 'lag', 'state', 'limit', 'newpad', 'pageTitle'],
+                displayed: ['useradmin', 'limit', 'newpad', 'pageTitle'],
                 userList: {
                     list: userList,
                     userNetfluxId: info.myID
diff --git a/www/profile/main.js b/www/profile/main.js
index 40b513e1f..c19843948 100644
--- a/www/profile/main.js
+++ b/www/profile/main.js
@@ -9,10 +9,14 @@ define([
     '/bower_components/chainpad-listmap/chainpad-listmap.js',
     '/bower_components/chainpad-crypto/crypto.js',
     '/bower_components/marked/marked.min.js',
+    '/common/toolbar2.js',
     'cm/lib/codemirror',
     'cm/mode/markdown/markdown',
     'less!/profile/main.less',
-], function ($, Cryptpad, Listmap, Crypto, Marked, CodeMirror) {
+    'less!/customize/src/less/toolbar.less',
+    'less!/customize/src/less/cryptpad.less',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+], function ($, Cryptpad, Listmap, Crypto, Marked, Toolbar, CodeMirror) {
 
     var APP = window.APP = {
         Cryptpad: Cryptpad,
@@ -396,6 +400,28 @@ define([
         $container.append($block);
     };
 
+    var createLeftside = function () {
+        var $categories = $('<div>', {'class': 'categories'}).appendTo(APP.$leftside);
+        APP.$usage = $('<div>', {'class': 'usage'}).appendTo(APP.$leftside);
+
+        var $category = $('<div>', {'class': 'category'}).appendTo($categories);
+        $category.append($('<span>', {'class': 'fa fa-user'}));
+        $category.addClass('active');
+        $category.append(Messages.profileButton);
+    };
+
+    var createToolbar = function () {
+        var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'];
+        var configTb = {
+            displayed: displayed,
+            ifrw: window,
+            common: Cryptpad,
+            $container: APP.$toolbar,
+            pageTitle: Messages.settings_title
+        };
+        var toolbar = APP.toolbar = Toolbar.create(configTb);
+        toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
+    };
 
     var onReady = function () {
         APP.$container.find('#'+CREATE_ID).remove();
@@ -409,22 +435,24 @@ define([
         }
 
         if (!APP.initialized) {
-            var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$container);
+            var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$rightside);
             addAvatar($header);
             var $rightside = $('<div>', {id: HEADER_RIGHT_ID}).appendTo($header);
             addDisplayName($rightside);
             addLink($rightside);
-            addDescription(APP.$container);
-            addViewButton(APP.$container); //$rightside);
-            addPublicKey(APP.$container);
+            addDescription(APP.$rightside);
+            addViewButton(APP.$rightside); //$rightside);
+            addPublicKey(APP.$rightside);
             APP.initialized = true;
         }
+
+        createLeftside();
+        Cryptpad.removeLoadingScreen();
     };
 
     var onInit = function () {
         
     };
-
     var onDisconnect = function () {};
     var onChange = function () {};
 
@@ -471,6 +499,8 @@ define([
             });
         };
 
+        Cryptpad.removeLoadingScreen();
+
         if (!Cryptpad.isLoggedIn()) {
             var $p = $('<p>', {id: CREATE_ID}).append(Messages.profile_register);
             var $a = $('<a>', {
@@ -489,39 +519,29 @@ define([
         APP.$container.append($create);
     };
 
-    $(function () {
-        var $main = $('#mainBlock');
-        // Language selector
-        var $sel = $('#language-selector');
-        Cryptpad.createLanguageSelector(undefined, $sel);
-        $sel.find('button').addClass('btn').addClass('btn-secondary');
-        $sel.show();
-
-        // User admin menu
-        var $userMenu = $('#user-menu');
-        var userMenuCfg = {
-            $initBlock: $userMenu,
-            'static': true
-        };
-        var $userAdmin = Cryptpad.createUserAdminMenu(userMenuCfg);
-        $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
+    var onCryptpadReady = function () {
+        APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
+        APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
+
+        createToolbar();
+
+        if (window.location.hash) {
+            return void andThen(window.location.hash.slice(1));
+        }
+        getOrCreateProfile();
+    };
 
+    $(function () {
         $(window).click(function () {
             $('.cryptpad-dropdown').hide();
         });
 
-        // main block is hidden in case javascript is disabled
-        $main.removeClass('hidden');
-
         APP.$container = $('#container');
+        APP.$toolbar = $('#toolbar');
 
         Cryptpad.ready(function () {
             Cryptpad.reportAppUsage();
-
-            if (window.location.hash) {
-                return void andThen(window.location.hash.slice(1));
-            }
-            getOrCreateProfile();
+            onCryptpadReady();
         });
     });
 
diff --git a/www/profile/main.less b/www/profile/main.less
index f5140dd3f..0de830fde 100644
--- a/www/profile/main.less
+++ b/www/profile/main.less
@@ -1,15 +1,8 @@
+@import '/customize/src/less/variables.less';
+@import '/customize/src/less/mixins.less';
+@import '/customize/src/less/sidebar-layout.less';
+
 .cp {
-    #mainBlock {
-        z-index: 1;
-        width: 1000px;
-        max-width: 90%;
-        margin: auto;
-        #container {
-            font-size: 25px;
-            width: 100%;
-            height: 100%;
-        }
-    }
     #header {
         display: flex;
         #rightside {
@@ -92,6 +85,9 @@
             font-weight: bold;
             font-size: 30px;
         }
+        .link {
+            font-size: 25px;
+        }
         .displayName, .link {
             line-height: 40px;
         }
diff --git a/www/settings/main.js b/www/settings/main.js
index afe588258..11ec267eb 100644
--- a/www/settings/main.js
+++ b/www/settings/main.js
@@ -404,15 +404,10 @@ define([
     };
 
     $(function () {
-        var $main = $('#mainBlock');
-
         $(window).click(function () {
             $('.cryptpad-dropdown').hide();
         });
 
-        // main block is hidden in case javascript is disabled
-        $main.removeClass('hidden');
-
         APP.$container = $('#container');
         APP.$toolbar = $('#toolbar');
 
diff --git a/www/settings/main.less b/www/settings/main.less
index 954f48f52..b6921d764 100644
--- a/www/settings/main.less
+++ b/www/settings/main.less
@@ -1,64 +1,10 @@
 @import '/customize/src/less/variables.less';
 @import '/customize/src/less/mixins.less';
-
-@border: 1px solid #555;
-
-@leftside-bg: #eee;
-@leftside-color: #000;
-@rightside-color: #000;
-@description-color: #777;
-
-@button-width: 400px;
-@button-bg: #3066e5;
-@button-alt-bg: #fff;
-@button-red-bg: #e54e4e;
-
+@import '/customize/src/less/sidebar-layout.less';
 
 .cp {
-    input[type="text"] {
-        padding-left: 10px;
-    }
     #container {
-        font-size: 16px;
-        display: flex;
-        flex: 1;
-        min-height: 0;
-        #leftSide {
-            color: @leftside-color;
-            width: 250px;
-            background: @leftside-bg;
-            display: flex;
-            flex-flow: column;
-            .categories {
-                flex: 1;
-                .category {
-                    .leftsideCategory();
-                }
-            }
-        }
         #rightSide {
-            flex: 1;
-            padding: 5px 20px;
-            color: @rightside-color;
-            overflow: auto;
-            .element {
-                label:not(.noTitle), .label {
-                    display: block;
-                    font-weight: bold;
-                    margin-bottom: 0;
-                }
-                .description {
-                    display: block;
-                    color: @description-color;
-                    margin-bottom: 5px;
-                }
-                margin-bottom: 20px;
-            }
-            [type="text"], button {
-                vertical-align: middle;
-                height: 40px;
-                box-sizing: border-box;
-            }
             .userFeedback {
                 input {
                     vertical-align: middle;
@@ -81,21 +27,6 @@
                     width: @button-width;
                 }
             }
-            .inputBlock {
-                display: inline-flex;
-                width: @button-width;
-                input {
-                    flex: 1;
-                    border-radius: 0.25em 0 0 0.25em;
-                    border: 1px solid #adadad;
-                    border-right: 0px;
-                }
-                button {
-                    border-radius: 0 0.25em 0.25em 0;
-                    //border: 1px solid #adadad;
-                    border-left: 0px;
-                }
-            }
             .backupDrive {
                 button {
                     span.fa {
@@ -104,25 +35,6 @@
                     margin-right: 5px;
                 }
             }
-            button.btn {
-                background-color: @button-bg;
-                border-color: darken(@button-bg, 10%);
-                color: white;
-                &:hover {
-                    background-color: darken(@button-bg, 10%);
-                }
-                &.btn-danger {
-                    background-color: @button-red-bg;
-                    border-color: darken(@button-red-bg, 10%);
-                    color: white;
-                    &:hover {
-                        background-color: darken(@button-red-bg, 10%);
-                    }
-                }
-            }
-            &>div {
-                margin: 10px 0;
-            }
         }
     }
 }