From 9b8039440c5ec9c12c265b6ff0dc4489bb4fbf3c Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Thu, 31 Mar 2022 12:41:50 +0200
Subject: [PATCH] [BS5] change bootstrap general

---
 .../templates/admin/tab-config-admins.twig    | 16 ++--
 .../templates/admin/tab-config-customize.twig | 14 ++--
 data/web/templates/admin/tab-config-dkim.twig | 40 +++++-----
 data/web/templates/admin/tab-config-f2b.twig  | 16 ++--
 .../templates/admin/tab-config-fwdhosts.twig  |  4 +-
 .../templates/admin/tab-config-oauth2.twig    |  4 +-
 .../admin/tab-globalfilter-regex.twig         |  2 +-
 data/web/templates/admin/tab-mailq.twig       |  6 +-
 data/web/templates/admin/tab-routing.twig     |  8 +-
 data/web/templates/debug.twig                 | 74 +++++++++----------
 data/web/templates/edit/aliasdomain.twig      |  2 +-
 data/web/templates/edit/domain.twig           | 10 +--
 data/web/templates/edit/domainadmin.twig      |  2 +-
 data/web/templates/edit/mailbox.twig          | 24 +++---
 data/web/templates/edit/oauth2client.twig     |  2 +-
 data/web/templates/fido2.twig                 |  2 +-
 data/web/templates/index.twig                 |  6 +-
 data/web/templates/mailbox/tab-bcc.twig       | 16 ++--
 .../templates/mailbox/tab-domain-aliases.twig |  8 +-
 data/web/templates/mailbox/tab-domains.twig   |  8 +-
 data/web/templates/mailbox/tab-filters.twig   | 12 +--
 data/web/templates/mailbox/tab-mailboxes.twig | 18 ++---
 .../templates/mailbox/tab-mbox-aliases.twig   | 10 +--
 data/web/templates/mailbox/tab-resources.twig | 14 ++--
 data/web/templates/mailbox/tab-syncjobs.twig  |  8 +-
 .../web/templates/mailbox/tab-tls-policy.twig |  8 +-
 data/web/templates/modals/admin.twig          |  2 +-
 data/web/templates/modals/footer.twig         | 12 +--
 data/web/templates/modals/mailbox.twig        | 12 +--
 data/web/templates/modals/quarantine.twig     |  2 +-
 data/web/templates/oauth/authorize.twig       |  2 +-
 data/web/templates/quarantine.twig            |  8 +-
 data/web/templates/tfa_keys.twig              |  2 +-
 data/web/templates/user/AppPasswds.twig       |  4 +-
 data/web/templates/user/Pushover.twig         |  2 +-
 data/web/templates/user/SpamAliases.twig      |  4 +-
 data/web/templates/user/Spamfilter.twig       | 10 +--
 data/web/templates/user/Syncjobs.twig         |  4 +-
 data/web/templates/user/tab-user-auth.twig    | 16 ++--
 .../web/templates/user/tab-user-settings.twig | 28 +++----
 40 files changed, 221 insertions(+), 221 deletions(-)

diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index 175bc5e92..7cfcd8dc3 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -7,8 +7,8 @@
         </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-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
             <div class="clearfix visible-xs"></div>
             <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>
@@ -37,7 +37,7 @@
         <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 }}">
+            <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>
@@ -95,7 +95,7 @@
               <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">
+                  <span class="input-group-text">
                     <i class="bi bi-suit-heart{% if gal.valid == true %}-fill text-danger{% endif %}"></i>
                   </span>
                   <input type="text" id="guid" class="form-control" value="{{ license_guid }}" readonly>
@@ -163,7 +163,7 @@
                       <div class="col-sm-offset-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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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>
@@ -208,7 +208,7 @@
                       <div class="col-sm-offset-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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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>
@@ -229,8 +229,8 @@
       </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="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-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="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>
diff --git a/data/web/templates/admin/tab-config-customize.twig b/data/web/templates/admin/tab-config-customize.twig
index 2a443830c..e21d4c9bd 100644
--- a/data/web/templates/admin/tab-config-customize.twig
+++ b/data/web/templates/admin/tab-config-customize.twig
@@ -7,7 +7,7 @@
       <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>
+          <button name="submit_main_logo" type="submit" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary"><i class="bi bi-upload"></i> {{ lang.admin.upload }}</button>
         </p>
       </form>
       {% if logo %}
@@ -16,14 +16,14 @@
             <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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary">{{ lang.admin.reset_default }}</button></p>
             </form>
           </div>
         </div>
@@ -42,7 +42,7 @@
               <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" type="button">{{ lang.admin.remove_row }}</a></td>
               </tr>
             {% endfor %}
           {% endfor %}
@@ -56,7 +56,7 @@
         </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>
+          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" type="button" id="add_app_link_row">{{ lang.admin.add_row }}</button>
           <div class="clearfix visible-xs"></div>
         </div></p>
       </form>
diff --git a/data/web/templates/admin/tab-config-dkim.twig b/data/web/templates/admin/tab-config-dkim.twig
index ca5ecef6a..5b1a65ffc 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -3,9 +3,9 @@
     <div class="card-header">{{ lang.admin.dkim_keys }}</div>
     <div class="card-body">
       <div class="btn-group" data-bs-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-bs-toggle="collapse" data-bs-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-bs-toggle="collapse" data-bs-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-bs-toggle="collapse" data-bs-target=".dkim_key_missing">{{ lang.admin.dkim_key_missing }}</a>
+        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary active" href="#" data-bs-toggle="collapse" data-bs-target=".dkim_key_valid">{{ lang.admin.dkim_key_valid }}</a>
+        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary active" href="#" data-bs-toggle="collapse" data-bs-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-secondary active" href="#" data-bs-toggle="collapse" data-bs-target=".dkim_key_missing">{{ lang.admin.dkim_key_missing }}</a>
         <div class="clearfix visible-xs"></div>
       </div>
       {% for domain, domain_data in dkim_domains %}
@@ -14,9 +14,9 @@
             <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-5 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
+              <p class="dkim-label"><span class="badge fs-5 bg-primary">{{ lang.admin.dkim_domains_selector }} '{{ domain_data.dkim.dkim_selector }}'</span></p>
+              <p class="dkim-label"><span class="badge fs-5 bg-info">{{ domain_data.dkim.length }} bit</span></p>
               </p>
             </div>
             <div class="col-md-8">
