diff --git a/data/web/css/build/013-mailcow.css b/data/web/css/build/013-mailcow.css
index b4314132..ef4c92f7 100644
--- a/data/web/css/build/013-mailcow.css
+++ b/data/web/css/build/013-mailcow.css
@@ -78,7 +78,7 @@
 .btn-group-xs > .btn, .btn-xs {
   padding: .25rem .4rem;
   font-size: .875rem;
-  line-height: .5;
+  line-height: 1rem;
   border-radius: .2rem;
 }
 .icon-spin {
diff --git a/data/web/css/build/014-responsive.css b/data/web/css/build/014-responsive.css
new file mode 100644
index 00000000..a6a52cbd
--- /dev/null
+++ b/data/web/css/build/014-responsive.css
@@ -0,0 +1,203 @@
+.btn-xs-lg>.lang-sm:after {
+  margin-left: 4px;
+}
+
+.bootstrap-select {
+  max-width: 350px;
+}
+
+.card-login .apps .btn {
+  width: auto;
+  float: left;
+  margin-right: 10px;
+  margin-top: auto;
+}
+.card-login .apps .btn:hover {
+  margin-top: 1px !important;
+  border-bottom-width: 3px;
+}
+
+.responsive-tabs .nav-tabs {
+  display: none;
+}
+
+.dataTables_paginate.paging_simple_numbers .pagination {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 768px) {
+  .responsive-tabs .nav-tabs {
+      display: flex;
+  }
+
+  .responsive-tabs .card .card-body.collapse {
+      display: block;
+  }
+}
+
+
+@media (max-width: 767px) {
+  .responsive-tabs .tab-pane {
+      display: block !important;
+      opacity: 1;
+  }
+
+  .card-login .apps .btn {
+    width: 100%;
+    float: none;
+    margin-bottom: 10px;
+  }
+
+  .card-login .apps .btn {
+    border-bottom-width: 4px;
+  }
+
+  .xs-show {
+    display: block !important;
+  }
+
+  .recent-login-success {
+    font-size: 14px;
+    margin-top: 10px !important;
+  }
+  .pull-xs-right {
+  float: right !important;
+  }
+  .pull-xs-right .dropdown-menu {
+    right: 0;
+    left: auto;
+  }
+  .text-xs-left {
+    text-align: left;
+  }
+  .text-xs-bold {
+    font-weight: bold;
+  }
+  .text-xs-bold .small {
+    font-weight: normal;
+    text-align: justify;
+  }
+  .btn.d-block {
+    width: 100%;
+    white-space: normal;
+  }
+  .btn.btn-xs-half,
+  .btn.d-block.btn-xs-half {
+    width: 50%;
+  }
+  .btn.btn-xs-third,
+  .btn.d-block.btn-xs-third {
+    width: 33.33%;
+  }
+  .btn.btn-xs-quart,
+  .btn.d-block.btn-xs-quart {
+    width: 25%;
+  }
+  .btn.d-block.btn-sm,
+  .btn-xs-lg {
+    padding: .5rem 1rem;
+    line-height: 20px;
+  }
+  .input-xs-lg {
+    height: 47px;
+    padding: 13px 16px;
+  }
+  .btn-group:not(.input-group-btn) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .btn-group.nowrap {
+    flex-wrap: nowrap;
+  }
+  .btn-group.nowrap .dropdown-menu {
+    width: 100%;
+  }
+  .card-login .btn-group {
+    display: block;
+  }
+  .mass-actions-user .btn-group {
+    float: none;
+  }
+  div[class^='mass-actions'] .dropdown-menu,
+  .card-xs-lg .dropdown-menu,
+  .dropdown-menu.login {
+    width: 100%;
+  }
+  div[class^='mass-actions'] .btn-group .dropdown-menu {
+    top: 50%;
+  }
+  div[class^='mass-actions'] .btn-group .btn-group .dropdown-menu,
+  div.mass-actions-quarantine .btn-group .dropdown-menu,
+  .card-xs-lg .dropdown-menu {
+    top: 100%;
+  }
+  div[class^='mass-actions'] .dropdown-menu>li>a,
+  .card-xs-lg .dropdown-menu>li>a,
+  .dropdown-menu.login>li>a {
+    padding: 8px 20px;
+  }
+  div[class^='mass-actions'] .dropdown-header {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .top100 {
+    top: 100% !important;
+  }
+  .top33 {
+    top: 33% !important;
+  }
+  .footable-filtering .form {
+    width: 65%;
+  }
+  .btn-xs-lg>.lang-sm:after {
+    top: 1px;
+  }
+  .pagination {
+    margin-bottom: 5px;
+  }
+  .mass-actions-mailbox {
+    padding: 0;
+  }
+  .card-xs-lg .card-header {
+    height: 66px;
+    line-height: 47px;
+  }
+  .card-xs-lg .btn-group .btn {
+    padding-right: 5px;
+    padding-left: 5px;
+  }
+  .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+    width: 100%;
+  }
+  .btn-group:not(.bootstrap-select) {
+    width: auto !important;
+  }
+  .bootstrap-select {
+    max-width: 100%;
+  }
+  .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
+    margin-right: 14px;
+    white-space: normal;
+  }
+  .btn-group > .btn-group {
+    flex-basis: 100%;
+  }
+  .btn-group .btn {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn-group .btn i {
+    margin-right: 5px;
+  }
+  .card-login .btn-group .btn {
+    display: block !important;
+  }
+}
+
+@media (max-width: 350px) {
+  .mailcow-logo img {
+    max-width: 250px;
+  }
+}
diff --git a/data/web/js/build/006-notifications.min.js b/data/web/js/build/006-notifications.min.js
index 01e7f309..7837ea5b 100644
--- a/data/web/js/build/006-notifications.min.js
+++ b/data/web/js/build/006-notifications.min.js
@@ -1 +1 @@
-!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):jQuery)}(function(t){function s(s){var e=!1;return t('[data-notify="container"]').each(function(i,n){var a=t(n),o=a.find('[data-notify="title"]').text().trim(),r=a.find('[data-notify="message"]').html().trim(),l=o===t("<div>"+s.settings.content.title+"</div>").html().trim(),d=r===t("<div>"+s.settings.content.message+"</div>").html().trim(),g=a.hasClass("alert-"+s.settings.type);return l&&d&&g&&(e=!0),!e}),e}function e(e,n,a){var o={content:{message:"object"==typeof n?n.message:n,title:n.title?n.title:"",icon:n.icon?n.icon:"",url:n.url?n.url:"#",target:n.target?n.target:"-"}};a=t.extend(!0,{},o,a),this.settings=t.extend(!0,{},i,a),this._defaults=i,"-"===this.settings.content.target&&(this.settings.content.target=this.settings.url_target),this.animations={start:"webkitAnimationStart oanimationstart MSAnimationStart animationstart",end:"webkitAnimationEnd oanimationend MSAnimationEnd animationend"},"number"==typeof this.settings.offset&&(this.settings.offset={x:this.settings.offset,y:this.settings.offset}),(this.settings.allow_duplicates||!this.settings.allow_duplicates&&!s(this))&&this.init()}var i={element:"body",position:null,type:"info",allow_dismiss:!0,allow_duplicates:!0,newest_on_top:!1,showProgressbar:!1,placement:{from:"top",align:"right"},offset:20,spacing:10,z_index:1031,delay:5e3,timer:1e3,url_target:"_blank",mouse_over:null,animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},onShow:null,onShown:null,onClose:null,onClosed:null,icon_type:"class",template:'<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'};String.format=function(){for(var t=arguments[0],s=1;s<arguments.length;s++)t=t.replace(RegExp("\\{"+(s-1)+"\\}","gm"),arguments[s]);return t},t.extend(e.prototype,{init:function(){var t=this;this.buildNotify(),this.settings.content.icon&&this.setIcon(),"#"!=this.settings.content.url&&this.styleURL(),this.styleDismiss(),this.placement(),this.bind(),this.notify={$ele:this.$ele,update:function(s,e){var i={};"string"==typeof s?i[s]=e:i=s;for(var n in i)switch(n){case"type":this.$ele.removeClass("alert-"+t.settings.type),this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass("progress-bar-"+t.settings.type),t.settings.type=i[n],this.$ele.addClass("alert-"+i[n]).find('[data-notify="progressbar"] > .progress-bar').addClass("progress-bar-"+i[n]);break;case"icon":var a=this.$ele.find('[data-notify="icon"]');"class"===t.settings.icon_type.toLowerCase()?a.removeClass(t.settings.content.icon).addClass(i[n]):(a.is("img")||a.find("img"),a.attr("src",i[n]));break;case"progress":var o=t.settings.delay-t.settings.delay*(i[n]/100);this.$ele.data("notify-delay",o),this.$ele.find('[data-notify="progressbar"] > div').attr("aria-valuenow",i[n]).css("width",i[n]+"%");break;case"url":this.$ele.find('[data-notify="url"]').attr("href",i[n]);break;case"target":this.$ele.find('[data-notify="url"]').attr("target",i[n]);break;default:this.$ele.find('[data-notify="'+n+'"]').html(i[n])}var r=this.$ele.outerHeight()+parseInt(t.settings.spacing)+parseInt(t.settings.offset.y);t.reposition(r)},close:function(){t.close()}}},buildNotify:function(){var s=this.settings.content;this.$ele=t(String.format(this.settings.template,this.settings.type,s.title,s.message,s.url,s.target)),this.$ele.attr("data-notify-position",this.settings.placement.from+"-"+this.settings.placement.align),this.settings.allow_dismiss||this.$ele.find('[data-notify="dismiss"]').css("display","none"),(this.settings.delay<=0&&!this.settings.showProgressbar||!this.settings.showProgressbar)&&this.$ele.find('[data-notify="progressbar"]').remove()},setIcon:function(){"class"===this.settings.icon_type.toLowerCase()?this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon):this.$ele.find('[data-notify="icon"]').is("img")?this.$ele.find('[data-notify="icon"]').attr("src",this.settings.content.icon):this.$ele.find('[data-notify="icon"]').append('<img src="'+this.settings.content.icon+'" alt="Notify Icon" />')},styleDismiss:function(){this.$ele.find('[data-notify="dismiss"]').css({position:"absolute",right:"10px",top:"5px",zIndex:this.settings.z_index+2})},styleURL:function(){this.$ele.find('[data-notify="url"]').css({backgroundImage:"url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)",height:"100%",left:0,position:"absolute",top:0,width:"100%",zIndex:this.settings.z_index+1})},placement:function(){var s=this,e=this.settings.offset.y,i={display:"inline-block",margin:"0px auto",position:this.settings.position?this.settings.position:"body"===this.settings.element?"fixed":"absolute",transition:"all .5s ease-in-out",zIndex:this.settings.z_index},n=!1,a=this.settings;switch(t('[data-notify-position="'+this.settings.placement.from+"-"+this.settings.placement.align+'"]:not([data-closing="true"])').each(function(){e=Math.max(e,parseInt(t(this).css(a.placement.from))+parseInt(t(this).outerHeight())+parseInt(a.spacing))}),this.settings.newest_on_top===!0&&(e=this.settings.offset.y),i[this.settings.placement.from]=e+"px",this.settings.placement.align){case"left":case"right":i[this.settings.placement.align]=this.settings.offset.x+"px";break;case"center":i.left=0,i.right=0}this.$ele.css(i).addClass(this.settings.animate.enter),t.each(Array("webkit-","moz-","o-","ms-",""),function(t,e){s.$ele[0].style[e+"AnimationIterationCount"]=1}),t(this.settings.element).append(this.$ele),this.settings.newest_on_top===!0&&(e=parseInt(e)+parseInt(this.settings.spacing)+this.$ele.outerHeight(),this.reposition(e)),t.isFunction(s.settings.onShow)&&s.settings.onShow.call(this.$ele),this.$ele.one(this.animations.start,function(){n=!0}).one(this.animations.end,function(){s.$ele.removeClass(s.settings.animate.enter),t.isFunction(s.settings.onShown)&&s.settings.onShown.call(this)}),setTimeout(function(){n||t.isFunction(s.settings.onShown)&&s.settings.onShown.call(this)},600)},bind:function(){var s=this;if(this.$ele.find('[data-notify="dismiss"]').on("click",function(){s.close()}),this.$ele.mouseover(function(){t(this).data("data-hover","true")}).mouseout(function(){t(this).data("data-hover","false")}),this.$ele.data("data-hover","false"),this.settings.delay>0){s.$ele.data("notify-delay",s.settings.delay);var e=setInterval(function(){var t=parseInt(s.$ele.data("notify-delay"))-s.settings.timer;if("false"===s.$ele.data("data-hover")&&"pause"===s.settings.mouse_over||"pause"!=s.settings.mouse_over){var i=(s.settings.delay-t)/s.settings.delay*100;s.$ele.data("notify-delay",t),s.$ele.find('[data-notify="progressbar"] > div').attr("aria-valuenow",i).css("width",i+"%")}t<=-s.settings.timer&&(clearInterval(e),s.close())},s.settings.timer)}},close:function(){var s=this,e=parseInt(this.$ele.css(this.settings.placement.from)),i=!1;this.$ele.attr("data-closing","true").addClass(this.settings.animate.exit),s.reposition(e),t.isFunction(s.settings.onClose)&&s.settings.onClose.call(this.$ele),this.$ele.one(this.animations.start,function(){i=!0}).one(this.animations.end,function(){t(this).remove(),t.isFunction(s.settings.onClosed)&&s.settings.onClosed.call(this)}),setTimeout(function(){i||(s.$ele.remove(),s.settings.onClosed&&s.settings.onClosed(s.$ele))},600)},reposition:function(s){var e=this,i='[data-notify-position="'+this.settings.placement.from+"-"+this.settings.placement.align+'"]:not([data-closing="true"])',n=this.$ele.nextAll(i);this.settings.newest_on_top===!0&&(n=this.$ele.prevAll(i)),n.each(function(){t(this).css(e.settings.placement.from,s),s=parseInt(s)+parseInt(e.settings.spacing)+t(this).outerHeight()})}}),t.notify=function(t,s){var i=new e(this,t,s);return i.notify},t.notifyDefaults=function(s){return i=t.extend(!0,{},i,s)},t.notifyClose=function(s){"warning"===s&&(s="danger"),"undefined"==typeof s||"all"===s?t("[data-notify]").find('[data-notify="dismiss"]').trigger("click"):"success"===s||"info"===s||"warning"===s||"danger"===s?t(".alert-"+s+"[data-notify]").find('[data-notify="dismiss"]').trigger("click"):s?t(s+"[data-notify]").find('[data-notify="dismiss"]').trigger("click"):t('[data-notify-position="'+s+'"]').find('[data-notify="dismiss"]').trigger("click")},t.notifyCloseExcept=function(s){"warning"===s&&(s="danger"),"success"===s||"info"===s||"warning"===s||"danger"===s?t("[data-notify]").not(".alert-"+s).find('[data-notify="dismiss"]').trigger("click"):t("[data-notify]").not(s).find('[data-notify="dismiss"]').trigger("click")}});
\ No newline at end of file
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){function b(h,b,d){var f,e,g={content:{message:"object"==typeof b?b.message:b,title:b.title?b.title:"",icon:b.icon?b.icon:"",url:b.url?b.url:"#",target:b.target?b.target:"-"}};d=a.extend(!0,{},g,d),this.settings=a.extend(!0,{},c,d),this._defaults=c,"-"===this.settings.content.target&&(this.settings.content.target=this.settings.url_target),this.animations={start:"webkitAnimationStart oanimationstart MSAnimationStart animationstart",end:"webkitAnimationEnd oanimationend MSAnimationEnd animationend"},"number"==typeof this.settings.offset&&(this.settings.offset={x:this.settings.offset,y:this.settings.offset}),!this.settings.allow_duplicates&&(this.settings.allow_duplicates||(f=this,e=!1,a('[data-notify="container"]').each(function(k,c){var b=a(c),d=b.find('[data-notify="title"]').text().trim(),g=b.find('[data-notify="message"]').html().trim(),h=d===a("<div>"+f.settings.content.title+"</div>").html().trim(),i=g===a("<div>"+f.settings.content.message+"</div>").html().trim(),j=b.hasClass("alert-"+f.settings.type);return h&&i&&j&&(e=!0),!e}),e))||this.init()}var c={element:"body",position:null,type:"info",allow_dismiss:!0,allow_duplicates:!0,newest_on_top:!1,showProgressbar:!1,placement:{from:"top",align:"right"},offset:20,spacing:10,z_index:1031,delay:5e3,timer:1e3,url_target:"_blank",mouse_over:null,animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},onShow:null,onShown:null,onClose:null,onClosed:null,icon_type:"class",template:'<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="btn-close" data-notify="dismiss"></button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'};String.format=function(){for(var b=arguments[0],a=1;a<arguments.length;a++)b=b.replace(RegExp("\\{"+(a-1)+"\\}","gm"),arguments[a]);return b},a.extend(b.prototype,{init:function(){var a=this;this.buildNotify(),this.settings.content.icon&&this.setIcon(),"#"!=this.settings.content.url&&this.styleURL(),this.styleDismiss(),this.placement(),this.bind(),this.notify={$ele:this.$ele,update:function(e,f){var b={};for(var c in"string"==typeof e?b[e]=f:b=e,b)switch(c){case"type":this.$ele.removeClass("alert-"+a.settings.type),this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass("progress-bar-"+a.settings.type),a.settings.type=b[c],this.$ele.addClass("alert-"+b[c]).find('[data-notify="progressbar"] > .progress-bar').addClass("progress-bar-"+b[c]);break;case"icon":var d=this.$ele.find('[data-notify="icon"]');"class"===a.settings.icon_type.toLowerCase()?d.removeClass(a.settings.content.icon).addClass(b[c]):(d.is("img")||d.find("img"),d.attr("src",b[c]));break;case"progress":var g=a.settings.delay-a.settings.delay*(b[c]/100);this.$ele.data("notify-delay",g),this.$ele.find('[data-notify="progressbar"] > div').attr("aria-valuenow",b[c]).css("width",b[c]+"%");break;case"url":this.$ele.find('[data-notify="url"]').attr("href",b[c]);break;case"target":this.$ele.find('[data-notify="url"]').attr("target",b[c]);break;default:this.$ele.find('[data-notify="'+c+'"]').html(b[c])}var h=this.$ele.outerHeight()+parseInt(a.settings.spacing)+parseInt(a.settings.offset.y);a.reposition(h)},close:function(){a.close()}}},buildNotify:function(){var b=this.settings.content;this.$ele=a(String.format(this.settings.template,this.settings.type,b.title,b.message,b.url,b.target)),this.$ele.attr("data-notify-position",this.settings.placement.from+"-"+this.settings.placement.align),this.settings.allow_dismiss||this.$ele.find('[data-notify="dismiss"]').css("display","none"),(!(this.settings.delay<=0)||this.settings.showProgressbar)&&this.settings.showProgressbar||this.$ele.find('[data-notify="progressbar"]').remove()},setIcon:function(){"class"===this.settings.icon_type.toLowerCase()?this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon):this.$ele.find('[data-notify="icon"]').is("img")?this.$ele.find('[data-notify="icon"]').attr("src",this.settings.content.icon):this.$ele.find('[data-notify="icon"]').append('<img src="'+this.settings.content.icon+'" alt="Notify Icon" />')},styleDismiss:function(){this.$ele.find('[data-notify="dismiss"]').css({position:"absolute",right:"10px",top:"5px",zIndex:this.settings.z_index+2})},styleURL:function(){this.$ele.find('[data-notify="url"]').css({backgroundImage:"url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)",height:"100%",left:0,position:"absolute",top:0,width:"100%",zIndex:this.settings.z_index+1})},placement:function(){var d=this,b=this.settings.offset.y,c={display:"inline-block",margin:"0px auto",position:this.settings.position?this.settings.position:"body"===this.settings.element?"fixed":"absolute",transition:"all .5s ease-in-out",zIndex:this.settings.z_index},e=!1,f=this.settings;switch(a('[data-notify-position="'+this.settings.placement.from+"-"+this.settings.placement.align+'"]:not([data-closing="true"])').each(function(){b=Math.max(b,parseInt(a(this).css(f.placement.from))+parseInt(a(this).outerHeight())+parseInt(f.spacing))}),!0===this.settings.newest_on_top&&(b=this.settings.offset.y),c[this.settings.placement.from]=b+"px",this.settings.placement.align){case"left":case"right":c[this.settings.placement.align]=this.settings.offset.x+"px";break;case"center":c.left=0,c.right=0}this.$ele.css(c).addClass(this.settings.animate.enter),a.each(Array("webkit-","moz-","o-","ms-",""),function(b,a){d.$ele[0].style[a+"AnimationIterationCount"]=1}),a(this.settings.element).append(this.$ele),!0===this.settings.newest_on_top&&(b=parseInt(b)+parseInt(this.settings.spacing)+this.$ele.outerHeight(),this.reposition(b)),a.isFunction(d.settings.onShow)&&d.settings.onShow.call(this.$ele),this.$ele.one(this.animations.start,function(){e=!0}).one(this.animations.end,function(){d.$ele.removeClass(d.settings.animate.enter),a.isFunction(d.settings.onShown)&&d.settings.onShown.call(this)}),setTimeout(function(){e||a.isFunction(d.settings.onShown)&&d.settings.onShown.call(this)},600)},bind:function(){var b=this;if(this.$ele.find('[data-notify="dismiss"]').on("click",function(){b.close()}),this.$ele.mouseover(function(){a(this).data("data-hover","true")}).mouseout(function(){a(this).data("data-hover","false")}),this.$ele.data("data-hover","false"),this.settings.delay>0){b.$ele.data("notify-delay",b.settings.delay);var c=setInterval(function(){var a=parseInt(b.$ele.data("notify-delay"))-b.settings.timer;if("false"===b.$ele.data("data-hover")&&"pause"===b.settings.mouse_over||"pause"!=b.settings.mouse_over){var d=(b.settings.delay-a)/b.settings.delay*100;b.$ele.data("notify-delay",a),b.$ele.find('[data-notify="progressbar"] > div').attr("aria-valuenow",d).css("width",d+"%")}a<= -b.settings.timer&&(clearInterval(c),b.close())},b.settings.timer)}},close:function(){var b=this,c=parseInt(this.$ele.css(this.settings.placement.from)),d=!1;this.$ele.attr("data-closing","true").addClass(this.settings.animate.exit),b.reposition(c),a.isFunction(b.settings.onClose)&&b.settings.onClose.call(this.$ele),this.$ele.one(this.animations.start,function(){d=!0}).one(this.animations.end,function(){a(this).remove(),a.isFunction(b.settings.onClosed)&&b.settings.onClosed.call(this)}),setTimeout(function(){d||(b.$ele.remove(),b.settings.onClosed&&b.settings.onClosed(b.$ele))},600)},reposition:function(d){var e=this,b='[data-notify-position="'+this.settings.placement.from+"-"+this.settings.placement.align+'"]:not([data-closing="true"])',c=this.$ele.nextAll(b);!0===this.settings.newest_on_top&&(c=this.$ele.prevAll(b)),c.each(function(){a(this).css(e.settings.placement.from,d),d=parseInt(d)+parseInt(e.settings.spacing)+a(this).outerHeight()})}}),a.notify=function(a,c){return new b(this,a,c).notify},a.notifyDefaults=function(b){return c=a.extend(!0,{},c,b)},a.notifyClose=function(b){"warning"===b&&(b="danger"),void 0===b||"all"===b?a("[data-notify]").find('[data-notify="dismiss"]').trigger("click"):"success"===b||"info"===b||"warning"===b||"danger"===b?a(".alert-"+b+"[data-notify]").find('[data-notify="dismiss"]').trigger("click"):b?a(b+"[data-notify]").find('[data-notify="dismiss"]').trigger("click"):a('[data-notify-position="'+b+'"]').find('[data-notify="dismiss"]').trigger("click")},a.notifyCloseExcept=function(b){"warning"===b&&(b="danger"),"success"===b||"info"===b||"warning"===b||"danger"===b?a("[data-notify]").not(".alert-"+b).find('[data-notify="dismiss"]').trigger("click"):a("[data-notify]").not(b).find('[data-notify="dismiss"]').trigger("click")}})
\ No newline at end of file
diff --git a/data/web/js/build/012-api.js b/data/web/js/build/012-api.js
index d979a9b1..89f2aa4a 100644
--- a/data/web/js/build/012-api.js
+++ b/data/web/js/build/012-api.js
@@ -318,6 +318,7 @@ $(document).ready(function() {
 
   // General API delete actions
   $(document).on('click', "[data-action='delete_selected']", function(e) {
+    console.log("delete");
     e.preventDefault();
     var id = $(this).data('id');
     // If clicked element #delete_selected has data-item attribute, it is added to "items"
@@ -336,6 +337,7 @@ $(document).ready(function() {
     if (typeof multi_data[id] == "undefined" || multi_data[id] == "") return;
     data_array = multi_data[id];
     api_url = $(this).data('api-url');
+    console.log("delete modal");
     $(document).on('show.bs.modal', '#ConfirmDeleteModal', function() {
       $("#ItemsToDelete").empty();
       for (var i in data_array) {
@@ -343,10 +345,7 @@ $(document).ready(function() {
         $("#ItemsToDelete").append("<li>" + data_array[i] + "</li>");
       }
     })
-    $('#ConfirmDeleteModal').modal({
-        backdrop: 'static',
-        keyboard: false
-      })
+    $('#ConfirmDeleteModal').modal('show')
       .one('click', '#IsConfirmed', function(e) {
         if (is_active($('#IsConfirmed'))) { return false; }
         $.ajax({
diff --git a/data/web/js/build/014-mailcow.js b/data/web/js/build/014-mailcow.js
index cdde60e7..6f1682fa 100644
--- a/data/web/js/build/014-mailcow.js
+++ b/data/web/js/build/014-mailcow.js
@@ -61,8 +61,8 @@ $(document).ready(function() {
   // remember last navigation pill
   (function () {
     'use strict';
-    if ($('a[data-bs-toggle="tab"]').length) {
-      $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
+    if ($('button[data-bs-toggle="tab"]').length) {
+      $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
         if ($(this).data('dont-remember') == 1) {
           return true;
         }
@@ -71,7 +71,7 @@ $(document).ready(function() {
         if (id) {
           key += ':' + id;
         }
-        localStorage.setItem(key, $(e.target).attr('href'));
+        localStorage.setItem(key, $(e.target).attr('data-bs-target').substring(1));
       });
       $('[role="tablist"]').each(function (idx, elem) {
         var id = $(elem).attr('id');
@@ -81,7 +81,7 @@ $(document).ready(function() {
         }
         var lastTab = localStorage.getItem(key);
         if (lastTab) {
-          $('[href="' + lastTab + '"]').tab('show');
+          $("[id^=" + lastTab + "]").show();
         }
       });
     }
diff --git a/data/web/js/site/admin.js b/data/web/js/site/admin.js
index 677cd675..e9f12cbf 100644
--- a/data/web/js/site/admin.js
+++ b/data/web/js/site/admin.js
@@ -53,7 +53,7 @@ jQuery(function($){
   $("#show_rspamd_global_filters").click(function() {
     $.get("inc/ajax/show_rspamd_global_filters.php");
     $("#confirm_show_rspamd_global_filters").hide();
-    $("#rspamd_global_filters").removeClass("hidden");
+    $("#rspamd_global_filters").removeClass("d-none");
   });
   $("#super_delete").click(function() { return confirm(lang.queue_ays); });
   $(".refresh_table").on('click', function(e) {
@@ -533,17 +533,13 @@ jQuery(function($){
     });
   }
   // Draw Table if tab is active
-  onVisible("[id^=tab-config-admins]", () => {
-    draw_admins();
-    draw_domain_admins();
-  });
-  onVisible("[id^=tab-config-oauth2]", () => draw_oauth2_clients());
-  onVisible("[id^=tab-config-fwdhosts]", () => draw_fwd_hosts());
-  onVisible("[id^=tab-routing]", () => {
-    draw_relayhosts();
-    draw_transport_maps();
-  });
-  onVisible("[id^=tab-mailq]", () => draw_queue());
+  onVisible("[id^=collapse-tab-config-admins]", () => draw_admins());
+  onVisible("[id^=collapse-tab-config-dadmins]", () => draw_domain_admins());
+  onVisible("[id^=collapse-tab-config-oauth2]", () => draw_oauth2_clients());
+  onVisible("[id^=collapse-tab-config-fwdhosts]", () => draw_fwd_hosts());
+  onVisible("[id^=collapse-tab-routing]", () => draw_relayhosts());
+  onVisible("[id^=collapse-tab-maps]", () => draw_transport_maps());
+  onVisible("[id^=collapse-tab-mailq]", () => draw_queue());
 
 
   $('body').on('click', 'span.footable-toggle', function () {
diff --git a/data/web/js/site/debug.js b/data/web/js/site/debug.js
index a6b92054..fa01e5aa 100644
--- a/data/web/js/site/debug.js
+++ b/data/web/js/site/debug.js
@@ -75,6 +75,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/autodiscover/100",
@@ -115,6 +116,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/postfix",
@@ -147,6 +149,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/watchdog",
@@ -183,6 +186,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/api",
@@ -223,6 +227,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/ratelimited",
@@ -295,6 +300,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/ui",
@@ -347,6 +353,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/sasl",
@@ -383,6 +390,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/acme",
@@ -411,6 +419,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/netfilter",
@@ -443,6 +452,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/sogo",
@@ -475,6 +485,7 @@ jQuery(function($){
       processing: true,
       serverSide: false,
       language: lang_datatables,
+      order: [[0, 'desc']],
       ajax: {
         type: "GET",
         url: "/api/v1/get/logs/dovecot",
@@ -507,11 +518,13 @@ jQuery(function($){
       url: '/api/v1/get/rspamd/actions',
       async: true,
       success: function(data){
+        console.log(data);
 
         var total = 0;
         $(data).map(function(){total += this[1];});
         var labels = $.makeArray($(data).map(function(){return this[0] + ' ' + Math.round(this[1]/total * 100) + '%';}));
         var values = $.makeArray($(data).map(function(){return this[1];}));
+        console.log(values);
 
         var graphdata = {
           labels: labels,
@@ -540,7 +553,7 @@ jQuery(function($){
           }
         };
         var chartcanvas = document.getElementById('rspamd_donut');
-        Chart.plugins.register('ChartDataLabels');
+        Chart.register('ChartDataLabels');
         if(typeof chart == 'undefined') {
           chart = new Chart(chartcanvas.getContext("2d"), {
             plugins: [ChartDataLabels],
@@ -859,12 +872,8 @@ jQuery(function($){
   onVisible("[id^=tab-ui]", () => draw_ui_logs());
   onVisible("[id^=tab-sasl]", () => draw_sasl_logs());
   onVisible("[id^=tab-netfilter-logs]", () => draw_netfilter_logs());
-  onVisible("[id^=tab-rspamd-history]", () => draw_rspamd_history());
-
-  $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
-    var target = $(e.target).attr("href");
-    if (target == '#tab-rspamd-history') {
-      rspamd_pie_graph();
-    }
+  onVisible("[id^=tab-rspamd-history]", () => {
+    rspamd_pie_graph();
+    draw_rspamd_history()
   });
 });
diff --git a/data/web/js/site/mailbox.js b/data/web/js/site/mailbox.js
index bd0878aa..0ea3b3d3 100644
--- a/data/web/js/site/mailbox.js
+++ b/data/web/js/site/mailbox.js
@@ -1195,17 +1195,14 @@ jQuery(function($){
   }
 
   // Load only if the tab is visible
-  onVisible("[id^=tab-domains]", () => draw_domain_table());
-  onVisible("[id^=tab-mailboxes]", () => draw_mailbox_table());
-  onVisible("[id^=tab-resources]", () => draw_resource_table());
-  onVisible("[id^=tab-mbox-aliases]", () => draw_alias_table());
-  onVisible("[id^=tab-domain-aliases]", () => draw_aliasdomain_table());
-  onVisible("[id^=tab-syncjobs]", () => draw_sync_job_table());
-  onVisible("[id^=tab-filters]", () => draw_filter_table());
-  onVisible("[id^=tab-bcc]", () => {
-    draw_bcc_table();
-    draw_recipient_map_table();
-  });
-  onVisible("[id^=tab-tls-policy]", () => draw_tls_policy_table());
-
+  onVisible("[id^=collapse-tab-domains]", () => draw_domain_table());
+  onVisible("[id^=collapse-tab-mailboxes]", () => draw_mailbox_table());
+  onVisible("[id^=collapse-tab-resources]", () => draw_resource_table());
+  onVisible("[id^=collapse-tab-mbox-aliases]", () => draw_alias_table());
+  onVisible("[id^=collapse-tab-domain-aliases]", () => draw_aliasdomain_table());
+  onVisible("[id^=collapse-tab-syncjobs]", () => draw_sync_job_table());
+  onVisible("[id^=collapse-tab-filters]", () => draw_filter_table());
+  onVisible("[id^=collapse-tab-bcc]", () => draw_bcc_table());
+  onVisible("[id^=collapse-tab-bcc-filters]", () => draw_recipient_map_table());
+  onVisible("[id^=collapse-tab-tls-policy]", () => draw_tls_policy_table());
 });
diff --git a/data/web/js/site/user.js b/data/web/js/site/user.js
index 2375a25c..52440d91 100644
--- a/data/web/js/site/user.js
+++ b/data/web/js/site/user.js
@@ -538,12 +538,12 @@ jQuery(function($){
   }
 
   // Load only if the tab is visible
-  onVisible("[id^=SpamAliases]", () => draw_tla_table());
-  onVisible("[id^=Spamfilter]", () => { 
-    draw_wl_policy_mailbox_table();
+  onVisible("[id^=collapse-tab-SpamAliases]", () => draw_tla_table());
+  onVisible("[id^=collapse-tab-Spamfilter]", () => {
     draw_bl_policy_mailbox_table();
+    draw_wl_policy_mailbox_table()
   });
-  onVisible("[id^=Syncjobs]", () => draw_sync_job_table());
-  onVisible("[id^=AppPasswds]", () => draw_app_passwd_table());
+  onVisible("[id^=collapse-tab-Syncjobs]", () => draw_sync_job_table());
+  onVisible("[id^=collapse-tab-AppPasswds]", () => draw_app_passwd_table());
   last_logins('get');
 });
diff --git a/data/web/lang/lang.cs.json b/data/web/lang/lang.cs.json
index dd7a6826..42e7f4e3 100644
--- a/data/web/lang/lang.cs.json
+++ b/data/web/lang/lang.cs.json
@@ -87,7 +87,7 @@
         "relay_all": "Předávání všech příjemců",
         "relay_all_info": "<small>Pokud se rozhodnete <b>nepředávat</b> všechny příjemce, musíte přidat prázdnou mailovou schránku pro každého příjemce, který se má předávat.</small>",
         "relay_domain": "Předávání domény",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> U této domény lze pro konkrétní cíl nastavit transportní mapu. Není-li nastavena, použije se MX záznam.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> U této domény lze pro konkrétní cíl nastavit transportní mapu. Není-li nastavena, použije se MX záznam.",
         "relay_unknown_only": "Předávat jen neexistující schránky. Doručení do existujících proběhne lokálně.",
         "relayhost_wrapped_tls_info": "<b>Nepoužívejte</b> prosím porty s aktivním protokolem TLS (většinou port 465).<br>\r\nPoužívejte porty bez TLS a pak pošlete příkaz STARTTLS. Pravidlo k vynucení užití TLS lze vytvořit pomocí mapy TLS pravidel.",
         "select": "Prosím vyberte...",
@@ -579,7 +579,7 @@
         "relay_all": "Předávání všech příjemců",
         "relay_all_info": "<small>Pokud se rozhodnete <b>nepředávat</b> všechny příjemce, musíte přidat prázdnou mailovou schránku pro každého příjemce, který se má předávat.</small>",
         "relay_domain": "Předávání domény",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> U této domény lze pro konkrétní cíl nastavit transportní mapu. Není-li nastavena, použije se MX záznam.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> U této domény lze pro konkrétní cíl nastavit transportní mapu. Není-li nastavena, použije se MX záznam.",
         "relay_unknown_only": "Předávat jen neexistující schránky. Doručení do existujících proběhne lokálně.",
         "relayhost": "Předávání podle odesílatele",
         "remove": "Smazat",
@@ -587,7 +587,7 @@
         "save": "Uložit změny",
         "scope": "Rozsah",
         "sender_acl": "Povolit odesílání jako",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Kontrola odesílatele vypnuta</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Kontrola odesílatele vypnuta</span>",
         "sender_acl_info": "Má-li uživatel schránky A dovoleno odesílat jako uživatel schránky B, nezobrazuje se adresa odesílatele B v seznamu \"Od\" v SOGo automaticky.<br>\r\n  Uživatel schránky A musí nejdříve v SOGo vytvořit pověření, jež umožní uživateli B vybrat svou adresu jako odesílatele. Tento mechanismus neplatí pro aliasy.",
         "sieve_desc": "Krátký popis",
         "sieve_type": "Typ filtru",
@@ -1097,7 +1097,7 @@
         "running": "Běží",
         "save": "Uložit změny",
         "save_changes": "Uložit změny",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Kontrola odesílatele vypnuta</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Kontrola odesílatele vypnuta</span>",
         "shared_aliases": "Sdílené aliasy",
         "shared_aliases_desc": "Na sdílené aliasy se neuplatňuje uživatelské nastavení jako filtr spamu nebo pravidla šifrování. Nastavení filtrování spamu může provádět jen správce pro celou doménu.",
         "show_sieve_filters": "Zobrazit aktivní sieve filtr uživatele",
diff --git a/data/web/lang/lang.da.json b/data/web/lang/lang.da.json
index abd25c51..66bf22f6 100644
--- a/data/web/lang/lang.da.json
+++ b/data/web/lang/lang.da.json
@@ -83,7 +83,7 @@
         "relay_all": "Send alle modtagere videre",
         "relay_all_info": "↪ Hvis du vælger <b> ikke </b> at videresende alle modtagere, skal du tilføje et (\"blind\") postkasse til hver enkelt modtager, der skal videresendes.",
         "relay_domain": "Send dette domæne videre",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Du kan definere transportkort til en tilpasset destination for dette domæne. Hvis ikke indstillet, foretages der et MX-opslag.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Du kan definere transportkort til en tilpasset destination for dette domæne. Hvis ikke indstillet, foretages der et MX-opslag.",
         "relay_unknown_only": "Videresend kun ikke-eksisterende postkasser. Eksisterende postkasser leveres lokalt.",
         "relayhost_wrapped_tls_info": "Vær sød <b>ikke</b> at bruge TLS-indpakkede porte (bruges mest på port 465) .<br>\r\nBrug en ikke-pakket port, og udgiv STARTTLS. En TLS-politik til at håndhæve TLS kan oprettes i \"TLS policy maps\".",
         "select": "Vælg venligst...",
@@ -535,7 +535,7 @@
         "relay_all": "Send alle modtagere videre",
         "relay_all_info": "↪ Hvis du vælger <b>ikke</b> for at videresende alle modtagere skal du tilføje en (\"blind\") postkasse til hver enkelt modtager, der skal videresendes.",
         "relay_domain": "Send dette domæne videre",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Du kan definere transportkort til en tilpasset destination for dette domæne. Hvis den ikke er indstillet, foretages der et MX-opslag.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Du kan definere transportkort til en tilpasset destination for dette domæne. Hvis den ikke er indstillet, foretages der et MX-opslag.",
         "relay_unknown_only": "Videresend kun ikke-eksisterende postkasser. Eksisterende postkasser leveres lokalt.",
         "relayhost": "Afsenderafhængige transporter",
         "remove": "Fjerne",
@@ -543,7 +543,7 @@
         "save": "Gem ændringer",
         "scope": "Anvendelsesområde",
         "sender_acl": "Tillad at sende som",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Afsenderkontrol er deaktiveret</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Afsenderkontrol er deaktiveret</span>",
         "sender_acl_info": "Hvis postkassebruger A har tilladelse til at sende som postkassebruger B, vises afsenderadressen ikke automatisk som valgbar \"from\" felt i SOGo.<br>\r\n  Postkassebruger B skal oprette en delegation i SOGo for at tillade postkassebruger A at vælge deres adresse som afsender. For at delegere en postkasse i SOGo skal du bruge menuen (tre prikker) til højre for dit postkassens navn øverst til venstre, mens du er i postvisningen. Denne adfærd gælder ikke for aliasadresser.",
         "sieve_desc": "Kort beskrivelse",
         "sieve_type": "Filtertype",
@@ -1005,7 +1005,7 @@
         "running": "Kører",
         "save": "Gem ændring",
         "save_changes": "Gem ændringer",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Afsender tjek er slået fra</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Afsender tjek er slået fra</span>",
         "shared_aliases": "Delte aliasadresser",
         "shared_aliases_desc": "Delt alias påvirkes ikke af brugerspecifikke indstillinger såsom spamfilter eller krypteringspolitik. Tilselementnde spamfiltre kan kun foretages af en administrator som en politik, der dækker hele domænet.",
         "show_sieve_filters": "Vis det aktive brugerfilter",
diff --git a/data/web/lang/lang.de.json b/data/web/lang/lang.de.json
index d9d64522..2e3288b9 100644
--- a/data/web/lang/lang.de.json
+++ b/data/web/lang/lang.de.json
@@ -88,7 +88,7 @@
         "relay_all": "Alle Empfänger-Adressen relayen",
         "relay_all_info": "↪ Wenn <b>nicht</b> alle Empfänger-Adressen relayt werden sollen, müssen \"blinde\" Mailboxen für jede Adresse, die relayt werden soll, erstellt werden.",
         "relay_domain": "Diese Domain relayen",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Transport-Maps können erstellt werden, um individuelle Ziele für eine Relay-Domain zu definieren.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Transport-Maps können erstellt werden, um individuelle Ziele für eine Relay-Domain zu definieren.",
         "relay_unknown_only": "Nur nicht-lokale Mailboxen relayen. Existente Mailboxen werden weiterhin lokal zugestellt.",
         "relayhost_wrapped_tls_info": "Bitte <b>keine</b> \"TLS-wrapped Ports\" verwenden (etwa SMTPS via Port 465/tcp).<br>\r\nDer Transport wird stattdessen STARTTLS anfordern, um TLS zu verwenden. TLS kann unter \"TLS Policy Maps\" erzwungen werden.",
         "select": "Bitte auswählen",
@@ -607,7 +607,7 @@
         "relay_all": "Alle Empfänger-Adressen relayen",
         "relay_all_info": "↪ Wenn <b>nicht</b> alle Empfänger-Adressen relayt werden sollen, müssen \"blinde\" Mailboxen für jede Adresse, die relayt werden soll, erstellen werden.",
         "relay_domain": "Diese Domain relayen",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Transport Maps können erstellt werden, um individuelle Ziele für eine Relay Domain zu definieren.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Transport Maps können erstellt werden, um individuelle Ziele für eine Relay Domain zu definieren.",
         "relay_unknown_only": "Nur nicht-lokale Mailboxen relayen. Existente Mailboxen werden weiterhin lokal zugestellt.",
         "relayhost": "Senderabhängige Transport Maps",
         "remove": "Entfernen",
@@ -615,7 +615,7 @@
         "save": "Änderungen speichern",
         "scope": "Scope",
         "sender_acl": "Darf Nachrichten versenden als",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Absenderprüfung deaktiviert</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Absenderprüfung deaktiviert</span>",
         "sender_acl_info": "Wird einem Mailbox-Benutzer A der Versand als Mailbox-Benutzer B gestattet, so erscheint der Absender <b>nicht</b> automatisch in SOGo zur Auswahl.<br>\r\n  In SOGo muss zusätzlich eine Delegation eingerichtet werden. Dieses Verhalten trifft nicht auf Alias-Adressen zu.",
         "sieve_desc": "Kurze Beschreibung",
         "sieve_type": "Filtertyp",
@@ -1125,7 +1125,7 @@
         "running": "Wird ausgeführt",
         "save": "Änderungen speichern",
         "save_changes": "Änderungen speichern",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Absenderprüfung deaktiviert</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Absenderprüfung deaktiviert</span>",
         "shared_aliases": "Geteilte Alias-Adressen",
         "shared_aliases_desc": "Geteilte Alias-Adressen werden nicht bei benutzerdefinierten Einstellungen, wie die des Spam-Filters oder der Verschlüsselungsrichtlinie, berücksichtigt. Entsprechende Spam-Filter können lediglich von einem Administrator vorgenommen werden.",
         "show_sieve_filters": "Zeige aktiven Filter des Benutzers",
diff --git a/data/web/lang/lang.en.json b/data/web/lang/lang.en.json
index ef4696a0..9eb4f82b 100644
--- a/data/web/lang/lang.en.json
+++ b/data/web/lang/lang.en.json
@@ -88,7 +88,7 @@
         "relay_all": "Relay all recipients",
         "relay_all_info": "↪ If you choose <b>not</b> to relay all recipients, you will need to add a (\"blind\") mailbox for every single recipient that should be relayed.",
         "relay_domain": "Relay this domain",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
         "relay_unknown_only": "Relay non-existing mailboxes only. Existing mailboxes will be delivered locally.",
         "relayhost_wrapped_tls_info": "Please do <b>not</b> use TLS-wrapped ports (mostly used on port 465).<br>\r\nUse any non-wrapped port and issue STARTTLS. A TLS policy to enforce TLS can be created in \"TLS policy maps\".",
         "select": "Please select...",
@@ -607,7 +607,7 @@
         "relay_all": "Relay all recipients",
         "relay_all_info": "↪ If you choose <b>not</b> to relay all recipients, you will need to add a (\"blind\") mailbox for every single recipient that should be relayed.",
         "relay_domain": "Relay this domain",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
         "relay_unknown_only": "Relay non-existing mailboxes only. Existing mailboxes will be delivered locally.",
         "relayhost": "Sender-dependent transports",
         "remove": "Remove",
@@ -615,7 +615,7 @@
         "save": "Save changes",
         "scope": "Scope",
         "sender_acl": "Allow to send as",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Sender check is disabled</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Sender check is disabled</span>",
         "sender_acl_info": "If mailbox user A is allowed to send as mailbox user B, the sender address is not automatically displayed as selectable \"from\" field in SOGo.<br>\r\n  Mailbox user B needs to create a delegation in SOGo to allow mailbox user A to select their address as sender. To delegate a mailbox in SOGo, use the menu (three dots) to the right of your mailbox name in the upper left while in mail view. This behaviour does not apply to alias addresses.",
         "sieve_desc": "Short description",
         "sieve_type": "Filter type",
@@ -1133,7 +1133,7 @@
         "running": "Running",
         "save": "Save changes",
         "save_changes": "Save changes",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Sender check is disabled</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Sender check is disabled</span>",
         "shared_aliases": "Shared alias addresses",
         "shared_aliases_desc": "Shared aliases are not affected by user specific settings such as the spam filter or encryption policy. Corresponding spam filters can only be made by an administrator as a domain-wide policy.",
         "show_sieve_filters": "Show active user sieve filter",
diff --git a/data/web/lang/lang.fi.json b/data/web/lang/lang.fi.json
index 66e279e2..7ff2877f 100644
--- a/data/web/lang/lang.fi.json
+++ b/data/web/lang/lang.fi.json
@@ -468,7 +468,7 @@
         "save": "Tallenna muutokset",
         "scope": "Laajuus",
         "sender_acl": "Salli lähettää nimellä",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Lähettäjän tarkistus on poistettu käytöstä</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Lähettäjän tarkistus on poistettu käytöstä</span>",
         "sender_acl_info": "Jos postilaatikon käyttäjän A sallitaan lähettävän postilaatikon käyttäjäksi B, lähettäjän osoitetta ei näytetä automaattisesti valittavana \"alkaen\" -kentässä SOGossa.<br>\r\nSähkö postilaatikon käyttäjän A on luotava valtuutus SOGoon, jotta sähkö postilaatikon käyttäjä b voi valita osoitteen lähettäjäksi. Tämä käyttäytyminen ei koske alias-osoitteita",
         "sieve_desc": "Lyhyt kuvaus",
         "sieve_type": "Suodattimen tyyppi",
@@ -831,7 +831,7 @@
         "remove": "Poistaa",
         "running": "Käynnissä",
         "save_changes": "Tallenna muutokset",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Lähettäjän tarkistus on poistettu käytöstä</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Lähettäjän tarkistus on poistettu käytöstä</span>",
         "shared_aliases": "Jaetut aliaksen osoitteet",
         "shared_aliases_desc": "Käyttäjäkohtaiset asetukset, kuten roska posti suodatin tai salaus käytäntö, eivät vaikuta jaettuihin alias-sähköposti tunnuksiin. Vastaavat roska posti suodattimet voi tehdä vain järjestelmänvalvoja verkkoaluelaajuisiksi käytännöiksi.",
         "show_sieve_filters": "Näytä aktiivisen käyttäjän sieve suodatin",
diff --git a/data/web/lang/lang.fr.json b/data/web/lang/lang.fr.json
index 085240ee..1dccd121 100644
--- a/data/web/lang/lang.fr.json
+++ b/data/web/lang/lang.fr.json
@@ -84,7 +84,7 @@
         "relay_all": "Relayer tous les destinataires",
         "relay_all_info": "↪ Si vous choissisez <b>de ne pas</b> relayer tous les destinataires, vous devez ajouter une boîte (\"aveugle\") pour chaque destinataire simple qui doit être relayé.",
         "relay_domain": "Relayer ce domaine",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Vous pouvez définir des cartes de transport vers une destination personnalisée pour ce domaine. sinon, une recherche MX sera effectuée.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Vous pouvez définir des cartes de transport vers une destination personnalisée pour ce domaine. sinon, une recherche MX sera effectuée.",
         "relay_unknown_only": "Relayer uniquement les boîtes inexistantes. Les boîtes existantes seront livrées localement.",
         "relayhost_wrapped_tls_info": "Veuillez <b>ne pas</b> utiliser des ports TLS wrappés (généralement utilisés sur le port 465).<br>\r\nUtilisez n'importe quel port non encapsulé et lancez STARTTLS. Une politique TLS pour appliquer TLS peut être créée dans \"Cartes de politique TLS\".",
         "select": "Veuillez sélectionner...",
@@ -546,7 +546,7 @@
         "relay_all": "Relayer tous les destinataires",
         "relay_all_info": "↪ Si vous <b>ne choissisez pas</b> de relayer tous les destinataires, vous devrez ajouter une boîte (\"aveugle\") pour chaque destinataire qui devrait être relayé.",
         "relay_domain": "Relayer ce domaine",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Vous pouvez définir des cartes de transport vers une destination personnalisée pour ce domaine. Si elle n’est pas configurée, une recherche MX sera effectuée.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Vous pouvez définir des cartes de transport vers une destination personnalisée pour ce domaine. Si elle n’est pas configurée, une recherche MX sera effectuée.",
         "relay_unknown_only": "Relais des boîtes non existantes seulement. Les boîtes existantes seront livrées localement..",
         "relayhost": "Transports dépendant de l’expéditeur",
         "remove": "Enlever",
@@ -554,7 +554,7 @@
         "save": "Enregistrer les modifications",
         "scope": "Portée",
         "sender_acl": "Permettre d’envoyer comme",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Le contrôle de l’expéditeur est désactivé</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Le contrôle de l’expéditeur est désactivé</span>",
         "sender_acl_info": "Si l’utilisateur de la boîte A est autorisé à envoyer en tant qu’utilisateur de la boîte B, l’adresse de l’expéditeur n’est pas automatiquement affichée comme sélectionnable du champ \"from\" dans SOGo.<br>\r\n  L’utilisateur B de la boîte doit créer une délégation dans Sogo pour permettre à l’utilisateur A de la boîte de sélectionner son adresse comme expéditeur. Pour déléguer une boîte dans Sogo, utilisez le menu (trois points) à droite du nom de votre boîte dans le coin supérieur gauche dans la vue de courrier. Ce comportement ne s’applique pas aux adresses alias.",
         "sieve_desc": "Description courte",
         "sieve_type": "Type de filtre",
@@ -1019,7 +1019,7 @@
         "running": "En fonction",
         "save": "Sauvegarder les changements",
         "save_changes": "Sauvegarder les changements",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Le contrôle de l’expéditeur est désactivé</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Le contrôle de l’expéditeur est désactivé</span>",
         "shared_aliases": "Adresses alias partagées",
         "shared_aliases_desc": "Les alias partagés ne sont pas affectés par les paramètres spécifiques à l’utilisateur tels que le filtre anti-spam ou la politique de chiffrement. Les filtres anti-spam correspondants ne peuvent être effectués que par un administrateur en tant que politique de domaine.",
         "show_sieve_filters": "Afficher le filtre de tamis actif de l’utilisateur",
diff --git a/data/web/lang/lang.hu.json b/data/web/lang/lang.hu.json
index fa702164..c32a04d0 100644
--- a/data/web/lang/lang.hu.json
+++ b/data/web/lang/lang.hu.json
@@ -328,7 +328,7 @@
         "running": "Fut",
         "save": "Módosítások mentése",
         "save_changes": "Módosítások mentése",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Küldő ellenőrzése letiltva</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Küldő ellenőrzése letiltva</span>",
         "shared_aliases": "Megosztott alias címek",
         "show_sieve_filters": "Aktív felhasználói szűrők megjelenítése",
         "spam_aliases": "Ideiglenes email alias-ok",
diff --git a/data/web/lang/lang.it.json b/data/web/lang/lang.it.json
index aa1e4eb0..95bb2da5 100644
--- a/data/web/lang/lang.it.json
+++ b/data/web/lang/lang.it.json
@@ -86,7 +86,7 @@
         "relay_all": "Trasmettere a tutti i destinatari",
         "relay_all_info": "↪ Se si sceglie di <b>non</b> inviare a tutti i destinatari, è necessario aggiungere una casella di posta (\"blind\") per ogni singolo destinatario a cui deve essere inoltrato.",
         "relay_domain": "Trasmetti questo dominio",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Puoi definire mappe di trasporto verso una destinazione a tua scelta per questo dominio. Se non viene impostata, si guarderà il record MX.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Puoi definire mappe di trasporto verso una destinazione a tua scelta per questo dominio. Se non viene impostata, si guarderà il record MX.",
         "relay_unknown_only": "Inoltra solo caselle di posta inesistenti. I messaggi per gli indirizzi esistenti verranno consegnati localmente.",
         "relayhost_wrapped_tls_info": "Please do <b>not</b> use TLS-wrapped ports (mostly used on port 465).<br>\r\nUse any non-wrapped port and issue STARTTLS. A TLS policy to enforce TLS can be created in \"TLS policy maps\".",
         "select": "Si prega di selezionare...",
@@ -579,7 +579,7 @@
         "relay_all": "Relay tutti i destinatari",
         "relay_all_info": "↪ Se si sceglie di <b>non</b> inviare a tutti i destinatari, è necessario aggiungere una casella di posta (\"blind\") per ogni singolo destinatario a cui deve essere inoltrato.",
         "relay_domain": "Relay dominio",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
         "relay_unknown_only": "Relay non-existing mailboxes only. Existing mailboxes will be delivered locally.",
         "relayhost": "Sender-dependent transports",
         "remove": "Rimuovi",
@@ -587,7 +587,7 @@
         "save": "Salva modifiche",
         "scope": "Scope",
         "sender_acl": "Consenti di inviare come",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Sender check is disabled</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Sender check is disabled</span>",
         "sender_acl_info": "If mailbox user A is allowed to send as mailbox user B, the sender address is not automatically displayed as selectable \"from\" field in SOGo.<br>\r\n  Mailbox user B needs to create a delegation in SOGo to allow mailbox user A to select their address as sender. To delegate a mailbox in SOGo, use the menu (three dots) to the right of your mailbox name in the upper left while in mail view. This behaviour does not apply to alias addresses.",
         "sieve_desc": "Short description",
         "sieve_type": "Filter type",
@@ -1095,7 +1095,7 @@
         "running": "In esecuzione",
         "save": "Salva modifiche",
         "save_changes": "Salva modifiche",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Sender check is disabled</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Sender check is disabled</span>",
         "shared_aliases": "Indirizzi alias condivisi",
         "shared_aliases_desc": "Shared aliases are not affected by user specific settings such as the spam filter or encryption policy. Corresponding spam filters can only be made by an administrator as a domain-wide policy.",
         "show_sieve_filters": "Show active user sieve filter",
diff --git a/data/web/lang/lang.ko.json b/data/web/lang/lang.ko.json
index 3dd1f446..967d5c4e 100644
--- a/data/web/lang/lang.ko.json
+++ b/data/web/lang/lang.ko.json
@@ -83,7 +83,7 @@
         "relay_all": "모든 수신자에게 릴레이",
         "relay_all_info": "↪ 모든 수신자에게 릴레이를 하지 않으면, 릴레이 받아야 하는 모든 수신자에게 블라인드 메일함을 만들어야 합니다.",
         "relay_domain": "Relay this domain",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
         "relay_unknown_only": "Relay non-existing mailboxes only. Existing mailboxes will be delivered locally.",
         "relayhost_wrapped_tls_info": "Please do <b>not</b> use TLS-wrapped ports (mostly used on port 465).<br>\r\nUse any non-wrapped port and issue STARTTLS. A TLS policy to enforce TLS can be created in \"TLS policy maps\".",
         "select": "선택하세요...",
@@ -526,7 +526,7 @@
         "relay_all": "Relay all recipients",
         "relay_all_info": "↪ If you choose <b>not</b> to relay all recipients, you will need to add a (\"blind\") mailbox for every single recipient that should be relayed.",
         "relay_domain": "Relay this domain",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> You can define transport maps for a custom destination for this domain. If not set, a MX lookup will be made.",
         "relay_unknown_only": "Relay non-existing mailboxes only. Existing mailboxes will be delivered locally.",
         "relayhost": "Sender-dependent transports",
         "remove": "Remove",
@@ -534,7 +534,7 @@
         "save": "Save changes",
         "scope": "Scope",
         "sender_acl": "Allow to send as",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Sender check is disabled</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Sender check is disabled</span>",
         "sender_acl_info": "If mailbox user A is allowed to send as mailbox user B, the sender address is not automatically displayed as selectable \"from\" field in SOGo.<br>\r\n  Mailbox user B needs to create a delegation in SOGo to allow mailbox user A to select their address as sender. To delegate a mailbox in SOGo, use the menu (three dots) to the right of your mailbox name in the upper left while in mail view. This behaviour does not apply to alias addresses.",
         "sieve_desc": "Short description",
         "sieve_type": "Filter type",
@@ -955,7 +955,7 @@
         "running": "실행중",
         "save": "변경사항 저장",
         "save_changes": "변경사항 저장",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Sender check is disabled</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Sender check is disabled</span>",
         "shared_aliases": "공동 사용 메일 주소 별칭",
         "shared_aliases_desc": "공동 사용 메일 별칭은 스팸 필터, 암호화 등 사용자의 설정의 영향을 받지 않습니다. 해당 주소의 스팸 필터는 관리자가 도메인 정책 형식으로 만들어야만 적용됩니다.",
         "show_sieve_filters": "활성화된 사용자 필터 표시",
diff --git a/data/web/lang/lang.nl.json b/data/web/lang/lang.nl.json
index 8c28fa0a..03d920e4 100644
--- a/data/web/lang/lang.nl.json
+++ b/data/web/lang/lang.nl.json
@@ -84,7 +84,7 @@
         "relay_all": "Forward alle ontvangers",
         "relay_all_info": "↪ Wanneer er wordt gekozen om <b>niet</b> alle ontvangers te forwarden, dient er per ontvanger een lege mailbox aangemaakt te worden.",
         "relay_domain": "Forward dit domein",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Je kunt transport-maps aanmaken om een aangepaste bestemming in te stellen voor dit domein. Zo niet, zal er een MX-lookup plaatsvinden.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Je kunt transport-maps aanmaken om een aangepaste bestemming in te stellen voor dit domein. Zo niet, zal er een MX-lookup plaatsvinden.",
         "relay_unknown_only": "Forward uitsluitend niet-bestaande mailboxen. Bestaande mailboxen zullen lokaal afgeleverd worden.",
         "relayhost_wrapped_tls_info": "Gebruik <b>geen</b> in TLS verpakte poorten (meestal poort 465).<br>Gebruik een reguliere poort en initieer STARTTLS. Beleid om verleuteling te forceren kan worden ingesteld bij \"Globaal versleutelingsbeleid\".",
         "select": "Selecteer...",
@@ -544,7 +544,7 @@
         "relay_all": "Forward alle ontvangers",
         "relay_all_info": "↪ Wanneer er wordt gekozen om <b>niet</b> alle ontvangers te forwarden, dient er per ontvanger een lege mailbox aangemaakt te worden.",
         "relay_domain": "Forward dit domein",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Je kunt transport-maps aanmaken om een aangepaste bestemming in te stellen voor dit domein. Zo niet, zal er een MX-lookup plaatsvinden.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Je kunt transport-maps aanmaken om een aangepaste bestemming in te stellen voor dit domein. Zo niet, zal er een MX-lookup plaatsvinden.",
         "relay_unknown_only": "Forward uitsluitend niet-bestaande mailboxen. Bestaande mailboxen zullen lokaal afgeleverd worden.",
         "relayhost": "Afzendergebonden transport-maps",
         "remove": "Verwijder",
@@ -552,7 +552,7 @@
         "save": "Wijzigingen opslaan",
         "scope": "Scope",
         "sender_acl": "Sta toe om te verzenden als",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Verzendcontrole is uitgeschakeld</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Verzendcontrole is uitgeschakeld</span>",
         "sender_acl_info": "Wanneer mailboxgebruiker A toegestaan is te verzenden namens mailboxgebruiker B, zal het verzendadres niet automatisch worden weergegeven in het \"van\"-veld in SOGo. Mailboxgebruiker A dient hiervoor een aparte vermelding te maken in SOGo. Om een mailbox te delegeren in SOGo kan het menu (drie punten) aan de rechterkant van de naam van het mailbox linksboven worden gebruikt in de mailweergave. Dit is niet van toepassing op aliasadressen.",
         "sieve_desc": "Korte beschrijving",
         "sieve_type": "Filtertype",
@@ -1015,7 +1015,7 @@
         "running": "Wordt uitgevoerd",
         "save": "Sla wijzigingen op",
         "save_changes": "Wijzigingen opslaan",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Verzendcontrole is uitgeschakeld</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Verzendcontrole is uitgeschakeld</span>",
         "shared_aliases": "Gedeelde aliasadressen",
         "shared_aliases_desc": "Een gedeeld aliasadres wordt niet beïnvloed door gebruikersspecifieke instellingen. Een aangepast spamfilter kan eventueel worden ingesteld door een administrator.",
         "show_sieve_filters": "Toon actieve filters",
diff --git a/data/web/lang/lang.ro.json b/data/web/lang/lang.ro.json
index 90e8f15d..90e8f9ff 100644
--- a/data/web/lang/lang.ro.json
+++ b/data/web/lang/lang.ro.json
@@ -88,7 +88,7 @@
         "relay_all": "Retransmite toți destinatarii",
         "relay_all_info": "↪ Dacă alegi să <b>nu</b> retransmiți toți destinatarii, va trebui să adaugi o cutie poștală (\"oarbă\") pentru fiecare destinatar care trebuie retransmis.",
         "relay_domain": "Retransmite acest domeniu",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Puteți defini hărți de transport pentru o destinație personalizată pentru acest domeniu. Dacă nu este setat, se va face o căutare MX.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Puteți defini hărți de transport pentru o destinație personalizată pentru acest domeniu. Dacă nu este setat, se va face o căutare MX.",
         "relay_unknown_only": "Releu doar pentru cutiile poștale inexistente. Cutiile poștale existente vor fi livrate local.",
         "relayhost_wrapped_tls_info": "Vă rugăm să <b>nu</b> utilizați porturi înfășurate TLS (utilizate mai ales pe portul 465).<br>\r\nUtilizați orice port neînfășurat și emiteți STARTTLS. O politică TLS pentru impunerea TLS poate fi creată în \"Hărți ale politicii TLS\".",
         "select": "Te rog selectează...",
@@ -583,7 +583,7 @@
         "relay_all": "Retransmite toți destinatarii",
         "relay_all_info": "↪ Dacă alegi să <b>nu</b> retransmiți toți destinatarii, va trebui să adaugi o cutie poștală (\"oarbă\") pentru fiecare destinatar care trebuie retransmis.",
         "relay_domain": "Acest domeniu este releu",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Puteți defini hărți de transport pentru o destinație personalizată pentru acest domeniu. Dacă nu este setat, se va face o căutare MX.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Puteți defini hărți de transport pentru o destinație personalizată pentru acest domeniu. Dacă nu este setat, se va face o căutare MX.",
         "relay_unknown_only": "Releu doar pentru cutiile poștale inexistente. Cutiile poștale existente vor fi livrate local.",
         "relayhost": "Transporturi dependente de expeditor",
         "remove": "Elimină",
@@ -591,7 +591,7 @@
         "save": "Salvează modificările",
         "scope": "Scop",
         "sender_acl": "Permite trimiterea ca",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Verificarea expeditorului este dezactivată</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Verificarea expeditorului este dezactivată</span>",
         "sender_acl_info": "Dacă utilizatorului A de căsuță poștală îi este permis să trimită ca utilizatorul B, adresa expeditorului nu este afișată automat ca fiind câmp selectabil \"de la\" în SOGo.<br>\r\n  Utilizatorul căsuței poștale B trebuie să creeze o delegație în SOGo pentru a permite utilizatorul cutiei poștale A să selecteze adresa ca expeditor. Pentru a delega o cutie poștală în SOGo, utilizați meniul (trei puncte) din dreapta numelui căsuței poștale în stânga sus, în timp ce vă aflați în vizualizarea e-mailului. Acest comportament nu se aplică adreselor alias.",
         "sieve_desc": "Descriere scurtă",
         "sieve_type": "Tip filtru",
@@ -1107,7 +1107,7 @@
         "running": "Funcţionare",
         "save": "Salvează modificările",
         "save_changes": "Salvează modificările",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Verificarea expeditorului este dezactivată</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Verificarea expeditorului este dezactivată</span>",
         "shared_aliases": "Adrese alias partajate",
         "shared_aliases_desc": "Aliasurile partajate nu sunt afectate de setările specifice utilizatorului, cum ar fi filtrul de spam sau politica de criptare. Filtrele de spam corespondente pot fi efectuate numai de către un administrator ca o politică la nivel de domeniu.",
         "show_sieve_filters": "Afișează filtrul activ al sitei de utilizatori",
diff --git a/data/web/lang/lang.ru.json b/data/web/lang/lang.ru.json
index c48d3945..627b3029 100644
--- a/data/web/lang/lang.ru.json
+++ b/data/web/lang/lang.ru.json
@@ -87,7 +87,7 @@
         "relay_all": "Ретрансляция всех получателей",
         "relay_all_info": "↪<small>Если вы решите <b>не</b> ретранслировать всех получателей, вам нужно будет добавить (\"слепой\") почтовый адрес для каждого получателя, которого следует ретранслировать.</small>",
         "relay_domain": "Ретрансляция этого домена",
-        "relay_transport_info": "<div class=\"label label-info\">Инфо</div> Вы можете настроить собственный транспорт для домена. Если такой настройки нет, то доставка будет выполнена на основе MX записей.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Инфо</div> Вы можете настроить собственный транспорт для домена. Если такой настройки нет, то доставка будет выполнена на основе MX записей.",
         "relay_unknown_only": "Ретрансляция только не существующих почтовых ящиков. Почта к существующим почтовым ящикам будут доставляться локально.",
         "relayhost_wrapped_tls_info": "Пожалуйста <b>не</b> используйте TLS порты (в основном это 465 порт).<br>\r\nИспользуйте любой <b>не</b> TLS порт который поддерживает STARTTLS. А для защиты от downgrate атак - настройке принудительную политику TLS.",
         "select": "Пожалуйста, выберите...",
@@ -580,7 +580,7 @@
         "relay_all": "Ретрансляция всех получателей",
         "relay_all_info": "↪<small>Если вы решите <b>не</b> ретранслировать всех получателей, вам нужно будет добавить (\"слепой\") почтовый аккаунт для каждого получателя, которого следует ретранслировать.</small>",
         "relay_domain": "Ретрансляция этого домена",
-        "relay_transport_info": "<div class=\"label label-info\">Инфо</div> Вы можете настроить собственный транспорт для домена. Если такой настройки нет, то доставка будет выполнена на основе MX записей.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Инфо</div> Вы можете настроить собственный транспорт для домена. Если такой настройки нет, то доставка будет выполнена на основе MX записей.",
         "relay_unknown_only": "Ретрансляция только не существующих почтовых ящиков. Почта к существующим почтовым ящикам будут доставляться локально.",
         "relayhost": "Маршрутизация на основе отправителя",
         "remove": "Удалить",
@@ -588,7 +588,7 @@
         "save": "Сохранить изменения",
         "scope": "Область",
         "sender_acl": "Разрешить отправлять письма от имени",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Проверка отправителя отключена</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Проверка отправителя отключена</span>",
         "sender_acl_info": "Учтите, что если пользователю почтового аккаунта A разрешено отправлять от имени пользователя B, то адрес пользователя B не отобразится автоматически в списке \"Отправитель\" при написании писем в SOGo.<br>\r\n  Пользователь почтового аккаунта B должен создать делегирование в SOGo, чтобы пользователь почтового аккаунта A мог выбрать его адрес в качестве отправителя. Делегирование находится в меню (троеточие) справа от имени почтового аккаунта в окне почты SOGo. Это поведение не относится к псевдонимам.",
         "sieve_desc": "Краткое описание",
         "sieve_type": "Тип фильтра",
@@ -1098,7 +1098,7 @@
         "running": "В процессе",
         "save": "Сохранить изменения",
         "save_changes": "Сохранить изменения",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Проверка отправителя отключена</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Проверка отправителя отключена</span>",
         "shared_aliases": "Общие псевдонимы",
         "shared_aliases_desc": "На общие псевдонимы не влияют пользовательские настройки, такие как фильтр нежелательной почты, или политика шифрования. Соответствующие фильтры нежелательной почты могут быть созданы только администратором в рамках политики домена.",
         "show_sieve_filters": "Показать включенные фильтры sieve",
diff --git a/data/web/lang/lang.sk.json b/data/web/lang/lang.sk.json
index cc605c82..92d65adb 100644
--- a/data/web/lang/lang.sk.json
+++ b/data/web/lang/lang.sk.json
@@ -87,7 +87,7 @@
         "relay_all": "Preposielať všetkým príjemcom",
         "relay_all_info": "↪ Ak sa rozhodnete <b>nepreposielať ďalej</b> všetkých príjemcov, budete musieť pridať (\"tzv. slepú\") mailovú schránku pre každého príjemcu.",
         "relay_domain": "Preposielať túto doménu",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Môžete definovať transportné mapy pre vlastné určenie cieľa pre túto doménu. Ak nie sú nastavené, použije sa MX záznam.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Môžete definovať transportné mapy pre vlastné určenie cieľa pre túto doménu. Ak nie sú nastavené, použije sa MX záznam.",
         "relay_unknown_only": "Preposielať len neexistujúce mailové schránky. Existujúce budú doručené lokálne.",
         "relayhost_wrapped_tls_info": "Prosím <b>nepoužívajte</b> TLS-wrapped porty (najviac používane na prote 465).<br>\r\nPoužite non-wrapped port a STARTTLS. Vynútené TLS pravidlá môžu byť vytvorené v \"TLS mapách\".",
         "select": "Prosím vyberte...",
@@ -582,7 +582,7 @@
         "relay_all": "Preposielať všetkých prijemcov",
         "relay_all_info": "↪ Ak sa rozhodnete <b>nepreposielať</b> všetkých príjemcov, budete musieť pridať (\"tzv. slepú\") mailovú schránku pre každého príjemcu.",
         "relay_domain": "Preposielať túto doménu",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Môžete definovať transportné mapy pre vlastné určenie cieľa pre túto doménu. Ak nie sú nastavené, použije sa MX záznam.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Môžete definovať transportné mapy pre vlastné určenie cieľa pre túto doménu. Ak nie sú nastavené, použije sa MX záznam.",
         "relay_unknown_only": "Preposielať len neexistujúce mailové schránky. Existujúce budú doručené lokálne.",
         "relayhost": "Transporty závislé na odosielateľovi",
         "remove": "Odstrániť",
@@ -590,7 +590,7 @@
         "save": "Uložiť zmeny",
         "scope": "Rozsah",
         "sender_acl": "Povoliť odosielanie ako",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Kontrola odosielateľa vypnutá</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Kontrola odosielateľa vypnutá</span>",
         "sender_acl_info": "Ak mailový používateľ A má povolenie poslať ako mailový používateľ B, adresa odosielateľa nieje automaticky viditeľná ako voliteľné \"from\" pole v SOGo.<br>\r\n Mailový používateľ B potrebuje vytvoriť delegáciu v SOGo, aby bol schopný mailový používateľ A vybrať jeho adresu ako odosielateľ. Na delegovanie mailovej adresy v SOGo, použite menu (tri bodky) napravo vášho mailového mena v hornom ľavom rohu, v prehľade správ. Toto neplatí pre alias adresy.",
         "sieve_desc": "Krátky popis",
         "sieve_type": "Typ filtru",
@@ -1105,7 +1105,7 @@
         "running": "Beží",
         "save": "Uložiť zmeny",
         "save_changes": "Uložiť zmeny",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Kontrola odosielateľa je pozastavená</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Kontrola odosielateľa je pozastavená</span>",
         "shared_aliases": "Zdieľané alias adresy",
         "shared_aliases_desc": "Zdieľané aliasy nie sú ovplyvnené používateľskými nastaveniami, ako spam filter alebo šifrovacie pravidlá. Zodpovedajúce spam filtre môžu byť vytvorené len administrátorom podľa podmienok domén.",
         "show_sieve_filters": "Zobraziť sieve filter aktívneho používateľa",
diff --git a/data/web/lang/lang.sv.json b/data/web/lang/lang.sv.json
index cd43ba8c..a9389515 100644
--- a/data/web/lang/lang.sv.json
+++ b/data/web/lang/lang.sv.json
@@ -84,7 +84,7 @@
         "relay_all": "Vidarebefordra alla mottagaradresser",
         "relay_all_info": "↪ Om <b>inte</b> alla mottagare ska vidarebefordras måste (\"blinda\") postlådor skapas för varje adress som ska vidarebefordras.",
         "relay_domain": "Vidarebefordra denna domän",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Transportkartor kan skapas för att definiera enskilda destinationer på en relädomän.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Transportkartor kan skapas för att definiera enskilda destinationer på en relädomän.",
         "relay_unknown_only": "Vidarebefodra endast om det saknas en lokal postlåda. Existerar det en postlåda kommer det levereras lokalt.",
         "relayhost_wrapped_tls_info": "Använd <b>inte</b> TLS-bundna portar (exempelvis SMTPS via port 465).<br>\r\nTrafiken kommer istället transporteras med TLS genom att använda STARTTLS. En sådan TLS-policy kan skapas under \"TLS-policyföreskrifter\".",
         "select": "Välj ...",
@@ -560,7 +560,7 @@
         "relay_all": "Vidarebefordra alla mottagare",
         "relay_all_info": "↪ Om <b>inte</b> alla mottagare ska vidarebefordras måste (\"blinda\") postlådor skapas för varje adress som ska vidarebefordras.",
         "relay_domain": "Relädomän",
-        "relay_transport_info": "<div class=\"label label-info\">Info</div> Transportkartor kan skapas för att definiera enskilda destinationer på en relädomän.",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\">Info</div> Transportkartor kan skapas för att definiera enskilda destinationer på en relädomän.",
         "relay_unknown_only": "Vidarebefodra endast om det saknas en lokal postlåda. Existerar det en postlåda kommer det levereras lokalt.",
         "relayhost": "Reläserver",
         "remove": "Ta bort",
@@ -568,7 +568,7 @@
         "save": "Spara ändringar",
         "scope": "Omfattning",
         "sender_acl": "Tillåt att skicka som",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Avsändarkontroll är avaktiverad</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Avsändarkontroll är avaktiverad</span>",
         "sender_acl_info": "Om användaren A tillåts skicka som användaren B visas inte avsändaradressen automatiskt i \"från\" fältet i SOGo.<br>\r\n  Användaren B måste skapa en delegation i SOGo för att låta användaren A välja Användaren B's adress som avsändare. För att delegera en postlåda i SOGo, gå till menyn (tre punkter) till höger om ditt namn uppe till vänster i postvyn. Detta gäller inte för aliasadresser.",
         "sieve_desc": "Kort beskrivning",
         "sieve_type": "Filtertyp",
@@ -1038,7 +1038,7 @@
         "running": "Kör",
         "save": "Spara ändringarna",
         "save_changes": "Spara ändringar",
-        "sender_acl_disabled": "<span class=\"label label-danger\">Kontrollen av avsändaren är inaktiverad</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">Kontrollen av avsändaren är inaktiverad</span>",
         "shared_aliases": "Delade aliasadresses",
         "shared_aliases_desc": "Delade aliasadresser påverkas inte av användarspecifika inställningar som skräppostfilter eller krypteringspolicy. Motsvarande skräppostfilter kan endast göras av en administratör som en domänövergripande policy.",
         "show_sieve_filters": "Visa den aktuella användarens sieve-filter",
diff --git a/data/web/lang/lang.zh.json b/data/web/lang/lang.zh.json
index 485a4636..94f1d35d 100644
--- a/data/web/lang/lang.zh.json
+++ b/data/web/lang/lang.zh.json
@@ -83,7 +83,7 @@
         "relay_all": "中继所有收件人",
         "relay_all_info": "↪ 如果<b>不</b>选择中继所有收件人，你将需要为每个应该中继的邮件添加一个 (\"盲\") 邮箱。",
         "relay_domain": "中继这个域名",
-        "relay_transport_info": "<div class=\"label label-info\"></div> 你可以为此域名定义传输规则以自定义发件目标主机，否则遵照MX记录发送邮件。",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\"></div> 你可以为此域名定义传输规则以自定义发件目标主机，否则遵照MX记录发送邮件。",
         "relay_unknown_only": "只为不存在的邮箱地址中继。已存在的邮箱地址则在本地递送。",
         "relayhost_wrapped_tls_info": "请 <b>不要</b> 使用\"嵌套TLS\"的端口 (大多为端口465).<br>\r\n使用其他\"非嵌套\"的端口发起STARTTLS. 你可以在\"TLS策略规则\"中添加强制使用TLS的策略。",
         "select": "请选择...",
@@ -536,7 +536,7 @@
         "relay_all": "中继所有收件人",
         "relay_all_info": "↪ 如果<b>不</b>选择中继所有，你将需要为每个应该中继的邮件添加一个 (\"盲\") 邮箱。",
         "relay_domain": "中继这个域名",
-        "relay_transport_info": "<div class=\"label label-info\"></div> 你可以为此域名定义传输规则以自定义发件目标主机，否则遵照MX记录发送邮件。",
+        "relay_transport_info": "<div class=\"badge fs-6 bg-info\"></div> 你可以为此域名定义传输规则以自定义发件目标主机，否则遵照MX记录发送邮件。",
         "relay_unknown_only": "只为不存在的邮箱地址中继。已存在的邮箱地址则在本地递送。",
         "relayhost": "中继传输",
         "remove": "删除",
@@ -544,7 +544,7 @@
         "save": "保存更改",
         "scope": "范围",
         "sender_acl": "允许发送为",
-        "sender_acl_disabled": "<span class=\"label label-danger\">发件人检查已关闭</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">发件人检查已关闭</span>",
         "sender_acl_info": "如果允许邮箱用户A作为邮箱用户B发送邮件，发件人的地址不会在SOGo中\"来自\"区域自动地作为下拉可选项显示。<br>\r\n 邮箱用户B需要添加授权以允许邮箱用户A选择B的地址作为发件人；授权方法为，在SOGo中点击左上方邮箱地址右边的菜单按钮(三个点)并授权。",
         "sieve_desc": "简短描述",
         "sieve_type": "过滤器类型",
@@ -978,7 +978,7 @@
         "running": "运行中",
         "save": "保存更改",
         "save_changes": "保存更改",
-        "sender_acl_disabled": "<span class=\"label label-danger\">发件人检查已关闭</span>",
+        "sender_acl_disabled": "<span class=\"badge fs-6 bg-danger\">发件人检查已关闭</span>",
         "shared_aliases": "共享别名地址",
         "shared_aliases_desc": "用户设置如垃圾过滤器和加密策略等不会应用到共享别名地址。共享别名地址只能应用域名级别的垃圾过滤器且只能被管理员修改。",
         "show_sieve_filters": "显示启用的用户sieve过滤器",
diff --git a/data/web/templates/admin.twig b/data/web/templates/admin.twig
index 65d5358d..287a1b21 100644
--- a/data/web/templates/admin.twig
+++ b/data/web/templates/admin.twig
@@ -1,64 +1,66 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<ul class="nav nav-tabs" role="tablist">
-  <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.access }}</a>
-    <ul class="dropdown-menu">
-      <li><button class="dropdown-item active" data-bs-target="#tab-config-admins" aria-selected="false" aria-controls="tab-config-admins" role="tab" data-bs-toggle="tab">{{ lang.admin.admins }}</button></li>
-      <!-- <li><button class="dropdown-item" data-bs-target="#tab-config-ldap-admins" aria-controls="tab-config-ldap-admins" role="tab" data-bs-toggle="tab">{{ lang.admin.admins_ldap }}</button></li> -->
-      <li><button class="dropdown-item" data-bs-target="#tab-config-oauth2" aria-selected="false" aria-controls="tab-config-oauth2" role="tab" data-bs-toggle="tab">{{ lang.admin.oauth2_apps }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-rspamd" aria-selected="false" aria-controls="tab-config-rspamd" role="tab" data-bs-toggle="tab">Rspamd UI</button></li>
-    </ul>
-  </li>
+<div id="admin-content" class="responsive-tabs">
+  <ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.access }}</a>
+      <ul class="dropdown-menu">
+        <li><button class="dropdown-item active" data-bs-target="#tab-config-admins" aria-selected="false" aria-controls="tab-config-admins" role="tab" data-bs-toggle="tab">{{ lang.admin.admins }}</button></li>
+        <!-- <li><button class="dropdown-item" data-bs-target="#tab-config-ldap-admins" aria-controls="tab-config-ldap-admins" role="tab" data-bs-toggle="tab">{{ lang.admin.admins_ldap }}</button></li> -->
+        <li><button class="dropdown-item" data-bs-target="#tab-config-oauth2" aria-selected="false" aria-controls="tab-config-oauth2" role="tab" data-bs-toggle="tab">{{ lang.admin.oauth2_apps }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-rspamd" aria-selected="false" aria-controls="tab-config-rspamd" role="tab" data-bs-toggle="tab">Rspamd UI</button></li>
+      </ul>
+    </li>
 
-  <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.configuration }}</a>
-    <ul class="dropdown-menu">
-      <li><button class="dropdown-item" data-bs-target="#tab-config-dkim" aria-selected="false" aria-controls="tab-config-dkim" role="tab" data-bs-toggle="tab">{{ lang.admin.dkim_keys }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-fwdhosts" aria-selected="false" aria-controls="tab-config-fwdhosts" role="tab" data-bs-toggle="tab">{{ lang.admin.forwarding_hosts }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-f2b" aria-selected="false" aria-controls="tab-config-f2b" role="tab" data-bs-toggle="tab">{{ lang.admin.f2b_parameters }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-quarantine" aria-selected="false" aria-controls="tab-config-quarantine" role="tab" data-bs-toggle="tab">{{ lang.admin.quarantine }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-quota" aria-selected="false" aria-controls="tab-config-quota" role="tab" data-bs-toggle="tab">{{ lang.admin.quota_notifications }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-rsettings" aria-selected="false" aria-controls="tab-config-rsettings" role="tab" data-bs-toggle="tab">{{ lang.admin.rspamd_settings_map }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-password-policy" aria-selected="false" aria-controls="tab-config-password-policy" role="tab" data-bs-toggle="tab">{{ lang.admin.password_policy }}</button></li>
-      <li><button class="dropdown-item" data-bs-target="#tab-config-customize" aria-selected="false" aria-controls="tab-config-customize" role="tab" data-bs-toggle="tab">{{ lang.admin.customize }}</button></li>
-    </ul>
-  </li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-routing" aria-selected="false" aria-controls="tab-routing" role="tab" data-bs-toggle="tab">{{ lang.admin.routing }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-sys-mails" aria-selected="false" aria-controls="tab-sys-mails" role="tab" data-bs-toggle="tab">{{ lang.admin.sys_mails }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-mailq" aria-selected="false" aria-controls="tab-mailq" role="tab" data-bs-toggle="tab">{{ lang.admin.queue_manager }}</button></li>
-  <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.rspamd_global_filters }}</a>
-    <ul class="dropdown-menu">
-      <li><button class="dropdown-item" data-bs-target="#tab-globalfilter-regex" aria-selected="false" aria-controls="tab-globalfilter-regex" role="tab" data-bs-toggle="tab">{{ lang.admin.regex_maps }}</button></li>
-    </ul>
-  </li>
-</ul>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.configuration }}</a>
+      <ul class="dropdown-menu">
+        <li><button class="dropdown-item" data-bs-target="#tab-config-dkim" aria-selected="false" aria-controls="tab-config-dkim" role="tab" data-bs-toggle="tab">{{ lang.admin.dkim_keys }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-fwdhosts" aria-selected="false" aria-controls="tab-config-fwdhosts" role="tab" data-bs-toggle="tab">{{ lang.admin.forwarding_hosts }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-f2b" aria-selected="false" aria-controls="tab-config-f2b" role="tab" data-bs-toggle="tab">{{ lang.admin.f2b_parameters }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-quarantine" aria-selected="false" aria-controls="tab-config-quarantine" role="tab" data-bs-toggle="tab">{{ lang.admin.quarantine }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-quota" aria-selected="false" aria-controls="tab-config-quota" role="tab" data-bs-toggle="tab">{{ lang.admin.quota_notifications }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-rsettings" aria-selected="false" aria-controls="tab-config-rsettings" role="tab" data-bs-toggle="tab">{{ lang.admin.rspamd_settings_map }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-password-policy" aria-selected="false" aria-controls="tab-config-password-policy" role="tab" data-bs-toggle="tab">{{ lang.admin.password_policy }}</button></li>
+        <li><button class="dropdown-item" data-bs-target="#tab-config-customize" aria-selected="false" aria-controls="tab-config-customize" role="tab" data-bs-toggle="tab">{{ lang.admin.customize }}</button></li>
+      </ul>
+    </li>
+    <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-routing" aria-selected="false" aria-controls="tab-routing" role="tab" data-bs-toggle="tab">{{ lang.admin.routing }}</button></li>
+    <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-sys-mails" aria-selected="false" aria-controls="tab-sys-mails" role="tab" data-bs-toggle="tab">{{ lang.admin.sys_mails }}</button></li>
+    <li role="presentation" class="nav-item"><button class="nav-link" data-bs-target="#tab-mailq" aria-selected="false" aria-controls="tab-mailq" role="tab" data-bs-toggle="tab">{{ lang.admin.queue_manager }}</button></li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.admin.rspamd_global_filters }}</a>
+      <ul class="dropdown-menu">
+        <li><button class="dropdown-item" data-bs-target="#tab-globalfilter-regex" aria-selected="false" aria-controls="tab-globalfilter-regex" role="tab" data-bs-toggle="tab">{{ lang.admin.regex_maps }}</button></li>
+      </ul>
+    </li>
+  </ul>
+
+  <div class="row">
+    <div class="col-md-12">
+      <div class="tab-content" style="padding-top:20px">
+        {% include 'admin/tab-config-admins.twig' %}
+        {# {% include 'admin/tab-ldap.twig' %} #}
+        {% include 'admin/tab-config-oauth2.twig' %}
+        {% include 'admin/tab-config-rspamd.twig' %}
+        {% include 'admin/tab-routing.twig' %}
+        {% include 'admin/tab-config-dkim.twig' %}
+        {% include 'admin/tab-config-fwdhosts.twig' %}
+        {% include 'admin/tab-config-f2b.twig' %}
+        {% include 'admin/tab-config-quarantine.twig' %}
+        {% include 'admin/tab-config-quota.twig' %}
+        {% include 'admin/tab-config-rsettings.twig' %}
+        {% include 'admin/tab-config-customize.twig' %}
+        {% include 'admin/tab-config-password-policy.twig' %}
+        {% include 'admin/tab-sys-mails.twig' %}
+        {% include 'admin/tab-mailq.twig' %}
+        {% include 'admin/tab-globalfilter-regex.twig' %}
+      </div>
+    </div> <!-- /col-md-12 -->
+  </div> <!-- /row -->
+</div> 
 
-<div class="row">
-  <div class="col-md-12">
-    <div class="tab-content" style="padding-top:20px">
-      {% include 'admin/tab-config-admins.twig' %}
-      {% include 'admin/tab-ldap.twig' %}
-      {% include 'admin/tab-config-oauth2.twig' %}
-      {% include 'admin/tab-config-rspamd.twig' %}
-      {% include 'admin/tab-routing.twig' %}
-      {% include 'admin/tab-config-dkim.twig' %}
-      {% include 'admin/tab-config-fwdhosts.twig' %}
-      {% include 'admin/tab-config-f2b.twig' %}
-      {% include 'admin/tab-config-quarantine.twig' %}
-      {% include 'admin/tab-config-quota.twig' %}
-      {% include 'admin/tab-config-rsettings.twig' %}
-      {% include 'admin/tab-config-customize.twig' %}
-      {% include 'admin/tab-config-password-policy.twig' %}
-      {% include 'admin/tab-sys-mails.twig' %}
-      {% include 'admin/tab-mailq.twig' %}
-      {% include 'admin/tab-globalfilter-regex.twig' %}
-    </div>
-  </div> <!-- /col-md-12 -->
-</div> <!-- /row -->
-  
 {% include 'modals/admin.twig' %}
 
 <script type='text/javascript'>
diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index 8b5fa414..7d431317 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -1,9 +1,14 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-config-admins" role="tabpanel" aria-labelledby="tab-config-admins">
     <div class="card mb-4">
-      <div class="card-header bg-danger text-white">{{ lang.admin.admin_details }}</div>
-      <div class="card-body">
+      <div class="card-header bg-danger text-white d-flex">
+        <button class="btn d-md-none text-white flex-grow-1 text-start" data-bs-target="#collapse-tab-config-admins" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-admins">
+          {{ lang.admin.admin_details }}
+        </button>
+        <span class="d-none d-md-block">{{ lang.admin.admin_details }}</span>
+      </div>
+      <div id="collapse-tab-config-admins" class="card-body collapse show" data-bs-parent="#admin-content">
         <table id="adminstable" class="table table-striped dt-responsive w-100"></table>
-        <div class="mass-actions-admin">
+        <div class="mass-actions-admin mb-4">
           <div class="btn-group">
             <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
             <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -32,7 +37,7 @@
             <br>
           </div>
         </div>
-        <div class="row">
+        <div class="row mb-3">
           <div class="col-sm-3 col-5 text-end">{{ lang.tfa.set_tfa }}:</div>
           <div class="col-sm-9 col-7">
             <select data-style="btn btn-sm dropdown-toggle bs-placeholder btn-secondary" data-width="fit" id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
@@ -48,7 +53,7 @@
         <legend style="margin-top:20px">
           <i class="bi bi-shield-fill-check"></i>
           {{ lang.fido2.fido2_auth }}</legend><hr />
-        <div class="row">
+        <div class="row mb-3">
           <div class="col-sm-3 col-12 text-sm-end text-start mb-4">{{ lang.fido2.known_ids }}:</div>
           <div class="col-sm-9 col-12">
             <div class="table-responsive">
@@ -75,8 +80,8 @@
             </div>
           </div>
         </div>
-        <br>
-        <div class="row" id="status-fido2">
+
+        <div class="row mb-3" id="status-fido2">
           <div class="col-sm-3 col-5 text-end">{{ lang.fido2.register_status }}:</div>
           <div class="col-sm-9 col-7">
             <div id="fido2-alerts">-</div>
@@ -88,7 +93,7 @@
           <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.guid_and_license }}
         </legend>
         <hr />
-        <div id="license" class="collapse">
+        <div id="license" class="collapse mb-5">
           <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
             <div class="row">
               <label class="control-label col-sm-3" for="guid">{{ lang.admin.guid }}:</label>
@@ -127,7 +132,7 @@
               <p class="text-muted">{{ lang.admin.api_info|raw }}</p>
             </div>
             <div class="col-lg-6">
-              <div class="card">
+              <div class="card mb-3">
                 <div class="card-header">
                   <h4 class="card-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
                 </div>
@@ -172,7 +177,7 @@
               </div>
             </div>
             <div class="col-lg-6">
-              <div class="card">
+              <div class="card mb-3">
                 <div class="card-header">
                   <h4 class="card-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
                 </div>
@@ -222,8 +227,13 @@
     </div>
 
   <div class="card mb-4">
-    <div class="card-header">{{ lang.admin.domain_admins }}</div>
-    <div class="card-body">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-dadmins" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-dadmins">
+        {{ lang.admin.domain_admins }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.domain_admins }}</span>
+    </div>
+    <div id="collapse-tab-config-dadmins" class="card-body collapse" data-bs-parent="#admin-content">
       <table id="domainadminstable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group">
diff --git a/data/web/templates/admin/tab-config-customize.twig b/data/web/templates/admin/tab-config-customize.twig
index 5dc16a55..1452a370 100644
--- a/data/web/templates/admin/tab-config-customize.twig
+++ b/data/web/templates/admin/tab-config-customize.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-customize" role="tabpanel" aria-labelledby="tab-config-customize">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.customize }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-customize" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-customize">
+        {{ lang.admin.customize }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.customize }}</span>
+    </div>
+    <div id="collapse-tab-config-customize" class="card-body collapse" data-bs-parent="#admin-content">
       <legend><i class="bi bi-file-image"></i> {{ lang.admin.change_logo }}</legend><hr />
       <p class="text-muted">{{ lang.admin.logo_info }}</p>
       <form class="form-inline" role="form" method="post" enctype="multipart/form-data">
diff --git a/data/web/templates/admin/tab-config-dkim.twig b/data/web/templates/admin/tab-config-dkim.twig
index 872cddd5..90684e79 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-dkim" role="tabpanel" aria-labelledby="tab-config-dkim">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.dkim_keys }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-dkim" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-dkim">
+        {{ lang.admin.dkim_keys }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.dkim_keys }}</span>
+    </div>
+    <div id="collapse-tab-config-dkim" class="card-body collapse" data-bs-parent="#admin-content">
       <div class="btn-group" data-bs-toggle="button" style="margin-bottom: 20px;">
         <a class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary active" href="#" data-bs-toggle="collapse" data-bs-target=".dkim_key_valid">{{ lang.admin.dkim_key_valid }}</a>
         <a class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary active" href="#" data-bs-toggle="collapse" data-bs-target=".dkim_key_unused">{{ lang.admin.dkim_key_unused }}</a>
diff --git a/data/web/templates/admin/tab-config-f2b.twig b/data/web/templates/admin/tab-config-f2b.twig
index fb433ac3..09adb830 100644
--- a/data/web/templates/admin/tab-config-f2b.twig
+++ b/data/web/templates/admin/tab-config-f2b.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-f2b" role="tabpanel" aria-labelledby="tab-config-f2b">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.f2b_parameters }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-f2b" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-f2b">
+        {{ lang.admin.f2b_parameters }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.f2b_parameters }}</span>
+    </div>
+    <div id="collapse-tab-config-f2b" class="card-body collapse" data-bs-parent="#admin-content">
       <form class="form" data-id="f2b" role="form" method="post">
         <div class="mb-4">
           <label for="f2b_ban_time">{{ lang.admin.f2b_ban_time }}:</label>
diff --git a/data/web/templates/admin/tab-config-fwdhosts.twig b/data/web/templates/admin/tab-config-fwdhosts.twig
index 07f77deb..71087c4d 100644
--- a/data/web/templates/admin/tab-config-fwdhosts.twig
+++ b/data/web/templates/admin/tab-config-fwdhosts.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-fwdhosts" role="tabpanel" aria-labelledby="tab-config-fwdhosts">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.forwarding_hosts }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-fwdhosts" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-fwdhosts">
+        {{ lang.admin.forwarding_hosts }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.forwarding_hosts }}</span>
+    </div>
+    <div id="collapse-tab-config-fwdhosts" class="card-body collapse" data-bs-parent="#admin-content">
       <p style="margin-bottom:40px">{{ lang.admin.forwarding_hosts_hint }}</p>
       <table id="forwardinghoststable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
diff --git a/data/web/templates/admin/tab-config-oauth2.twig b/data/web/templates/admin/tab-config-oauth2.twig
index d0aa140d..a2c3ef79 100644
--- a/data/web/templates/admin/tab-config-oauth2.twig
+++ b/data/web/templates/admin/tab-config-oauth2.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-oauth2" role="tabpanel" aria-labelledby="tab-config-oauth2">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.oauth2_apps }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-oauth2" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-oauth2">
+        {{ lang.admin.oauth2_apps }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.oauth2_apps }}</span>
+    </div>
+    <div id="collapse-tab-config-oauth2" class="card-body collapse" data-bs-parent="#admin-content">
       <p>{{ lang.admin.oauth2_info|raw }}</p>
       <table id="oauth2clientstable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
diff --git a/data/web/templates/admin/tab-config-password-policy.twig b/data/web/templates/admin/tab-config-password-policy.twig
index a677b022..075fb75a 100644
--- a/data/web/templates/admin/tab-config-password-policy.twig
+++ b/data/web/templates/admin/tab-config-password-policy.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-password-policy" role="tabpanel" aria-labelledby="tab-config-password-policy">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.password_policy }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-password-policy" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-password-policy">
+        {{ lang.admin.password_policy }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.password_policy }}</span>
+    </div>
+    <div id="collapse-tab-config-password-policy" class="card-body collapse" data-bs-parent="#admin-content">
       <form class="form-horizontal" data-id="passwordpolicy" role="form" method="post">
         {% for name, value in password_complexity %}
           {% if name == 'length' %}
diff --git a/data/web/templates/admin/tab-config-quarantine.twig b/data/web/templates/admin/tab-config-quarantine.twig
index 31c0259b..54d49e0c 100644
--- a/data/web/templates/admin/tab-config-quarantine.twig
+++ b/data/web/templates/admin/tab-config-quarantine.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-quarantine" role="tabpanel" aria-labelledby="tab-config-quarantine">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.quarantine }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-quarantine" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-quarantine">
+        {{ lang.admin.quarantine }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.quarantine }}</span>
+    </div>
+    <div id="collapse-tab-config-quarantine" class="card-body collapse" data-bs-parent="#admin-content">
       {% if not q_data.retention_size or not q_data.max_size %}
       <div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div>
       {% endif %}
diff --git a/data/web/templates/admin/tab-config-quota.twig b/data/web/templates/admin/tab-config-quota.twig
index c8df9e97..a0b5dfa9 100644
--- a/data/web/templates/admin/tab-config-quota.twig
+++ b/data/web/templates/admin/tab-config-quota.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-quota" role="tabpanel" aria-labelledby="tab-config-quota">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.quota_notifications }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-quota" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-quota">
+        {{ lang.admin.quota_notifications }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.quota_notifications }}</span>
+    </div>
+    <div id="collapse-tab-config-quota" class="card-body collapse" data-bs-parent="#admin-content">
       <p>{{ lang.admin.quota_notifications_info }}</p>
       <form class="form" role="form" data-id="quota_notification" method="post">
         <div class="row mb-4">
@@ -26,7 +31,7 @@
             <hr />
             <div id="quota_template" class="collapse">
               <!-- <small>{{ lang.admin.quota_notifications_vars }}</small><br><br>-->
-              <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code collapse in" rows="20" name="html_tmpl">{{ qn_data.html_tmpl|raw }}</textarea>
+              <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code" rows="20" name="html_tmpl">{{ qn_data.html_tmpl|raw }}</textarea>
             </div>
           </div>
         </div>
diff --git a/data/web/templates/admin/tab-config-rsettings.twig b/data/web/templates/admin/tab-config-rsettings.twig
index 7ba22ae3..a741574b 100644
--- a/data/web/templates/admin/tab-config-rsettings.twig
+++ b/data/web/templates/admin/tab-config-rsettings.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-rsettings" role="tabpanel" aria-labelledby="tab-config-rsettings">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.rspamd_settings_map }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-rsettings" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-rsettings">
+        {{ lang.admin.rspamd_settings_map }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.rspamd_settings_map }}</span>
+    </div>
+    <div id="collapse-tab-config-rsettings" class="card-body collapse" data-bs-parent="#admin-content">
       <legend data-bs-target="#active_settings_map" style="cursor:pointer" unselectable="on" data-bs-toggle="collapse">
         <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.active_rspamd_settings_map }}
       </legend>
diff --git a/data/web/templates/admin/tab-config-rspamd.twig b/data/web/templates/admin/tab-config-rspamd.twig
index 31cb39cc..cd74ad29 100644
--- a/data/web/templates/admin/tab-config-rspamd.twig
+++ b/data/web/templates/admin/tab-config-rspamd.twig
@@ -1,9 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-rspamd" role="tabpanel" aria-labelledby="tab-config-rspamd">
-  <div class="card">
-    <div class="card-header">
-      <h3 class="card-title">Rspamd UI</h3>
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-rspamd" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-rspamd">
+        Rspamd UI
+      </button>
+      <span class="d-none d-md-block">Rspamd UI</span>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-config-rspamd" class="card-body collapse" data-bs-parent="#admin-content">
       <div class="row">
         <div class="col-12 d-flex d-sm-none mb-4">
           <img class="img-responsive mx-auto" src="/img/rspamd_logo.png" alt="Rspamd UI">
diff --git a/data/web/templates/admin/tab-globalfilter-regex.twig b/data/web/templates/admin/tab-globalfilter-regex.twig
index e0d90a54..bfeedb05 100644
--- a/data/web/templates/admin/tab-globalfilter-regex.twig
+++ b/data/web/templates/admin/tab-globalfilter-regex.twig
@@ -1,9 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-globalfilter-regex" role="tabpanel" aria-labelledby="tab-globalfilter-regex">
-  <div class="card">
-    <div class="card-header">
-      {{ lang.admin.rspamd_global_filters }}
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-regex" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-regex">
+        {{ lang.admin.rspamd_global_filters }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.rspamd_global_filters }}</span>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-config-regex" class="card-body collapse" data-bs-parent="#admin-content">
       <p>{{ lang.admin.rspamd_global_filters_info }}</p>
       <div id="confirm_show_rspamd_global_filters"{% if show_rspamd_global_filters %} class="d-none"{% endif %}>
         <div class="row">
@@ -36,8 +39,10 @@
           </div>
           <div class="row">
             <div class="offset-sm-3 col-sm-9">
-              <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary validate_rspamd_regex" data-regex-map="{{ rspamd_regex_map.map }}" href="#">{{ lang.add.validate }}</button>
-              <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success submit_rspamd_regex" data-action="edit_selected" data-id="{{ rspamd_regex_map.map }}" data-item="{{ rspamd_regex_map.map }}" data-api-url='edit/rspamd-map' data-api-attr='{}' href="#" disabled>{{ lang.edit.save }}</button>
+              <div class="btn-group">
+                <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary validate_rspamd_regex" data-regex-map="{{ rspamd_regex_map.map }}" href="#">{{ lang.add.validate }}</button>
+                <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success submit_rspamd_regex" data-action="edit_selected" data-id="{{ rspamd_regex_map.map }}" data-item="{{ rspamd_regex_map.map }}" data-api-url='edit/rspamd-map' data-api-attr='{}' href="#" disabled>{{ lang.edit.save }}</button>
+              </div>
             </div>
           </div>
         </form>
diff --git a/data/web/templates/admin/tab-ldap.twig b/data/web/templates/admin/tab-ldap.twig
index d01529d3..41f4a0b9 100644
--- a/data/web/templates/admin/tab-ldap.twig
+++ b/data/web/templates/admin/tab-ldap.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-ldap-admins" role="tabpanel" aria-labelledby="tab-config-ldap-admins">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.admins_ldap }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-ldap-admins" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-ldap-admins">
+        {{ lang.admin.admins_ldap }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.admins_ldap }}</span>
+    </div>
+    <div id="collapse-tab-config-ldap-admins" class="card-body collapse" data-bs-parent="#admin-content">
     </div>
   </div>
 </div>
diff --git a/data/web/templates/admin/tab-mailq.twig b/data/web/templates/admin/tab-mailq.twig
index 115ecce2..67ec436d 100644
--- a/data/web/templates/admin/tab-mailq.twig
+++ b/data/web/templates/admin/tab-mailq.twig
@@ -1,12 +1,15 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailq" role="tabpanel" aria-labelledby="tab-mailq">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.admin.queue_manager }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start me-2" data-bs-target="#collapse-tab-mailq" data-bs-toggle="collapse" aria-controls="ollapse-tab-mailq">
+        {{ lang.admin.queue_manager }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.queue_manager }} <span class="badge bg-info table-lines"></span></span>
       <div class="btn-group ms-auto">
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_queue" data-table="queuetable">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-mailq" class="card-body collapse" data-bs-parent="#admin-content">
       <table id="queuetable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group">
diff --git a/data/web/templates/admin/tab-routing.twig b/data/web/templates/admin/tab-routing.twig
index 6d8a9682..ea551612 100644
--- a/data/web/templates/admin/tab-routing.twig
+++ b/data/web/templates/admin/tab-routing.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-routing" role="tabpanel" aria-labelledby="tab-routing">
   <div class="card mb-4">
-    <div class="card-header">{{ lang.admin.relayhosts }}</div>
-    <div class="card-body">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-routing" data-bs-toggle="collapse" aria-controls="ollapse-tab-routing">
+        {{ lang.admin.relayhosts }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.relayhosts }}</span>
+    </div>
+    <div id="collapse-tab-routing" class="card-body collapse" data-bs-parent="#admin-content">
       <p style="margin-bottom:40px">{{ lang.admin.relayhosts_hint|raw }}</p>
       <table id="relayhoststable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
@@ -41,8 +46,13 @@
   </div>
 
   <div class="card mb-4">
-    <div class="card-header">{{ lang.admin.transport_maps }}</div>
-    <div class="card-body">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-maps" data-bs-toggle="collapse" aria-controls="ollapse-tab-maps">
+        {{ lang.admin.transport_maps }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.transport_maps }}</span>
+    </div>
+    <div id="collapse-tab-maps" class="card-body collapse" data-bs-parent="#admin-content">
       <p style="margin-bottom:40px">{{ lang.admin.transports_hint|raw }}</p>
       <table class="table table-striped table-condensed" id="transportstable"></table>
       <div class="mass-actions-admin">
diff --git a/data/web/templates/admin/tab-sys-mails.twig b/data/web/templates/admin/tab-sys-mails.twig
index ff6e3532..be93d91d 100644
--- a/data/web/templates/admin/tab-sys-mails.twig
+++ b/data/web/templates/admin/tab-sys-mails.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-sys-mails" role="tabpanel" aria-labelledby="tab-sys-mails">
-  <div class="card">
-    <div class="card-header">{{ lang.admin.sys_mails }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-sys-mails" data-bs-toggle="collapse" aria-controls="ollapse-tab-sys-mails">
+        {{ lang.admin.sys_mails }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.admin.sys_mails }}</span>
+    </div>
+    <div id="collapse-tab-sys-mails" class="card-body collapse" data-bs-parent="#admin-content">
       <form class="form-horizontal" autocapitalize="none" data-id="admin" autocorrect="off" role="form" method="post">
         <div class="row mb-2">
           <label class="control-label col-sm-2 text-sm-end" for="admin_mass_from">{{ lang.admin.from }}:</label>
diff --git a/data/web/templates/debug.twig b/data/web/templates/debug.twig
index 24407439..05b2761f 100644
--- a/data/web/templates/debug.twig
+++ b/data/web/templates/debug.twig
@@ -84,11 +84,13 @@
           <div class="card-body">
             <ul class="list-group">
               {% for container, container_info in containers %}
-                <li class="list-group-item">
-                  {{ container }} ({{ container_info.Config.Image }})
-                  <br class="d-block d-sm-none" />
-                  <small>({{ lang.debug.started_on }} <span class="parse_date">{{ container_info.State.StartedAtHR }}</span>)</small>
-                  <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="ms-auto btn btn-xs btn-secondary">{{ lang.debug.restart_container }}
+                <li class="list-group-item d-flex">
+                  <div>
+                    <span>{{ container }}</span>
+                    <span class="d-block d-md-inline">({{ container_info.Config.Image }})</span>
+                    <small class="d-block">({{ lang.debug.started_on }} <span class="parse_date">{{ container_info.State.StartedAtHR }}</span>)</small>
+                  </div>
+                  <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="ms-auto btn btn-xs btn-secondary d-flex align-items-center">{{ lang.debug.restart_container }}
                     <i class="ms-auto bi
                     {% if container_info.State.Running == 1 %}
                     bi-record-fill text-success
@@ -108,7 +110,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-postfix-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">Postfix <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">Postfix
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="1000">+ 1000</button>
@@ -123,7 +125,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-ui">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex"> Mailcow UI <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex"> Mailcow UI
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
@@ -138,7 +140,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-sasl">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">SASL <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">SASL
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
@@ -153,7 +155,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-dovecot-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">Dovecot <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">Dovecot
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="1000">+ 1000</button>
@@ -168,7 +170,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-sogo-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">SOGo <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">SOGo
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="1000">+ 1000</button>
@@ -183,7 +185,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-netfilter-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">Netfilter <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">Netfilter
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="1000">+ 1000</button>
@@ -198,7 +200,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-rspamd-history">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">Rspamd history <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">Rspamd history
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="1000">+ 1000</button>
@@ -218,7 +220,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-autodiscover-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">Autodiscover <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">Autodiscover
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="1000">+ 1000</button>
@@ -233,7 +235,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-watchdog-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">Watchdog <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">Watchdog
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="1000">+ 1000</button>
@@ -248,7 +250,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-acme-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">ACME <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">ACME
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="1000">+ 1000</button>
@@ -263,7 +265,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-api-logs">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">API <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">API
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="1000">+ 1000</button>
@@ -278,7 +280,7 @@
 
       <div role="tabpanel" class="tab-pane" id="tab-api-rl">
         <div class="card panel-xs-lg">
-          <div class="card-header d-flex">Ratelimits <span class="badge bg-info table-lines"></span>
+          <div class="card-header d-flex">Ratelimits
             <div class="btn-group ms-auto">
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="100">+ 100</button>
               <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="1000">+ 1000</button>
@@ -288,7 +290,6 @@
           <div class="card-body">
             <p class="text-muted">{{ lang.admin.hash_remove_info }}</p>
             <table id="rl_log" class="table table-striped dt-responsive w-100"></table>
-            <div class="table-responsive">
           </div>
         </div>
       </div>
diff --git a/data/web/templates/index.twig b/data/web/templates/index.twig
index 96f3f21c..ba91282e 100644
--- a/data/web/templates/index.twig
+++ b/data/web/templates/index.twig
@@ -17,14 +17,14 @@
         <div class="my-4 alert alert-info ">{{ lang.login.mobileconfig_info }}</div>
         {% endif %}
         <form method="post" autofill="off">
-          <div class="d-flex mt-2">
+          <div class="d-flex mt-3">
             <label class="visually-hidden" for="login_user">{{ lang.login.username }}</label>
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-person-fill"></i></div>
               <input name="login_user" autocorrect="off" autocapitalize="none" type="{% if is_mobileconfig %}email{% else %}text{% endif %}" id="login_user" class="form-control" placeholder="{{ lang.login.username }}" required="" autofocus="" autocomplete="username">
             </div>
           </div>
-          <div class="d-flex mt-2">
+          <div class="d-flex mt-3">
             <label class="visually-hidden" for="pass_user">{{ lang.login.password }}</label>
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
diff --git a/data/web/templates/mailbox.twig b/data/web/templates/mailbox.twig
index 182dcd78..ccf46846 100644
--- a/data/web/templates/mailbox.twig
+++ b/data/web/templates/mailbox.twig
@@ -1,46 +1,48 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<ul class="nav nav-tabs" role="tablist">
-  <li class="nav-item" role="presentation"><button class="nav-link active" aria-selected="false" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
-  {#  <li class="nav-item dropdown" role="presentation">
-  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}</a>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
-    <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailbox-defaults" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailbox-defaults">{{ lang.mailbox.mailbox_defaults }}</button></li>
-  </ul>
-  </li> #}
-  <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-resources" role="tab" data-bs-toggle="tab" data-bs-target="#tab-resources">{{ lang.mailbox.resources }}</button></li>
-  <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-target="#">{{ lang.mailbox.aliases }}</a>
+<div id="mail-content" class="responsive-tabs">
+  <ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item" role="presentation"><button class="nav-link active" aria-selected="false" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
+    {#  <li class="nav-item dropdown" role="presentation">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}</a>
     <ul class="dropdown-menu">
-      <li role="presentation"><button class="dropdown-item" aria-selected="false" aria-controls="tab-mbox-aliases" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mbox-aliases">{{ lang.mailbox.aliases }}</button></li>
-      <li role="presentation"><button class="dropdown-item" aria-selected="false" aria-controls="tab-domain-aliases" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domain-aliases">{{ lang.mailbox.domain_aliases }}</button></li>
+      <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
+      <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailbox-defaults" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailbox-defaults">{{ lang.mailbox.mailbox_defaults }}</button></li>
     </ul>
-  </li>
-  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-syncjobs" role="tab" data-bs-toggle="tab" data-bs-target="#tab-syncjobs">{{ lang.mailbox.sync_jobs }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-filters" role="tab" data-bs-toggle="tab" data-bs-target="#tab-filters">{{ lang.mailbox.filters }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-bcc" role="tab" data-bs-toggle="tab" data-bs-target="#tab-bcc">{{ lang.mailbox.address_rewriting }}</button></li>
-  <li class="nav-item" role="presentation"{% if mailcow_cc_role != 'admin' %} class="d-none"{% endif %}><button class="nav-link" aria-selected="false" aria-controls="tab-tls-policy" role="tab" data-bs-toggle="tab" data-bs-target="#tab-tls-policy">{{ lang.mailbox.tls_policy_maps }}</button></li>
-</ul>
+    </li> #}
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-resources" role="tab" data-bs-toggle="tab" data-bs-target="#tab-resources">{{ lang.mailbox.resources }}</button></li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-target="#">{{ lang.mailbox.aliases }}</a>
+      <ul class="dropdown-menu">
+        <li role="presentation"><button class="dropdown-item" aria-selected="false" aria-controls="tab-mbox-aliases" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mbox-aliases">{{ lang.mailbox.aliases }}</button></li>
+        <li role="presentation"><button class="dropdown-item" aria-selected="false" aria-controls="tab-domain-aliases" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domain-aliases">{{ lang.mailbox.domain_aliases }}</button></li>
+      </ul>
+    </li>
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-syncjobs" role="tab" data-bs-toggle="tab" data-bs-target="#tab-syncjobs">{{ lang.mailbox.sync_jobs }}</button></li>
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-filters" role="tab" data-bs-toggle="tab" data-bs-target="#tab-filters">{{ lang.mailbox.filters }}</button></li>
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-bcc" role="tab" data-bs-toggle="tab" data-bs-target="#tab-bcc">{{ lang.mailbox.address_rewriting }}</button></li>
+    <li class="nav-item" role="presentation"{% if mailcow_cc_role != 'admin' %} class="d-none"{% endif %}><button class="nav-link" aria-selected="false" aria-controls="tab-tls-policy" role="tab" data-bs-toggle="tab" data-bs-target="#tab-tls-policy">{{ lang.mailbox.tls_policy_maps }}</button></li>
+  </ul>
 
-<div class="row">
-  <div class="col-md-12">
-    <div class="tab-content" style="padding-top:20px">
-      {% include 'mailbox/tab-domains.twig' %}
-      {% include 'mailbox/tab-mailbox-defaults.twig' %}
-      {% include 'mailbox/tab-mailboxes.twig' %}
-      {% include 'mailbox/tab-resources.twig' %}
-      {% include 'mailbox/tab-domain-aliases.twig' %}
-      {% include 'mailbox/tab-mbox-aliases.twig' %}
-      {% include 'mailbox/tab-syncjobs.twig' %}
-      {% include 'mailbox/tab-filters.twig' %}
-      {% include 'mailbox/tab-bcc.twig' %}
-      {% include 'mailbox/tab-tls-policy.twig' %}
-    </div> <!-- /tab-content -->
-  </div> <!-- /col-md-12 -->
-</div> <!-- /row -->
+  <div class="row">
+    <div class="col-md-12">
+      <div class="tab-content" style="padding-top:20px">
+        {% include 'mailbox/tab-domains.twig' %}
+        {# {% include 'mailbox/tab-mailbox-defaults.twig' %} #}
+        {% include 'mailbox/tab-mailboxes.twig' %}
+        {% include 'mailbox/tab-resources.twig' %}
+        {% include 'mailbox/tab-domain-aliases.twig' %}
+        {% include 'mailbox/tab-mbox-aliases.twig' %}
+        {% include 'mailbox/tab-syncjobs.twig' %}
+        {% include 'mailbox/tab-filters.twig' %}
+        {% include 'mailbox/tab-bcc.twig' %}
+        {% include 'mailbox/tab-tls-policy.twig' %}
+      </div> <!-- /tab-content -->
+    </div> <!-- /col-md-12 -->
+  </div> <!-- /row -->
+</div>
 
 {% include 'modals/mailbox.twig' %}
 
diff --git a/data/web/templates/mailbox/tab-bcc.twig b/data/web/templates/mailbox/tab-bcc.twig
index 78b7eb9d..e25fdfd2 100644
--- a/data/web/templates/mailbox/tab-bcc.twig
+++ b/data/web/templates/mailbox/tab-bcc.twig
@@ -1,13 +1,17 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-bcc" role="tabpanel" aria-labelledby="tab-bcc">
   <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.bcc_maps }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-bcc" data-bs-toggle="collapse" aria-controls="collapse-tab-bcc">
+        {{ lang.mailbox.bcc_maps }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.bcc_maps }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.bcc_maps }}" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-bcc" class="card-body collapse" data-bs-parent="#mail-content">
       <p class="text-muted">{{ lang.mailbox.bcc_info|raw }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
       <table id="bcc_table" class="table table-striped dt-responsive w-100"></table>
@@ -29,15 +33,19 @@
       </div>
     </div>
   </div>
-  <div class="card{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
+  <div class="card mb-4{% if mailcow_cc_role != 'admin' %} d-none{% endif %}">
     <div class="card-header d-flex">
-      {{ lang.mailbox.recipient_maps }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-bcc-filters" data-bs-toggle="collapse" aria-controls="collapse-tab-bcc-filters">
+        {{ lang.mailbox.recipient_maps }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.recipient_maps }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_recipient_map_table" data-table="recipient_map_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-bcc-filters" class="card-body collapse" data-bs-parent="#mail-content">
       <p class="text-muted">{{ lang.mailbox.recipient_map_info }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
       <table id="recipient_map_table" class="table table-striped dt-responsive w-100"></table>
diff --git a/data/web/templates/mailbox/tab-domain-aliases.twig b/data/web/templates/mailbox/tab-domain-aliases.twig
index 0374b7d5..f8ecbd93 100644
--- a/data/web/templates/mailbox/tab-domain-aliases.twig
+++ b/data/web/templates/mailbox/tab-domain-aliases.twig
@@ -1,13 +1,17 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-domain-aliases" role="tabpanel" aria-labelledby="tab-domain-aliases">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.domain_aliases }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-domain-aliases" data-bs-toggle="collapse" aria-controls="ollapse-tab-domain-aliases">
+        {{ lang.mailbox.domain_aliases }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.domain_aliases }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_aliasdomain_table" data-table="aliasdomain_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-domain-aliases" class="card-body collapse" data-bs-parent="#mail-content">
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
       <table id="aliasdomain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig
index 98c1823f..99692a3f 100644
--- a/data/web/templates/mailbox/tab-domains.twig
+++ b/data/web/templates/mailbox/tab-domains.twig
@@ -1,7 +1,11 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-domains" role="tabpanel" aria-labelledby="tab-domains">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.domains }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-domains" data-bs-toggle="collapse" aria-controls="collapse-tab-domains">
+        {{ lang.mailbox.domains }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.domains }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         {% if mailcow_cc_role == 'admin' %}
           <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
@@ -9,7 +13,7 @@
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_domain_table" data-table="domain_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-domains" class="card-body collapse show" data-bs-parent="#mail-content">
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
       <table id="domain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
index 56e6d54a..bafbd8e7 100644
--- a/data/web/templates/mailbox/tab-filters.twig
+++ b/data/web/templates/mailbox/tab-filters.twig
@@ -1,13 +1,17 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-filters" role="tabpanel" aria-labelledby="tab-filters">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.filters }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-filters" data-bs-toggle="collapse" aria-controls="collapse-tab-filters">
+        {{ lang.mailbox.filters }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.filters }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.filters }}" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-filters" class="card-body collapse" data-bs-parent="#mail-content">
       <p class="text-muted">{{ lang.mailbox.sieve_info|raw }}</p><br>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
       <table id="filter_table" class="table table-striped dt-responsive w-100"></table>
diff --git a/data/web/templates/mailbox/tab-mailbox-defaults.twig b/data/web/templates/mailbox/tab-mailbox-defaults.twig
index f5fd98d5..e7ef33ad 100644
--- a/data/web/templates/mailbox/tab-mailbox-defaults.twig
+++ b/data/web/templates/mailbox/tab-mailbox-defaults.twig
@@ -1,9 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailbox-defaults" role="tabpanel" aria-labelledby="tab-mailbox-defaults">
-  <div class="card">
-    <div class="card-header">
-      {{ lang.mailbox.mailbox_defaults }}
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-mailbox-defaults" data-bs-toggle="collapse" aria-controls="collapse-tab-mailbox-defaults">
+        {{ lang.mailbox.mailbox_defaults }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.mailbox_defaults }} <span class="badge bg-info table-lines"></span></span>
     </div>
-    <div class="card-body text-muted">
+    <div id="collapse-tab-mailbox-defaults" class="card-body collapse text-muted" data-bs-parent="#mail-content">
       {{ lang.mailbox.mailbox_defaults_info }}
     </div>
   </div>
diff --git a/data/web/templates/mailbox/tab-mailboxes.twig b/data/web/templates/mailbox/tab-mailboxes.twig
index 20734825..6ce65beb 100644
--- a/data/web/templates/mailbox/tab-mailboxes.twig
+++ b/data/web/templates/mailbox/tab-mailboxes.twig
@@ -1,17 +1,21 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailboxes" role="tabpanel" aria-labelledby="tab-mailboxes">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.mailboxes }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-mailboxes" data-bs-toggle="collapse" aria-controls="collapse-tab-mailboxes">
+        {{ lang.mailbox.mailboxes }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.mailboxes }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_mailbox_table" data-table="mailbox_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-mailboxes" class="card-body collapse" data-bs-parent="#mail-content">
       <div class="mass-actions-mailbox d-none d-sm-flex" data-actions-header="true"></div>
       <table id="mailbox_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
-        <div class="btn-group d-block d-md-none">
+        <div class="btn-group d-flex d-md-none">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
diff --git a/data/web/templates/mailbox/tab-mbox-aliases.twig b/data/web/templates/mailbox/tab-mbox-aliases.twig
index b91003b5..7c215049 100644
--- a/data/web/templates/mailbox/tab-mbox-aliases.twig
+++ b/data/web/templates/mailbox/tab-mbox-aliases.twig
@@ -1,13 +1,17 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mbox-aliases" role="tabpanel" aria-labelledby="tab-mbox-aliases">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.aliases }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-mbox-aliases" data-bs-toggle="collapse" aria-controls="collapse-tab-mbox-aliases">
+        {{ lang.mailbox.aliases }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.aliases }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_alias_table" data-table="alias_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-mbox-aliases" class="card-body collapse" data-bs-parent="#mail-content">
       <p class="text-muted">{{ lang.mailbox.alias_domain_alias_hint|raw }}</p>
       <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
       <table id="alias_table" class="table table-striped dt-responsive w-100"></table>
diff --git a/data/web/templates/mailbox/tab-resources.twig b/data/web/templates/mailbox/tab-resources.twig
index f2f60bb1..458c0d5f 100644
--- a/data/web/templates/mailbox/tab-resources.twig
+++ b/data/web/templates/mailbox/tab-resources.twig
@@ -1,16 +1,20 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-resources" role="tabpanel" aria-labelledby="tab-resources">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.resources }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-resources" data-bs-toggle="collapse" aria-controls="collapse-tab-resources">
+        {{ lang.mailbox.resources }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.resources }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_resource_table" data-table="resource_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
-      <p><span class="badge fs-5 bg-success text-muted">{{ lang.mailbox.booking_0_short }}</span> - {{ lang.mailbox.booking_null }}</p>
-      <p><span class="badge fs-5 bg-warning text-muted">{{ lang.mailbox.booking_lt0_short }}</span> - {{ lang.mailbox.booking_ltnull }}</p>
-      <p><span class="badge fs-5 bg-danger text-muted">{{ lang.mailbox.booking_custom_short }}</span> - {{ lang.mailbox.booking_custom }}</p>
+    <div id="collapse-tab-resources" class="card-body collapse" data-bs-parent="#mail-content">
+      <p><span class="badge fs-6 bg-success">{{ lang.mailbox.booking_0_short }}</span> - {{ lang.mailbox.booking_null }}</p>
+      <p><span class="badge fs-6 bg-warning">{{ lang.mailbox.booking_lt0_short }}</span> - {{ lang.mailbox.booking_ltnull }}</p>
+      <p><span class="badge fs-6 bg-danger">{{ lang.mailbox.booking_custom_short }}</span> - {{ lang.mailbox.booking_custom }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
       <table id="resource_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
diff --git a/data/web/templates/mailbox/tab-syncjobs.twig b/data/web/templates/mailbox/tab-syncjobs.twig
index 30e5b8fd..8cad94d9 100644
--- a/data/web/templates/mailbox/tab-syncjobs.twig
+++ b/data/web/templates/mailbox/tab-syncjobs.twig
@@ -1,13 +1,17 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-syncjobs"  role="tabpanel" aria-labelledby="tab-syncjobs">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.sync_jobs }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-syncjobs" data-bs-toggle="collapse" aria-controls="collapse-tab-syncjobs">
+        {{ lang.mailbox.sync_jobs }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.sync_jobs }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button data-acl="{{ acl.syncjobs }}" class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_sync_job_table" data-table="sync_job_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-syncjobs" class="card-body collapse" data-bs-parent="#mail-content">
       <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
       <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
diff --git a/data/web/templates/mailbox/tab-tls-policy.twig b/data/web/templates/mailbox/tab-tls-policy.twig
index addc6c62..f20410de 100644
--- a/data/web/templates/mailbox/tab-tls-policy.twig
+++ b/data/web/templates/mailbox/tab-tls-policy.twig
@@ -1,13 +1,17 @@
 <div role="tabpanel" class="tab-pane fade{% if mailcow_cc_role != 'admin' %} d-none{% endif %}" id="tab-tls-policy" role="tabpanel" aria-labelledby="tab-tls-policy">
-  <div class="card">
+  <div class="card mb-4">
     <div class="card-header d-flex">
-      {{ lang.mailbox.tls_policy_maps_long }} <span class="badge bg-info table-lines"></span>
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-tls-policy" data-bs-toggle="collapse" aria-controls="collapse-tab-tls-policy">
+        {{ lang.mailbox.tls_policy_maps_long }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.tls_policy_maps_long }} <span class="badge bg-info table-lines"></span></span>
+
       <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_tls_policy_table" data-table="tls_policy_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="card-body">
+    <div id="collapse-tab-tls-policy" class="card-body collapse" data-bs-parent="#mail-content">
       <p class="text-muted">{{ lang.mailbox.tls_policy_maps_info|raw }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
       <table id="tls_policy_table" class="table table-striped dt-responsive w-100"></table>
diff --git a/data/web/templates/modals/admin.twig b/data/web/templates/modals/admin.twig
index a51e2731..85f06853 100644
--- a/data/web/templates/modals/admin.twig
+++ b/data/web/templates/modals/admin.twig
@@ -1,6 +1,6 @@
 <!-- add settings rule modal -->
 <div class="modal fade" id="addRsettingModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.admin.add_settings_rule }}</h3>
@@ -42,7 +42,7 @@
 </div><!-- add settings rule modal -->
 <!-- add domain admin modal -->
 <div class="modal fade" id="addDomainAdminModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.admin.add_domain_admin }}</h3>
@@ -98,7 +98,7 @@
 </div><!-- add domain admin modal -->
 <!-- change fido2 fn -->
 <div class="modal fade" id="fido2ChangeFn" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.fido2.set_fn }}</h3>
@@ -126,7 +126,7 @@
 </div><!-- add domain admin modal -->
 <!-- add oauth2 client modal -->
 <div class="modal fade" id="addOAuth2ClientModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">OAuth2</h3>
@@ -152,7 +152,7 @@
 </div><!-- add domain admin modal -->
 <!-- add admin modal -->
 <div class="modal fade" id="addAdminModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.admin.add_admin }}</h3>
@@ -198,7 +198,7 @@
 </div><!-- add admin modal -->
 <!-- test transport modal -->
 <div class="modal fade" id="testTransportModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title"><i class="bi bi-info-circle-fill"></i> Transport</h3>
@@ -235,7 +235,7 @@
 </div><!-- test transport modal -->
 <!-- show queue item modal -->
 <div class="modal fade" id="showQueuedMsg" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title"><i class="bi bi-card-checklist" style="font-size:18px"></i> ID <span id="queue_id"></span></h3>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index 432b03a5..dc3ecaea 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -1,6 +1,6 @@
 <!-- add mailbox modal -->
 <div class="modal fade" id="addMailboxModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.add_mailbox }}</h3>
@@ -74,7 +74,7 @@
 </div><!-- add mailbox modal -->
 <!-- add domain modal -->
 <div class="modal fade" id="addDomainModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.add_domain }}</h3>
@@ -206,7 +206,7 @@
 </div><!-- add domain modal -->
 <!-- add resource modal -->
 <div class="modal fade" id="addResourceModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.add_resource }}</h3>
@@ -274,7 +274,7 @@
 </div><!-- add resource modal -->
 <!-- add alias modal -->
 <div class="modal fade" id="addAliasModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.add_alias }}</h3>
@@ -332,7 +332,7 @@
 </div><!-- add alias modal -->
 <!-- add domain alias modal -->
 <div class="modal fade" id="addAliasDomainModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.add_domain_alias }}</h3>
@@ -406,7 +406,7 @@
 </div><!-- add domain alias modal -->
 <!-- add sync job modal -->
 <div class="modal fade" id="addSyncJobModalAdmin" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.add.syncjob }}</h3>
@@ -575,7 +575,7 @@
 </div><!-- add sync job modal -->
 <!-- add add_filter modal -->
 <div class="modal fade" id="addFilterModalAdmin" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">Filter</h3>
@@ -637,7 +637,7 @@
 </div><!-- add add_filter modal -->
 <!-- add add_bcc modal -->
 <div class="modal fade" id="addBCCModalAdmin" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.bcc_maps }}</h3>
@@ -688,7 +688,7 @@
 </div><!-- add add_bcc modal -->
 <!-- add add_recipient_map modal -->
 <div class="modal fade" id="addRecipientMapModalAdmin" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.recipient_maps }}</h3>
@@ -729,7 +729,7 @@
 </div><!-- add add_recipient_map modal -->
 <!-- add add_tls_policy_map modal -->
 <div class="modal fade" id="addTLSPolicyMapAdmin" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.tls_policy_maps }}</h3>
@@ -785,7 +785,7 @@
 </div><!-- add add_tls_policy_map modal -->
 <!-- log modal -->
 <div class="modal fade" id="syncjobLogModal" tabindex="-1" role="dialog" aria-labelledby="syncjobLogModalLabel">
-  <div class="modal-dialog modal-lg" role="document">
+  <div class="modal-dialog modal-xl" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">Log</h3>
@@ -799,7 +799,7 @@
 </div><!-- log modal -->
 <!-- DNS info modal -->
 <div class="modal fade" id="dnsInfoModal" tabindex="-1" role="dialog" aria-labelledby="dnsInfoModalLabel">
-  <div class="modal-dialog modal-lg" role="document">
+  <div class="modal-dialog modal-xl" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.diagnostics.dns_records }}</h3>
diff --git a/data/web/templates/modals/quarantine.twig b/data/web/templates/modals/quarantine.twig
index 4721dcc8..3ccefa59 100644
--- a/data/web/templates/modals/quarantine.twig
+++ b/data/web/templates/modals/quarantine.twig
@@ -1,5 +1,5 @@
 <div class="modal fade" id="qidDetailModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title"><i class="bi bi-info-circle-fill"></i> {{ lang.quarantine.qitem }}</h3>
