diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 542d3f35b..b56888e83 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -17,11 +17,13 @@
     @warn-color: @colortheme_default-warn // color of the warning text in the toolbar
 ) {
     @toolbar-color: @color;
+    //@toolbar-color: @bg-color;
     @toolbar-color-l20: lighten(@color, 20%);
     @toolbar-color-d20: darken(@color, 20%);
     @toolbar-color-d15: darken(@color, 15%);
 
     @toolbar-bg-color: @bg-color;
+    //@toolbar-bg-color: #FFFFFF;
     @toolbar-bg-color-l8: lighten(@bg-color, 8%);
     @toolbar-bg-color-l20: lighten(@bg-color, 20%);
     @toolbar-bg-color-d5: darken(@bg-color, 5%);
@@ -88,7 +90,7 @@
 
     .toolbar_vars();
     @toolbar_line-height: 32px;
-    @toolbar_top-height: 64px;
+    @toolbar_top-height: 76px;
     @toolbar_button-font: @colortheme_app-font;
 
     // if we spell 'share' correctly, then adblock plus hides the share button
@@ -166,7 +168,7 @@
         padding: 0;
         box-sizing: border-box;
         position: relative;
-        order: -2;
+        order: 99;
         resize: horizontal;
         z-index: 1;
         #cp-app-contacts-container {
@@ -196,7 +198,7 @@
         overflow-x: hidden;
         padding: 10px;
         box-sizing: border-box;
-        order: -3;
+        order: 100;
         z-index: 1;
         .cp-toolbar-userlist-drawer-close {
             position: absolute;
@@ -438,10 +440,17 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
+/*
+// XXX
         background-color: @toolbar-bg-color;
         background-color: var(--toolbar-bg-color);
         color: @toolbar-color;
         color: var(--toolbar-color);
+ */
+background-color: #ffffff;
+color: @toolbar-bg-color;
+color: var(--toolbar-bg-color);
+
 
         .fa {
             font: normal normal normal 14px/1 FontAwesome;
@@ -628,57 +637,9 @@
                         margin: 0;
                     }
                 }
-                /*
-                .cp-toolbar-top-filler {
-                    flex: 1;
-                }
-                .cp-toolbar-title {
-                    flex: auto;
-                    width: 100%;
-                    order: 10;
-                    height: @toolbar_line-height;
-                    line-height: initial;
-                    margin: 0;
-                    .cp-toolbar-title-hoverable {
-                        width: 100%;
-                    }
-                    .cp-toolbar-title-editable {
-                        max-width: ~"calc(100vw - 26px)";
-                        display: inline-block;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        font-size: @colortheme_app-font-size;
-                        height: @toolbar_line-height;
-                        box-sizing: border-box;
-                        line-height: 20px;
-                    }
-                    .cp-toolbar-title-edit, .cp-toolbar-title-save {
-                        box-sizing: border-box;
-                        height: @toolbar_line-height;
-                        line-height: @colortheme_app-font-size;
-                        display: inline-block;
-
-                        .fa {
-                            font-size: @colortheme_app-font-size;
-                        }
-                    }
-                    input {
-                        height: @toolbar_line-height;
-                        font-size: @colortheme_app-font-size;
-                        flex: 1;
-                        max-width: none;
-                        line-height: calc(@toolbar_line-height - 12px); // padding + border
-                    }
-                }
-                */
             }
         }
 