@@ -29,7 +29,7 @@
           <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-5 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
             </div>
             <div class="col-md-8"><pre>-</pre></div>
             <hr class="visible-xs visible-sm">
@@ -41,9 +41,9 @@
               <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">
                 <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-5 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
+                <p class="dkim-label"><span class="badge fs-5 bg-primary">Selector '{{ alias_domain_data.dkim.dkim_selector }}'</span></p>
+                <p class="dkim-label"><span class="badge fs-5 bg-info">{{ alias_domain_data.dkim.length }} bit</span></p>
                 </p>
               </div>
               <div class="col-md-8">
@@ -56,7 +56,7 @@
             <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>
+                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="badge fs-5 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
               </div>
               <div class="col-md-8"><pre>-</pre></div>
               <hr class="visible-xs visible-sm">
@@ -69,9 +69,9 @@
           <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-5 bg-warning">{{ lang.admin.dkim_key_unused }}</span></p>
+            <p class="dkim-label"><span class="badge fs-5 bg-primary">Selector '{{ data.dkim.dkim_selector }}'</span></p>
+            <p class="dkim-label"><span class="badge fs-5 bg-info">{{ data.dkim.length }} bit</span></p>
             </p>
           </div>
           <div class="col-md-8">
@@ -84,7 +84,7 @@
 
       <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" 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-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 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>
         </div>
@@ -102,7 +102,7 @@
           <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>
+          <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>
@@ -132,7 +132,7 @@
               <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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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>
 
@@ -144,7 +144,7 @@
           <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"
+              <select data-style="btn btn-secondary btn-sm"
                       data-live-search="true"
                       data-id="dkim_duplicate"
                       title="{{ lang.admin.dkim_from_title }}"
@@ -160,7 +160,7 @@
             <div class="col-sm-10">
               <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 +170,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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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/data/web/templates/admin/tab-config-f2b.twig b/data/web/templates/admin/tab-config-f2b.twig
index 73afd34af..f8dbd46d9 100644
--- a/data/web/templates/admin/tab-config-f2b.twig
+++ b/data/web/templates/admin/tab-config-f2b.twig
@@ -18,14 +18,14 @@
         <div class="form-group">
           <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">
           <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>
@@ -41,7 +41,7 @@
         </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-bs-toggle="modal" data-container="netfilter-mailcow" data-bs-target="#RestartContainer"><i class="bi bi-arrow-repeat"></i> {{ lang.header.restart_netfilter }}</a>
+          <a href="#" role="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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 class="clearfix visible-xs"></div>
         </div>
       </form>
@@ -61,14 +61,14 @@
               <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-xs btn-xs-lg btn-secondary" 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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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>