diff --git a/data/web/templates/modals/user.twig b/data/web/templates/modals/user.twig
index 352715ad..6d95a3c9 100644
--- a/data/web/templates/modals/user.twig
+++ b/data/web/templates/modals/user.twig
@@ -1,6 +1,6 @@
 <!-- change fido2 fn -->
 <div class="modal fade" id="fido2ChangeFn" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.fido2.set_fn }}</h3>
@@ -28,7 +28,7 @@
 </div><!-- add domain admin modal -->
 <!-- add sync job modal -->
 <div class="modal fade" id="addSyncJobModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.add.syncjob }}</h3>
@@ -186,7 +186,7 @@
 </div><!-- add sync job modal -->
 <!-- app passwd modal -->
 <div class="modal fade" id="addAppPasswdModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ lang.add.app_password }}</h3>
@@ -245,7 +245,7 @@
 </div><!-- add app passwd modal -->
 <!-- log modal -->
 <div class="modal fade" id="syncjobLogModal" tabindex="-1" role="dialog" aria-labelledby="syncjobLogModalLabel">
-  <div class="modal-dialog modal-lg" role="document">
+  <div class="modal-dialog modal-xl" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">Log</h3>
diff --git a/data/web/templates/user.twig b/data/web/templates/user.twig
index e4ee3dbf..22cc00d0 100644
--- a/data/web/templates/user.twig
+++ b/data/web/templates/user.twig
@@ -1,34 +1,39 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<!-- Nav tabs -->
-<ul class="nav nav-tabs" role="tablist">
-  <li class="nav-item dropdown" role="presentation">
-    <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.user.mailbox }}</a>
-    <ul class="dropdown-menu">
-      <li><button class="dropdown-item active" role="tab" aria-selected="true" aria-controls="tab-user-auth" data-bs-toggle="tab" data-bs-target="#tab-user-auth">{{ lang.user.mailbox_general }}</button></li>
-      <li><button class="dropdown-item" role="tab" aria-selected="false" aria-controls="tab-config-fwdhosts" data-bs-toggle="tab" data-bs-target="#tab-user-details">{{ lang.user.mailbox_details }}</button></li>
-      <li><button class="dropdown-item" role="tab" aria-selected="false" aria-controls="tab-config-f2b" data-bs-toggle="tab" data-bs-target="#tab-user-settings">{{ lang.user.mailbox_settings }}</button></li>
-    </ul>
-  </li>
-  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="SpamAliases" role="tab" data-bs-toggle="tab" data-bs-target="#SpamAliases">{{ lang.user.spam_aliases }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Spamfilter" role="tab" data-bs-toggle="tab" data-bs-target="#Spamfilter">{{ lang.user.spamfilter }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Syncjobs" role="tab" data-bs-toggle="tab" data-bs-target="#Syncjobs">{{ lang.user.sync_jobs }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="AppPasswds" role="tab" data-bs-toggle="tab" data-bs-target="#AppPasswds">{{ lang.user.app_passwds }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Pushover" role="tab" data-bs-toggle="tab" data-bs-target="#Pushover">Pushover API</button></li>
-</ul>
-<hr>
+<div id="user-content" class="responsive-tabs">
+  <!-- Nav tabs -->
+  <ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item dropdown" role="presentation">
+      <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ lang.user.mailbox }}</a>
+      <ul class="dropdown-menu">
+        <li><button class="dropdown-item active" role="tab" aria-selected="true" aria-controls="tab-user-auth" data-bs-toggle="tab" data-bs-target="#tab-user-auth">{{ lang.user.mailbox_general }}</button></li>
+        <li><button class="dropdown-item" role="tab" aria-selected="false" aria-controls="tab-config-fwdhosts" data-bs-toggle="tab" data-bs-target="#tab-user-details">{{ lang.user.mailbox_details }}</button></li>
+        <li><button class="dropdown-item" role="tab" aria-selected="false" aria-controls="tab-config-f2b" data-bs-toggle="tab" data-bs-target="#tab-user-settings">{{ lang.user.mailbox_settings }}</button></li>
+      </ul>
+    </li>
+    <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="SpamAliases" role="tab" data-bs-toggle="tab" data-bs-target="#SpamAliases">{{ lang.user.spam_aliases }}</button></li>
+    <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Spamfilter" role="tab" data-bs-toggle="tab" data-bs-target="#Spamfilter">{{ lang.user.spamfilter }}</button></li>
+    <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Syncjobs" role="tab" data-bs-toggle="tab" data-bs-target="#Syncjobs">{{ lang.user.sync_jobs }}</button></li>
+    <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="AppPasswds" role="tab" data-bs-toggle="tab" data-bs-target="#AppPasswds">{{ lang.user.app_passwds }}</button></li>
+    <li class="nav-item" role="presentation"><button class="nav-link" role="tab" aria-selected="false" aria-controls="Pushover" role="tab" data-bs-toggle="tab" data-bs-target="#Pushover">Pushover API</button></li>
+  </ul>
 
