diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin.twig
index ad96c58..863f87e 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin.twig
@@ -1,70 +1,72 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="dropdown active">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.admin.access }}<span class="caret"></span></a>
-    <ul class="dropdown-menu">
-      <li class="active" data-dont-remember="1" role="presentation"><a href="#tab-config-admins" aria-controls="tab-config-admins" role="tab" data-toggle="tab">{{ lang.admin.admins }}</a></li>
-      <!-- <li role="presentation"><a href="#tab-config-ldap-admins" aria-controls="tab-config-ldap-admins" role="tab" data-toggle="tab">{{ lang.admin.admins_ldap }}</a></li> -->
-      <li role="presentation"><a href="#tab-config-oauth2" aria-controls="tab-config-oauth2" role="tab" data-toggle="tab">{{ lang.admin.oauth2_apps }}</a></li>
-      <li role="presentation"><a href="#tab-config-rspamd" aria-controls="tab-config-rspamd" role="tab" data-toggle="tab">Rspamd UI</a></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="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.admin.configuration }}<span class="caret"></span></a>
-    <ul class="dropdown-menu">
-      <li role="presentation"><a href="#tab-config-dkim" aria-controls="tab-config-dkim" role="tab" data-toggle="tab">{{ lang.admin.dkim_keys }}</a></li>
-      <li role="presentation"><a href="#tab-config-fwdhosts" aria-controls="tab-config-fwdhosts" role="tab" data-toggle="tab">{{ lang.admin.forwarding_hosts }}</a></li>
-      <li role="presentation"><a href="#tab-config-f2b" aria-controls="tab-config-f2b" role="tab" data-toggle="tab">{{ lang.admin.f2b_parameters }}</a></li>
-      <li role="presentation"><a href="#tab-config-quarantine" aria-controls="tab-config-quarantine" role="tab" data-toggle="tab">{{ lang.admin.quarantine }}</a></li>
-      <li role="presentation"><a href="#tab-config-quota" aria-controls="tab-config-quota" role="tab" data-toggle="tab">{{ lang.admin.quota_notifications }}</a></li>
-      <li role="presentation"><a href="#tab-config-rsettings" aria-controls="tab-config-rsettings" role="tab" data-toggle="tab">{{ lang.admin.rspamd_settings_map }}</a></li>
-      <li role="presentation"><a href="#tab-config-password-policy" aria-controls="tab-config-password-policy" role="tab" data-toggle="tab">{{ lang.admin.password_policy }}</a></li>
-      <li role="presentation"><a href="#tab-config-customize" aria-controls="tab-config-customize" role="tab" data-toggle="tab">{{ lang.admin.customize }}</a></li>
-    </ul>
-  </li>
-  <li role="presentation"><a href="#tab-routing" aria-controls="tab-routing" role="tab" data-toggle="tab">{{ lang.admin.routing }}</a></li>
-  <li role="presentation"><a href="#tab-sys-mails" aria-controls="tab-sys-mails" role="tab" data-toggle="tab">{{ lang.admin.sys_mails }}</a></li>
-  <li role="presentation"><a href="#tab-mailq" aria-controls="tab-mailq" role="tab" data-toggle="tab">{{ lang.admin.queue_manager }}</a></li>
-  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.admin.rspamd_global_filters }}
-      <span class="caret"></span></a>
-    <ul class="dropdown-menu">
-      <li role="presentation"><a href="#tab-globalfilter-regex" aria-controls="tab-globalfilter-regex" role="tab" data-toggle="tab">{{ lang.admin.regex_maps }}</a></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.options }}</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 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">
-    {% 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> <!-- /col-md-12 -->
-</div> <!-- /row -->
-  
+  <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-globalfilter-regex.twig' %}
+      </div>
+    </div> <!-- /col-md-12 -->
+  </div> <!-- /row -->
+</div> 
+
 {% include 'modals/admin.twig' %}
 
 <script type='text/javascript'>
 var lang = {{ lang_admin|raw }};
+var lang_datatables = {{ lang_datatables|raw }};
 var admin_username = '{{ mailcow_cc_username }}';
 var csrf_token = '{{ csrf_token }}';
 var pagination_size = '{{ pagination_size }}';
 var log_pagination_size = '{{ log_pagination_size }}';
-
 </script>
 {% endblock %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-admins.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-admins.twig
index d7c17c8..0221a8e 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-admins.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-admins.twig
@@ -1,171 +1,140 @@
-<div class="tab-content" style="padding-top:20px">
-  <div role="tabpanel" class="tab-pane active" id="tab-config-admins">
-    <div class="panel panel-danger">
-      <div class="panel-heading xs-show">{{ lang.admin.admin_details }}</div>
-      <div class="panel-body">
-        <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="adminstable"></table>
+<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 d-flex fs-5">
+      <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="collapse-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 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>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="admins" data-api-url='delete/admin' href="#">{{ lang.mailbox.remove }}</a></li>
+          </ul>
+          <a class="btn btn-sm d-block d-sm-inline btn-success" data-id="add_admin" data-bs-toggle="modal" data-bs-target="#addAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_admin }}</a>
         </div>
-        <div class="mass-actions-admin">
-          <div class="btn-group">
-            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" 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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-            <div class="clearfix visible-xs"></div>
-            <ul class="dropdown-menu">
-              <li><a data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-              <li><a data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a data-action="delete_selected" data-id="admins" data-api-url='delete/admin' href="#">{{ lang.mailbox.remove }}</a></li>
-            </ul>
-            <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-id="add_admin" data-toggle="modal" data-target="#addAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_admin }}</a>
-          </div>
-        </div>
+      </div>
 
-        {# TFA #}
-        <legend style="margin-top:20px">
-          {{ lang.tfa.tfa }}
-        </legend>
-        <div class="row">
-          <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.tfa }}:</div>
-          <div class="col-sm-9 col-xs-7">
-            <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
-            {% include 'tfa_keys.twig' %}
-            <br>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.set_tfa }}:</div>
-          <div class="col-sm-9 col-xs-7">
-            <select data-style="btn btn-sm dropdown-toggle bs-placeholder btn-default" data-width="fit" id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
-              <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
-              <option value="u2f">{{ lang.tfa.u2f }}</option>
-              <option value="totp">{{ lang.tfa.totp }}</option>
-              <option value="none">{{ lang.tfa.none }}</option>
-            </select>
-          </div>
-        </div>
-
-        {# FIDO2 #}
-        <legend style="margin-top:20px">
-          <i class="bi bi-shield-fill-check"></i>
-          {{ lang.fido2.fido2_auth }}</legend>
-        <div class="row">
-          <div class="col-sm-3 col-xs-12 text-right text-xs-left space20">{{ lang.fido2.known_ids }}:</div>
-          <div class="col-sm-9 col-xs-12">
-            <div class="table-responsive">
-              <table class="table table-striped table-hover table-condensed" id="fido2_keys">
-                <tr>
-                  <th>ID</th>
-                  <th style="min-width:240px;text-align: right">{{ lang.admin.action }}</th>
-                </tr>
-                {% include 'fido2.twig' %}
-            </table>
-          </div>
+      {# TFA #}
+      <legend style="margin-top:20px">
+        {{ lang.tfa.tfa }}
+      </legend>
+      <hr />
+      <div class="row">
+        <div class="col-sm-3 col-5 text-end">{{ lang.tfa.tfa }}:</div>
+        <div class="col-sm-9 col-7">
+          {% include 'tfa_keys.twig' %}
           <br>
         </div>
       </div>
+      <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 }}">
+            <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
+            <option value="webauthn">{{ lang.tfa.webauthn }}</option>
+            <option value="totp">{{ lang.tfa.totp }}</option>
+            <option value="none">{{ lang.tfa.none }}</option>
+          </select>
+        </div>
+      </div>
+
+      {# FIDO2 #}
+      <legend style="margin-top:20px">
+        <i class="bi bi-shield-fill-check"></i>
+        {{ lang.fido2.fido2_auth }}</legend><hr />
+      <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">
+            <table class="table table-striped table-hover table-condensed" id="fido2_keys">
+              <tr>
+                <th>ID</th>
+                <th style="min-width:240px;text-align: right">{{ lang.admin.action }}</th>
+              </tr>
+              {% include 'fido2.twig' %}
+            </table>
+          </div>
+        </div>
+        <br>
+      </div>
+
       <div class="row">
-        <div class="col-sm-offset-3 col-sm-9">
-          <div class="btn-group nowrap">
-            <button class="btn btn-sm btn-primary visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
-            <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <span class="caret"></span>
-            </button>
+        <div class="offset-sm-3 col-sm-9">
+          <div class="btn-group nowrap mass-actions-admin">
+            <button class="btn btn-sm btn-primary d-block d-sm-inline" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
+            <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
             <ul class="dropdown-menu">
-              <li><a href="#" id="register-fido2-touchid" style="line-height:1.4;"><i class="bi bi-apple"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
+              <li><a class="dropdown-item" href="#" id="register-fido2-touchid"><i class="bi bi-apple"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
             </ul>
           </div>
         </div>
       </div>
-      <br>
-      <div class="row" id="status-fido2">
-        <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.register_status }}:</div>
-        <div class="col-sm-9 col-xs-7">
+
+      <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>
         </div>
         <br>
       </div>
 
-      <legend style="cursor:pointer;margin-top:40px" data-target="#license" unselectable="on" data-toggle="collapse">
-        <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.guid_and_license }}
-      </legend>
-      <div id="license" class="collapse">
-        <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-          <div class="form-group">
-            <label class="control-label col-sm-3" for="guid">{{ lang.admin.guid }}:</label>
-            <div class="col-sm-9">
-              <div class="input-group">
-                <span class="input-group-addon">
-                  <i class="bi bi-suit-heart{% if gal.valid == true %}-fill text-danger{% endif %}"></i>
-                </span>
-                <input type="text" id="guid" class="form-control" value="{{ license_guid }}" readonly>
-              </div>
-              <p class="help-block">
-                {{ lang.admin.customer_id }}: {{ gal.c|default('?')|raw }} -
-                {{ lang.admin.service_id }}: {{ gal.s|default('?')|raw }} -
-                {{ lang.admin.sal_level }}: {{ gal.m|default('?')|raw }}
-              </p>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-offset-3 col-sm-9">
-              <p class="help-block">{{ lang.admin.license_info|raw }}</p>
-              <div class="btn-group">
-                <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="license_validate_now" type="submit" href="#">{{ lang.admin.validate_license_now }}</button>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-
-      <legend style="cursor:pointer;" data-target="#admin_api" unselectable="on" data-toggle="collapse">
+      <legend style="cursor:pointer;margin-top:20px" data-bs-target="#admin_api" unselectable="on" data-bs-toggle="collapse">
         <i style="font-size:10pt;" class="bi bi-plus-square"></i> API
       </legend>
+      <hr />
       <div id="admin_api" class="collapse">
         <div class="row">
           <div class="col-lg-12">
-            <p class="help-block">{{ lang.admin.api_info|raw }}</p>
+            <p class="text-muted">{{ lang.admin.api_info|raw }}</p>
           </div>
           <div class="col-lg-6">
-            <div class="panel panel-default">
-              <div class="panel-heading">
-                <h4 class="panel-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
+            <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>
-              <div class="panel-body">
+              <div class="card-body">
                 <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-                  <div class="form-group">
+                  <div class="row mb-4">
                     <label class="control-label col-sm-3" for="allow_from_ro">{{ lang.admin.api_allow_from }}:</label>
                     <div class="col-sm-9">
                       <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_ro" {% if api.ro.skip_ip_check %}disabled{% endif %} required>{{ api.ro.allow_from }}</textarea>
                     </div>
                   </div>
-                  <div class="form-group">
-                    <div class="col-sm-offset-3 col-sm-9">
+                  <div class="row mb-2">
+                    <div class="offset-sm-3 col-sm-9">
                       <label>
                         <input type="checkbox" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                       </label>
                     </div>
                   </div>
-                  <div class="form-group">
+                  <div class="row mb-4">
                     <label class="control-label col-sm-3">{{ lang.admin.api_key }}:</label>
                     <div class="col-sm-9">
-                      <pre>{{ api.ro.api_key|default('-') }}</pre>
+                      <input type="text" class="form-control" value="{{ api.ro.api_key|default('-') }}" readonly />
                     </div>
                   </div>
-                  <div class="form-group">
-                    <div class="col-sm-offset-3 col-sm-9">
+                  <div class="row mb-2">
+                    <div class="offset-sm-3 col-sm-9">
                       <label>
                         <input type="checkbox" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                       </label>
                     </div>
                   </div>
-                  <div class="form-group">
-                    <div class="col-sm-offset-3 col-sm-9">
+                  <div class="row mb-2">
+                    <div class="offset-sm-3 col-sm-9">
                       <div class="btn-group">
-                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
+                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
                       </div>
                     </div>
                   </div>
@@ -174,43 +143,43 @@
             </div>
           </div>
           <div class="col-lg-6">
-            <div class="panel panel-default">
-              <div class="panel-heading">
-                <h4 class="panel-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
+            <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>
-              <div class="panel-body">
+              <div class="card-body">
                 <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-                  <div class="form-group">
+                  <div class="row mb-4">
                     <label class="control-label col-sm-3" for="allow_from_rw">{{ lang.admin.api_allow_from }}:</label>
                     <div class="col-sm-9">
                       <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_rw" {% if api.rw.skip_ip_check %}disabled{% endif %} required>{{ api.rw.allow_from }}</textarea>
                     </div>
                   </div>
-                  <div class="form-group">
-                    <div class="col-sm-offset-3 col-sm-9">
+                  <div class="row mb-2">
+                    <div class="offset-sm-3 col-sm-9">
                       <label>
                         <input type="checkbox" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                       </label>
                     </div>
                   </div>
-                  <div class="form-group">
+                  <div class="row mb-4">
                     <label class="control-label col-sm-3" for="admin_api_key">{{ lang.admin.api_key }}:</label>
                     <div class="col-sm-9">
-                      <pre>{{ api.rw.api_key|default('-') }}</pre>
+                      <input type="text" class="form-control" value="{{ api.rw.api_key|default('-') }}" readonly />
                     </div>
                   </div>
-                  <div class="form-group">
-                    <div class="col-sm-offset-3 col-sm-9">
+                  <div class="row mb-2">
+                    <div class="offset-sm-3 col-sm-9">
                       <label>
                         <input type="checkbox" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                       </label>
                     </div>
                   </div>
-                  <div class="form-group">
-                    <div class="col-sm-offset-3 col-sm-9">
+                  <div class="row mb-2">
+                    <div class="offset-sm-3 col-sm-9">
                       <div class="btn-group">
-                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="admin_api[rw]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default admin-ays-dialog" name="admin_api_regen_key[rw]" type="submit" {% if not api.rw.api_key %}disabled{% endif %} href="#">{{ lang.admin.regen_api_key }}</button>
+                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" name="admin_api[rw]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[rw]" type="submit" {% if not api.rw.api_key %}disabled{% endif %} href="#">{{ lang.admin.regen_api_key }}</button>
                       </div>
                     </div>
                   </div>
@@ -223,26 +192,28 @@
     </div>
   </div>
 
-  <div class="panel panel-default">
-    <div class="panel-heading xs-show">{{ lang.admin.domain_admins }}</div>
-    <div class="panel-body">
-      <div class="table-responsive">
-        <table class="table table-striped table-condensed" id="domainadminstable"></table>
-      </div>
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="domain_admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
+          <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="domain_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>
           <ul class="dropdown-menu">
-            <li><a data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="delete_selected" data-id="domain_admins" data-api-url='delete/domain-admin' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="domain_admins" data-api-url='delete/domain-admin' href="#">{{ lang.mailbox.remove }}</a></li>
           </ul>
-          <div class="clearfix visible-xs"></div>
-          <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-id="add_domain_admin" data-toggle="modal" data-target="#addDomainAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_domain_admin }}</a>
+          <a class="btn btn-sm d-block d-sm-inline btn-success" data-id="add_domain_admin" data-bs-toggle="modal" data-bs-target="#addDomainAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_domain_admin }}</a>
         </div>
       </div>
     </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-customize.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-customize.twig
index 5427ebd..4ec6aec 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-customize.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-customize.twig
@@ -1,13 +1,18 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-customize">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.customize }}</div>
-    <div class="panel-body">
-      <legend><i class="bi bi-file-image"></i> {{ lang.admin.change_logo }}</legend>
-      <p class="help-block">{{ lang.admin.logo_info }}</p>
+<div role="tabpanel" class="tab-pane fade" id="tab-config-customize" role="tabpanel" aria-labelledby="tab-config-customize">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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">
         <p>
-          <input type="file" name="main_logo" accept="image/gif, image/jpeg, image/pjpeg, image/x-png, image/png, image/svg+xml"><br>
-          <button name="submit_main_logo" type="submit" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default"><i class="bi bi-upload"></i> {{ lang.admin.upload }}</button>
+          <input class="mb-4" type="file" name="main_logo" accept="image/gif, image/jpeg, image/pjpeg, image/x-png, image/png, image/svg+xml"><br>
+          <button name="submit_main_logo" type="submit" class="btn btn-sm d-block d-sm-inline btn-secondary"><i class="bi bi-upload"></i> {{ lang.admin.upload }}</button>
         </p>
       </form>
       {% if logo %}
@@ -16,33 +21,33 @@
             <div class="thumbnail">
               <img class="img-thumbnail" src="{{ logo }}" alt="mailcow logo">
               <div class="caption">
-                <span class="label label-info">{{ logo_specs.geometry.width }}x{{ logo_specs.geometry.height }} px</span>
-                <span class="label label-info">{{ logo_specs.mimetype }}</span>
-                <span class="label label-info">{{ logo_specs.fileSize }}</span>
+                <span class="badge fs-5 bg-info">{{ logo_specs.geometry.width }}x{{ logo_specs.geometry.height }} px</span>
+                <span class="badge fs-5 bg-info">{{ logo_specs.mimetype }}</span>
+                <span class="badge fs-5 bg-info">{{ logo_specs.fileSize }}</span>
               </div>
             </div>
             <hr>
             <form class="form-inline" role="form" method="post">
-              <p><button name="reset_main_logo" type="submit" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default">{{ lang.admin.reset_default }}</button></p>
+              <p><button name="reset_main_logo" type="submit" class="btn btn-sm d-block d-sm-inline btn-secondary">{{ lang.admin.reset_default }}</button></p>
             </form>
           </div>
         </div>
       {% endif %}
-      <legend>{{ lang.admin.app_links }}</legend>
-      <p class="help-block">{{ lang.admin.merged_vars_hint|raw }}</p>
+      <legend>{{ lang.admin.app_links }}</legend><hr />
+      <p class="text-muted">{{ lang.admin.merged_vars_hint|raw }}</p>
       <form class="form-inline" data-id="app_links" role="form" method="post">
         <table class="table table-condensed" style="white-space: nowrap;" id="app_link_table">
           <tr>
             <th>{{ lang.admin.app_name }}</th>
             <th>{{ lang.admin.link }}</th>
-            <th>&nbsp;</th>
+            <th style="width:100px;">&nbsp;</th>
           </tr>
           {% for row in app_links %}
             {% for key, val in row %}
               <tr>
                 <td><input class="input-sm input-xs-lg form-control" data-id="app_links" type="text" name="app" required value="{{ key }}"></td>
                 <td><input class="input-sm input-xs-lg form-control" data-id="app_links" type="text" name="href" required value="{{ val }}"></td>
-                <td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-default" type="button">{{ lang.admin.remove_row }}</a></td>
+                <td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-secondary h-100 w-100" type="button">{{ lang.admin.remove_row }}</a></td>
               </tr>
             {% endfor %}
           {% endfor %}
@@ -50,44 +55,47 @@
             <tr>
               <td><input class="input-sm input-xs-lg form-control" value="{{ app.name }}" disabled></td>
               <td><input class="input-sm input-xs-lg form-control" value="{{ app.link }}" disabled></td>
-              <td>&nbsp;</td>
+              <td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-secondary h-100 w-100 disabled" type="button">{{ lang.admin.remove_row }}</a></td>
             </tr>
           {% endfor %}
         </table>
         <p><div class="btn-group">
-          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-item="admin" data-id="app_links" data-reload="no" data-api-url='edit/app_links' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" type="button" id="add_app_link_row">{{ lang.admin.add_row }}</button>
-          <div class="clearfix visible-xs"></div>
+          <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-item="admin" data-id="app_links" data-reload="no" data-api-url='edit/app_links' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+          <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" type="button" id="add_app_link_row">{{ lang.admin.add_row }}</button>
         </div></p>
       </form>
-      <legend data-target="#ui_texts" style="padding-top:20px" unselectable="on">{{ lang.admin.ui_texts }}</legend>
+      <legend data-bs-target="#ui_texts" style="padding-top:20px" unselectable="on">{{ lang.admin.ui_texts }}</legend><hr />
       <div id="ui_texts">
         <form class="form" data-id="uitexts" role="form" method="post">
-          <div class="form-group">
+          <div class="mb-2">
             <label for="uitests_title_name">{{ lang.admin.title_name }}:</label>
             <input type="text" class="form-control" id="uitests_title_name" name="title_name" placeholder="mailcow UI" value="{{ ui_texts.title_name|raw }}">
           </div>
-          <div class="form-group">
+          <div class="mb-2">
             <label for="uitests_main_name">{{ lang.admin.main_name }}:</label>
             <input type="text" class="form-control" id="uitests_main_name" name="main_name" placeholder="mailcow UI" value="{{ ui_texts.main_name|raw }}">
           </div>
-          <div class="form-group">
+          <div class="mb-2">
             <label for="uitests_apps_name">{{ lang.admin.apps_name }}:</label>
             <input type="text" class="form-control" id="uitests_apps_name" name="apps_name" placeholder="{{ lang.header.apps }}" value="{{ ui_texts.apps_name|raw }}">
           </div>
-          <div class="form-group">
+          <div class="mb-4">
             <label for="help_text">{{ lang.admin.help_text }}:</label>
             <textarea class="form-control" id="help_text" name="help_text" rows="7">{{ ui_texts.help_text|raw }}</textarea>
           </div>
           <hr>
-          <div class="form-group">
-            <p class="help-block">{{ lang.admin.ui_header_announcement_help }}</p>
+          <div>
+            <p class="text-muted">{{ lang.admin.ui_header_announcement_help }}</p>
             <label for="ui_announcement_type">{{ lang.admin.ui_header_announcement }}:</label>
-            <p><select multiple data-width="100%" id="ui_announcement_type" name="ui_announcement_type" class="selectpicker show-tick" data-max-options="1" title="{{ lang.admin.ui_header_announcement_select }}">
-                <option {% if ui_texts.ui_announcement_type == 'info' %}selected{% endif %} value="info">{{ lang.admin.ui_header_announcement_type_info }}</option>
-                <option {% if ui_texts.ui_announcement_type == 'warning' %}selected{% endif %} value="warning">{{ lang.admin.ui_header_announcement_type_warning }}</option>
-                <option {% if ui_texts.ui_announcement_type == 'danger' %}selected{% endif %} value="danger">{{ lang.admin.ui_header_announcement_type_danger }}</option>
-              </select></p>
+            <div class="row">
+              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+                <p><select multiple data-width="100%" id="ui_announcement_type" name="ui_announcement_type" class="selectpicker show-tick" data-max-options="1" title="{{ lang.admin.ui_header_announcement_select }}">
+                    <option {% if ui_texts.ui_announcement_type == 'info' %}selected{% endif %} value="info">{{ lang.admin.ui_header_announcement_type_info }}</option>
+                    <option {% if ui_texts.ui_announcement_type == 'warning' %}selected{% endif %} value="warning">{{ lang.admin.ui_header_announcement_type_warning }}</option>
+                    <option {% if ui_texts.ui_announcement_type == 'danger' %}selected{% endif %} value="danger">{{ lang.admin.ui_header_announcement_type_danger }}</option>
+                  </select></p>
+              </div>
+            </div>
             <p><textarea class="form-control" id="ui_announcement_text" name="ui_announcement_text" rows="7">{{ ui_texts.ui_announcement_text }}</textarea></p>
             <div class="checkbox">
               <label>
@@ -96,11 +104,11 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="mb-4">
             <label for="ui_footer">{{ lang.admin.ui_footer }}:</label>
             <textarea class="form-control" id="ui_footer" name="ui_footer" rows="7">{{ ui_texts.ui_footer }}</textarea>
           </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-item="ui" data-id="uitexts" data-api-url='edit/ui_texts' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+          <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="edit_selected" data-item="ui" data-id="uitexts" data-api-url='edit/ui_texts' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
         </form>
       </div>
     </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-dkim.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-dkim.twig
index 859fe80..8dbccf7 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-dkim.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-dkim.twig
@@ -1,65 +1,77 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-dkim">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.dkim_keys }}</div>
-    <div class="panel-body">
-      <div class="btn-group" data-toggle="button" style="margin-bottom: 20px;">
-        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-toggle="collapse" data-target=".dkim_key_valid">{{ lang.admin.dkim_key_valid }}</a>
-        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-toggle="collapse" data-target=".dkim_key_unused">{{ lang.admin.dkim_key_unused }}</a>
-        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-toggle="collapse" data-target=".dkim_key_missing">{{ lang.admin.dkim_key_missing }}</a>
-        <div class="clearfix visible-xs"></div>
+<div role="tabpanel" class="tab-pane fade" id="tab-config-dkim" role="tabpanel" aria-labelledby="tab-config-dkim">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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 my-4" role="group">
+        <input type="checkbox" id="check-dkim_key_valid" class="btn-check" autocomplete="off" data-bs-toggle="collapse" data-bs-target=".dkim_key_valid" checked>
+        <label class="btn btn-outline-secondary btn-check-label" for="check-dkim_key_valid">{{ lang.admin.dkim_key_valid }}</label>
+
+        <input type="checkbox" id="check-dkim_key_unused" class="btn-check" autocomplete="off" data-bs-toggle="collapse" data-bs-target=".dkim_key_unused" checked>
+        <label class="btn btn-outline-secondary btn-check-label" for="check-dkim_key_unused">{{ lang.admin.dkim_key_unused }}</label>
+
+        <input type="checkbox" id="check-dkim_key_missing" class="btn-check" autocomplete="off" data-bs-toggle="collapse" data-bs-target=".dkim_key_missing" checked>
+        <label class="btn btn-outline-secondary btn-check-label" for="check-dkim_key_missing">{{ lang.admin.dkim_key_missing }}</label>
       </div>
       {% for domain, domain_data in dkim_domains %}
         {% if domain_data.dkim %}
-          <div class="row collapse in dkim_key_valid">
+          <div class="row collapse show dkim_key_valid">
             <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}"></div>
             <div class="col-md-3">
               <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong>
-              <p class="dkim-label"><span class="label label-success">{{ lang.admin.dkim_key_valid }}</span></p>
-              <p class="dkim-label"><span class="label label-primary">{{ lang.admin.dkim_domains_selector }} '{{ domain_data.dkim.dkim_selector }}'</span></p>
-              <p class="dkim-label"><span class="label label-info">{{ domain_data.dkim.length }} bit</span></p>
+              <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
+              <p class="dkim-label"><span class="badge fs-6 bg-primary">{{ lang.admin.dkim_domains_selector }} '{{ domain_data.dkim.dkim_selector }}'</span></p>
+              <p class="dkim-label"><span class="badge fs-6 bg-info">{{ domain_data.dkim.length }} bit</span></p>
               </p>
             </div>
             <div class="col-md-8">
-              <pre>{{ domain_data.dkim.dkim_txt }}</pre>
-              <p data-toggle="modal" data-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> {{ lang.admin.dkim_private_key }}</small></p>
+              <textarea class="form-control" rows="6" readonly>{{ domain_data.dkim.dkim_txt }}</textarea>
+              <small>
+                <i class="bi bi-arrow-return-right"></i> 
+                <a href="#" data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" data-priv-key="{{ domain_data.dkim.privkey }}"> {{ lang.admin.dkim_private_key }}</a>
+              </small>
             </div>
-            <hr class="visible-xs visible-sm">
+            <hr class="d-block d-md-none">
           </div>
         {% else %}
           <div class="row collapse in dkim_key_missing">
             <div class="col-md-1"><input class="dkim_missing" type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}" disabled></div>
             <div class="col-md-3">
-              <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong><br><span class="label label-danger">{{ lang.admin.dkim_key_missing }}</span></p>
+              <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong><br><span class="badge fs-6 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
             </div>
             <div class="col-md-8"><pre>-</pre></div>
-            <hr class="visible-xs visible-sm">
+            <hr class="d-block d-md-none">
           </div>
         {% endif %}
         {% for alias_domain, alias_domain_data in domain_data.alias_domains %}
           {% if alias_domain_data.dkim %}
             <div class="row collapse in dkim_key_valid">
               <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}"></div>
-              <div class="col-md-2 col-md-offset-1">
+              <div class="col-md-2 offset-md-1">
                 <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong></small>
-                <p class="dkim-label"><span class="label label-success">{{ lang.admin.dkim_key_valid }}</span></p>
-                <p class="dkim-label"><span class="label label-primary">Selector '{{ alias_domain_data.dkim.dkim_selector }}'</span></p>
-                <p class="dkim-label"><span class="label label-info">{{ alias_domain_data.dkim.length }} bit</span></p>
+                <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
+                <p class="dkim-label"><span class="badge fs-6 bg-primary">Selector '{{ alias_domain_data.dkim.dkim_selector }}'</span></p>
+                <p class="dkim-label"><span class="badge fs-6 bg-info">{{ alias_domain_data.dkim.length }} bit</span></p>
                 </p>
               </div>
               <div class="col-md-8">
                 <pre>{{ alias_domain_data.dkim.dkim_txt }}</pre>
-                <p data-toggle="modal" data-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ alias_domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
+                <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ alias_domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
               </div>
-              <hr class="visible-xs visible-sm">
+              <hr class="d-block d-md-none">
             </div>
           {% else %}
             <div class="row collapse in dkim_key_missing">
               <div class="col-md-1"><input class="dkim_missing" type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}" disabled></div>
-              <div class="col-md-2 col-md-offset-1">
-                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="label label-danger">{{ lang.admin.dkim_key_missing }}</span></p>
+              <div class="col-md-2 offset-md-1">
+                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="badge fs-6 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
               </div>
               <div class="col-md-8"><pre>-</pre></div>
-              <hr class="visible-xs visible-sm">
+              <hr class="d-block d-md-none">
             </div>
           {% endif %}
         {% endfor %}
@@ -69,82 +81,85 @@
           <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ blind }}"></div>
           <div class="col-md-3">
             <p>{{ lang.admin.domain }}: <strong>{{ blind }}</strong>
-            <p class="dkim-label"><span class="label label-warning">{{ lang.admin.dkim_key_unused }}</span></p>
-            <p class="dkim-label"><span class="label label-primary">Selector '{{ data.dkim.dkim_selector }}'</span></p>
-            <p class="dkim-label"><span class="label label-info">{{ data.dkim.length }} bit</span></p>
+            <p class="dkim-label"><span class="badge fs-6 bg-warning">{{ lang.admin.dkim_key_unused }}</span></p>
+            <p class="dkim-label"><span class="badge fs-6 bg-primary">Selector '{{ data.dkim.dkim_selector }}'</span></p>
+            <p class="dkim-label"><span class="badge fs-6 bg-info">{{ data.dkim.length }} bit</span></p>
             </p>
           </div>
           <div class="col-md-8">
             <pre>{{ data.dkim.dkim_txt }}</pre>
-            <p data-toggle="modal" data-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
+            <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
           </div>
-          <hr class="visible-xs visible-sm">
+          <hr class="d-block d-md-none">
         </div>
       {% endfor %}
 
       <div class="mass-actions-admin">
         <div class="btn-group btn-group-sm">
-          <button type="button" id="toggle_multi_select_all" data-id="dkim" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
-          <button type="button" data-action="delete_selected" name="delete_selected" data-id="dkim" data-api-url="delete/dkim" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger"><i class="bi bi-trash"></i> {{ lang.admin.remove }}</button>
-          <div class="clearfix visible-xs"></div>
+          <button type="button" id="toggle_multi_select_all" data-id="dkim" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button type="button" data-action="delete_selected" name="delete_selected" data-id="dkim" data-api-url="delete/dkim" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-danger"><i class="bi bi-trash"></i> {{ lang.admin.remove }}</button>
         </div>
       </div>
 
-      <legend style="margin-top:40px">{{ lang.admin.dkim_add_key }}</legend>
+      <legend style="margin-top:40px">{{ lang.admin.dkim_add_key }}</legend><hr />
       <form class="form" data-id="dkim" role="form" method="post">
-        <div class="form-group">
+        <div class="mb-4">
           <label for="dkim_add_domains">{{ lang.admin.domain_s }}</label>
           <input class="form-control input-sm" id="dkim_add_domains" name="domains" placeholder="example.org, example.com" required>
           <small><i class="bi bi-arrow-return-right"></i> <a href="#" id="dkim_missing_keys">{{ lang.admin.dkim_domains_wo_keys }}</a></small>
         </div>
-        <div class="form-group">
+        <div class="mb-2">
           <label for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
           <input class="form-control input-sm" id="dkim_selector" name="dkim_selector" value="dkim" required>
         </div>
-        <div class="form-group">
-          <select data-style="btn btn-default btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
-            <option data-subtext="bits">1024</option>
-            <option data-subtext="bits">2048</option>
-          </select>
+        <div class="row mb-4">
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+            <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
+              <option data-subtext="bits">1024</option>
+              <option data-subtext="bits">2048</option>
+            </select>
+          </div>
         </div>
-        <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="add_item" data-id="dkim" data-api-url='add/dkim' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+        <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="add_item" data-id="dkim" data-api-url='add/dkim' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
       </form>
 
-      <legend data-target="#import_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-toggle="collapse">
+      <legend data-bs-target="#import_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-bs-toggle="collapse">
         <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.import_private_key }}
       </legend>
+      <hr />
       <div id="import_dkim" class="collapse">
         <form class="form" data-id="dkim_import" role="form" method="post">
-          <div class="form-group">
+          <div class="mb-2">
             <label for="dkim_import_domain">{{ lang.admin.domain }}:</label>
             <input class="form-control input-sm" id="dkim_import_domain" name="domain" placeholder="example.org" required>
           </div>
-          <div class="form-group">
+          <div class="mb-2">
             <label for="dkim_import_selector">{{ lang.admin.dkim_domains_selector }}:</label>
             <input class="form-control input-sm" id="dkim_import_selector" name="dkim_selector" value="dkim" required>
           </div>
-          <div class="form-group">
+          <div class="mb-4">
             <label for="private_key_file">{{ lang.admin.private_key }}: (RSA PKCS#8)</label>
             <textarea class="form-control input-sm" rows="10" name="private_key_file" id="private_key_file" required placeholder="-----BEGIN RSA KEY-----"></textarea>
           </div>
-          <div class="form-group">
+          <div class="mb-2">
             <label>
               <input type="checkbox" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
             </label>
           </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="add_item" data-id="dkim_import" data-api-url='add/dkim_import' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.import }}</button>
+          <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-action="add_item" data-id="dkim_import" data-api-url='add/dkim_import' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.import }}</button>
         </form>
       </div>
 
-      <legend data-target="#duplicate_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-toggle="collapse">
+      <legend data-bs-target="#duplicate_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-bs-toggle="collapse">
         <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.duplicate_dkim }}
       </legend>
+      <hr />
       <div id="duplicate_dkim" class="collapse">
         <form class="form-horizontal" data-id="dkim_duplicate" role="form" method="post">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="from_domain">{{ lang.admin.dkim_from }}:</label>
-            <div class="col-sm-10">
-              <select data-style="btn btn-default btn-sm"
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="from_domain">{{ lang.admin.dkim_from }}:</label>
+            <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
+              <select data-style="btn btn-secondary btn-sm"
                       data-live-search="true"
                       data-id="dkim_duplicate"
                       title="{{ lang.admin.dkim_from_title }}"
@@ -155,12 +170,12 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="to_domain">{{ lang.admin.dkim_to }}:</label>
-            <div class="col-sm-10">
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="to_domain">{{ lang.admin.dkim_to }}:</label>
+            <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
               <select
                 data-live-search="true"
-                data-style="btn btn-default btn-sm"
+                data-style="btn btn-secondary btn-sm"
                 data-id="dkim_duplicate"
                 title="{{ lang.admin.dkim_to_title }}"
                 name="to_domain" id="to_domain" class="full-width-select form-control" multiple required>
@@ -170,7 +185,7 @@
               </select>
             </div>
           </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="add_item" data-id="dkim_duplicate" data-api-url='add/dkim_duplicate' data-api-attr='{}' href="#"><i class="bi bi-clipboard-plus"></i> {{ lang.admin.duplicate }}</button>
+          <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-action="add_item" data-id="dkim_duplicate" data-api-url='add/dkim_duplicate' data-api-attr='{}' href="#"><i class="bi bi-clipboard-plus"></i> {{ lang.admin.duplicate }}</button>
         </form>
       </div>
     </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-f2b.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-f2b.twig
index 5c4c2a2..bbd3e36 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-f2b.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-f2b.twig
@@ -1,55 +1,60 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-f2b">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.f2b_parameters }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-f2b" role="tabpanel" aria-labelledby="tab-config-f2b">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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="form-group">
+        <div class="mb-4">
           <label for="f2b_ban_time">{{ lang.admin.f2b_ban_time }}:</label>
           <input type="number" class="form-control" id="f2b_ban_time" name="ban_time" value="{{ f2b_data.ban_time }}" required>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <label for="f2b_max_attempts">{{ lang.admin.f2b_max_attempts }}:</label>
           <input type="number" class="form-control" id="f2b_max_attempts" name="max_attempts" value="{{ f2b_data.max_attempts }}" required>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <label for="f2b_retry_window">{{ lang.admin.f2b_retry_window }}:</label>
           <input type="number" class="form-control" id="f2b_retry_window" name="retry_window" value="{{ f2b_data.retry_window }}" required>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <label for="f2b_netban_ipv4">{{ lang.admin.f2b_netban_ipv4 }}:</label>
           <div class="input-group">
-            <span class="input-group-addon">/</span>
+            <span class="input-group-text">/</span>
             <input type="number" class="form-control" id="f2b_netban_ipv4" name="netban_ipv4" value="{{ f2b_data.netban_ipv4 }}" required>
           </div>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <label for="f2b_netban_ipv6">{{ lang.admin.f2b_netban_ipv6 }}:</label>
           <div class="input-group">
-            <span class="input-group-addon">/</span>
+            <span class="input-group-text">/</span>
             <input type="number" class="form-control" id="f2b_netban_ipv6" name="netban_ipv6" value="{{ f2b_data.netban_ipv6 }}" required>
           </div>
         </div>
         <hr>
-        <p class="help-block">{{ lang.admin.f2b_list_info|raw }}</p>
-        <div class="form-group">
+        <p class="text-muted">{{ lang.admin.f2b_list_info|raw }}</p>
+        <div class="mb-2">
           <label for="f2b_whitelist">{{ lang.admin.f2b_whitelist }}:</label>
           <textarea class="form-control" id="f2b_whitelist" name="whitelist" rows="5">{{ f2b_data.whitelist }}</textarea>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <label for="f2b_blacklist">{{ lang.admin.f2b_blacklist }}:</label>
           <textarea class="form-control" id="f2b_blacklist" name="blacklist" rows="5">{{ f2b_data.blacklist }}</textarea>
         </div>
         <div class="btn-group">
-          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-item="self" data-id="f2b" data-api-url='edit/fail2ban' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-          <a href="#" role="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-toggle="modal" data-container="netfilter-mailcow" data-target="#RestartContainer"><i class="bi bi-arrow-repeat"></i> {{ lang.header.restart_netfilter }}</a>
-          <div class="clearfix visible-xs"></div>
+          <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-item="self" data-id="f2b" data-api-url='edit/fail2ban' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+          <a href="#" role="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-bs-toggle="modal" data-container="netfilter-mailcow" data-bs-target="#RestartContainer"><i class="bi bi-arrow-repeat"></i> {{ lang.header.restart_netfilter }}</a>
         </div>
       </form>
-      <legend data-target="#f2b_regex_filters" style="margin-top:40px;cursor:pointer" unselectable="on" data-toggle="collapse">
+      <legend data-bs-target="#f2b_regex_filters" style="margin-top:40px;cursor:pointer" unselectable="on" data-bs-toggle="collapse">
         <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.f2b_filter }}
       </legend>
+      <hr />
       <div id="f2b_regex_filters" class="collapse">
-        <p class="help-block">{{ lang.admin.f2b_regex_info }}</p>
+        <p class="text-muted">{{ lang.admin.f2b_regex_info }}</p>
         <form class="form-inline" data-id="f2b_regex" role="form" method="post">
           <table class="table table-condensed" id="f2b_regex_table">
             <tr>
@@ -61,25 +66,25 @@
               <tr>
                 <td><input disabled class="input-sm input-xs-lg form-control" style="text-align:center" data-id="f2b_regex" type="text" name="app" required value="{{ regex_id }}"></td>
                 <td><input class="input-sm input-xs-lg form-control regex-input" data-id="f2b_regex" type="text" name="regex" required value="{{ regex_val }}"></td>
-                <td><a href="#" role="button" class="btn btn-xs btn-xs-lg btn-default" type="button">{{ lang.admin.remove_row }}</a></td>
+                <td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-secondary h-100 w-100" type="button">{{ lang.admin.remove_row }}</a></td>
               </tr>
             {% endfor %}
           </table>
           <p><div class="btn-group">
-            <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-item="admin" data-id="f2b_regex" data-reload="no" data-api-url='edit/fail2ban' data-api-attr='{"action":"edit-regex"}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-            <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default admin-ays-dialog" data-action="edit_selected" data-item="self" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"reset-regex"}' href="#">{{ lang.admin.reset_default }}</button>
-            <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" type="button" id="add_f2b_regex_row"><i class="bi bi-plus-lg"></i> {{ lang.admin.add_row }}</button>
+            <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-item="admin" data-id="f2b_regex" data-reload="no" data-api-url='edit/fail2ban' data-api-attr='{"action":"edit-regex"}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+            <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" data-action="edit_selected" data-item="self" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"reset-regex"}' href="#">{{ lang.admin.reset_default }}</button>
+            <button class="btn btn-sm d-block d-sm-inline btn-secondary" type="button" id="add_f2b_regex_row"><i class="bi bi-plus-lg"></i> {{ lang.admin.add_row }}</button>
           </div></p>
         </form>
       </div>
 
-      <p class="help-block">{{ lang.admin.ban_list_info|raw }}</p>
+      <p class="text-muted">{{ lang.admin.ban_list_info|raw }}</p>
       {% if not f2b_data.active_bans and not f2b_data.perm_bans %}
         <i>{{ lang.admin.no_active_bans }}</i>
       {% endif %}
       {% for active_ban in f2b_data.active_bans %}
         <p>
-          <span class="label label-info" style="padding:4px;font-size:85%;">
+          <span class="badge fs-5 bg-info" style="padding:4px;font-size:85%;">
             <i class="bi bi-funnel-fill"></i>
             <a href="https://bgp.he.net/ip/{{ active_ban.ip }}" target="_blank" style="color:white">
               {{ active_ban.network }}
@@ -98,7 +103,7 @@
       <hr>
       {% for perm_ban in f2b_data.perm_bans %}
         <p>
-          <span class="label label-danger" style="padding: 0.1em 0.4em 0.1em;">
+          <span class="badge fs-5 bg-danger" style="padding: 0.1em 0.4em 0.1em;">
             <i class="bi bi-funnel-fill"></i>
             <a href="https://bgp.he.net/ip/{{ perm_ban.ip }}" target="_blank" style="color:white">
               {{ perm_ban.network }}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-fwdhosts.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-fwdhosts.twig
index c691e27..0f77048 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-fwdhosts.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-fwdhosts.twig
@@ -1,38 +1,40 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-fwdhosts">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.forwarding_hosts }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-fwdhosts" role="tabpanel" aria-labelledby="tab-config-fwdhosts">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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>
-      <div class="table-responsive">
-        <table class="table table-striped table-condensed" id="forwardinghoststable"></table>
-      </div>
+      <table id="forwardinghoststable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group btn-group-sm">
-          <button type="button" id="toggle_multi_select_all" data-id="fwdhosts" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default">{{ lang.mailbox.toggle_all }}</button>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
+          <button type="button" id="toggle_multi_select_all" data-id="fwdhosts" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>
+          <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 top100">
-            <li><a data-action="edit_selected" data-id="fwdhosts" data-api-url='edit/fwdhost' data-api-attr='{"keep_spam":"0"}' href="#">Enable spam filter</a></li>
-            <li><a data-action="edit_selected" data-id="fwdhosts" data-api-url='edit/fwdhost' data-api-attr='{"keep_spam":"1"}' href="#">Disable spam filter</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="delete_selected" data-id="fwdhosts" data-api-url='delete/fwdhost' href="#">{{ lang.admin.remove }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="fwdhosts" data-api-url='edit/fwdhost' data-api-attr='{"keep_spam":"0"}' href="#">Enable spam filter</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="fwdhosts" data-api-url='edit/fwdhost' data-api-attr='{"keep_spam":"1"}' href="#">Disable spam filter</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="fwdhosts" data-api-url='delete/fwdhost' href="#">{{ lang.admin.remove }}</a></li>
           </ul>
-          <div class="clearfix visible-xs"></div>
         </div>
       </div>
-      <legend>{{ lang.admin.add_forwarding_host }}</legend>
-      <p class="help-block">{{ lang.admin.forwarding_hosts_add_hint }}</p>
+      <legend>{{ lang.admin.add_forwarding_host }}</legend><hr />
+      <p class="text-muted">{{ lang.admin.forwarding_hosts_add_hint }}</p>
       <form class="form" data-id="fwdhost" role="form" method="post">
-        <div class="form-group">
+        <div class="mb-2">
           <label for="fwdhost_hostname">{{ lang.admin.host }}</label>
           <input class="form-control" id="fwdhost_hostname" name="hostname" placeholder="example.org" required>
         </div>
-        <div class="form-group">
+        <div class="mb-4">
           <select data-width="200px" class="form-control" id="filter_spam" name="filter_spam" title="{{ lang.user.spamfilter }}" required>
             <option value="1">{{ lang.admin.active }}</option>
             <option value="0">{{ lang.admin.inactive }}</option>
           </select>
         </div>
-        <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="add_item" data-id="fwdhost" data-api-url='add/fwdhost' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+        <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="add_item" data-id="fwdhost" data-api-url='add/fwdhost' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
       </form>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-oauth2.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-oauth2.twig
index 146b88d..07f9e77 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-oauth2.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-oauth2.twig
@@ -1,24 +1,26 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-oauth2">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.oauth2_apps }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-oauth2" role="tabpanel" aria-labelledby="tab-config-oauth2">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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>
-      <div class="table-responsive">
-        <table class="table table-striped" id="oauth2clientstable"></table>
-      </div>
+      <table id="oauth2clientstable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="oauth2_clients" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
+          <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="oauth2_clients" 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">
-            <li><a data-action="delete_selected" data-id="oauth2_clients" data-api-url='delete/oauth2-client' href="#">{{ lang.mailbox.remove }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="edit_selected" data-id="oauth2_clients" data-api-url='edit/oauth2-client' data-api-attr='{"revoke_tokens":"1"}' href="#">{{ lang.admin.oauth2_revoke_tokens }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="edit_selected" data-id="oauth2_clients" data-api-url='edit/oauth2-client' data-api-attr='{"renew_secret":"1"}' href="#">{{ lang.admin.oauth2_renew_secret }}</a></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="oauth2_clients" data-api-url='delete/oauth2-client' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="oauth2_clients" data-api-url='edit/oauth2-client' data-api-attr='{"revoke_tokens":"1"}' href="#">{{ lang.admin.oauth2_revoke_tokens }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="oauth2_clients" data-api-url='edit/oauth2-client' data-api-attr='{"renew_secret":"1"}' href="#">{{ lang.admin.oauth2_renew_secret }}</a></li>
           </ul>
-          <div class="clearfix visible-xs"></div>
-          <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-id="add_oauth2_client" data-toggle="modal" data-target="#addOAuth2ClientModal" href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.oauth2_add_client }}</a>
+          <a class="btn btn-sm d-block d-sm-inline btn-success" data-id="add_oauth2_client" data-bs-toggle="modal" data-bs-target="#addOAuth2ClientModal" href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.oauth2_add_client }}</a>
         </div>
       </div>
     </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-password-policy.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-password-policy.twig
index ca1c75d..fb6ec7f 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-password-policy.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-password-policy.twig
@@ -1,20 +1,25 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-password-policy">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.password_policy }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-password-policy" role="tabpanel" aria-labelledby="tab-config-password-policy">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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' %}
-            <div class="form-group">
-              <label class="control-label col-sm-3" for="length">{{ lang.admin.password_length }}:</label>
+            <div class="row mb-4">
+              <label class="control-label col-sm-3 text-sm-end" for="length">{{ lang.admin.password_length }}:</label>
               <div class="col-sm-2">
                 <input type="number" class="form-control" min="3" max="64" name="length" id="length" value="{{ value }}" required>
               </div>
             </div>
           {% else %}
             <input type="hidden" name="{{ name }}" value="0">
-            <div class="form-group">
-              <div class="col-sm-offset-3 col-sm-9">
+            <div class="row mb-2">
+              <div class="offset-sm-3 col-sm-9">
                 <label>
                   <input type="checkbox" name="{{ name }}" id="{{ name }}" value="1" {% if value == 1 %}checked{% endif %}> {{ lang.admin['password_policy_'~name] }}
                 </label>
@@ -22,10 +27,10 @@
             </div>
           {% endif %}
         {% endfor %}
-        <div class="form-group">
-          <div class="col-sm-offset-3 col-sm-9">
+        <div class="row mt-4 mb-2">
+          <div class="offset-sm-3 col-sm-9">
             <div class="btn-group">
-              <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-item="passwordpolicy" data-action="edit_selected" data-id="passwordpolicy" data-api-url='edit/passwordpolicy' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+              <button class="btn btn-sm d-block d-sm-inline btn-success" data-item="passwordpolicy" data-action="edit_selected" data-id="passwordpolicy" data-api-url='edit/passwordpolicy' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
             </div>
           </div>
         </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quarantine.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quarantine.twig
index 047c3e3..91d9d53 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quarantine.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quarantine.twig
@@ -1,89 +1,95 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-quarantine">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.quarantine }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-quarantine" role="tabpanel" aria-labelledby="tab-config-quarantine">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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 %}
       <form class="form-horizontal" data-id="quarantine" role="form" method="post">
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_retention_size">{{ lang.admin.quarantine_retention_size|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_retention_size">{{ lang.admin.quarantine_retention_size|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_retention_size" name="retention_size" value="{{ q_data.retention_size }}" placeholder="0" required>
           </div>
         </div>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_max_size">{{ lang.admin.quarantine_max_size|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_max_size">{{ lang.admin.quarantine_max_size|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_max_size" name="max_size" value="{{ q_data.max_size }}" placeholder="0" required>
           </div>
         </div>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_max_score">{{ lang.admin.quarantine_max_score|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_max_score">{{ lang.admin.quarantine_max_score|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_max_score" name="max_score" value="{{ q_data.max_score }}" placeholder="9999.0">
           </div>
         </div>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_max_age">{{ lang.admin.quarantine_max_age|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_max_age">{{ lang.admin.quarantine_max_age|raw }}</label>
           <div class="col-sm-8">
             <input type="number" class="form-control" id="quarantine_max_age" name="max_age" value="{{ q_data.max_age }}" min="1" required>
           </div>
         </div>
         <hr>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_redirect"><i class="bi bi-box-arrow-right"></i> {{ lang.admin.quarantine_redirect|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_redirect"><i class="bi bi-box-arrow-right"></i> {{ lang.admin.quarantine_redirect|raw }}</label>
           <div class="col-sm-8">
             <input type="email" class="form-control" id="quarantine_redirect" name="redirect" value="{{ q_data.redirect }}" placeholder="">
           </div>
         </div>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_bcc"><i class="bi bi-files"></i> {{ lang.admin.quarantine_bcc|raw }}</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_bcc"><i class="bi bi-files"></i> {{ lang.admin.quarantine_bcc|raw }}</label>
           <div class="col-sm-8">
             <input type="email" class="form-control" id="quarantine_bcc" name="bcc" value="{{ q_data.bcc }}" placeholder="">
           </div>
         </div>
         <hr>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_sender">{{ lang.admin.quarantine_notification_sender }}:</label>
+        <div class="row mb-2">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_sender">{{ lang.admin.quarantine_notification_sender }}:</label>
           <div class="col-sm-8">
             <input type="email" class="form-control" id="quarantine_sender" name="sender" value="{{ q_data.sender }}" placeholder="quarantine@localhost">
           </div>
         </div>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_subject">{{ lang.admin.quarantine_notification_subject }}:</label>
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_subject">{{ lang.admin.quarantine_notification_subject }}:</label>
           <div class="col-sm-8">
             <input type="text" class="form-control" id="quarantine_subject" name="subject" value="{{ q_data.subject }}" placeholder="Spam Quarantine Notification">
           </div>
         </div>
         <hr>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="quarantine_release_format">{{ lang.admin.quarantine_release_format }}:</label>
-          <div class="col-sm-8">
+        <div class="row mb-2">
+          <label class="col-sm-4 control-label text-sm-end" for="quarantine_release_format">{{ lang.admin.quarantine_release_format }}:</label>
+          <div class="col-sm-8 col-md-6 col-lg-4 col-xl-3">
             <select data-width="100%" id="quarantine_release_format" name="release_format" class="selectpicker" title="{{ lang.tfa.select }}">
               <option {% if q_data.release_format == 'raw' %}selected{% endif %} value="raw">{{ lang.admin.quarantine_release_format_raw }}</option>
               <option {% if q_data.release_format == 'attachment' %}selected{% endif %} value="attachment">{{ lang.admin.quarantine_release_format_att }}</option>
             </select>
           </div>
         </div>
-        <div class="form-group">
-          <label class="col-sm-4 control-label" for="exclude_domains">{{ lang.admin.quarantine_exclude_domains }}:</label>
-          <div class="col-sm-8">
+        <div class="row mb-4">
+          <label class="col-sm-4 control-label text-sm-end" for="exclude_domains">{{ lang.admin.quarantine_exclude_domains }}:</label>
+          <div class="col-sm-8 col-md-6 col-lg-4 col-xl-3">
             <select data-width="100%" name="exclude_domains" class="selectpicker" title="{{ lang.tfa.select }}" multiple>
               {% for domain in all_domains %}
-                <option {% if domain in q_data.exclude_domains|keys %}selected{% endif %}>{{ domain }}</option>
+                <option {% if domain in q_data.exclude_domains %}selected{% endif %}>{{ domain }}</option>
               {% endfor %}
             </select>
           </div>
         </div>
         <hr>
-        <legend data-target="#quarantine_template" style="cursor:pointer" unselectable="on" data-toggle="collapse">
+        <legend data-bs-target="#quarantine_template" style="cursor:pointer" unselectable="on" data-bs-toggle="collapse">
           <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.quarantine_notification_html|raw }}
         </legend>
+        <hr />
         <div id="quarantine_template" class="collapse" >
           <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code" rows="40" name="html_tmpl">{{ q_data.html_tmpl|raw }}</textarea>
         </div>
-        <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-item="self" data-id="quarantine" data-api-url='edit/quarantine' data-api-attr='{"action":"settings"}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+        <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="edit_selected" data-item="self" data-id="quarantine" data-api-url='edit/quarantine' data-api-attr='{"action":"settings"}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
       </form>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quota.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quota.twig
index eabf474..c8f2e92 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quota.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-quota.twig
@@ -1,18 +1,23 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-quota">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.quota_notifications }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-quota" role="tabpanel" aria-labelledby="tab-config-quota">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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">
+        <div class="row mb-4">
           <div class="col-sm-6">
-            <div class="form-group">
+            <div>
               <label for="quota_notification_sender">{{ lang.admin.quota_notification_sender }}:</label>
               <input type="email" class="form-control" id="quota_notification_sender" name="sender" value="{{ qn_data.sender }}" placeholder="quota-warning@localhost">
             </div>
           </div>
           <div class="col-sm-6">
-            <div class="form-group">
+            <div>
               <label for="quota_notification_subject">{{ lang.admin.quota_notification_subject }}:</label>
               <input type="text" class="form-control" id="quota_notification_subject" name="subject" value="{{ qn_data.subject }}" placeholder="Quota warning">
             </div>
@@ -20,20 +25,21 @@
         </div>
         <div class="row">
           <div class="col-sm-12">
-            <legend data-target="#quota_template" style="cursor:pointer" unselectable="on" data-toggle="collapse">
+            <legend data-bs-target="#quota_template" style="cursor:pointer" unselectable="on" data-bs-toggle="collapse">
               <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.quarantine_notification_html|raw }}
             </legend>
+            <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>
         <div class="row">
           <div class="col-sm-10">
-            <div class="form-group">
+            <div>
               <br>
-              <a type="button" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected"
+              <a type="button" class="btn btn-sm d-block d-sm-inline btn-success" data-action="edit_selected"
                  data-item="quota_notification"
                  data-id="quota_notification"
                  data-api-url='edit/quota_notification'
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rsettings.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rsettings.twig
index 3b776c4..8cd690e 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rsettings.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rsettings.twig
@@ -1,10 +1,16 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-rsettings">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.rspamd_settings_map }}</div>
-    <div class="panel-body">
-      <legend data-target="#active_settings_map" style="cursor:pointer" unselectable="on" data-toggle="collapse">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-rsettings" role="tabpanel" aria-labelledby="tab-config-rsettings">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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>
+      <hr />
       <div id="active_settings_map" class="collapse" >
         <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code" rows="20" name="settings_map" readonly>{{ rsettings_map }}</textarea>
       </div>
@@ -17,41 +23,39 @@
 
               {% endif %}
               {% for rsetting in rsettings %}
-                <a href="#{{ rsetting.details.id }}" class="list-group-item list-group-item-{% if rsetting.details.active %}success{% endif %}" data-dont-remember="1" data-toggle="tab">{{ rsetting.details.desc }} (ID #{{ rsetting.id }})</a>
+                <a href="#" class="list-group-item list-group-item-{% if rsetting.details.active %}success{% endif %}" data-dont-remember="1" data-bs-target="#settings_tab{{ rsetting.details.id }}" data-bs-toggle="tab">{{ rsetting.details.desc }} (ID #{{ rsetting.id }})</a>
               {% else %}
                 <span class="list-group-item"><em>{{ lang.admin.rsetting_none }}</em></span>
               {% endfor %}
               <a href="#" class="list-group-item list-group-item-default"
-                 data-id="add_domain_admin"
-                 data-toggle="modal"
+                 data-bs-toggle="modal"
                  data-dont-remember="1"
-                 data-target="#addRsettingModal"
-                 data-toggle="tab">{{ lang.admin.rsetting_add_rule }}</a>
+                 data-bs-target="#addRsettingModal">{{ lang.admin.rsetting_add_rule }}</a>
             </div>
           </div>
           <div class="col-sm-9">
             <div class="tab-content">
               {% if not rsettings %}
                 <div id="none" class="tab-pane active">
-                  <p class="help-block">{{ lang.admin.rsetting_none }}</p>
+                  <p class="text-muted">{{ lang.admin.rsetting_none }}</p>
                 </div>
               {% else %}
                 <div id="none" class="tab-pane active">
-                  <p class="help-block">{{ lang.admin.rsetting_no_selection }}</p>
+                  <p class="text-muted">{{ lang.admin.rsetting_no_selection }}</p>
                 </div>
                 {% for rsetting in rsettings %}
-                  <div id="{{ rsetting.details.id }}" class="tab-pane">
+                  <div id="settings_tab{{ rsetting.details.id }}" class="tab-pane">
                     <form class="form" data-id="rsettings" role="form" method="post">
                       <input type="hidden" name="active" value="0">
-                      <div class="form-group">
+                      <div>
                         <label for="rsettings_desc">{{ lang.admin.rsetting_desc }}:</label>
                         <input type="text" class="form-control" id="rsettings_desc" name="desc" value="{{ rsetting.details.desc }}">
                       </div>
-                      <div class="form-group">
+                      <div class="mt-4">
                         <label for="rsettings_content">{{ lang.admin.rsetting_content }}:</label>
                         <textarea class="form-control" id="rsettings_content" name="content" rows="10">{{ rsetting.details.content }}</textarea>
                       </div>
-                      <div class="form-group">
+                      <div class="mt-4 mb-2">
                         <label>
                           <input type="checkbox" name="active" value="1" {% if rsetting.details.active %}checked{% endif %}> {{ lang.admin.active }}
                         </label>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rspamd.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rspamd.twig
index f22cff7..5cbdc59 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rspamd.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-config-rspamd.twig
@@ -1,43 +1,46 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-rspamd">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h3 class="panel-title">Rspamd UI</h3>
+<div role="tabpanel" class="tab-pane fade" id="tab-config-rspamd" role="tabpanel" aria-labelledby="tab-config-rspamd">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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="panel-body">
+    <div id="collapse-tab-config-rspamd" class="card-body collapse" data-bs-parent="#admin-content">
       <div class="row">
-        <div class="col-xs-12 visible-xs">
-          <img class="img-responsive" src="/img/rspamd_logo.png" alt="Rspamd UI">
+        <div class="col-12 d-flex d-sm-none mb-4">
+          <img id="rspamd_logo_sm" class="img-responsive mx-auto" src="/img/rspamd_logo_dark.png" alt="Rspamd UI">
         </div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-9 col-12">
           <form class="form-horizontal" autocapitalize="none" data-id="admin" autocorrect="off" role="form" method="post">
-            <div class="form-group">
-              <div class="col-sm-offset-3 col-sm-9">
+            <div class="row mb-4">
+              <div class="offset-sm-3 col-sm-9">
                 <label>
                   <a href="/rspamd/" target="_blank"><i class="bi bi-window"></i> Rspamd UI</a>
                 </label>
               </div>
             </div>
-            <div class="form-group">
-              <label class="control-label col-sm-3" for="rspamd_ui_pass">{{ lang.admin.password }}:</label>
+            <div class="row mb-2">
+              <label class="control-label col-sm-3 text-sm-end" for="rspamd_ui_pass">{{ lang.admin.password }}:</label>
               <div class="col-sm-9">
                 <input type="password" class="form-control" id="rspamd_ui_pass" name="rspamd_ui_pass" autocomplete="new-password" required>
               </div>
             </div>
-            <div class="form-group">
-              <label class="control-label col-sm-3" for="rspamd_ui_pass2">{{ lang.admin.password_repeat }}:</label>
+            <div class="row mb-4">
+              <label class="control-label col-sm-3 text-sm-end" for="rspamd_ui_pass2">{{ lang.admin.password_repeat }}:</label>
               <div class="col-sm-9">
                 <input type="password" class="form-control" id="rspamd_ui_pass2" name="rspamd_ui_pass2" autocomplete="new-password" required>
               </div>
             </div>
-            <div class="form-group">
-              <div class="col-sm-offset-3 col-sm-9">
-                <button type="submit" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" id="rspamd_ui" name="rspamd_ui" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+            <div class="row mb-4">
+              <div class="offset-sm-3 col-sm-9">
+                <button type="submit" class="btn btn-sm d-block d-sm-inline btn-success" id="rspamd_ui" name="rspamd_ui" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
               </div>
             </div>
           </form>
         </div>
-        <div class="col-sm-3 hidden-xs">
-          <img class="img-responsive" src="/img/rspamd_logo.png" alt="Rspamd UI">
+        <div class="col-sm-3 d-none d-sm-block">
+          <img id="rspamd_logo" class="img-responsive" src="/img/rspamd_logo_dark.png" alt="Rspamd UI">
         </div>
       </div>
     </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-globalfilter-regex.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-globalfilter-regex.twig
index dfd5235..e597057 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-globalfilter-regex.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-globalfilter-regex.twig
@@ -1,20 +1,23 @@
-<div role="tabpanel" class="tab-pane" id="tab-globalfilter-regex">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.admin.rspamd_global_filters }}
+<div role="tabpanel" class="tab-pane fade" id="tab-globalfilter-regex" role="tabpanel" aria-labelledby="tab-globalfilter-regex">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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="panel-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="hidden"{% endif %}>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
+      <div id="confirm_show_rspamd_global_filters"{% if show_rspamd_global_filters %} class="d-none"{% endif %}>
+        <div class="row">
+          <div class="offset-sm-2 col-sm-10">
             <label>
               <input type="checkbox" id="show_rspamd_global_filters"> {{ lang.admin.rspamd_global_filters_agree }}
             </label>
           </div>
         </div>
       </div>
-      <div id="rspamd_global_filters"{% if show_rspamd_global_filters != true %} class="hidden"{% endif %}>
+      <div id="rspamd_global_filters"{% if show_rspamd_global_filters != true %} class="d-none"{% endif %}>
         <hr>
         <span class="anchor" id="regexmaps"></span>
         <h4>{{ lang.admin.regex_maps }}</h4>
@@ -28,16 +31,18 @@
         <hr>
         <span class="anchor" id="{{ rspamd_regex_map.map }}"></span>
         <form class="form-horizontal" data-cached-form="false" data-id="{{ rspamd_regex_map.map }}" role="form" method="post">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="{{ rspamd_regex_map.map }}">{{ rspamd_regex_desc }}<br><small>{{ rspamd_regex_map.map }}</small></label>
             <div class="col-sm-9">
               <textarea id="{{ rspamd_regex_map.map }}" spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control textarea-code" rows="10" name="rspamd_map_data" required>{{ rspamd_regex_map.data }}</textarea>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-3 col-sm-9">
-              <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default validate_rspamd_regex" data-regex-map="{{ rspamd_regex_map.map }}" href="#">{{ lang.add.validate }}</button>
-              <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="row">
+            <div class="offset-sm-3 col-sm-9">
+              <div class="btn-group mt-2">
+                <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/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-ldap.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-ldap.twig
index e5c4e67..b69817c 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-ldap.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-ldap.twig
@@ -1,7 +1,12 @@
-<div role="tabpanel" class="tab-pane" id="tab-config-ldap-admins">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.admins_ldap }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-config-ldap-admins" role="tabpanel" aria-labelledby="tab-config-ldap-admins">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-mailq.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-mailq.twig
deleted file mode 100644
index ab2f40f..0000000
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-mailq.twig
+++ /dev/null
@@ -1,44 +0,0 @@
-<div role="tabpanel" class="tab-pane" id="tab-mailq">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.admin.queue_manager }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right">
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_queue" data-table="queuetable">{{ lang.admin.refresh }}</button>
-      </div>
-    </div>
-    <div class="panel-body">
-      <div class="table-responsive">
-        <table class="table table-striped table-condensed" id="queuetable"></table>
-      </div>
-      <div class="mass-actions-admin">
-        <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="mailqitems" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-          <ul class="dropdown-menu top33">
-            <li><a data-toggle="tooltip" title="postqueue -i" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"deliver"}' href="#">{{ lang.admin.queue_deliver_mail }}</a></li>
-            <li><a data-toggle="tooltip" title="postsuper -H" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"unhold"}' href="#">{{ lang.admin.queue_unhold_mail }}</a></li>
-            <li><a data-toggle="tooltip" title="postsuper -h" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"hold"}' href="#">{{ lang.admin.queue_hold_mail }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-toggle="tooltip" title="postsuper -d" data-action="delete_selected" data-id="mailqitems" data-api-url='delete/mailq' href="#">{{ lang.mailbox.remove }}</a></li>
-          </ul>
-          <div class="clearfix visible-xs"></div>
-          <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-primary"
-             data-action="edit_selected"
-             data-item="mailqitems-all"
-             data-api-url='edit/mailq'
-             data-api-attr='{"action":"flush"}'
-             data-toggle="tooltip" title="postqueue -f"
-             href="#"><i class="bi bi-check-all"></i> {{ lang.admin.flush_queue }}</a>
-          <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger"
-             id="super_delete"
-             data-action="edit_selected"
-             data-item="mailqitems-all"
-             data-api-url='edit/mailq'
-             data-api-attr='{"action":"super_delete"}'
-             data-toggle="tooltip" title="postsuper -d ALL"
-             href="#"><i class="bi bi-trash"></i> {{ lang.admin.delete_queue }}</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-routing.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-routing.twig
index 8aae1bc..8caeec8 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-routing.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-routing.twig
@@ -1,101 +1,105 @@
-<div role="tabpanel" class="tab-pane" id="tab-routing">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.relayhosts }}</div>
-    <div class="panel-body">
-      <p style="margin-bottom:40px">{{ lang.admin.relayhosts_hint|raw }}</p>
-      <div class="table-responsive">
-        <table class="table table-striped table-condensed" id="relayhoststable"></table>
-      </div>
-      <div class="mass-actions-admin">
+<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 d-flex fs-5">
+      <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 class="mb-4">{{ lang.admin.relayhosts_hint|raw }}</p>
+      <table id="relayhoststable" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-admin mb-4">
         <div class="btn-group btn-group-sm">
-          <button type="button" id="toggle_multi_select_all" data-id="rlyhosts" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default">{{ lang.mailbox.toggle_all }}</button>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
+          <button type="button" id="toggle_multi_select_all" data-id="rlyhosts" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>
+          <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 top100">
-            <li><a data-action="edit_selected" data-id="rlyhosts" data-api-url='edit/relayhost' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="rlyhosts" data-api-url='edit/relayhost' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="delete_selected" data-id="rlyhosts" data-api-url='delete/relayhost' href="#">{{ lang.admin.remove }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="rlyhosts" data-api-url='edit/relayhost' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="rlyhosts" data-api-url='edit/relayhost' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="rlyhosts" data-api-url='delete/relayhost' href="#">{{ lang.admin.remove }}</a></li>
           </ul>
-          <div class="clearfix visible-xs"></div>
         </div>
       </div>
-      <legend>{{ lang.admin.add_relayhost }}</legend>
-      <p class="help-block">{{ lang.admin.add_relayhost_hint|raw }}</p>
+      <legend>{{ lang.admin.add_relayhost }}</legend><hr />
+      <p class="text-muted">{{ lang.admin.add_relayhost_hint|raw }}</p>
       <div class="row">
         <div class="col-md-8">
           <form class="form" data-id="rlyhost" role="form" method="post">
-            <div class="form-group">
+            <div class="mb-2">
               <label for="rlyhost_hostname">{{ lang.admin.host }}</label>
               <input class="form-control" id="rlyhost_hostname" name="hostname" placeholder='[0.0.0.0], [0.0.0.0]:25, host:25, host, [host]:25' required>
             </div>
-            <div class="form-group">
+            <div class="mb-2">
               <label for="rlyhost_username">{{ lang.admin.username }}</label>
               <input class="form-control" id="rlyhost_username" name="username">
             </div>
-            <div class="form-group">
+            <div class="mb-4">
               <label for="rlyhost_password">{{ lang.admin.password }}</label>
               <input class="form-control" id="rlyhost_password" name="password">
             </div>
-            <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="add_item" data-id="rlyhost" data-api-url='add/relayhost' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+            <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="add_item" data-id="rlyhost" data-api-url='add/relayhost' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
           </form>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.transport_maps }}</div>
-    <div class="panel-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-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>
-      <div class="table-responsive">
-        <table class="table table-striped table-condensed" id="transportstable"></table>
-      </div>
+      <table id="transportstable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group btn-group-sm">
-          <button type="button" id="toggle_multi_select_all" data-id="transports" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default">{{ lang.mailbox.toggle_all }}</button>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
+          <button type="button" id="toggle_multi_select_all" data-id="transports" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>
+          <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 top100">
-            <li><a data-action="edit_selected" data-id="transports" data-api-url='edit/transport' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="transports" data-api-url='edit/transport' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="delete_selected" data-id="transports" data-api-url='delete/transport' href="#">{{ lang.admin.remove }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="transports" data-api-url='edit/transport' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="transports" data-api-url='edit/transport' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="transports" data-api-url='delete/transport' href="#">{{ lang.admin.remove }}</a></li>
           </ul>
-          <div class="clearfix visible-xs"></div>
         </div>
       </div>
-      <legend>{{ lang.admin.add_transport }}</legend>
-      <p class="help-block">{{ lang.admin.add_transports_hint|raw }}</p>
+      <legend>{{ lang.admin.add_transport }}</legend><hr />
+      <p class="text-muted">{{ lang.admin.add_transports_hint|raw }}</p>
       <div class="row">
         <div class="col-md-8">
           <form class="form" data-id="transport" role="form" method="post">
-            <div class="form-group">
+            <div class="mb-2">
               <label for="transport_destination">{{ lang.admin.destination }}</label>
               <input class="form-control" id="transport_destination" name="destination" placeholder='{{ lang.admin.transport_dest_format }}' required>
             </div>
-            <div class="form-group">
+            <div class="mb-2">
               <label for="transport_nexthop">{{ lang.admin.nexthop }}</label>
               <input class="form-control" id="transport_nexthop" name="nexthop" placeholder='host:25, host, [host]:25, [0.0.0.0]:25' required>
             </div>
-            <div class="form-group">
+            <div class="mb-2">
               <label for="transport_username">{{ lang.admin.username }}</label>
               <input class="form-control" id="transport_username" name="username">
             </div>
-            <div class="form-group">
+            <div class="mb-4">
               <label for="transport_password">{{ lang.admin.password }}</label>
               <input class="form-control" id="transport_password" name="password">
             </div>
-            <div class="form-group">
+            <div class="mb-2">
               <label>
                 <input type="checkbox" name="is_mx_based" value="1"> {{ lang.admin.lookup_mx|raw }}
               </label>
             </div>
-            <div class="form-group">
+            <div class="mb-4">
               <label>
                 <input type="checkbox" name="active" value="1"> {{ lang.admin.active }}
               </label>
             </div>
-            <p class="help-block">{{ lang.admin.credentials_transport_warning|raw }}</p>
-            <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="add_item" data-id="transport" data-api-url='add/transport' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+            <p class="text-muted">{{ lang.admin.credentials_transport_warning|raw }}</p>
+            <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="add_item" data-id="transport" data-api-url='add/transport' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
           </form>
         </div>
       </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-sys-mails.twig b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-sys-mails.twig
index 44a8b43..056d193 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-sys-mails.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/admin/tab-sys-mails.twig
@@ -1,16 +1,21 @@
-<div role="tabpanel" class="tab-pane" id="tab-sys-mails">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.sys_mails }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-sys-mails" role="tabpanel" aria-labelledby="tab-sys-mails">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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="form-group">
-          <label class="control-label col-sm-2" for="admin_mass_from">{{ lang.admin.from }}:</label>
+        <div class="row mb-2">
+          <label class="control-label col-sm-2 text-sm-end" for="admin_mass_from">{{ lang.admin.from }}:</label>
           <div class="col-sm-10">
             <input type="email" class="form-control" id="admin_mass_from" name="mass_from" value="noreply@{{ mailcow_hostname }}" required>
           </div>
         </div>
-        <div class="form-group">
-          <label class="control-label col-sm-2" for="admin_mass_subject">{{ lang.admin.subject }}:</label>
+        <div class="row mb-4">
+          <label class="control-label col-sm-2 text-sm-end" for="admin_mass_subject">{{ lang.admin.subject }}:</label>
           <div class="col-sm-10">
             <input type="text" class="form-control" id="admin_mass_subject" name="mass_subject" required>
           </div>
@@ -18,12 +23,12 @@
         {% for domain in all_domains %}
 
         {% endfor %}
-        <div class="form-group">
-          <label class="control-label col-sm-2" for="mass_subject">{{ lang.admin.include_exclude }}:
-            <p class="help-block">{{ lang.admin.include_exclude_info|raw }}</p>
+        <div class="row mb-4">
+          <label class="control-label col-sm-2 text-sm-end" for="mass_subject">{{ lang.admin.include_exclude }}:
+            <p class="text-muted">{{ lang.admin.include_exclude_info|raw }}</p>
           </label>
           <div class="col-sm-5">
-            <label class="control-label" for="mass_exclude">{{ lang.admin.excludes }}:</label>
+            <label class="d-block" for="mass_exclude">{{ lang.admin.excludes }}:</label>
             <select id="mass_exclude" name="mass_exclude[]" data-live-search="true" data-width="100%"  size="30" multiple>
               {% for mailbox in mailboxes %}
                 <option>{{ mailbox }}</option>
@@ -31,7 +36,7 @@
             </select>
           </div>
           <div class="col-sm-5">
-            <label class="control-label" for="mass_include">{{ lang.admin.includes }}:</label>
+            <label class="d-block" for="mass_include">{{ lang.admin.includes }}:</label>
             <select id="mass_include" name="mass_include[]" data-live-search="true" data-width="100%"  size="30" multiple>
               {% for mailbox in mailboxes %}
                 <option>{{ mailbox }}</option>
@@ -39,29 +44,29 @@
             </select>
           </div>
         </div>
-        <div class="form-group">
-          <label class="control-label col-sm-2" for="mass_text">{{ lang.admin.text }}:</label>
+        <div class="row mb-2">
+          <label class="control-label col-sm-2 text-sm-end" for="mass_text">{{ lang.admin.text }}:</label>
           <div class="col-sm-10">
             <textarea class="form-control" rows="10" name="mass_text" id="mass_text" required></textarea>
           </div>
         </div>
-        <div class="form-group">
-          <label class="control-label col-sm-2" for="mass_html">{{ lang.admin.html }} ({{ lang.admin.optional }}):</label>
+        <div class="row mb-4">
+          <label class="control-label col-sm-2 text-sm-end" for="mass_html">{{ lang.admin.html }} ({{ lang.admin.optional }}):</label>
           <div class="col-sm-10">
             <textarea class="form-control" rows="10" name="mass_html" id="mass_html"></textarea>
             <p class="small"><i class="bi bi-arrow-return-right"></i> <a target="_blank" href="https://templates.mailchimp.com/resources/html-to-text/">{{ lang.admin.convert_html_to_text }}</a></p>
           </div>
         </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
+        <div class="row mb-2">
+          <div class="offset-sm-2 col-sm-10">
             <label>
               <input type="checkbox" id="mass_disarm"> {{ lang.admin.activate_send }}
             </label>
           </div>
         </div>
-        <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" type="submit" id="mass_send" name="mass_send" disabled><i class="bi bi-envelope-fill"></i> {{ lang.admin.send }}</button>
+        <div class="row mb-2">
+          <div class="offset-sm-2 col-sm-10">
+            <button class="btn btn-sm d-block d-sm-inline btn-success" type="submit" id="mass_send" name="mass_send" disabled><i class="bi bi-envelope-fill"></i> {{ lang.admin.send }}</button>
           </div>
         </div>
       </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/base.twig b/mailcow/src/mailcow-dockerized/data/web/templates/base.twig
index 79042d5..06c47bd 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/base.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/base.twig
@@ -9,35 +9,48 @@
   <title>{{ ui_texts.title_name|raw }}</title>
 
   <link rel="stylesheet" href="{{ css_path }}">
-  {% if theme != 'lumen' %}
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/{{ theme }}/bootstrap.min.css">
-  {% endif %}
+  <script>
+    // check if darkmode is preferred by OS or set by localStorage
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem("theme") !== "light" ||
+        localStorage.getItem("theme") === "dark") {
+      var head  = document.getElementsByTagName('head')[0];
+      var link  = document.createElement('link');
+      link.id   = 'dark-mode-theme';
+      link.rel  = 'stylesheet';
+      link.type = 'text/css';
+      link.href = '/css/themes/mailcow-darkmode.css';
+      head.appendChild(link);
+    }
+  </script>
+
   <link rel="shortcut icon" href="/favicon.png" type="image/png">
   <link rel="icon" href="/favicon.png" type="image/png">
 </head>
-<body id="top">
+<body>
 <div class="overlay"></div>
 {% block navbar %}
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top p-0">
   <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="/"><img alt="mailcow-logo" src="{{ logo|default('/img/cow_mailcow.svg') }}"></a>
-    </div>
+    <a class="navbar-brand" href="/"><img alt="mailcow-logo" src="{{ logo|default('/img/cow_mailcow.svg') }}"></a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+      <i class="bi bi-list fs-3"></i>
+    </button>
     <div id="navbar" class="navbar-collapse collapse">
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item">
+          <div class="nav-link form-check form-switch my-auto d-flex align-items-center">
+            <label class="form-check-label"><i class="bi bi-moon-fill"></i></label>
+            <input class="form-check-input ms-2" type="checkbox" id="dark-mode-toggle">
+          </div>
+        </li>
         {% if mailcow_locale %}
-        <li class="dropdown{% if available_languages|length == 1 %}lang-link-disabled{% endif %}">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="flag-icon flag-icon-{{ mailcow_locale }}"></span><span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
+        <li class="nav-item dropdown{% if available_languages|length == 1 %}lang-link-disabled{% endif %}">
+          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><span class="flag-icon flag-icon-{{ mailcow_locale[-2:] }}"></span></a>
+          <ul class="dropdown-menu" role="menu "aria-labelledby="languageDropdown">
             {% for key, val in available_languages %}
-            <li{% if mailcow_locale == key %} class="active"{% endif %}>
-              <a href="?{{ query_string({'lang': key}) }}">
-                <span class="flag-icon flag-icon-{{ key }}"></span>{{ val }}
+            <li>
+              <a class="dropdown-item {% if mailcow_locale == key %}active{% endif %}" href="?{{ query_string({'lang': key}) }}">
+                <span class="flag-icon flag-icon-{{ key[-2:] }}"></span>{{ val }}
               </a>
             </li>
             {% endfor %}
@@ -45,52 +58,60 @@
         </li>
         {% endif %}
         {% if mailcow_cc_role %}
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ lang.header.mailcow_settings }} <span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">{{ lang.header.mailcow_system }}</a>
+          <ul class="dropdown-menu">
             {% if mailcow_cc_role == 'admin' %}
-            <li {% if is_uri('admin') %}class="active"{% endif %}><a href="/admin">{{ lang.header.administration }}</a></li>
-            <li {% if is_uri('debug') %}class="active"{% endif %}><a href="/debug">{{ lang.header.debug }}</a></li>
-            {% endif %}
-            {% if mailcow_cc_role == 'admin' or mailcow_cc_role == 'domainadmin' %}
-            <li {% if is_uri('mailbox') %}class="active"{% endif %}><a href="/mailbox">{{ lang.header.mailboxes }}</a></li>
+            <li><a href="/debug" class="dropdown-item {% if is_uri('debug') %}active{% endif %}">{{ lang.header.debug }}</a></li>
+            <li><a href="/admin" class="dropdown-item {% if is_uri('admin') %}active{% endif %}">{{ lang.header.mailcow_config }}</a></li>
             {% endif %}
             {% if mailcow_cc_role != 'admin' %}
-            <li {% if is_uri('user') %}class="active"{% endif %}><a href="/user">{{ lang.header.user_settings }}</a></li>
+            <li><a href="/user" class="dropdown-item {% if is_uri('user') %}active{% endif %}">{{ lang.header.user_settings }}</a></li>
             {% endif %}
           </ul>
         </li>
-        <li {% if is_uri('quarantine') %}class="active"{% endif %}><a href="/quarantine"><i class="bi bi-inbox-fill"></i> {{ lang.header.quarantine }}</a></li>
-        {% endif %}
-        {% if mailcow_cc_role == 'admin' and not skip_sogo %}
-        <li><a href data-toggle="modal" data-container="sogo-mailcow" data-target="#RestartContainer"><i class="bi bi-arrow-repeat"></i> {{ lang.header.restart_sogo }}</a></li>
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">{{ lang.header.email }}</a>
+          <ul class="dropdown-menu">
+            {% if mailcow_cc_role == 'admin' or mailcow_cc_role == 'domainadmin' %}
+            <li><a href="/mailbox" class="dropdown-item {% if is_uri('mailbox') %}active{% endif %}">{{ lang.header.mailcow_config }}</a></li>
+            {% endif %}
+            <li><a href="/quarantine" class="dropdown-item {% if is_uri('quarantine') %}active{% endif %}">{{ lang.header.quarantine }}</a></li>
+            {% if mailcow_cc_role == 'admin' %}
+            <li><a href="/queue" class="dropdown-item {% if is_uri('queue') %}active{% endif %}">{{ lang.queue.queue_manager }}</a></li>
+            {% endif %}
+            {% if mailcow_cc_role == 'admin' %}
+            <li><a href="#" class="dropdown-item" data-bs-toggle="modal" data-container="sogo-mailcow" data-bs-target="#RestartContainer">{{ lang.header.restart_sogo }}</a></li>
+            {% endif %}
+          </ul>
+        </li>
         {% endif %}
         {% if mailcow_apps or app_links %}
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }} <span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="bi bi-link-45deg me-2"></i> {{ ui_texts.apps_name|raw }}</a>
+          <ul class="dropdown-menu">
             {% for app in mailcow_apps %}
               {% if not skip_sogo or not is_uri('SOGo', app.link) %}
               <li {% if app.description %}title="{{ app.description }}"{% endif %}>
-                <a href="{{ app.link }}">{{ app.name }}</a>
+                <a href="{{ app.link }}" class="dropdown-item">{{ app.name }}</a>
               </li>
               {% endif %}
             {% endfor %}
             {% for row in app_links %}
               {% for key, val in row %}
-              <li><a href="{{ val }}">{{ key }}</a></li>
+              <li><a href="{{ val }}" class="dropdown-item">{{ key }}</a></li>
               {% endfor %}
             {% endfor %}
           </ul>
         </li>
         {% endif %}
         {% if not dual_login and mailcow_cc_username %}
-        <li class="logged-in-as"><a href="#" onclick="logout.submit()"><b class="username-lia">{{ mailcow_cc_username }}</b> <i class="bi bi-power"></i></a></li>
+        <li class="logged-in-as nav-item"><a href="#" onclick="logout.submit()" class="nav-link"><b class="username-lia">{{ mailcow_cc_username }}</b> <i class="bi bi-power ms-2"></i></a></li>
         {% elseif dual_login %}
-        <li class="logged-in-as"><a href="#" onclick="logout.submit()"><b class="username-lia">{{ mailcow_cc_username }} <span class="text-info">({{ dual_login.username }})</span> </b><i class="bi bi-power"></i></a></li>
+        <li class="logged-in-as nav-item"><a href="#" onclick="logout.submit()" class="nav-link"><b class="username-lia">{{ mailcow_cc_username }} <span class="text-info">({{ dual_login.username }})</span> </b><i class="bi bi-power ms-2"></i></a></li>
         {% endif %}
         {% if not is_master %}
-        <li class="text-warning slave-info">[ slave ]</li>
+        <li class="text-warning slave-info nav-item">[ slave ]</li>
         {% endif %}
       </ul>
     </div><!--/.nav-collapse -->
@@ -101,12 +122,12 @@
 <form action="/" method="post" id="logout"><input type="hidden" name="logout"></form>
 
 {% if ui_texts.ui_announcement_text and ui_texts.ui_announcement_active and not is_root_uri %}
-<div class="container">
+<div class="container mt-4">
   <div class="alert alert-{{ ui_texts.ui_announcement_type }}">{{ ui_texts.ui_announcement_text }}</div>
 </div>
 {% endif %}
 
-<div class="container">
+<div class="container my-4">
 {% block content %}{% endblock %}
 </div>
 
@@ -119,6 +140,17 @@
   var lang_tfa = {{ lang_tfa|raw }};
   var lang_fido2 = {{ lang_fido2|raw }};
   var docker_timeout = {{ docker_timeout|raw }} * 1000;
+  var mailcow_cc_role = '{{ mailcow_cc_role }}';
+  var last_login = '{{ last_login }}';
+  var mailcow_info = {
+    version_tag: '{{ mailcow_info.version_tag }}',
+    last_version_tag: '{{ mailcow_info.last_version_tag }}',
+    updatedAt: '{{ mailcow_info.updated_at }}',
+    project_url: '{{ mailcow_info.git_project_url }}',
+    project_owner: '{{ mailcow_info.git_owner }}',
+    project_repo: '{{ mailcow_info.git_repo }}',
+    branch: '{{ mailcow_info.mailcow_branch }}'
+  };
 
 $(window).scroll(function() {
   sessionStorage.scrollTop = $(this).scrollTop();
@@ -160,8 +192,8 @@
       }
     }
   }
-  }
-  $(window).load(function() {
+}
+  $(window).on('load', function() {
     $(".overlay").hide();
   });
   $(document).ready(function() {
@@ -172,43 +204,131 @@
     // TFA, CSRF, Alerts in footer.inc.php
     // Other general functions in mailcow.js
     {% for alert_type, alert_msg in alerts %}
-    mailcow_alert_box('{{ alert_msg|raw }}', '{{ alert_type }}');
+    mailcow_alert_box('{{ alert_msg|raw|e("js") }}', '{{ alert_type }}');
     {% endfor %}
 
     // Confirm TFA modal
-  {% if pending_tfa_method %}
-    $('#ConfirmTFAModal').modal({
+  {% if pending_tfa_methods %}
+    new bootstrap.Modal(document.getElementById("ConfirmTFAModal"), {
       backdrop: 'static',
       keyboard: false
-    });
-    $('#u2f_status_auth').html('<p><i class="bi bi-arrow-repeat icon-spin"></i> ' + lang_tfa.init_u2f + '</p>');
-    $('#ConfirmTFAModal').on('shown.bs.modal', function(){
-      $(this).find('input[name=token]').focus();
-      // If U2F
-      if(document.getElementById("u2f_auth_data") !== null) {
-        $.ajax({
-          type: "GET",
-          cache: false,
-          dataType: 'script',
-          url: "/api/v1/get/u2f-authentication/{{ pending_mailcow_cc_username|url_encode(true)|default('null') }}",
-          complete: function(data){
-            $('#u2f_status_auth').html(lang_tfa.waiting_usb_auth);
-            data;
-            setTimeout(function() {
-              console.log("Ready to authenticate");
-              u2f.sign(appId, challenge, registeredKeys, function(data) {
-                var form = document.getElementById('u2f_auth_form');
-                var auth = document.getElementById('u2f_auth_data');
-                console.log("Authenticate callback", data);
-                auth.value = JSON.stringify(data);
-                form.submit();
-              });
-            }, 1000);
-          }
-        });
+    }).show();
+
+
+    // validate Time based OTP tfa
+    $("#pending_tfa_tab_totp").click(function(){
+      $(".webauthn-authenticator-selection").removeClass("active");
+      $("#collapseWebAuthnTFA").collapse('hide');
+
+      // select default if only one authenticator exists
+      if ($('.totp-authenticator-selection').length == 1){
+        $('.totp-authenticator-selection').addClass("active");
+        var id = $('.totp-authenticator-selection').children('input').first().val();
+        $("#totp_selected_id").val(id);
+        $("#collapseTotpTFA").collapse('show');
       }
     });
+    $(".totp-authenticator-selection").click(function(){
+      $(".totp-authenticator-selection").removeClass("active");
+      $(this).addClass("active");
+      
+      var id = $(this).children('input').first().val();
+      $("#totp_selected_id").val(id);
+
+      $("#collapseTotpTFA").collapse('show');
+    });
+    if ($('.totp-authenticator-selection').length == 1 &&
+        $('#pending_tfa_tab_yubi_otp').length == 0 &&
+        $('.webauthn-authenticator-selection').length == 0){
+      
+      // select default if only one authenticator exists
+      $('.totp-authenticator-selection').addClass("active");
+
+      var id = $('.totp-authenticator-selection').children('input').first().val();
+      $("#totp_selected_id").val(id);
+
+      $("#collapseTotpTFA").collapse('show');
+      setTimeout(function() { $("#collapseTotpTFA").find('input[name="token"]').focus(); }, 1000);
+    }
+    $('#pending_tfa_tab_totp').on('shown.bs.tab', function() {
+      // autofocus
+      setTimeout(function() { $("#collapseTotpTFA").find('input[name="token"]').focus(); }, 200);
+    });    
+    // validate Yubi OTP tfa
+    if ($('.webauthn-authenticator-selection').length == 0){
+      // autofocus
+      setTimeout(function() { $("#collapseYubiTFA").find('input[name="token"]').focus(); }, 1000);
+    }
+    $('#pending_tfa_tab_yubi_otp').on('shown.bs.tab', function() {
+      // autofocus
+      $("#collapseYubiTFA").find('input[name="token"]').focus();
+    });
+    // validate WebAuthn tfa
+    $("#pending_tfa_tab_webauthn").click(function(){
+      $(".totp-authenticator-selection").removeClass("active");
+
+      $("#collapseTotpTFA").collapse('hide');
+    });
+    $(".webauthn-authenticator-selection").click(function(){
+      $(".webauthn-authenticator-selection").removeClass("active");
+      $(this).addClass("active");
+      
+      var id = $(this).children('input').first().val();
+      $("#webauthn_selected_id").val(id);
+      
+      var webauthn_status_auth = document.getElementById('webauthn_status_auth');
+      webauthn_status_auth.style.setProperty('display', 'flex', 'important');
+      var webauthn_return_code = document.getElementById('webauthn_return_code');
+      webauthn_return_code.style.setProperty('display', 'none', 'important');
+
+      $("#collapseWebAuthnTFA").collapse('show');
+
+      $(this).find('input[name=token]').focus();
+      if(document.getElementById("webauthn_auth_data") !== null) {
+        // Check Browser support
+        if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
+            window.alert('Browser not supported for WebAuthn.');
+            return;
+        }
+
+        // fetch webauthn auth args
+        window.fetch("/api/v1/get/webauthn-tfa-get-args", {method:'GET',cache:'no-cache'}).then(response => {
+            return response.json();
+        }).then(json => {
+          console.log(json);
+          if (json.success === false) throw new Error();
+          if (json.type === "error") throw new Error(json.msg);
+      
+          recursiveBase64StrToArrayBuffer(json);
+          return json;
+        }).then(getCredentialArgs => {
+          // get credentials
+          return navigator.credentials.get(getCredentialArgs);
+        }).then(cred => {
+          return {
+            id: cred.rawId ? arrayBufferToBase64(cred.rawId) : null,
+            clientDataJSON: cred.response.clientDataJSON  ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
+            authenticatorData: cred.response.authenticatorData ? arrayBufferToBase64(cred.response.authenticatorData) : null,
+            signature : cred.response.signature ? arrayBufferToBase64(cred.response.signature) : null
+          };
+        }).then(JSON.stringify).then(function(AuthenticatorAttestationResponse) {
+          // send request by submit
+          var form = document.getElementById('webauthn_auth_form');
+          var auth = document.getElementById('webauthn_auth_data');
+          auth.value = AuthenticatorAttestationResponse;
+          form.submit();
+        }).catch(function(err) {
+          var webauthn_status_auth = document.getElementById('webauthn_status_auth');
+          webauthn_status_auth.style.setProperty('display', 'none', 'important');
+
+          var webauthn_return_code = document.getElementById('webauthn_return_code');
+          webauthn_return_code.style.setProperty('display', 'block', 'important');
+          webauthn_return_code.innerHTML = lang_tfa.error_code + ': ' + err + ' ' + lang_tfa.reload_retry;
+        });
+      } 
+    });
     $('#ConfirmTFAModal').on('hidden.bs.modal', function(){
+      // cancel pending login
       $.ajax({
         type: "GET",
         cache: false,
@@ -219,7 +339,9 @@
         }
       });
     });
-    {% endif %}
+  {% endif %}
+
+
     // Validate FIDO2
   $("#fido2-login").click(function(){
     $('#fido2-alerts').html();
@@ -327,46 +449,60 @@
       });
       $("option:selected").prop("selected", false);
     }
-    if ($(this).val() == "u2f") {
-      $('#U2FModal').modal('show');
-      $("option:selected").prop("selected", false);
-      $("#start_u2f_register").click(function(){
-        $('#u2f_return_code').html('');
-        $('#u2f_return_code').hide();
-        $('#u2f_status_reg').html('<p><i class="bi bi-arrow-repeat icon-spin"></i> ' + lang_tfa.init_u2f + '</p>');
-        $.ajax({
-          type: "GET",
-          cache: false,
-          dataType: 'script',
-          url: "/api/v1/get/u2f-registration/{{ mailcow_cc_username|url_encode(true)|default('null') }}",
-          complete: function(data){
-            data;
-            setTimeout(function() {
-              console.log("Ready to register");
-              $('#u2f_status_reg').html(lang_tfa.waiting_usb_register);
-              u2f.register(appId, registerRequests, registeredKeys, function(deviceResponse) {
-                var form  = document.getElementById('u2f_reg_form');
-                var reg   = document.getElementById('u2f_register_data');
-                console.log("Register callback: ", data);
-                if (deviceResponse.errorCode && deviceResponse.errorCode != 0) {
-                  var u2f_return_code = document.getElementById('u2f_return_code');
-                  u2f_return_code.style.display = u2f_return_code.style.display === 'none' ? '' : null;
-                  if (deviceResponse.errorCode == "4") {
-                    deviceResponse.errorCode = "4 - The presented device is not eligible for this request. For a registration request this may mean that the token is already registered, and for a sign request it may mean that the token does not know the presented key handle";
-                  }
-                  else if (deviceResponse.errorCode == "5") {
-                    deviceResponse.errorCode = "5 - Timeout reached before request could be satisfied.";
-                  }
-                  u2f_return_code.innerHTML = lang_tfa.error_code + ': ' + deviceResponse.errorCode + ' ' + lang_tfa.reload_retry;
-                  return;
+    if ($(this).val() == "webauthn") {
+        // check if Browser is supported
+        if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
+            window.alert('Browser not supported.');
+            return;
+        }
+
+        // show modal
+        $('#WebAuthnModal').modal('show');
+        $("option:selected").prop("selected", false);
+
+        $("#start_webauthn_register").click(() => {
+            var key_id = document.getElementsByName('key_id')[1].value;
+            var confirm_password = document.getElementsByName('confirm_password')[1].value;
+
+            // fetch WebAuthn create args
+            window.fetch("/api/v1/get/webauthn-tfa-registration/{{ mailcow_cc_username|url_encode(true)|default('null') }}", {method:'GET',cache:'no-cache'}).then(response => {
+                return response.json();
+            }).then(json => {
+                console.log(json);
+                if (json.success === false) throw new Error(json.msg);
+                recursiveBase64StrToArrayBuffer(json);
+
+                return json;
+            }).then(createCredentialArgs => {
+                // create credentials
+                return navigator.credentials.create(createCredentialArgs);
+            }).then(cred => {
+                return {
+                    clientDataJSON: cred.response.clientDataJSON  ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
+                    attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null,
+                    key_id: key_id,
+                    tfa_method: "webauthn",
+                    confirm_password: confirm_password
+                };
+            }).then(JSON.stringify).then(AuthenticatorAttestationResponse => {
+                // send request
+                return window.fetch("/api/v1/add/webauthn-tfa-registration", {method:'POST', body: AuthenticatorAttestationResponse, cache:'no-cache'});
+            }).then(response => {
+                return response.json();
+            }).then(json => {
+                if (json.success) {
+                    // reload on success
+                    window.location = window.location.href.split("#")[0];
+                } else {
+                    throw new Error(json.msg);
                 }
-                reg.value = JSON.stringify(deviceResponse);
-                form.submit();
-              });
-            }, 1000);
-          }
+            }).catch(function(err) {
+                console.log(err);
+                var webauthn_return_code = document.getElementById('webauthn_return_code');
+                webauthn_return_code.style.display = webauthn_return_code.style.display === 'none' ? '' : null;
+                webauthn_return_code.innerHTML = lang_tfa.error_code + ': ' + err + ' ' + lang_tfa.reload_retry;
+            });
         });
-      });
     }
     if ($(this).val() == "none") {
       $('#DisableTFAModal').modal('show');
@@ -394,6 +530,21 @@
   {% if ui_texts.ui_footer %}
   <hr><span class="rot-enc">{{ ui_texts.ui_footer|rot13|raw }}</span>
   {% endif %}
+  {% if mailcow_cc_username and mailcow_info.mailcow_branch|lower == "master" and mailcow_info.version_tag|default %}
+  <span class="version">
+    🐮 + 🐋 = 💕
+        Version: <a href="{{ mailcow_info.git_project_url }}/releases/tag/{{ mailcow_info.version_tag }}" target="_blank">{{ mailcow_info.version_tag }}
+    </a>
+  </span>
+  {% endif %}  
+  {% if mailcow_cc_username and mailcow_info.mailcow_branch|lower == "nightly" and mailcow_info.version_tag|default %}
+  <span class="version">
+    🛠️🐮 + 🐋 = 💕
+        Nightly: <a href="{{ mailcow_info.git_project_url }}/commit/{{ mailcow_info.git_commit }}" target="_blank">{{ mailcow_info.version_tag }}
+    </a><br>
+    <span style="text-align:right;display:block;">Build: {{ mailcow_info.git_commit_date }}</span>
+  </span>
+  {% endif %}
 </div>
 </body>
 </html>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/debug.twig b/mailcow/src/mailcow-dockerized/data/web/templates/debug.twig
index 97582b7..6c96de8 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/debug.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/debug.twig
@@ -2,25 +2,25 @@
 
 {% block content %}
 <ul class="nav nav-tabs" role="tablist">
-  <li role="presentation" class="active"><a href="#tab-containers" aria-controls="tab-containers" role="tab" data-toggle="tab">{{ lang.debug.system_containers }}</a></li>
-  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.debug.logs }}
-      <span class="caret"></span></a>
+  <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-target="#tab-containers" aria-controls="tab-containers" role="tab" data-bs-toggle="tab">{{ lang.debug.system_containers }}</button></li>
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.debug.logs }}</a>
     <ul class="dropdown-menu">
-      <li role="presentation"><span class="dropdown-desc">{{ lang.debug.in_memory_logs }}</span></li>
-      <li role="presentation"><a href="#tab-postfix-logs" aria-controls="tab-postfix-logs" role="tab" data-toggle="tab">Postfix</a></li>
-      <li role="presentation"><a href="#tab-dovecot-logs" aria-controls="tab-dovecot-logs" role="tab" data-toggle="tab">Dovecot</a></li>
-      <li role="presentation"><a href="#tab-sogo-logs" aria-controls="tab-sogo-logs" role="tab" data-toggle="tab">SOGo</a></li>
-      <li role="presentation"><a href="#tab-netfilter-logs" aria-controls="tab-netfilter-logs" role="tab" data-toggle="tab">Netfilter</a></li>
-      <li role="presentation"><a href="#tab-autodiscover-logs" aria-controls="tab-autodiscover-logs" role="tab" data-toggle="tab">Autodiscover</a></li>
-      <li role="presentation"><a href="#tab-watchdog-logs" aria-controls="tab-watchdog-logs" role="tab" data-toggle="tab">Watchdog</a></li>
-      <li role="presentation"><a href="#tab-acme-logs" aria-controls="tab-acme-logs" role="tab" data-toggle="tab">ACME</a></li>
-      <li role="presentation"><a href="#tab-api-logs" aria-controls="tab-api-logs" role="tab" data-toggle="tab">API</a></li>
-      <li role="presentation"><a href="#tab-api-rl" aria-controls="tab-api-rl" role="tab" data-toggle="tab">Ratelimits</a></li>
-      <li role="presentation"><span class="dropdown-desc">{{ lang.debug.external_logs }}</span></li>
-      <li role="presentation"><a href="#tab-rspamd-history" aria-controls="tab-rspamd-history" role="tab" data-toggle="tab">Rspamd</a></li>
-      <li role="presentation"><span class="dropdown-desc">{{ lang.debug.static_logs }}</span></li>
-      <li role="presentation"><a href="#tab-ui" aria-controls="tab-ui" role="tab" data-toggle="tab">Mailcow UI</a></li>
-      <li role="presentation"><a href="#tab-sasl" aria-controls="tab-sasl" role="tab" data-toggle="tab">SASL</a></li>
+      <li role="presentation"><span class="dropdown-header fs-6">{{ lang.debug.in_memory_logs }}</span></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-postfix-logs" aria-selected="false" aria-controls="tab-postfix-logs" role="tab" data-bs-toggle="tab">Postfix</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-dovecot-logs" aria-selected="false" aria-controls="tab-dovecot-logs" role="tab" data-bs-toggle="tab">Dovecot</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-sogo-logs" aria-selected="false" aria-controls="tab-sogo-logs" role="tab" data-bs-toggle="tab">SOGo</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-netfilter-logs" aria-selected="false" aria-controls="tab-netfilter-logs" role="tab" data-bs-toggle="tab">Netfilter</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-autodiscover-logs" aria-selected="false" aria-controls="tab-autodiscover-logs" role="tab" data-bs-toggle="tab">Autodiscover</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-watchdog-logs" aria-selected="false" aria-controls="tab-watchdog-logs" role="tab" data-bs-toggle="tab">Watchdog</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-acme-logs" aria-selected="false" aria-controls="tab-acme-logs" role="tab" data-bs-toggle="tab">ACME</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-api-logs" aria-selected="false" aria-controls="tab-api-logs" role="tab" data-bs-toggle="tab">API</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-api-rl" aria-selected="false" aria-controls="tab-api-rl" role="tab" data-bs-toggle="tab">Ratelimits</button></li>
+      <li role="presentation"><span class="dropdown-header fs-6">{{ lang.debug.external_logs }}</span></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-rspamd-history" aria-selected="false" aria-controls="tab-rspamd-history" role="tab" data-bs-toggle="tab">Rspamd</button></li>
+      <li role="presentation"><span class="dropdown-header fs-6">{{ lang.debug.static_logs }}</span></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-ui" aria-selected="false" aria-controls="tab-ui" role="tab" data-bs-toggle="tab">Mailcow UI</button></li>
+      <li role="presentation"><button class="dropdown-item" data-bs-target="#tab-sasl" aria-selected="false" aria-controls="tab-sasl" role="tab" data-bs-toggle="tab">SASL</button></li>
     </ul>
   </li>
 </ul>
@@ -28,290 +28,582 @@
 <div class="row">
   <div class="col-md-12">
     <div class="tab-content" style="padding-top:20px">
-      <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
       <div role="tabpanel" class="tab-pane active" id="tab-containers">
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">{{ lang.debug.disk_usage }}</h3>
+
+        <div class="card mb-4">
+          <div class="card-header fs-5">
+            <span>{{ ui_texts.title_name|raw }}</span>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="row">
-              <div class="col-sm-3">
-                <p><i class="bi bi-hdd-fill"></i> {{ vmail_df[0] }}</p>
-                <p>{{ vmail_df[2] }} / {{ vmail_df[1] }} ({{ vmail_df[4] }})</p>
+              <div class="col-sm-12 col-md-4 d-flex flex-column">
+                <img class="img-responsive my-auto m-auto" alt="mailcow-logo" style="max-width: 85%; max-height: 85%;" src="{{ logo|default('/img/cow_mailcow.svg') }}">
               </div>
-              <div class="col-sm-9">
-                <div class="progress">
-                  <div class="progress-bar progress-bar-info" role="progressbar" style="width:{{ vmail_df[4] }}"></div>
+              <div class="col-sm-12 col-md-8">
+                <div class="table-responsive" style="margin-top: 10px;">
+                  <table class="table table-striped table-condensed">
+                    <tbody>
+                      <tr>
+                        <td>Hostname</td>
+                        <td class="text-break"><div>
+                          <p><b>{{ hostname }}</b></p>
+                        </div></td>
+                      </tr>
+                      <tr>
+                        <td>IPs</td>
+                        <td class="text-break">
+                          <span class="d-block" id="host_ipv4">-</span>
+                          <span class="d-block" id="host_ipv6">-</span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>Version</td>
+                        <td class="text-break">
+                          <div class="fw-bolder">
+                            <p ><a href="#" id="maiclow_version">{{ mailcow_info.version_tag }}</a></p>
+                            <p id="mailcow_update"></p> 
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>{{ lang.debug.current_time }}</td>
+                        <td id="host_date" class="text-break">-</td>
+                      </tr>
+                      <tr>
+                        <td>{{ lang.debug.timezone }}</td>
+                        <td class="text-break">{{ timezone }}</td>
+                      </tr>
+                      <tr>
+                        <td>{{ lang.debug.uptime }}</td>
+                        <td id="host_uptime" class="text-break">-</td>
+                      </tr>
+                      <tr>
+                        <td>{{ lang.debug.disk_usage }}</td>
+                        <td class="text-break">
+                          <div>
+                            <span class="d-block"><i class="bi bi-hdd-fill"></i> {{ vmail_df[0] }}</span>
+                            <span class="d-block">{{ vmail_df[2] }} / {{ vmail_df[1] }} ({{ vmail_df[4] }})</span>
+                          </div>
+                          <div class="mt-2 mb-4">
+                            <div class="progress">
+                              <div class="progress-bar bg-info" role="progressbar" style="width:{{ vmail_df[4] }}"></div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              <div class="col-sm-6 mt-4">
+                <h3>CPU</h3>
+                <h5><span id="host_cpu_cores">-</span> {{ lang.debug.cores }} @ <span id="host_cpu_usage"></span></h5>
+                <canvas id="host_cpu_chart" width="400" height="200"></canvas>
+              </div>
+              <div class="col-sm-6 mt-4">
+                <h3>{{ lang.debug.memory|upper}}</h3>
+                <h5><span id="host_memory_total">-</span> @ <span id="host_memory_usage"></span></h5>
+                <canvas id="host_mem_chart" width="400" height="200"></canvas>
+              </div>
+
+              <div class="col-sm-12">
+                <legend class="mt-4">
+                  {{ lang.admin.guid_and_license }}
+                </legend>
+                <hr />
+                <div id="license">
+                  <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>
+                      <div class="col-sm-9">
+                        <div class="input-group">
+                          <span class="input-group-text">
+                            <i class="bi bi-suit-heart{% if gal.valid == true %}-fill text-danger{% endif %}"></i>
+                          </span>
+                          <input type="text" id="guid" class="form-control" value="{{ license_guid }}" readonly>
+                        </div>
+                        <p class="text-muted">
+                          {{ lang.admin.customer_id }}: {{ gal.c|default('?')|raw }} -
+                          {{ lang.admin.service_id }}: {{ gal.s|default('?')|raw }} -
+                          {{ lang.admin.sal_level }}: {{ gal.m|default('?')|raw }}
+                        </p>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="offset-sm-3 col-sm-9">
+                        <p class="text-muted">{{ lang.admin.license_info|raw }}</p>
+                        <div class="btn-group">
+                          <button class="btn btn-sm d-block d-sm-inline btn-success" name="license_validate_now" type="submit" href="#">{{ lang.admin.validate_license_now }}</button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">{{ lang.debug.solr_status }}</h3>
+
+
+
+        <!-- container info -->
+        <div class="card mb-4">
+          <div class="card-header fs-5">
+            <span>{{ lang.debug.containers_info }}</span>
           </div>
-          <div class="panel-body">
-            <div class="row">
-              <div class="col-sm-3">
-                <p><img class="img-responsive" alt="Solr Logo" width="128px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABlCAYAAAAI2qyuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAXEUAAFxFAbktYiwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAABv7SURBVHhe7V0JuBxVlX4JMy6jM4qOC4rp6qWq+jW+ruoXkIjoS1d3EhYXRvNkFHFBYECUAXGAASEOyiLIrigOEpDoACIqwogLiwMSkIghYF4viSFhiUGWCAQIyXuZ/9w+3V3VdXtfee/+33e+16/uqXtv1T2n7j33nnvukIJCP7BjbOzvsgt0O5cyjsymzG9mU8YvcylzIucYT2Ydczt+7xDkGFuR/hf8XplxzHG6d20qauSSkfCSJUOzRWYKCtMBE3uZ/5hxjE9A4K+FEmwuKUFj9Nd1Y9brdwwNzco6xr10DXk8DAX77kTaXEQKx8UoKLz8AGE+D73BcxVC3zBl09HPUz6ZpOHI0kEboXhnrU3H5ogCFRQGHSvmzv17+stf/ZaVA71EppgXFO0Xcp4CYai2LZeKLs2m9BDxKygMHEg4Mynz+kzK2IP+X52KvlEmzI1SPml+kPLB8CyOXmJKxuMnYyvoG7l9Iv9E9yoo9B3Xjg/thC/8cegtnsffFyGcr6TrBWNcJsQNkGPeIjIHkO8yKU9teiSXiryfs1BQ6A8eWhTdBV/3W4qCid/3c9IQ9QAugW2YoGSTeSc6Snn8KTkcKAyf5Ly1iHudi9eNBV4lKqSg0Evk0tF5EN7HPILpmN/l5CEMdY71pDVKjnkFZ0HDqwulPE1QJmneM5E238ZZKih0H3ln+AB8oV/wC6TxOWYhBfmGP702offYknX0t9P9Dy6MvaE9I99Fjrk+50RiomIKCt0EBO7jENzyop6LVqNXYTbiu6YyvR5NpMz/4tuH8PvLMp6WyTFO5awVFLoDfIkXQ9CkygHatuL9c/+BWYfQwyyX8FQlKN1jGxfEX0P3blg879XoTTbJ+JolskUySeNEUae0PkxEvxUUOgoMfd4rZqkkQkgEAV/FrALgfVzGV41gb3yWbx3KYKgm42mWqKfLpqKHU54Fg9/cgHqtp8kFUZCCQidAK9UQrpoCD2H8HrMPUU9SbRhWhVZeOz6+E927A39h/K+R8DRHjrGVejzKM7dP5E3IM1NMQ92WF6ejFRTawoPjsVdA0O72CJ+E0AMcxbcMkVOhjEdGYgiUNlJ861DeMcdlfM2R8SyM8gWUHy0aQllWSPguFgUqKLSDfMrYRyJcPppImnvxLSTkSRmPlBzjRr5NAMr4eylfo+QYT2A4+C7Ki9ZAsk70NhmfUEw8myhUQaFV0PBKJmBuwvDlpXVjY6UFOVw7pJKnCm3LObHS9Cv1JBKeZuiRfHJ4N8qLPH2hbD+V8JTJMdY/OBZ7rShcQaEV7FgyNBtj9iekAsaE9AeYXSDjRJfI+CoJBvO3+BYBKNrNMr5GCHXIToyZGuVDjpIZx7xCxucjxzhbFK6g0CogSP/rEywXQThLBjoBw5fLZHxugnJsJuOZbxnKLtQtGvbIeOsRyr9vrfPOt1A+pBzoOc6V8ckIivRiUbEUFFoCBPcsmXAVKTvfPJpZBSCgv5bxecgxjmd2gXzKvErKV4egHLevTYdex9lQXZteYMykyi4yCgp1UXT3KAJC9JFKoXJTZoHxHmYVgPBnZXxFwlDqIbcTYatOidmkccNd83Z9NWczlEubR0BBpLy1iNZ31NqIQsOgIRL/FPgzBFgmWET4gm9fySvgBLFRSuqnVSYo4L8yuwAUqmmnxIxjXFncUEWgPFHupIy3EZpwzNM4KwWF6kBvEKRZqdtc+70L43q5oQ6h/BOzCZAtIOMrEgR7OeXH7IWNVU06JaJ+F7jzyM83F1GdZbyNEnqRh4uLlQoKVTGRLIzhK/d5QwApAolfuBzzSmYRoB2FUj4QlGkqM987HAP/KTJeGdH9EOST+VaBNRjeNatg1YjWbzhbBQU5MGQS0UMyaWNvviQAwTyzUqCIILReA72GvQJl+BGzCWyA/YB8G3JKLAyfyu70hDUpcwQK+pSMvxWinomzVlDwY82C0JsLgigE5iC+LABBXOwWpiKREyOzCOTmG8fL+cwXK4MqgLdBp0Rjaz41fCDfJiDcWRzjUTl/a4Q65jl7BQU/3EpQdBEvYt0iU3MLExG+uNsedbm4E6oZ3Og9zmEWAbJxoIx1nRIhtFvI3YVvE1i9KLpLxjHXyvjbIRrCqdkshapAb1BaYIOCeJz5eEX9abdAQaFWc3IJuH69h6dAIgAcswhAYQ6U8HkICviU28eLsGr/kZ0hyPfL+Nsmx9iu7BCFqoDg/colMDfx5RIgQN4FwLTXQCdgOOTznEW+HjuFAOWq45RoPDYBG4PZBWg6GUp6l5y/daLVdDzbpVBGk4tSUPAjk6RwOQWhwdf7Qb5cAoTobLdg5dLGMZwkUFgDqexlygHgiqgRKVEQ8siTjcHsAsLtPlnb5aVZwvANBr5x+rqx2Fu5mKHMmPHP/FNBoYyCa3h5oQ2/N7vXGgj5tPFRj4Alh9/HSQIUh9edhyDH/AAnl4BeoJZT4v3r9isLLKEwvDOvlvC2RJmU+TCGeF/c5PLkLYQwMi6nHoovKSiUwTv5HigKEQRyigSekwUecG2EQvp2t4ARMguNaDFd8KSMWyuVjALKkTHs5ivxO+Ydq/Ye2ZlZBUSv5JiXyPibJsdYlU1FP7XD1aPRPviC97HxLPFAQR7iJAUFL/BV9WyOyiZ1i5ME+EsuIrRDkLJ8uYTcgujC0r2pcgA4N6A0PyjyeMgxbnIHfSgCw7ivSvmbINTldjzLfm5lpWeBjXMInsMzVYz/NzOLgoIfEJDS8CefDIv4uG5gyPQbTv8hXyoBaUcU7804RikAXBHVnBJJacjGYLYSYKu0FnwOhOfYDrpudTpSCkVURGa+kULafbL7yGBnNgUFPwqr04WACxh6lPaZF4Gv8ddFGsbwfKkECPTXhKA5xnOVHsEEKMIFRUEsEuyBi+lrziwl4Iv/yWpDsVqEe15AOd9ekx7WOasSKOQP6nYjeKT3EikFeZkgEom8skixmP/r2k3Q/ggWljP4UgklQz0dHeNLJaAHuZLSMAzzecZWOiWSkIJKgeLcgPJ9CDxNub+jR3gyl4qevsoJio1TbhSimujfRHl184RyPcu3KQwq5u0679VG0NpWJF2z/8JJPYHwyHWMZyDwV/OlEvILYxHqYSoNeAKE9DbQY7J93rjn1LIQmpMQ2C9wkgf5VHg+0mu6y7sJ5a3HcO4YWZk0M4e0E4p2UyOEsh/m29vB+E6RyGjYDCY+YASsYwzN+oYRtJfi73X4eyPoZ3rQvhZ/L0cDnwOeY00t8UG6Z2hoiTpjrg4KCmLvKBIU5AlO6hkgVCeDlvO/JYjZLsdYwf96AIVam0uah/C/JRQiJRocV8t4CcryCU7yYCIZnYsy/1YptDJCfqvy6eGDZcew0TmGtFIPnnWye2tRNmn+gbNpDqY2YhqB+IkQ/JuhCJvdDdgMobGfMjT7el2zDo9G93gjZ6/gwiAoCPlY5R3DpyAECHgpCmIRPMP1e5k9AWE9UggfnSEyX9+fL3uQGTOiULCanr34uk9hCHQreoV9K6ePiyAvZFJs2f0N0vWcVX0EAmOvigTjn4Uwr3A3WKcIDb8VtAzkmU6c6RgEBSFMpMyDZLNLlQ6KBDLKi8Ha3Cg6JUJoN1d6/hbxwMLd3gHlWS8RVkFI2w7F+NFaPr1KBvIURjnXgqR5NEpQ5tM5y+oYw0OZocQR+NI/4m6oLtIkhOCqUCj+Zq7CjMagKAgNVXYc7nUTqYZqoTzFUCdl/qVyTaWI3N6RN6HnWC0TVtHjpMxLyO5hdh/W7z2yM5TvXFDVuMHNUDYZ/RhnLcdw2NpND1p/cDdQJWGYtR22xWr8vUYPJk6LBOJHmEF7cVSzFpphK4nr6TBsDj1gfRrDsRNwz6XohX6HfLdU5uUhzd5EeXBVZiwGRUHahVgFx5c/vzAsFXAy9KEcPqdFKMaTGMZ9dc2C6h9MWg0nQx+8NWN2NUu05ZiL8ANCPg7BlwoxhP5p/P0uGeaRyLtaOiSRpiuFAmn2+aQMlWUI0mjmxj6Ub5mRmC4KQj5VsvUQgvD9gj3hFk78/xB6jKNrRTskpYMNcgAUo2bklFYo45gbqtk2QwZsDTTGlLthBIlhlnXU3F384852QMoiytSsh31loh5kxDPrjMN0UZBqoJkwCGRp3wiU4n6yd9yBImQQs1wp8/bifR0nx7yUi/IirI18sDBscgupNUlTtPF4OaRLNxB/S/w1EIBzC+V5hGJ7JBj3eYLOBExnBSnMdhnfg6BTAIZbaLdg1a82Iw8jHsL7ffC3HNanESJ/LS6yDGNOPOiftrWep3ULZukJxJpK0H7OXQ8IxjM0vcwsMwbTWUHyKf0sCPo1E2Pm7nypKoSNkjK+Rsa6TKA7SajT47IZu1lQjl9VNMbWfhnKEc0eI+V01wdDvPt67WrRb0xXBaHTZnPJ3TwboWSgoVY+qR8GxdgoE+ZuEG035uLLMEKJlLshiCCk/87JfYEZtD/uqZNm5aPh0bmcPCMw3W2QWshgyAXFKO1L6RTxkG4T8qYtwT/OOcY55KKC3x9ZkzZ3l7nawzC3r/c2hEW7qfruCoJeYyno50bI3hf/zjjXlJmoIGsWRN8JO+MXbqFujjAMc8y1UIDb8HspeoTToACH0h4V2sjljgXcEDBseS2E8EV3Q0QGZw2iptE23TGTFOTBsdhbs0nzvyHYVc80LHz9yVvXXJlNGTeA//y8ox8HA//A1anou8m5kmbGOMumUHWCgBbz3I0AZSEvxhktmIOCmaAghYM+zZMg+M9guLMVtB49wB15x1iWSRtnkP8WzSpRz1I8HrpdkBLRPpGsE6VA17Sv5TcoV36ADnoLWuEuK0jQvpyTFPqMmaAgFPCBfLNoIXFFg+4szYCUgcL4YJj1CSjiebQoib+VnsJ/rRrFBC/+Ik8jBOPHcZJCnzGTjfRWQLNeHDDioGxKPx/KcHsxCEMtQg9V3e/KCFpXeBohYNd20poBGMdXJxqMG7QGZGr20REtfooesL5Cbv6RgPUZXUu8zzDmdj1uklKQ6qAYW3TwJ3qDT2N4dCGGSndimNZ0dHcM4f6Hs5QDNscyTyMEEh/mpBkFWsk3g9ZBeB8/9i+YSmkK9tsEhPZcnn7uuN3WDQWJBO3FyOvuIpG3NifVw6xhLRGIzME7ClrnmIWNcLdRHnrQuh3pXZtlJGWg6IprUvqncmnjIgj2negdOrFouJrOT+di5MADXgoqN7yWOJiTZgTItR7PfTaInDDL76FZ0ux7IsEEucR0TFG6oSAQ5s+788THoOa+B+opjVD8RJS9ynOfi5Dn80uWdGaHKLnLk0t8Nq0flqP94465HNT5FXTHeGJ1KmpwsdUBm+Msz8Nq9pc4aVpjLr5KRsg6XtesZ9zP3wG6VQ/sNszFtIV+Kkhh+t86A71F7a0JoHYURNgNwitXBIW7G387sp+jJlGk+Ipg2FUBAfm3igdeyknTFhhGDuM5a+11mYIwrscQ6ic0nMA7+rIRsk/EfafBLrkM/9+L9K2S+5isF0DHoqi2epN+KYgZsOaD7yEPXw3qQA8yi06yyiajH86n9K9AiG/CEGoj7Aq5gLdBUMAtFBOYy60PjEF39zysZq3H5Wm7DmIErAMg+M+6n7lEmrUBdsjJ4XCCNvbUfAf8hf0o7rsZ5N8eANJD9nXtbA/oh4IYwcQX/R7dLtJs2pawVOQTju+jByw7FprrOaatE6CFO/LZghH9IQyHTsVX/0YIeFs+WVC4pzNj3hOz6oK21eKBPeNvchbk5GmFQm/pdacnguD9FX8/R8MuZm0K4fDIKITql5X5EuH68tiu897ArE2hxwoyC/mf50ljwvWt+LBcYYZtGpb09eO5Hkoz4ZgfEEqTMn4GwX+EVtgrlcFHjpGjgHGcTXPAV2FpxQu5BZenVS8C5TgMz+b70uP6dZGI/SZmawez0GN8DArhM/YhlPe2svuylwqC3zRRUb5eTr+OtkKImwcTs2hLbjYV3R/Dp5PR0/wUfze4lQP//3T9/t5g2E1B10b3lLycabPdVQ/Y+0G4vMMGzdrWDY9lfc7uISjd/Z6yCnQz9dbM1hB6pSAUS8BzTVy3/6aHEp5zzF9OEEqT1PeDwizGv+1/7PFCbqh4SS/Qghgnv2yh67uH8CyerzoE+CU9EO/aeg/1FhjK3e4uU5QbtM9ilobQIwX5Fb0P9zXwPBoMjnpOdeoGyM7IJaMLs46xDMOkSzBkOoW23NKRzrR7sPLAnb6CDC28LM8CGRrkWSOQ8Byc+HICrYgbWvx3Fc9EW3g/wixdAxnxELzfu8sGTVKwCmapi54oSCVRRJlgvP76QAfB8XovhIJs9Q6NyLPXeAi/f5tPmVdRzN1M0jgy4xj75pxIjBb5KCQRZ9N90FcVL6linG5NRoLWOdTgzPaygVQYQtYJnNx1vDO451t41qdUPuqUp0B8zFITvVYQ6knYEO8LaOEOCnF9o9O7ZJzDvtgMRbor6+j/wtl0FzTNh5clmba0NqKHOb4XPkidQGzX2BtQ76fczwAB+AWSejr5wNuHPTNn5EHNyTXRawUxNevLzNZX5NKRMfQo98qUokjkdwXl+Dl+H7I2HXod39ob4GUdWjkuLRIaaSsU5SY0+rG0hjKoPYseTJxZUe9nIpGRXTm5p0AvcrG7LqCnGpnV6qmCaPYDzU4idBMU9YRc1KEo69BTPJ6lU3Md88pMKvrFtWljb1lghZ4iHEi8Gw2Slb5ML01BYTCMsH4LI/RqNMAluHY2rp2O31+BDXAKudCbgfghwjsWSsWhRbs2dhRGsmb9zVPPBr/a3UAgYL2ehNtdH12L13Xp6aWC4Lo0mHS/US8UUF9Bh7agUb6E3oQW0nwvtS0iAdbse4xg/DvkQt7JrzuU9ShvWfYm8tbl5L6AFNRTp6C1BpdrfiR6qCB/RNK0WvfqKchdAkpyGBr1LrxM30p0h4iiKN5LaxNkP3DRLQH5eGaPIBTSE4x6Ce5FPPG+jFC8pttDDxVkRod47SjMdyTeRsGoIYTfxstegb+d9oYFkQepdVEssIfnnOxGQHsWKvKa7IavUCvQtcRl7rrh3fljMLnQCwXB/1tM039KlELnMDsOm2JYi+8Z1uwPmSHr0xDKo0wtfjSdKBWhma+QvQSNcRFslGvQyHdiuLGBBNfdUDIC/7NmSKx2N2yvwNbxrApDAAbmQHg8jydABuo2wUlS9KQH0ezGD4pR6B12LTT+HjSkgsLcBPKEHvIQ0kOhuQ1N5UEIv+++Vw+OnMRJfUcsFnsFhNztSTxZa9q8Nwoi3w+iMGAYmTOys67FvwAh+LOnAYsUsFY2clQbeB903zdo7jIQyF+768dB8aRQCqLgg9jpR7NQ0n3h1l21VqHFvZ4geNakae41UONrPBcddFp+poB1DCf5oBREoSpEtPmgfZ+nMQv0HWbxgfeXl3ghUD09NrkRROhIO3cdQ/Z5nOSDUhCFmqCvv65Zd3gaNGhPVdvQJU7g9fBaKzlpYKCHhL9buY6avYyTfFAKolAXBdvEyrsbFYJyJyd7EAnEEx6+oJyvnzC1+CJ3HSl8Dif5oBREoSGE59h7oTErHCgTcU4uga55eDS7tcPguwgjYO/rrqNSEIWOAML+c3fDoqF9q+O6PkKbo8o8mvUoJw0MaFuuu46gqlFklIIoNAxDix/oadig9VtOKqGwk6/c00AYttN6CycPBMTCqes5UMczOckHpSAKDYPcTtwNC/viKU5yYzZdd/OR9zCnDQRQp8vd9cOQ60hO8kEpiEIzmI0hk3ttZErmQ0Q9i4sHZB3FSQMBDBU9C5kUpI2TfFAKotAUIOye2SxynOSkEiBEnthO6FF+wkl9R3TO6C6oU3kIqFkv1dpwphREoSlAQf7kblzy3OWkEiAA+7t5IFTPDYodEtWsw911A93NSVIoBVFoCmjcR92NKwv4Vti74t13Yc6xDuLkvgIK7gkFhN7tPzlJCqUgCg2DegE07rZy41ovVdtDjbQfuIUAgnUHJ/UNw2FrN9TFvZYzxTGAq0IpiELDoN137obF1zfDST4YoVHHzUsUDSfezcl9AQSzwg1fhHetCaUgAwLybepFJL12gF7hQk/D1j5slGa8POE/9WD8Vlzvy75rCLaF+ns2iOkhez9OrgqlIAOAsJY4WLiIa/amMIYBfHmgQF66EHjP1t560REjQXvczU+kB+I9jzUrojsW9vK760LGeV1lVQrSZ0ApTsVLKo+LNetx/N2DkwcFs1CvH5XqKMjaSLvzOL0aZlUKJglYr2NjkSHurgNoSg+OvpeTa0IpSJ8BBaG94uWXJcjaMkhRvSmmVmUdaZsuJ9cEHe4CgfAGZobBTuGMmKWrQC+2AALomlggsq7g5LpQCjIAwAs72fPCCkQnuH47Hu9vLCnagkt1cdcN9V3RTARA2UcAz3b1+ND4TszSFaCcPSB8nuB1KHcdhf9hlrpQCjIgwIv6LK3qel6ceHn2WjYme2rc0rZalF0ZrpME7MlIZDTMbA2BbAAI1m8q84po1g8bGKa1BD048l6UUXmQzgsQzncxS0PwKYjc/6wpKAVpETSNipfnWYgrkhCwOkHOOgU6bgGCMOGvh7Wl1TrQEWh4Nn+emvV/MneVNjArEkgcgfdVccCnNUneyMzTMArH49GBoKW8JqNvqx+4ohaUgrQBsae7Yt+Fl6zlaPxPxmJjHQ1YLcLhhOIfhmLcKS1XszbXcuprBBQ8Dvn7I6Zo1uN6wP4YWNrqJUX+/kOIQNakGUwcwmxNA3n80Z0fnuE4TmoJSkHaxyxDSxyMF1k1Hi/StuDFXodh2WF8fl3TwhWNju5iBu1x5EHHKlcvS7MfMAJzo3xbW9B16+0Q2JXScqCctB0WbE0F1aYeCHmeA3rel69mvdju1DIJsDtPvI9nYnPsGCdLEQvEqkakVArSIVBXjsb4ptQ2qaTC9PAvhd2gWSfga/8ZCP9iI2wdEC4clXwoBPAkPWR9C79vBs9jpXurEMreijy+3mlHQ3KRp22usjIFafYaPRj/uqmNLiqEPvUY87PI10vsfZ8jQhNRwDvpkcl4b+t1Lb4n39cywuHd34E6eYLq4V0+jWunGKFEKkrnj9BmMjFlb/0Q6WtBNLEhna5XCtJh0HFceKnfx8uvmK7sDqGsbaZmX9XtY8AovjDK82yukpP1PIT9cSjsJiGY9YN3k3AupWATXFTbQLmVaymNkDSkqFKQLoGGUpGgfTZe8EbPC+4UafFHIIhn9vLIYfIGpl6toV6yAcK7+Z0Rst7D2XcSs2nWTVZmdbIm9UDCdy64UpAug2ZWCt164gx06/fgBbtnWRomNNQTuPfXES1+SiQwOm9oaEnvDmOsQOEA08QZqJN0Fq8OPY8v/LUYVjZ8OGdrWDLbLCya+s5h95Nok7vRC7+fby5BKUiPQeE+zeDICPlGURhN9DJfZVvjcijQMnydL6PogRjSnGwER8gWSfPUal8cB2tjyWzy+kUdT4Lg3ADKg9zj/yk80yYMt+7E81xAdlavQ5vSDkTU6aOgM+g4BROE+pyH9/wfZO+R9wC1CbP7QDOVtE+/SDRxwUkKHgwN/T/fvy7K4dvMgwAAAABJRU5ErkJggg==" /></p>
-              </div>
-              <div class="col-sm-9">
-                {% if solr_status != false %}
-                <div class="progress">
-                  <div class="progress-bar progress-bar-info" role="progressbar" style="width:{{ solr_status.jvm.memory.raw['used%']|round }}%"></div>
+          <div class="card-body p-0">
+            <div class="row mx-0">
+              <!-- solr info -->
+              <div class="col-md-6 col-sm-12 p-2">
+                <div class="list-group-item p-0">
+                  <div class="d-flex p-2 list-group-header">
+                    <div>
+                      <span class="fw-bold">solr-mailcow</span>
+                      {% if containers["solr-mailcow"].State.Running == 1 %}
+                      <span class="d-block d-md-inline">({{ containers["solr-mailcow"].Config.Image }})</span>
+                      {% endif %}
+                      {% if containers["solr-mailcow"].State.Running == 1 %}
+                      <small class="d-block">({{ lang.debug.started_on }} <span class="parse_date">{{ containers["solr-mailcow"].State.StartedAtHR }}</span>)</small>
+                      {% elseif containers["solr-mailcow"].State.Running != 1 %}
+                      <small class="d-block">{{ lang.debug.container_disabled }}</small>
+                      {% endif %}
+                      {% if containers["solr-mailcow"].State.Running == 1 %}
+                        <span class="badge fs-7 bg-success loader" style="min-width:100px">
+                          {{ lang.debug.container_running }}
+                          <span class="loader-dot">.</span>
+                          <span class="loader-dot">.</span>
+                          <span class="loader-dot">.</span>
+                        </span>
+                      {% elseif containers["solr-mailcow"].State.Running != 1 %}
+                        <span class="badge fs-7 bg-danger" style="min-width:100px">
+                          {{ lang.debug.container_stopped }}
+                          <i class="bi-x ms-1"></i>
+                        </span>
+                      {% endif %}
+                    </div>
+                  {% if containers["solr-mailcow"].State.Running == 1 %}
+                    <div class="mt-auto ms-auto">
+                      <button class="btn btn-light" type="button" data-bs-toggle="collapse" data-bs-target="#solr-mailcowCollapse" aria-expanded="false" aria-controls="solr-mailcowCollapse">
+                        <i class="bi bi-caret-down-fill caret"></i>
+                      </button>
+                    </div>
+                  {% endif %}  
+                  </div>
+                  {% if containers["solr-mailcow"].State.Running == 1 %}
+                  <div class="collapse p-0 list-group-details container-details-collapse" id="solr-mailcowCollapse" data-id="{{ containers["solr-mailcow"].Id }}">    
+                    <div class="row p-2 pt-4">
+                      <div class="col-sm-3">
+                        <p><img class="img-responsive" alt="Solr Logo" width="128px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABlCAYAAAAI2qyuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAXEUAAFxFAbktYiwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAABv7SURBVHhe7V0JuBxVlX4JMy6jM4qOC4rp6qWq+jW+ruoXkIjoS1d3EhYXRvNkFHFBYECUAXGAASEOyiLIrigOEpDoACIqwogLiwMSkIghYF4viSFhiUGWCAQIyXuZ/9w+3V3VdXtfee/+33e+16/uqXtv1T2n7j33nnvukIJCP7BjbOzvsgt0O5cyjsymzG9mU8YvcylzIucYT2Ydczt+7xDkGFuR/hf8XplxzHG6d20qauSSkfCSJUOzRWYKCtMBE3uZ/5hxjE9A4K+FEmwuKUFj9Nd1Y9brdwwNzco6xr10DXk8DAX77kTaXEQKx8UoKLz8AGE+D73BcxVC3zBl09HPUz6ZpOHI0kEboXhnrU3H5ogCFRQGHSvmzv17+stf/ZaVA71EppgXFO0Xcp4CYai2LZeKLs2m9BDxKygMHEg4Mynz+kzK2IP+X52KvlEmzI1SPml+kPLB8CyOXmJKxuMnYyvoG7l9Iv9E9yoo9B3Xjg/thC/8cegtnsffFyGcr6TrBWNcJsQNkGPeIjIHkO8yKU9teiSXiryfs1BQ6A8eWhTdBV/3W4qCid/3c9IQ9QAugW2YoGSTeSc6Snn8KTkcKAyf5Ly1iHudi9eNBV4lKqSg0Evk0tF5EN7HPILpmN/l5CEMdY71pDVKjnkFZ0HDqwulPE1QJmneM5E238ZZKih0H3ln+AB8oV/wC6TxOWYhBfmGP702offYknX0t9P9Dy6MvaE9I99Fjrk+50RiomIKCt0EBO7jENzyop6LVqNXYTbiu6YyvR5NpMz/4tuH8PvLMp6WyTFO5awVFLoDfIkXQ9CkygHatuL9c/+BWYfQwyyX8FQlKN1jGxfEX0P3blg879XoTTbJ+JolskUySeNEUae0PkxEvxUUOgoMfd4rZqkkQkgEAV/FrALgfVzGV41gb3yWbx3KYKgm42mWqKfLpqKHU54Fg9/cgHqtp8kFUZCCQidAK9UQrpoCD2H8HrMPUU9SbRhWhVZeOz6+E927A39h/K+R8DRHjrGVejzKM7dP5E3IM1NMQ92WF6ejFRTawoPjsVdA0O72CJ+E0AMcxbcMkVOhjEdGYgiUNlJ861DeMcdlfM2R8SyM8gWUHy0aQllWSPguFgUqKLSDfMrYRyJcPppImnvxLSTkSRmPlBzjRr5NAMr4eylfo+QYT2A4+C7Ki9ZAsk70NhmfUEw8myhUQaFV0PBKJmBuwvDlpXVjY6UFOVw7pJKnCm3LObHS9Cv1JBKeZuiRfHJ4N8qLPH2hbD+V8JTJMdY/OBZ7rShcQaEV7FgyNBtj9iekAsaE9AeYXSDjRJfI+CoJBvO3+BYBKNrNMr5GCHXIToyZGuVDjpIZx7xCxucjxzhbFK6g0CogSP/rEywXQThLBjoBw5fLZHxugnJsJuOZbxnKLtQtGvbIeOsRyr9vrfPOt1A+pBzoOc6V8ckIivRiUbEUFFoCBPcsmXAVKTvfPJpZBSCgv5bxecgxjmd2gXzKvErKV4egHLevTYdex9lQXZteYMykyi4yCgp1UXT3KAJC9JFKoXJTZoHxHmYVgPBnZXxFwlDqIbcTYatOidmkccNd83Z9NWczlEubR0BBpLy1iNZ31NqIQsOgIRL/FPgzBFgmWET4gm9fySvgBLFRSuqnVSYo4L8yuwAUqmmnxIxjXFncUEWgPFHupIy3EZpwzNM4KwWF6kBvEKRZqdtc+70L43q5oQ6h/BOzCZAtIOMrEgR7OeXH7IWNVU06JaJ+F7jzyM83F1GdZbyNEnqRh4uLlQoKVTGRLIzhK/d5QwApAolfuBzzSmYRoB2FUj4QlGkqM987HAP/KTJeGdH9EOST+VaBNRjeNatg1YjWbzhbBQU5MGQS0UMyaWNvviQAwTyzUqCIILReA72GvQJl+BGzCWyA/YB8G3JKLAyfyu70hDUpcwQK+pSMvxWinomzVlDwY82C0JsLgigE5iC+LABBXOwWpiKREyOzCOTmG8fL+cwXK4MqgLdBp0Rjaz41fCDfJiDcWRzjUTl/a4Q65jl7BQU/3EpQdBEvYt0iU3MLExG+uNsedbm4E6oZ3Og9zmEWAbJxoIx1nRIhtFvI3YVvE1i9KLpLxjHXyvjbIRrCqdkshapAb1BaYIOCeJz5eEX9abdAQaFWc3IJuH69h6dAIgAcswhAYQ6U8HkICviU28eLsGr/kZ0hyPfL+Nsmx9iu7BCFqoDg/colMDfx5RIgQN4FwLTXQCdgOOTznEW+HjuFAOWq45RoPDYBG4PZBWg6GUp6l5y/daLVdDzbpVBGk4tSUPAjk6RwOQWhwdf7Qb5cAoTobLdg5dLGMZwkUFgDqexlygHgiqgRKVEQ8siTjcHsAsLtPlnb5aVZwvANBr5x+rqx2Fu5mKHMmPHP/FNBoYyCa3h5oQ2/N7vXGgj5tPFRj4Alh9/HSQIUh9edhyDH/AAnl4BeoJZT4v3r9isLLKEwvDOvlvC2RJmU+TCGeF/c5PLkLYQwMi6nHoovKSiUwTv5HigKEQRyigSekwUecG2EQvp2t4ARMguNaDFd8KSMWyuVjALKkTHs5ivxO+Ydq/Ye2ZlZBUSv5JiXyPibJsdYlU1FP7XD1aPRPviC97HxLPFAQR7iJAUFL/BV9WyOyiZ1i5ME+EsuIrRDkLJ8uYTcgujC0r2pcgA4N6A0PyjyeMgxbnIHfSgCw7ivSvmbINTldjzLfm5lpWeBjXMInsMzVYz/NzOLgoIfEJDS8CefDIv4uG5gyPQbTv8hXyoBaUcU7804RikAXBHVnBJJacjGYLYSYKu0FnwOhOfYDrpudTpSCkVURGa+kULafbL7yGBnNgUFPwqr04WACxh6lPaZF4Gv8ddFGsbwfKkECPTXhKA5xnOVHsEEKMIFRUEsEuyBi+lrziwl4Iv/yWpDsVqEe15AOd9ekx7WOasSKOQP6nYjeKT3EikFeZkgEom8skixmP/r2k3Q/ggWljP4UgklQz0dHeNLJaAHuZLSMAzzecZWOiWSkIJKgeLcgPJ9CDxNub+jR3gyl4qevsoJio1TbhSimujfRHl184RyPcu3KQwq5u0679VG0NpWJF2z/8JJPYHwyHWMZyDwV/OlEvILYxHqYSoNeAKE9DbQY7J93rjn1LIQmpMQ2C9wkgf5VHg+0mu6y7sJ5a3HcO4YWZk0M4e0E4p2UyOEsh/m29vB+E6RyGjYDCY+YASsYwzN+oYRtJfi73X4eyPoZ3rQvhZ/L0cDnwOeY00t8UG6Z2hoiTpjrg4KCmLvKBIU5AlO6hkgVCeDlvO/JYjZLsdYwf96AIVam0uah/C/JRQiJRocV8t4CcryCU7yYCIZnYsy/1YptDJCfqvy6eGDZcew0TmGtFIPnnWye2tRNmn+gbNpDqY2YhqB+IkQ/JuhCJvdDdgMobGfMjT7el2zDo9G93gjZ6/gwiAoCPlY5R3DpyAECHgpCmIRPMP1e5k9AWE9UggfnSEyX9+fL3uQGTOiULCanr34uk9hCHQreoV9K6ePiyAvZFJs2f0N0vWcVX0EAmOvigTjn4Uwr3A3WKcIDb8VtAzkmU6c6RgEBSFMpMyDZLNLlQ6KBDLKi8Ha3Cg6JUJoN1d6/hbxwMLd3gHlWS8RVkFI2w7F+NFaPr1KBvIURjnXgqR5NEpQ5tM5y+oYw0OZocQR+NI/4m6oLtIkhOCqUCj+Zq7CjMagKAgNVXYc7nUTqYZqoTzFUCdl/qVyTaWI3N6RN6HnWC0TVtHjpMxLyO5hdh/W7z2yM5TvXFDVuMHNUDYZ/RhnLcdw2NpND1p/cDdQJWGYtR22xWr8vUYPJk6LBOJHmEF7cVSzFpphK4nr6TBsDj1gfRrDsRNwz6XohX6HfLdU5uUhzd5EeXBVZiwGRUHahVgFx5c/vzAsFXAy9KEcPqdFKMaTGMZ9dc2C6h9MWg0nQx+8NWN2NUu05ZiL8ANCPg7BlwoxhP5p/P0uGeaRyLtaOiSRpiuFAmn2+aQMlWUI0mjmxj6Ub5mRmC4KQj5VsvUQgvD9gj3hFk78/xB6jKNrRTskpYMNcgAUo2bklFYo45gbqtk2QwZsDTTGlLthBIlhlnXU3F384852QMoiytSsh31loh5kxDPrjMN0UZBqoJkwCGRp3wiU4n6yd9yBImQQs1wp8/bifR0nx7yUi/IirI18sDBscgupNUlTtPF4OaRLNxB/S/w1EIBzC+V5hGJ7JBj3eYLOBExnBSnMdhnfg6BTAIZbaLdg1a82Iw8jHsL7ffC3HNanESJ/LS6yDGNOPOiftrWep3ULZukJxJpK0H7OXQ8IxjM0vcwsMwbTWUHyKf0sCPo1E2Pm7nypKoSNkjK+Rsa6TKA7SajT47IZu1lQjl9VNMbWfhnKEc0eI+V01wdDvPt67WrRb0xXBaHTZnPJ3TwboWSgoVY+qR8GxdgoE+ZuEG035uLLMEKJlLshiCCk/87JfYEZtD/uqZNm5aPh0bmcPCMw3W2QWshgyAXFKO1L6RTxkG4T8qYtwT/OOcY55KKC3x9ZkzZ3l7nawzC3r/c2hEW7qfruCoJeYyno50bI3hf/zjjXlJmoIGsWRN8JO+MXbqFujjAMc8y1UIDb8HspeoTToACH0h4V2sjljgXcEDBseS2E8EV3Q0QGZw2iptE23TGTFOTBsdhbs0nzvyHYVc80LHz9yVvXXJlNGTeA//y8ox8HA//A1anou8m5kmbGOMumUHWCgBbz3I0AZSEvxhktmIOCmaAghYM+zZMg+M9guLMVtB49wB15x1iWSRtnkP8WzSpRz1I8HrpdkBLRPpGsE6VA17Sv5TcoV36ADnoLWuEuK0jQvpyTFPqMmaAgFPCBfLNoIXFFg+4szYCUgcL4YJj1CSjiebQoib+VnsJ/rRrFBC/+Ik8jBOPHcZJCnzGTjfRWQLNeHDDioGxKPx/KcHsxCEMtQg9V3e/KCFpXeBohYNd20poBGMdXJxqMG7QGZGr20REtfooesL5Cbv6RgPUZXUu8zzDmdj1uklKQ6qAYW3TwJ3qDT2N4dCGGSndimNZ0dHcM4f6Hs5QDNscyTyMEEh/mpBkFWsk3g9ZBeB8/9i+YSmkK9tsEhPZcnn7uuN3WDQWJBO3FyOvuIpG3NifVw6xhLRGIzME7ClrnmIWNcLdRHnrQuh3pXZtlJGWg6IprUvqncmnjIgj2negdOrFouJrOT+di5MADXgoqN7yWOJiTZgTItR7PfTaInDDL76FZ0ux7IsEEucR0TFG6oSAQ5s+788THoOa+B+opjVD8RJS9ynOfi5Dn80uWdGaHKLnLk0t8Nq0flqP94465HNT5FXTHeGJ1KmpwsdUBm+Msz8Nq9pc4aVpjLr5KRsg6XtesZ9zP3wG6VQ/sNszFtIV+Kkhh+t86A71F7a0JoHYURNgNwitXBIW7G387sp+jJlGk+Ipg2FUBAfm3igdeyknTFhhGDuM5a+11mYIwrscQ6ic0nMA7+rIRsk/EfafBLrkM/9+L9K2S+5isF0DHoqi2epN+KYgZsOaD7yEPXw3qQA8yi06yyiajH86n9K9AiG/CEGoj7Aq5gLdBUMAtFBOYy60PjEF39zysZq3H5Wm7DmIErAMg+M+6n7lEmrUBdsjJ4XCCNvbUfAf8hf0o7rsZ5N8eANJD9nXtbA/oh4IYwcQX/R7dLtJs2pawVOQTju+jByw7FprrOaatE6CFO/LZghH9IQyHTsVX/0YIeFs+WVC4pzNj3hOz6oK21eKBPeNvchbk5GmFQm/pdacnguD9FX8/R8MuZm0K4fDIKITql5X5EuH68tiu897ArE2hxwoyC/mf50ljwvWt+LBcYYZtGpb09eO5Hkoz4ZgfEEqTMn4GwX+EVtgrlcFHjpGjgHGcTXPAV2FpxQu5BZenVS8C5TgMz+b70uP6dZGI/SZmawez0GN8DArhM/YhlPe2svuylwqC3zRRUb5eTr+OtkKImwcTs2hLbjYV3R/Dp5PR0/wUfze4lQP//3T9/t5g2E1B10b3lLycabPdVQ/Y+0G4vMMGzdrWDY9lfc7uISjd/Z6yCnQz9dbM1hB6pSAUS8BzTVy3/6aHEp5zzF9OEEqT1PeDwizGv+1/7PFCbqh4SS/Qghgnv2yh67uH8CyerzoE+CU9EO/aeg/1FhjK3e4uU5QbtM9ilobQIwX5Fb0P9zXwPBoMjnpOdeoGyM7IJaMLs46xDMOkSzBkOoW23NKRzrR7sPLAnb6CDC28LM8CGRrkWSOQ8Byc+HICrYgbWvx3Fc9EW3g/wixdAxnxELzfu8sGTVKwCmapi54oSCVRRJlgvP76QAfB8XovhIJs9Q6NyLPXeAi/f5tPmVdRzN1M0jgy4xj75pxIjBb5KCQRZ9N90FcVL6linG5NRoLWOdTgzPaygVQYQtYJnNx1vDO451t41qdUPuqUp0B8zFITvVYQ6knYEO8LaOEOCnF9o9O7ZJzDvtgMRbor6+j/wtl0FzTNh5clmba0NqKHOb4XPkidQGzX2BtQ76fczwAB+AWSejr5wNuHPTNn5EHNyTXRawUxNevLzNZX5NKRMfQo98qUokjkdwXl+Dl+H7I2HXod39ob4GUdWjkuLRIaaSsU5SY0+rG0hjKoPYseTJxZUe9nIpGRXTm5p0AvcrG7LqCnGpnV6qmCaPYDzU4idBMU9YRc1KEo69BTPJ6lU3Md88pMKvrFtWljb1lghZ4iHEi8Gw2Slb5ML01BYTCMsH4LI/RqNMAluHY2rp2O31+BDXAKudCbgfghwjsWSsWhRbs2dhRGsmb9zVPPBr/a3UAgYL2ehNtdH12L13Xp6aWC4Lo0mHS/US8UUF9Bh7agUb6E3oQW0nwvtS0iAdbse4xg/DvkQt7JrzuU9ShvWfYm8tbl5L6AFNRTp6C1BpdrfiR6qCB/RNK0WvfqKchdAkpyGBr1LrxM30p0h4iiKN5LaxNkP3DRLQH5eGaPIBTSE4x6Ce5FPPG+jFC8pttDDxVkRod47SjMdyTeRsGoIYTfxstegb+d9oYFkQepdVEssIfnnOxGQHsWKvKa7IavUCvQtcRl7rrh3fljMLnQCwXB/1tM039KlELnMDsOm2JYi+8Z1uwPmSHr0xDKo0wtfjSdKBWhma+QvQSNcRFslGvQyHdiuLGBBNfdUDIC/7NmSKx2N2yvwNbxrApDAAbmQHg8jydABuo2wUlS9KQH0ezGD4pR6B12LTT+HjSkgsLcBPKEHvIQ0kOhuQ1N5UEIv+++Vw+OnMRJfUcsFnsFhNztSTxZa9q8Nwoi3w+iMGAYmTOys67FvwAh+LOnAYsUsFY2clQbeB903zdo7jIQyF+768dB8aRQCqLgg9jpR7NQ0n3h1l21VqHFvZ4geNakae41UONrPBcddFp+poB1DCf5oBREoSpEtPmgfZ+nMQv0HWbxgfeXl3ghUD09NrkRROhIO3cdQ/Z5nOSDUhCFmqCvv65Zd3gaNGhPVdvQJU7g9fBaKzlpYKCHhL9buY6avYyTfFAKolAXBdvEyrsbFYJyJyd7EAnEEx6+oJyvnzC1+CJ3HSl8Dif5oBREoSGE59h7oTErHCgTcU4uga55eDS7tcPguwgjYO/rrqNSEIWOAML+c3fDoqF9q+O6PkKbo8o8mvUoJw0MaFuuu46gqlFklIIoNAxDix/oadig9VtOKqGwk6/c00AYttN6CycPBMTCqes5UMczOckHpSAKDYPcTtwNC/viKU5yYzZdd/OR9zCnDQRQp8vd9cOQ60hO8kEpiEIzmI0hk3ttZErmQ0Q9i4sHZB3FSQMBDBU9C5kUpI2TfFAKotAUIOye2SxynOSkEiBEnthO6FF+wkl9R3TO6C6oU3kIqFkv1dpwphREoSlAQf7kblzy3OWkEiAA+7t5IFTPDYodEtWsw911A93NSVIoBVFoCmjcR92NKwv4Vti74t13Yc6xDuLkvgIK7gkFhN7tPzlJCqUgCg2DegE07rZy41ovVdtDjbQfuIUAgnUHJ/UNw2FrN9TFvZYzxTGAq0IpiELDoN137obF1zfDST4YoVHHzUsUDSfezcl9AQSzwg1fhHetCaUgAwLybepFJL12gF7hQk/D1j5slGa8POE/9WD8Vlzvy75rCLaF+ns2iOkhez9OrgqlIAOAsJY4WLiIa/amMIYBfHmgQF66EHjP1t560REjQXvczU+kB+I9jzUrojsW9vK760LGeV1lVQrSZ0ApTsVLKo+LNetx/N2DkwcFs1CvH5XqKMjaSLvzOL0aZlUKJglYr2NjkSHurgNoSg+OvpeTa0IpSJ8BBaG94uWXJcjaMkhRvSmmVmUdaZsuJ9cEHe4CgfAGZobBTuGMmKWrQC+2AALomlggsq7g5LpQCjIAwAs72fPCCkQnuH47Hu9vLCnagkt1cdcN9V3RTARA2UcAz3b1+ND4TszSFaCcPSB8nuB1KHcdhf9hlrpQCjIgwIv6LK3qel6ceHn2WjYme2rc0rZalF0ZrpME7MlIZDTMbA2BbAAI1m8q84po1g8bGKa1BD048l6UUXmQzgsQzncxS0PwKYjc/6wpKAVpETSNipfnWYgrkhCwOkHOOgU6bgGCMOGvh7Wl1TrQEWh4Nn+emvV/MneVNjArEkgcgfdVccCnNUneyMzTMArH49GBoKW8JqNvqx+4ohaUgrQBsae7Yt+Fl6zlaPxPxmJjHQ1YLcLhhOIfhmLcKS1XszbXcuprBBQ8Dvn7I6Zo1uN6wP4YWNrqJUX+/kOIQNakGUwcwmxNA3n80Z0fnuE4TmoJSkHaxyxDSxyMF1k1Hi/StuDFXodh2WF8fl3TwhWNju5iBu1x5EHHKlcvS7MfMAJzo3xbW9B16+0Q2JXScqCctB0WbE0F1aYeCHmeA3rel69mvdju1DIJsDtPvI9nYnPsGCdLEQvEqkakVArSIVBXjsb4ptQ2qaTC9PAvhd2gWSfga/8ZCP9iI2wdEC4clXwoBPAkPWR9C79vBs9jpXurEMreijy+3mlHQ3KRp22usjIFafYaPRj/uqmNLiqEPvUY87PI10vsfZ8jQhNRwDvpkcl4b+t1Lb4n39cywuHd34E6eYLq4V0+jWunGKFEKkrnj9BmMjFlb/0Q6WtBNLEhna5XCtJh0HFceKnfx8uvmK7sDqGsbaZmX9XtY8AovjDK82yukpP1PIT9cSjsJiGY9YN3k3AupWATXFTbQLmVaymNkDSkqFKQLoGGUpGgfTZe8EbPC+4UafFHIIhn9vLIYfIGpl6toV6yAcK7+Z0Rst7D2XcSs2nWTVZmdbIm9UDCdy64UpAug2ZWCt164gx06/fgBbtnWRomNNQTuPfXES1+SiQwOm9oaEnvDmOsQOEA08QZqJN0Fq8OPY8v/LUYVjZ8OGdrWDLbLCya+s5h95Nok7vRC7+fby5BKUiPQeE+zeDICPlGURhN9DJfZVvjcijQMnydL6PogRjSnGwER8gWSfPUal8cB2tjyWzy+kUdT4Lg3ADKg9zj/yk80yYMt+7E81xAdlavQ5vSDkTU6aOgM+g4BROE+pyH9/wfZO+R9wC1CbP7QDOVtE+/SDRxwUkKHgwN/T/fvy7K4dvMgwAAAABJRU5ErkJggg==" /></p>
+                      </div>
+                      <div class="col-sm-9">
+                        {% if solr_status != false %}
+                        <div class="progress">
+                          <div class="progress-bar bg-info" role="progressbar" style="width:{{ solr_status.jvm.memory.raw['used%']|round }}%"></div>
+                        </div>
+                        <p>{{ lang.debug.jvm_memory_solr }}: {{ (solr_status.jvm.memory.total - solr_status.jvm.memory.free) }} / {{ solr_status.jvm.memory.total }}
+                          ({{ solr_status.jvm.memory.raw['used%']|round }}%)</p>
+                        <hr>
+                        <span class="d-block">{{ lang.debug.uptime }}: {{ solr_uptime }}h</span>
+                        <span class="d-block">{{ lang.debug.started_at }}: <span class="parse_date">{{ solr_status.status['dovecot-fts'].startTime }}</span></span>
+                        <span class="d-block">{{ lang.debug.last_modified }}: <span class="parse_date">{{ solr_status.status['dovecot-fts'].index.lastModified }}</span></span>
+                        <span class="d-block">{{ lang.debug.size }}: {{ solr_status.status['dovecot-fts'].index.size }}</span>
+                        <span class="d-block"><i class="bi bi-file-text"></i> {{ lang.debug.docs }}: {{ solr_status.status['dovecot-fts'].index.numDocs }}</span>
+                        {% else %}
+                        <span class="d-block">{{ lang.debug.solr_dead }}</span>
+                        {% endif %}
+                      </div>
+                      <div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
+                        <h6>Disk I/O</h6>
+                        <div class="spinner-border my-4 mx-auto" role="status">
+                          <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <canvas class="d-none" id="solr-mailcow_DiskIOChart" width="400" height="200"></canvas>
+                      </div>
+                      <div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
+                        <h6>Net I/O</h6>
+                        <div class="spinner-border my-4 mx-auto" role="status">
+                          <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <canvas class="d-none" id="solr-mailcow_NetIOChart" width="400" height="200"></canvas>
+                      </div>
+                      <div class="col-sm-12 d-flex" style="height: 40px">
+                        <a href data-bs-toggle="modal" 
+                          data-container="solr-mailcow" 
+                          data-bs-target="#RestartContainer" 
+                          class="btn btn-sm btn-secondary d-flex align-items-center justify-content-center mb-2 ms-auto" 
+                          style="height: 30px;">{{ lang.debug.restart_container }}
+                            <i class="ms-1 bi
+                            {% if containers["solr-mailcow"].State.Running == 1 %}
+                            bi-record-fill text-success
+                            {% elseif containers["solr-mailcow"].State %}
+                            bi-record-fill text-danger
+                            {% else %}
+                            default
+                            {% endif %}
+                            "
+                          ></i>
+                        </a>
+                      </div>
+                    </div>                  
+                  </div>
+                  {% endif %}
                 </div>
-                <p>{{ lang.debug.jvm_memory_solr }}: {{ (solr_status.jvm.memory.total - solr_status.jvm.memory.free) }} / {{ solr_status.jvm.memory.total }}
-                  ({{ solr_status.jvm.memory.raw['used%']|round }}%)</p>
-                <hr>
-                <p>{{ lang.debug.uptime }}: {{ solr_uptime }}h</p>
-                <p>{{ lang.debug.started_at }}: <span class="parse_date">{{ solr_status.status['dovecot-fts'].startTime }}</span></p>
-                <p>{{ lang.debug.last_modified }}: <span class="parse_date">{{ solr_status.status['dovecot-fts'].index.lastModified }}</span></p>
-                <p>{{ lang.debug.size }}: {{ solr_status.status['dovecot-fts'].index.size }}</p>
-                <p><i class="bi bi-file-text"></i> {{ lang.debug.docs }}: {{ solr_status.status['dovecot-fts'].index.numDocs }}</p>
-                {% else %}
-                <p>{{ lang.debug.solr_dead }}</p>
-                {% endif %}
               </div>
-            </div>
-          </div>
-        </div>
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">{{ lang.debug.containers_info }}</h3>
-          </div>
-          <div class="panel-body">
-            <ul class="list-group">
+
+              <!-- rest of the containers -->
               {% for container, container_info in containers %}
-                <li class="list-group-item">
-                  {{ container }} ({{ container_info.Config.Image }})
-                  <br class="visible-xs" />
-                  <small>({{ lang.debug.started_on }} <span class="parse_date">{{ container_info.State.StartedAtHR }}</span>)</small>
-                  <a href data-toggle="modal" data-container="{{ container }}" data-target="#RestartContainer" class="pull-right btn btn-xs btn-default">{{ lang.debug.restart_container }}
-                    <i class="pull-right bi
-                    {% if container_info.State.Running == 1 %}
-                    bi-record-fill text-success
-                    {% elseif container_info.State %}
-                    bi-record-fill text-danger
-                    {% else %}
-                    default
-                    {% endif %}
-                    "
-                    ></i></a>
-                </li>
+                {% if container != "solr-mailcow" %}
+                  <div class="col-md-6 col-sm-12 p-2">
+                    <div class="list-group-item p-0">
+                      <div class="d-flex p-2 list-group-header">
+                        <div>
+                          <span class="fw-bold">{{ 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>
+                          {% if container_info.State.Running == 1 %}
+                            <span class="badge fs-7 bg-success loader" style="min-width:100px">
+                              {{ lang.debug.container_running }}
+                              <span class="loader-dot">.</span>
+                              <span class="loader-dot">.</span>
+                              <span class="loader-dot">.</span>
+                            </span>
+                          {% elseif container_info.State %}
+                            <span class="badge fs-7 bg-danger" style="min-width:100px">
+                              {{ lang.debug.container_stopped }}
+                              <i class="bi-x ms-1"></i>
+                            </span>
+                          {% endif %}
+                        </div>
+                        <div class="mt-auto ms-auto">
+                          <button class="btn btn-light" type="button" data-bs-toggle="collapse" data-bs-target="#{{ container }}Collapse" aria-expanded="false" aria-controls="{{ container }}Collapse">
+                            <i class="bi bi-caret-down-fill caret"></i>
+                          </button>
+                        </div>
+                      </div>
+                      <div class="collapse p-0 list-group-details container-details-collapse" id="{{ container }}Collapse" data-id="{{ container_info.Id }}">   
+                        <div class="row p-2 pt-4">   
+                          <div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
+                            <h6>Disk I/O</h6>
+                            <div class="spinner-border my-4 mx-auto" role="status">
+                              <span class="visually-hidden">Loading...</span>
+                            </div>
+                            <canvas class="d-none" id="{{ container }}_DiskIOChart" width="400" height="200"></canvas>
+                          </div>
+                          <div class="mt-4 col-sm-12 col-md-6 d-flex flex-column">
+                            <h6>Net I/O</h6>
+                            <div class="spinner-border my-4 mx-auto" role="status">
+                              <span class="visually-hidden">Loading...</span>
+                            </div>
+                            <canvas class="d-none" id="{{ container }}_NetIOChart" width="400" height="200"></canvas>
+                          </div>   
+                          <div class="col-12 d-flex" style="height: 40px">             
+                            <a href data-bs-toggle="modal" 
+                              data-container="{{ container }}" 
+                              data-bs-target="#RestartContainer" 
+                              class="btn btn-sm btn-secondary d-flex align-items-center justify-content-center mb-2 ms-auto" 
+                              style="height: 30px;">{{ lang.debug.restart_container }}
+                                <i class="ms-1 bi
+                                {% if container_info.State.Running == 1 %}
+                                bi-record-fill text-success
+                                {% elseif container_info.State %}
+                                bi-record-fill text-danger
+                                {% else %}
+                                default
+                                {% endif %}
+                                "
+                              ></i>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                {% endif %}
               {% endfor %}
-            </ul>
+            </div>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-postfix-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Postfix <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_postfix_logs" data-table="postfix_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Postfix</span>      
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_postfix_logs" data-table="postfix_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="postfix_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="postfix_log" data-table="postfix_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="postfix_log" data-table="postfix_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="postfix_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-ui">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading"> Mailcow UI <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_ui_logs" data-table="ui_logs">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Mailcow UI</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_ui_logs" data-table="ui_logs">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="ui_logs"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="ui_logs" data-table="ui_logs" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="ui_logs" data-table="ui_logs" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="ui_logs" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-sasl">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">SASL <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_sasl_logs" data-table="sasl_logs">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">SASL</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_sasl_logs" data-table="sasl_logs">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="sasl_logs"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="sasl_logs" data-table="sasl_logs" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="sasl_logs" data-table="sasl_logs" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="sasl_logs" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-dovecot-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Dovecot <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_dovecot_logs" data-table="dovecot_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Dovecot</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_dovecot_logs" data-table="dovecot_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="dovecot_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="dovecot_log" data-table="dovecot_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="dovecot_log" data-table="dovecot_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="dovecot_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-sogo-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">SOGo <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_sogo_logs" data-table="sogo_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">SOGo</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_sogo_logs" data-table="sogo_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="sogo_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="sogo_log" data-table="sogo_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="sogo_log" data-table="sogo_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="sogo_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-netfilter-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Netfilter <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_netfilter_logs" data-table="netfilter_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Netfilter</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_netfilter_logs" data-table="netfilter_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="netfilter_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="netfilter_log" data-table="netfilter_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="netfilter_log" data-table="netfilter_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="netfilter_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-rspamd-history">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Rspamd history <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_rspamd_history" data-table="rspamd_history">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Rspamd history</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_rspamd_history" data-table="rspamd_history">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <legend>{{ lang.debug.chart_this_server }}</legend>
+          <div class="card-body">
+            <legend>{{ lang.debug.chart_this_server }}</legend><hr />
             <div id="chart-container">
               <canvas id="rspamd_donut" style="width:100%;height:400px"></canvas>
             </div>
-            <legend>{{ lang.debug.history_all_servers }}</legend>
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed log-table" id="rspamd_history"></table>
-            </div>
+            <legend>{{ lang.debug.history_all_servers }}</legend><hr />
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd_history" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd_history" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="rspamd_history" data-table="rspamd_history" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="rspamd_history" data-table="rspamd_history" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="rspamd_history" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-autodiscover-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Autodiscover <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_autodiscover_logs" data-table="autodiscover_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Autodiscover</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_autodiscover_logs" data-table="autodiscover_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="autodiscover_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="autodiscover_log" data-table="autodiscover_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="autodiscover_log" data-table="autodiscover_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="autodiscover_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-watchdog-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Watchdog <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_watchdog_logs" data-table="watchdog_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Watchdog</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_watchdog_logs" data-table="watchdog_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="watchdog_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="watchdog_log" data-table="watchdog_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="watchdog_log" data-table="watchdog_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="watchdog_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-acme-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">ACME <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_acme_logs" data-table="acme_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">ACME</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_acme_logs" data-table="acme_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="acme_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="acme_log" data-table="acme_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="acme_log" data-table="acme_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="acme_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-api-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">API <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_api_logs" data-table="api_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">API</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_api_logs" data-table="api_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="api_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="api_log" data-table="api_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="api_log" data-table="api_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <table id="api_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-api-rl">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Ratelimits <span class="badge badge-info table-lines"></span>
-            <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default 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-default add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_rl_logs" data-table="rl_log">{{ lang.admin.refresh }}</button>
+        <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
+        <div class="card">
+          <div class="card-header d-flex align-items-center fs-5">
+            <span class="mt-2 ms-2">Ratelimits</span>
+            <div class="btn-group ms-auto">
+              <button class="btn btn-sm btn-secondary refresh_table" data-draw="draw_rl_logs" data-table="rl_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
-          <div class="panel-body">
-            <p class="help-block">{{ lang.admin.hash_remove_info }}</p>
-            <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="rl_log"></table>
-            </div>
+          <div class="card-body">
+            <a class="btn btn-sm btn-secondary dropdown-toggle mb-4" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="100" href="#">+ 100</a></li>
+              <li><a class="dropdown-item add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="1000" href="#">+ 1000</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="rl_log" data-table="rl_log" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="rl_log" data-table="rl_log" href="#">{{ lang.datatables.collapse_all }}</a></li>
+            </ul>
+            <p class="text-muted">{{ lang.admin.hash_remove_info }}</p>
+            <table id="rl_log" class="table table-striped dt-responsive w-100"></table>
           </div>
         </div>
       </div>
@@ -322,6 +614,8 @@
 
 <script type='text/javascript'>
   var lang = {{ lang_admin|raw }};
+  var lang_debug = {{ lang_debug|raw }};
+  var lang_datatables = {{ lang_datatables|raw }};
   var csrf_token = '{{ csrf_token }}';
   var log_pagination_size = '{{ log_pagination_size }}';
 </script>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/domainadmin.twig b/mailcow/src/mailcow-dockerized/data/web/templates/domainadmin.twig
index 6aae54b..56f5e75 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/domainadmin.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/domainadmin.twig
@@ -2,12 +2,12 @@
 
 {% block content %}
 <h3>{{ lang.user.user_settings }}</h3>
-<div class="panel panel-default">
-  <div class="panel-heading">{{ lang.user.user_settings }}</div>
-  <div class="panel-body">
+<div class="card">
+  <div class="card-header">{{ lang.user.user_settings }}</div>
+  <div class="card-body">
     <div class="row">
-      <div class="col-sm-offset-3 col-sm-9">
-        <p><a href="#pwChangeModal" data-toggle="modal">[{{ lang.user.change_password }}]</a></p>
+      <div class="offset-sm-3 col-sm-9">
+        <p><a href="#pwChangeModal" data-bs-toggle="modal">[{{ lang.user.change_password }}]</a></p>
         <div class="last-login"></div>
         <span class="clear-last-logins">{{ lang.user.clear_recent_successful_connections }}</span>
       </div>
@@ -16,19 +16,19 @@
 
     {# TFA #}
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.tfa }}</div>
-      <div class="col-sm-9 col-xs-7">
+      <div class="col-sm-3 col-5 text-end">{{ lang.tfa.tfa }}</div>
+      <div class="col-sm-9 col-7">
         <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
         {% include 'tfa_keys.twig' %}
         <br>
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.set_tfa }}</div>
-      <div class="col-sm-9 col-xs-7">
+      <div class="col-sm-3 col-5 text-end">{{ lang.tfa.set_tfa }}</div>
+      <div class="col-sm-9 col-7">
         <select id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
           <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
-          <option value="u2f">{{ lang.tfa.u2f }}</option>
+          <option value="webauthn">{{ lang.tfa.webauthn }}</option>
           <option value="totp">{{ lang.tfa.totp }}</option>
           <option value="none">{{ lang.tfa.none }}</option>
         </select>
@@ -38,13 +38,13 @@
     <hr>
     {# FIDO2 #}
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">
+      <div class="col-sm-3 col-5 text-end">
         <p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.known_ids }}:</div>
-      <div class="col-sm-9 col-xs-7">
+      <div class="col-sm-3 col-5 text-end">{{ lang.fido2.known_ids }}:</div>
+      <div class="col-sm-9 col-7">
         <div class="table-responsive">
           <table class="table table-striped table-hover table-condensed" id="fido2_keys">
             <tr>
@@ -58,22 +58,20 @@
     </div>
   </div>
     <div class="row">
-      <div class="col-sm-offset-3 col-sm-9">
+      <div class="offset-sm-3 col-sm-9">
         <div class="btn-group">
           <button class="btn btn-sm btn-primary" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
-          <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
-          </button>
+          <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
           <ul class="dropdown-menu">
-            <li><a href="#" id="register-fido2-touchid" style="line-height:1.4;"><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
+            <li><a class="dropdown-item" href="#" id="register-fido2-touchid"><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
           </ul>
         </div>
       </div>
     </div>
     <br>
     <div class="row" id="status-fido2">
-      <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.register_status }}:</div>
-      <div class="col-sm-9 col-xs-7">
+      <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>
       </div>
       <br>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit.twig
index 2bce91a..29f3643 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit.twig
@@ -1,13 +1,14 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<div class="row">
+<a href="{{ return_to }}">&#8592; {{ lang.edit.previous }}</a>
+<div class="row my-4">
   <div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">{{ lang.edit.title }}</h3>
+    <div class="card">
+      <div class="card-header fs-5">
+        <span>{{ lang.edit.title }}</span>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
         {% block inner_content %}
           {% if access_denied %}
           <div class="alert alert-danger" role="alert">{{ lang.danger.access_denied }}</div>
@@ -23,6 +24,7 @@
 
 <script type='text/javascript'>
   var lang_user = {{ lang_user|raw }};
+  var lang_datatables = {{ lang_datatables|raw }};
   var csrf_token = '{{ csrf_token }}';
   var pagination_size = '{{ pagination_size }}';
   var table_for_domain = '{{ domain }}';
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig
index 7d63c4f..8806b06 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig
@@ -6,42 +6,42 @@
 <br>
 <form class="form-horizontal" data-id="editadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" onkeyup="this.value = this.value.toLowerCase();" required value="{{ admin }}" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editadmin" data-item="{{ admin }}" data-api-url='edit/admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editadmin" data-item="{{ admin }}" data-api-url='edit/admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig
index 7ed5d7c..83a3760 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig
@@ -9,16 +9,16 @@
   {% if not skip_sogo %}
   <input type="hidden" value="0" name="sogo_visible">
   {% endif %}
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="address">{{ lang.edit.alias }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="address" value="{{ result.address }}" />
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="goto">{{ lang.edit.target_address|raw }}</label>
     <div class="col-sm-10">
-      <textarea id="textarea_alias_goto" class="form-control" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
+      <textarea id="textarea_alias_goto" class="form-control mb-4" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
       <div class="checkbox">
         <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_null"{% if result.goto == 'null@localhost' %} checked{% endif %}> {{ lang.add.goto_null }}</label>
       </div>
@@ -33,34 +33,34 @@
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="sogo_visible"{% if result.sogo_visible == '1' %} checked{% endif %}> {{ lang.edit.sogo_visible }}</label>
       </div>
-      <p class="help-block">{{ lang.edit.sogo_visible_info }}</p>
+      <p class="text-muted">{{ lang.edit.sogo_visible_info }}</p>
       {% endif %}
     </div>
   </div>
   <hr>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="private_">{{ lang.edit.private_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="private_comment" value="{{ result.private_comment }}" />
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="public_comment">{{ lang.edit.public_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="public_comment" value="{{ result.public_comment }}" />
     </div>
   </div>
   <hr>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editalias" data-item="{{ alias }}" data-api-url='edit/alias' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editalias" data-item="{{ alias }}" data-api-url='edit/alias' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig
index 2580b5f..808d128 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig
@@ -5,7 +5,7 @@
 <h4>{{ lang.edit.edit_alias_domain }}</h4>
 <form class="form-horizontal" data-id="editaliasdomain" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="target_domain">{{ lang.edit.target_domain }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="addSelectDomain" name="target_domain" required>
@@ -15,42 +15,36 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editaliasdomain" data-item="{{ alias_domain }}" data-api-url='edit/alias-domain' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-4">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editaliasdomain" data-item="{{ alias_domain }}" data-api-url='edit/alias-domain' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
 <hr>
 <form data-id="domratelimit" class="form-inline well" method="post">
-  <div class="form-group">
-    <label class="control-label">{{ lang.acl.ratelimit }}</label>
-    <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-  </div>
-  <div class="form-group">
-    <select name="rl_frame" class="form-control">
-      {% include 'mailbox/rl-frame.twig' %}
-    </select>
-  </div>
-  <div class="form-group">
-    <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-  </div>
+  <label class="control-label mb-2">{{ lang.acl.ratelimit }}</label>
+  <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+  <select name="rl_frame" class="form-control">
+    {% include 'mailbox/rl-frame.twig' %}
+  </select>
+  <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
 </form>
 {% if dkim %}
 <hr>
 <div class="row">
-  <div class="col-xs-12 col-sm-2">
+  <div class="col-12 col-sm-2">
     <p>Domain: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
   </div>
-  <div class="col-xs-12 col-sm-10">
-    <pre>{{ dkim.dkim_txt }}</pre>
+  <div class="col-12 col-sm-10">
+    <pre class="p-2">{{ dkim.dkim_txt }}</pre>
   </div>
 </div>
 {% endif %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig
index 046a34f..fcd9d04 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig
@@ -6,32 +6,32 @@
 <form class="form-horizontal" data-pwgen-length="32" data-id="editapp" role="form" method="post">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="protocols">
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="app_name">{{ lang.edit.app_name }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="app_name" id="app_name" value="{{ result.name }}" required maxlength="255">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="protocols">{{ lang.edit.app_passwd_protocols }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="protocols" name="protocols" multiple>
@@ -44,9 +44,9 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editapp" data-item="{{ result.id }}" data-api-url='edit/app-passwd' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editapp" data-item="{{ result.id }}" data-api-url='edit/app-passwd' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig
index e50239d..f7d0c5c 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editbcc" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
     <div class="col-sm-10">
       <input value="{{ result.bcc_dest }}" type="text" class="form-control" name="bcc_dest" id="bcc_dest">
       <small>{{ lang.edit.bcc_dest_format|raw }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="type">{{ lang.mailbox.bcc_map_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="type" id="type" required>
@@ -22,16 +22,16 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editbcc" data-item="{{ bcc }}" data-api-url='edit/bcc' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editbcc" data-item="{{ bcc }}" data-api-url='edit/bcc' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain-templates.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain-templates.twig
new file mode 100644
index 0000000..5a0cbb6
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain-templates.twig
@@ -0,0 +1,136 @@
+{% extends 'edit.twig' %}
+
+{% block inner_content %}
+{% if result %}
+<div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
+  <form data-id="editdomain_template" class="form-horizontal" role="form" method="post">
+
+    <input type="hidden" value="0" name="active">
+    <input type="hidden" value="0" name="backupmx">
+    <input type="hidden" value="0" name="gal">
+    <input type="hidden" value="0" name="relay_all_recipients">
+    <input type="hidden" value="0" name="relay_unknown_only">
+
+    {% if mailcow_cc_role == 'admin' %}
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="max_num_aliases_for_domain">{{ lang.mailbox.template }}</label>
+      <div class="col-sm-10">
+
+        <div class="input-group mb-3">
+          <input type="text" name="template" class="form-control" aria-label="Text input with dropdown button" value="{{ template.template }}" />
+        </div>
+      </div>
+
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+      <div class="col-sm-10">
+        <div class="form-control tag-box">
+          <input id="tags" type="text" class="tag-input">
+          <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+          <input type="hidden" value='{{ template.attributes.tags|json_encode }}' name="tags" class="tag-values" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="max_num_aliases_for_domain">{{ lang.edit.max_aliases }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_num_aliases_for_domain" value="{{ template.attributes.max_num_aliases_for_domain }}">
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="max_num_mboxes_for_domain">{{ lang.edit.max_mailboxes }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_num_mboxes_for_domain" value="{{ template.attributes.max_num_mboxes_for_domain }}">
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="def_quota_for_mbox">{{ lang.edit.mailbox_quota_def }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="def_quota_for_mbox" value="{{ (template.attributes.def_quota_for_mbox / 1048576) }}">
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="max_quota_for_mbox">{{ lang.edit.max_quota }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_quota_for_mbox" value="{{ (template.attributes.max_quota_for_mbox / 1048576) }}">
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="max_quota_for_domain">{{ lang.edit.domain_quota }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_quota_for_domain" value="{{ (template.attributes.max_quota_for_domain / 1048576) }}">
+      </div>
+    </div>
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="gal"{% if template.attributes.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
+          <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="active"{% if template.attributes.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="row">
+      <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
+      <div class="col-sm-10">
+        <input name="rl_value" type="number" value="{{ template.attributes.rl_value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+        <select name="rl_frame" class="form-control">
+          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
+          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
+          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
+          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
+        </select>
+      </div>
+    </div>
+    {% endif %}
+    <hr>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
+      <div class="col-sm-10">
+        <input class="form-control" id="dkim_selector" name="dkim_selector" value="{{ template.attributes.dkim_selector }}">
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
+      <div class="col-sm-10">
+        <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+          <option value="1024" data-subtext="bits" {% if template.attributes.key_size == 1024 %} selected{% endif %}>1024</option>
+          <option value="2048" data-subtext="bits" {% if template.attributes.key_size == 2048 %} selected{% endif %}>2048</option>
+        </select>
+      </div>
+    </div>
+    <hr>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
+      <div class="col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="backupmx"{% if template.attributes.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
+          <br>
+          <label><input type="checkbox" value="1" name="relay_all_recipients"{% if template.attributes.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
+          <p>{{ lang.edit.relay_all_info|raw }}</p>
+          <label><input type="checkbox" value="1" name="relay_unknown_only"{% if template.attributes.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
+          <br>
+          <p>{{ lang.edit.relay_transport_info|raw }}</p>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editdomain_template" data-item="{{ template.id }}" data-api-url='edit/domain/template' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+      </div>
+    </div>
+  </form>
+</div>
+{% else %}
+  {{ parent() }}
+{% endif %}
+{% endblock %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig
index 2ece7ff..0c42488 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig
@@ -2,28 +2,44 @@
 
 {% block inner_content %}
 {% if result %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="active"><a data-toggle="tab" href="#dedit">{{ lang.edit.domain }}</a></li>
-  <li><a data-toggle="tab" href="#dratelimit">{{ lang.edit.ratelimit }}</a></li>
-  <li><a data-toggle="tab" href="#dspamfilter">{{ lang.edit.spam_filter }}</a></li>
-  <li><a data-toggle="tab" href="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</a></li>
+<ul class="nav nav-tabs" role="tablist">
+  <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dedit">{{ lang.edit.domain }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dratelimit">{{ lang.edit.ratelimit }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dspamfilter">{{ lang.edit.spam_filter }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</button></li>
 </ul>
 <hr>
 <div class="tab-content">
-  <div id="dedit" class="tab-pane in active">
+  <div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
     <form data-id="editdomain" class="form-horizontal" role="form" method="post">
       <input type="hidden" value="0" name="active">
       <input type="hidden" value="0" name="backupmx">
       <input type="hidden" value="0" name="gal">
       <input type="hidden" value="0" name="relay_all_recipients">
       <input type="hidden" value="0" name="relay_unknown_only">
-      <div class="form-group" data-acl="{{ acl.domain_desc }}">
+      <div class="row mb-2" data-acl="{{ acl.domain_desc }}">
         <label class="control-label col-sm-2" for="description">{{ lang.edit.description }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="description" value="{{ result.description }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
+        <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+        <div class="col-sm-10">
+          <div class="form-control tag-box">
+            {% for tag in domain_details.tags %}
+              <span data-action='delete_selected' data-item="{{ tag|url_encode }}" data-id="domain_tag_{{ tag }}" data-api-url='delete/domain/tag/{{ domain }}' class="badge bg-primary tag-badge btn-badge">
+                <i class="bi bi-tag-fill"></i> 
+                {{ tag }}
+              </span>
+            {% endfor %}
+            <input type="text" class="tag-input">
+            <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+            <input type="hidden" value="" name="tags" class="tag-values" />
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.domain_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control">
@@ -42,37 +58,37 @@
         </div>
       </div>
       {% if mailcow_cc_role == 'admin' %}
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="aliases">{{ lang.edit.max_aliases }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="aliases" value="{{ result.max_num_aliases_for_domain }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="mailboxes">{{ lang.edit.max_mailboxes }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="mailboxes" value="{{ result.max_num_mboxes_for_domain }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="defquota">{{ lang.edit.mailbox_quota_def }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="defquota" value="{{ (result.def_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="maxquota">{{ lang.edit.max_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="maxquota" value="{{ (result.max_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.domain_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="quota" value="{{ (result.max_quota_for_domain / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
         <div class="col-sm-10">
           <div class="checkbox">
@@ -88,126 +104,125 @@
         </div>
       </div>
       {% endif %}
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
-            <small class="help-block">{{ lang.edit.gal_info|raw }}</small>
+            <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
           </div>
         </div>
       </div>
       <hr>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
           </div>
         </div>
       </div>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
-          <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editdomain" data-item="{{ domain }}" data-api-url='edit/domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editdomain" data-item="{{ domain }}" data-api-url='edit/domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
+          <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
+          <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
         </div>
       </div>
     </form>
     {% if dkim %}
     <hr>
     <div class="row">
-      <div class="col-xs-12 col-sm-2">
+      <div class="col-12 col-sm-2">
         <p>Domain: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
       </div>
-      <div class="col-xs-12 col-sm-10">
-        <pre>{{ dkim.dkim_txt }}</pre>
+      <div class="col-12 col-sm-10">
+        <pre class="p-2">{{ dkim.dkim_txt }}</pre>
       </div>
     </div>
     {% endif %}
   </div>
-  <div id="dratelimit" class="tab-pane">
+  <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
     <form data-id="domratelimit" class="form-inline well" method="post">
-      <div class="form-group">
-        <label class="control-label">{{ lang.edit.ratelimit }}</label>
-        <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-      </div>
-      <div class="form-group">
-        <select name="rl_frame" class="form-control">
-          {% include 'mailbox/rl-frame.twig' %}
-        </select>
-      </div>
-      <div class="form-group">
-        <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+      <div class="row">
+        <div class="col-12">
+          <label class="control-label mb-2">{{ lang.edit.ratelimit }}</label>
+          <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
+            {% include 'mailbox/rl-frame.twig' %}
+          </select>
+          <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+        </div>
       </div>
     </form>
   </div>
-  <div id="dspamfilter" class="tab-pane">
+  <div id="dspamfilter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-spamfilter">
     <div class="row">
       <div class="col-sm-6">
         <h4>{{ lang.user.spamfilter_wl }}</h4>
         <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
-        <form class="form-inline space20" data-id="add_wl_policy_domain">
+        <form class="form-inline mb-4" data-id="add_wl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
-                      <button class="btn btn-default" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
                     </span>
           </div>
         </form>
-        <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="wl_policy_domain_table"></table>
-        </div>
+        <table id="wl_policy_domain_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-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_wl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a>
-            <div class="clearfix visible-xs"></div>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_wl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a>
           </div>
         </div>
       </div>
       <div class="col-sm-6">
         <h4>{{ lang.user.spamfilter_bl }}</h4>
         <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
-        <form class="form-inline space20" data-id="add_bl_policy_domain">
+        <form class="form-inline mb-4" data-id="add_bl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
-                      <button class="btn btn-default" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
                     </span>
           </div>
         </form>
-        <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="bl_policy_domain_table"></table>
-        </div>
+        <table id="bl_policy_domain_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-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_bl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a></li>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_bl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a></li>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div id="dqwbcc" class="tab-pane">
+  <div id="dqwbcc" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-qwbcc">
     <div class="row">
       <div class="col-sm-12">
         <h4>{{ lang.edit.quota_warning_bcc }}</h4>
         <p>{{ lang.edit.quota_warning_bcc_info|raw }}</p>
         <form class="form-horizontal" data-id="quota_bcc">
           <input type="hidden" value="0" name="active">
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="script_data">{{ lang.edit.target_address|raw }}:</label>
             <div class="col-sm-10">
               <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="bcc_rcpt" name="bcc_rcpt">{{ quota_notification_bcc.bcc_rcpts|join("\n") }}</textarea>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="quota_bcc" data-item="quota_bcc" data-api-url='edit/quota_notification_bcc' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="quota_bcc" data-item="quota_bcc" data-api-url='edit/quota_notification_bcc' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
             </div>
           </div>
         </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig
index 4381843..d241fa5 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editdomainadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" value="{{ domain_admin }}" required onkeyup="this.value = this.value.toLowerCase();" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="domains">{{ lang.edit.domains }}</label>
     <div class="col-sm-10">
       <select data-live-search="true" class="full-width-select" name="domains" multiple required>
@@ -26,54 +26,50 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editdomainadmin" data-item="{{ domain_admin }}" data-api-url='edit/domain-admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-4">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editdomainadmin" data-item="{{ domain_admin }}" data-api-url='edit/domain-admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
 <form data-id="daacl" class="form-inline well" method="post">
   <div class="row">
     <div class="col-sm-1">
-      <p class="help-block">ACL</p>
+      <p class="text-muted">ACL</p>
     </div>
     <div class="col-sm-10">
-      <div class="form-group">
-        <select id="da_acl" name="da_acl" size="10" data-container="body" multiple>
-          {% for acl, val in da_acls %}
-          <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      <div class="form-group">
-        <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-      </div>
+      <select class="mb-2" id="da_acl" name="da_acl" size="10" data-container="body" multiple>
+        {% for acl, val in da_acls %}
+        <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
+        {% endfor %}
+      </select>
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary mb-2" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig
index 5aa6923..ff4ac4e 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig
@@ -5,13 +5,13 @@
 <h4>Filter</h4>
 <form class="form-horizontal" data-id="editfilter" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="script_desc">{{ lang.edit.sieve_desc }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="script_desc" id="script_desc" value="{{ result.script_desc }}" required maxlength="255">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="filter_type">{{ lang.edit.sieve_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="filter_type" id="filter_type" required>
@@ -20,22 +20,22 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="script_data">Script:</label>
     <div class="col-sm-10">
       <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control textarea-code" rows="20" id="script_data" name="script_data" required>{{ result.script_data|raw }}</textarea>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editfilter" data-item="{{ result.id }}" data-api-url='edit/filter' data-api-attr='{}' href="#">{{ lang.edit.validate_save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editfilter" data-item="{{ result.id }}" data-api-url='edit/filter' data-api-attr='{}' href="#">{{ lang.edit.validate_save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox-templates.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox-templates.twig
new file mode 100644
index 0000000..fea99bd
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox-templates.twig
@@ -0,0 +1,169 @@
+{% extends 'edit.twig' %}
+
+{% block inner_content %}
+{% if result %}
+<hr>
+<div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
+  <form class="form-horizontal" data-id="editmailbox_template" role="form" method="post">
+
+    <input type="hidden" value="default" name="sender_acl">
+    <input type="hidden" value="0" name="force_pw_update">
+    <input type="hidden" value="0" name="sogo_access">
+    <input type="hidden" value="0" name="protocol_access">     
+         
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="template">{{ lang.mailbox.template }}</label>
+      <div class="col-sm-10">
+        <div class="input-group mb-3">
+          <input type="text" name="template" class="form-control" aria-label="Text input with dropdown button" value="{{ template.template }}" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+      <div class="col-sm-10">
+        <div class="form-control tag-box">
+          <input id="tags" type="text" class="tag-input">
+          <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+          <input type="hidden" value='{{ template.attributes.tags|json_encode }}' name="tags" class="tag-values" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}</label>
+      <div class="col-sm-10">
+        <input type="number" name="quota" class="w-100 form-control" min="0" value="{{ template.attributes.quota / 1048576 }}">
+        <small class="text-muted">0 = ∞</small>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
+      <div class="col-sm-10">
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_never" autocomplete="off" value="never" {% if template.attributes.quarantine_notification == 'never' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_never">{{ lang.user.never }}</label>
+
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_hourly" autocomplete="off" value="hourly" {% if template.attributes.quarantine_notification == 'hourly' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_daily" autocomplete="off" value="daily" {% if template.attributes.quarantine_notification == 'daily' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
+
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_weekly" autocomplete="off" value="weekly" {% if template.attributes.quarantine_notification == 'weekly' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+        </div>
+        <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
+      <div class="col-sm-10">
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject" {% if template.attributes.quarantine_category == 'reject' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
+          
+          <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header" {% if template.attributes.quarantine_category == 'add_header' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+          
+          <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all" {% if template.attributes.quarantine_category == 'all' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
+        </div>
+        <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
+      <div class="col-sm-10">
+        <div class="btn-group">
+          <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1" {% if template.attributes.tls_enforce_in == '1' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+          
+          <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1" {% if template.attributes.tls_enforce_out == '1' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
+      <div class="col-sm-10">
+        <select name="protocol_access" multiple class="form-control">
+          <option value="imap"{% if template.attributes.imap_access == '1' %} selected{% endif %}>IMAP</option>
+          <option value="pop3"{% if template.attributes.pop3_access == '1' %} selected{% endif %}>POP3</option>
+          <option value="smtp"{% if template.attributes.smtp_access == '1' %} selected{% endif %}>SMTP</option>
+          <option value="sieve"{% if template.attributes.sieve_access == '1' %} selected{% endif %}>Sieve</option>
+        </select>
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2">ACL</label>
+      <div class="col-sm-10">
+        <select id="template_user_acl" name="acl" size="10" multiple class="form-control">                  
+          <option value="spam_alias" {% if template.attributes.acl_spam_alias == '1' %} selected{% endif %}>{{ lang.acl["spam_alias"] }}</option>
+          <option value="tls_policy" {% if template.attributes.acl_tls_policy == '1' %} selected{% endif %}>{{ lang.acl["tls_policy"] }}</option>
+          <option value="spam_score" {% if template.attributes.acl_spam_score == '1' %} selected{% endif %}>{{ lang.acl["spam_score"] }}</option>
+          <option value="spam_policy" {% if template.attributes.acl_spam_policy == '1' %} selected{% endif %}>{{ lang.acl["spam_policy"] }}</option>
+          <option value="delimiter_action" {% if template.attributes.acl_delimiter_action == '1' %} selected{% endif %}>{{ lang.acl["delimiter_action"] }}</option>
+          <option value="syncjobs" {% if template.attributes.acl_syncjobs == '1' %} selected{% endif %}>{{ lang.acl["syncjobs"] }}</option>
+          <option value="eas_reset" {% if template.attributes.acl_eas_reset == '1' %} selected{% endif %}>{{ lang.acl["eas_reset"] }}</option>
+          <option value="sogo_profile_reset" {% if template.attributes.acl_sogo_profile_reset == '1' %} selected{% endif %}>{{ lang.acl["sogo_profile_reset"] }}</option>
+          <option value="pushover" {% if template.attributes.acl_pushover == '1' %} selected{% endif %}>{{ lang.acl["pushover"] }}</option>
+          <option value="quarantine" {% if template.attributes.acl_quarantine == '1' %} selected{% endif %}>{{ lang.acl["quarantine"] }}</option>
+          <option value="quarantine_attachments" {% if template.attributes.acl_quarantine_attachments == '1' %} selected{% endif %}>{{ lang.acl["quarantine_attachments"] }}</option>
+          <option value="quarantine_notification" {% if template.attributes.acl_quarantine_notification == '1' %} selected{% endif %}>{{ lang.acl["quarantine_notification"] }}</option>
+          <option value="quarantine_category" {% if template.attributes.acl_quarantine_category == '1' %} selected{% endif %}>{{ lang.acl["quarantine_category"] }}</option>
+          <option value="app_passwds" {% if template.attributes.acl_app_passwds == '1' %} selected{% endif %}>{{ lang.acl["app_passwds"] }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2">{{ lang.acl.ratelimit }}</label>
+      <div class="col-sm-10">
+        <input name="rl_value" type="number" autocomplete="off" value="{{ template.attributes.rl_value }}" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+        <select name="rl_frame" class="form-control">
+          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
+          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
+          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
+          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
+        </select>
+        <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+      </div>
+    </div>
+    <hr>
+    <div class="row my-2">
+      <div class="offset-sm-2 col-sm-10">
+        <select name="active" class="form-control">
+          <option value="1"{% if template.attributes.active == '1' %} selected{% endif %}>{{ lang.edit.active }}</option>
+          <option value="2"{% if template.attributes.active == '2' %} selected{% endif %}>{{ lang.edit.disable_login }}</option>
+          <option value="0"{% if template.attributes.active == '0' %} selected{% endif %}>{{ lang.edit.inactive }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="force_pw_update"{% if template.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
+          <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
+        </div>
+      </div>
+    </div>
+    {% if not skip_sogo %}
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="sogo_access"{% if template.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
+          <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+    <div class="row my-2">
+      <div class="offset-sm-2 col-sm-10">
+        <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox_template" data-item="{{ template.id }}" data-api-url='edit/mailbox/template' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+      </div>
+    </div>
+  </form>
+</div>
+{% else %}
+  {{ parent() }}
+{% endif %}
+{% endblock %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig
index 4447ccb..289638d 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig
@@ -2,36 +2,52 @@
 
 {% block inner_content %}
 {% if result %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="active"><a data-toggle="tab" href="#medit">{{ lang.edit.mailbox }}</a></li>
-  <li><a data-toggle="tab" href="#mpushover">{{ lang.edit.pushover }}</a></li>
-  <li><a data-toggle="tab" href="#macl">{{ lang.edit.acl }}</a></li>
-  <li><a data-toggle="tab" href="#mrl">{{ lang.edit.ratelimit }}</a></li>
+<ul class="nav nav-tabs" role="tablist">
+  <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#medit">{{ lang.edit.mailbox }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mpushover">{{ lang.edit.pushover }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#macl">{{ lang.edit.acl }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mrl">{{ lang.edit.ratelimit }}</button></li>
 </ul>
 <hr>
 <div class="tab-content">
-  <div id="medit" class="tab-pane in active">
+  <div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
     <form class="form-horizontal" data-id="editmailbox" role="form" method="post">
       <input type="hidden" value="default" name="sender_acl">
       <input type="hidden" value="0" name="force_pw_update">
       <input type="hidden" value="0" name="sogo_access">
       <input type="hidden" value="0" name="protocol_access">
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="name">{{ lang.edit.full_name }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="name" value="{{ result.name }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
+        <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+        <div class="col-sm-10">
+          <div class="form-control tag-box">
+            {% for tag in mailbox_details.tags %}
+              <span data-action='delete_selected' data-item="{{ tag }}" data-id="mailbox_tag_{{ tag }}" data-api-url='delete/mailbox/tag/{{ mailbox }}' class="badge bg-primary tag-badge btn-badge">
+                <i class="bi bi-tag-fill"></i> 
+                {{ tag }}
+              </span>
+            {% endfor %}
+            <input type="text" class="tag-input">
+            <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+            <input type="hidden" value="" name="tags" class="tag-values" />
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}
-          <br><span id="quotaBadge" class="badge">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
+          <br><span id="quotaBadge" class="badge bg-info">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
         </label>
         <div class="col-sm-10">
           <input type="number" name="quota" style="width:100%" min="0" max="{{ (result.max_new_quota / 1048576) }}" value="{{ (result.quota / 1048576) }}" class="form-control">
-          <small class="help-block">0 = ∞</small>
+          <small class="text-muted">0 = ∞</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.edit.sender_acl }}</label>
         <div class="col-sm-10">
           <select data-live-search="true" data-width="100%" style="width:100%" id="editSelectSenderACL" name="sender_acl" size="10" multiple>
@@ -66,13 +82,13 @@
             {% endfor %}
           </select>
           <div id="sender_acl_disabled"><i class="bi bi-shield-exclamation"></i> {{ lang.edit.sender_acl_disabled|raw }}</div>
-          <small class="help-block">{{ lang.edit.sender_acl_info|raw }}</small>
+          <small class="text-muted d-block">{{ lang.edit.sender_acl_info|raw }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
-          <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control space20">
+          <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control mb-4">
             {% for rlyhost in rlyhosts %}
               <option
                 style="{% if rlyhost.active != '1' %}background: #ff4136; color: #fff{% endif %}"
@@ -85,113 +101,110 @@
               {{ lang.edit.none_inherit }}
             </option>
           </select>
-          <p class="visible-xs" style="margin: 0;padding: 0">&nbsp;</p>
-          <small class="help-block">{{ lang.edit.mailbox_relayhost_info }}</small>
+          <p class="d-block d-sm-none" style="margin: 0;padding: 0">&nbsp;</p>
+          <small class="text-muted d-block">{{ lang.edit.mailbox_relayhost_info }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'never' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'never' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'hourly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'hourly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'daily' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'daily' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'weekly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'weekly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"weekly"}'>{{ lang.user.weekly }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block"><small>{{ lang.user.quarantine_notification_info }}</small></p>
+          <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'reject' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'reject' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'add_header' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'add_header' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'all' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'all' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"all"}'>{{ lang.user.q_all }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block"><small>{{ lang.user.quarantine_category_info }}</small></p>
+          <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
         <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 %}"
-            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 %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="tls_policy"
-            data-api-url='edit/tls_policy'
-            data-api-attr='{"tls_enforce_out": {% if get_tls_policy.tls_enforce_out == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_out }}</button>
-            <div class="clearfix visible-xs"></div>
+            <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 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"
+              data-api-url='edit/tls_policy'
+              data-api-attr='{"tls_enforce_out": {% if get_tls_policy.tls_enforce_out == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_out }}</button>
           </div>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
         <div class="col-sm-10">
           <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="{{ lang.edit.unchanged_if_empty }}" autocomplete="new-password">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
         <div class="col-sm-10">
           <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
         </div>
       </div>
-      <div data-acl="{{ acl.extend_sender_acl }}" class="form-group">
+      <div data-acl="{{ acl.extend_sender_acl }}" class="row mb-4">
         <label class="control-label col-sm-2" for="extended_sender_acl">{{ lang.edit.extended_sender_acl }}</label>
         <div class="col-sm-10">
           {% if sender_acl_handles.external_sender_aliases %}
             {% set ext_sender_acl = sender_acl_handles.external_sender_aliases|join(', ') %}
           {% endif %}
           <input type="text" class="form-control" name="extended_sender_acl" value="{{ ext_sender_acl }}" placeholder="user1@example.com, user2@example.org, @example.com, ...">
-          <small class="help-block">{{ lang.edit.extended_sender_acl_info|raw }}</small>
+          <small class="text-muted">{{ lang.edit.extended_sender_acl_info|raw }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.protocol_access }}" name="protocol_access" multiple class="form-control">
@@ -202,16 +215,16 @@
           </select>
         </div>
       </div>
-      <div hidden data-acl="{{ acl.smtp_ip_access }}" class="form-group">
+      <div hidden data-acl="{{ acl.smtp_ip_access }}" class="row">
         <label class="control-label col-sm-2" for="allow_from_smtp">{{ lang.edit.allow_from_smtp }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="allow_from_smtp" value="{{ allow_from_smtp }}" placeholder="1.1.1.1, 10.2.0.0/24, ...">
-          <small class="help-block">{{ lang.edit.allow_from_smtp_info }}</small>
+          <small class="text-muted">{{ lang.edit.allow_from_smtp_info }}</small>
         </div>
       </div>
       <hr>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
           <select name="active" class="form-control">
             <option value="1"{% if result.active == '1' %} selected{% endif %}>{{ lang.edit.active }}</option>
             <option value="2"{% if result.active == '2' %} selected{% endif %}>{{ lang.edit.disable_login }}</option>
@@ -219,151 +232,163 @@
           </select>
         </div>
       </div>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
-            <small class="help-block">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
+            <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
           </div>
         </div>
       </div>
       {% if not skip_sogo %}
-      <div data-acl="{{ acl.sogo_access }}" class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div data-acl="{{ acl.sogo_access }}" class="row">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
-            <small class="help-block">{{ lang.edit.sogo_access_info }}</small>
+            <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
           </div>
         </div>
       </div>
       {% endif %}
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
-          <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
+          <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
+          <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
         </div>
       </div>
     </form>
   </div>
-  <div id="mpushover" class="tab-pane">
+  <div id="mpushover" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-pushover">
     <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">
       <input type="hidden" value="0" name="active">
       <div class="row">
         <div class="col-sm-1">
-          <p class="help-block"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACglBMVEUAAAAAAAEAAAAilecFGigAAAAAAAAAAAAAAAANj+c3n+Ypm+oeYI4KWI4MieAtkdQbleoJcLcjmeswmN4Rit4KgdMKUYQJKUAQSnILL0kMNlMSTngimOoNPF0hlOQBBgkNOlkRS3MHIjUhk+IPf8wKLUYsjM0AAAASTngAAAAAAAAPfckbdLIbdrYUWIgegsgce70knfEAAAAknfENOVkGHi8YaaIjnvEdgMUhkuAQSG8aca0hleQUh9YLjOM4nOEMgtMcbaYWa6YemO02ltkKhNktgLodYZEPXJEyi8kKesktfLUzj84cWYMiluckZ5YJXJYeW4Y0k9YKfs4yjs0pc6YHZaUviskLfMkqmugak+cqkNcViNcqeK4Iaq4XRmYGPmYMKDsFJTstgr0LdL0ti84CCQ4BCQ4Qgc8rlt8XjN8shcQsi8wZSGgEP2cRMEUDKkUAAAD///8dmvEamfExo/EXmPEWl/ERlvElnvEsofEjnfETl/Enn/Ezo/E4pvEvovEfm/E1pPEzpPEvofEOlfEpoPEamPEQlfEYmfE6p/EgnPEVlvEroPE3pfE2pfENk/Ern/E3pPEcmfEfmvEnnvBlufT6/P0soPAknPDd7/zs9vzo9PxBqfItofAqoPD9/f3B4/q43/mx2/l/xfZ6w/Vxv/VtvfVgt/RXtPNTsfNEq/L3+/31+v3a7fvR6vvH5fqs2vmc0/jx+P3v9/3h8fzW7PvV7PvL5/q13fmo1/mh1PiY0fiNy/aHyfZ2wfVou/Vdt/RPsPM3oeoQkuowmeAgjdgcgMQbeLrw9/3k8vy74Pm63/mX0PdYtfNNr/Ikm+4wnOchkuAVjOAfdrMVcrOdoJikAAAAcnRSTlMAIQ8IzzweFwf+/fvw8P79+/Xt7e3p6eji4d7U08y8qZyTiIWDgn53bWxqaWBKQ0JBOjUwMCkoJCEfHBkT/vz8/Pv7+vr69/b29PTy7ezm5ubm5N7e29vQ0M/Pv7+4uLW1pqaWloWDg3x7e21mUVFFRUXdPracAAAEbElEQVRIx4WUZbvaQBCFF+ru7u7u7u7u7t4mvVwSoBC0JIUCLRQolLq7u7vr/+nMLkmQyvlwyfPcd86e3ZldUqwyQ/p329J+XfutPQYOLUP+q55rFtQJRvY79+xxlZTUWbKpz7/xrrMr2+3BoNPpdLn2lJQ4HEeqLOr1d7z7XNkesQed4A848G63Oy4Gmg/6Mz542QvZbqe8C/Ig73CLYiYTrtLmT3zfqbIcAR7y4wIqH/B6M9Fo0+Ldb6sM9ph/v4ozPuz12mxRofaAAr7jCNkuoz/jNf9AGHibkBCm51fsGKvxsAGWx4H+jBcEi6V2birDpCL/9Klrd1KHbiSvPWP8V0tTnTfO03iXi57P6WNHOVUf44IFdFDRz6pV5fw8Zy5z3JVH5+R48OwxqDiGvKJIY9R+9JsCuJ5HPg74OVEMpz+nbdEPUHEWeEk6IDUnTC1l5r+f8uffc0cfxc8fS17kLso24SwUPFDA/6DE82xKDOPliJ7n/GGOOyWK9zD9CdjvOfg9Dv6AH+AX04LW9gj2i8W/APx1UbxwCAu+wPmcpgUKL/EHdvtq4uwaZwCuznPJVY5LHhED15G/isd5Hz4eKui/e/du02YoKFeD5mHzHIN/nxEDe25gQQwKorAid04CfyzwL4XutXvl1Pt1guMOwwKPkU8mYIFT8JHK+vv8prpDScUVL+j8s3lOctw1GIhbWHAS+HgKPk7xPM/4UtNAYmzizJkf6NgTb/gM8jePQLsewMdthS3g95tMpT1IhVm6v1s8fYmLeb13Odwp8Fh5KY048y/d14WUrwrb1e/X/rNp73nkD8kWS+wi/MZ4XuetG4mhKubJm3/WNEvi8SHwB56nPKjUam0LBdp9ARwupFemTYudvgN/L1+A/Ko/LGBuS8pPy+YR1fuCTWNKnUyoeUyYx2o2dyEVGmr5xTD42xzvkD16+Pb9WIIH6fmt1r3mbsTY7Bvw+n23naT8BUWh86bz6G/e259UXPUK3gfAxQDlo7Rpx3Geqb2e3wp83SGEdKpB7zvwYbzvT2n65xLwbH6YP+M9C8vA8E1wxLU8gkCbdhXGUyrMgwVrcbzLHonr78lzDvWM3q/C/HtDlXoSUIe3YkblhRPIX4E8Oo/9siLv8dRjV7SBlkdgTXvKS7nzsA/9AfeEuhKq9T8zWIDv1Sd6ETAP4D6/H/1V+1BojvruNa4SZXz4JhY84dV5MOF5agUvu5OsOo+KRpG30KalEnoeDccFlutPZYs38D5n3zcpr1/0fBhfb3DOY1z2tSAgLxWezz6zuoHhfUmOejf6blHQH/sFuJYfcMZX307ytKvRa3ifoV/586P5j+tICtS77BuJxzxYAPZsntX8k3eSIhlajK4p8b7iefCEKs03kD/I2LnxL9ovH+43y4fAv1YrI/mzDBsavAX/UppfzVOrZT/ydxk6lJ047MfLfVbcb6hS9ZEzWxekKQ5WrtPqZg3rV6tWrX6Tle3KQZj/q6KxQnmDoXwFY0VSrN9e8FRXBCTAvwAAAABJRU5ErkJggg==" class="img img-fluid"></a></p>
+          <p class="text-muted"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACglBMVEUAAAAAAAEAAAAilecFGigAAAAAAAAAAAAAAAANj+c3n+Ypm+oeYI4KWI4MieAtkdQbleoJcLcjmeswmN4Rit4KgdMKUYQJKUAQSnILL0kMNlMSTngimOoNPF0hlOQBBgkNOlkRS3MHIjUhk+IPf8wKLUYsjM0AAAASTngAAAAAAAAPfckbdLIbdrYUWIgegsgce70knfEAAAAknfENOVkGHi8YaaIjnvEdgMUhkuAQSG8aca0hleQUh9YLjOM4nOEMgtMcbaYWa6YemO02ltkKhNktgLodYZEPXJEyi8kKesktfLUzj84cWYMiluckZ5YJXJYeW4Y0k9YKfs4yjs0pc6YHZaUviskLfMkqmugak+cqkNcViNcqeK4Iaq4XRmYGPmYMKDsFJTstgr0LdL0ti84CCQ4BCQ4Qgc8rlt8XjN8shcQsi8wZSGgEP2cRMEUDKkUAAAD///8dmvEamfExo/EXmPEWl/ERlvElnvEsofEjnfETl/Enn/Ezo/E4pvEvovEfm/E1pPEzpPEvofEOlfEpoPEamPEQlfEYmfE6p/EgnPEVlvEroPE3pfE2pfENk/Ern/E3pPEcmfEfmvEnnvBlufT6/P0soPAknPDd7/zs9vzo9PxBqfItofAqoPD9/f3B4/q43/mx2/l/xfZ6w/Vxv/VtvfVgt/RXtPNTsfNEq/L3+/31+v3a7fvR6vvH5fqs2vmc0/jx+P3v9/3h8fzW7PvV7PvL5/q13fmo1/mh1PiY0fiNy/aHyfZ2wfVou/Vdt/RPsPM3oeoQkuowmeAgjdgcgMQbeLrw9/3k8vy74Pm63/mX0PdYtfNNr/Ikm+4wnOchkuAVjOAfdrMVcrOdoJikAAAAcnRSTlMAIQ8IzzweFwf+/fvw8P79+/Xt7e3p6eji4d7U08y8qZyTiIWDgn53bWxqaWBKQ0JBOjUwMCkoJCEfHBkT/vz8/Pv7+vr69/b29PTy7ezm5ubm5N7e29vQ0M/Pv7+4uLW1pqaWloWDg3x7e21mUVFFRUXdPracAAAEbElEQVRIx4WUZbvaQBCFF+ru7u7u7u7u7t4mvVwSoBC0JIUCLRQolLq7u7vr/+nMLkmQyvlwyfPcd86e3ZldUqwyQ/p329J+XfutPQYOLUP+q55rFtQJRvY79+xxlZTUWbKpz7/xrrMr2+3BoNPpdLn2lJQ4HEeqLOr1d7z7XNkesQed4A848G63Oy4Gmg/6Mz542QvZbqe8C/Ig73CLYiYTrtLmT3zfqbIcAR7y4wIqH/B6M9Fo0+Ldb6sM9ph/v4ozPuz12mxRofaAAr7jCNkuoz/jNf9AGHibkBCm51fsGKvxsAGWx4H+jBcEi6V2birDpCL/9Klrd1KHbiSvPWP8V0tTnTfO03iXi57P6WNHOVUf44IFdFDRz6pV5fw8Zy5z3JVH5+R48OwxqDiGvKJIY9R+9JsCuJ5HPg74OVEMpz+nbdEPUHEWeEk6IDUnTC1l5r+f8uffc0cfxc8fS17kLso24SwUPFDA/6DE82xKDOPliJ7n/GGOOyWK9zD9CdjvOfg9Dv6AH+AX04LW9gj2i8W/APx1UbxwCAu+wPmcpgUKL/EHdvtq4uwaZwCuznPJVY5LHhED15G/isd5Hz4eKui/e/du02YoKFeD5mHzHIN/nxEDe25gQQwKorAid04CfyzwL4XutXvl1Pt1guMOwwKPkU8mYIFT8JHK+vv8prpDScUVL+j8s3lOctw1GIhbWHAS+HgKPk7xPM/4UtNAYmzizJkf6NgTb/gM8jePQLsewMdthS3g95tMpT1IhVm6v1s8fYmLeb13Odwp8Fh5KY048y/d14WUrwrb1e/X/rNp73nkD8kWS+wi/MZ4XuetG4mhKubJm3/WNEvi8SHwB56nPKjUam0LBdp9ARwupFemTYudvgN/L1+A/Ko/LGBuS8pPy+YR1fuCTWNKnUyoeUyYx2o2dyEVGmr5xTD42xzvkD16+Pb9WIIH6fmt1r3mbsTY7Bvw+n23naT8BUWh86bz6G/e259UXPUK3gfAxQDlo7Rpx3Geqb2e3wp83SGEdKpB7zvwYbzvT2n65xLwbH6YP+M9C8vA8E1wxLU8gkCbdhXGUyrMgwVrcbzLHonr78lzDvWM3q/C/HtDlXoSUIe3YkblhRPIX4E8Oo/9siLv8dRjV7SBlkdgTXvKS7nzsA/9AfeEuhKq9T8zWIDv1Sd6ETAP4D6/H/1V+1BojvruNa4SZXz4JhY84dV5MOF5agUvu5OsOo+KRpG30KalEnoeDccFlutPZYs38D5n3zcpr1/0fBhfb3DOY1z2tSAgLxWezz6zuoHhfUmOejf6blHQH/sFuJYfcMZX307ytKvRa3ifoV/586P5j+tICtS77BuJxzxYAPZsntX8k3eSIhlajK4p8b7iefCEKs03kD/I2LnxL9ovH+43y4fAv1YrI/mzDBsavAX/UppfzVOrZT/ydxk6lJ047MfLfVbcb6hS9ZEzWxekKQ5WrtPqZg3rV6tWrX6Tle3KQZj/q6KxQnmDoXwFY0VSrN9e8FRXBCTAvwAAAABJRU5ErkJggg==" class="img img-fluid"></a></p>
         </div>
         <div class="col-sm-10">
-          <p class="help-block">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
-          <p class="help-block">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code></p>
-          <div class="form-group">
-            <div class="row">
-              <div class="col-sm-6">
+          <p class="text-muted">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
+          <p class="text-muted">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code>, <code>{SENDER_ADDRESS}</code>, <code>{SENDER_NAME}</code>, <code>{TO_NAME}</code>, <code>{TO_ADDRESS}</code>, <code>{MSG_ID}</code></p>
+          <div class="row">
+            <div class="col-sm-6 mb-2">
+              <label for="token">API Token/Key (Application)</label>
+              <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+            </div>
+            <div class="col-sm-6 mb-2">
+              <label for="key">User/Group Key</label>
+              <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
+            </div>
+            <div class="col-sm-6 mb-4">
+              <label for="title">{{ lang.edit.pushover_title }}</label>
+              <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
+            </div>
+            <div class="col-sm-6 mb-4">
+              <label for="text">{{ lang.edit.pushover_text }}</label>
+              <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+            </div>
+            <div class="col-sm-12 mb-4">
+              <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
+              <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+            </div>
+            <div class="col-sm-12 mb-2">
                 <div class="form-group">
-                  <label for="token">API Token/Key (Application)</label>
-                  <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="form-group">
-                  <label for="key">User/Group Key</label>
-                  <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="form-group">
-                  <label for="title">{{ lang.edit.pushover_title }}</label>
-                  <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="form-group">
-                  <label for="text">{{ lang.edit.pushover_text }}</label>
-                  <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+                  <label for="sound">{{ lang.edit.pushover_sound }}</label><br>
+                  <select name="sound" class="form-control">
+                    <option value="pushover"{% if pushover_data.attributes.sound == 'pushover' %} selected{% endif %}>Pushover (default)</option>
+                    <option value="bike"{% if pushover_data.attributes.sound == 'bike' %} selected{% endif %}>Bike</option>
+                    <option value="bugle"{% if pushover_data.attributes.sound == 'bugle' %} selected{% endif %}>Bugle</option>
+                    <option value="cashregister"{% if pushover_data.attributes.sound == 'cashregister' %} selected{% endif %}>Cash Register</option>
+                    <option value="classical"{% if pushover_data.attributes.sound == 'classical' %} selected{% endif %}>Classical</option>
+                    <option value="cosmic"{% if pushover_data.attributes.sound == 'cosmic' %} selected{% endif %}>Cosmic</option>
+                    <option value="falling"{% if pushover_data.attributes.sound == 'falling' %} selected{% endif %}>Falling</option>
+                    <option value="gamelan"{% if pushover_data.attributes.sound == 'gamelan' %} selected{% endif %}>Gamelan</option>
+                    <option value="incoming"{% if pushover_data.attributes.sound == 'incoming' %} selected{% endif %}>Incoming</option>
+                    <option value="intermission"{% if pushover_data.attributes.sound == 'intermission' %} selected{% endif %}>Intermission</option>
+                    <option value="magic"{% if pushover_data.attributes.sound == 'magic' %} selected{% endif %}>Magic</option>
+                    <option value="mechanical"{% if pushover_data.attributes.sound == 'mechanical' %} selected{% endif %}>Mechanical</option>
+                    <option value="pianobar"{% if pushover_data.attributes.sound == 'pianobar' %} selected{% endif %}>Piano Bar</option>
+                    <option value="siren"{% if pushover_data.attributes.sound == 'siren' %} selected{% endif %}>Siren</option>
+                    <option value="spacealarm"{% if pushover_data.attributes.sound == 'spacealarm' %} selected{% endif %}>Space Alarm</option>
+                    <option value="tugboat"{% if pushover_data.attributes.sound == 'tugboat' %} selected{% endif %}>Tug Boat</option>
+                    <option value="alien"{% if pushover_data.attributes.sound == 'alien' %} selected{% endif %}>Alien Alarm (long)</option>
+                    <option value="climb"{% if pushover_data.attributes.sound == 'climb' %} selected{% endif %}>Climb (long)</option>
+                    <option value="persistent"{% if pushover_data.attributes.sound == 'persistent' %} selected{% endif %}>Persistent (long)</option>
+                    <option value="echo"{% if pushover_data.attributes.sound == 'echo' %} selected{% endif %}>Pushover Echo (long)</option>
+                    <option value="updown"{% if pushover_data.attributes.sound == 'updown' %} selected{% endif %}>Up Down (long)</option>
+                    <option value="vibrate"{% if pushover_data.attributes.sound == 'vibrate' %} selected{% endif %}>Vibrate Only</option>
+                    <option value="none"{% if pushover_data.attributes.sound == 'none' %} selected{% endif %}> None (silent) </option>
+                  </select>
                 </div>
               </div>
               <div class="col-sm-12">
-                <div class="form-group">
-                  <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
-                  <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+              </div>
+            </div>
+            <div class="col-sm-12">
+              <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
+                <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
+              </legend>
+              <hr />
+            </div>
+            <div class="col-sm-12 mb-4">
+              <div id="po_advanced" class="collapse">
+                <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
+                <input type="text" class="form-control mt-2" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
+                <div class="checkbox mt-4">
+                  <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
                 </div>
-              </div>
-              <div class="col-sm-12">
-                <div class="checkbox">
-                  <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <legend style="cursor:pointer;margin-top:10px" data-target="#po_advanced" unselectable="on" data-toggle="collapse">
-                  <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
-                </legend>
-              </div>
-              <div class="col-sm-12">
-                <div id="po_advanced" class="collapse">
-                  <div class="form-group">
-                    <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
-                    <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
-                    </div>
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
-                    </div>
-                  </div>
+                <div class="checkbox mt-2">
+                  <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
                 </div>
               </div>
             </div>
           </div>
           <div class="btn-group" data-acl="{{ acl.pushover }}">
-            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.edit.save }}</a>
-            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
-            <div class="clearfix visible-xs"></div>
-            <a id="pushover_delete" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.edit.remove }}</a>
+            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.edit.save }}</a>
+            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
+            <a id="pushover_delete" class="btn btn-sm d-block d-sm-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.edit.remove }}</a>
           </div>
         </div>
       </div>
     </form>
   </div>
-  <div id="macl" class="tab-pane">
+  <div id="macl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-acl">
     <form data-id="useracl" class="form-inline well" method="post">
       <div class="row">
         <div class="col-sm-1">
-          <p class="help-block">ACL</p>
+          <p class="text-muted">ACL</p>
         </div>
         <div class="col-sm-10">
-          <div class="form-group">
-            <select id="user_acl" name="user_acl" size="10" multiple>
-              {% for acl, val in user_acls %}
-                <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
-              {% endfor %}
-            </select>
-          </div>
-          <div class="form-group">
-            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          </div>
+          <select id="user_acl" name="user_acl" size="10" multiple>
+            {% for acl, val in user_acls %}
+              <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
+            {% endfor %}
+          </select>
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
         </div>
       </div>
     </form>
   </div>
-  <div id="mrl" class="tab-pane">
+  <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
     <form data-id="mboxratelimit" class="form-inline well" method="post">
       <div class="row">
         <div class="col-sm-1">
-          <p class="help-block">{{ lang.acl.ratelimit }}</p>
+          <p class="text-muted">{{ lang.acl.ratelimit }}</p>
         </div>
         <div class="col-sm-10">
-          <div class="form-group">
-            <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-          </div>
-          <div class="form-group">
-            <select name="rl_frame" class="form-control">
-              {% include 'mailbox/rl-frame.twig' %}
-            </select>
-          </div>
-          <div class="form-group">
-            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          </div>
-          <p class="help-block">{{ lang.edit.mbox_rl_info }}</p>
+          <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
+            {% include 'mailbox/rl-frame.twig' %}
+          </select>
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+          <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
         </div>
       </div>
     </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig
index 0a123fc..f3dc4d0 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig
@@ -4,33 +4,33 @@
 {% if result %}
 <h4>OAuth2</h4>
 <form data-id="oauth2client" class="form-horizontal" role="form" method="post">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="client_id">{{ lang.edit.client_id }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_id" id="client_id" value="{{ result.client_id }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="client_secret">{{ lang.edit.client_secret }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_secret" id="client_secret" value="{{ result.client_secret }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="scope">{{ lang.edit.scope }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="scope" id="scope" value="{{ result.scope }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="redirect_uri">{{ lang.edit.redirect_uri }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="redirect_uri" id="redirect_uri" value="{{ result.redirect_uri }}">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="oauth2client" data-item="{{ oauth2client }}" data-api-url='edit/oauth2-client' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="oauth2client" data-item="{{ oauth2client }}" data-api-url='edit/oauth2-client' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig
index 7383713..9af30a3 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig
@@ -6,30 +6,30 @@
 <br>
 <form class="form-horizontal" data-id="edit_recipient_map" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_old }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_old }}" type="text" class="form-control" name="recipient_map_old" id="recipient_map_old">
       <small>{{ lang.mailbox.recipient_map_old_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_new }}" type="text" class="form-control" name="recipient_map_new" id="recipient_map_new">
       <small>{{ lang.mailbox.recipient_map_new_info }}</small>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="edit_recipient_map" data-item="{{ map }}" data-api-url='edit/recipient_map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_recipient_map" data-item="{{ map }}" data-api-url='edit/recipient_map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig
index 9e3d67c..c668981 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig
@@ -5,35 +5,35 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editrelayhost">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="hostname">{{ lang.add.hostname }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="hostname" value="{{ result.hostname }}" required>
-      <p class="help-block">{{ lang.add.relayhost_wrapped_tls_info|raw }}</p>
+      <p class="text-muted">{{ lang.add.relayhost_wrapped_tls_info|raw }}</p>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editrelayhost" data-item="{{ result.id }}" data-api-url='edit/relayhost' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editrelayhost" data-item="{{ result.id }}" data-api-url='edit/relayhost' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig
index 36534bb..4ba65bd 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig
@@ -5,13 +5,13 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editresource">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="description" value="{{ result.description }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="domain">{{ lang.edit.kind }}</label>
     <div class="col-sm-10">
       <select name="kind" title="{{ lang.edit.select }}" required>
@@ -21,7 +21,7 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
     <div class="col-sm-10">
       <select name="multiple_bookings_select" id="editSelectMultipleBookings" title="{{ lang.add.select }}" required>
@@ -36,16 +36,16 @@
       <input type="hidden" name="multiple_bookings" id="multiple_bookings">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editresource" data-item="{{ result.name }}" data-api-url='edit/resource' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editresource" data-item="{{ result.name }}" data-api-url='edit/resource' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig
index 6af7e0a..d2172e6 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig
@@ -11,31 +11,31 @@
     <input type="hidden" value="0" name="skipcrossduplicates">
     <input type="hidden" value="0" name="active">
     <input type="hidden" value="0" name="subscribeall">
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="host1">{{ lang.edit.hostname }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="host1" id="host1" value="{{ result.host1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="port1">Port</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="port1" id="port1" min="1" max="65535" value="{{ result.port1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="user1">{{ lang.edit.username }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="user1" id="user1" value="{{ result.user1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="password1">{{ lang.edit.password }}</label>
       <div class="col-sm-10">
         <input type="password" class="form-control" name="password1" id="password1" value="{{ result.password1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="enc1">{{ lang.edit.encryption }}</label>
       <div class="col-sm-10">
         <select id="enc1" name="enc1">
@@ -45,112 +45,112 @@
         </select>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="mins_interval">{{ lang.edit.mins_interval }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="{{ result.mins_interval }}" required>
-        <small class="help-block">1-43800</small>
+        <small class="text-muted">1-43800</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="subfolder2" id="subfolder2" value="{{ result.subfolder2 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxage" id="maxage" min="0" max="32000" value="{{ result.maxage }}">
-        <small class="help-block">0-32000</small>
+        <small class="text-muted">0-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxbytespersecond" id="maxbytespersecond" min="0" max="125000000" value="{{ result.maxbytespersecond }}">
-        <small class="help-block">0-125000000</small>
+        <small class="text-muted">0-125000000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="timeout1">{{ lang.add.timeout1 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout1" id="timeout1" min="1" max="32000" value="{{ result.timeout1 }}">
-        <small class="help-block">1-32000</small>
+        <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="timeout2">{{ lang.add.timeout2 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout2" id="timeout2" min="1" max="32000" value="{{ result.timeout2 }}">
-        <small class="help-block">1-32000</small>
+        <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="exclude">{{ lang.edit.exclude }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="exclude" id="exclude" value="{{ result.exclude }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="custom_params" id="custom_params" value="{{ result.custom_params }}" placeholder="--dry --some-param=xy --other-param=yx">
-        <small class="help-block">{{ lang.add.custom_params_hint }}</small>
+        <small class="text-muted">{{ lang.add.custom_params_hint }}</small>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-4">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editsyncjob" data-item="{{ result.id }}" data-api-url='edit/syncjob' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
+        <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editsyncjob" data-item="{{ result.id }}" data-api-url='edit/syncjob' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
       </div>
     </div>
   </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig
index a40621c..199bbfe 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="edit_tls_policy_maps" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
     <div class="col-sm-10">
       <input value="{{ result.dest }}" type="text" class="form-control" name="dest" id="dest">
       <small>{{ lang.mailbox.tls_map_dest_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" name="policy" required>
@@ -23,23 +23,23 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
     <div class="col-sm-10">
       <input value="{{ result.parameters }}" type="text" class="form-control" name="parameters" id="parameters">
       <small>{{ lang.mailbox.tls_map_parameters_info }}</small>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="edit_tls_policy_maps" data-item="{{ map }}" data-api-url='edit/tls-policy-map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_tls_policy_maps" data-item="{{ map }}" data-api-url='edit/tls-policy-map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig
index bf804cc..2fc461f 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig
@@ -6,47 +6,47 @@
 <form class="form-horizontal" role="form" method="post" data-id="edittransport">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="is_mx_based">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="destination">{{ lang.add.destination }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="destination" value="{{ result.destination }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="nexthop">{{ lang.edit.nexthop }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="nexthop" placeholder='[0.0.0.0], [0.0.0.0]:25, host:25, host, [host]:25' value="{{ result.nexthop }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="edittransport" data-item="{{ result.id }}" data-api-url='edit/transport' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edittransport" data-item="{{ result.id }}" data-api-url='edit/transport' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/fido2.twig b/mailcow/src/mailcow-dockerized/data/web/templates/fido2.twig
index 8d10ffe..c29cd8f 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/fido2.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/fido2.twig
@@ -15,7 +15,7 @@
         <form style="display:inline;" method="post">
           <input type="hidden" name="unset_fido2_key" value="{{ key_info.cid }}">
           <div class="btn-group">
-            <a href="#" class="btn btn-xs btn-default" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-toggle="modal" data-target="#fido2ChangeFn">
+            <a href="#" class="btn btn-xs btn-secondary" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-bs-toggle="modal" data-bs-target="#fido2ChangeFn">
               <i class="bi bi-pencil-fill"></i> {{ lang.fido2.rename }}
             </a>
             <a href="#" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";' class="btn btn-xs btn-danger">
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/index.twig b/mailcow/src/mailcow-dockerized/data/web/templates/index.twig
index 056421f..e90a720 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/index.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/index.twig
@@ -3,81 +3,84 @@
 {% block navbar %}{% endblock %}
 
 {% block content %}
-<div class="row">
-  <div class="col-md-offset-3 col-md-6">
-    <div class="panel panel-default panel-login">
-      <div class="panel-heading"><i class="bi bi-person-fill"></i> {{ lang.login.login }}</div>
-      <div class="panel-body">
-        <div class="text-center mailcow-logo"><img src="{{ logo|default('/img/cow_mailcow.svg') }}" alt="mailcow"></div>
+<div class="row mb-4" style="margin-top: 60px">
+  <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
+    <div class="card">
+      <div class="card-header d-flex align-items-center">
+        <i class="bi bi-person-fill me-2"></i> {{ lang.login.login }}
+        <div class="ms-auto form-check form-switch my-auto d-flex align-items-center">
+          <label class="form-check-label"><i class="bi bi-moon-fill"></i></label>
+          <input class="form-check-input ms-2" type="checkbox" id="dark-mode-toggle">
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="text-center mailcow-logo mb-4"><img src="{{ logo|default('/img/cow_mailcow.svg') }}" alt="mailcow"></div>
         {% if ui_texts.ui_announcement_text and ui_texts.ui_announcement_active %}
-        <div class="alert alert-{{ ui_texts.ui_announcement_type }} rot-enc ui-announcement-alert">{{ ui_texts.ui_announcement_text|rot13 }}</div>
+        <div class="my-4 alert alert-{{ ui_texts.ui_announcement_type }} rot-enc ui-announcement-alert">{{ ui_texts.ui_announcement_text|rot13 }}</div>
         {% endif %}
-        <legend>{% if oauth2_request %}{{ lang.oauth2.authorize_app }}{% else %}{{ ui_texts.main_name|raw }}{% endif %}</legend>
+        <legend>{% if oauth2_request %}{{ lang.oauth2.authorize_app }}{% else %}{{ ui_texts.main_name|raw }}{% endif %}</legend><hr />
         {% if is_mobileconfig %}
-        <div class="alert alert-info">{{ lang.login.mobileconfig_info }}</div>
+        <div class="my-4 alert alert-info ">{{ lang.login.mobileconfig_info }}</div>
         {% endif %}
         <form method="post" autofill="off">
-          <div class="form-group">
-            <label class="sr-only" for="login_user">{{ lang.login.username }}</label>
+          <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-addon"><i class="bi bi-person-fill"></i></div>
+              <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="form-group">
-            <label class="sr-only" for="pass_user">{{ lang.login.password }}</label>
+          <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-addon"><i class="bi bi-lock-fill"></i></div>
+              <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
             </div>
           </div>
-          <div class="form-group" style="position: relative">
+          <div class="d-flex mt-4" style="position: relative">
             <div class="btn-group">
               <div class="btn-group">
                 <button type="submit" class="btn btn-xs-lg btn-success" value="Login">{{ lang.login.login }}</button>
-                <button type="button" class="btn btn-xs-lg btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  <span class="caret"></span>
-                </button>
+                <button type="button" class="btn btn-xs-lg btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                 <ul class="dropdown-menu">
-                  <li><a href="#" id="fido2-login" style="line-height:1.4;"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</a></li>
+                  <li><a class="dropdown-item" href="#" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</a></li>
                 </ul>
               </div>
             </div>
             {% if not oauth2_request %}
-            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-default pull-right dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="flag-icon flag-icon-{{ mailcow_locale }}"></span> <span class="caret"></span>
+            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-secondary ms-auto dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="flag-icon flag-icon-{{ mailcow_locale[-2:] }}"></span>
             </button>
-            <ul class="dropdown-menu pull-right login">
+            <ul class="dropdown-menu ms-auto login">
               {% for key, val in available_languages %}
-                <li{% if mailcow_locale == key %} class="active"{% endif %}>
-                  <a href="?{{ query_string({'lang': key}) }}">
-                    <span class="flag-icon flag-icon-{{ key }}"></span>{{ val }}
+                <li>
+                  <a class="dropdown-item {% if mailcow_locale == key %}active{% endif %}" href="?{{ query_string({'lang': key}) }}">
+                    <span class="flag-icon flag-icon-{{ key[-2:] }}"></span>{{ val }}
                   </a>
                 </li>
               {% endfor %}
             </ul>
             {% endif %}
-            <div class="clearfix"></div>
           </div>
         </form>
         {% if login_delay %}
-        <p><div class="alert alert-info">{{ lang.login.delayed|format(login_delay) }}</b></div></p>
+        <p><div class="my-4 alert alert-info">{{ lang.login.delayed|format(login_delay) }}</b></div></p>
         {% endif %}
-        <div id="fido2-alerts"></div>
+        <div class="my-4" id="fido2-alerts"></div>
         {% if not oauth2_request and (mailcow_apps or app_links) %}
-        <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend>
-        <div class="apps">
+        <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend><hr />
+        <div class="my-2 d-flex flex-wrap apps">
           {% for app in mailcow_apps %}
             {% if not skip_sogo or not is_uri('SOGo', app.link) %}
-            <div class="media-clearfix">
-              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary btn-lg btn-block">{{ app.name }}</a>
+            <div class="m-2">
+              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary btn-block">{{ app.name }}</a>
             </div>
           {% endif %}
           {% endfor %}
           {% for row in app_links %}
             {% for key, val in row %}
-              <div class="media-clearfix">
-                <a href="{{ val }}" role="button" class="btn btn-primary btn-lg btn-block">{{ key }}</a>
+              <div class="m-2">
+                <a href="{{ val }}" role="button" class="btn btn-primary btn-block">{{ key }}</a>
               </div>
             {% endfor %}
           {% endfor %}
@@ -86,14 +89,16 @@
       </div>
     </div>
   </div>
-  {% if not oauth2_request %}
-  <div class="col-md-offset-3 col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <a data-toggle="collapse" href="#collapse1"><i class="bi bi-patch-question-fill"></i> {{ lang.start.help }}</a>
+</div>
+{% if not oauth2_request %}
+<div class="row">
+  <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
+    <div class="card">
+      <div class="card-header">
+        <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse1"><i class="bi bi-patch-question-fill"></i> {{ lang.start.help }}</a>
       </div>
-      <div id="collapse1" class="panel-collapse collapse">
-        <div class="panel-body">
+      <div id="collapse1" class="card-collapse collapse">
+        <div class="card-body">
           {% if ui_texts.help_text %}
           <p>{{ ui_texts.help_text|raw }}</p>
           {% else %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox.twig
index 80177b8..cdb6a42 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox.twig
@@ -1,54 +1,62 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li role="presentation" class="active"><a href="#tab-domains" aria-controls="tab-domains" role="tab" data-toggle="tab">{{ lang.mailbox.domains }}</a></li>
-  <li role="presentation"><a href="#tab-mailboxes" aria-controls="tab-mailboxes" role="tab" data-toggle="tab">{{ lang.mailbox.mailboxes }}</a></li>
-  {#  <li class="dropdown">
-  <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}
-    <span class="caret"></span></a>
-  <ul class="dropdown-menu">
-    <li role="presentation"><a href="#tab-mailboxes" aria-controls="tab-mailboxes" role="tab" data-toggle="tab">{{ lang.mailbox.mailboxes }}</a></li>
-    <li role="presentation"><a href="#tab-mailbox-defaults" aria-controls="tab-mailbox-defaults" role="tab" data-toggle="tab">{{ lang.mailbox.mailbox_defaults }}</a></li>
-  </ul>
-  </li> #}
-  <li role="presentation"><a href="#tab-resources" aria-controls="tab-resources" role="tab" data-toggle="tab">{{ lang.mailbox.resources }}</a></li>
-  <li class="dropdown">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.aliases }}
-      <span class="caret"></span></a>
+<div id="mail-content" class="responsive-tabs">
+  <ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item dropdown" role="presentation">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.domains }}</a>
     <ul class="dropdown-menu">
-      <li role="presentation"><a href="#tab-mbox-aliases" aria-controls="tab-mbox-aliases" role="tab" data-toggle="tab">{{ lang.mailbox.aliases }}</a></li>
-      <li role="presentation"><a href="#tab-domain-aliases" aria-controls="tab-domain-aliases" role="tab" data-toggle="tab">{{ lang.mailbox.domain_aliases }}</a></li>
+      <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
+      <li><button class="dropdown-item {% if mailcow_cc_role != 'admin' %} d-none{% endif %}" aria-selected="false" aria-controls="tab-templates-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-domains">{{ lang.mailbox.templates }}</button></li>
     </ul>
-  </li>
-  <li role="presentation"><a href="#tab-syncjobs" aria-controls="tab-syncjobs" role="tab" data-toggle="tab">{{ lang.mailbox.sync_jobs }}</a></li>
-  <li role="presentation"><a href="#tab-filters" aria-controls="tab-filters" role="tab" data-toggle="tab">{{ lang.mailbox.filters }}</a></li>
-  <li role="presentation"><a href="#tab-bcc" aria-controls="tab-bcc" role="tab" data-toggle="tab">{{ lang.mailbox.address_rewriting }}</a></li>
-  <li role="presentation"{% if mailcow_cc_role != 'admin' %} class="hidden"{% endif %}><a href="#tab-tls-policy" aria-controls="tab-tls-policy" role="tab" data-toggle="tab">{{ lang.mailbox.tls_policy_maps }}</a></li>
-</ul>
+    </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 {% if mailcow_cc_role != 'admin' %} d-none{% endif %}" aria-selected="false" aria-controls="tab-templates-mbox" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-mbox">{{ lang.mailbox.templates }}</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-templates-domains.twig' %}
+        {% include 'mailbox/tab-mailboxes.twig' %}
+        {% include 'mailbox/tab-templates-mbox.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' %}
 
 <script type='text/javascript'>
   var acl = '{{ acl_json|raw }}';
   var lang = {{ lang_mailbox|raw }};
+  var lang_rl = {{ lang_rl|raw }};
+  var lang_datatables = {{ lang_datatables|raw }};
   var csrf_token = '{{ csrf_token }}';
   var pagination_size = '{{ pagination_size }}';
   var role = '{{ role }}';
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/page-size.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/page-size.twig
deleted file mode 100644
index 7f5aaff..0000000
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/page-size.twig
+++ /dev/null
@@ -1,6 +0,0 @@
-<li><a href="#" data-page-size="3">{{ lang.mailbox.table_size_show_n|format(3) }}</a></li>
-<li><a href="#" data-page-size="10">{{ lang.mailbox.table_size_show_n|format(10) }}</a></li>
-<li><a href="#" data-page-size="20">{{ lang.mailbox.table_size_show_n|format(20) }}</a></li>
-<li><a href="#" data-page-size="50">{{ lang.mailbox.table_size_show_n|format(50) }}</a></li>
-<li><a href="#" data-page-size="100">{{ lang.mailbox.table_size_show_n|format(100) }}</a></li>
-<li><a href="#" data-page-size="200">{{ lang.mailbox.table_size_show_n|format(200) }}</a></li>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-bcc.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-bcc.twig
index 2cb199d..7f8319e 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-bcc.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-bcc.twig
@@ -1,72 +1,103 @@
-<div role="tabpanel" class="tab-pane" id="tab-bcc">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.bcc_maps }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.bcc_maps }}" data-toggle="modal" data-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="bcc_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<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 fs-5">
+      <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-flex">
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <p style="margin:10px" class="help-block">{{ lang.mailbox.bcc_info|raw }}</p>
-{#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table class="table table-striped" id="bcc_table"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"type":"sender"}' href="#">{{ lang.mailbox.bcc_to_sender }}</a></li>
-          <li><a data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"type":"rcpt"}' href="#">{{ lang.mailbox.bcc_to_rcpt }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="bcc" data-api-url='delete/bcc' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</a>
+    <div id="collapse-tab-bcc" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"type":"sender"}' href="#">{{ lang.mailbox.bcc_to_sender }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"type":"rcpt"}' href="#">{{ lang.mailbox.bcc_to_rcpt }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="bcc" data-api-url='delete/bcc' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="bcc_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="bcc_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</a>
+        </div>
+      </div>
+      <p class="text-muted">{{ lang.mailbox.bcc_info|raw }}</p>
+      <table id="bcc_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"type":"sender"}' href="#">{{ lang.mailbox.bcc_to_sender }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"type":"rcpt"}' href="#">{{ lang.mailbox.bcc_to_rcpt }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="bcc" data-api-url='delete/bcc' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="bcc_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="bcc_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</a>
+        </div>
       </div>
     </div>
   </div>
-  <div class="panel panel-default{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
-    <div class="panel-heading">
-      {{ lang.mailbox.recipient_maps }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-toggle="modal" data-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_recipient_map_table" data-table="recipient_map_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="recipient_map_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+  <div class="card mb-4{% if mailcow_cc_role != 'admin' %} d-none{% endif %}">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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>
-    <p style="margin:10px" class="help-block">{{ lang.mailbox.recipient_map_info }}</p>
-  {#  <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table class="table table-striped" id="recipient_map_table"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="recipient_map" data-api-url='delete/recipient_map' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</a>
+    <div id="collapse-tab-bcc-filters" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="recipient_map" data-api-url='delete/recipient_map' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="recipient_map_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="recipient_map_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</a>
+        </div>
+      </div>
+      <p class="text-muted">{{ lang.mailbox.recipient_map_info }}</p>
+      <table id="recipient_map_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="recipient_map" data-api-url='delete/recipient_map' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="recipient_map_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="recipient_map_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domain-aliases.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domain-aliases.twig
index 357981b..f203776 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domain-aliases.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domain-aliases.twig
@@ -1,34 +1,48 @@
-<div role="tabpanel" class="tab-pane" id="tab-domain-aliases">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.domain_aliases }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-toggle="modal" data-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_aliasdomain_table" data-table="aliasdomain_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="aliasdomain_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<div role="tabpanel" class="tab-pane fade" id="tab-domain-aliases" role="tabpanel" aria-labelledby="tab-domain-aliases">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table id="aliasdomain_table" class="table table-striped"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="alias-domain" data-api-url='delete/alias-domain' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-toggle="modal" data-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</a>
+    <div id="collapse-tab-domain-aliases" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="alias-domain" data-api-url='delete/alias-domain' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="aliasdomain_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="aliasdomain_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm 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 }}</a>
+        </div>
+      </div>
+      <table id="aliasdomain_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="alias-domain" data-api-url='delete/alias-domain' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="aliasdomain_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="aliasdomain_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm 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 }}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domains.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domains.twig
index e29d854..d3d8824 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domains.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-domains.twig
@@ -1,40 +1,57 @@
-<div role="tabpanel" class="tab-pane active" id="tab-domains">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.domains }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        {% if mailcow_cc_role == 'admin' %}
-          <button class="btn btn-xs btn-success" href="#" data-toggle="modal" data-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
-        {% endif %}
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_domain_table" data-table="domain_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="domain_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<div role="tabpanel" class="tab-pane fade show active" id="tab-domains" role="tabpanel" aria-labelledby="tab-domains">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <button class="btn d-sm-block 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-flex">
+        <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="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table id="domain_table" class="table table-striped"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
+    <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>#}      
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <ul class="dropdown-menu">
+            {% if mailcow_cc_role == 'admin' %}
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="domain" data-api-url='delete/domain' href="#">{{ lang.mailbox.remove }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="domain_table">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="domain_table">{{ lang.datatables.collapse_all }}</a></li>
+            {% endif %}
+          </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <li><a data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="domain" data-api-url='delete/domain' href="#">{{ lang.mailbox.remove }}</a></li>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</a>
           {% endif %}
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        {% if mailcow_cc_role == 'admin' %}
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</a>
-        {% endif %}
+        </div>
+      </div>
+      <table id="domain_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <ul class="dropdown-menu">
+            {% if mailcow_cc_role == 'admin' %}
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="domain" data-api-url='delete/domain' href="#">{{ lang.mailbox.remove }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+            {% endif %}
+            <li><a class="dropdown-item" data-datatables-expand="domain_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="domain_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          {% if mailcow_cc_role == 'admin' %}
+            <button class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
+          {% endif %}
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-filters.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-filters.twig
index f7b23ec..942f784 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-filters.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-filters.twig
@@ -1,83 +1,96 @@
-<div role="tabpanel" class="tab-pane" id="tab-filters">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.filters }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.filters }}" data-toggle="modal" data-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="filter_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<div role="tabpanel" class="tab-pane fade" id="tab-filters" role="tabpanel" aria-labelledby="tab-filters">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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="panel-body">
-      <p class="help-block">{{ lang.mailbox.sieve_info|raw }}</p><br>
-    </div>
-{#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table class="table table-striped" id="filter_table"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group" data-acl="{{ acl.filters }}">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"prefilter"}' href="#">{{ lang.mailbox.set_prefilter }}</a></li>
-          <li><a data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"postfilter"}' href="#">{{ lang.mailbox.set_postfilter }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-id="filter_item" data-api-url='delete/filter' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
+    <div id="collapse-tab-filters" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group" data-acl="{{ acl.filters }}">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"prefilter"}' href="#">{{ lang.mailbox.set_prefilter }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"postfilter"}' href="#">{{ lang.mailbox.set_postfilter }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-id="filter_item" data-api-url='delete/filter' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="filter_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="filter_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
+        </div>
       </div>
-    </div>
-    <div class="panel-body{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
-    <div class="row">
-      <div class="col-lg-6">
-        <h5>Global Prefilter</h5>
-        <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_prefilter">
-          <div class="form-group">
-            <div class="col-sm-12">
-              <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.prefilter }}</textarea>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-10 add_filter_btns">
-              <div class="btn-group">
-                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default validate_sieve" href="#">{{ lang.add.validate }}</button>
-                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-                <div class="clearfix visible-xs"></div>
+      <p class="text-muted">{{ lang.mailbox.sieve_info|raw }}</p><br>
+      <table id="filter_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4 mb-4">
+        <div class="btn-group" data-acl="{{ acl.filters }}">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"prefilter"}' href="#">{{ lang.mailbox.set_prefilter }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"postfilter"}' href="#">{{ lang.mailbox.set_postfilter }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-id="filter_item" data-api-url='delete/filter' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="filter_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="filter_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
+        </div>
+      </div>
+      <div class="{% if mailcow_cc_role != 'admin' %}hidden{% endif %}">
+        <div class="row">
+          <div class="col-lg-6 mt-4">
+            <h5>Global Prefilter</h5>
+            <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_prefilter">
+              <div class="row">
+                <div class="col-sm-12">
+                  <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.prefilter }}</textarea>
+                </div>
               </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="col-lg-6">
-        <h5>Global Postfilter</h5>
-        <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_postfilter">
-          <div class="form-group">
-            <div class="col-sm-12">
-              <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.postfilter }}</textarea>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-10 add_filter_btns">
-              <div class="btn-group">
-                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default validate_sieve" href="#">{{ lang.add.validate }}</button>
-                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-                <div class="clearfix visible-xs"></div>
+              <div class="row mt-2">
+                <div class="col-sm-10 add_filter_btns">
+                  <div class="btn-group">
+                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
+                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                  </div>
+                </div>
               </div>
-            </div>
+            </form>
           </div>
-        </form>
+          <div class="col-lg-6 mt-4">
+            <h5>Global Postfilter</h5>
+            <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_postfilter">
+              <div class="row">
+                <div class="col-sm-12">
+                  <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.postfilter }}</textarea>
+                </div>
+              </div>
+              <div class="row mt-2">
+                <div class="col-sm-10 add_filter_btns">
+                  <div class="btn-group">
+                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
+                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  </div>
 </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mailbox-defaults.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mailbox-defaults.twig
deleted file mode 100644
index 6a36469..0000000
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mailbox-defaults.twig
+++ /dev/null
@@ -1,10 +0,0 @@
-<div role="tabpanel" class="tab-pane" id="tab-mailbox-defaults">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.mailbox_defaults }}
-    </div>
-    <div class="panel-body help-block">
-      {{ lang.mailbox.mailbox_defaults_info }}
-    </div>
-  </div>
-</div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mailboxes.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mailboxes.twig
index a0ee9bd..d04cf0d 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mailboxes.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mailboxes.twig
@@ -1,120 +1,242 @@
-<div role="tabpanel" class="tab-pane" id="tab-mailboxes">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.mailboxes }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-toggle="modal" data-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_mailbox_table" data-table="mailbox_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="mailbox_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<div role="tabpanel" class="tab-pane fade" id="tab-mailboxes" role="tabpanel" aria-labelledby="tab-mailboxes">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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="mass-actions-mailbox hidden-xs" data-actions-header="true"></div>
-    <div class="table-responsive">
-      <table id="mailbox_table" class="table table-striped"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group hidden-md hidden-lg hidden-xl">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" 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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li class="dropdown-header">{{ lang.mailbox.mailbox }}</li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li><a data-action="delete_selected" data-id="mailbox" data-api-url='delete/mailbox' href="#">{{ lang.mailbox.remove }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li class="dropdown-header">{{ lang.mailbox.tls_enforce_in }}</li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li class="dropdown-header">{{ lang.mailbox.tls_enforce_out }}</li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li class="dropdown-header">{{ lang.mailbox.quarantine_notification }}</li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"hourly"}' href="#">{{ lang.user.hourly }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"daily"}' href="#">{{ lang.user.daily }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"weekly"}' href="#">{{ lang.user.weekly }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"never"}' href="#">{{ lang.user.never }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"reject"}' href="#">{{ lang.user.q_reject }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"add_header"}' href="#">{{ lang.user.q_add_header }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"all"}' href="#">{{ lang.user.q_all }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li class="dropdown-header">{{ lang.mailbox.allowed_protocols }}</li>
-          <li class="dropdown-header">IMAP</li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li class="dropdown-header">POP3</li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li class="dropdown-header">SMTP</li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
-      </div>
-      <div class="btn-group hidden-xs hidden-sm">
-        <a class="btn btn-sm btn-default" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.mailbox }} <span class="caret"></span></a>
+    <div id="collapse-tab-mailboxes" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group d-flex d-lg-none">
+          <a class="btn btn-sm btn-xs-half 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 btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"2"}' href="#">{{ lang.mailbox.disable_login }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="delete_selected" data-id="mailbox" data-api-url='delete/mailbox' href="#">{{ lang.mailbox.remove }}</a></li>
-          </ul>
-        </div>
-        <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">TLS <span class="caret"></span></a>
-          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-datatables-expand="mailbox_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="mailbox_table">{{ lang.datatables.collapse_all }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.mailbox }}</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox" data-api-url='delete/mailbox' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
             <li class="dropdown-header">{{ lang.mailbox.tls_enforce_in }}</li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-            <li role="separator" class="divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
             <li class="dropdown-header">{{ lang.mailbox.tls_enforce_out }}</li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          </ul>
-        </div>
-        <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.allowed_protocols }} <span class="caret"></span></a>
-          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.quarantine_notification }}</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"hourly"}' href="#">{{ lang.user.hourly }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"daily"}' href="#">{{ lang.user.daily }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"weekly"}' href="#">{{ lang.user.weekly }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"never"}' href="#">{{ lang.user.never }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"reject"}' href="#">{{ lang.user.q_reject }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"add_header"}' href="#">{{ lang.user.q_add_header }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"all"}' href="#">{{ lang.user.q_all }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.allowed_protocols }}</li>
             <li class="dropdown-header">IMAP</li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-            <li role="separator" class="divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
             <li class="dropdown-header">POP3</li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-            <li role="separator" class="divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
             <li class="dropdown-header">SMTP</li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li class="dropdown-header">Sieve</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
           </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
         </div>
-        <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quarantine_notification }} <span class="caret"></span></a>
+        <div class="btn-group d-none d-lg-flex">
+          <a class="btn btn-sm 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 btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"hourly"}' href="#">{{ lang.user.hourly }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"daily"}' href="#">{{ lang.user.daily }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"weekly"}' href="#">{{ lang.user.weekly }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"never"}' href="#">{{ lang.user.never }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"reject"}' href="#">{{ lang.user.q_reject }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"add_header"}' href="#">{{ lang.user.q_add_header }}</a></li>
-            <li><a data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"all"}' href="#">{{ lang.user.q_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-expand="mailbox_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="mailbox_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailbox }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"2"}' href="#">{{ lang.mailbox.disable_login }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox" data-api-url='delete/mailbox' href="#">{{ lang.mailbox.remove }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">TLS</a>
+            <ul class="dropdown-menu">
+              <li class="dropdown-header">{{ lang.mailbox.tls_enforce_in }}</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li class="dropdown-header">{{ lang.mailbox.tls_enforce_out }}</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.allowed_protocols }}</a>
+            <ul class="dropdown-menu">
+              <li class="dropdown-header">IMAP</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li class="dropdown-header">POP3</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li class="dropdown-header">SMTP</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li class="dropdown-header">Sieve</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quarantine_notification }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"hourly"}' href="#">{{ lang.user.hourly }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"daily"}' href="#">{{ lang.user.daily }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"weekly"}' href="#">{{ lang.user.weekly }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"never"}' href="#">{{ lang.user.never }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"reject"}' href="#">{{ lang.user.q_reject }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"add_header"}' href="#">{{ lang.user.q_add_header }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"all"}' href="#">{{ lang.user.q_all }}</a></li>
+            </ul>
+          </div>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
         </div>
-        <a class="btn btn-sm btn-success" href="#" data-toggle="modal" data-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
+      </div>
+      <table id="mailbox_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group d-flex d-lg-none">
+          <a class="btn btn-sm btn-xs-half 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 btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-datatables-expand="mailbox_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="mailbox_table">{{ lang.datatables.collapse_all }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.mailbox }}</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox" data-api-url='delete/mailbox' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.tls_enforce_in }}</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.tls_enforce_out }}</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.quarantine_notification }}</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"hourly"}' href="#">{{ lang.user.hourly }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"daily"}' href="#">{{ lang.user.daily }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"weekly"}' href="#">{{ lang.user.weekly }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"never"}' href="#">{{ lang.user.never }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"reject"}' href="#">{{ lang.user.q_reject }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"add_header"}' href="#">{{ lang.user.q_add_header }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"all"}' href="#">{{ lang.user.q_all }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">{{ lang.mailbox.allowed_protocols }}</li>
+            <li class="dropdown-header">IMAP</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">POP3</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li class="dropdown-header">SMTP</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li class="dropdown-header">Sieve</li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
+        </div>
+        <div class="btn-group d-none d-lg-flex">
+          <a class="btn btn-sm 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 btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-datatables-expand="mailbox_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="mailbox_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailbox }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"2"}' href="#">{{ lang.mailbox.disable_login }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox" data-api-url='delete/mailbox' href="#">{{ lang.mailbox.remove }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">TLS</a>
+            <ul class="dropdown-menu">
+              <li class="dropdown-header">{{ lang.mailbox.tls_enforce_in }}</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li class="dropdown-header">{{ lang.mailbox.tls_enforce_out }}</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_out":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.allowed_protocols }}</a>
+            <ul class="dropdown-menu">
+              <li class="dropdown-header">IMAP</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li class="dropdown-header">POP3</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"pop3_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li class="dropdown-header">SMTP</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"smtp_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li class="dropdown-header">Sieve</li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quarantine_notification }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"hourly"}' href="#">{{ lang.user.hourly }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"daily"}' href="#">{{ lang.user.daily }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"weekly"}' href="#">{{ lang.user.weekly }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"never"}' href="#">{{ lang.user.never }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"reject"}' href="#">{{ lang.user.q_reject }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"add_header"}' href="#">{{ lang.user.q_add_header }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_category' data-api-attr='{"quarantine_category":"all"}' href="#">{{ lang.user.q_all }}</a></li>
+            </ul>
+          </div>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mbox-aliases.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mbox-aliases.twig
index 2d7e7fc..6b8fcaf 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mbox-aliases.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-mbox-aliases.twig
@@ -1,43 +1,61 @@
-<div role="tabpanel" class="tab-pane" id="tab-mbox-aliases">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.aliases }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-toggle="modal" data-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_alias_table" data-table="alias_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="alias_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<div role="tabpanel" class="tab-pane fade" id="tab-mbox-aliases" role="tabpanel" aria-labelledby="tab-mbox-aliases">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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="panel-body help-block">
-      {{ lang.mailbox.alias_domain_alias_hint|raw }}
-    </div>
-    <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
-    <div class="table-responsive">
-      <table id="alias_table" class="table table-striped"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu top33">
-          <li><a data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="alias" data-api-url='delete/alias' href="#">{{ lang.mailbox.remove }}</a></li>
-          {% if not skip_sogo %}
-          <li role="separator" class="divider"></li>
-          <li><a data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"1"}' href="#">{{ lang.mailbox.sogo_visible_y }}</a></li>
-          <li><a data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"0"}' href="#">{{ lang.mailbox.sogo_visible_n }}</a></li>
-          {% endif %}
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
+    <div id="collapse-tab-mbox-aliases" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu top33">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="alias" data-api-url='delete/alias' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="alias_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="alias_table">{{ lang.datatables.collapse_all }}</a></li>
+            {% if not skip_sogo %}
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"1"}' href="#">{{ lang.mailbox.sogo_visible_y }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"0"}' href="#">{{ lang.mailbox.sogo_visible_n }}</a></li>
+            {% endif %}
+          </ul>
+          <a class="btn btn-sm btn-secondary" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
+        </div>
+      </div>
+      <p class="text-muted">{{ lang.mailbox.alias_domain_alias_hint|raw }}</p>
+      <table id="alias_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu top33">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="alias" data-api-url='delete/alias' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="alias_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="alias_table">{{ lang.datatables.collapse_all }}</a></li>
+            {% if not skip_sogo %}
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"1"}' href="#">{{ lang.mailbox.sogo_visible_y }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"0"}' href="#">{{ lang.mailbox.sogo_visible_n }}</a></li>
+            {% endif %}
+          </ul>
+          <a class="btn btn-sm btn-secondary" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-resources.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-resources.twig
index 91c8fdc..26d5d0f 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-resources.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-resources.twig
@@ -1,39 +1,52 @@
-<div role="tabpanel" class="tab-pane" id="tab-resources">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.resources }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-toggle="modal" data-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_resource_table" data-table="resource_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="resource_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<div role="tabpanel" class="tab-pane fade" id="tab-resources" role="tabpanel" aria-labelledby="tab-resources">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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="panel-body help-block">
-      <p><span class="label label-success">{{ lang.mailbox.booking_0_short }}</span> - {{ lang.mailbox.booking_null }}</p>
-      <p><span class="label label-warning">{{ lang.mailbox.booking_lt0_short }}</span> - {{ lang.mailbox.booking_ltnull }}</p>
-      <p><span class="label label-danger">{{ lang.mailbox.booking_custom_short }}</span> - {{ lang.mailbox.booking_custom }}</p>
-    </div>
-{#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table id="resource_table" class="table table-striped"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="resource" data-api-url='delete/resource' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</a>
+    <div id="collapse-tab-resources" class="card-body collapse" data-bs-parent="#mail-content">      
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="resource" data-api-url='delete/resource' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="resource_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="resource_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</a>
+        </div>
+      </div>
+      <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 mt-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="resource" data-api-url='delete/resource' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="resource_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="resource_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-syncjobs.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-syncjobs.twig
index e8c4c36..8ecfda5 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-syncjobs.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-syncjobs.twig
@@ -1,36 +1,52 @@
-<div role="tabpanel" class="tab-pane" id="tab-syncjobs">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.sync_jobs }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button data-acl="{{ acl.syncjobs }}" class="btn btn-xs btn-success" href="#" data-toggle="modal" data-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_sync_job_table" data-table="sync_job_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="sync_job_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<div role="tabpanel" class="tab-pane fade" id="tab-syncjobs"  role="tabpanel" aria-labelledby="tab-syncjobs">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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="mass-actions-mailbox" data-actions-header="true"></div> -->
-    <div class="table-responsive">
-      <table class="table table-striped" id="sync_job_table"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group" data-acl="{{ acl.syncjobs }}">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"last_run":"","success":""}' href="#">{{ lang.mailbox.last_run_reset }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="syncjob" data-api-url='delete/syncjob' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+    <div id="collapse-tab-syncjobs" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group" data-acl="{{ acl.syncjobs }}">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"last_run":"","success":""}' href="#">{{ lang.mailbox.last_run_reset }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="syncjob" data-api-url='delete/syncjob' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="sync_job_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="sync_job_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+        </div>
+      </div>
+      <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group" data-acl="{{ acl.syncjobs }}">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"last_run":"","success":""}' href="#">{{ lang.mailbox.last_run_reset }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="syncjob" data-api-url='delete/syncjob' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="sync_job_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="sync_job_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-templates-domains.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-templates-domains.twig
new file mode 100644
index 0000000..95bd2d7
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-templates-domains.twig
@@ -0,0 +1,51 @@
+<div role="tabpanel" class="tab-pane fade show" id="tab-templates-domains" role="tabpanel" aria-labelledby="tab-templates-domains">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <button class="btn d-sm-block d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-templates-domains" data-bs-toggle="collapse" aria-controls="collapse-tab-templates-domains">
+        {{ lang.mailbox.domain_templates }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.domain_templates }} <span class="badge bg-info table-lines"></span></span>
+      
+      <div class="btn-group ms-auto d-flex">
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_templates_domain_table" data-table="templates_domain_table">{{ lang.admin.refresh }}</button>
+      </div>
+    </div>
+    <div id="collapse-tab-templates-domains" class="card-body collapse show" data-bs-parent="#mail-content">  
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <ul class="dropdown-menu">
+            {% if mailcow_cc_role == 'admin' %}
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="domain_template" data-api-url='delete/domain/template' href="#">{{ lang.mailbox.remove }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="templates_domain_table">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="templates_domain_table">{{ lang.datatables.collapse_all }}</a></li>
+            {% endif %}
+          </ul>
+          {% if mailcow_cc_role == 'admin' %}
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          {% endif %}
+        </div>
+      </div>
+      <table id="templates_domain_table" class="table table-striped dt-responsive w-100"></table>  
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <ul class="dropdown-menu">
+            {% if mailcow_cc_role == 'admin' %}
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="domain_template" data-api-url='delete/domain/template' href="#">{{ lang.mailbox.remove }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="templates_domain_table">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="templates_domain_table">{{ lang.datatables.collapse_all }}</a></li>
+            {% endif %}
+          </ul>
+          {% if mailcow_cc_role == 'admin' %}
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-templates-mbox.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-templates-mbox.twig
new file mode 100644
index 0000000..a43ec91
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-templates-mbox.twig
@@ -0,0 +1,51 @@
+<div role="tabpanel" class="tab-pane fade show" id="tab-templates-mbox" role="tabpanel" aria-labelledby="tab-templates-mbox">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <button class="btn d-sm-block d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-templates-mbox" data-bs-toggle="collapse" aria-controls="collapse-tab-templates-mbox">
+        {{ lang.mailbox.mailbox_templates }} <span class="badge bg-info table-lines"></span>
+      </button>
+      <span class="d-none d-md-block">{{ lang.mailbox.mailbox_templates }} <span class="badge bg-info table-lines"></span></span>
+      
+      <div class="btn-group ms-auto d-flex">
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_templates_mbox_table" data-table="templates_mbox_table">{{ lang.admin.refresh }}</button>
+      </div>
+    </div>
+    <div id="collapse-tab-templates-mbox" class="card-body collapse show" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <ul class="dropdown-menu">
+            {% if mailcow_cc_role == 'admin' %}
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox_template" data-api-url='delete/mailbox/template' href="#">{{ lang.mailbox.remove }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="templates_mbox_table">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="templates_mbox_table">{{ lang.datatables.collapse_all }}</a></li>
+            {% endif %}
+          </ul>
+          {% if mailcow_cc_role == 'admin' %}
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          {% endif %}
+        </div>
+      </div>
+      <table id="templates_mbox_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <ul class="dropdown-menu">
+            {% if mailcow_cc_role == 'admin' %}
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox_template" data-api-url='delete/mailbox/template' href="#">{{ lang.mailbox.remove }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="templates_mbox_table">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="templates_mbox_table">{{ lang.datatables.collapse_all }}</a></li>
+            {% endif %}
+          </ul>
+          {% if mailcow_cc_role == 'admin' %}
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-tls-policy.twig b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-tls-policy.twig
index dd4ba22..efefcf2 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-tls-policy.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/mailbox/tab-tls-policy.twig
@@ -1,35 +1,49 @@
-<div role="tabpanel" class="tab-pane{% if mailcow_cc_role != 'admin' %} hidden{% endif %}" id="tab-tls-policy">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      {{ lang.mailbox.tls_policy_maps_long }} <span class="badge badge-info table-lines"></span>
-      <div class="btn-group pull-right hidden-xs">
-        <button class="btn btn-xs btn-success" href="#" data-toggle="modal" data-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_tls_policy_table" data-table="tls_policy_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.mailbox.table_size }}
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" data-table-id="tls_policy_table" role="menu">
-          {% include 'mailbox/page-size.twig' %}
-        </ul>
+<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 mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-flex">
+        <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>
-    <p style="margin:10px" class="help-block">{{ lang.mailbox.tls_policy_maps_info|raw }}</p>
-{#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-    <div class="table-responsive">
-      <table class="table table-striped" id="tls_policy_table"></table>
-    </div>
-    <div class="mass-actions-mailbox">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="tls-policy-map" data-api-url='delete/tls-policy-map' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</a>
+    <div id="collapse-tab-tls-policy" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="tls-policy-map" data-api-url='delete/tls-policy-map' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="tls_policy_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="tls_policy_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</a>
+        </div>
+      </div>
+      <p class="text-muted">{{ lang.mailbox.tls_policy_maps_info|raw }}</p>
+      <table id="tls_policy_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-mailbox mt-4">
+        <div class="btn-group">
+          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="tls-policy-map" data-api-url='delete/tls-policy-map' href="#">{{ lang.mailbox.remove }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-datatables-expand="tls_policy_table">{{ lang.datatables.expand_all }}</a></li>
+            <li><a class="dropdown-item" data-datatables-collapse="tls_policy_table">{{ lang.datatables.collapse_all }}</a></li>
+          </ul>
+          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/modals/admin.twig b/mailcow/src/mailcow-dockerized/data/web/templates/modals/admin.twig
index a545404..15971e5 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/modals/admin.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/modals/admin.twig
@@ -1,40 +1,40 @@
 <!-- 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 fade" id="addRsettingModal" tabindex="-1" role="dialog" aria-hidden="false">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.admin.add_settings_rule }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="rsetting" role="form" method="post">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="desc">{{ lang.admin.rsetting_desc }}:</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="desc">{{ lang.admin.rsetting_desc }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" id="adminRspamdSettingsDesc" name="desc" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="content">{{ lang.admin.rsetting_content }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="content">{{ lang.admin.rsetting_content }}:</label>
             <div class="col-sm-10">
               <textarea class="form-control" id="adminRspamdSettingsContent" name="content" rows="10"></textarea>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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="rsetting" data-api-url='add/rsetting' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="rsetting" data-api-url='add/rsetting' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
         <hr>
-        <p>{{ lang.admin.rspamd-com_settings }}</p>
+        <p>{{ lang.admin.rspamd_com_settings | raw }}</p>
         <ul id="rspamd_presets"></ul>
       </div>
     </div>
@@ -42,23 +42,23 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.admin.add_domain_admin }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_domain_admin" role="form" method="post" autocomplete="off">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="username">{{ lang.admin.username }}:</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="username">{{ lang.admin.username }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="username" onkeyup="this.value = this.value.toLowerCase();" required>
               &rdsh; <kbd>a-z - _ .</kbd>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="name">{{ lang.admin.admin_domains }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="name">{{ lang.admin.admin_domains }}:</label>
             <div class="col-sm-10">
               <select title="{{ lang.admin.search_domain_da }}" class="full-width-select" name="domains" size="5" multiple>
                 {% for domain in domains %}
@@ -67,28 +67,28 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="password">{{ lang.admin.password }} (<a href="#" class="generate_password">{{ lang.admin.generate }}</a>)</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="password">{{ lang.admin.password }} (<a href="#" class="generate_password">{{ lang.admin.generate }}</a>)</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" data-hibp="true" name="password" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="password2">{{ lang.admin.password_repeat }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="password2">{{ lang.admin.password_repeat }}:</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" name="password2" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_admin" data-api-url='add/domain-admin' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_domain_admin" data-api-url='add/domain-admin' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -98,25 +98,25 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.fido2.set_fn }}</h3>
-        <p class="help-block" style="word-break:break-all" id="fido2_subject_desc" data-fido2-subject=""></p>
+        <p class="text-muted" style="word-break:break-all" id="fido2_subject_desc" data-fido2-subject=""></p>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="fido2ChangeFn" role="form" method="post" autocomplete="off">
           <input type="hidden" class="form-control" name="fido2_cid" id="fido2_cid">
-          <div class="form-group">
+          <div class="row mb-4">
             <label class="control-label col-sm-4" for="fido2_fn">{{ lang.fido2.fn }}:</label>
             <div class="col-sm-8">
               <input type="text" class="form-control" name="fido2_fn">
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-4 col-sm-8">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="fido2ChangeFn" data-item="null" data-api-url='edit/fido2-fn' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-4 col-sm-8">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="fido2ChangeFn" data-item="null" data-api-url='edit/fido2-fn' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
             </div>
           </div>
         </form>
@@ -126,23 +126,23 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">OAuth2</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_oauth2_client" role="form" method="post">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="redirect_uri">{{ lang.admin.oauth2_redirect_uri }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="redirect_uri">{{ lang.admin.oauth2_redirect_uri }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="redirect_uri" required>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_oauth2_client" data-api-url='add/oauth2-client' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_oauth2_client" data-api-url='add/oauth2-client' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -152,43 +152,43 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.admin.add_admin }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_admin" role="form" method="post" autocomplete="off">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="username">{{ lang.admin.username }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="username">{{ lang.admin.username }}:</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="username" onkeyup="this.value = this.value.toLowerCase();" required>
               &rdsh; <kbd>a-z - _ .</kbd>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="password">{{ lang.admin.password }} (<a href="#" class="generate_password">{{ lang.admin.generate }}</a>):</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="password">{{ lang.admin.password }} (<a href="#" class="generate_password">{{ lang.admin.generate }}</a>):</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" data-hibp="true" name="password" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="password2">{{ lang.admin.password_repeat }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="password2">{{ lang.admin.password_repeat }}:</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" data-pwgen-field="true" name="password2" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_admin" data-api-url='add/admin' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_admin" data-api-url='add/admin' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -198,32 +198,32 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title"><i class="bi bi-info-circle-fill"></i> Transport</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" id="test_transport_form" role="form" method="post">
           <input type="hidden" class="form-control" name="transport_id" id="transport_id">
           <input type="hidden" class="form-control" name="transport_type" id="transport_type">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="mail_from">{{ lang.admin.relay_from }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="mail_from">{{ lang.admin.relay_from }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="mail_from" placeholder="relay@example.org">
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="mail_rcpt">{{ lang.admin.relay_rcpt }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="mail_rcpt">{{ lang.admin.relay_rcpt }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="mail_rcpt" placeholder="null@hosted.mailcow.de" value="null@hosted.mailcow.de">
-              <p class="help-block">{{ lang.admin.transport_test_rcpt_info|raw }}</p>
+              <p class="text-muted">{{ lang.admin.transport_test_rcpt_info|raw }}</p>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="test_transport" href="#">{{ lang.admin.relay_run }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" id="test_transport" href="#">{{ lang.admin.relay_run }}</button>
             </div>
           </div>
         </form>
@@ -233,27 +233,13 @@
     </div>
   </div>
 </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-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
-        <h3 class="modal-title"><i class="bi bi-card-checklist" style="font-size:18px"></i> ID <span id="queue_id"></span></h3>
-      </div>
-      <div class="modal-body">
-        <textarea class="form-control" id="queue_msg_content" name="content" rows="40"></textarea>
-      </div>
-    </div>
-  </div>
-</div><!-- show queue item modal -->
 <!-- priv key modal -->
 <div class="modal fade" id="showDKIMprivKey" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title"><i class="bi bi-key-fill"></i> Private key</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <pre id="priv_key_pre"></pre>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/modals/footer.twig b/mailcow/src/mailcow-dockerized/data/web/templates/modals/footer.twig
index 8e5cb17..ab5630d 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/modals/footer.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/modals/footer.twig
@@ -3,69 +3,69 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.tfa.yubi_otp }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form role="form" method="post">
-          <div class="form-group">
+          <div class="mb-4">
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id }}" autocomplete="off" required>
           </div>
           <hr>
-          <p class="help-block">{{ lang.tfa.api_register|format(ui_texts.main_name)|raw }}</p>
-          <div class="form-group">
+          <p class="text-muted">{{ lang.tfa.api_register|format(ui_texts.main_name)|raw }}</p>
+          <div class="mb-2">
             <input type="text" class="form-control" name="yubico_id" placeholder="Yubico API ID" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div class="mb-4">
             <input type="text" class="form-control" name="yubico_key" placeholder="Yubico API Key" autocomplete="off" required>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="mb-4">
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div class="mb-4">
             <div class="input-group">
-              <span class="input-group-addon" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
+              <span class="input-group-text" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
               <input type="text" name="otp_token" class="form-control" placeholder="Touch Yubikey" aria-describedby="yubi-addon">
               <input type="hidden" name="tfa_method" value="yubi_otp">
             </div>
           </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" type="submit" name="set_tfa">{{ lang.user.save_changes }}</button>
+          <button class="btn btn-sm d-block d-sm-inline btn-success" type="submit" name="set_tfa">{{ lang.user.save_changes }}</button>
         </form>
       </div>
     </div>
   </div>
 </div>
 
-<div class="modal fade" id="U2FModal" tabindex="-1" role="dialog" aria-labelledby="U2FModalLabel">
+<div class="modal fade" id="WebAuthnModal" tabindex="-1" role="dialog" aria-labelledby="WebAuthnModalLabel">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
-        <h3 class="modal-title">{{ lang.tfa.u2f }}</h3>
+        <h3 class="modal-title">{{ lang.tfa.webauthn }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
-        <form role="form" method="post" id="u2f_reg_form">
-          <div class="form-group">
+        <form class="d-flex flex-column" role="form" method="post" id="webauthn_reg_form">
+          <div class="mb-2">
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id }}" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div class="mb-4">
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
           <hr>
-          <center>
-            <div style="cursor:pointer" id="start_u2f_register">
+          <div class="text-center">
+            <div style="cursor:pointer" id="start_webauthn_register">
               <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
                 <path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z"></path>
               </svg>
-              <p>{{ lang.tfa.start_u2f_validation }}</p>
-              <hr>
+              <p>{{ lang.tfa.start_webauthn_validation }}</p>
             </div>
-          </center>
-          <p id="u2f_status_reg"></p>
-          <div class="alert alert-danger" style="display:none" id="u2f_return_code"></div>
-          <input type="hidden" name="token" id="u2f_register_data"/>
-          <input type="hidden" name="tfa_method" value="u2f">
+          </div>
+          <hr>
+          <p id="webauthn_status_reg"></p>
+          <div class="alert alert-danger" style="display:none" id="webauthn_return_code"></div>
+          <input type="hidden" name="token" id="webauthn_register_data"/>
+          <input type="hidden" name="tfa_method" value="webauthn">
           <input type="hidden" name="set_tfa"/><br/>
         </form>
       </div>
@@ -77,32 +77,32 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.tfa.totp }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form role="form" method="post">
-          <div class="form-group">
+          <div class="mb-2">
             <input type="text" class="form-control" name="key_id" placeholder="{{ lang.tfa.key_id_totp }}" autocomplete="off" required>
           </div>
-          <div class="form-group">
+          <div class="mb-4">
             <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
           </div>
           <hr>
           <input type="hidden" value="{{ totp_secret }}" name="totp_secret">
           <input type="hidden" name="tfa_method" value="totp">
-          <ol>
+          <ol class="mb-4">
             <li>
               <p>{{ lang.tfa.scan_qr_code }}</p>
               <img id="tfa-qr-img" data-totp-secret="{{ totp_secret }}" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-              <p class="help-block">{{ lang.tfa.enter_qr_code }}:<br />
+              <p class="text-muted">{{ lang.tfa.enter_qr_code }}:<br />
                 <code>{{ totp_secret }}</code>
               </p>
             </li>
             <li>
               <p>{{ lang.tfa.confirm_totp_token }}:</p>
               <p><input type="number" style="width:33%" class="form-control" name="totp_confirm_token" autocomplete="off" required></p>
-              <p><button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" type="submit" name="set_tfa">{{ lang.tfa.confirm }}</button></p>
+              <p><button class="btn btn-sm d-block d-sm-inline btn-success" type="submit" name="set_tfa">{{ lang.tfa.confirm }}</button></p>
             </li>
           </ol>
         </form>
@@ -115,78 +115,197 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.tfa.delete_tfa }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form role="form" method="post">
           <div class="input-group">
-            <input type="password" class="form-control input-xs-lg" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
-            <span class="input-group-btn">
-              <input type="hidden" name="tfa_method" value="none">
-              <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" type="submit" name="set_tfa">{{ lang.tfa.delete_tfa|replace({" ": "&nbsp;"})|raw }}</button>
-            </span>
+            <input type="password" class="form-control" name="confirm_password" placeholder="{{ lang.user.password_now }}" autocomplete="off" required>
+            <button class="btn btn-sm d-block d-sm-inline btn-danger" type="submit" name="set_tfa">{{ lang.tfa.delete_tfa|replace({" ": "&nbsp;"})|raw }}</button>
           </div>
+          <input type="hidden" name="tfa_method" value="none">
         </form>
       </div>
     </div>
   </div>
 </div>
 {% endif %}
-{% if pending_tfa_method %}
+{% if pending_tfa_methods %}
 <div class="modal fade" id="ConfirmTFAModal" tabindex="-1" role="dialog" aria-labelledby="ConfirmTFAModalLabel">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
-        <h3 class="modal-title">{{ lang.tfa[pending_tfa_method] }}</h3>
+        <h3 class="modal-title">{{ lang.tfa.tfa }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
-      <div class="modal-body">
-        {% if pending_tfa_method == 'yubi_otp' %}
-        <form role="form" method="post">
-          <div class="form-group">
-            <div class="input-group">
-              <span class="input-group-addon" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
-              <input type="text" name="token" class="form-control" autocomplete="off" placeholder="Touch Yubikey" aria-describedby="yubi-addon">
-              <input type="hidden" name="tfa_method" value="yubi_otp">
+      
+      
+      <div class="modal-body p-0 pt-4">
+        <ul class="nav nav-tabs px-1" id="tabContent">
+            {% if pending_tfa_authmechs["webauthn"] is defined and pending_tfa_authmechs["u2f"] is not defined %}
+              <li class="nav-item"><a class="nav-link active" href="#tfa_tab_webauthn" data-bs-toggle="tab" id="pending_tfa_tab_webauthn"><i class="bi bi-fingerprint"></i> WebAuthn</a></li>
+            {% endif %}
+
+            {% if pending_tfa_authmechs["yubi_otp"] is defined and pending_tfa_authmechs["u2f"] is not defined %}
+              <li class="nav-item">
+                <a class="nav-link {% if pending_tfa_authmechs["yubi_otp"] %}active{% endif %}" href="#tfa_tab_yubi_otp" data-bs-toggle="tab" id="pending_tfa_tab_yubi_otp"><i class="bi bi-usb-drive"></i> Yubi OTP</a>
+              </li>
+            {% endif %}
+
+            {% if pending_tfa_authmechs["totp"] is defined and pending_tfa_authmechs["u2f"] is not defined %}
+              <li class="nav-item">
+                <a class="nav-link {% if pending_tfa_authmechs["totp"] %}active{% endif %}" href="#tfa_tab_totp" data-bs-toggle="tab" id="pending_tfa_tab_totp"><i class="bi bi-clock-history"></i> Time based OTP</a>
+              </li>
+            {% endif %}
+
+            <!-- <li class="nav-item"><a class="nav-link" href="#tfa_tab_hotp" data-bs-toggle="tab">HOTP</a></li> -->
+            {% if pending_tfa_authmechs["u2f"] is defined %}
+              <li class="nav-item"><a class="nav-link active" href="#tfa_tab_u2f" data-bs-toggle="tab"><i class="bi bi-x-octagon"></i> U2F</a></li>
+            {% endif %}
+        </ul>
+
+        <div class="tab-content">
+          {% if pending_tfa_authmechs["webauthn"] is defined and pending_tfa_authmechs["u2f"] is not defined %}
+            <div role="tabpanel" class="tab-pane active" id="tfa_tab_webauthn">
+              <div class="card border-0" style="margin-bottom: 0px;">
+                  <div class="card-body">
+                    <form role="form" method="post" id="webauthn_auth_form">
+                      <legend class="mt-2 mb-2">
+                          <i class="bi bi-shield-fill-check"></i>
+                          Authenticators
+                          <hr />
+                      </legend>
+                      <div class="list-group">
+                        {% for authenticator in pending_tfa_methods %}
+                          {% if authenticator["authmech"] == "webauthn" %}
+                            <a href="#" class="list-group-item webauthn-authenticator-selection">
+                              <i class="bi bi-key-fill" style="margin-right: 5px"></i>
+                              <span>{{ authenticator["key_id"] }}</span>
+                              <input type="hidden" value="{{ authenticator["id"] }}" /><br/>
+                            </a>
+                          {% endif %}
+                        {% endfor %}
+                      </div>
+                      <div class="collapse pending-tfa-collapse" id="collapseWebAuthnTFA">
+                        <div class="row mt-4 mb-4">
+                          <div class="col-12">
+                            <div class="mt-4 d-flex align-items-center" id="webauthn_status_auth">
+                              <div class="spinner-border me-2" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                              </div>
+                              {{ lang.tfa.init_webauthn }}
+                            </div>
+                            <div class="mt-4 alert alert-danger" style="display:none" id="webauthn_return_code"></div>
+                          </div>
+                        </div>
+                      </div>
+                      <input type="hidden" name="token" id="webauthn_auth_data"/>
+                      <input type="hidden" name="tfa_method" value="webauthn">
+                      <input type="hidden" name="verify_tfa_login"/>
+                      <input type="hidden" name="id" id="webauthn_selected_id" /><br/>
+                    </form>
+                  </div>
+              </div>
             </div>
-          </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
-        </form>
-        {% endif %}
-        {% if pending_tfa_method == 'u2f' %}
-        <form role="form" method="post" id="u2f_auth_form">
-          <center>
-            <div id="start_u2f_confirmation">
-              <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
-                <path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z"></path>
-              </svg>
-              <p>{{ lang.tfa.start_u2f_validation }}</p>
-              <hr>
+          {% endif %}
+          {% if pending_tfa_authmechs["yubi_otp"] is defined and pending_tfa_authmechs["u2f"] is not defined %}
+            <div role="tabpanel" class="tab-pane {% if pending_tfa_authmechs["yubi_otp"] %}active{% endif %}" id="tfa_tab_yubi_otp">
+              <div class="card border-0" style="margin-bottom: 0px;">
+                  <div class="card-body">
+                    <form role="form" method="post">
+                      <legend class="mt-2 mb-2">
+                          <i class="bi bi-shield-fill-check"></i>
+                          Authenticate
+                          <hr />
+                      </legend>
+                      <div class="collapse show pending-tfa-collapse" id="collapseYubiTFA">
+                        <div class="row mt-4 mb-4">
+                          <div class="col-12">
+                            <div class="input-group mt-4">
+                              <span class="input-group-text" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
+                              <input type="text" name="token" class="form-control" autocomplete="off" placeholder="Touch Yubikey" aria-describedby="yubi-addon">
+                              <input type="hidden" name="tfa_method" value="yubi_otp">
+                              <input type="hidden" name="id" id="yubi_selected_id" />
+                            </div>
+                          </div>
+                        </div>
+                        <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
+                      </div>
+                    </form>
+                  </div>
+              </div>
             </div>
-          </center>
-          <p id="u2f_status_auth"></p>
-          <div class="alert alert-danger" style="display:none" id="u2f_return_code"></div>
-          <input type="hidden" name="token" id="u2f_auth_data"/>
-          <input type="hidden" name="tfa_method" value="u2f">
-          <input type="hidden" name="verify_tfa_login"/><br/>
-        </form>
-        {% endif %}
-        {% if pending_tfa_method == 'totp' %}
-        <form role="form" method="post">
-          <div class="form-group">
-            <div class="input-group">
-              <span class="input-group-addon" id="tfa-addon"><i class="bi bi-shield-lock-fill"></i></span>
-              <input type="number" min="000000" max="999999" name="token" class="form-control" placeholder="123456" autocomplete="one-time-code" aria-describedby="tfa-addon">
-              <input type="hidden" name="tfa_method" value="totp">
+          {% endif %}
+          {% if pending_tfa_authmechs["totp"] is defined and pending_tfa_authmechs["u2f"] is not defined %}
+            <div role="tabpanel" class="tab-pane {% if pending_tfa_authmechs["totp"] %}active{% endif %}" id="tfa_tab_totp">
+              <div class="card border-0" style="margin-bottom: 0px;">
+                  <div class="card-body">
+                    <form role="form" method="post">        
+                      <legend class="mt-2 mb-2">
+                          <i class="bi bi-shield-fill-check"></i>
+                          Authenticators
+                          <hr />
+                      </legend>
+                      <div class="list-group">
+                        {% for authenticator in pending_tfa_methods %}
+                          {% if authenticator["authmech"] == "totp" %}
+                            <a href="#" class="list-group-item totp-authenticator-selection">
+                              <i class="bi bi-key-fill" style="margin-right: 5px"></i>
+                              <span>{{ authenticator["key_id"] }}</span>
+                              <input type="hidden" value="{{ authenticator["id"] }}" />
+                            </a>
+                          {% endif %}
+                        {% endfor %}
+                      </div>
+                      <div class="collapse pending-tfa-collapse" id="collapseTotpTFA">
+                        <div class="row mt-4 mb-4">
+                          <div class="col-12">
+                            <div class="input-group mt-4">
+                              <span class="input-group-text" id="tfa-addon"><i class="bi bi-shield-lock-fill"></i></span>
+                              <input type="number" min="000000" max="999999" name="token" class="form-control" placeholder="123456" autocomplete="one-time-code" aria-describedby="tfa-addon">
+                              <input type="hidden" name="tfa_method" value="totp">
+                              <input type="hidden" name="id" id="totp_selected_id" /><br/>
+                            </div>
+                            <button class="mt-4 btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
+                          </div>
+                        </div>
+                      </div>
+                    </form>
+                  </div>
+              </div>
             </div>
-          </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
-        </form>
-        {% endif %}
-        {% if pending_tfa_method == 'hotp' %}
-        <div class="empty"></div>
-        {% endif %}
+          {% endif %}
+            <!--
+            <div role="tabpanel" class="tab-pane" id="tfa_tab_hotp">
+              <div class="card" style="margin-bottom: 0px;">
+                  <div class="card-body">
+                      <div class="empty"></div>
+                  </div>
+              </div>
+            </div>
+            -->
+          {% if pending_tfa_authmechs["u2f"] is defined %}
+            <div role="tabpanel" class="tab-pane active" id="tfa_tab_u2f">
+              <div class="card border-0" style="margin-bottom: 0px;">
+                  <div class="card-body">
+                    {# leave this here to inform users that u2f is deprecated #}
+                    <form role="form" method="post" id="u2f_auth_form">
+                      <div>
+                        <p>{{ lang.tfa.u2f_deprecated }}</p>
+                        <p><b>{{ lang.tfa.u2f_deprecated_important }}</b></p>
+                        <input type="hidden" name="token" value="destroy" />
+                        <input type="hidden" name="tfa_method" value="u2f">
+                        <input type="hidden" name="verify_tfa_login"/><br/>
+                        <button type="submit" class="btn btn-xs-lg btn-success" value="Login">{{ lang.login.login }}</button>
+                      </div>
+                    </form>
+                  </div>
+              </div>
+            </div>
+          {% endif %}
+        </div>
+
       </div>
     </div>
   </div>
@@ -197,13 +316,13 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h4 class="modal-title">{{ lang.footer.restart_container }} (<code id="containerName"></code>)</h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <p>{{ lang.footer.restart_container_info|raw }}</p>
         <hr>
-        <button class="btn btn-md visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-primary" id="triggerRestartContainer">{{ lang.footer.restart_now }}</button>
+        <button class="btn btn-md d-block d-sm-inline btn-primary" id="triggerRestartContainer">{{ lang.footer.restart_now }}</button>
         <br><br>
         <div id="statusTriggerRestartContainer"></div>
       </div>
@@ -215,17 +334,32 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.footer.confirm_delete }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <p id="DeleteText">{{ lang.footer.delete_these_items }}</p>
         <ul id="ItemsToDelete"></ul>
         <hr>
-        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" id="IsConfirmed">{{ lang.footer.delete_now }}</button>
-        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="isCanceled">{{ lang.footer.cancel }}</button>
-        <div class="clearfix visible-xs"></div>
+        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-danger" id="IsConfirmed">{{ lang.footer.delete_now }}</button>
+        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="isCanceled">{{ lang.footer.cancel }}</button>
       </div>
     </div>
   </div>
 </div>
+<!-- version modal -->
+<div class="modal fade" id="showVersionModal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"></h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body d-flex flex-column mt-2 p-4">
+        <div class="spinner-border mx-auto" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div><!-- version modal -->
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/modals/mailbox.twig b/mailcow/src/mailcow-dockerized/data/web/templates/modals/mailbox.twig
index 279e4c9..25185de 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/modals/mailbox.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/modals/mailbox.twig
@@ -1,21 +1,25 @@
 <!-- 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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.mailbox.add_mailbox }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" data-id="add_mailbox" role="form" autocomplete="off">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="local_part">{{ lang.add.mailbox_username }}</label>
+          <input type="hidden" value="0" name="force_pw_update">
+          <input type="hidden" value="0" name="sogo_access">
+          <input type="hidden" value="0" name="protocol_access">
+
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="local_part">{{ lang.add.mailbox_username }}</label>
             <div class="col-sm-10">
               <input type="text" pattern="[A-Za-z0-9\.!#$%&'*+/=?^_`{|}~-]+" autocorrect="off" autocapitalize="none" class="form-control" name="local_part" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="domain">{{ lang.add.domain }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" data-live-search="true" id="addSelectDomain" name="domain" required>
                 {% for domain in domains %}
@@ -24,47 +28,174 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="name">{{ lang.add.full_name }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="name">{{ lang.add.full_name }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="name">
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="addInputQuota">{{ lang.add.quota_mb }}
-              <br /><span id="quotaBadge" class="badge">max. - MiB</span>
-            </label>
-            <div class="col-sm-10">
-              <input type="text" class="form-control" name="quota" min="0" max="" id="addInputQuota" disabled value="{{ lang.add.select_domain }}" required>
-              <small class="help-block">0 = ∞</small>
-              <div class="label label-warning addInputQuotaExhausted" style="display:none;">{{ lang.warning.quota_exceeded_scope }}</div>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="password">{{ lang.add.password }} (<a href="#" class="generate_password">{{ lang.add.generate }}</a>)</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="password">{{ lang.add.password }} (<a href="#" class="generate_password">{{ lang.add.generate }}</a>)</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="password2">{{ lang.add.password_repeat }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="password2">{{ lang.add.password_repeat }}</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" class="form-control" name="password2" placeholder="" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <select name="active" class="form-control">
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="description">{{ lang.mailbox.template }}</label>
+            <div class="col-sm-10">
+              <select data-live-search="true" id="mailbox_templates" class="form-control" title="{{ lang.mailbox.template }}">
+              </select>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.tags }}</label>
+            <div class="col-sm-10">
+              <div class="form-control tag-box">
+                <input type="text" class="tag-input" id="addMailbox_tags">
+                <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+                <input type="hidden" value="" name="tags" class="tag-values" />
+              </div>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="addInputQuota">{{ lang.add.quota_mb }}
+              <br /><span id="quotaBadge" class="badge bg-primary">max. - MiB</span>
+            </label>
+            <div class="col-sm-10">
+              <input type="text" class="form-control" name="quota" min="0" max="" id="addInputQuota" disabled value="{{ lang.add.select_domain }}" required>
+              <small class="text-muted">0 = ∞</small>
+              <div class="badge fs-5 bg-warning addInputQuotaExhausted" style="display:none;">{{ lang.warning.quota_exceeded_scope }}</div>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.user.quarantine_notification }}</label>
+            <div class="col-sm-10">
+              <div class="btn-group">
+                <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_never" autocomplete="off" value="never">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_never">{{ lang.user.never }}</label>
+
+                <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_hourly" autocomplete="off" value="hourly">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+
+                <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_daily" autocomplete="off" value="daily">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
+
+                <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_weekly" autocomplete="off" value="weekly">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+              </div>
+              <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.user.quarantine_category }}</label>
+            <div class="col-sm-10">
+              <div class="btn-group">
+                <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
+                
+                <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+                
+                <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
+              </div>
+              <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="tls_enforce_in">{{ lang.user.tls_policy }}</label>
+            <div class="col-sm-10">
+              <div class="btn-group">
+                <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+                
+                <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+              </div>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
+            <div class="col-sm-10">
+              <select name="protocol_access" id="protocol_access" multiple class="form-control">
+                <option value="imap">IMAP</option>
+                <option value="pop3">POP3</option>
+                <option value="smtp">SMTP</option>
+                <option value="sieve">Sieve</option>
+              </select>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">ACL</label>
+            <div class="col-sm-10">
+              <select id="user_acl" name="acl" multiple class="form-control">
+                  <option value="spam_alias" selected>{{ lang.acl["spam_alias"] }}</option>
+                  <option value="tls_policy" selected>{{ lang.acl["tls_policy"] }}</option>
+                  <option value="spam_score" selected>{{ lang.acl["spam_score"] }}</option>
+                  <option value="spam_policy" selected>{{ lang.acl["spam_policy"] }}</option>
+                  <option value="delimiter_action" selected>{{ lang.acl["delimiter_action"] }}</option>
+                  <option value="syncjobs">{{ lang.acl["syncjobs"] }}</option>
+                  <option value="eas_reset" selected>{{ lang.acl["eas_reset"] }}</option>
+                  <option value="sogo_profile_reset">{{ lang.acl["sogo_profile_reset"] }}</option>
+                  <option value="pushover" selected>{{ lang.acl["pushover"] }}</option>
+                  <option value="quarantine" selected>{{ lang.acl["quarantine"] }}</option>
+                  <option value="quarantine_attachments" selected>{{ lang.acl["quarantine_attachments"] }}</option>
+                  <option value="quarantine_notification" selected>{{ lang.acl["quarantine_notification"] }}</option>
+                  <option value="quarantine_category" selected>{{ lang.acl["quarantine_category"] }}</option>
+                  <option value="app_passwds" selected>{{ lang.acl["app_passwds"] }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
+            <div class="col-sm-10">
+              <input name="rl_value" id="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+              <select name="rl_frame" id="rl_frame" class="form-control">
+                <option value="s">{{ lang.ratelimit.second }}</option>
+                <option value="m">{{ lang.ratelimit.minute }}</option>
+                <option value="h">{{ lang.ratelimit.hour }}</option>
+                <option value="d">{{ lang.ratelimit.day }}</option>
+              </select>
+              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
+              <select name="active" id="mbox_active" class="form-control">
                 <option value="1" selected>{{ lang.add.active }}</option>
                 <option value="2">{{ lang.add.disable_login }}</option>
                 <option value="0">{{ lang.add.inactive }}</option>
               </select>
             </div>
           </div>
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="force_pw_update" id="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
+                <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
+              </div>
+            </div>
+          </div>
+          {% if not skip_sogo %}
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="sogo_access" id="sogo_access"> {{ lang.edit.sogo_access }}</label>
+                <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
+              </div>
+            </div>
+          </div>
+          {% endif %}
           <hr>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_mailbox" data-api-url='add/mailbox' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_mailbox" data-api-url='add/mailbox' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -72,127 +203,314 @@
     </div>
   </div>
 </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">
+<!-- add mailbox template modal -->
+<div class="modal fade" id="addMailboxTemplateModal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
-        <h3 class="modal-title">{{ lang.mailbox.add_domain }}</h3>
+        <h3 class="modal-title">{{ lang.mailbox.add_template }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
-        <form class="form-horizontal" data-cached-form="true" data-id="add_domain" role="form">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
+        <form class="form-horizontal" data-id="addmailbox_template" role="form" method="post">
+          <input type="hidden" value="default" name="sender_acl">
+          <input type="hidden" value="0" name="force_pw_update">
+          <input type="hidden" value="0" name="sogo_access">
+          <input type="hidden" value="0" name="protocol_access">     
+
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="template">{{ lang.mailbox.template }}</label>
             <div class="col-sm-10">
-              <input type="text" autocorrect="off" autocapitalize="none" class="form-control" name="domain" required>
+              <div class="input-group mb-3">
+                <input type="text" name="template" class="form-control" aria-label="Text input with dropdown button" value="" />
+              </div>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.tags }}</label>
             <div class="col-sm-10">
-              <input type="text" class="form-control" name="description">
+              <div class="form-control tag-box">
+                <input type="text" class="tag-input" id="addMailbox_tags">
+                <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+                <input type="hidden" value="" name="tags" class="tag-values" />
+              </div>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="aliases">{{ lang.add.max_aliases }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="quota">{{ lang.edit.quota_mb }}</label>
             <div class="col-sm-10">
-              <input type="number" class="form-control" name="aliases" value="400" required>
+              <input type="number" name="quota" style="width:100%" min="0" value="" class="form-control">
+              <small class="text-muted">0 = ∞</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="mailboxes">{{ lang.add.max_mailboxes }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.user.quarantine_notification }}</label>
             <div class="col-sm-10">
-              <input type="number" class="form-control" name="mailboxes" value="10" required>
+              <div class="btn-group">
+                <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_never" autocomplete="off" value="never">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_never">{{ lang.user.never }}</label>
+
+                <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_hourly" autocomplete="off" value="hourly">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+
+                <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_daily" autocomplete="off" value="daily">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_daily">{{ lang.user.daily }}</label>
+
+                <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_weekly" autocomplete="off" value="weekly">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+              </div>
+              <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="defquota">{{ lang.add.mailbox_quota_def }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.user.quarantine_category }}</label>
             <div class="col-sm-10">
-              <input type="number" class="form-control" name="defquota" value="3072" required>
+              <div class="btn-group">
+                <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_reject" autocomplete="off" value="reject" >
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_reject">{{ lang.user.q_reject }}</label>
+                
+                <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_add_header" autocomplete="off" value="add_header">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+                
+                <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_all" autocomplete="off" value="all">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_all">{{ lang.user.q_all }}</label>
+              </div>
+              <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="maxquota">{{ lang.add.mailbox_quota_m }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="sender_acl">{{ lang.user.tls_policy }}</label>
             <div class="col-sm-10">
-              <input type="number" class="form-control" name="maxquota" value="10240" required>
+              <div class="btn-group">
+                <input type="checkbox" class="btn-check" name="tls_enforce_in" id="template_tls_enforce_in" autocomplete="off" value="1">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+                
+                <input type="checkbox" class="btn-check" name="tls_enforce_out" id="template_tls_enforce_out" autocomplete="off" value="1">
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+              </div>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="quota">{{ lang.add.domain_quota_m }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
             <div class="col-sm-10">
-              <input type="number" class="form-control" name="quota" value="10240" required>
+              <select name="protocol_access" multiple class="form-control">
+                <option value="imap" selected>IMAP</option>
+                <option value="pop3" selected>POP3</option>
+                <option value="smtp" selected>SMTP</option>
+                <option value="sieve" selected>Sieve</option>
+              </select>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">ACL</label>
+            <div class="col-sm-10">
+              <select id="template_user_acl" name="acl" size="10" multiple class="form-control">                  
+                <option value="spam_alias" selected>{{ lang.acl["spam_alias"] }}</option>
+                <option value="tls_policy" selected>{{ lang.acl["tls_policy"] }}</option>
+                <option value="spam_score" selected>{{ lang.acl["spam_score"] }}</option>
+                <option value="spam_policy" selected>{{ lang.acl["spam_policy"] }}</option>
+                <option value="delimiter_action" selected>{{ lang.acl["delimiter_action"] }}</option>
+                <option value="syncjobs">{{ lang.acl["syncjobs"] }}</option>
+                <option value="eas_reset" selected>{{ lang.acl["eas_reset"] }}</option>
+                <option value="sogo_profile_reset">{{ lang.acl["sogo_profile_reset"] }}</option>
+                <option value="pushover" selected>{{ lang.acl["pushover"] }}</option>
+                <option value="quarantine" selected>{{ lang.acl["quarantine"] }}</option>
+                <option value="quarantine_attachments" selected>{{ lang.acl["quarantine_attachments"] }}</option>
+                <option value="quarantine_notification" selected>{{ lang.acl["quarantine_notification"] }}</option>
+                <option value="quarantine_category" selected>{{ lang.acl["quarantine_category"] }}</option>
+                <option value="app_passwds" selected>{{ lang.acl["app_passwds"] }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
+            <div class="col-sm-10">
+              <input name="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+              <select name="rl_frame" class="form-control">
+                <option value="s">{{ lang.ratelimit.second }}</option>
+                <option value="m">{{ lang.ratelimit.minute }}</option>
+                <option value="h">{{ lang.ratelimit.hour }}</option>
+                <option value="d">{{ lang.ratelimit.day }}</option>
+              </select>
+              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+            </div>
+          </div>
+          <hr>
+          <div class="row my-2">
+            <div class="offset-sm-2 col-sm-10">
+              <select id="mbox_acitve" name="active" class="form-control">
+                <option value="1" selected>{{ lang.edit.active }}</option>
+                <option value="2">{{ lang.edit.disable_login }}</option>
+                <option value="0">{{ lang.edit.inactive }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
+                <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
+              </div>
             </div>
           </div>
           {% if not skip_sogo %}
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
-                <label><input type="checkbox" value="1" name="gal" checked> {{ lang.edit.gal }}</label>
-                <small class="help-block">{{ lang.edit.gal_info|raw }}</small>
+                <label><input type="checkbox" value="1" name="sogo_access"> {{ lang.edit.sogo_access }}</label>
+                <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
               </div>
             </div>
           </div>
           {% endif %}
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row my-2">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="addmailbox_template" data-api-url='add/mailbox/template' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div><!-- add mailbox template modal -->
+<!-- add domain modal -->
+<div class="modal fade" id="addDomainModal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title">{{ lang.mailbox.add_domain }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <form class="form-horizontal" data-cached-form="true" data-id="add_domain" role="form">
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="domain">{{ lang.add.domain }}</label>
+            <div class="col-sm-10">
+              <input type="text" autocorrect="off" autocapitalize="none" class="form-control" name="domain" required>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="description">{{ lang.add.description }}</label>
+            <div class="col-sm-10">
+              <input type="text" class="form-control" name="description">
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="description">{{ lang.mailbox.template }}</label>
+            <div class="col-sm-10">
+              <select data-live-search="true" id="domain_templates" class="form-control">
+              </select>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.tags }}</label>
+            <div class="col-sm-10">
+              <div class="form-control tag-box">
+                <input type="text" class="tag-input" id="addDomain_tags">
+                <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+                <input type="hidden" value="" name="tags" class="tag-values" />
+              </div>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="aliases">{{ lang.add.max_aliases }}</label>
+            <div class="col-sm-10">
+              <input type="number" id="addDomain_max_aliases" class="form-control" name="aliases" value="400" required>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="mailboxes">{{ lang.add.max_mailboxes }}</label>
+            <div class="col-sm-10">
+              <input type="number" id="addDomain_max_mailboxes" class="form-control" name="mailboxes" value="10" required>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="defquota">{{ lang.add.mailbox_quota_def }}</label>
+            <div class="col-sm-10">
+              <input type="number" id="addDomain_mailbox_quota_def" class="form-control" name="defquota" value="3072" required>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="maxquota">{{ lang.add.mailbox_quota_m }}</label>
+            <div class="col-sm-10">
+              <input type="number" id="addDomain_mailbox_quota_m" class="form-control" name="maxquota" value="10240" required>
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="quota">{{ lang.add.domain_quota_m }}</label>
+            <div class="col-sm-10">
+              <input type="number" id="addDomain_domain_quota_m" class="form-control" name="quota" value="10240" required>
+            </div>
+          </div>
+          {% if not skip_sogo %}
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" id="addDomain_gal" value="1" name="gal" checked> {{ lang.edit.gal }}</label>
+                <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
+              </div>
+            </div>
+          </div>
+          {% endif %}
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <div class="checkbox">
+                <label><input type="checkbox" id="addDomain_active" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
           <hr>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="rl_frame">{{ lang.acl.ratelimit }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-7">
-              <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+              <input name="rl_value" id="addDomain_rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
             </div>
             <div class="col-sm-3">
-              <select name="rl_frame" class="form-control">
+              <select name="rl_frame" id="addDomain_rl_frame" class="form-control">
               {% include 'mailbox/rl-frame.twig' %}
               </select>
             </div>
           </div>
           <hr>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
             <div class="col-sm-10">
               <input class="form-control" id="dkim_selector" name="dkim_selector" value="dkim">
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="key_size">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-default btn-sm" class="form-control" id="key_size" name="key_size">
-                <option data-subtext="bits">1024</option>
-                <option data-subtext="bits" selected>2048</option>
+              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+                <option data-subtext="bits" value="1024">1024</option>
+                <option data-subtext="bits" value="2048" selected>2048</option>
               </select>
             </div>
           </div>
           <hr>
-          <div class="form-group">
-            <label class="control-label col-sm-2">{{ lang.add.backup_mx_options }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.backup_mx_options }}</label>
             <div class="col-sm-10">
               <div class="checkbox">
-                <label><input type="checkbox" value="1" name="backupmx"> {{ lang.add.relay_domain }}</label>
+                <label><input type="checkbox" id="addDomain_relay_domain" value="1" name="backupmx"> {{ lang.add.relay_domain }}</label>
                 <br>
-                <label><input type="checkbox" value="1" name="relay_all_recipients"> {{ lang.add.relay_all }}</label>
+                <label><input type="checkbox" id="addDomain_relay_all" value="1" name="relay_all_recipients"> {{ lang.add.relay_all }}</label>
                 <p>{{ lang.add.relay_all_info|raw }}</p>
-                <label><input type="checkbox" value="1" name="relay_unknown_only"> {{ lang.add.relay_unknown_only }}</label>
+                <label><input type="checkbox" id="addDomain_relay_unknown_only" value="1" name="relay_unknown_only"> {{ lang.add.relay_unknown_only }}</label>
                 <br>
                 <p>{{ lang.add.relay_transport_info|raw }}</p>
               </div>
             </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 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='{}' 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"}' href="#">{{ lang.add.add_domain_restart }}</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='{"tags": []}' 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", "tags": []}' href="#">{{ lang.add.add_domain_restart }}</button>
               <div class="clearfix visible-xs"></div>
               {% else %}
-              <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='{}' href="#">{{ lang.add.add }}</button>
+              <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='{"tags": []}' href="#">{{ lang.add.add }}</button>
               {% endif %}
             </div>
           </div>
@@ -205,24 +523,156 @@
     </div>
   </div>
 </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">
+<!-- add domain template modal -->
+<div class="modal fade" id="addDomainTemplateModal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
+        <h3 class="modal-title">{{ lang.mailbox.add_template }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <form data-id="adddomain_template" class="form-horizontal" role="form" method="post">
+          {% if mailcow_cc_role == 'admin' %}
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="template">{{ lang.mailbox.template }}</label>
+            <div class="col-sm-10">
+              <div class="input-group mb-3">
+                <input type="text" name="template" class="form-control" aria-label="Text input with dropdown button" value="" />
+              </div>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.tags }}</label>
+            <div class="col-sm-10">
+              <div class="form-control tag-box">
+                <input type="text" class="tag-input">
+                <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+                <input type="hidden" value="" name="tags" class="tag-values" />
+              </div>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="max_num_aliases_for_domain">{{ lang.add.max_aliases }}</label>
+            <div class="col-sm-10">
+              <input type="number" class="form-control" name="max_num_aliases_for_domain" value="">
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="max_num_mboxes_for_domain">{{ lang.add.max_mailboxes }}</label>
+            <div class="col-sm-10">
+              <input type="number" class="form-control" name="max_num_mboxes_for_domain" value="">
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="def_quota_for_mbox">{{ lang.add.mailbox_quota_def }}</label>
+            <div class="col-sm-10">
+              <input type="number" class="form-control" name="def_quota_for_mbox" value="">
+            </div>
+          </div>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="max_quota_for_mbox">{{ lang.add.mailbox_quota_m }}</label>
+            <div class="col-sm-10">
+              <input type="number" class="form-control" name="max_quota_for_mbox" value="">
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="max_quota_for_domain">{{ lang.add.domain_quota_m }}</label>
+            <div class="col-sm-10">
+              <input type="number" class="form-control" name="max_quota_for_domain" value="">
+            </div>
+          </div>
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="gal" checked> {{ lang.add.gal }}</label>
+                <small class="text-muted">{{ lang.add.gal_info|raw }}</small>
+              </div>
+            </div>
+          </div>
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              </div>
+            </div>
+          </div>
+          <hr>
+          <div class="row">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.edit.ratelimit }}</label>
+            <div class="col-sm-7">
+              <input name="rl_value" type="number" value="" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+            </div>
+            <div class="col-sm-3">
+              <select name="rl_frame" class="form-control">
+                <option value="s">{{ lang.ratelimit.second }}</option>
+                <option value="m">{{ lang.ratelimit.minute }}</option>
+                <option value="h">{{ lang.ratelimit.hour }}</option>
+                <option value="d">{{ lang.ratelimit.day }}</option>
+              </select>
+            </div>
+          </div>
+          {% endif %}
+          <hr>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
+            <div class="col-sm-10">
+              <input class="form-control" id="dkim_selector" name="dkim_selector" value="dkim">
+            </div>
+          </div>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="key_size">{{ lang.admin.dkim_key_length }}</label>
+            <div class="col-sm-10">
+              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+                <option data-subtext="bits">1024</option>
+                <option data-subtext="bits" selected>2048</option>
+              </select>
+            </div>
+          </div>
+          <hr>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.edit.backup_mx_options }}</label>
+            <div class="col-sm-10">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="backupmx"> {{ lang.edit.relay_domain }}</label>
+                <br>
+                <label><input type="checkbox" value="1" name="relay_all_recipients"> {{ lang.edit.relay_all }}</label>
+                <p>{{ lang.edit.relay_all_info|raw }}</p>
+                <label><input type="checkbox" value="1" name="relay_unknown_only"> {{ lang.edit.relay_unknown_only }}</label>
+                <br>
+                <p>{{ lang.edit.relay_transport_info|raw }}</p>
+              </div>
+            </div>
+          </div>
+          <hr>
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="adddomain_template" data-item="{{ domain }}" data-api-url='add/domain/template' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div><!-- add domain template modal -->
+<!-- add resource modal -->
+<div class="modal fade" id="addResourceModal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
         <h3 class="modal-title">{{ lang.mailbox.add_resource }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_resource">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="description">{{ lang.add.description }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="description" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.domain }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="domain">{{ lang.add.domain }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="domain" title="{{ lang.add.select }}" required>
                 {% for domain in domains %}
@@ -231,8 +681,8 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="domain">{{ lang.add.kind }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="domain">{{ lang.add.kind }}</label>
             <div class="col-sm-10">
               <select name="kind" title="{{ lang.add.select }}" required>
                 <option value="location">Location</option>
@@ -241,8 +691,8 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end text-sm-end" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
             <div class="col-sm-10">
               <select name="multiple_bookings_select" id="multiple_bookings_select" title="{{ lang.add.select }}" required>
                 <option value="0">{{ lang.mailbox.booking_null }}</option>
@@ -256,16 +706,16 @@
               <input type="hidden" name="multiple_bookings" id="multiple_bookings">
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_resource" data-api-url='add/resource' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_resource" data-api-url='add/resource' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -275,24 +725,24 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.mailbox.add_alias }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_alias">
           <input type="hidden" value="0" name="active">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="address">{{ lang.add.alias_address }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="address">{{ lang.add.alias_address }}</label>
             <div class="col-sm-10">
               <textarea autocorrect="off" autocapitalize="none" class="form-control" rows="5" name="address" id="address" required></textarea>
               <p>{{ lang.add.alias_address_info|raw }}</p>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="goto">{{ lang.add.target_address }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="goto">{{ lang.add.target_address }}</label>
             <div class="col-sm-10">
               <textarea id="textarea_alias_goto" autocorrect="off" autocapitalize="none" class="form-control" rows="5" id="goto" name="goto" required></textarea>
               <p>{{ lang.add.target_address_info|raw }}</p>
@@ -310,20 +760,20 @@
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="sogo_visible" checked> {{ lang.edit.sogo_visible }}</label>
               </div>
-              <p class="help-block">{{ lang.edit.sogo_visible_info }}</p>
+              <p class="text-muted">{{ lang.edit.sogo_visible_info }}</p>
               {% endif %}
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_alias" data-api-url='add/alias' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_alias" data-api-url='add/alias' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -333,24 +783,24 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.mailbox.add_domain_alias }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_alias_domain">
           <input type="hidden" value="0" name="active">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="alias_domain">{{ lang.add.alias_domain }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="alias_domain">{{ lang.add.alias_domain }}</label>
             <div class="col-sm-10">
               <textarea autocorrect="off" autocapitalize="none" class="form-control" rows="5" name="alias_domain" id="alias_domain" required></textarea>
               <p>{{ lang.add.alias_domain_info|raw }}</p>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="target_domain">{{ lang.add.target_domain }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="target_domain">{{ lang.add.target_domain }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="target_domain" title="{{ lang.add.select }}" required>
                 {% for domain in domains %}
@@ -359,16 +809,16 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
           <hr>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="rl_frame">{{ lang.acl.ratelimit }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-7">
               <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
             </div>
@@ -379,25 +829,25 @@
             </div>
           </div>
           <hr>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="dkim_selector2">{{ lang.admin.dkim_domains_selector }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="dkim_selector2">{{ lang.admin.dkim_domains_selector }}</label>
             <div class="col-sm-10">
               <input class="form-control" id="dkim_selector2" name="dkim_selector" value="dkim">
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="key_size2">{{ lang.admin.dkim_key_length }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="key_size2">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-default btn-sm" class="form-control" id="key_size2" name="key_size">
+              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size2" name="key_size">
                 <option data-subtext="bits">1024</option>
                 <option data-subtext="bits" selected>2048</option>
               </select>
             </div>
           </div>
           <hr>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_alias_domain" data-api-url='add/alias-domain' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_alias_domain" data-api-url='add/alias-domain' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -407,52 +857,52 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.add.syncjob }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
-        <p class="help-block">{{ lang.add.syncjob_hint }}</p>
-        <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_syncjob">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
+        <p class="text-muted">{{ lang.add.syncjob_hint }}</p>
+        <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_syncjob">
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="username">{{ lang.add.username }}</label>
             <div class="col-sm-10">
-              <select data-live-search="true" name="username" required>
+              <select data-live-search="true" name="username" title="{{ lang.add.select }}" required>
                 {% for mailbox in mailboxes %}
                   <option>{{ mailbox }}</option>
                 {% endfor %}
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="host1">{{ lang.add.hostname }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="host1">{{ lang.add.hostname }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="host1" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="port1">{{ lang.add.port }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="port1">{{ lang.add.port }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="port1" min="1" max="65535" value="143" required>
-              <small class="help-block">1-65535</small>
+              <small class="text-muted">1-65535</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="user1">{{ lang.add.username }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="user1">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="user1" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="password1">{{ lang.add.password }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="password1">{{ lang.add.password }}</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" name="password1" required>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="enc1">{{ lang.add.enc_method }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="enc1">{{ lang.add.enc_method }}</label>
             <div class="col-sm-10">
               <select name="enc1" title="{{ lang.add.select }}" required>
                 <option value="SSL" selected>SSL</option>
@@ -461,112 +911,112 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="mins_interval">{{ lang.add.mins_interval }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="mins_interval">{{ lang.add.mins_interval }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="20" required>
-              <small class="help-block">1-43800</small>
+              <small class="text-muted">1-43800</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="subfolder2" value="">
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="maxage">{{ lang.edit.maxage|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxage" min="0" max="32000" value="0">
-              <small class="help-block">0-32000</small>
+              <small class="text-muted">0-32000</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxbytespersecond" min="0" max="125000000" value="0">
-              <small class="help-block">0-125000000</small>
+              <small class="text-muted">0-125000000</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="timeout1">{{ lang.edit.timeout1 }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="timeout1">{{ lang.edit.timeout1 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout1" min="1" max="32000" value="600">
-              <small class="help-block">1-32000</small>
+              <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="timeout2">{{ lang.edit.timeout2 }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="timeout2">{{ lang.edit.timeout2 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout2" min="1" max="32000" value="600">
-              <small class="help-block">1-32000</small>
+              <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="exclude">{{ lang.add.exclude }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="exclude">{{ lang.add.exclude }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="exclude" value="(?i)spam|(?i)junk">
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="custom_params">{{ lang.add.custom_params }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="custom_params" placeholder="--dry --some-param=xy --other-param=yx">
-              <small class="help-block">{{ lang.add.custom_params_hint }}</small>
+              <small class="text-muted">{{ lang.add.custom_params_hint }}</small>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_syncjob" data-api-url='add/syncjob' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_syncjob" data-api-url='add/syncjob' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -576,16 +1026,16 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">Filter</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_filter">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="username">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <select data-live-search="true" name="username" required>
                 {% for mailbox in mailboxes %}
@@ -594,8 +1044,8 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="filter_type">{{ lang.add.sieve_type }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="filter_type">{{ lang.add.sieve_type }}</label>
             <div class="col-sm-10">
               <select id="addFilterType" name="filter_type" required>
                 <option value="prefilter">Prefilter</option>
@@ -603,31 +1053,30 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="script_desc">{{ lang.add.sieve_desc }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="script_desc">{{ lang.add.sieve_desc }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" id="script_desc" name="script_desc" required maxlength="255">
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="script_data">Script:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="script_data">Script:</label>
             <div class="col-sm-10">
               <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="20" name="script_data" required></textarea>
+              <p class="text-muted">{{ lang.add.activate_filter_warn }}</p>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <p class="help-block">{{ lang.add.activate_filter_warn }}</p>
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10 add_filter_btns btn-group">
-              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default validate_sieve" href="#">{{ lang.add.validate }}</button>
-              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success add_sieve_script" data-action="add_item" data-id="add_filter" data-api-url='add/filter' data-api-attr='{}' href="#" disabled>{{ lang.admin.add }}</button>
-              <div class="clearfix visible-xs"></div>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10 add_filter_btns btn-group">
+              <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
+              <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-success add_sieve_script" data-action="add_item" data-id="add_filter" data-api-url='add/filter' data-api-attr='{}' href="#" disabled>{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -639,24 +1088,23 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.mailbox.bcc_maps }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_bcc">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="local_dest">{{ lang.mailbox.bcc_local_dest }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="local_dest">{{ lang.mailbox.bcc_local_dest }}</label>
             <div class="col-sm-10">
               <select id="bcc-local-dest" data-live-search="true" data-size="20" name="local_dest" required>
-                <option selected>{{ lang.footer.loading }}</option>
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="type">{{ lang.mailbox.bcc_map_type }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="type">{{ lang.mailbox.bcc_map_type }}</label>
             <div class="col-sm-10">
               <select name="type" required>
                 <option value="sender">{{ lang.mailbox.bcc_sender_map }}</option>
@@ -664,23 +1112,23 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="bcc_dest">
               <small>{{ lang.add.bcc_dest_format|raw }}</small>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_bcc" data-api-url='add/bcc' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_bcc" data-api-url='add/bcc' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -690,38 +1138,38 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.mailbox.recipient_maps }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_recipient_map">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="recipient_map_old">{{ lang.mailbox.recipient_map_old }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="recipient_map_old">{{ lang.mailbox.recipient_map_old }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="recipient_map_old">
               <small>{{ lang.mailbox.recipient_map_old_info }}</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="recipient_map_new">
               <small>{{ lang.mailbox.recipient_map_new_info }}</small>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_recipient_map" data-api-url='add/recipient_map' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_recipient_map" data-api-url='add/recipient_map' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -731,23 +1179,23 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.mailbox.tls_policy_maps }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_tls_policy_map">
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="dest">
               <small>{{ lang.mailbox.tls_map_dest_info }}</small>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
+          <div class="row mb-2">
+            <label class="control-label col-sm-2 text-sm-end" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" name="policy" required>
                 <option value="none">none</option>
@@ -761,23 +1209,23 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <label class="control-label col-sm-2" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-2 text-sm-end" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="parameters">
               <small>{{ lang.mailbox.tls_map_parameters_info }}</small>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_tls_policy_map" data-api-url='add/tls-policy-map' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_tls_policy_map" data-api-url='add/tls-policy-map' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -787,11 +1235,11 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">Log</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <textarea class="form-control" rows="20" id="logText" spellcheck="false"></textarea>
@@ -801,11 +1249,11 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.diagnostics.dns_records }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <p>{{ lang.diagnostics.dns_records_24hours }}</p>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/modals/quarantine.twig b/mailcow/src/mailcow-dockerized/data/web/templates/modals/quarantine.twig
index aed4b84..3ccefa5 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/modals/quarantine.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/modals/quarantine.twig
@@ -1,65 +1,65 @@
 <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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title"><i class="bi bi-info-circle-fill"></i> {{ lang.quarantine.qitem }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <div id="qid_error" style="display:none" class="alert alert-danger"></div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_symbols"><h4>{{ lang.quarantine.rspamd_result }}:</h4></label>
           <p>{{ lang.quarantine.spam_score }}: <span id="qid_detail_score"></span></p>
           <hr>
           <p id="qid_detail_symbols"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_subj"><h4>{{ lang.quarantine.subj }}:</h4></label>
           <p id="qid_detail_subj"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_recipients"><h4>{{ lang.quarantine.recipients }}:</h4></label>
           <p id="qid_detail_recipients"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_hfrom"><h4>{{ lang.quarantine.sender_header }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_hfrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_efrom"><h4>{{ lang.quarantine.sender }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_efrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_fuzzy"><h4>Fuzzy Hashes:</h4></label>
           <p id="qid_detail_fuzzy"></p>
         </div>
-        <div class="form-group" id="qTextPlain">
+        <div id="qTextPlain">
           <label for="qid_detail_text"><h4>{{ lang.quarantine.text_plain_content }}:</h4></label>
           <pre id="qid_detail_text"></pre>
         </div>
-        <div class="form-group" id="qTextHtml">
+        <div id="qTextHtml">
           <label for="qid_detail_text_from_html"><h4>{{ lang.quarantine.text_from_html_content }}:</h4></label>
           <pre id="qid_detail_text_from_html"></pre>
         </div>
         {% if acl.quarantine_attachments == 1 %}
-        <div class="form-group">
+        <div>
           <label for="qid_detail_atts"><h4>{{ lang.quarantine.atts }}:</h4></label>
           <div id="qid_detail_atts">-</div>
         </div>
         {% endif %}
         <div class="btn-group dropup" data-acl="{{ acl.quarantine }}">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.quarantine.quick_actions }} <span class="caret"></span></a>
+          <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.quarantine.quick_actions }}</a>
           <ul class="dropdown-menu">
-            <li><a data-action="edit_selected" data-id="qitems_single" data-item="" data-api-url='edit/qitem' data-api-attr='{"action":"release"}' href="#">{{ lang.quarantine.deliver_inbox }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="edit_selected" data-id="qitems_single" data-item="" data-api-url='edit/qitem' data-api-attr='{"action":"learnspam"}' href="#">{{ lang.quarantine.learn_spam_delete }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-id="qitems_single" data-item="" id="quick_download_link" href="#">{{ lang.quarantine.download_eml }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-id="qitems_single" data-item="" id="quick_release_link" href="#">{{ lang.quarantine.quick_release_link }}</a></li>
-            <li><a data-id="qitems_single" data-item="" id="quick_delete_link" href="#">{{ lang.quarantine.quick_delete_link }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="delete_selected" data-id="qitems_single" data-item="" data-api-url='delete/qitem' href="#">{{ lang.quarantine.remove }}</a></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems_single" data-item="" data-api-url='edit/qitem' data-api-attr='{"action":"release"}' href="#">{{ lang.quarantine.deliver_inbox }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems_single" data-item="" data-api-url='edit/qitem' data-api-attr='{"action":"learnspam"}' href="#">{{ lang.quarantine.learn_spam_delete }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-id="qitems_single" data-item="" id="quick_download_link" href="#">{{ lang.quarantine.download_eml }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-id="qitems_single" data-item="" id="quick_release_link" href="#">{{ lang.quarantine.quick_release_link }}</a></li>
+            <li><a class="dropdown-item" data-id="qitems_single" data-item="" id="quick_delete_link" href="#">{{ lang.quarantine.quick_delete_link }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-action="delete_selected" data-id="qitems_single" data-item="" data-api-url='delete/qitem' href="#">{{ lang.quarantine.remove }}</a></li>
           </ul>
         </div>
       </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/modals/queue.twig b/mailcow/src/mailcow-dockerized/data/web/templates/modals/queue.twig
new file mode 100644
index 0000000..68fe912
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/modals/queue.twig
@@ -0,0 +1,14 @@
+<!-- show queue item modal -->
+<div class="modal fade" id="showQueuedMsg" tabindex="-1" role="dialog" aria-hidden="true">
+  <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>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <textarea class="form-control" id="queue_msg_content" name="content" rows="40"></textarea>
+      </div>
+    </div>
+  </div>
+</div><!-- show queue item modal -->
\ No newline at end of file
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/modals/user.twig b/mailcow/src/mailcow-dockerized/data/web/templates/modals/user.twig
index 97abb0a..8c96397 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/modals/user.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/modals/user.twig
@@ -3,22 +3,22 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.fido2.set_fn }}</h3>
-        <p class="help-block" style="word-break:break-all" id="fido2_subject_desc" data-fido2-subject=""></p>
+        <p class="text-muted" style="word-break:break-all" id="fido2_subject_desc" data-fido2-subject=""></p>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="fido2ChangeFn" role="form" method="post" autocomplete="off">
           <input type="hidden" class="form-control" name="fido2_cid" id="fido2_cid">
-          <div class="form-group">
-            <label class="control-label col-sm-4" for="fido2_fn">{{ lang.fido2.fn }}:</label>
+          <div class="row mb-4">
+            <label class="control-label col-sm-4 text-end" for="fido2_fn">{{ lang.fido2.fn }}:</label>
             <div class="col-sm-8">
               <input type="text" class="form-control" name="fido2_fn">
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-4 col-sm-8">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="fido2ChangeFn" data-item="null" data-api-url='edit/fido2-fn' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+          <div class="row">
+            <div class="offset-sm-4 col-sm-8">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="fido2ChangeFn" data-item="null" data-api-url='edit/fido2-fn' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
             </div>
           </div>
         </form>
@@ -28,41 +28,41 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.add.syncjob }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <p>{{ lang.add.syncjob_hint }}</p>
         <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_syncjob">
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="host1">{{ lang.add.hostname }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="host1" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="port1">{{ lang.add.port }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="port1" min="1" max="65535" value="143" required>
-              <small class="help-block">1-65535</small>
+              <small class="text-muted">1-65535</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="user1">{{ lang.add.username }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="user1" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="password1">{{ lang.add.password }}</label>
             <div class="col-sm-10">
               <input type="password" class="form-control" name="password1" data-hibp="true" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="enc1">{{ lang.add.enc_method }}</label>
             <div class="col-sm-10">
               <select name="enc1" title="{{ lang.add.select }}" required>
@@ -72,111 +72,111 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="mins_interval">{{ lang.add.mins_interval }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="20" required>
-              <small class="help-block">1-43800</small>
+              <small class="text-muted">1-43800</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="subfolder2" value="">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxage" min="0" max="32000" value="0">
-              <small class="help-block">0-32000</small>
+              <small class="text-muted">0-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="maxbytespersecond" min="0" max="125000000" value="0">
-              <small class="help-block">0-125000000</small>
+              <small class="text-muted">0-125000000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="timeout1">{{ lang.edit.timeout1 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout1" min="1" max="32000" value="600">
-              <small class="help-block">1-32000</small>
+              <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="timeout2">{{ lang.edit.timeout2 }}</label>
             <div class="col-sm-10">
               <input type="number" class="form-control" name="timeout2" min="1" max="32000" value="600">
-              <small class="help-block">1-32000</small>
+              <small class="text-muted">1-32000</small>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="exclude">{{ lang.add.exclude }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="exclude" value="(?i)spam|(?i)junk">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="custom_params" placeholder="--delete2folders --otheroption">
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_syncjob" data-api-url='add/syncjob' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_syncjob" data-api-url='add/syncjob' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -189,31 +189,31 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.add.app_password }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="true" role="form" data-pwgen-length="32" data-id="add_apppasswd">
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="app_name">{{ lang.add.app_name }}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="app_name" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="app_passwd">{{ lang.user.password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="app_passwd" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="app_passwd2">{{ lang.user.password_repeat }}</label>
             <div class="col-sm-10">
               <input type="password" data-pwgen-field="true" class="form-control" name="app_passwd2" autocomplete="new-password" required>
-              <p class="help-block">{{ lang.user.new_password_description }}</p>
+              <p class="text-muted">{{ lang.user.new_password_description }}</p>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-4">
             <label class="control-label col-sm-2" for="protocols">{{ lang.add.app_passwd_protocols }}</label>
             <div class="col-sm-10">
               <select class="full-width-select" data-live-search="true" id="protocols" name="protocols" multiple>
@@ -226,16 +226,16 @@
               </select>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <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_apppasswd" data-api-url='add/app-passwd' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
+          <div class="row mb-2">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_apppasswd" data-api-url='add/app-passwd' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
             </div>
           </div>
         </form>
@@ -245,11 +245,11 @@
 </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">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">Log</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <textarea class="form-control textarea-code" rows="20" id="logText" spellcheck="false"></textarea>
@@ -259,40 +259,44 @@
 </div><!-- log modal -->
 <!-- pw change modal -->
 <div class="modal fade" id="pwChangeModal" tabindex="-1" role="dialog" aria-labelledby="pwChangeModalLabel">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.user.change_password }}</h3>
-        {% if number_of_app_passwords > 0 %}
-        <p>{{ lang.user.change_password_hint_app_passwords | replace({'{{number_of_app_passwords}}': number_of_app_passwords}) }}</p>
-        {% endif %}
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="pwchange" role="form" method="post" autocomplete="off">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass">{{ lang.user.new_password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
-            <div class="col-sm-5">
+            <div class="col-sm-9">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="user_new_pass" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass2">{{ lang.user.new_password_repeat }}</label>
-            <div class="col-sm-5">
+            <div class="col-sm-9">
               <input type="password" data-pwgen-field="true" class="form-control" name="user_new_pass2" autocomplete="new-password" required>
-              <p class="help-block">{{ lang.user.new_password_description }}</p>
+              <p class="text-muted">{{ lang.user.new_password_description }}</p>
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row mb-4">
             <label class="control-label col-sm-3" for="user_old_pass">{{ lang.user.password_now }}</label>
-            <div class="col-sm-5">
+            <div class="col-sm-9">
               <input type="password" class="form-control" name="user_old_pass" autocomplete="off" required>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-3 col-sm-9">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>
+          {% if number_of_app_passwords > 0 %}
+            <div class="row mb-2">
+              <div class="offset-sm-3 col-sm-9">
+                <small>{{ lang.user.change_password_hint_app_passwords | replace({'{{number_of_app_passwords}}': number_of_app_passwords}) }}</small>
+              </div>
+            </div>
+          {% endif %}
+          <div class="row">
+            <div class="offset-sm-3 col-sm-9">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>
             </div>
           </div>
         </form>
@@ -300,49 +304,49 @@
     </div>
   </div>
 </div><!-- pw change modal -->
-<!-- pw change modal -->
+<!-- temp alias modal -->
 <div class="modal fade" id="tempAliasModal" tabindex="-1" role="dialog" aria-labelledby="tempAliasModalLabel">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-body">
         <form class="form-horizontal" data-cached-form="false" data-id="pwchange" role="form" method="post" autocomplete="off">
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass">{{ lang.user.new_password }} (<a href="#" class="generate_password">{{ lang.user.generate }}</a>)</label>
             <div class="col-sm-5">
               <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="user_new_pass" autocomplete="new-password" required>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_new_pass2">{{ lang.user.new_password_repeat }}</label>
             <div class="col-sm-5">
               <input type="password" data-pwgen-field="true" class="form-control" name="user_new_pass2" autocomplete="new-password" required>
-              <p class="help-block">{{ lang.user.new_password_description }}</p>
+              <p class="text-muted">{{ lang.user.new_password_description }}</p>
             </div>
           </div>
           <hr>
-          <div class="form-group">
+          <div class="row">
             <label class="control-label col-sm-3" for="user_old_pass">{{ lang.user.password_now }}</label>
             <div class="col-sm-5">
               <input type="password" class="form-control" name="user_old_pass" autocomplete="off" required>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-3 col-sm-9">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>
+          <div class="row">
+            <div class="offset-sm-3 col-sm-9">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>
             </div>
           </div>
         </form>
       </div>
     </div>
   </div>
-</div><!-- pw change modal -->
+</div><!-- temp alias modal -->
 <!-- sieve filter modal -->
 <div class="modal fade" id="userFilterModal" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
         <h3 class="modal-title">{{ lang.user.active_sieve }}</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
       <div class="modal-body">
         <pre id="user_sieve_filter"></pre>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/oauth/authorize.twig b/mailcow/src/mailcow-dockerized/data/web/templates/oauth/authorize.twig
index 289eab3..4e29dcf 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/oauth/authorize.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/oauth/authorize.twig
@@ -1,9 +1,9 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<div class="panel panel-default">
-  <div class="panel-heading">{{ lang.oauth2.authorize_app }}</div>
-  <div class="panel-body">
+<div class="card">
+  <div class="card-header">{{ lang.oauth2.authorize_app }}</div>
+  <div class="card-body">
     {% if mailcow_cc_role == 'user' %}
     <p>{{ lang.oauth2.scope_ask_permission }}:</p>
     <dl class="dl-horizontal">
@@ -11,10 +11,10 @@
       <dd>{{ lang.oauth2.profile_desc }}</dd>
     </dl>
     <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
-      <div class="form-group">
+      <div class="row">
         <div class="col-sm-10 text-center">
           <button class="btn btn-success" name="authorized" type="submit" value="1">{{ lang.oauth2.permit }}</button>
-          <a href="#" class="btn btn-default" onclick="window.history.back()" role="button">{{ lang.oauth2.deny }}</a>
+          <a href="#" class="btn btn-secondary" onclick="window.history.back()" role="button">{{ lang.oauth2.deny }}</a>
           <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
         </div>
       </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/qhandler.twig b/mailcow/src/mailcow-dockerized/data/web/templates/qhandler.twig
index b2ef437..b8b8725 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/qhandler.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/qhandler.twig
@@ -3,10 +3,10 @@
 {% block content %}
 <div class="row">
 {% if quick_release or quick_delete %}
-  <div class="col-md-offset-2 col-md-8">
-    <div class="panel panel-default">
-      <div class="panel-heading"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
-      <div class="panel-body">
+  <div class="offset-md-2 col-md-8">
+    <div class="card">
+      <div class="card-header"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
+      <div class="card-body">
         <legend>
           {% if quick_release %}
             {{ lang.quarantine.release }}
@@ -14,51 +14,52 @@
             {{ lang.quarantine.remove }}
           {% endif %}
         </legend>
+        <hr />
         <p>{{ lang.quarantine.qhandler_success }}</p>
       </div>
     </div>
   </div>
 {% else %}
 {% if is_action_release_delete and is_hash_present %}
-  <div class="col-md-offset-2 col-md-8">
-    <div class="panel panel-default">
-      <div class="panel-heading"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
-      <div class="panel-body">
+  <div class="-offset-md-2 col-md-8">
+    <div class="card">
+      <div class="card-header"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
+      <div class="card-body">
         {% if action == 'release' %}
-        <legend id="qtitle" data-hash="{{ hash }}">{{ lang.quarantine.release }}</legend>
+        <legend id="qtitle" data-hash="{{ hash }}">{{ lang.quarantine.release }}</legend><hr />
         {% endif %}
         {% if action == 'delete' %}
-        <legend id="qtitle" data-hash="{{ hash }}">{{ lang.quarantine.remove }}</legend>
+        <legend id="qtitle" data-hash="{{ hash }}">{{ lang.quarantine.remove }}</legend><hr />
         {% endif %}
         <div id="qid_error" style="display:none" class="alert alert-danger"></div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_symbols"><h4>{{ lang.quarantine.rspamd_result }}:</h4></label>
           <p>{{ lang.quarantine.spam_score }}: <span id="qid_detail_score"></span></p>
           <p id="qid_detail_symbols"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_subj"><h4>{{ lang.quarantine.subj }}:</h4></label>
           <p id="qid_detail_subj"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_hfrom"><h4>{{ lang.quarantine.sender_header }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_hfrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_efrom"><h4>{{ lang.quarantine.sender }}:</h4></label>
           <p><span class="mail-address-item" id="qid_detail_efrom"></span></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_recipients"><h4>{{ lang.quarantine.recipients }}:</h4></label>
           <p id="qid_detail_recipients"></p>
         </div>
-        <div class="form-group">
+        <div>
           <label for="qid_detail_fuzzy"><h4>Fuzzy Hashes:</h4></label>
           <p id="qid_detail_fuzzy"></p>
         </div>
         <div id="qactions">
           <form method="post" autofill="off">
-            <div class="form-group">
+            <div>
               {% if action == 'release' %}
               <button type="submit" class="btn btn-success" name="quick_release" value="{{ hash }}">{{ lang.quarantine.confirm }}</button>
               {% endif %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/quarantine.twig b/mailcow/src/mailcow-dockerized/data/web/templates/quarantine.twig
index 3b51f94..c0b3737 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/quarantine.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/quarantine.twig
@@ -3,49 +3,56 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default panel-xs-lg">
-      <div class="panel-heading">
-        {{ lang.quarantine.quarantine }} <span class="badge badge-info table-lines"></span>
-        <div class="btn-group pull-right">
-          <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_quarantine_table" data-table="quarantinetable">{{ lang.quarantine.refresh }}</button>
-          <button type="button" class="btn btn-xs btn-xs-lg btn-default dropdown-toggle" data-toggle="dropdown">{{ lang.quarantine.table_size }}
-            <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu" data-table-id="quarantinetable" role="menu">
-            <li><a href="#" data-page-size="10">{{ lang.quarantine.table_size_show_n|format(10) }}</a></li>
-            <li><a href="#" data-page-size="20">{{ lang.quarantine.table_size_show_n|format(20) }}</a></li>
-            <li><a href="#" data-page-size="50">{{ lang.quarantine.table_size_show_n|format(50) }}</a></li>
-            <li><a href="#" data-page-size="100">{{ lang.quarantine.table_size_show_n|format(100) }}</a></li>
-            <li><a href="#" data-page-size="200">{{ lang.quarantine.table_size_show_n|format(200) }}</a></li>
-            <li><a href="#" data-page-size="500">{{ lang.quarantine.table_size_show_n|format(500) }}</a></li>
-          </ul>
+    <div class="card card-xs-lg">
+      <div class="card-header d-flex">
+        {{ lang.quarantine.quarantine }} <span class="badge bg-info table-lines"></span>
+        <div class="btn-group ms-auto">
+          <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_quarantine_table" data-table="quarantinetable">{{ lang.quarantine.refresh }}</button>
         </div>
       </div>
-      <p style="margin:10px" class="help-block">{{ lang.quarantine.qinfo|raw }}</p>
-      <p style="margin:10px">
-        {% if not quarantine_settings.retention_size or not quarantine_settings.max_size %}
-        <div class="panel-body"><div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div></div>
-        {% else %}
-        <p style="margin:10px" class="help-block">
-          {{ lang.quarantine.settings_info|format(quarantine_settings.retention_size, quarantine_settings.max_size)|raw }}
+      <div class="card-body">
+        <div class="mass-actions-quarantine mb-4">
+          <div class="btn-group" data-acl="{{ acl.quarantine }}">
+            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="qitems" href="#"><i class="bi bi-check-all"></i> {{ lang.quarantine.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.quarantine.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" data-datatables-expand="quarantinetable" data-table="quarantinetable" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="quarantinetable" data-table="quarantinetable" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems" data-api-url='edit/qitem' data-api-attr='{"action":"release"}' href="#">{{ lang.quarantine.deliver_inbox }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems" data-api-url='edit/qitem' data-api-attr='{"action":"learnspam"}' href="#">{{ lang.quarantine.learn_spam_delete }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="qitems" data-api-url='delete/qitem' href="#">{{ lang.quarantine.remove }}</a></li>
+            </ul>
+          </div>
+        </div>
+        <p class="text-muted">{{ lang.quarantine.qinfo|raw }}</p>
+        <p>
+          {% if not quarantine_settings.retention_size or not quarantine_settings.max_size %}
+          <div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div>
+          {% else %}
+          <p style="margin:10px" class="text-muted">
+            {{ lang.quarantine.settings_info|format(quarantine_settings.retention_size, quarantine_settings.max_size)|raw }}
+          </p>
+          {% endif %}
         </p>
-        {% endif %}
-      </p>
-      <div class="table-responsive">
         <table id="quarantinetable" class="table table-striped"></table>
-      </div>
-      <div class="mass-actions-quarantine">
-        <div class="btn-group" data-acl="{{ acl.quarantine }}">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="qitems" href="#"><i class="bi bi-check-all"></i> {{ lang.quarantine.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.quarantine.quick_actions }} <span class="caret"></span></a>
-          <ul class="dropdown-menu">
-            <li><a data-action="edit_selected" data-id="qitems" data-api-url='edit/qitem' data-api-attr='{"action":"release"}' href="#">{{ lang.quarantine.deliver_inbox }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="edit_selected" data-id="qitems" data-api-url='edit/qitem' data-api-attr='{"action":"learnspam"}' href="#">{{ lang.quarantine.learn_spam_delete }}</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a data-action="delete_selected" data-id="qitems" data-api-url='delete/qitem' href="#">{{ lang.quarantine.remove }}</a></li>
-          </ul>
-          <div class="clearfix visible-xs"></div>
+        <div class="mass-actions-quarantine mt-4">
+          <div class="btn-group" data-acl="{{ acl.quarantine }}">
+            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="qitems" href="#"><i class="bi bi-check-all"></i> {{ lang.quarantine.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.quarantine.quick_actions }}</a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" data-datatables-expand="quarantinetable" data-table="quarantinetable" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="quarantinetable" data-table="quarantinetable" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems" data-api-url='edit/qitem' data-api-attr='{"action":"release"}' href="#">{{ lang.quarantine.deliver_inbox }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems" data-api-url='edit/qitem' data-api-attr='{"action":"learnspam"}' href="#">{{ lang.quarantine.learn_spam_delete }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="qitems" data-api-url='delete/qitem' href="#">{{ lang.quarantine.remove }}</a></li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -57,6 +64,7 @@
 <script type='text/javascript'>
 var acl = '{{ acl_json|raw }}';
 var lang = {{ lang_quarantine|raw }};
+var lang_datatables = {{ lang_datatables|raw }};
 var csrf_token = '{{ csrf_token }}';
 var pagination_size = '{{ pagination_size }}';
 var role = '{{ role }}';
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/queue.twig b/mailcow/src/mailcow-dockerized/data/web/templates/queue.twig
new file mode 100644
index 0000000..1a5d4ff
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/queue.twig
@@ -0,0 +1,61 @@
+{% extends 'base.twig' %}
+
+{% block content %}
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <span>{{ lang.queue.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">
+      <p class="text-muted">{{ lang.queue.info|raw }}</p>
+      <p class="text-muted"><b>{{ lang.queue.legend|raw }}</b></p>
+      <ul class="text-muted">
+      <li>{{ lang.queue.deliver_mail }} | {{ lang.queue.deliver_mail_legend }}</li>
+      <li>{{ lang.queue.unhold_mail }} | {{ lang.queue.unhold_mail_legend }}</li>
+      <li>{{ lang.queue.hold_mail }} | {{ lang.queue.hold_mail_legend }}</li>
+      </ul>
+      <table id="queuetable" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-admin">
+        <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="mailqitems" 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">
+            <li><a class="dropdown-item" data-bs-toggle="tooltip" title="postqueue -i" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"deliver"}' href="#">{{ lang.queue.deliver_mail }}</a></li>
+            <li><a class="dropdown-item" data-bs-toggle="tooltip" title="postsuper -H" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"unhold"}' href="#">{{ lang.queue.unhold_mail }}</a></li>
+            <li><a class="dropdown-item" data-bs-toggle="tooltip" title="postsuper -h" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"hold"}' href="#">{{ lang.queue.hold_mail }}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" data-bs-toggle="tooltip" title="postsuper -d" data-action="delete_selected" data-id="mailqitems" data-api-url='delete/mailq' href="#">{{ lang.mailbox.remove }}</a></li>
+          </ul>
+          <a class="btn btn-sm d-block d-sm-inline btn-primary"
+             data-action="edit_selected"
+             data-item="mailqitems-all"
+             data-api-url='edit/mailq'
+             data-api-attr='{"action":"flush"}'
+             data-bs-toggle="tooltip" title="postqueue -f"
+             href="#"><i class="bi bi-check-all"></i> {{ lang.queue.flush }}</a>
+          <a class="btn btn-sm d-block d-sm-inline btn-danger"
+             id="super_delete"
+             data-action="edit_selected"
+             data-item="mailqitems-all"
+             data-api-url='edit/mailq'
+             data-api-attr='{"action":"super_delete"}'
+             data-bs-toggle="tooltip" title="postsuper -d ALL"
+             href="#"><i class="bi bi-trash"></i> {{ lang.queue.delete }}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% include 'modals/queue.twig' %}
+
+<script type='text/javascript'>
+  var lang_admin = {{ lang_admin|raw }};
+  var lang = {{ lang_queue|raw }};
+  var lang_datatables = {{ lang_datatables|raw }};
+  var csrf_token = '{{ csrf_token }}';
+  var pagination_size = '{{ pagination_size }}';
+  var table_for_domain = '{{ domain }}';
+</script>
+{% endblock %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/tfa_keys.twig b/mailcow/src/mailcow-dockerized/data/web/templates/tfa_keys.twig
index ad63172..c74571b 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/tfa_keys.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/tfa_keys.twig
@@ -3,12 +3,12 @@
     {% for key_info in tfa_data.additional %}
       <form style="display:inline;" method="post">
         <input type="hidden" name="unset_tfa_key" value="{{ key_info.id }}">
-        <p>
-          <span style="padding:4px;margin:4px" class="label label-keys label-{% if tfa_id == key_info.id %}success{% else %}default{% endif %}">
+        <div class="d-flex flex-column">
+          <span style="padding:4px;margin:4px" class="me-auto badge fs-6 bg-{% if tfa_id == key_info.id %}success{% else %}dark{% endif %}">
             {{ key_info.key_id }}
-            <a href="#" style="font-weight:bold;color:white" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";'>[{{ lang.admin.remove }}]</a>
+            <a href="#" class="btn p-0 text-white" style="font-size: 12px; line-height: 1rem;" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";'>[{{ lang.admin.remove }}]</a>
           </span>
-        </p>
+        </div>
       </form>
     {% endfor %}
   {% endif %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user.twig
index 573acfb..22cc00d 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user.twig
@@ -1,34 +1,39 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<!-- Nav tabs -->
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="dropdown active">
-    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.user.mailbox }}<span class="caret"></span></a>
-    <ul class="dropdown-menu">
-      <li role="presentation" class="active" data-dont-remember="1"><a href="#tab-user-auth" aria-controls="tab-user-auth" role="tab" data-toggle="tab">{{ lang.user.mailbox_general }}</a></li>
-      <li role="presentation"><a href="#tab-user-details" aria-controls="tab-config-fwdhosts" role="tab" data-toggle="tab">{{ lang.user.mailbox_details }}</a></li>
-      <li role="presentation"><a href="#tab-user-settings" aria-controls="tab-config-f2b" role="tab" data-toggle="tab">{{ lang.user.mailbox_settings }}</a></li>
-    </ul>
-  </li>
-  <li role="presentation"><a href="#SpamAliases" aria-controls="SpamAliases" role="tab" data-toggle="tab">{{ lang.user.spam_aliases }}</a></li>
-  <li role="presentation"><a href="#Spamfilter" aria-controls="Spamfilter" role="tab" data-toggle="tab">{{ lang.user.spamfilter }}</a></li>
-  <li role="presentation"><a href="#Syncjobs" aria-controls="Syncjobs" role="tab" data-toggle="tab">{{ lang.user.sync_jobs }}</a></li>
-  <li role="presentation"><a href="#AppPasswds" aria-controls="AppPasswds" role="tab" data-toggle="tab">{{ lang.user.app_passwds }}</a></li>
-  <li role="presentation"><a href="#Pushover" aria-controls="Pushover" role="tab" data-toggle="tab">Pushover API</a></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/mailcow/src/mailcow-dockerized/data/web/templates/user/AppPasswds.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/AppPasswds.twig
index d8d125e..4e70f10 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/AppPasswds.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/AppPasswds.twig
@@ -1,23 +1,53 @@
-<div role="tabpanel" class="tab-pane" id="AppPasswds">
-  <p>{{ lang.user.app_hint|raw }}</p>
-  <div class="table-responsive">
-    <table class="table table-striped" id="app_passwd_table"></table>
-  </div>
-  <div class="mass-actions-user">
-    <div class="btn-group" data-acl="{{ acl.app_passwds }}">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="apppasswd" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="apppasswd" data-api-url='delete/app-passwd' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
+<div role="tabpanel" class="tab-pane fade" id="AppPasswds" role="tabpanel" aria-labelledby="AppPasswds">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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">
+      <div class="mass-actions-user mb-4">
+        <div class="btn-group" data-acl="{{ acl.app_passwds }}">
+          <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="apppasswd" 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">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="app_passwd_table" data-table="app_passwd_table" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="app_passwd_table" data-table="app_passwd_table" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="apppasswd" data-api-url='delete/app-passwd' href="#">{{ lang.mailbox.remove }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm d-block d-sm-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAppPasswdModal"><i class="bi bi-plus-lg"></i> {{ lang.user.create_app_passwd }}</a>
+          </div>
+        </div>
       </div>
-      <div class="btn-group">
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addAppPasswdModal"><i class="bi bi-plus-lg"></i> {{ lang.user.create_app_passwd }}</a>
+      <p>{{ lang.user.app_hint|raw }}</p>
+      <table id="app_passwd_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-user mt-4">
+        <div class="btn-group" data-acl="{{ acl.app_passwds }}">
+          <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="apppasswd" 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">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="app_passwd_table" data-table="app_passwd_table" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="app_passwd_table" data-table="app_passwd_table" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="apppasswd" data-api-url='delete/app-passwd' href="#">{{ lang.mailbox.remove }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm d-block d-sm-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAppPasswdModal"><i class="bi bi-plus-lg"></i> {{ lang.user.create_app_passwd }}</a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user/Pushover.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/Pushover.twig
index c7abe16..d3304db 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/Pushover.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/Pushover.twig
@@ -1,80 +1,118 @@
-<div role="tabpanel" class="tab-pane" id="Pushover">
-  <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">
-    <input type="hidden" value="0" name="active">
-    <div class="row">
-      <div class="col-sm-1">
-        <p class="help-block"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACglBMVEUAAAAAAAEAAAAilecFGigAAAAAAAAAAAAAAAANj+c3n+Ypm+oeYI4KWI4MieAtkdQbleoJcLcjmeswmN4Rit4KgdMKUYQJKUAQSnILL0kMNlMSTngimOoNPF0hlOQBBgkNOlkRS3MHIjUhk+IPf8wKLUYsjM0AAAASTngAAAAAAAAPfckbdLIbdrYUWIgegsgce70knfEAAAAknfENOVkGHi8YaaIjnvEdgMUhkuAQSG8aca0hleQUh9YLjOM4nOEMgtMcbaYWa6YemO02ltkKhNktgLodYZEPXJEyi8kKesktfLUzj84cWYMiluckZ5YJXJYeW4Y0k9YKfs4yjs0pc6YHZaUviskLfMkqmugak+cqkNcViNcqeK4Iaq4XRmYGPmYMKDsFJTstgr0LdL0ti84CCQ4BCQ4Qgc8rlt8XjN8shcQsi8wZSGgEP2cRMEUDKkUAAAD///8dmvEamfExo/EXmPEWl/ERlvElnvEsofEjnfETl/Enn/Ezo/E4pvEvovEfm/E1pPEzpPEvofEOlfEpoPEamPEQlfEYmfE6p/EgnPEVlvEroPE3pfE2pfENk/Ern/E3pPEcmfEfmvEnnvBlufT6/P0soPAknPDd7/zs9vzo9PxBqfItofAqoPD9/f3B4/q43/mx2/l/xfZ6w/Vxv/VtvfVgt/RXtPNTsfNEq/L3+/31+v3a7fvR6vvH5fqs2vmc0/jx+P3v9/3h8fzW7PvV7PvL5/q13fmo1/mh1PiY0fiNy/aHyfZ2wfVou/Vdt/RPsPM3oeoQkuowmeAgjdgcgMQbeLrw9/3k8vy74Pm63/mX0PdYtfNNr/Ikm+4wnOchkuAVjOAfdrMVcrOdoJikAAAAcnRSTlMAIQ8IzzweFwf+/fvw8P79+/Xt7e3p6eji4d7U08y8qZyTiIWDgn53bWxqaWBKQ0JBOjUwMCkoJCEfHBkT/vz8/Pv7+vr69/b29PTy7ezm5ubm5N7e29vQ0M/Pv7+4uLW1pqaWloWDg3x7e21mUVFFRUXdPracAAAEbElEQVRIx4WUZbvaQBCFF+ru7u7u7u7u7t4mvVwSoBC0JIUCLRQolLq7u7vr/+nMLkmQyvlwyfPcd86e3ZldUqwyQ/p329J+XfutPQYOLUP+q55rFtQJRvY79+xxlZTUWbKpz7/xrrMr2+3BoNPpdLn2lJQ4HEeqLOr1d7z7XNkesQed4A848G63Oy4Gmg/6Mz542QvZbqe8C/Ig73CLYiYTrtLmT3zfqbIcAR7y4wIqH/B6M9Fo0+Ldb6sM9ph/v4ozPuz12mxRofaAAr7jCNkuoz/jNf9AGHibkBCm51fsGKvxsAGWx4H+jBcEi6V2birDpCL/9Klrd1KHbiSvPWP8V0tTnTfO03iXi57P6WNHOVUf44IFdFDRz6pV5fw8Zy5z3JVH5+R48OwxqDiGvKJIY9R+9JsCuJ5HPg74OVEMpz+nbdEPUHEWeEk6IDUnTC1l5r+f8uffc0cfxc8fS17kLso24SwUPFDA/6DE82xKDOPliJ7n/GGOOyWK9zD9CdjvOfg9Dv6AH+AX04LW9gj2i8W/APx1UbxwCAu+wPmcpgUKL/EHdvtq4uwaZwCuznPJVY5LHhED15G/isd5Hz4eKui/e/du02YoKFeD5mHzHIN/nxEDe25gQQwKorAid04CfyzwL4XutXvl1Pt1guMOwwKPkU8mYIFT8JHK+vv8prpDScUVL+j8s3lOctw1GIhbWHAS+HgKPk7xPM/4UtNAYmzizJkf6NgTb/gM8jePQLsewMdthS3g95tMpT1IhVm6v1s8fYmLeb13Odwp8Fh5KY048y/d14WUrwrb1e/X/rNp73nkD8kWS+wi/MZ4XuetG4mhKubJm3/WNEvi8SHwB56nPKjUam0LBdp9ARwupFemTYudvgN/L1+A/Ko/LGBuS8pPy+YR1fuCTWNKnUyoeUyYx2o2dyEVGmr5xTD42xzvkD16+Pb9WIIH6fmt1r3mbsTY7Bvw+n23naT8BUWh86bz6G/e259UXPUK3gfAxQDlo7Rpx3Geqb2e3wp83SGEdKpB7zvwYbzvT2n65xLwbH6YP+M9C8vA8E1wxLU8gkCbdhXGUyrMgwVrcbzLHonr78lzDvWM3q/C/HtDlXoSUIe3YkblhRPIX4E8Oo/9siLv8dRjV7SBlkdgTXvKS7nzsA/9AfeEuhKq9T8zWIDv1Sd6ETAP4D6/H/1V+1BojvruNa4SZXz4JhY84dV5MOF5agUvu5OsOo+KRpG30KalEnoeDccFlutPZYs38D5n3zcpr1/0fBhfb3DOY1z2tSAgLxWezz6zuoHhfUmOejf6blHQH/sFuJYfcMZX307ytKvRa3ifoV/586P5j+tICtS77BuJxzxYAPZsntX8k3eSIhlajK4p8b7iefCEKs03kD/I2LnxL9ovH+43y4fAv1YrI/mzDBsavAX/UppfzVOrZT/ydxk6lJ047MfLfVbcb6hS9ZEzWxekKQ5WrtPqZg3rV6tWrX6Tle3KQZj/q6KxQnmDoXwFY0VSrN9e8FRXBCTAvwAAAABJRU5ErkJggg==" class="img img-fluid"></a></p>
-      </div>
-      <div class="col-sm-10">
-        <p class="help-block">{{ lang.user.pushover_info|format(mailcow_cc_username)|raw }}</p>
-        <p class="help-block">{{ lang.user.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code></p>
-        <div class="form-group">
-          <div class="row">
-            <div class="col-sm-6">
-              <div class="form-group">
-                <label for="token">API Token/Key (Application)</label>
-                <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="form-group">
-                <label for="key">User/Group Key</label>
-                <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="form-group">
-                <label for="title">{{ lang.user.pushover_title }}</label>
-                <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="form-group">
-                <label for="text">{{ lang.user.pushover_text }}</label>
-                <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <div class="form-group">
-                <label for="text">{{ lang.user.pushover_sender_array|raw }}</label>
-                <input type="text" class="form-control" name="senders" value="{{ pushover_data.token }}" placeholder="sender1@example.com, sender2@example.com">
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <legend style="cursor:pointer;margin-top:10px" data-target="#po_advanced" unselectable="on" data-toggle="collapse">
-                <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.user.advanced_settings }}
-              </legend>
-            </div>
-            <div class="col-sm-12">
-              <div id="po_advanced" class="collapse">
+<div role="tabpanel" class="tab-pane fade" id="Pushover" role="tabpanel" aria-labelledby="Pushover">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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">
+        <input type="hidden" value="0" name="active">
+        <div class="row">
+          <div class="col-sm-1">
+            <p class="text-muted"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACglBMVEUAAAAAAAEAAAAilecFGigAAAAAAAAAAAAAAAANj+c3n+Ypm+oeYI4KWI4MieAtkdQbleoJcLcjmeswmN4Rit4KgdMKUYQJKUAQSnILL0kMNlMSTngimOoNPF0hlOQBBgkNOlkRS3MHIjUhk+IPf8wKLUYsjM0AAAASTngAAAAAAAAPfckbdLIbdrYUWIgegsgce70knfEAAAAknfENOVkGHi8YaaIjnvEdgMUhkuAQSG8aca0hleQUh9YLjOM4nOEMgtMcbaYWa6YemO02ltkKhNktgLodYZEPXJEyi8kKesktfLUzj84cWYMiluckZ5YJXJYeW4Y0k9YKfs4yjs0pc6YHZaUviskLfMkqmugak+cqkNcViNcqeK4Iaq4XRmYGPmYMKDsFJTstgr0LdL0ti84CCQ4BCQ4Qgc8rlt8XjN8shcQsi8wZSGgEP2cRMEUDKkUAAAD///8dmvEamfExo/EXmPEWl/ERlvElnvEsofEjnfETl/Enn/Ezo/E4pvEvovEfm/E1pPEzpPEvofEOlfEpoPEamPEQlfEYmfE6p/EgnPEVlvEroPE3pfE2pfENk/Ern/E3pPEcmfEfmvEnnvBlufT6/P0soPAknPDd7/zs9vzo9PxBqfItofAqoPD9/f3B4/q43/mx2/l/xfZ6w/Vxv/VtvfVgt/RXtPNTsfNEq/L3+/31+v3a7fvR6vvH5fqs2vmc0/jx+P3v9/3h8fzW7PvV7PvL5/q13fmo1/mh1PiY0fiNy/aHyfZ2wfVou/Vdt/RPsPM3oeoQkuowmeAgjdgcgMQbeLrw9/3k8vy74Pm63/mX0PdYtfNNr/Ikm+4wnOchkuAVjOAfdrMVcrOdoJikAAAAcnRSTlMAIQ8IzzweFwf+/fvw8P79+/Xt7e3p6eji4d7U08y8qZyTiIWDgn53bWxqaWBKQ0JBOjUwMCkoJCEfHBkT/vz8/Pv7+vr69/b29PTy7ezm5ubm5N7e29vQ0M/Pv7+4uLW1pqaWloWDg3x7e21mUVFFRUXdPracAAAEbElEQVRIx4WUZbvaQBCFF+ru7u7u7u7u7t4mvVwSoBC0JIUCLRQolLq7u7vr/+nMLkmQyvlwyfPcd86e3ZldUqwyQ/p329J+XfutPQYOLUP+q55rFtQJRvY79+xxlZTUWbKpz7/xrrMr2+3BoNPpdLn2lJQ4HEeqLOr1d7z7XNkesQed4A848G63Oy4Gmg/6Mz542QvZbqe8C/Ig73CLYiYTrtLmT3zfqbIcAR7y4wIqH/B6M9Fo0+Ldb6sM9ph/v4ozPuz12mxRofaAAr7jCNkuoz/jNf9AGHibkBCm51fsGKvxsAGWx4H+jBcEi6V2birDpCL/9Klrd1KHbiSvPWP8V0tTnTfO03iXi57P6WNHOVUf44IFdFDRz6pV5fw8Zy5z3JVH5+R48OwxqDiGvKJIY9R+9JsCuJ5HPg74OVEMpz+nbdEPUHEWeEk6IDUnTC1l5r+f8uffc0cfxc8fS17kLso24SwUPFDA/6DE82xKDOPliJ7n/GGOOyWK9zD9CdjvOfg9Dv6AH+AX04LW9gj2i8W/APx1UbxwCAu+wPmcpgUKL/EHdvtq4uwaZwCuznPJVY5LHhED15G/isd5Hz4eKui/e/du02YoKFeD5mHzHIN/nxEDe25gQQwKorAid04CfyzwL4XutXvl1Pt1guMOwwKPkU8mYIFT8JHK+vv8prpDScUVL+j8s3lOctw1GIhbWHAS+HgKPk7xPM/4UtNAYmzizJkf6NgTb/gM8jePQLsewMdthS3g95tMpT1IhVm6v1s8fYmLeb13Odwp8Fh5KY048y/d14WUrwrb1e/X/rNp73nkD8kWS+wi/MZ4XuetG4mhKubJm3/WNEvi8SHwB56nPKjUam0LBdp9ARwupFemTYudvgN/L1+A/Ko/LGBuS8pPy+YR1fuCTWNKnUyoeUyYx2o2dyEVGmr5xTD42xzvkD16+Pb9WIIH6fmt1r3mbsTY7Bvw+n23naT8BUWh86bz6G/e259UXPUK3gfAxQDlo7Rpx3Geqb2e3wp83SGEdKpB7zvwYbzvT2n65xLwbH6YP+M9C8vA8E1wxLU8gkCbdhXGUyrMgwVrcbzLHonr78lzDvWM3q/C/HtDlXoSUIe3YkblhRPIX4E8Oo/9siLv8dRjV7SBlkdgTXvKS7nzsA/9AfeEuhKq9T8zWIDv1Sd6ETAP4D6/H/1V+1BojvruNa4SZXz4JhY84dV5MOF5agUvu5OsOo+KRpG30KalEnoeDccFlutPZYs38D5n3zcpr1/0fBhfb3DOY1z2tSAgLxWezz6zuoHhfUmOejf6blHQH/sFuJYfcMZX307ytKvRa3ifoV/586P5j+tICtS77BuJxzxYAPZsntX8k3eSIhlajK4p8b7iefCEKs03kD/I2LnxL9ovH+43y4fAv1YrI/mzDBsavAX/UppfzVOrZT/ydxk6lJ047MfLfVbcb6hS9ZEzWxekKQ5WrtPqZg3rV6tWrX6Tle3KQZj/q6KxQnmDoXwFY0VSrN9e8FRXBCTAvwAAAABJRU5ErkJggg==" class="img img-fluid"></a></p>
+          </div>
+          <div class="col-sm-10">
+            <p class="text-muted">{{ lang.user.pushover_info|format(mailcow_cc_username)|raw }}</p>
+            <p class="text-muted">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code>, <code>{SENDER_ADDRESS}</code>, <code>{SENDER_NAME}</code>, <code>{TO_NAME}</code>, <code>{TO_ADDRESS}</code>, <code>{MSG_ID}</code></p>
+            <div class="row">
+              <div class="col-sm-6 mb-2">
                 <div class="form-group">
-                  <label for="text">{{ lang.user.pushover_sender_regex }}</label>
-                  <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                  <div class="checkbox">
-                    <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
-                  </div>
-                  <div class="checkbox">
-                    <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
+                  <label for="token">API Token/Key (Application)</label>
+                  <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+                </div>
+              </div>
+              <div class="col-sm-6 mb-2">
+                <div class="form-group">
+                  <label for="key">User/Group Key</label>
+                  <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
+                </div>
+              </div>
+              <div class="col-sm-6 mb-2">
+                <div class="form-group">
+                  <label for="title">{{ lang.user.pushover_title }}</label>
+                  <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
+                </div>
+              </div>
+              <div class="col-sm-6 mb-2">
+                <div class="form-group">
+                  <label for="text">{{ lang.user.pushover_text }}</label>
+                  <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+                </div>
+              </div>
+              <div class="col-sm-12 mb-4">
+                <div class="form-group">
+                  <label for="text">{{ lang.user.pushover_sender_array|raw }}</label>
+                  <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+                </div>
+              </div>
+              <div class="col-sm-12 mb-2">
+              <div class="form-group">
+                <label for="sound">{{ lang.edit.pushover_sound }}</label><br>
+                <select name="sound" class="form-control">
+                  <option value="pushover"{% if pushover_data.attributes.sound == 'pushover' %} selected{% endif %}>Pushover (default)</option>
+                  <option value="bike"{% if pushover_data.attributes.sound == 'bike' %} selected{% endif %}>Bike</option>
+                  <option value="bugle"{% if pushover_data.attributes.sound == 'bugle' %} selected{% endif %}>Bugle</option>
+                  <option value="cashregister"{% if pushover_data.attributes.sound == 'cashregister' %} selected{% endif %}>Cash Register</option>
+                  <option value="classical"{% if pushover_data.attributes.sound == 'classical' %} selected{% endif %}>Classical</option>
+                  <option value="cosmic"{% if pushover_data.attributes.sound == 'cosmic' %} selected{% endif %}>Cosmic</option>
+                  <option value="falling"{% if pushover_data.attributes.sound == 'falling' %} selected{% endif %}>Falling</option>
+                  <option value="gamelan"{% if pushover_data.attributes.sound == 'gamelan' %} selected{% endif %}>Gamelan</option>
+                  <option value="incoming"{% if pushover_data.attributes.sound == 'incoming' %} selected{% endif %}>Incoming</option>
+                  <option value="intermission"{% if pushover_data.attributes.sound == 'intermission' %} selected{% endif %}>Intermission</option>
+                  <option value="magic"{% if pushover_data.attributes.sound == 'magic' %} selected{% endif %}>Magic</option>
+                  <option value="mechanical"{% if pushover_data.attributes.sound == 'mechanical' %} selected{% endif %}>Mechanical</option>
+                  <option value="pianobar"{% if pushover_data.attributes.sound == 'pianobar' %} selected{% endif %}>Piano Bar</option>
+                  <option value="siren"{% if pushover_data.attributes.sound == 'siren' %} selected{% endif %}>Siren</option>
+                  <option value="spacealarm"{% if pushover_data.attributes.sound == 'spacealarm' %} selected{% endif %}>Space Alarm</option>
+                  <option value="tugboat"{% if pushover_data.attributes.sound == 'tugboat' %} selected{% endif %}>Tug Boat</option>
+                  <option value="alien"{% if pushover_data.attributes.sound == 'alien' %} selected{% endif %}>Alien Alarm (long)</option>
+                  <option value="climb"{% if pushover_data.attributes.sound == 'climb' %} selected{% endif %}>Climb (long)</option>
+                  <option value="persistent"{% if pushover_data.attributes.sound == 'persistent' %} selected{% endif %}>Persistent (long)</option>
+                  <option value="echo"{% if pushover_data.attributes.sound == 'echo' %} selected{% endif %}>Pushover Echo (long)</option>
+                  <option value="updown"{% if pushover_data.attributes.sound == 'updown' %} selected{% endif %}>Up Down (long)</option>
+                  <option value="vibrate"{% if pushover_data.attributes.sound == 'vibrate' %} selected{% endif %}>Vibrate Only</option>
+                  <option value="none"{% if pushover_data.attributes.sound == 'none' %} selected{% endif %}> None (silent) </option>
+                </select>
+              </div>
+            </div>
+            <div class="col-sm-12">
+                <div class="checkbox">
+                  <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
+                </div>
+              </div>
+              <div class="col-sm-12">
+                <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
+                  <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.user.advanced_settings }}
+                </legend>
+                <hr />
+              </div>
+              <div class="col-sm-12 mb-4">
+                <div id="po_advanced" class="collapse">
+                  <div class="form-group">
+                    <label for="text">{{ lang.user.pushover_sender_regex }}</label>
+                    <input type="text" class="form-control mb-4" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
+                    <div class="checkbox">
+                      <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
+                    </div>
+                    <div class="checkbox">
+                      <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+            <div class="btn-group mass-actions-user mb-2" data-acl="{{ acl.pushover }}">
+              <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.user.save }}</a>
+              <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-all"></i> {{ lang.user.pushover_verify }}</a>
+              <a id="pushover_delete" class="btn btn-sm d-block d-sm-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.user.remove }}</a>
+            </div>
           </div>
         </div>
-        <div class="btn-group mass-actions-user" data-acl="{{ acl.pushover }}">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.user.save }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-all"></i> {{ lang.user.pushover_verify }}</a>
-          <div class="clearfix visible-xs"></div>
-          <a id="pushover_delete" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.user.remove }}</a>
-        </div>
-      </div>
+      </form>
     </div>
-  </form>
+  </div>
 </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user/SpamAliases.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/SpamAliases.twig
index 49153c0..54c7686 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/SpamAliases.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/SpamAliases.twig
@@ -1,39 +1,46 @@
-<div role="tabpanel" class="tab-pane" id="SpamAliases">
-  <div class="row">
-    <div class="col-md-12 col-sm-12 col-xs-12">
-      <div class="table-responsive">
-        <table class="table table-striped" id="tla_table"></table>
-      </div>
+<div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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>
-  <div class="mass-actions-user">
-    <div class="btn-group" data-acl="{{ acl.spam_alias }}">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="tla" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"1"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.hour }}</a></li>
-          <li><a data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"24"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.day }}</a></li>
-          <li><a data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"168"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.week }}</a></li>
-          <li><a data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"744"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.month }}</a></li>
-          <li><a data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"8760"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.year }}</a></li>
-          <li><a data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"87600"}' href="#">{{ lang.user.expire_in }} 10 {{ lang.user.years }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="tla" data-api-url='delete/time_limited_alias' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs-block"></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>
+        </div>
       </div>
-      <div class="btn-group">
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success dropdown-toggle" data-toggle="dropdown" href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.alias_create_random }}, 1 {{ lang.user.year }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          {% for domain in user_domains %}
-            <li>
-              <a data-action="add_item" data-api-url='add/time_limited_alias' data-api-attr='{"domain":"{{ domain }}"}' href="#">
-                @ {{ domain }}
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
+      <div class="mass-actions-user">
+        <div class="btn-group" data-acl="{{ acl.spam_alias }}">
+          <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="tla" 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">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"1"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.hour }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"24"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.day }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"168"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.week }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"744"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.month }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"8760"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.year }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"87600"}' href="#">{{ lang.user.expire_in }} 10 {{ lang.user.years }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="tla" data-api-url='delete/time_limited_alias' href="#">{{ lang.mailbox.remove }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm d-block d-sm-inline btn-success dropdown-toggle" data-bs-toggle="dropdown" href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.alias_create_random }}, 1 {{ lang.user.year }}</a>
+            <ul class="dropdown-menu">
+              {% for domain in user_domains %}
+                <li>
+                  <a class="dropdown-item" data-action="add_item" data-api-url='add/time_limited_alias' data-api-attr='{"domain":"{{ domain }}"}' href="#">
+                    @ {{ domain }}
+                  </a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user/Spamfilter.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/Spamfilter.twig
index ccd7e7d..7a3baf3 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/Spamfilter.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/Spamfilter.twig
@@ -1,77 +1,91 @@
-<div role="tabpanel" class="tab-pane" id="Spamfilter">
-  <h4>{{ lang.user.spamfilter_behavior }}</h4>
-  <div class="row">
-    <div class="col-sm-12">
-      <form class="form-horizontal" role="form" data-id="spam_score" method="post">
-        <div class="form-group">
-          <div class="col-lg-8 col-sm-12">
-            <div id="spam_score" data-provide="slider" data-acl="{{ acl.spam_score }}"></div>
-            <input id="spam_score_value" name="spam_score" type="hidden" value="{{ user_spam_score }}">
-            <ul class="list-group list-group-flush">
-              <li class="list-group-item"><span class="label label-ham spam-ham-score"></span> {{ lang.user.spamfilter_green }}</li>
-              <li class="list-group-item"><span class="label label-spam spam-spam-score"></span> {{ lang.user.spamfilter_yellow }}</li>
-              <li class="list-group-item"><span class="label label-reject spam-reject-score"></span> {{ lang.user.spamfilter_red }}</li>
-            </ul>
+<div role="tabpanel" class="tab-pane fade" id="Spamfilter" role="tabpanel" aria-labelledby="Spamfilter">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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">
+          <form class="form-horizontal" role="form" data-id="spam_score" method="post">
+            <div class="row">
+              <div class="col-sm-12">
+                <div id="spam_score" data-provide="slider" data-acl="{{ acl.spam_score }}"></div>
+                <input id="spam_score_value" name="spam_score" type="hidden" value="{{ user_spam_score }}">
+                <ul class="list-group list-group-flush">
+                  <li class="list-group-item"><span class="label label-ham spam-ham-score"></span> {{ lang.user.spamfilter_green }}</li>
+                  <li class="list-group-item"><span class="label label-spam spam-spam-score"></span> {{ lang.user.spamfilter_yellow }}</li>
+                  <li class="list-group-item"><span class="label label-reject spam-reject-score"></span> {{ lang.user.spamfilter_red }}</li>
+                </ul>
+              </div>
+            </div>
+            <div class="btn-group mt-4" data-acl="{{ acl.spam_score }}">
+              <a type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected"
+                data-item="{{ mailcow_cc_username }}"
+                data-id="spam_score"
+                data-api-url='edit/spam-score'
+                data-api-attr='{}'><i class="bi bi-save"></i> {{ lang.user.save_changes }}</a>
+              <a type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-action="edit_selected"
+                data-item="{{ mailcow_cc_username }}"
+                data-id="spam_score_reset"
+                data-api-url='edit/spam-score'
+                data-api-attr='{"spam_score":"default"}'>{{ lang.user.spam_score_reset }}</a>
+            </div>
+          </form>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="col-lg-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">
+            <div class="input-group" data-acl="{{ acl.spam_policy }}">
+              <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
+              <span class="input-group-btn">
+                <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
+              </span>
+            </div>
+          </form>
+          <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>
+              <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">
+                <li><a class="dropdown-item" data-datatables-expand="wl_policy_mailbox_table" data-table="wl_policy_mailbox_table" href="#">{{ lang.datatables.expand_all }}</a></li>
+                <li><a class="dropdown-item" data-datatables-collapse="wl_policy_mailbox_table" data-table="wl_policy_mailbox_table" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              </ul>
+              <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-danger" data-action="delete_selected" data-id="policy_wl_mailbox" data-api-url='delete/mailbox-policy' href="#">{{ lang.mailbox.remove }}</a>
+            </div>
           </div>
         </div>
-        <div class="btn-group" data-acl="{{ acl.spam_score }}">
-          <a type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected"
-             data-item="{{ mailcow_cc_username }}"
-             data-id="spam_score"
-             data-api-url='edit/spam-score'
-             data-api-attr='{}'><i class="bi bi-save"></i> {{ lang.user.save_changes }}</a>
-          <a type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected"
-             data-item="{{ mailcow_cc_username }}"
-             data-id="spam_score_reset"
-             data-api-url='edit/spam-score'
-             data-api-attr='{"spam_score":"default"}'>{{ lang.user.spam_score_reset }}</a>
-        </div>
-      </form>
-    </div>
-  </div>
-  <hr>
-  <div class="row">
-    <div class="col-sm-6">
-      <h4>{{ lang.user.spamfilter_wl }}</h4>
-      <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
-      <form class="form-inline space20" data-id="add_wl_policy_mailbox">
-        <div class="input-group" data-acl="{{ acl.spam_policy }}">
-          <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-          <span class="input-group-btn">
-            <button class="btn btn-default" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
-          </span>
-        </div>
-      </form>
-      <div class="table-responsive">
-        <table class="table table-striped table-condensed" id="wl_policy_mailbox_table"></table>
-      </div>
-      <div class="mass-actions-user">
-        <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="policy_wl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="delete_selected" data-id="policy_wl_mailbox" data-api-url='delete/mailbox-policy' href="#">{{ lang.mailbox.remove }}</a>
-          <div class="clearfix visible-xs-block"></div>
-        </div>
-      </div>
-    </div>
-    <div class="col-sm-6">
-      <h4>{{ lang.user.spamfilter_bl }}</h4>
-      <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
-      <form class="form-inline space20" data-id="add_bl_policy_mailbox">
-        <div class="input-group" data-acl="{{ acl.spam_policy }}">
-          <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-          <span class="input-group-btn">
-            <button class="btn btn-default" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
-          </span>
-        </div>
-      </form>
-      <div class="table-responsive">
-        <table class="table table-striped table-condensed" id="bl_policy_mailbox_table"></table>
-      </div>
-      <div class="mass-actions-user">
-        <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="policy_bl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="delete_selected" data-id="policy_bl_mailbox" data-api-url='delete/mailbox-policy' href="#">{{ lang.mailbox.remove }}</a>
-          <div class="clearfix visible-xs-block"></div>
+        <div class="col-lg-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">
+            <div class="input-group" data-acl="{{ acl.spam_policy }}">
+              <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
+              <span class="input-group-btn">
+                <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
+              </span>
+            </div>
+          </form>
+          <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>
+              <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">
+                <li><a class="dropdown-item" data-datatables-expand="bl_policy_mailbox_table" data-table="bl_policy_mailbox_table" href="#">{{ lang.datatables.expand_all }}</a></li>
+                <li><a class="dropdown-item" data-datatables-collapse="bl_policy_mailbox_table" data-table="bl_policy_mailbox_table" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              </ul>
+              <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-danger" data-action="delete_selected" data-id="policy_bl_mailbox" data-api-url='delete/mailbox-policy' href="#">{{ lang.mailbox.remove }}</a>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user/Syncjobs.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/Syncjobs.twig
index 1b6cda2..322e853 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/Syncjobs.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/Syncjobs.twig
@@ -1,22 +1,52 @@
-<div role="tabpanel" class="tab-pane" id="Syncjobs">
-  <div class="table-responsive">
-    <table class="table table-striped" id="sync_job_table"></table>
-  </div>
-  <div class="mass-actions-user">
-    <div class="btn-group" data-acl="{{ acl.syncjobs }}">
-      <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <li><a data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
-          <li><a data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
-          <li role="separator" class="divider"></li>
-          <li><a data-action="delete_selected" data-id="syncjob" data-api-url='delete/syncjob' href="#">{{ lang.mailbox.remove }}</a></li>
-        </ul>
-        <div class="clearfix visible-xs"></div>
+<div role="tabpanel" class="tab-pane fade" id="Syncjobs" role="tabpanel" aria-labelledby="Syncjobs">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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">      
+      <div class="mass-actions-user mb-4">
+        <div class="btn-group" data-acl="{{ acl.syncjobs }}">
+          <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="syncjob" 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">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="sync_job_table" data-table="sync_job_table" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="sync_job_table" data-table="sync_job_table" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="syncjob" data-api-url='delete/syncjob' href="#">{{ lang.mailbox.remove }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm d-block d-sm-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModal"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+          </div>
+        </div>
       </div>
-      <div class="btn-group">
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-toggle="modal" data-target="#addSyncJobModal"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+      <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
+      <div class="mass-actions-user mt-4">
+        <div class="btn-group" data-acl="{{ acl.syncjobs }}">
+          <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="syncjob" 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">
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
+              <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-datatables-expand="sync_job_table" data-table="sync_job_table" href="#">{{ lang.datatables.expand_all }}</a></li>
+              <li><a class="dropdown-item" data-datatables-collapse="sync_job_table" data-table="sync_job_table" href="#">{{ lang.datatables.collapse_all }}</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" data-action="delete_selected" data-id="syncjob" data-api-url='delete/syncjob' href="#">{{ lang.mailbox.remove }}</a></li>
+            </ul>
+          </div>
+          <div class="btn-group">
+            <a class="btn btn-sm d-block d-sm-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModal"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-auth.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-auth.twig
index c35eee3..646c791 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-auth.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-auth.twig
@@ -1,17 +1,25 @@
-<div role="tabpanel" class="tab-pane active" id="tab-user-auth">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_general }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade in active show" id="tab-user-auth" role="tabpanel" aria-labelledby="tab-user-auth">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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" data-bs-parent="#user-content">
+      {% if mailboxdata.attributes.force_pw_update == '1' %}
+          <div class="alert alert-danger">{{ lang.user.force_pw_update|raw }}</div>
+      {% endif %}
       {% if not skip_sogo %}
       <div class="row">
         <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
         <div class="col-md-3 col-xs-12">
-          {% if dual_login and allow_admin_email_login == 'n' %}
-            <button disabled class="btn btn-default btn-block btn-xs-lg">
+          {% if dual_login and allow_admin_email_login == 'n' or mailboxdata.attributes.force_pw_update == '1' %}
+            <button disabled class="btn btn-secondary btn-block btn-xs-lg">
               <i class="bi bi-inbox-fill"></i> {{ lang.user.open_webmail_sso }}
             </button>
           {% else %}
-            <a target="_blank" href="/sogo-auth.php?login={{ mailcow_cc_username }}" role="button" class="btn btn-default btn-block btn-xs-lg">
+            <a target="_blank" href="/sogo-auth.php?login={{ mailcow_cc_username }}" role="button" class="btn btn-secondary btn-block btn-xs-lg">
               <i class="bi bi-inbox-fill"></i> {{ lang.user.open_webmail_sso }}
             </a>
           {% endif %}
@@ -19,43 +27,64 @@
       </div>
       <hr>
       <div class="row">
-        <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
-        <div class="col-md-9 col-xs-12">
-          <p class="help-block help-block-mt-0">{{ lang.user.direct_protocol_access|raw }}</p>
-          {% if mailboxdata.attributes.imap_access == 1 %}<div class="label label-success label-protocol-access">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.smtp_access == 1 %}<div class="label label-success label-protocol-access">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sieve_access == 1 %}<div class="label label-success label-protocol-access">Sieve <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">Sieve <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.pop3_access == 1 %}<div class="label label-success label-protocol-access">POP3 <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">POP3 <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sogo_access == 1 %}<div class="label label-success label-protocol-access">SOGo <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">SOGo <i class="bi bi-x-lg"></i></div>{% endif %}
+        <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-6 bg-success mb-2">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 mb-2">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 mb-2">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 mb-2">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 mb-2">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>
       {% endif %}
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.in_use }}:</div>
-        <div class="col-md-5 col-xs-12">
+        <div class="col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.in_use }}:</div>
+        <div class="col-md-5 col-12">
           <div class="progress">
-            <div class="progress-bar progress-bar-{{ mailboxdata.percent_class }}" role="progressbar" aria-valuenow="{{ mailboxdata.percent_in_use }}" aria-valuemin="0" aria-valuemax="100" style="min-width:2em;width: {{ mailboxdata.percent_in_use }}%;">
+            <div class="progress-bar bg-{{ mailboxdata.percent_class }}" role="progressbar" aria-valuenow="{{ mailboxdata.percent_in_use }}" aria-valuemin="0" aria-valuemax="100" style="min-width:2em;width: {{ mailboxdata.percent_in_use }}%;">
               {{ mailboxdata.percent_in_use }}%
             </div>
           </div>
           <p>{{ mailboxdata.quota_used|formatBytes(2) }} / {% if mailboxdata.quota == 0 %}∞{% else %}{{ mailboxdata.quota|formatBytes(2) }}{% endif %}<br>{{ mailboxdata.messages }} {{ lang.user.messages }}</p>
           <hr>
-          <p><a href="#pwChangeModal" data-toggle="modal"><i class="bi bi-pencil-fill"></i> {{ lang.user.change_password }}</a></p>
+          <p><a href="#pwChangeModal" data-bs-toggle="modal"><i class="bi bi-pencil-fill"></i> {{ lang.user.change_password }}</a></p>
+        </div>
+      </div>
+      <hr>
+      {# TFA #}
+      <div class="row">
+        <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.tfa }}:</div>
+        <div class="col-sm-9 col-xs-7">
+          <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
+          {% include 'tfa_keys.twig' %}
+          <br>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.set_tfa }}:</div>
+        <div class="col-sm-9 col-xs-7">
+          <select data-style="btn btn-sm dropdown-toggle bs-placeholder btn-secondary" data-width="fit" id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
+            <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
+            <option value="webauthn">{{ lang.tfa.webauthn }}</option>
+            <option value="totp">{{ lang.tfa.totp }}</option>
+            <option value="none">{{ lang.tfa.none }}</option>
+          </select>
         </div>
       </div>
       <hr>
       {# FIDO2 #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left">
+        <div class="col-sm-3 col-12 text-sm-end text-start">
           <p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left space20">
+        <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-xs-12">
+        <div class="col-sm-9 col-12">
           <div class="table-responsive">
             <table class="table table-striped table-hover table-condensed" id="fido2_keys">
               <tr>
@@ -69,71 +98,65 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-offset-3 col-sm-9">
+        <div class="offset-sm-3 col-sm-9">
           <div class="btn-group nowrap">
-            <button class="btn btn-sm btn-primary visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
-            <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <span class="caret"></span>
-            </button>
+            <button class="btn btn-sm btn-primary d-block d-sm-inline" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
+            <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
             <ul class="dropdown-menu">
-              <li><a href="#" id="register-fido2-touchid" style="line-height:1.4;"><i class="bi bi-apple"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
+              <li><a class="dropdown-item" href="#" id="register-fido2-touchid"><i class="bi bi-apple"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
             </ul>
           </div>
         </div>
       </div>
       <br>
       <div class="row" id="status-fido2">
-        <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.register_status }}:</div>
-        <div class="col-sm-9 col-xs-7">
+        <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>
         </div>
         <br>
       </div>
       <hr>
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-right text-xs-left space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}:</div>
-        <div class="col-md-9 col-xs-12">
+        <div class="col-md-3 col-12 text-sm-end text-start mb-4"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}:</div>
+        <div class="col-md-9 col-12">
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?only_email">{{ lang.user.email }}</a> <small>IMAP, SMTP</small></p>
-          <p class="help-block">{{ lang.user.apple_connection_profile_mailonly }}</p>
+          <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }}</p>
           {% if not skip_sogo %}
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php">{{ lang.user.email_and_dav }}</a> <small>IMAP, SMTP, Cal/CardDAV</small></p>
-          <p class="help-block">{{ lang.user.apple_connection_profile_complete }}</p>
+          <p class="text-muted">{{ lang.user.apple_connection_profile_complete }}</p>
           {% endif %}
         </div>
       </div>
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-right text-xs-left space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br />{{ lang.user.with_app_password }}:</div>
-        <div class="col-md-9 col-xs-12">
+        <div class="col-md-3 col-12 text-sm-end text-start mb-4"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br />{{ lang.user.with_app_password }}:</div>
+        <div class="col-md-9 col-12">
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?only_email&amp;app_password">{{ lang.user.email }}</a> <small>IMAP, SMTP</small></p>
-          <p class="help-block">{{ lang.user.apple_connection_profile_mailonly }} {{ lang.user.apple_connection_profile_with_app_password }}</p>
+          <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }} {{ lang.user.apple_connection_profile_with_app_password }}</p>
           {% if not skip_sogo %}
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?app_password">{{ lang.user.email_and_dav }}</a> <small>IMAP, SMTP, Cal/CardDAV</small></p>
-          <p class="help-block">{{ lang.user.apple_connection_profile_complete }} {{ lang.user.apple_connection_profile_with_app_password }}</p>
+          <p class="text-muted">{{ lang.user.apple_connection_profile_complete }} {{ lang.user.apple_connection_profile_with_app_password }}</p>
           {% endif %}
         </div>
       </div>
       <hr>
       <div class="row">
-        <div class="col-sm-offset-3 col-sm-9">
-          {% if mailboxdata.attributes.force_pw_update == '1' %}
-          <div class="alert alert-danger">{{ lang.user.force_pw_update|raw }}</div>
-          {% endif %}
-          <p><a target="_blank" href="https://mailcow.github.io/mailcow-dockerized-docs/client/#{{ clientconfigstr }}">[{{ lang.user.client_configuration }}]</a></p>
-          <p><a href="#userFilterModal" data-toggle="modal">[{{ lang.user.show_sieve_filters }}]</a></p>
+        <div class="offset-sm-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-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">
-            <button class="btn btn-default btn-xs btn-xs-lg dropdown-toggle" type="button" id="history_sasl_days" data-toggle="dropdown">{{ lang.user.login_history }} <span class="caret"></span></button>
+          <h4 class="recent-login-success">{{ lang.user.recent_successful_connections }}</h4>
+          <div class="dropdown mt-2">
+            <button class="btn btn-secondary btn-xs btn-xs-lg dropdown-toggle" type="button" id="history_sasl_days" data-bs-toggle="dropdown">{{ lang.user.login_history }}</button>
             <ul class="dropdown-menu">
-              <li class="login-history" data-days="1"><a href="#">1 {{ lang.user.day }}</a></li>
-              <li class="login-history active" data-days="7"><a href="#">1 {{ lang.user.week }}</a></li>
-              <li class="login-history" data-days="14"><a href="#">2 {{ lang.user.weeks }}</a></li>
-              <li class="login-history" data-days="31"><a href="#">1 {{ lang.user.month }}</a></li>
+              <li class="login-history" data-days="1"><a class="dropdown-item" href="#">1 {{ lang.user.day }}</a></li>
+              <li class="login-history" data-days="7"><a class="dropdown-item active" href="#">1 {{ lang.user.week }}</a></li>
+              <li class="login-history" data-days="14"><a class="dropdown-item" href="#">2 {{ lang.user.weeks }}</a></li>
+              <li class="login-history" data-days="31"><a class="dropdown-item" href="#">1 {{ lang.user.month }}</a></li>
             </ul>
           </div>
-          <div class="clearfix"></div>
-          <div class="last-login"></div>
-          <span class="clear-last-logins">
+          <div class="last-login mt-4"></div>
+          <span class="clear-last-logins mt-2">
             {{ lang.user.clear_recent_successful_connections }}
           </span>
         </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-details.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-details.twig
index c024af1..573cd49 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-details.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-details.twig
@@ -1,12 +1,17 @@
-<div role="tabpanel" class="tab-pane" id="tab-user-details">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_details }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-user-details" role="tabpanel" aria-labelledby="tab-user-details">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-xs-12 text-right text-xs-left"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
+        <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>
         </div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-8 col-md-9 col-12">
           {% for direct_alias, direct_alias_meta in user_get_alias_details.direct_aliases %}
             {% if direct_alias_meta.public_comment %}
               {{ direct_alias }} &mdash; <i class="bi bi-chat-left"></i> {{ direct_alias_meta.public_comment }}<br>
@@ -20,10 +25,10 @@
       </div>
       <br>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left"><i class="bi bi-share"></i> {{ lang.user.shared_aliases }}:
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start"><i class="bi bi-share"></i> {{ lang.user.shared_aliases }}:
           <p class="small">{{ lang.user.shared_aliases_desc }}</p>
         </div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-8 col-md-9 col-12">
           {% for shared_alias, shared_alias_meta in user_get_alias_details.shared_aliases %}
             {% if shared_alias_meta.public_comment %}
               {{ shared_alias }} &mdash; <i class="bi bi-chat-left"></i> {{ shared_alias_meta.public_comment }}<br>
@@ -37,8 +42,8 @@
       </div>
       <hr>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.aliases_also_send_as }}:</div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.aliases_also_send_as }}:</div>
+        <div class="col-sm-8 col-md-9 col-12">
           <p>
             {% if user_get_alias_details.aliases_also_send_as == '*' %}
               {{ lang.user.sender_acl_disabled }}
@@ -51,14 +56,14 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.aliases_send_as_all }}:</div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.aliases_send_as_all }}:</div>
+        <div class="col-sm-8 col-md-9 col-12">
           <p>{% if not user_get_alias_details.aliases_send_as_all %}<i class="bi bi-x-lg"></i>{% endif %}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left space20">{{ lang.user.is_catch_all }}:</div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.is_catch_all }}:</div>
+        <div class="col-sm-8 col-md-9 col-12">
           <p>{% if not user_get_alias_details.is_catch_all %}<i class="bi bi-x-lg"></i>{% endif %}</p>
         </div>
       </div>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-settings.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-settings.twig
index f59ba39..a1426fa 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-settings.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user/tab-user-settings.twig
@@ -1,133 +1,134 @@
-<div role="tabpanel" class="tab-pane" id="tab-user-settings">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_settings }}</div>
-    <div class="panel-body">
+<div role="tabpanel" class="tab-pane fade" id="tab-user-settings" role="tabpanel" aria-labelledby="tab-user-settings">
+  <div class="card mb-4">
+    <div class="card-header d-flex fs-5">
+      <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-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tag_handling }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tag_handling }}:</div>
+        <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.delimiter_action }}">
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tagging_options == 'subfolder' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if get_tagging_options == 'subfolder' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subfolder"}'>{{ lang.user.tag_in_subfolder }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tagging_options == 'subject' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if get_tagging_options == 'subject' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subject"}'>{{ lang.user.tag_in_subject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tagging_options == 'none' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if get_tagging_options == 'none' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"none"}'>{{ lang.user.tag_in_none }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block">{{ lang.user.tag_help_explain|raw }}</p>
-          <p class="help-block">{{ lang.user.tag_help_example|raw }}</p>
+          <p class="text-muted">{{ lang.user.tag_help_explain|raw }}</p>
+          <p class="text-muted">{{ lang.user.tag_help_example|raw }}</p>
         </div>
       </div>
       {# Show TLS policy options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tls_policy }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tls_policy }}:</div>
+        <div class="col-sm-9 col-12">
           <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 %}"
+            <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="{{ mailcow_cc_username }}"
             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 %}"
+            <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="{{ mailcow_cc_username }}"
             data-id="tls_policy"
             data-api-url='edit/tls_policy'
             data-api-attr='{"tls_enforce_out": {% if get_tls_policy.tls_enforce_out == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_out }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block">{{ lang.user.tls_policy_warning|raw }}</p>
+          <p class="text-muted">{{ lang.user.tls_policy_warning|raw }}</p>
         </div>
       </div>
       {# Show quarantine_notification options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.quarantine_notification }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_notification }}:</div>
+        <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'never' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'never' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'hourly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'hourly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'daily' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'daily' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'weekly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'weekly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"weekly"}'>{{ lang.user.weekly }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block">{{ lang.user.quarantine_notification_info }}</p>
+          <p class="text-muted">{{ lang.user.quarantine_notification_info }}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.quarantine_category }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_category }}:</div>
+        <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'reject' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'reject' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'add_header' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'add_header' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'all' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'all' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"all"}'>{{ lang.user.q_all }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block">{{ lang.user.quarantine_category_info }}</p>
+          <p class="text-muted">{{ lang.user.quarantine_category_info }}</p>
         </div>
       </div>
       {% if not skip_sogo %}
       <hr>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.eas_reset }}:</div>
-        <div class="col-sm-9 col-xs-12">
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-acl="{{ acl.eas_reset }}" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="eas_cache" data-api-url='delete/eas_cache' href="#">{{ lang.user.eas_reset_now }}</button>
-          <p class="help-block">{{ lang.user.eas_reset_help|raw }}</p>
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.eas_reset }}:</div>
+        <div class="col-sm-9 col-12">
+          <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-acl="{{ acl.eas_reset }}" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="eas_cache" data-api-url='delete/eas_cache' href="#">{{ lang.user.eas_reset_now }}</button>
+          <p class="text-muted">{{ lang.user.eas_reset_help|raw }}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.sogo_profile_reset }}:</div>
-        <div class="col-sm-9 col-xs-12">
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-acl="{{ acl.sogo_profile_reset }}" data-action="delete_selected" data-text="{{ lang.user.sogo_profile_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="sogo_profile" data-api-url='delete/sogo_profile' href="#">{{ lang.user.sogo_profile_reset_now }}</button>
-          <p class="help-block">{{ lang.user.sogo_profile_reset_help|raw }}</p>
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.sogo_profile_reset }}:</div>
+        <div class="col-sm-9 col-12">
+          <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-acl="{{ acl.sogo_profile_reset }}" data-action="delete_selected" data-text="{{ lang.user.sogo_profile_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="sogo_profile" data-api-url='delete/sogo_profile' href="#">{{ lang.user.sogo_profile_reset_now }}</button>
+          <p class="text-muted">{{ lang.user.sogo_profile_reset_help|raw }}</p>
         </div>
       </div>
       {% endif %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/user_domainadmin_common.twig b/mailcow/src/mailcow-dockerized/data/web/templates/user_domainadmin_common.twig
index be8bff2..8a7ace3 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/user_domainadmin_common.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/user_domainadmin_common.twig
@@ -7,4 +7,5 @@
   var pagination_size = '{{ pagination_size }}';
   var mailcow_cc_username = '{{ mailcow_cc_username }}';
   var user_spam_score = [{{ user_spam_score }}];
+  var lang_datatables = {{ lang_datatables|raw }};
 </script>