NobMail

diff --cc data/web/css/build/013-mailcow.css
index c8c21b18,77556829..67034709
--- a/data/web/css/build/013-mailcow.css
+++ b/data/web/css/build/013-mailcow.css
@@@ -1,299 -1,269 +1,306 @@@
 -@font-face {
 -  font-family: 'Noto Sans';
 -  font-style: normal;
 -  font-weight: 400;
 -  src: local(''),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-regular.woff2') format('woff2'),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-regular.woff') format('woff');
 -}
 -
 -@font-face {
 -  font-family: 'Noto Sans';
 -  font-style: normal;
 -  font-weight: 700;
 -  src: local(''),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700.woff2') format('woff2'),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700.woff') format('woff');
 -}
 -
 -@font-face {
 -  font-family: 'Noto Sans';
 -  font-style: italic;
 -  font-weight: 400;
 -  src: local(''),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-italic.woff2') format('woff2'),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-italic.woff') format('woff');
 -}
 -
 -@font-face {
 -  font-family: 'Noto Sans';
 -  font-style: italic;
 -  font-weight: 700;
 -  src: local(''),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700italic.woff2') format('woff2'),
 -       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700italic.woff') format('woff');
 -}
 -#maxmsgsize { min-width: 80px; }
 -#slider1 .slider-selection {
 -	background: #FFD700;
 -}
 -#slider1 .slider-track-high {
 -	background: #FF4500;
 -}
 -#slider1 .slider-track-low {
 -  background: #66CD00;
 -}
 -.striped:nth-child(odd) {
 -  background-color: #fff;
 -}
 -.striped:nth-child(even) {
 -  background-color: #fafafa;
 -  border:1px solid white;
 -}
 -.btn {
 -  text-transform: none;
 -}
 -.btn * {
 -  pointer-events: none;
 -}
 -.textarea-code {
 -  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
 -  background:transparent !important;
 -}
 -.navbar-nav {
 -  margin: 0;
 -}
 -.navbar-nav .nav-link {
 -  height: 44px;
 -  display: flex;
 -  align-items: center;
 -  margin: 0 10px;
 -}
 -.navbar-fixed-bottom .navbar-collapse, 
 -.navbar-fixed-top .navbar-collapse {
 -  max-height: 1000px
 -}
 -.bi {
 -  display: inline-block;
 -  font-size: 12pt;
 -}
 -.btn .bi {
 -  display: inline-block;
 -  font-size: inherit;
 -}
 -.btn-group-xs > .btn, .btn-xs {
 -  padding: .25rem .4rem;
 -  font-size: .875rem;
 -  line-height: 1rem;
 -  border-radius: .2rem;
 -}
 -.icon-spin {
 -  animation-name: spin;
 -  animation-duration: 2000ms;
 -  animation-iteration-count: infinite;
 -  animation-timing-function: linear;
 -  -webkit-animation: spin 2000ms infinite linear;
 -}
 -.dropdown-menu {
 -  font-size: 0.9rem;
 -}
 -@-webkit-keyframes spin {
 -  0% {
 -    -webkit-transform: rotate(0deg);
 -    transform: rotate(0deg);
 -  }
 -  100% {
 -    -webkit-transform: rotate(359deg);
 -    transform: rotate(359deg);
 -  }
 -}
 -@keyframes spin {
 -  0% {
 -    -webkit-transform: rotate(0deg);
 -    transform: rotate(0deg);
 -  }
 -  100% {
 -    -webkit-transform: rotate(359deg);
 -    transform: rotate(359deg);
 -  }
 -}
 -pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
 -/* Fix modal moving content left */
 -body.modal-open {
 -  overflow: inherit;
 -  padding-right: inherit !important;
 -}
 -body {
 -  font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 -  font-size: 10.5pt;
 -  line-height: 1.5;
 -}
 -html {
 -  font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 -  font-size: 10.5pt;
 -  line-height: 1.5;
 -}
 -#mailcow-alert {
 -  position: fixed;
 -  bottom: 8px;
 -  right: 25px;
 -  min-width: 350px;
 -  max-width: 550px;
 -  z-index: 2000;
 -}
 -.input-group-sm .btn { margin-top: 0 !important }
 -legend {
 -  -webkit-user-select: none;
 -  -moz-user-select: none;
 -  -ms-user-select: none;
 -  -o-user-select: none;
 -  user-select: none;
 -  font-size: 1.2rem;
 -}
 -.navbar .navbar-brand {
 -  padding-top: 5px;
 -}
 -.navbar .navbar-brand img {
 -  height: 40px;
 -}
 -.mailcow-logo img {
 -  max-width: 250px;
 -}
 -.lang-link-disabled a  {
 -  pointer-events: none;
 -}
 -.lang-link-disabled  {
 -  cursor: not-allowed;
 -}
 -.overlay {
 -  background: #fff;
 -  position: absolute;
 -  z-index: 10000;
 -  top: 0; right: 0; bottom: 0; left: 0;
 -  opacity: 0.7;
 -}
 -.bootstrap-select.btn-group .no-results {
 -  display: none;
 -}
 -.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary {
 -  color: rgb(197, 197, 197) !important;
 -}
 -.haveibeenpwned {
 -  cursor: pointer;
 -  -webkit-user-select: none;  
 -  -moz-user-select: none;    
 -  -ms-user-select: none;      
 -  user-select: none;
 -}
 -.full-width-select {
 -  width: 100%!important;  
 -}
 -.tooltip {
 -  font-family: inherit;
 -  font-size: 0.8rem;
 -}
 -.progress-bar {
 -  font-size: 0.8rem;
 -  line-height: 14px;
 -}
 -.footer {
 -  margin-top: 27px;
 -  margin-bottom: 20px;
 -  color: #959595;
 -  display: flex;
 -  flex-direction: column;
 -}
 -.footer .version {
 -  margin-left: auto;
 -	margin-top: 20px;
 -}
 -.slave-info {
 -  padding: 15px 0px 15px 15px;
 -  font-weight: bold;
 -}
 -.alert-hr {
 -  margin:3px 0px;
 -  border-bottom:1px solid #f5f5f5!important;
 -  opacity: 0.3;
 -}
 -.btn-input-missing,
 -.btn-input-missing:hover,
 -.btn-input-missing:active,
 -.btn-input-missing:focus,
 -.btn-input-missing:active:hover,
 -.btn-input-missing:active:focus {
 -  color: #000 !important;
 -  background-color: rgba(255, 65, 54, 0.2);
 -  border-color: #ff291c;
 -}
 -.navbar-nav > li {
 -  font-size: 1rem !important;
 -}
 -.dropdown-menu > li > a {
 -  font-size: 1rem !important;
 -}
 -.label {
 -  font-size:inherit;
 -}
 -[class^="bi-"]::before, [class*=" bi-"]::before {
 -  vertical-align: -0.2em !important;
 -}
 -legend > [class^="bi-"]::before, legend > [class*=" bi-"]::before {
 -  vertical-align: 0em !important;
 -}
 -code {
 -  font-size: inherit;
 -}
 -.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
 -  margin-top: 0px;
 -}
 -.flag-icon {
 -  margin-right: 5px;
 -}
 -.dropdown-header {
 -  font-weight: 600;
 -}
 -
 -.dataTables_info {
 -  margin: 15px 0 !important;
 -  padding: 0px !important;
 -}
 -.dataTables_paginate, .dataTables_length, .dataTables_filter {
 -  margin: 15px 0 !important;
 -}
 -.dtr-details {
 -  width: 100%;
 -}
 -.dtr-title {
 -  width: 20%;
 -}
 +@font-face {
 +  font-family: 'Noto Sans';
 +  font-style: normal;
 +  font-weight: 400;
 +  src: local(''),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-regular.woff2') format('woff2'),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-regular.woff') format('woff');
 +}
 +
 +@font-face {
 +  font-family: 'Noto Sans';
 +  font-style: normal;
 +  font-weight: 700;
 +  src: local(''),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700.woff2') format('woff2'),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700.woff') format('woff');
 +}
 +
 +@font-face {
 +  font-family: 'Noto Sans';
 +  font-style: italic;
 +  font-weight: 400;
 +  src: local(''),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-italic.woff2') format('woff2'),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-italic.woff') format('woff');
 +}
 +
 +@font-face {
 +  font-family: 'Noto Sans';
 +  font-style: italic;
 +  font-weight: 700;
 +  src: local(''),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700italic.woff2') format('woff2'),
 +       url('/fonts/noto-sans-v12-latin_greek_cyrillic-700italic.woff') format('woff');
 +}
 +#maxmsgsize { min-width: 80px; }
 +#slider1 .slider-selection {
 +	background: #FFD700;
 +}
 +#slider1 .slider-track-high {
 +	background: #FF4500;
 +}
 +#slider1 .slider-track-low {
 +  background: #66CD00;
 +}
 +.striped:nth-child(odd) {
 +  background-color: #fff;
 +}
 +.striped:nth-child(even) {
 +  background-color: #fafafa;
 +  border:1px solid white;
 +}
 +.btn {
 +  text-transform: none;
 +}
 +.btn * {
 +  pointer-events: none;
 +}
 +.textarea-code {
 +  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
 +  background:transparent !important;
 +}
 +.navbar-nav {
 +  margin: 0;
 +}