-<div class="tab-content">
-  {% include 'user/tab-user-auth.twig' %}
-  {% include 'user/tab-user-details.twig' %}
-  {% include 'user/tab-user-settings.twig' %}
-  {% include 'user/SpamAliases.twig' %}
-  {% include 'user/Spamfilter.twig' %}
-  {% include 'user/Syncjobs.twig' %}
-  {% include 'user/AppPasswds.twig' %}
-  {% include 'user/Pushover.twig' %}
+  <div class="row">
+    <div class="col-md-12">
+      <div class="tab-content" style="padding-top:20px">
+        {% include 'user/tab-user-auth.twig' %}
+        {% include 'user/tab-user-details.twig' %}
+        {% include 'user/tab-user-settings.twig' %}
+        {% include 'user/SpamAliases.twig' %}
+        {% include 'user/Spamfilter.twig' %}
+        {% include 'user/Syncjobs.twig' %}
+        {% include 'user/AppPasswds.twig' %}
+        {% include 'user/Pushover.twig' %}
+      </div>
+    </div>
+  </div>
+  <div style="margin-bottom:200px;"></div>
+  {% include 'user_domainadmin_common.twig' %}
 </div>
-<div style="margin-bottom:200px;"></div>
-{% include 'user_domainadmin_common.twig' %}
-{% endblock %}
+  {% endblock %}
diff --git a/data/web/templates/user/AppPasswds.twig b/data/web/templates/user/AppPasswds.twig
index d1e31ad3..032e8bee 100644
--- a/data/web/templates/user/AppPasswds.twig
+++ b/data/web/templates/user/AppPasswds.twig
@@ -1,11 +1,14 @@
 <div role="tabpanel" class="tab-pane fade" id="AppPasswds" role="tabpanel" aria-labelledby="AppPasswds">