@@ -79,7 +79,7 @@
       {% 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 +98,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/data/web/templates/admin/tab-config-fwdhosts.twig b/data/web/templates/admin/tab-config-fwdhosts.twig
index dd1d96c1e..056af64b0 100644
--- a/data/web/templates/admin/tab-config-fwdhosts.twig
+++ b/data/web/templates/admin/tab-config-fwdhosts.twig
@@ -8,8 +8,8 @@
       </div>
       <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-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <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-secondary">{{ 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-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu top100">
             <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>
diff --git a/data/web/templates/admin/tab-config-oauth2.twig b/data/web/templates/admin/tab-config-oauth2.twig
index 5fd1e2627..910b6be33 100644
--- a/data/web/templates/admin/tab-config-oauth2.twig
+++ b/data/web/templates/admin/tab-config-oauth2.twig
@@ -8,8 +8,8 @@
       </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="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-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="delete_selected" data-id="oauth2_clients" data-api-url='delete/oauth2-client' href="#">{{ lang.mailbox.remove }}</a></li>
             <li><hr class="dropdown-divider"></li>
diff --git a/data/web/templates/admin/tab-globalfilter-regex.twig b/data/web/templates/admin/tab-globalfilter-regex.twig
index 078331210..d3ccc6945 100644
--- a/data/web/templates/admin/tab-globalfilter-regex.twig
+++ b/data/web/templates/admin/tab-globalfilter-regex.twig
@@ -36,7 +36,7 @@
           </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-secondary 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>
           </div>
diff --git a/data/web/templates/admin/tab-mailq.twig b/data/web/templates/admin/tab-mailq.twig
index deede18a1..8b8897188 100644
--- a/data/web/templates/admin/tab-mailq.twig
+++ b/data/web/templates/admin/tab-mailq.twig
@@ -3,7 +3,7 @@
     <div class="card-header">
       {{ 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>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_queue" data-table="queuetable">{{ lang.admin.refresh }}</button>
       </div>
     </div>
     <div class="card-body">
@@ -12,8 +12,8 @@
       </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-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="mailqitems" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu top33">
             <li><a class="dropdown-item" data-bs-toggle="tooltip" title="postqueue -i" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"deliver"}' href="#">{{ lang.admin.queue_deliver_mail }}</a></li>
             <li><a class="dropdown-item" data-bs-toggle="tooltip" title="postsuper -H" data-action="edit_selected" data-id="mailqitems" data-api-url='edit/mailq' data-api-attr='{"action":"unhold"}' href="#">{{ lang.admin.queue_unhold_mail }}</a></li>
diff --git a/data/web/templates/admin/tab-routing.twig b/data/web/templates/admin/tab-routing.twig
index ad9be4089..9e08d0dc2 100644
--- a/data/web/templates/admin/tab-routing.twig
+++ b/data/web/templates/admin/tab-routing.twig
@@ -8,8 +8,8 @@
       </div>
       <div class="mass-actions-admin">
         <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-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <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-secondary">{{ 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-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu top100">
             <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>
@@ -52,8 +52,8 @@
       </div>
       <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-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <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-secondary">{{ 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-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu top100">
             <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>
diff --git a/data/web/templates/debug.twig b/data/web/templates/debug.twig
index cb32e4b2a..068552be3 100644
--- a/data/web/templates/debug.twig
+++ b/data/web/templates/debug.twig
@@ -88,7 +88,7 @@
                   {{ container }} ({{ container_info.Config.Image }})
                   <br class="visible-xs" />
                   <small>({{ lang.debug.started_on }} <span class="parse_date">{{ container_info.State.StartedAtHR }}</span>)</small>
-                  <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="pull-right btn btn-xs btn-default">{{ lang.debug.restart_container }}
+                  <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="pull-right btn btn-xs btn-secondary">{{ lang.debug.restart_container }}
                     <i class="pull-right bi
                     {% if container_info.State.Running == 1 %}
                     bi-record-fill text-success
@@ -110,9 +110,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">Postfix <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_postfix_logs" data-table="postfix_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="postfix_log" data-log-url="postfix" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_postfix_logs" data-table="postfix_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -127,9 +127,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header"> Mailcow UI <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_ui_logs" data-table="ui_logs">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="mailcow_ui" data-table="ui_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_ui_logs" data-table="ui_logs">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -144,9 +144,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">SASL <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_sasl_logs" data-table="sasl_logs">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="sasl_log_table" data-table="sasl_logs" data-log-url="ui" data-nrows="10000">+ 10000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_sasl_logs" data-table="sasl_logs">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -161,9 +161,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">Dovecot <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_dovecot_logs" data-table="dovecot_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="dovecot_log" data-log-url="dovecot" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_dovecot_logs" data-table="dovecot_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -178,9 +178,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">SOGo <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_sogo_logs" data-table="sogo_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="sogo_log" data-log-url="sogo" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_sogo_logs" data-table="sogo_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -195,9 +195,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">Netfilter <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_netfilter_logs" data-table="netfilter_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="netfilter_log" data-log-url="netfilter" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_netfilter_logs" data-table="netfilter_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -212,9 +212,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">Rspamd history <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_rspamd_history" data-table="rspamd_history">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rspamd_history" data-table="rspamd_history" data-log-url="rspamd-history" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_rspamd_history" data-table="rspamd_history">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -234,9 +234,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">Autodiscover <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_autodiscover_logs" data-table="autodiscover_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="autodiscover_log" data-table="autodiscover_log" data-log-url="autodiscover" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_autodiscover_logs" data-table="autodiscover_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -251,9 +251,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">Watchdog <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_watchdog_logs" data-table="watchdog_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="watchdog" data-table="watchdog_log" data-log-url="watchdog" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_watchdog_logs" data-table="watchdog_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -268,9 +268,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">ACME <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_acme_logs" data-table="acme_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="general_syslog" data-table="acme_log" data-log-url="acme" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_acme_logs" data-table="acme_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -285,9 +285,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">API <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_api_logs" data-table="api_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="apilog" data-table="api_log" data-log-url="api" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_api_logs" data-table="api_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
@@ -302,9 +302,9 @@
         <div class="card panel-xs-lg">
           <div class="card-header">Ratelimits <span class="badge badge-info table-lines"></span>
             <div class="btn-group pull-right">
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="100">+ 100</button>
-              <button class="btn btn-xs btn-xs-lg btn-default add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="1000">+ 1000</button>
-              <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_rl_logs" data-table="rl_log">{{ lang.admin.refresh }}</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="100">+ 100</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary add_log_lines" data-post-process="rllog" data-table="rl_log" data-log-url="ratelimited" data-nrows="1000">+ 1000</button>
+              <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_rl_logs" data-table="rl_log">{{ lang.admin.refresh }}</button>
             </div>
           </div>
           <div class="card-body">
diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index 2580b5f36..ae8d30d65 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -40,7 +40,7 @@
     </select>
   </div>
   <div class="form-group">
-    <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+    <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
   </div>
 </form>
 {% if dkim %}
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index a10989db3..bb3596254 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -134,7 +134,7 @@
         </select>
       </div>
       <div class="form-group">
-        <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+        <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
       </div>
     </form>
   </div>
@@ -147,7 +147,7 @@
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
-                      <button class="btn btn-default" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
                     </span>
           </div>
         </form>
@@ -156,7 +156,7 @@
         </div>
         <div class="mass-actions-user">
           <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
             <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_wl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a>
             <div class="clearfix visible-xs"></div>
           </div>
@@ -169,7 +169,7 @@
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
-                      <button class="btn btn-default" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
                     </span>
           </div>
         </form>
@@ -178,7 +178,7 @@
         </div>
         <div class="mass-actions-user">
           <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
             <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_bl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a></li>
           </div>
         </div>
diff --git a/data/web/templates/edit/domainadmin.twig b/data/web/templates/edit/domainadmin.twig
index 4381843df..b944ea5ff 100644
--- a/data/web/templates/edit/domainadmin.twig
+++ b/data/web/templates/edit/domainadmin.twig
@@ -72,7 +72,7 @@
         </select>
       </div>
       <div class="form-group">
-        <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+        <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index 8fdac00f9..5794d4728 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -93,25 +93,25 @@
         <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'never' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'never' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'hourly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'hourly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'daily' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'daily' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'weekly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'weekly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
@@ -126,19 +126,19 @@
         <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'reject' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_category == 'reject' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'add_header' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_category == 'add_header' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'all' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_category == 'all' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
@@ -153,13 +153,13 @@
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="tls_policy"
             data-api-url='edit/tls_policy'
             data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="tls_policy"
@@ -316,7 +316,7 @@
           </div>
           <div class="btn-group" data-acl="{{ acl.pushover }}">
             <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.edit.save }}</a>
-            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
+            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
             <div class="clearfix visible-xs"></div>
             <a id="pushover_delete" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.edit.remove }}</a>
           </div>
@@ -339,7 +339,7 @@
             </select>
           </div>
           <div class="form-group">
-            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
           </div>
         </div>
       </div>
@@ -361,7 +361,7 @@
             </select>
           </div>
           <div class="form-group">
-            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
           </div>
           <p class="help-block">{{ lang.edit.mbox_rl_info }}</p>
         </div>
diff --git a/data/web/templates/edit/oauth2client.twig b/data/web/templates/edit/oauth2client.twig
index 0a123fc5b..406677ac4 100644
--- a/data/web/templates/edit/oauth2client.twig
+++ b/data/web/templates/edit/oauth2client.twig
@@ -30,7 +30,7 @@
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="oauth2client" data-item="{{ oauth2client }}" data-api-url='edit/oauth2-client' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="oauth2client" data-item="{{ oauth2client }}" data-api-url='edit/oauth2-client' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
     </div>
   </div>
 </form>