++.navbar-nav .nav-link {
++  height: 44px;
++  display: flex;
++  align-items: center;
++  margin: 0 10px;
++}
 +.navbar-fixed-bottom .navbar-collapse, 
 +.navbar-fixed-top .navbar-collapse {
 +  max-height: 1000px
 +}
 +.bi {
 +  display: inline-block;
 +  font-size: 12pt;
 +}
 +.btn .bi {
 +  display: inline-block;
 +  font-size: inherit;
 +}
++.btn-group-xs > .btn, .btn-xs {
++  padding: .25rem .4rem;
++  font-size: .875rem;
++  line-height: 1rem;
++  border-radius: .2rem;
++}
 +.icon-spin {
 +  animation-name: spin;
 +  animation-duration: 2000ms;
 +  animation-iteration-count: infinite;
 +  animation-timing-function: linear;
 +  -webkit-animation: spin 2000ms infinite linear;
 +}
 +.dropdown-menu {
 +  font-size: 0.9rem;
 +}
 +@-webkit-keyframes spin {
 +  0% {
 +    -webkit-transform: rotate(0deg);
 +    transform: rotate(0deg);
 +  }
 +  100% {
 +    -webkit-transform: rotate(359deg);
 +    transform: rotate(359deg);
 +  }
 +}
 +@keyframes spin {
 +  0% {
 +    -webkit-transform: rotate(0deg);
 +    transform: rotate(0deg);
 +  }
 +  100% {
 +    -webkit-transform: rotate(359deg);
 +    transform: rotate(359deg);
 +  }
 +}
 +pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