-  <div class="card">
-    <div class="card-header">{{ lang.user.app_passwds }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-AppPasswds" data-bs-toggle="collapse" aria-controls="collapse-tab-AppPasswds">
+        {{ lang.user.app_passwds }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.app_passwds }}
+    </div>
+    <div id="collapse-tab-AppPasswds" class="card-body collapse" data-bs-parent="#user-content">
       <p>{{ lang.user.app_hint|raw }}</p>
-      <div class="table-responsive">
-        <table class="table table-striped" id="app_passwd_table"></table>
-      </div>
+      <table id="app_passwd_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-user">
         <div class="btn-group" data-acl="{{ acl.app_passwds }}">
           <div class="btn-group">
diff --git a/data/web/templates/user/Pushover.twig b/data/web/templates/user/Pushover.twig
index 5fdca3e8..2a0eb341 100644
--- a/data/web/templates/user/Pushover.twig
+++ b/data/web/templates/user/Pushover.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="Pushover" role="tabpanel" aria-labelledby="Pushover">
-  <div class="card">
-    <div class="card-header">Pushover API</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-Pushover" data-bs-toggle="collapse" aria-controls="collapse-tab-Pushover">
+        Pushover API
+      </button>
+      <span class="d-none d-md-block">Pushover API
+    </div>
+    <div id="collapse-tab-Pushover" class="card-body collapse" data-bs-parent="#user-content">
       <form data-id="pushover" class="form well" method="post">
         <input type="hidden" value="0" name="evaluate_x_prio">
         <input type="hidden" value="0" name="only_x_prio">
