diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index 07117b0f9..1f5aee211 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -164,6 +164,7 @@
 @cp_buttons-hover: @cryptpad_color_brand_fadest;
 @cp_buttons-default: @cryptpad_color_grey_700;
 @cp_buttons-default-color: @cryptpad_text_col;
+@cp_buttons-default-alt-color: @cryptpad_color_grey_700;
 @cp_buttons-default-border: @cryptpad_text_col;
 @cp_buttons-red: #E55236;
 @cp_buttons-red-text: @cryptpad_color_light_red;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index faaca5285..ece9f6fe0 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -164,6 +164,7 @@
 @cp_buttons-default: #CCC;
 @cp_buttons-default-color: @cryptpad_text_col;
 @cp_buttons-default-border: @cryptpad_text_col;
+@cp_buttons-default-alt-color: @cryptpad_color_grey_50;
 @cp_buttons-red: #E55236;
 @cp_buttons-red-text: @cp_buttons-red;
 @cp_buttons-red-color: #FFF;
diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 3c0b206db..745d24ab0 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -199,6 +199,16 @@
                 background-color: @cp_buttons-default;
             }
         }
+        &.btn-default-alt {
+            border-color: @cp_buttons-default-alt-color;
+            color: @cp_buttons-default-alt-color;
+            background-color: @cp_buttons-default-color;
+            &:hover, &:not(:disabled):active, &:focus {
+                border-color: @cp_buttons-default-color;
+                color: @cp_buttons-default-color;
+                background-color: @cp_toolbar-fade3;
+            }
+        }
 
         &.danger, &.btn-danger {
             background-color: @cp_buttons-red;
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 86e1052b5..b050791b7 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -145,6 +145,17 @@
         margin-bottom: 15px;
     }
 
+    .cp-kanban-toggle-container.cp-kanban-container-flex {
+        flex: 1;
+    }
+    .cp-kanban-toggle-tags {
+        text-transform: unset;
+        margin-right: 0.5rem;
+        padding: 3px 10px;
+        span {
+            font: @colortheme_app-font;
+        }
+    }
     #cp-kanban-edit-tags {
         .tokenfield {
             margin: 0;
@@ -152,10 +163,6 @@
         }
         margin-bottom: 15px;
     }
-    .kanban-tag-btn-toggle {
-        margin-top: 10px;
-        margin-left: 10px
-    }
     #cp-app-kanban-container {
         flex: 1;
         display: flex;
@@ -430,12 +437,10 @@
         justify-content: space-between;
         position: relative;
         min-height: 50px;
+        align-items: center;
         .cp-kanban-filterTags {
             @media (min-width: 505px) {
                 display: inline-flex;
-                .kanban-tag-btn-toggle {
-                    margin-right: 10px;
-                }
             }
             align-items: center;
             flex: 1;
@@ -449,16 +454,8 @@
                 }
                 flex-flow: column;
                 flex-shrink: 0;
-                & > * {
-                    visibility: hidden;
-                }
                 & > span {
                     display: inline-block;
-                    height: 38px;
-                    line-height: 38px;
-                }
-                & > button {
-                    margin-top: -38px;
                 }
             }
             button.cp-kanban-filterTags-reset {
@@ -571,7 +568,7 @@
             display: flex;
             min-height: 0;
             .kanban-container {
-                padding: 30px 5px;
+                padding: 0px 5px;
                 flex: 1;
                 display: flex;
                 max-height: 100%;
@@ -700,6 +697,15 @@
             }
         }
 