- .footable-sortable {
-   -webkit-user-select: none;  
-   -moz-user-select: none;    
-   -ms-user-select: none;      
-   user-select: none;
- }
 +/* Fix modal moving content left */
 +body.modal-open {
 +  overflow: inherit;
 +  padding-right: inherit !important;
 +}
 +body {
 +  font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +  font-size: 10.5pt;
 +  line-height: 1.5;
 +}
 +html {
 +  font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 +  font-size: 10.5pt;
 +  line-height: 1.5;
 +}
 +#mailcow-alert {
 +  position: fixed;
 +  bottom: 8px;
 +  right: 25px;
 +  min-width: 350px;
 +  max-width: 550px;
 +  z-index: 2000;
 +}
 +.input-group-sm .btn { margin-top: 0 !important }
 +legend {
 +  -webkit-user-select: none;
 +  -moz-user-select: none;
 +  -ms-user-select: none;
 +  -o-user-select: none;
 +  user-select: none;
 +  font-size: 1.2rem;
 +}
 +.navbar .navbar-brand {
 +  padding-top: 5px;
 +}
 +.navbar .navbar-brand img {
 +  height: 40px;
 +}
 +.mailcow-logo img {
 +  max-width: 250px;
 +}
 +.lang-link-disabled a  {
 +  pointer-events: none;
 +}
 +.lang-link-disabled  {
 +  cursor: not-allowed;
 +}
 +.overlay {
 +  background: #fff;
 +  position: absolute;
 +  z-index: 10000;
 +  top: 0; right: 0; bottom: 0; left: 0;
 +  opacity: 0.7;
 +}