diff --git a/data/web/templates/user/SpamAliases.twig b/data/web/templates/user/SpamAliases.twig
index 9695ee46..a7eb0a44 100644
--- a/data/web/templates/user/SpamAliases.twig
+++ b/data/web/templates/user/SpamAliases.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
-  <div class="card">
-    <div class="card-header">{{ lang.user.spam_aliases }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-SpamAliases" data-bs-toggle="collapse" aria-controls="collapse-tab-SpamAliases">
+        {{ lang.user.spam_aliases }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.spam_aliases }}
+    </div>
+    <div id="collapse-tab-SpamAliases" class="card-body collapse" data-bs-parent="#user-content">
       <div class="row">
         <div class="col-md-12 col-sm-12 col-12">
           <table id="tla_table" class="table table-striped dt-responsive w-100"></table>
diff --git a/data/web/templates/user/Spamfilter.twig b/data/web/templates/user/Spamfilter.twig
index 89e72919..d13ce567 100644
--- a/data/web/templates/user/Spamfilter.twig
+++ b/data/web/templates/user/Spamfilter.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="Spamfilter" role="tabpanel" aria-labelledby="Spamfilter">
-  <div class="card">
-    <div class="card-header">{{ lang.user.spamfilter }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-Spamfilter" data-bs-toggle="collapse" aria-controls="collapse-tab-Spamfilter">
+        {{ lang.user.spamfilter }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.spamfilter }}
+    </div>
+    <div id="collapse-tab-Spamfilter" class="card-body collapse" data-bs-parent="#user-content">
       <h4>{{ lang.user.spamfilter_behavior }}</h4>
       <div class="row">
         <div class="col-sm-12">