-        .cp-toolbar-spinner {
-            font-size: @colortheme_app-font-size;
-            color: @toolbar-color;
-            color: var(--toolbar-color);
-        }
         .cp-toolbar-limit {
             text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
             text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
@@ -688,45 +649,7 @@
         .cp-toolbar-leftside, .cp-toolbar-rightside {
             background-color: @toolbar-bg-color-l8;
             background-color: var(--toolbar-bg-color-l8);
-            button:hover, button.cp-toolbar-button-active {
-                background-color: @toolbar-bg-color;
-                background-color: var(--toolbar-bg-color);
-            }
-        }
-        .cp-toolbar-title-hoverable:hover {
-            .cp-toolbar-title-editable, .cp-toolbar-title-edit {
-                cursor: text;
-                border: 1px solid @toolbar-bg-color-d15;
-                border: 1px solid var(--toolbar-bg-color-d15);
-                background: @toolbar-bg-color-d10;
-                background: var(--toolbar-bg-color-d10);
-                transition: all 0.15s;
-                color: @toolbar-color;
-                color: var(--toolbar-color);
-            }
-            .cp-toolbar-title-editable {
-                cursor: text;
-            }
-        }
-        .cp-toolbar-title-save {
-            border: 1px solid @toolbar-bg-color-d15;
-            border: 1px solid var(--toolbar-bg-color-d15);
-            background: @toolbar-bg-color-d10;
-            background: var(--toolbar-bg-color-d10);
-            color: @toolbar-color;
-            color: var(--toolbar-color);
-            &:hover {
-                background: @toolbar-bg-color-d5;
-                background: var(--toolbar-bg-color-d5);
-            }
-        }
-        input {
-            border: 1px solid @toolbar-bg-color-d15;
-            border: 1px solid var(--toolbar-bg-color-d15);
-            background: @toolbar-bg-color-d10;
-            background: var(--toolbar-bg-color-d10);
-            color: @toolbar-color;
-            color: var(--toolbar-color);
+            color: #FFF; // XXX
         }
         .cp-dropdown-content.cp-dropdown-left a {
             color: black;
@@ -784,34 +707,32 @@
             //flex: 1;
         }
         .cp-toolbar-title {
+            color: @cryptpad_text_col;
             flex: 1;
             overflow: hidden;
             text-overflow: ellipsis;
             order: 3;
             height: 100%;
             display: inline-flex;
-            align-items: center;
-            line-height: @toolbar_top-height;
+            flex-flow: column;
+            justify-content: center;
             margin: 0 10px;
             .cp-toolbar-title-value {
                 border: 1px solid transparent;
-                padding: 5px;
-                font-size: 25px;
+                padding: 0 5px;
+                font-size: 30px;
                 vertical-align: middle;
-                line-height: 25px;
                 white-space: nowrap;
             }
             .cp-toolbar-title-value-page {
                 border: 1px solid transparent;
                 padding: 0 5px;
-                line-height: 48px;
             }
             .cp-toolbar-title-edit, .cp-toolbar-title-save {
                 display: flex;
                 align-items: center;
                 font-size: 20px;
                 vertical-align: middle;
-                line-height: 20px;
                 .fa {
                     font-size: 20px;
                 }
@@ -825,17 +746,30 @@
             .cp-toolbar-title-hoverable {
                 display: inline-flex;
                 overflow: hidden;
+                align-self: baseline;
+                &:hover {
+                    .cp-toolbar-title-editable, .cp-toolbar-title-edit {
+                        border: 1px solid @toolbar-bg-color-d15;
+                        border: 1px solid var(--toolbar-bg-color-d15);
+                        transition: all 0.15s;
+                    }
+                    .cp-toolbar-title-editable {
+                        cursor: text;
+                    }
+                }
             }
             .cp-toolbar-title-edit {
                 cursor: pointer;
                 border: 1px solid transparent;
-                padding: 5px;
+                padding: 0 5px;
                 border-collapse: collapse;
                 span {
                     cursor: pointer;
                 }
             }
             .cp-toolbar-title-save {
+                border: 1px solid @toolbar-bg-color-d15;
+                border: 1px solid var(--toolbar-bg-color-d15);
                 cursor: pointer;
                 padding: 5px;
                 border-collapse: collapse;
@@ -849,38 +783,48 @@
                 border-collapse: collapse;
             }
             input {
+                color: @cryptpad_text_col;
+                border: 1px solid @toolbar-bg-color-d15;
+                border: 1px solid var(--toolbar-bg-color-d15);
                 max-width: ~"calc(100% - 40px)";
                 //flex: 1;
                 vertical-align: middle;
                 box-sizing: border-box;
                 cursor: auto;
                 width: 300px;
-                font-size: 20px;
-                padding: 5px 5px;
-                height: 40px;
-                line-height: 28px; // padding + border
+                font-size: 30px;
+                padding: 0 5px;
+                height: 43px;
             }
         }
         .cp-toolbar-link, .cp-toolbar-new, .cp-toolbar-notifications {
             font-size: 48px;
-            line-height: 64px;
-            width: @toolbar_top-height;
+            line-height: @toolbar_top-height;
+            width: 64px;
             height: @toolbar_top-height;
             padding: 0;
             box-sizing: border-box;
             display: inline-block;
 
+/*
+            // XXX
             color: white;
             a {
                 color: white;
             }
             transition: all 0.15s;
+ */
+
         }
         .cp-toolbar-notifications, .cp-toolbar-new {
+/*
+            // XXX
             background-color: rgba(0,0,0,0.2);
             &:hover {
                 background-color: rgba(0,0,0,0.3);
             }
+ */
+
             text-align: center;
             font-size: 32px;
             &> button {
@@ -890,7 +834,7 @@
                 width: 64px;
                 font-size: 1em;
                 color: inherit;
-                height: 64px;
+                height: @toolbar_top-height;
                 padding: 0px;
                 margin: 0;
                 &::before {
@@ -899,7 +843,6 @@
                     padding-top: 4px;
                 }
                 &:hover {
-                    background-color: initial;
                     border-color: transparent;
                 }
                 span {
@@ -940,10 +883,15 @@
             align-items: center;
             justify-content: center;
             cursor: pointer;
+/*
+// XXX
             background-color: rgba(0,0,0,0.4);
             &:hover {
                 background-color: rgba(0,0,0,0.5);
             }
+ */
+
+
             order: 1;
             .fa {
                 margin: 0;
@@ -955,6 +903,13 @@
                 height: auto;
                 padding: 10px;
 
+                svg {
+                    * {
+                        fill: @toolbar-bg-color;
+                        fill: var(--toolbar-bg-color);
+                    }
+                }
+
                 img {
                     cursor: pointer;
                     height: 100%;
@@ -967,7 +922,11 @@
             display: inline-flex;
             order: 6;
             line-height: @toolbar_top-height;
-            color: white;
+/*
+// XXX
+ color: white;
+ */
+
             .cp-toolbar-notifications { order: 1; }
             .cp-toolbar-new { order: 2; }
             .cp-toolbar-user-dropdown { order: 3; }
@@ -980,16 +939,20 @@
             .cp-toolbar-user-dropdown {
                 z-index: 10000; //Z cp-toolbar-user-dropdown
                 //margin-left: 20px;
-                height: 64px;
+                height: @toolbar_top-height;
                 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);
                 }
+ */
+
                 .cp-dropdown-content {
                     margin: 0;
                     overflow: visible;
@@ -998,7 +961,7 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    height: 64px;
+                    height: @toolbar_top-height;
                     width: 64px;
                     padding: 0;
                     span {
@@ -1037,6 +1000,58 @@
         }
     }
 
+    .cp-toolbar-bottom {
+        background-color: @toolbar-bg-color-l8;
+        background-color: var(--toolbar-bg-color-l8);
+        color: #FFF; // XXX
+        button:hover, button.cp-toolbar-button-active {
+            background-color: @toolbar-bg-color;
+            background-color: var(--toolbar-bg-color);
+        }
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 100%;
+        flex: 1 1 auto;
+        &:empty {
+            height: 0;
+        }
+        .cp-toolbar-users {
+            pre {
+                /* needed for ckeditor */
+                white-space: pre;
+                margin: 5px 0px;
+            }
+        }
+        button {
+            margin: 0px;
+            border-radius: 0;
+            height: 100%;
+        }
+        .cp-dropdown-content {
+            margin-top: -1px;
+        }
+
+        & > span {
+            height: @toolbar_line-height;
+        }
+
+
+        .cp-toolbar-bottom-left {
+            order: 1;
+        }
+        .cp-toolbar-bottom-mid {
+            order: 2;
+        }
+        .cp-toolbar-bottom-right {
+            order: 3;
+            display: flex;
+            #cp-toolbar-chat-drawer-open { order: 0; }
+            #cp-toolbar-userlist-drawer-open { order: 1; }
+        }
+    }
+
     .cp-toolbar-leftside {
         //height: @toolbar_line-height;
         &:empty {
@@ -1188,13 +1203,17 @@
         }
     }
     .cp-toolbar-spinner {
-        line-height: @toolbar_line-height;
-        padding: 0 20px;
+        color: @cryptpad_text_col;
+        font-size: 14px;
+        padding: 0 8px;
+        height: 20px;
+        line-height: 20px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         min-width: 200px;
         box-sizing: border-box;
+        margin-bottom: 5px;
         &> span.fa {
             height: 20px;
             width: 20px;
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index fe28eb6d0..d364512b6 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -21,6 +21,24 @@ define([
              Messages, AppConfig, Pages, NThen, InviteInner, Visible) {
     var UIElements = {};
 
+    UIElements.getSvgLogo = function () {
+        var svg = (function(){/*
+<svg width="45" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <path d="m22.422 1.4356-14.641 2.7035c-0.51734-0.36799-1.1561-0.57696-1.8393-0.57696a3.1356 3.1339 0 0 0-3.1373 3.1355 3.1602 3.1585 0 0 0 1.6227 2.7575v21.103c0 1.9871 0.88906 4.1328 2.6508 6.3801 1.5602 1.9878 3.7668 4.027 6.5635 6.0547 1.9912 1.4389 3.9942 2.6545 5.6782 3.6005a3.1431 3.1413 0 0 0 5.9855 0.12499c1.7264-0.96163 3.8202-2.224 5.8986-3.7254 2.7979-2.0277 5.0033-4.0668 6.5635-6.0547 1.7624-2.2501 2.6508-4.393 2.6508-6.3801v-21.12c0.95814-0.53813 1.622-1.5642 1.622-2.74 0-1.733-1.4213-3.1355-3.1556-3.1355a3.1075 3.1059 0 0 0-1.8028 0.57696zm-0.03584 3.118 13.379 2.4687c0.01952 0.19629 0.03611 0.37448 0.08998 0.55867l-7.8432 5.1004c-1.4028-1.5215-3.4192-2.4877-5.6439-2.4877-2.2404 0-4.2687 0.98212-5.6797 2.5235l-7.7539-5.028c0.071056-0.21736 0.10472-0.44988 0.12659-0.68519zm14.426 4.4869c0.2616 0.22946 0.5738 0.4256 0.90137 0.55867v20.526c0 0.27043-0.02367 0.55955-0.07169 0.84677-0.31548 1.2546-1.0076 2.5682-2.0734 3.9289-1.3362 1.7018-3.231 3.4367-5.6264 5.172-1.9203 1.3873-3.8601 2.5452-5.3983 3.3932a3.1431 3.1413 0 0 0-4.3574-0.06325c-1.5186-0.84169-3.4128-1.979-5.2825-3.3299-2.3934-1.7353-4.2716-3.4702-5.6072-5.172-1.2729-1.6234-2.017-3.1789-2.2176-4.6492v-20.616c0.31859-0.12253 0.60591-0.30939 0.86477-0.52285l9.9357 6.3976a5.0789 5.0761 0 0 1 4.4893-2.685c1.9639 0 3.6499 1.0816 4.4901 2.7027zm-21.812 6.6849c-0.20732 0.69421-0.33324 1.4177-0.33324 2.1767 0 2.1872 0.94799 4.1262 2.4242 5.5287l-2.7125 5.4541c-0.01034-1.35e-4 -0.02017-0.0015-0.03051-0.0015-1.2807 0-2.3266 1.045-2.3266 2.3246 0 1.2799 1.046 2.3063 2.3266 2.3063a2.3009 2.2996 0 0 0 1.7349-0.78198h3.999v-2.6119h-3.3974l3.1938-6.4136c0.27643-0.55529 0.08702-1.2992-0.42094-1.6546-1.3154-0.91704-2.178-2.4154-2.178-4.1499 0-0.22399 0.03023-0.43738 0.05796-0.65318zm14.737 0.01524-2.3518 1.5372c0.02538 0.20682 0.04347 0.40998 0.04347 0.62422 0 1.7288-0.83863 3.2165-2.149 4.1356-0.50796 0.3555-0.69738 1.0994-0.42094 1.6546l3.1655 6.4281h-3.3829v2.6112h4.1363c0.42696 0.47986 1.0501 0.78274 1.744 0.78274a2.3009 2.2996 0 0 0 2.3076-2.3056c0-1.2799-1.0273-2.3253-2.3076-2.3253-0.05792 0-0.1147 0.0049-0.17158 0.0092l-2.7186-5.4769c1.4697-1.401 2.4106-3.3321 2.4106-5.5143 0-0.74898-0.10409-1.475-0.30503-2.1607zm-7.4398 0.2477a2.1129 2.1118 0 0 0-2.078 2.1111 2.1132 2.1119 0 1 0 4.2262 0 2.1129 2.1118 0 0 0-2.1482-2.1111z" style="stroke-width:1.2608"/>
+</svg>
+*/}).toString().slice(14,-3);
+        return svg;
+    };
+
     UIElements.prettySize = function (bytes) {
         var kB = Util.bytesToKilobytes(bytes);
         if (kB < 1024) { return kB + Messages.KB; }
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index e2be585d1..f2edb7c7c 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -24,6 +24,10 @@ MessengerUI, Messages) {
     // Toolbar parts
     var TOOLBAR_CLS = Bar.constants.toolbar = 'cp-toolbar';
     var TOP_CLS = Bar.constants.top = 'cp-toolbar-top';
+    var BOTTOM_CLS = Bar.constants.bottom = 'cp-toolbar-bottom';
+    var BOTTOM_LEFT_CLS = Bar.constants.bottomL = 'cp-toolbar-bottom-left';
+    var BOTTOM_MID_CLS = Bar.constants.bottomM = 'cp-toolbar-bottom-mid';
+    var BOTTOM_RIGHT_CLS = Bar.constants.bottomR = 'cp-toolbar-bottom-right';
     var LEFTSIDE_CLS = Bar.constants.leftside = 'cp-toolbar-leftside';
     var RIGHTSIDE_CLS = Bar.constants.rightside = 'cp-toolbar-rightside';
     var DRAWER_CLS = Bar.constants.drawer = 'cp-toolbar-drawer-content';
@@ -77,10 +81,19 @@ MessengerUI, Messages) {
         $('<span>', {'class': NEWPAD_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
         $('<span>', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
 
+        /*
         $toolbar.append($topContainer)
         .append($('<div>', {'class': LEFTSIDE_CLS}))
         .append($('<div>', {'class': RIGHTSIDE_CLS}))
         .append($('<div>', {'class': HISTORY_CLS}));
+        */
+        $toolbar.append($topContainer);
+        var $bottom = $(h('div.'+BOTTOM_CLS, [
+            h('div.'+BOTTOM_LEFT_CLS),
+            h('div.'+BOTTOM_MID_CLS),
+            h('div.'+BOTTOM_RIGHT_CLS)
+        ])).appendTo($toolbar);
+        $toolbar.append(h('div.'+HISTORY_CLS));
 
         var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
         if (!config.hideDrawer) {
@@ -398,7 +411,7 @@ MessengerUI, Messages) {
         var $button = $('<button>').appendTo($container);
         $('<span>',{'class': 'cp-dropdown-button-title'}).appendTo($button);
 
-        toolbar.$leftside.prepend($container);
+        toolbar.$bottomR.prepend($container);
 
         if (config.$contentContainer) {
             config.$contentContainer.prepend($content);
@@ -465,7 +478,7 @@ MessengerUI, Messages) {
         var $button = $('<button>', {'class': 'fa fa-comments'}).appendTo($container);
         $('<span>',{'class': 'cp-dropdown-button-title'}).appendTo($button);
 
-        toolbar.$leftside.prepend($container);
+        toolbar.$bottomR.prepend($container);
 
         if (config.$contentContainer) {
             config.$contentContainer.prepend($content);
@@ -812,9 +825,12 @@ MessengerUI, Messages) {
             href: href,
             title: buttonTitle,
             'class': "cp-toolbar-link-logo"
-        }).append($('<img>', {
-            src: '/customize/images/logo_white.png?' + ApiConfig.requireConf.urlArgs
-        }));
+        }).append(UIElements.getSvgLogo());
+        
+        /*.append($('<img>', {
+            //src: '/customize/images/logo_white.png?' + ApiConfig.requireConf.urlArgs
+            src: '/customize/main-favicon.png?' + ApiConfig.requireConf.urlArgs
+        }));*/
         var onClick = function (e) {
             e.preventDefault();
             if (e.ctrlKey) {
@@ -867,7 +883,7 @@ MessengerUI, Messages) {
         };
     };
     var createSpinner = function (toolbar, config) {
-        var $spin = $('<span>', {'class': SPINNER_CLS}).appendTo(toolbar.$leftside);
+        var $spin = $('<span>', {'class': SPINNER_CLS}).appendTo(toolbar.title);
         $spin.text(Messages.synchronizing);
 
         if (config.realtime) {
@@ -1207,6 +1223,10 @@ MessengerUI, Messages) {
         toolbar.firstConnection = true;
 
         var $toolbar = toolbar.$toolbar = createRealtimeToolbar(config);
+        toolbar.$bottom = $toolbar.find('.'+Bar.constants.bottom);
+        toolbar.$bottomL = $toolbar.find('.'+Bar.constants.bottomL);
+        toolbar.$bottomM = $toolbar.find('.'+Bar.constants.bottomM);
+        toolbar.$bottomR = $toolbar.find('.'+Bar.constants.bottomR);
         toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
         toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
         toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);