- #top {
-   padding-top: 70px;
- }
 +.bootstrap-select.btn-group .no-results {
 +  display: none;
 +}
- .dropdown-desc {
-   display: block;
-   padding: 3px 10px;
-   clear: both;
-   font-weight: bold;
-   color: #5a5a5a;
-   white-space: nowrap;
++.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary {
++  color: rgb(197, 197, 197) !important;
 +}
 +.haveibeenpwned {
 +  cursor: pointer;
 +  -webkit-user-select: none;  
 +  -moz-user-select: none;    
 +  -ms-user-select: none;      
 +  user-select: none;
 +}
 +.full-width-select {
 +  width: 100%!important;  
 +}
 +.tooltip {
 +  font-family: inherit;
 +  font-size: 0.8rem;
 +}
 +.progress-bar {
 +  font-size: 0.8rem;
 +  line-height: 14px;
 +}
 +.footer {
 +  margin-top: 27px;
 +  margin-bottom: 20px;
 +  color: #959595;
 +  display: flex;
 +  flex-direction: column;
 +}
 +.footer .version {
-     margin-left: auto;
++  margin-left: auto;
 +	margin-top: 20px;
 +}
 +.slave-info {
 +  padding: 15px 0px 15px 15px;
 +  font-weight: bold;
 +}
 +.alert-hr {
 +  margin:3px 0px;
 +  border-bottom:1px solid #f5f5f5!important;
 +  opacity: 0.3;
 +}
 +.btn-input-missing,
 +.btn-input-missing:hover,
 +.btn-input-missing:active,
 +.btn-input-missing:focus,
 +.btn-input-missing:active:hover,
 +.btn-input-missing:active:focus {
 +  color: #000 !important;
-   background-color: #ff4136;
++  background-color: rgba(255, 65, 54, 0.2);
 +  border-color: #ff291c;
 +}
- table.footable>tbody>tr.footable-empty>td {
-   font-style:italic;
-   font-size: 1rem;
- }
- table>tbody>tr>td>span.footable-toggle {
-   opacity: 0.75;
- }
 +.navbar-nav > li {
 +  font-size: 1rem !important;
 +}
 +.dropdown-menu > li > a {
 +  font-size: 1rem !important;
 +}
 +.label {
 +  font-size:inherit;
 +}
 +[class^="bi-"]::before, [class*=" bi-"]::before {
 +  vertical-align: -0.2em !important;
 +}
 +legend > [class^="bi-"]::before, legend > [class*=" bi-"]::before {
 +  vertical-align: 0em !important;
 +}
 +code {
 +  font-size: inherit;
 +}
 +.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
 +  margin-top: 0px;
 +}
 +.flag-icon {
 +  margin-right: 5px;
 +}
++.dropdown-header {
++  font-weight: 600;
++}
++
++.dataTables_info {
++  margin: 15px 0 !important;
++  padding: 0px !important;
++}
++.dataTables_paginate, .dataTables_length, .dataTables_filter {
++  margin: 15px 0 !important;
++}
++.dtr-details {
++  width: 100%;
++}
++.dtr-title {
++  width: 20%;
++}
 +
 +.tag-box {
 +  display: flex;
 +  flex-wrap: wrap;
 +  height: auto;
 +}
 +.tag-badge {
 +  transition: 200ms linear;
 +  margin-top: 5px;
 +  margin-bottom: 5px;
 +  margin-left: 2px;
 +  margin-right: 2px;
 +}
 +.tag-badge.btn-badge {
 +  cursor: pointer;
 +}
 +.tag-badge .bi {
 +  font-size: 12px;
 +}
 +.tag-badge.btn-badge:hover {
 +  filter: brightness(0.9);
 +}
 +.tag-input {
 +  margin-left: 10px;
 +  border: 0;
 +  flex: 1;
 +  height: 24px;
 +  min-width: 150px;
 +}
 +.tag-input:focus {
 +  outline: none;
 +}
 +.tag-add {
 +  padding: 0 5px 0 5px;
 +  align-items: center;
 +  display: inline-flex;
 +}