@@ -34,7 +39,7 @@
       </div>
       <hr>
       <div class="row">
-        <div class="col-sm-6">
+        <div class="col-sm-6 my-3">
           <h4>{{ lang.user.spamfilter_wl }}</h4>
           <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
           <form class="form-inline mb-4" data-id="add_wl_policy_mailbox">
@@ -45,9 +50,7 @@
               </span>
             </div>
           </form>
-          <div class="table-responsive">
-            <table class="table table-striped table-condensed" id="wl_policy_mailbox_table"></table>
-          </div>
+          <table id="wl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>
           <div class="mass-actions-user">
             <div class="btn-group" data-acl="{{ acl.spam_policy }}">
               <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
@@ -55,7 +58,7 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-6">
+        <div class="col-sm-6 my-3">
           <h4>{{ lang.user.spamfilter_bl }}</h4>
           <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
           <form class="form-inline mb-4" data-id="add_bl_policy_mailbox">
@@ -66,9 +69,7 @@
               </span>
             </div>
           </form>
-          <div class="table-responsive">
-            <table class="table table-striped table-condensed" id="bl_policy_mailbox_table"></table>
-          </div>
+          <table id="bl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>
           <div class="mass-actions-user">
             <div class="btn-group" data-acl="{{ acl.spam_policy }}">
               <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