diff --git a/data/web/templates/fido2.twig b/data/web/templates/fido2.twig
index 649981835..c29cd8f20 100644
--- a/data/web/templates/fido2.twig
+++ b/data/web/templates/fido2.twig
@@ -15,7 +15,7 @@
         <form style="display:inline;" method="post">
           <input type="hidden" name="unset_fido2_key" value="{{ key_info.cid }}">
           <div class="btn-group">
-            <a href="#" class="btn btn-xs btn-default" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-bs-toggle="modal" data-bs-target="#fido2ChangeFn">
+            <a href="#" class="btn btn-xs btn-secondary" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-bs-toggle="modal" data-bs-target="#fido2ChangeFn">
               <i class="bi bi-pencil-fill"></i> {{ lang.fido2.rename }}
             </a>
             <a href="#" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";' class="btn btn-xs btn-danger">
diff --git a/data/web/templates/index.twig b/data/web/templates/index.twig
index cc4815d07..3e082b3c7 100644
--- a/data/web/templates/index.twig
+++ b/data/web/templates/index.twig
@@ -20,14 +20,14 @@
           <div class="form-group">
             <label class="sr-only" for="login_user">{{ lang.login.username }}</label>
             <div class="input-group">
-              <div class="input-group-addon"><i class="bi bi-person-fill"></i></div>
+              <div class="input-group-text"><i class="bi bi-person-fill"></i></div>
               <input name="login_user" autocorrect="off" autocapitalize="none" type="{% if is_mobileconfig %}email{% else %}text{% endif %}" id="login_user" class="form-control" placeholder="{{ lang.login.username }}" required="" autofocus="" autocomplete="username">
             </div>
           </div>
           <div class="form-group">
             <label class="sr-only" for="pass_user">{{ lang.login.password }}</label>
             <div class="input-group">
-              <div class="input-group-addon"><i class="bi bi-lock-fill"></i></div>
+              <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
             </div>
           </div>
@@ -42,7 +42,7 @@
               </div>
             </div>
             {% if not oauth2_request %}
-            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-default pull-right dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-secondary pull-right dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="flag-icon flag-icon-{{ mailcow_locale }}"></span>
             </button>
             <ul class="dropdown-menu pull-right login">
diff --git a/data/web/templates/mailbox/tab-bcc.twig b/data/web/templates/mailbox/tab-bcc.twig
index d8020be87..6cab0f0a5 100644
--- a/data/web/templates/mailbox/tab-bcc.twig
+++ b/data/web/templates/mailbox/tab-bcc.twig
@@ -4,8 +4,8 @@
       {{ lang.mailbox.bcc_maps }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.bcc_maps }}" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
          
         </button>
         <ul class="dropdown-menu" data-table-id="bcc_table" role="menu">
@@ -20,8 +20,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -41,8 +41,8 @@
       {{ lang.mailbox.recipient_maps }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_recipient_map_table" data-table="recipient_map_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_recipient_map_table" data-table="recipient_map_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
          
         </button>
         <ul class="dropdown-menu" data-table-id="recipient_map_table" role="menu">
@@ -57,8 +57,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
diff --git a/data/web/templates/mailbox/tab-domain-aliases.twig b/data/web/templates/mailbox/tab-domain-aliases.twig
index 1c7349031..af3b3a098 100644
--- a/data/web/templates/mailbox/tab-domain-aliases.twig
+++ b/data/web/templates/mailbox/tab-domain-aliases.twig
@@ -4,8 +4,8 @@
       {{ lang.mailbox.domain_aliases }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_aliasdomain_table" data-table="aliasdomain_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_aliasdomain_table" data-table="aliasdomain_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
         </button>
         <ul class="dropdown-menu" data-table-id="aliasdomain_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
@@ -18,8 +18,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig
index 551d69456..e034e22e4 100644
--- a/data/web/templates/mailbox/tab-domains.twig
+++ b/data/web/templates/mailbox/tab-domains.twig
@@ -6,8 +6,8 @@
         {% if mailcow_cc_role == 'admin' %}
           <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
         {% endif %}
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_domain_table" data-table="domain_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_domain_table" data-table="domain_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
         <ul class="dropdown-menu" data-table-id="domain_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
         </ul>
@@ -19,8 +19,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
         <ul class="dropdown-menu">
           {% if mailcow_cc_role == 'admin' %}
           <li><a class="dropdown-item" data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
index d57f2a727..45b12d381 100644
--- a/data/web/templates/mailbox/tab-filters.twig
+++ b/data/web/templates/mailbox/tab-filters.twig
@@ -4,8 +4,8 @@
       {{ lang.mailbox.filters }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.filters }}" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
         <ul class="dropdown-menu" data-table-id="filter_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
         </ul>
@@ -20,8 +20,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group" data-acl="{{ acl.filters }}">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -48,7 +48,7 @@
           <div class="form-group">
             <div class="col-sm-10 add_filter_btns">
               <div class="btn-group">
-                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default validate_sieve" href="#">{{ lang.add.validate }}</button>
+                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
                 <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                 <div class="clearfix visible-xs"></div>
               </div>
@@ -67,7 +67,7 @@
           <div class="form-group">
             <div class="col-sm-10 add_filter_btns">
               <div class="btn-group">
-                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default validate_sieve" href="#">{{ lang.add.validate }}</button>
+                <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
                 <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                 <div class="clearfix visible-xs"></div>
               </div>
diff --git a/data/web/templates/mailbox/tab-mailboxes.twig b/data/web/templates/mailbox/tab-mailboxes.twig
index 4864533bf..ae307a45e 100644
--- a/data/web/templates/mailbox/tab-mailboxes.twig
+++ b/data/web/templates/mailbox/tab-mailboxes.twig
@@ -4,8 +4,8 @@
       {{ lang.mailbox.mailboxes }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_mailbox_table" data-table="mailbox_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_mailbox_table" data-table="mailbox_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
         <ul class="dropdown-menu" data-table-id="mailbox_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
         </ul>
@@ -17,8 +17,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group hidden-md hidden-lg hidden-xl">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
         <ul class="dropdown-menu">
           <li class="dropdown-header">{{ lang.mailbox.mailbox }}</li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
@@ -60,9 +60,9 @@
         <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
       </div>
       <div class="btn-group hidden-xs hidden-sm">
-        <a class="btn btn-sm btn-default" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
         <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailbox }}</a>