- 
diff --cc data/web/js/build/012-api.js
index 68a61b2f,8c673f65..763bd97e
--- a/data/web/js/build/012-api.js
+++ b/data/web/js/build/012-api.js
@@@ -353,13 -340,10 +353,10 @@@ $(document).ready(function() 
        $("#ItemsToDelete").empty();
        for (var i in data_array) {
          data_array[i] = decodeURIComponent(data_array[i]);
 -        $("#ItemsToDelete").append("<li>" + data_array[i] + "</li>");
 +        $("#ItemsToDelete").append("<li>" + escapeHtml(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 --cc data/web/js/build/014-mailcow.js
index dc550bb9,8a7898a7..fa66d023
--- a/data/web/js/build/014-mailcow.js
+++ b/data/web/js/build/014-mailcow.js
@@@ -253,71 -274,8 +274,55 @@@ $(document).ready(function() 
      });
    })
  
-   // responsive tabs
-   $('.responsive-tabs').tabCollapse({
-     tabsClass: 'hidden-xs',
-     accordionClass: 'js-tabcollapse-panel-group visible-xs'
-   });
-   $(document).on("shown.bs.collapse shown.bs.tab", function (e) {
- 	  var target = $(e.target);
- 	  if($(window).width() <= 767) {
- 		  var offset = target.offset().top - 112;
- 		  $("html, body").stop().animate({
- 		    scrollTop: offset
- 		  }, 100);
- 	  }
- 	  if(target.hasClass('panel-collapse')){
- 	    var id = e.target.id.replace(/-collapse$/g, '');
- 	    if(id){
-           localStorage.setItem('lastTag', '#'+id);
-         }
-       }
+   // Jquery Datatables, enable responsive plugin
+   $.extend($.fn.dataTable.defaults, {
+     responsive: true
    });
 +
 +  // tag boxes
 +  $('.tag-box .tag-add').click(function(){
 +    addTag(this);
 +  });
 +  $(".tag-box .tag-input").keydown(function (e) {
 +    if (e.which == 13){
 +      e.preventDefault();
 +      addTag(this);
 +    } 
 +  });
 +  function addTag(tagAddElem){
 +    var tagboxElem = $(tagAddElem).parent();
 +    var tagInputElem = $(tagboxElem).find(".tag-input")[0];
 +    var tagValuesElem = $(tagboxElem).find(".tag-values")[0];
 +
 +    var tag = escapeHtml($(tagInputElem).val());
 +    if (!tag) return;
 +    var value_tags = [];
 +    try {
 +      value_tags = JSON.parse($(tagValuesElem).val());
 +    } catch {}
 +    if (!Array.isArray(value_tags)) value_tags = [];
 +    if (value_tags.includes(tag)) return;
 +
 +    $('<span class="badge badge-primary tag-badge btn-badge"><i class="bi bi-tag-fill"></i> ' + tag + '</span>').insertBefore('.tag-input').click(function(){
 +      var del_tag = unescapeHtml($(this).text());
 +      var del_tags = [];
 +      try {
 +        del_tags = JSON.parse($(tagValuesElem).val());
 +      } catch {}
 +      if (Array.isArray(del_tags)){
 +        del_tags.splice(del_tags.indexOf(del_tag), 1);
 +        $(tagValuesElem).val(JSON.stringify(del_tags));
 +      }
 +      $(this).remove();
 +    });
 +
 +    value_tags.push($(tagInputElem).val());
 +    $(tagValuesElem).val(JSON.stringify(value_tags));
 +    $(tagInputElem).val('');
 +  }
  });
 +
 +
 +// http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery
 +function escapeHtml(n){var entityMap={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"}; return String(n).replace(/[&<>"'`=\/]/g,function(n){return entityMap[n]})}
 +function unescapeHtml(t){var n={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#39;":"'","&#x2F;":"/","&#x60;":"`","&#x3D;":"="};return String(t).replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x2F|&#x60|&#x3D;/g,function(t){return n[t]})}
diff --cc data/web/js/site/mailbox.js
index dedbe454,de86e6f9..5cf447fd
--- a/data/web/js/site/mailbox.js
+++ b/data/web/js/site/mailbox.js
@@@ -286,31 -256,24 +222,31 @@@ jQuery(function($)
              item.def_quota_for_mbox = humanFileSize(item.def_quota_for_mbox);
              item.max_quota_for_mbox = humanFileSize(item.max_quota_for_mbox);
              item.chkbox = '<input type="checkbox" data-id="domain" name="multi_select" value="' + encodeURIComponent(item.domain_name) + '" />';
-             item.action = '<div class="btn-group footable-actions">';
+             item.action = '<div class="btn-group">';
              if (role == "admin") {
-               item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+               item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                  '<a href="#" data-action="delete_selected" data-id="single-domain" data-api-url="delete/domain" data-item="' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-                  '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-third btn-info" data-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+                   '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
              }
              else {
-               item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-               '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-half btn-info" data-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+               item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+               '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-half btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
              }
  
 +            if (Array.isArray(item.tags)){
 +              var tags = '';
 +              for (var i = 0; i < item.tags.length; i++)
 +                tags += '<span class="badge badge-primary tag-badge"><i class="bi bi-tag-fill"></i> ' + escapeHtml(item.tags[i]) + '</span>';
 +              item.tags = tags;
 +            }
 +
              if (item.backupmx == 1) {
                if (item.relay_unknown_only == 1) {
-                 item.domain_name = '<div class="label label-info">Relay Non-Local</div> ' + item.domain_name;
+                 item.domain_name = '<div class="badge fs-5 bg-info">Relay Non-Local</div> ' + item.domain_name;
                } else if (item.relay_all_recipients == 1) {
-                 item.domain_name = '<div class="label label-info">Relay All</div> ' + item.domain_name;
+                 item.domain_name = '<div class="badge fs-5 bg-info">Relay All</div> ' + item.domain_name;
                } else {
-                 item.domain_name = '<div class="label label-info">Relay</div> ' + item.domain_name;
+                 item.domain_name = '<div class="badge fs-5 bg-info">Relay</div> ' + item.domain_name;
                }
              }
            });
@@@ -472,50 -438,110 +411,117 @@@
                '<div class="progress-bar-mailbox progress-bar progress-bar-' + item.percent_class + '" role="progressbar" aria-valuenow="' + item.percent_in_use + '" aria-valuemin="0" aria-valuemax="100" ' +
                'style="min-width:2em;width:' + item.percent_in_use + '%">' + item.percent_in_use + '%' + '</div></div>';
              item.username = escapeHtml(item.username);
 +            
 +            if (Array.isArray(item.tags)){
 +              var tags = '';
 +              for (var i = 0; i < item.tags.length; i++)
 +                tags += '<span class="badge badge-primary tag-badge"><i class="bi bi-tag-fill"></i> ' + escapeHtml(item.tags[i]) + '</span>';
 +              item.tags = tags;
 +            }
            });
-         }
-       }),
-       "paging": {
-         "enabled": true,
-         "limit": 5,
-         "size": pagination_size
-       },
-       "state": {
-         "enabled": true
-       },
-       "filtering": {
-         "enabled": true,
-         "delay": 1200,
-         "position": "left",
-         "connectors": false,
-         //"container": "#tab-mailboxes.panel",
-         "placeholder": lang.filter_table
-       },
-       "components": {
-         "filtering": FooTable.domainFilter
-       },
-       "sorting": {
-         "enabled": true
-       },
-       "on": {
-         "destroy.ft.table": function(e, ft){
-           $('.refresh_table').attr('disabled', 'true');
-         },
-         "ready.ft.table": function(e, ft){
-           table_mailbox_ready(ft, 'mailbox_table');
-         },
-         "after.ft.filtering": function(e, ft){
-           table_mailbox_ready(ft, 'mailbox_table');
+ 
+           return json;
          }
        },
