git subrepo commit mailcow/src/mailcow-dockerized

subrepo: subdir:   "mailcow/src/mailcow-dockerized"
  merged:   "308860af"
upstream: origin:   "https://github.com/mailcow/mailcow-dockerized.git"
  branch:   "master"
  commit:   "3f1a5af8"
git-subrepo: version:  "0.4.5"
  origin:   "???"
  commit:   "???"
Change-Id: I5d51c14b45db54fe706be40a591ddbfcea50d4b0
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>