+          <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailbox }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"active":"2"}' href="#">{{ lang.mailbox.disable_login }}</a></li>
@@ -72,7 +72,7 @@
           </ul>
         </div>
         <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">TLS</a>
+          <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">TLS</a>
           <ul class="dropdown-menu">
             <li class="dropdown-header">{{ lang.mailbox.tls_enforce_in }}</li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/tls_policy' data-api-attr='{"tls_enforce_in":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
@@ -84,7 +84,7 @@
           </ul>
         </div>
         <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.allowed_protocols }}</a>
+          <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.allowed_protocols }}</a>
           <ul class="dropdown-menu">
             <li class="dropdown-header">IMAP</li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"imap_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
@@ -100,7 +100,7 @@
           </ul>
         </div>
         <div class="btn-group">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quarantine_notification }}</a>
+          <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quarantine_notification }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"hourly"}' href="#">{{ lang.user.hourly }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/quarantine_notification' data-api-attr='{"quarantine_notification":"daily"}' href="#">{{ lang.user.daily }}</a></li>
diff --git a/data/web/templates/mailbox/tab-mbox-aliases.twig b/data/web/templates/mailbox/tab-mbox-aliases.twig
index 7bef73544..2b73eff18 100644
--- a/data/web/templates/mailbox/tab-mbox-aliases.twig
+++ b/data/web/templates/mailbox/tab-mbox-aliases.twig
@@ -4,8 +4,8 @@
       {{ lang.mailbox.aliases }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_alias_table" data-table="alias_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_alias_table" data-table="alias_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
         <ul class="dropdown-menu" data-table-id="alias_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
         </ul>
@@ -20,8 +20,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
         <ul class="dropdown-menu top33">
           <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -34,7 +34,7 @@
           {% endif %}
         </ul>
         <div class="clearfix visible-xs"></div>
-        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
+        <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
         <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
       </div>
     </div>
diff --git a/data/web/templates/mailbox/tab-resources.twig b/data/web/templates/mailbox/tab-resources.twig
index dbebcfcbf..6ace7f5f5 100644
--- a/data/web/templates/mailbox/tab-resources.twig
+++ b/data/web/templates/mailbox/tab-resources.twig
@@ -4,17 +4,17 @@
       {{ lang.mailbox.resources }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_resource_table" data-table="resource_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_resource_table" data-table="resource_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
         <ul class="dropdown-menu" data-table-id="resource_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
         </ul>
       </div>
     </div>
     <div class="card-body help-block">
-      <p><span class="label label-success">{{ lang.mailbox.booking_0_short }}</span> - {{ lang.mailbox.booking_null }}</p>
-      <p><span class="label label-warning">{{ lang.mailbox.booking_lt0_short }}</span> - {{ lang.mailbox.booking_ltnull }}</p>
-      <p><span class="label label-danger">{{ lang.mailbox.booking_custom_short }}</span> - {{ lang.mailbox.booking_custom }}</p>
+      <p><span class="badge fs-5 bg-success">{{ lang.mailbox.booking_0_short }}</span> - {{ lang.mailbox.booking_null }}</p>
+      <p><span class="badge fs-5 bg-warning">{{ lang.mailbox.booking_lt0_short }}</span> - {{ lang.mailbox.booking_ltnull }}</p>
+      <p><span class="badge fs-5 bg-danger">{{ lang.mailbox.booking_custom_short }}</span> - {{ lang.mailbox.booking_custom }}</p>
     </div>
 {#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
     <div class="table-responsive">
@@ -22,8 +22,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="resource" data-api-url='edit/resource' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
diff --git a/data/web/templates/mailbox/tab-syncjobs.twig b/data/web/templates/mailbox/tab-syncjobs.twig
index f8bcea9a7..1c68925c3 100644
--- a/data/web/templates/mailbox/tab-syncjobs.twig
+++ b/data/web/templates/mailbox/tab-syncjobs.twig
@@ -4,8 +4,8 @@
       {{ lang.mailbox.sync_jobs }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button data-acl="{{ acl.syncjobs }}" class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_sync_job_table" data-table="sync_job_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_sync_job_table" data-table="sync_job_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
         <ul class="dropdown-menu" data-table-id="sync_job_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
         </ul>
@@ -17,8 +17,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group" data-acl="{{ acl.syncjobs }}">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
         <ul class="dropdown-menu">
           <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"last_run":"","success":""}' href="#">{{ lang.mailbox.last_run_reset }}</a></li>
           <li><hr class="dropdown-divider"></li>
diff --git a/data/web/templates/mailbox/tab-tls-policy.twig b/data/web/templates/mailbox/tab-tls-policy.twig
index d44a3831a..57e94d7c8 100644
--- a/data/web/templates/mailbox/tab-tls-policy.twig
+++ b/data/web/templates/mailbox/tab-tls-policy.twig
@@ -4,8 +4,8 @@
       {{ lang.mailbox.tls_policy_maps_long }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</button>
-        <button class="btn btn-xs btn-default refresh_table" data-draw="draw_tls_policy_table" data-table="tls_policy_table">{{ lang.admin.refresh }}</button>
-        <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
+        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_tls_policy_table" data-table="tls_policy_table">{{ lang.admin.refresh }}</button>
+        <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
         <ul class="dropdown-menu" data-table-id="tls_policy_table" role="menu">
           {% include 'mailbox/page-size.twig' %}
         </ul>
@@ -18,8 +18,8 @@
     </div>
     <div class="mass-actions-mailbox">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-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="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
diff --git a/data/web/templates/modals/admin.twig b/data/web/templates/modals/admin.twig
index aeeaa20d3..81d386ae7 100644
--- a/data/web/templates/modals/admin.twig
+++ b/data/web/templates/modals/admin.twig
@@ -223,7 +223,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="test_transport" href="#">{{ lang.admin.relay_run }}</button>
+              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="test_transport" href="#">{{ lang.admin.relay_run }}</button>
             </div>
           </div>
         </form>
diff --git a/data/web/templates/modals/footer.twig b/data/web/templates/modals/footer.twig
index 33b01d6a8..dc8f2292b 100644
--- a/data/web/templates/modals/footer.twig
+++ b/data/web/templates/modals/footer.twig
@@ -25,7 +25,7 @@
           </div>
           <div class="form-group">
             <div class="input-group">
-              <span class="input-group-addon" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
+              <span class="input-group-text" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
               <input type="text" name="otp_token" class="form-control" placeholder="Touch Yubikey" aria-describedby="yubi-addon">
               <input type="hidden" name="tfa_method" value="yubi_otp">
             </div>
@@ -146,24 +146,24 @@
         <form role="form" method="post">
           <div class="form-group">
             <div class="input-group">
-              <span class="input-group-addon" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
+              <span class="input-group-text" id="yubi-addon"><img alt="Yubicon Icon" src="/img/yubi.ico"></span>
               <input type="text" name="token" class="form-control" autocomplete="off" placeholder="Touch Yubikey" aria-describedby="yubi-addon">
               <input type="hidden" name="tfa_method" value="yubi_otp">
             </div>
           </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
+          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-secondary" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
         </form>
         {% endif %}
         {% if pending_tfa_method == 'totp' %}
         <form role="form" method="post">
           <div class="form-group">
             <div class="input-group">
-              <span class="input-group-addon" id="tfa-addon"><i class="bi bi-shield-lock-fill"></i></span>
+              <span class="input-group-text" id="tfa-addon"><i class="bi bi-shield-lock-fill"></i></span>
               <input type="number" min="000000" max="999999" name="token" class="form-control" placeholder="123456" autocomplete="one-time-code" aria-describedby="tfa-addon">
               <input type="hidden" name="tfa_method" value="totp">
             </div>
           </div>
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
+          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" type="submit" name="verify_tfa_login">{{ lang.login.login }}</button>
         </form>
         {% endif %}
         {% if pending_tfa_method == 'hotp' %}
@@ -235,7 +235,7 @@
         <ul id="ItemsToDelete"></ul>
         <hr>
         <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" id="IsConfirmed">{{ lang.footer.delete_now }}</button>
-        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="isCanceled">{{ lang.footer.cancel }}</button>
+        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="isCanceled">{{ lang.footer.cancel }}</button>
         <div class="clearfix visible-xs"></div>
       </div>
     </div>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index 33227ccea..8cbdd0ad5 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -37,7 +37,7 @@
             <div class="col-sm-10">
               <input type="text" class="form-control" name="quota" min="0" max="" id="addInputQuota" disabled value="{{ lang.add.select_domain }}" required>
               <small class="help-block">0 = ∞</small>
-              <div class="label label-warning addInputQuotaExhausted" style="display:none;">{{ lang.warning.quota_exceeded_scope }}</div>
+              <div class="badge fs-5 bg-warning addInputQuotaExhausted" style="display:none;">{{ lang.warning.quota_exceeded_scope }}</div>
             </div>
           </div>
           <div class="form-group">
@@ -163,7 +163,7 @@
           <div class="form-group">
             <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-default btn-sm" class="form-control" id="key_size" name="key_size">
+              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
                 <option data-subtext="bits">1024</option>
                 <option data-subtext="bits" selected>2048</option>
               </select>
@@ -188,8 +188,8 @@
           <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10 btn-group">
               {% if not skip_sogo %}
-              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{}' href="#">{{ lang.add.add_domain_only }}</button>
-              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"restart_sogo":"1"}' href="#">{{ lang.add.add_domain_restart }}</button>
+              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{}' href="#">{{ lang.add.add_domain_only }}</button>
+              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"restart_sogo":"1"}' href="#">{{ lang.add.add_domain_restart }}</button>
               <div class="clearfix visible-xs"></div>
               {% else %}
               <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{}' href="#">{{ lang.add.add }}</button>
@@ -388,7 +388,7 @@
           <div class="form-group">
             <label class="control-label col-sm-2" for="key_size2">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-default btn-sm" class="form-control" id="key_size2" name="key_size">
+              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size2" name="key_size">
                 <option data-subtext="bits">1024</option>
                 <option data-subtext="bits" selected>2048</option>
               </select>
@@ -625,7 +625,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10 add_filter_btns btn-group">
-              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default validate_sieve" href="#">{{ lang.add.validate }}</button>
+              <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
               <button class="btn btn-xs-lg btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success add_sieve_script" data-action="add_item" data-id="add_filter" data-api-url='add/filter' data-api-attr='{}' href="#" disabled>{{ lang.admin.add }}</button>
               <div class="clearfix visible-xs"></div>
             </div>
diff --git a/data/web/templates/modals/quarantine.twig b/data/web/templates/modals/quarantine.twig
index af866cd8f..de8f8716a 100644
--- a/data/web/templates/modals/quarantine.twig
+++ b/data/web/templates/modals/quarantine.twig
@@ -48,7 +48,7 @@
         </div>
         {% endif %}
         <div class="btn-group dropup" data-acl="{{ acl.quarantine }}">
-          <a class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.quarantine.quick_actions }}</a>
+          <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.quarantine.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems_single" data-item="" data-api-url='edit/qitem' data-api-attr='{"action":"release"}' href="#">{{ lang.quarantine.deliver_inbox }}</a></li>
             <li><hr class="dropdown-divider"></li>