-       "toggleSelector": "table tbody span.footable-toggle"
+       columns: [
+           {
+             // placeholder, so checkbox will not block child row toggle
+             title: '',
+             data: null,
+             searchable: false,
+             orderable: false,
+             defaultContent: '',
+             responsivePriority: 1
+           },
+           {
+             title: '',
+             data: 'chkbox',
+             searchable: false,
+             orderable: false,
+             defaultContent: '',
+             responsivePriority: 2
+           },
+           {
+             title: lang.username,
+             data: 'username',
+             responsivePriority: 3
+           },
+           {
+             title: lang.fname,
+             data: 'name'
+           },
+           {
+             title: lang.domain,
+             data: 'domain'
+           },
+           {
+             title: lang.domain_quota,
+             data: 'quota',
+             responsivePriority: 4,
+             render: function (data, type) {
+               data = data.split("/");
+               var of_q = (data[1] == 0 ? "∞" : humanFileSize(data[1]));
+               return humanFileSize(data[0]) + " / " + of_q;
+             }
+           },
+           {
+             title: lang.tls_enforce_in,
+             data: 'tls_enforce_in'
+           },
+           {
+             title: lang.tls_enforce_out,
+             data: 'tls_enforce_out'
+           },
+           {
+             title: 'SMTP',
+             data: 'smtp_access'
+           },
+           {
+             title: 'IMAP',
+             data: 'imap_access'
+           },
+           {
+             title: 'POP3',
+             data: 'pop3_access'
+           },
+           {
+             title: lang.last_mail_login,
+             data: 'last_mail_login'
+           },
+           {
+             title: lang.last_pw_change,
+             data: 'last_pw_change'
+           },
+           {
+             title: lang.quarantine_notification,
+             data: 'quarantine_notification'
+           },
+           {
+             title: lang.quarantine_category,
+             data: 'quarantine_category'
+           },
+           {
+             title: lang.in_use,
+             data: 'in_use'
+           },
+           {
+             title: lang.msg_num,
+             data: 'messages'
+           },
+           {
+             title: lang.active,
+             data: 'active',
+             render: function (data, type) {
+               return 1==data?'<i class="bi bi-check-lg"></i>':(0==data?'<i class="bi bi-x-lg"></i>':2==data&&'&#8212;');
+             }
+           },
+           {
+             title: lang.action,
+             data: 'action',
+             className: 'text-md-end dt-sm-head-hidden dt-body-right',
+             responsivePriority: 5
+           },
+       ]
      });
    }
    function draw_resource_table() {
@@@ -553,43 -567,65 +547,66 @@@
                '</div>';
              item.chkbox = '<input type="checkbox" data-id="resource" name="multi_select" value="' + encodeURIComponent(item.name) + '" />';
              item.name = escapeHtml(item.name);
 +            item.description = escapeHtml(item.description);
            });
