diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 31846b391..0aa9cdbdd 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -431,6 +431,10 @@
             }
         }
         .cp-toolbar-top {
+            &.toolbar-hidden {
+                display: none !important;
+            }
+
             @media screen and (max-width: @browser_media-medium-screen),
                    screen and (max-height: 500px) {
                 flex-wrap: wrap;
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index 785d1bc7e..bcb6c1683 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -455,6 +455,17 @@ MessengerUI, Messages, Pages) {
         return $container;
     };
 
+    createCollapse = function (toolbar) {
+        var $button = $(h('button', [
+            h('i.fa.fa-compress'),
+            h('span.cp-button-name', "COLLAPSE"), // XXX
+        ]));
+        toolbar.$bottomR.append($button);
+        $button.click(function () {
+            toolbar.$top.toggleClass('toolbar-hidden');
+        });
+    };
+
     var initChat = function (toolbar) {
         var $container = $('<div>', {
             id: 'cp-app-contacts-container',
@@ -1334,6 +1345,7 @@ MessengerUI, Messages, Pages) {
         // Create the subelements
         var tb = {};
         tb['userlist'] = createUserList;
+        tb['collapse'] = createCollapse; // XXX
         tb['chat'] = createChat;
         tb['share'] = createShare;
         tb['access'] = createAccess;
@@ -1355,6 +1367,7 @@ MessengerUI, Messages, Pages) {
         tb['pad'] = function () {
             toolbar.$file.show();
             addElement([
+                'collapse', // XXX
                 'chat', 'userlist', 'title', 'useradmin', 'spinner',
                 'newpad', 'share', 'access', 'limit', 'unpinnedWarning',
                 'notifications'