diff --git a/data/web/templates/oauth/authorize.twig b/data/web/templates/oauth/authorize.twig
index 1577d309a..6f78ec00a 100644
--- a/data/web/templates/oauth/authorize.twig
+++ b/data/web/templates/oauth/authorize.twig
@@ -14,7 +14,7 @@
       <div class="form-group">
         <div class="col-sm-10 text-center">
           <button class="btn btn-success" name="authorized" type="submit" value="1">{{ lang.oauth2.permit }}</button>
-          <a href="#" class="btn btn-default" onclick="window.history.back()" role="button">{{ lang.oauth2.deny }}</a>
+          <a href="#" class="btn btn-secondary" onclick="window.history.back()" role="button">{{ lang.oauth2.deny }}</a>
           <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
         </div>
       </div>
diff --git a/data/web/templates/quarantine.twig b/data/web/templates/quarantine.twig
index 6ed4126ac..766bfd9c8 100644
--- a/data/web/templates/quarantine.twig
+++ b/data/web/templates/quarantine.twig
@@ -7,8 +7,8 @@
       <div class="card-header">
         {{ lang.quarantine.quarantine }} <span class="badge badge-info table-lines"></span>
         <div class="btn-group pull-right">
-          <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_quarantine_table" data-table="quarantinetable">{{ lang.quarantine.refresh }}</button>
-          <button type="button" class="btn btn-xs btn-xs-lg btn-default dropdown-toggle" data-bs-toggle="dropdown">{{ lang.quarantine.table_size }}</button>
+          <button class="btn btn-xs btn-xs-lg btn-secondary refresh_table" data-draw="draw_quarantine_table" data-table="quarantinetable">{{ lang.quarantine.refresh }}</button>
+          <button type="button" class="btn btn-xs btn-xs-lg btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.quarantine.table_size }}</button>
           <ul class="dropdown-menu" data-table-id="quarantinetable" role="menu">
             <li><a class="dropdown-item" href="#" data-page-size="10">{{ lang.quarantine.table_size_show_n|format(10) }}</a></li>
             <li><a class="dropdown-item" href="#" data-page-size="20">{{ lang.quarantine.table_size_show_n|format(20) }}</a></li>