-         }
-       }),
-       "paging": {
-         "enabled": true,
-         "limit": 5,
-         "size": pagination_size
-       },
-       "state": {
-         "enabled": true
-       },
-       "filtering": {
-         "enabled": true,
-         "delay": 1200,
-         "position": "left",
-         "connectors": false,
-         "placeholder": lang.filter_table
-       },
-       "components": {
-         "filtering": FooTable.domainFilter
-       },
-       "sorting": {
-         "enabled": true
-       },
-       "on": {
-         "destroy.ft.table": function(e, ft){
-           $('.refresh_table').attr('disabled', 'true');
-         },
-         "ready.ft.table": function(e, ft){
-           table_mailbox_ready(ft, 'resource_table');
-         },
-         "after.ft.filtering": function(e, ft){
-           table_mailbox_ready(ft, 'resource_table');
+ 
+           return json;
          }
        },
-       "toggleSelector": "table tbody span.footable-toggle"
+       columns: [
+           {
+             // placeholder, so checkbox will not block child row toggle
+             title: '',
+             data: null,
+             searchable: false,
+             orderable: false,
+             defaultContent: '',
+             responsivePriority: 1
+           },
+           {
+             title: '',
+             data: 'chkbox',
+             searchable: false,
+             orderable: false,
+             defaultContent: '',
+             responsivePriority: 2
+           },
+           {
+             title: lang.description,
+             data: 'description',
+             responsivePriority: 3
+           },
+           {
+             title: lang.alias,
+             data: 'name'
+           },
+           {
+             title: lang.kind,
+             data: 'kind'
+           },
+           {
+             title: lang.domain,
+             data: 'domain',
+             responsivePriority: 4
+           },
+           {
+             title: lang.multiple_bookings,
+             data: 'multiple_bookings'
+           },
+           {
+             title: lang.active,
+             data: 'active',
+             render: function (data, type) {
+               return 1==data?'<i class="bi bi-check-lg"></i>':(0==data?'<i class="bi bi-x-lg"></i>':2==data&&'&#8212;');
+             }
+           },
+           {
+             title: lang.action,
+             data: 'action',
+             className: 'text-md-end dt-sm-head-hidden dt-body-right',
+             responsivePriority: 5
+           },
+       ]
      });
    }
    function draw_bcc_table() {
@@@ -1023,11 -1083,11 +1064,11 @@@
              if (!item.exclude > 0) {
                item.exclude = '-';
              } else {
 -              item.exclude  = '<code>' + item.exclude + '</code>';
 +              item.exclude  = '<code>' + escapeHtml(item.exclude) + '</code>';
              }
              item.server_w_port = escapeHtml(item.user1) + '@' + item.host1 + ':' + item.port1;
-             item.action = '<div class="btn-group footable-actions">' +
-               '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+             item.action = '<div class="btn-group">' +
+               '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                '</div>';
              item.chkbox = '<input type="checkbox" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
diff --cc data/web/templates/edit/mailbox.twig
index e1c3e883,5c3d54cc..80f0449f
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@@ -169,17 -151,13 +167,13 @@@
          <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
          <div class="col-sm-10">
            <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-             <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
-             role="switch"
-             aria-checked="{% if get_tls_policy.tls_enforce_in == '1' %}true{% else %}false{% endif %}"
 -            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
++            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}">
              data-action="edit_selected"
              data-item="{{ mailbox }}"
              data-id="tls_policy"
              data-api-url='edit/tls_policy'
              data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-             <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
