diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 730cb8d64..ee435c19a 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -863,7 +863,7 @@ color: var(--toolbar-bg-color);
                 position: relative;
                 .cp-dropdown-button-title {
                     position: absolute;
-                    bottom: 0;
+                    bottom: 10px;
                     right: 0;
                     font-size: 14px;
                     border: 1px solid;
@@ -1025,12 +1025,13 @@ color: var(--toolbar-bg-color);
             }
         }
         button {
+            position: relative;
             margin: 0px;
             border-radius: 0;
             height: @toolbar_line-height;
             display: inline-flex;
             align-items: center;
-            .fa {
+            .fa, .cptools {
                 margin-right: 5px;
             }
         }
@@ -1044,6 +1045,7 @@ color: var(--toolbar-bg-color);
 
 
         .cp-toolbar-bottom-left {
+            display: flex;
             order: 1;
         }
         .cp-toolbar-bottom-mid {
@@ -1064,7 +1066,8 @@ color: var(--toolbar-bg-color);
                 box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
                 position: absolute;
                 left: 0px;
-                margin-top: @toolbar_line-height;
+                top: @toolbar_line-height;
+                margin: -1px;
                 min-width: 50px;
                 background: @colortheme_dropdown-bg;
                 display: flex;
@@ -1083,6 +1086,7 @@ color: var(--toolbar-bg-color);
                     border: 0;
                 }
                 button {
+                    white-space: nowrap;
                     padding: 5px 16px;
                     text-align: left;
                     margin: 0;
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index ee2889745..6a54b8f07 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1513,16 +1513,20 @@ define([
                 });
                 break;
             case 'present':
-                button = $('<button>', {
-                    title: Messages.presentButtonTitle,
-                    'class': "fa fa-play-circle cp-toolbar-icon-present", // used in slide.js
-                });
+                button = $(h('button', {
+                    title: Messages.presentButtonTitle, // XXX remove tippy?
+                }, [
+                    h('i.fa.fa-play-circle'),
+                    h('span.cp-toolbar-name', Messages.share_linkPresent)
+                ])).click(common.prepareFeedback(type));
                 break;
             case 'preview':
-                button = $('<button>', {
-                    title: Messages.previewButtonTitle,
-                    'class': "fa fa-eye cp-toolbar-icon-preview",
-                });
+                button = $(h('button', {
+                    title: Messages.previewButtonTitle, // XXX remove tippy?
+                }, [
+                    h('i.fa.fa-eye'),
+                    h('span.cp-toolbar-name', Messages.share_linkOpen)
+                ])).click(common.prepareFeedback(type));
                 break;
             case 'print':
                 button = $('<button>', {
@@ -1555,11 +1559,13 @@ define([
                 }
                 break;
             case 'mediatag':
-                button = $('<button>', {
-                    'class': 'fa fa-picture-o cp-toolbar-icon-mediatag',
-                    title: Messages.filePickerButton,
-                })
-                .click(common.prepareFeedback(type));
+                Messages.toolbar_insert = "Insert"; // XXX
+                button = $(h('button', {
+                    title: Messages.filePickerButton, // XXX remove tippy?
+                }, [
+                    h('i.fa.fa-picture-o'),
+                    h('span.cp-toolbar-name', Messages.toolbar_insert)
+                ])).click(common.prepareFeedback(type));
                 break;
             case 'savetodrive':
                 button = $('<button>', {
@@ -1584,9 +1590,14 @@ define([
                 });
                 break;
             case 'toggle':
-                button = $('<button>', {
-                    'class': 'fa fa-caret-down cp-toolbar-icon-toggle',
-                });
+                Messages.toolbar_tools = "Tools"; // XXX
+                button = $(h('button', {
+                    title: data.title || '', // XXX remove tippy?
+                }, [
+                    h('i.fa.fa-wrench'),
+                    h('span.cp-toolbar-name', Messages.toolbar_tools)
+                ])).click(common.prepareFeedback(type));
+                /*
                 window.setTimeout(function () {
                     button.attr('title', data.title);
                 });
@@ -1595,6 +1606,7 @@ define([
                     if (!isVisible) { button.addClass('fa-caret-down'); }
                     else { button.addClass('fa-caret-up'); }
                 };
+                */
                 button.click(function (e) {
                     data.element.toggle();
                     var isVisible = data.element.is(':visible');
@@ -1606,9 +1618,9 @@ define([
                         button.removeClass('cp-toolbar-button-active');
                         if (e.originalEvent) { Feedback.send('TOGGLE_HIDE_' + appType); }
                     }
-                    updateIcon(isVisible);
+                    //updateIcon(isVisible);
                 });
-                updateIcon(data.element.is(':visible'));
+                //updateIcon(data.element.is(':visible'));
                 break;
             case 'properties':
                 button = $('<button>', {
@@ -1638,25 +1650,21 @@ define([
             default:
                 data = data || {};
                 var icon = data.icon || "fa-question";
-                button = $('<button>', {
-                    'class': "fa " + icon,
-                })
-                .click(common.prepareFeedback(data.name || 'DEFAULT'));
-                //.click(common.prepareFeedback(type));
+                button = $(h('button', {
+                    title: data.title || '', // XXX remove tippy?
+                }, [
+                    h('i.fa.' + icon),
+                    h('span.cp-toolbar-name.cp-toolbar-drawer-element', data.text)
+                ])).click(common.prepareFeedback(data.name || 'DEFAULT'));
                 if (callback) {
                     button.click(callback);
                 }
-                if (data.title) { button.attr('title', data.title); }
                 if (data.style) { button.attr('style', data.style); }
                 if (data.id) { button.attr('id', data.id); }
                 if (data.hiddenReadOnly) { button.addClass('cp-hidden-if-readonly'); }
                 if (data.name) {
                     button.addClass('cp-toolbar-icon-'+data.name);
                 }
-                if (data.text) {
-                    $('<span>', {'class': 'cp-toolbar-drawer-element'}).text(data.text)
-                        .appendTo(button);
-                }
         }
         if (rightside) {
             button.addClass('cp-toolbar-rightside-button');
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 546e3cd37..e690bfb08 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -526,7 +526,7 @@ define([
                     mediaTagEmbedder($('<media-tag src="' + src +
                         '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'), data);
                 });
-            }).appendTo(toolbar.$rightside).hide();
+            }).appendTo(toolbar.$bottomL).hide();
         };
         var setMediaTagEmbedder = function (mte, filter) {
             if (!common.isLoggedIn()) { return; }
@@ -691,21 +691,21 @@ define([
                     getTitle: function () { return cpNfInner.metadataMgr.getMetadata().title; }
                 };
                 var $templateButton = common.createButton('template', true, templateObj);
-                toolbar.$rightside.append($templateButton);
+                toolbar.$drawer.append($templateButton);
             }
 
             var $importTemplateButton = common.createButton('importtemplate', true);
             toolbar.$drawer.append($importTemplateButton);
 
             /* add a forget button */
-            toolbar.$rightside.append(common.createButton('forget', true, {}, function (err) {
+            toolbar.$drawer.append(common.createButton('forget', true, {}, function (err) {
                 if (err) { return; }
                 stateChange(STATE.FORGOTTEN);
             }));
 
             if (common.isLoggedIn()) {
                 var $tags = common.createButton('hashtag', true);
-                toolbar.$rightside.append($tags);
+                toolbar.$drawer.append($tags);
             }
 
             var $properties = common.createButton('properties', true);
diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js
index e6ed9ded2..c1b2f6ab5 100644
--- a/www/common/sframe-common-codemirror.js
+++ b/www/common/sframe-common-codemirror.js
@@ -188,15 +188,13 @@ define([
 
         var Title;
         var onLocal = function () {};
-        var $rightside;
         var $drawer;
         exp.init = function (local, title, toolbar) {
             if (typeof local === "function") {
                 onLocal = local;
             }
             Title = title;
-            $rightside = toolbar.$rightside;
-            $drawer = toolbar.$drawer;
+            $drawer = toolbar.$theme || $();
         };
 
         var editor = exp.editor = CMeditor.fromTextArea($textarea[0], {
@@ -355,10 +353,10 @@ define([
                         content: l.name // Pretty name of the language value
                     });
                 });
+                Messages.code_editorTheme = "Editor theme";
                 var dropdownConfig = {
-                    text: 'Theme', // Button initial text
+                    text: Messages.code_editorTheme, // Button initial text
                     options: options, // Entries displayed in the menu
-                    left: true, // Open to the left of the button
                     isSelect: true,
                     initialValue: lastTheme,
                     feedback: 'CODE_THEME',
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index f46a5cc31..5e1c2cb55 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -30,6 +30,7 @@ MessengerUI, Messages) {
     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 FILE_CLS = Bar.constants.file = 'cp-toolbar-file';
     var DRAWER_CLS = Bar.constants.drawer = 'cp-toolbar-drawer-content';
     var HISTORY_CLS = Bar.constants.history = 'cp-toolbar-history';
 
@@ -93,14 +94,14 @@ MessengerUI, Messages) {
 
         Messages.toolbar_file = "File"; // XXX
         if (!config.hideDrawer) {
+            var $drawer = $(h('button.' + FILE_CLS, [
+                h('i.fa.fa-file-o'),
+                h('span.cp-button-name', Messages.toolbar_file)
+            ])).appendTo($file).hide();
             var $drawerContent = $('<div>', {
                 'class': DRAWER_CLS,
                 'tabindex': 1
-            }).appendTo($file).hide();
-            var $drawer = $(h('button', [
-                h('i.fa.fa-file-o'),
-                h('span.cp-button-name', Messages.toolbar_file)
-            ])).appendTo($file);
+            }).appendTo($drawer).hide();
             $drawer.click(function () {
                 $drawerContent.toggle();
                 $drawer.removeClass('cp-toolbar-button-active');
@@ -1248,6 +1249,7 @@ MessengerUI, Messages) {
         toolbar.$bottomR = $toolbar.find('.'+Bar.constants.bottomR);
         toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
         toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
+        toolbar.$file = $toolbar.find('.'+Bar.constants.file);
         toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);
         toolbar.$top = $toolbar.find('.'+Bar.constants.top);
         toolbar.$history = $toolbar.find('.'+Bar.constants.history);
@@ -1275,6 +1277,7 @@ MessengerUI, Messages) {
         tb['notifications'] = createNotifications;
 
         tb['pad'] = function () {
+            toolbar.$file.show();
             addElement([
                 'chat', 'userlist', 'title', 'useradmin', 'spinner',
                 'newpad', 'share', 'access', 'limit', 'unpinnedWarning',
diff --git a/www/slide/inner.js b/www/slide/inner.js
index 5736828d5..eca5aadac 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -9,6 +9,7 @@ define([
     '/common/common-util.js',
     '/common/common-hash.js',
     '/common/common-interface.js',
+    '/common/hyperscript.js',
     '/customize/messages.js',
     'cm/lib/codemirror',
 
@@ -53,6 +54,7 @@ define([
     Util,
     Hash,
     UI,
+    h,
     Messages,
     CMeditor)
 {
@@ -88,7 +90,7 @@ define([
             $previewButton.addClass('cp-toolbar-button-active');
             Slide.updateFontSize();
         });
-        framework._.toolbar.$rightside.append($previewButton);
+        framework._.toolbar.$bottomM.append($previewButton);
 
         framework._.sfCommon.getPadAttribute('previewMode', function (e, data) {
             if (e) { return void console.error(e); }
@@ -98,6 +100,39 @@ define([
         });
     };
 
+    var mkThemeButton = function (framework) {
+        Messages.toolbar_theme = "Theme";
+        var $theme = $(h('button', [
+            h('i.cptools.cptools-palette'),
+            h('span.cp-button-name', Messages.toolbar_theme)
+        ]));
+        var $content = $(h('div.cp-toolbar-drawer-content', {
+            tabindex: 1
+        })).hide();
+        $theme.click(function () {
+            $content.toggle();
+            $theme.removeClass('cp-toolbar-button-active');
+            if ($content.is(':visible')) {
+                $theme.addClass('cp-toolbar-button-active');
+                $content.focus();
+            }
+        });
+        var onBlur = function (e) {
+            if (e.relatedTarget) {
+                if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
+                if ($(e.relatedTarget).parents('.cp-toolbar-drawer-content').length) {
+                    $(e.relatedTarget).blur(onBlur);
+                    return;
+                }
+            }
+            $theme.removeClass('cp-toolbar-button-active');
+            $content.hide();
+        };
+        $content.blur(onBlur).appendTo($theme);
+        framework._.toolbar.$theme = $content;
+        framework._.toolbar.$bottomL.append($theme);
+    };
+
     var mkPrintButton = function (framework, editor, $content, $print) {
         var $printButton = framework._.sfCommon.createButton('print', true);
         $printButton.click(function () {
@@ -302,7 +337,7 @@ define([
         $optionsButton.click(function () {
             $('body').append(createPrintDialog());
         });
-        framework._.toolbar.$drawer.append($optionsButton);
+        framework._.toolbar.$theme.append($optionsButton);
 
         metadataMgr.onChange(function () {
             var md = metadataMgr.getMetadata();
@@ -322,12 +357,12 @@ define([
                 textColor = text;
                 $modal.css('color', text);
                 $modal.css('border-color', text);
-                $('#' + SLIDE_COLOR_ID).css('color', text);
+                $('#' + SLIDE_COLOR_ID).find('i').css('color', text);
             }
             if (back) {
                 backColor = back;
                 $modal.css('background-color', back);
-                $('#' + SLIDE_BACKCOLOR_ID).css('color', back);
+                $('#' + SLIDE_BACKCOLOR_ID).find('i').css('color', back);
             }
         };
         var updateLocalColors = function (text, back) {
@@ -339,20 +374,22 @@ define([
             framework.localChange();
         };
 
+        Messages.slide_backCol = "Background color"; // XXX
         var $back = framework._.sfCommon.createButton(null, true, {
             icon: 'fa-square',
+            text: Messages.slide_backCol,
             title: Messages.backgroundButtonTitle,
             hiddenReadOnly: true,
             name: 'background',
-            style: 'color: #000;',
             id: SLIDE_BACKCOLOR_ID
         });
+        Messages.slide_textCol = "Text color"; // XXX
         var $text = framework._.sfCommon.createButton(null, true, {
             icon: 'fa-i-cursor',
+            text: Messages.slide_textCol,
             title: Messages.colorButtonTitle,
             hiddenReadOnly: true,
             name: 'color',
-            style: 'font-weight: bold; color: #FFF;',
             id: SLIDE_COLOR_ID
         });
         var $testColor = $('<input>', { type: 'color', value: '!' });
@@ -377,7 +414,7 @@ define([
             $foregroundPicker.click();
         });
 
-        framework._.toolbar.$rightside.append($text).append($back);
+        framework._.toolbar.$theme.append($text).append($back);
 
         metadataMgr.onChange(function () {
             var md = metadataMgr.getMetadata();
@@ -405,7 +442,7 @@ define([
         var $codeMirrorContainer = $('#cp-app-slide-editor-container');
         var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
         $codeMirrorContainer.prepend(markdownTb.toolbar);
-        framework._.toolbar.$rightside.append(markdownTb.button);
+        framework._.toolbar.$bottomL.append(markdownTb.button);
     };
 
     var mkHelpMenu = function (framework) {
@@ -451,6 +488,7 @@ define([
 
         activateLinks($content, framework);
         Slide.setModal(framework._.sfCommon, $modal, $content, slideOptions, Messages.slideInitialState);
+        mkThemeButton(framework);
         mkPrintButton(framework, editor, $content, $print);
         mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
         mkColorConfiguration(framework, $modal);
@@ -534,7 +572,7 @@ define([
         Slide.setTitle(framework._.title);
 
         var enterPresentationMode = function () { Slide.show(true, editor.getValue()); };
-        framework._.toolbar.$rightside.append(
+        framework._.toolbar.$bottomM.append(
             framework._.sfCommon.createButton('present', true).click(enterPresentationMode)
         );
         if (isPresentMode) { enterPresentationMode(); }