@@ -34,8 +34,8 @@
       </div>
       <div class="mass-actions-quarantine">
         <div class="btn-group" data-acl="{{ acl.quarantine }}">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="qitems" href="#"><i class="bi bi-check-all"></i> {{ lang.quarantine.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.quarantine.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="qitems" href="#"><i class="bi bi-check-all"></i> {{ lang.quarantine.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.quarantine.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="qitems" data-api-url='edit/qitem' data-api-attr='{"action":"release"}' href="#">{{ lang.quarantine.deliver_inbox }}</a></li>
             <li><hr class="dropdown-divider"></li>
diff --git a/data/web/templates/tfa_keys.twig b/data/web/templates/tfa_keys.twig
index ad6317254..4e3413756 100644
--- a/data/web/templates/tfa_keys.twig
+++ b/data/web/templates/tfa_keys.twig
@@ -4,7 +4,7 @@
       <form style="display:inline;" method="post">
         <input type="hidden" name="unset_tfa_key" value="{{ key_info.id }}">
         <p>
-          <span style="padding:4px;margin:4px" class="label label-keys label-{% if tfa_id == key_info.id %}success{% else %}default{% endif %}">
+          <span style="padding:4px;margin:4px" class="badge fs-5 bg-keys label-{% if tfa_id == key_info.id %}success{% else %}default{% endif %}">
             {{ key_info.key_id }}
             <a href="#" style="font-weight:bold;color:white" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";'>[{{ lang.admin.remove }}]</a>
           </span>
diff --git a/data/web/templates/user/AppPasswds.twig b/data/web/templates/user/AppPasswds.twig
index c80ebdd91..fcd10f111 100644
--- a/data/web/templates/user/AppPasswds.twig
+++ b/data/web/templates/user/AppPasswds.twig
@@ -6,8 +6,8 @@
   <div class="mass-actions-user">
     <div class="btn-group" data-acl="{{ acl.app_passwds }}">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="apppasswd" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="apppasswd" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
         <ul class="dropdown-menu">
           <li><a class="dropdown-item" data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="apppasswd" data-api-url='edit/app-passwd' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
diff --git a/data/web/templates/user/Pushover.twig b/data/web/templates/user/Pushover.twig
index 408abc928..6efdf6bd1 100644
--- a/data/web/templates/user/Pushover.twig
+++ b/data/web/templates/user/Pushover.twig
@@ -70,7 +70,7 @@
         </div>
         <div class="btn-group mass-actions-user" data-acl="{{ acl.pushover }}">
           <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.user.save }}</a>
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-all"></i> {{ lang.user.pushover_verify }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-all"></i> {{ lang.user.pushover_verify }}</a>
           <div class="clearfix visible-xs"></div>
           <a id="pushover_delete" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailcow_cc_username }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.user.remove }}</a>
         </div>
diff --git a/data/web/templates/user/SpamAliases.twig b/data/web/templates/user/SpamAliases.twig
index e04b84a0e..21fbcf312 100644
--- a/data/web/templates/user/SpamAliases.twig
+++ b/data/web/templates/user/SpamAliases.twig
@@ -9,8 +9,8 @@
   <div class="mass-actions-user">
     <div class="btn-group" data-acl="{{ acl.spam_alias }}">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="tla" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="tla" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
         <ul class="dropdown-menu">
           <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"1"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.hour }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="tla" data-api-url='edit/time_limited_alias' data-api-attr='{"validity":"24"}' href="#">{{ lang.user.expire_in }} 1 {{ lang.user.day }}</a></li>
diff --git a/data/web/templates/user/Spamfilter.twig b/data/web/templates/user/Spamfilter.twig
index ce1940b00..270246247 100644
--- a/data/web/templates/user/Spamfilter.twig
+++ b/data/web/templates/user/Spamfilter.twig
@@ -20,7 +20,7 @@
              data-id="spam_score"
              data-api-url='edit/spam-score'
              data-api-attr='{}'><i class="bi bi-save"></i> {{ lang.user.save_changes }}</a>
-          <a type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected"
+          <a type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-action="edit_selected"
              data-item="{{ mailcow_cc_username }}"
              data-id="spam_score_reset"
              data-api-url='edit/spam-score'
@@ -38,7 +38,7 @@
         <div class="input-group" data-acl="{{ acl.spam_policy }}">
           <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
           <span class="input-group-btn">
-            <button class="btn btn-default" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
+            <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
           </span>
         </div>
       </form>
@@ -47,7 +47,7 @@
       </div>
       <div class="mass-actions-user">
         <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="policy_wl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="delete_selected" data-id="policy_wl_mailbox" data-api-url='delete/mailbox-policy' href="#">{{ lang.mailbox.remove }}</a>
           <div class="clearfix visible-xs-block"></div>
         </div>
@@ -60,7 +60,7 @@
         <div class="input-group" data-acl="{{ acl.spam_policy }}">
           <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
           <span class="input-group-btn">
-            <button class="btn btn-default" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
+            <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
           </span>
         </div>
       </form>
@@ -69,7 +69,7 @@
       </div>
       <div class="mass-actions-user">
         <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="policy_bl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="delete_selected" data-id="policy_bl_mailbox" data-api-url='delete/mailbox-policy' href="#">{{ lang.mailbox.remove }}</a>
           <div class="clearfix visible-xs-block"></div>
         </div>