-             role="switch"
-             aria-checked="{% if get_tls_policy.tls_enforce_out == '1' %}true{% else %}false{% endif %}"
 -            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
++            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}">
              data-action="edit_selected"
              data-item="{{ mailbox }}"
              data-id="tls_policy"
diff --cc data/web/templates/modals/mailbox.twig
index 4097145f,dc3ecaea..8c47f02c
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@@ -205,14 -185,13 +205,14 @@@
              </div>
            </div>
            <hr>
-           <div class="form-group">
-             <div class="col-sm-offset-2 col-sm-10 btn-group">
+           <div class="row mb-4">
+             <div class="offset-sm-2 col-sm-10 btn-group">
                {% if not skip_sogo %}
 -              <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{}' href="#">{{ lang.add.add_domain_only }}</button>
 -              <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"restart_sogo":"1"}' href="#">{{ lang.add.add_domain_restart }}</button>
 +              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"tags": []}' href="#">{{ lang.add.add_domain_only }}</button>
 +              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"restart_sogo":"1", "tags": []}' href="#">{{ lang.add.add_domain_restart }}</button>
 +              <div class="clearfix visible-xs"></div>
                {% else %}
 -              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{}' href="#">{{ lang.add.add }}</button>
 +              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"tags": []}' href="#">{{ lang.add.add }}</button>
                {% endif %}
              </div>
            </div>
diff --cc data/web/templates/user/tab-user-auth.twig
index 301f8443,51745f1b..c9b5be4b
--- a/data/web/templates/user/tab-user-auth.twig
+++ b/data/web/templates/user/tab-user-auth.twig
@@@ -117,9 -117,12 +115,9 @@@
        </div>
        <hr>
        <div class="row">
 -        <div class="offset-sm-3 col-sm-9">
 -          {% if mailboxdata.attributes.force_pw_update == '1' %}
 -          <div class="alert alert-danger">{{ lang.user.force_pw_update|raw }}</div>
 -          {% endif %}
 +        <div class="col-sm-offset-3 col-sm-9">
            <p><a target="_blank" href="https://mailcow.github.io/mailcow-dockerized-docs/client/client/#{{ clientconfigstr }}">[{{ lang.user.client_configuration }}]</a></p>
-           <p><a href="#userFilterModal" data-toggle="modal">[{{ lang.user.show_sieve_filters }}]</a></p>
+           <p><a href="#userFilterModal" data-bs-toggle="modal">[{{ lang.user.show_sieve_filters }}]</a></p>
            <hr>
            <h4 class="recent-login-success pull-left">{{ lang.user.recent_successful_connections }}</h4>
            <div class="dropdown pull-left pull-xs-right">