+        @media (pointer: none), (pointer:coarse) {
+            .kanban-container-outer {
+                .kanban-container {
+                    padding: 30px 5px;
+                }
+            }
+        }
+
+
         &.cp-app-readonly {
             .kanban-item, .kanban-title-board {
                 cursor: default !important;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 59356c500..ffe9405fe 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -943,18 +943,15 @@ define([
                 //framework._.sfCommon.setPadAttribute('quickMode', false);
             });
 
-            var toggleTagsButton = h('button.btn.btn-default.kanban-tag-btn-toggle', Messages.kanban_showTags);
-
             // Tags filter
             var existing = getExistingTags(kanban.options.boards);
             var list = h('div.cp-kanban-filterTags-list');
-            var reset = h('button.btn.btn-cancel.cp-kanban-filterTags-reset', [
+            var reset = h('button.btn.btn-cancel.cp-kanban-filterTags-reset.cp-kanban-toggle-tags', [
                 h('i.fa.fa-times'),
-                Messages.kanban_clearFilter
+                h('span', Messages.kanban_clearFilter)
             ]);
             var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags);
             var tags = h('div.cp-kanban-filterTags', [
-
                 h('span.cp-kanban-filterTags-toggle', [
                     hint,
                     reset,
@@ -967,8 +964,16 @@ define([
             var $hint = $(hint);
 
             var setTagFilterState = function (bool) {
+                //$hint.toggle(!bool);
+                //$reset.toggle(!!bool);
                 $hint.css('visibility', bool? 'hidden': 'visible');
+                $hint.css('height', bool ? 0 : '');
+                $hint.css('padding-top', bool ? 0 : '');
+                $hint.css('padding-bottom', bool ? 0 : '');
                 $reset.css('visibility', bool? 'visible': 'hidden');
+                $reset.css('height', !bool ? 0 : '');
+                $reset.css('padding-top', !bool ? 0 : '');
+                $reset.css('padding-bottom', !bool ? 0 : '');
             };
             setTagFilterState();
 
@@ -1035,41 +1040,47 @@ define([
                 commitTags();
             });
 
+            let toggleTagsButton = h('button.btn.btn-default.cp-kanban-toggle-tags', [
+                h('i.fa.fa-tags'),
+                h('span', Messages.fm_tagsName)
+            ]);
+            let toggleContainer = h('div.cp-kanban-toggle-container', toggleTagsButton);
 
-            if ($(window).width() < 500) {
+            let toggleClicked = false;
+            let $tags = $(tags);
+            let toggle = () => {
+                $tags.toggle();
+                let visible = $tags.is(':visible');
+                $(toggleContainer).toggleClass('cp-kanban-container-flex', !visible);
+                $toggleBtn.toggleClass('btn-default', visible);
+                $toggleBtn.toggleClass('btn-default-alt', !visible);
+            };
+            let $toggleBtn = $(toggleTagsButton).click(function() {
+                toggleClicked = true;
+                toggle();
+            });
 
-                $(tags).append(toggleTagsButton);
-
-                var hideTags = function () {
-                    for (var tag of list.children) {
-                        if (existing.indexOf(tag.innerHTML) > 10) {
-                            $(tag).hide();                    
-                        }
+            const resizeTags = () => {
+                if (toggleClicked) { return; }
+                let visible = $tags.is(':visible');
+                // Small screen and visible: hide
+                if ($(window).width() < 600) {
+                    if (visible) {
+                        $(tags).show();
+                        toggle();
                     }
-                };
-                hideTags();
-    
-                var toggleTags = function () {
-                    for (var tag of list.children) {
-                        if (existing.indexOf(tag.innerHTML) > 10 && kanban.options.tags.indexOf(tag.innerHTML) === -1) {
-                            if ($(tag).is(":visible")) { 
-                                $(tag).hide();
-                                $(toggleTagsButton).text(Messages.kanban_showTags);
-                            } else {
-                                $(tag).show();
-                                $(toggleTagsButton).text(Messages.kanban_hideTags);
-                            }
-                        }
-                    }
-                };
-    
-                $(toggleTagsButton).click(function() {
-                    toggleTags();
-                });
-    
-            }
+                    return;
+                }
+                // Large screen: make visible by default
+                if (visible) { return; }
+                $(tags).hide();
+                toggle();
+            };
+
+            $(window).on('resize', resizeTags);
 
             var container = h('div#cp-kanban-controls', [
+                toggleContainer,
                 tags,
                 h('div.cp-kanban-changeView', [
                     small,
@@ -1078,18 +1089,6 @@ define([
             ]);
             $container.before(container);
 
-            var common = framework._.sfCommon;
-            var $button = common.createButton('toggle', true, {
-                element: $(container),
-                icon: 'fa-tags',
-                text: Messages.fm_tagsName,
-            }, function () {
-                $button.toggleClass('cp-toolbar-button-active');
-
-            });
-            $button.addClass('cp-toolbar-button-active');
-            framework._.toolbar.$bottomL.append($button);
-
             onRedraw.reg(function () {
                 // Redraw if new tags have been added to items
                 var old = Sortify(existing);