diff --git a/data/web/templates/user/Syncjobs.twig b/data/web/templates/user/Syncjobs.twig
index 628b9e78..0588949e 100644
--- a/data/web/templates/user/Syncjobs.twig
+++ b/data/web/templates/user/Syncjobs.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="Syncjobs" role="tabpanel" aria-labelledby="Syncjobs">
-  <div class="card">
-    <div class="card-header">{{ lang.user.sync_jobs }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-Syncjobs" data-bs-toggle="collapse" aria-controls="collapse-tab-Syncjobs">
+        {{ lang.user.sync_jobs }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.sync_jobs }}
+    </div>
+    <div id="collapse-tab-Syncjobs" class="card-body collapse" data-bs-parent="#user-content">
       <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-user">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">
diff --git a/data/web/templates/user/tab-user-auth.twig b/data/web/templates/user/tab-user-auth.twig
index 5787c04a..51745f1b 100644
--- a/data/web/templates/user/tab-user-auth.twig
+++ b/data/web/templates/user/tab-user-auth.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-user-auth" role="tabpanel" aria-labelledby="tab-user-auth">
-  <div class="card">
-    <div class="card-header">{{ lang.user.mailbox_general }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-user-auth" data-bs-toggle="collapse" aria-controls="collapse-tab-user-auth">
+        {{ lang.user.mailbox_general }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.mailbox_general }}
+    </div>
+    <div id="collapse-tab-user-auth" class="card-body collapse show" data-bs-parent="#user-content">
       {% if not skip_sogo %}
       <div class="row">
         <div class="d-none d-sm-flex col-md-3 col-5 text-end"></div>