diff --git a/data/web/templates/user/Syncjobs.twig b/data/web/templates/user/Syncjobs.twig
index 959a129ac..377977ad4 100644
--- a/data/web/templates/user/Syncjobs.twig
+++ b/data/web/templates/user/Syncjobs.twig
@@ -5,8 +5,8 @@
   <div class="mass-actions-user">
     <div class="btn-group" data-acl="{{ acl.syncjobs }}">
       <div class="btn-group">
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+        <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
         <ul class="dropdown-menu">
           <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
           <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
diff --git a/data/web/templates/user/tab-user-auth.twig b/data/web/templates/user/tab-user-auth.twig
index 053c9ba17..90e85c2bf 100644
--- a/data/web/templates/user/tab-user-auth.twig
+++ b/data/web/templates/user/tab-user-auth.twig
@@ -7,11 +7,11 @@
         <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
         <div class="col-md-3 col-xs-12">
           {% if dual_login and allow_admin_email_login == 'n' %}
-            <button disabled class="btn btn-default btn-block btn-xs-lg">
+            <button disabled class="btn btn-secondary btn-block btn-xs-lg">
               <i class="bi bi-inbox-fill"></i> {{ lang.user.open_webmail_sso }}
             </button>
           {% else %}
-            <a target="_blank" href="/sogo-auth.php?login={{ mailcow_cc_username }}" role="button" class="btn btn-default btn-block btn-xs-lg">
+            <a target="_blank" href="/sogo-auth.php?login={{ mailcow_cc_username }}" role="button" class="btn btn-secondary btn-block btn-xs-lg">
               <i class="bi bi-inbox-fill"></i> {{ lang.user.open_webmail_sso }}
             </a>
           {% endif %}
@@ -22,11 +22,11 @@
         <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
         <div class="col-md-9 col-xs-12">
           <p class="help-block help-block-mt-0">{{ lang.user.direct_protocol_access|raw }}</p>
-          {% if mailboxdata.attributes.imap_access == 1 %}<div class="label label-success label-protocol-access">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.smtp_access == 1 %}<div class="label label-success label-protocol-access">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sieve_access == 1 %}<div class="label label-success label-protocol-access">Sieve <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">Sieve <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.pop3_access == 1 %}<div class="label label-success label-protocol-access">POP3 <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">POP3 <i class="bi bi-x-lg"></i></div>{% endif %}
-          {% if mailboxdata.attributes.sogo_access == 1 %}<div class="label label-success label-protocol-access">SOGo <i class="bi bi-check-lg"></i></div>{% else %}<div class="label label-danger label-protocol-access">SOGo <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.imap_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.smtp_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.sieve_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">Sieve <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">Sieve <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.pop3_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">POP3 <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">POP3 <i class="bi bi-x-lg"></i></div>{% endif %}
+          {% if mailboxdata.attributes.sogo_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">SOGo <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">SOGo <i class="bi bi-x-lg"></i></div>{% endif %}
         </div>
       </div>
       <hr>
@@ -121,7 +121,7 @@
           <hr>
           <h4 class="recent-login-success pull-left">{{ lang.user.recent_successful_connections }}</h4>
           <div class="dropdown pull-left pull-xs-right">
-            <button class="btn btn-default btn-xs btn-xs-lg dropdown-toggle" type="button" id="history_sasl_days" data-bs-toggle="dropdown">{{ lang.user.login_history }}</button>
+            <button class="btn btn-secondary btn-xs btn-xs-lg dropdown-toggle" type="button" id="history_sasl_days" data-bs-toggle="dropdown">{{ lang.user.login_history }}</button>
             <ul class="dropdown-menu">
               <li class="login-history" data-days="1"><a class="dropdown-item" href="#">1 {{ lang.user.day }}</a></li>
               <li class="login-history" data-days="7"><a class="dropdown-item active" href="#">1 {{ lang.user.week }}</a></li>
diff --git a/data/web/templates/user/tab-user-settings.twig b/data/web/templates/user/tab-user-settings.twig
index ef7a88e68..e72a75a71 100644
--- a/data/web/templates/user/tab-user-settings.twig
+++ b/data/web/templates/user/tab-user-settings.twig
@@ -7,19 +7,19 @@
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tag_handling }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.delimiter_action }}">
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tagging_options == 'subfolder' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tagging_options == 'subfolder' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subfolder"}'>{{ lang.user.tag_in_subfolder }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tagging_options == 'subject' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tagging_options == 'subject' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subject"}'>{{ lang.user.tag_in_subject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tagging_options == 'none' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tagging_options == 'none' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
@@ -36,13 +36,13 @@
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tls_policy }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="tls_policy"
             data-api-url='edit/tls_policy'
             data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="tls_policy"
@@ -58,25 +58,25 @@
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.quarantine_notification }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'never' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'never' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'hourly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'hourly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'daily' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'daily' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'weekly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_notification == 'weekly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
@@ -91,19 +91,19 @@
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.quarantine_category }}:</div>
         <div class="col-sm-9 col-xs-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'reject' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_category == 'reject' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'add_header' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_category == 'add_header' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'all' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary{% if quarantine_category == 'all' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
@@ -119,14 +119,14 @@
       <div class="row">
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.eas_reset }}:</div>
         <div class="col-sm-9 col-xs-12">
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-acl="{{ acl.eas_reset }}" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="eas_cache" data-api-url='delete/eas_cache' href="#">{{ lang.user.eas_reset_now }}</button>
+          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-acl="{{ acl.eas_reset }}" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="eas_cache" data-api-url='delete/eas_cache' href="#">{{ lang.user.eas_reset_now }}</button>
           <p class="help-block">{{ lang.user.eas_reset_help|raw }}</p>
         </div>
       </div>
       <div class="row">
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.sogo_profile_reset }}:</div>
         <div class="col-sm-9 col-xs-12">
-          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-acl="{{ acl.sogo_profile_reset }}" data-action="delete_selected" data-text="{{ lang.user.sogo_profile_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="sogo_profile" data-api-url='delete/sogo_profile' href="#">{{ lang.user.sogo_profile_reset_now }}</button>
+          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" data-acl="{{ acl.sogo_profile_reset }}" data-action="delete_selected" data-text="{{ lang.user.sogo_profile_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="sogo_profile" data-api-url='delete/sogo_profile' href="#">{{ lang.user.sogo_profile_reset_now }}</button>
           <p class="help-block">{{ lang.user.sogo_profile_reset_help|raw }}</p>
         </div>
       </div>