@@ -22,11 +27,11 @@
         <div class="d-none d-sm-flex col-md-3 col-5 text-end"></div>
         <div class="col-md-9 col-12">
           <p class="text-muted text-muted-mt-0">{{ lang.user.direct_protocol_access|raw }}</p>
-          {% if mailboxdata.attributes.imap_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.smtp_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sieve_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">Sieve <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">Sieve <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.pop3_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">POP3 <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">POP3 <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sogo_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">SOGo <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">SOGo <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.imap_access == 1 %}<div class="badge fs-6 bg-success">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.smtp_access == 1 %}<div class="badge fs-6 bg-success">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.sieve_access == 1 %}<div class="badge fs-6 bg-success">Sieve <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">Sieve <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.pop3_access == 1 %}<div class="badge fs-6 bg-success">POP3 <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">POP3 <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.sogo_access == 1 %}<div class="badge fs-6 bg-success">SOGo <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-6 bg-danger">SOGo <i class="bi bi-x-lg"></i></div>{% endif %}
         </div>
       </div>
       <hr>
diff --git a/data/web/templates/user/tab-user-details.twig b/data/web/templates/user/tab-user-details.twig
index 95e2b680..48d2577e 100644
--- a/data/web/templates/user/tab-user-details.twig
+++ b/data/web/templates/user/tab-user-details.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-details" role="tabpanel" aria-labelledby="tab-user-details">
-  <div class="card">
-    <div class="card-header">{{ lang.user.mailbox_details }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-user-details" data-bs-toggle="collapse" aria-controls="collapse-tab-user-details">
+        {{ lang.user.mailbox_details }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.mailbox_details }}
+    </div>
+    <div id="collapse-tab-user-details" class="card-body collapse" data-bs-parent="#user-content">
       <div class="row">
         <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
           <p class="small">{{ lang.user.direct_aliases_desc }}</p>
diff --git a/data/web/templates/user/tab-user-settings.twig b/data/web/templates/user/tab-user-settings.twig
index a427df17..14f06b71 100644
--- a/data/web/templates/user/tab-user-settings.twig
+++ b/data/web/templates/user/tab-user-settings.twig
@@ -1,7 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-settings" role="tabpanel" aria-labelledby="tab-user-settings">
-  <div class="card">
-    <div class="card-header">{{ lang.user.mailbox_settings }}</div>
-    <div class="card-body">
+  <div class="card mb-4">
+    <div class="card-header d-flex">
+      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-user-settings" data-bs-toggle="collapse" aria-controls="collapse-tab-user-settings">
+        {{ lang.user.mailbox_settings }}
+      </button>
+      <span class="d-none d-md-block">{{ lang.user.mailbox_settings }}
+    </div>
+    <div id="collapse-tab-user-settings" class="card-body collapse" data-bs-parent="#user-content">
       {# Show tagging options #}
       <div class="row">
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tag_handling }}:</div>