diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index 92a3b33f..175bc5e9 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-config-admins" role="tabpanel" aria-labelledby="tab-config-admins">
-    <div class="panel panel-danger">
-      <div class="panel-heading xs-show">{{ lang.admin.admin_details }}</div>
-      <div class="panel-body">
+    <div class="card bg-danger text-white">
+      <div class="card-header">{{ lang.admin.admin_details }}</div>
+      <div class="card-body">
         <div class="table-responsive">
           <table class="table table-striped table-condensed" id="adminstable"></table>
         </div>
@@ -127,11 +127,11 @@
               <p class="help-block">{{ lang.admin.api_info|raw }}</p>
             </div>
             <div class="col-lg-6">
-              <div class="panel panel-default">
-                <div class="panel-heading">
-                  <h4 class="panel-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                   <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                     <div class="form-group">
                       <label class="control-label col-sm-3" for="allow_from_ro">{{ lang.admin.api_allow_from }}:</label>
@@ -172,11 +172,11 @@
               </div>
             </div>
             <div class="col-lg-6">
-              <div class="panel panel-default">
-                <div class="panel-heading">
-                  <h4 class="panel-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                   <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                     <div class="form-group">
                       <label class="control-label col-sm-3" for="allow_from_rw">{{ lang.admin.api_allow_from }}:</label>
@@ -221,9 +221,9 @@
       </div>
     </div>
 
-  <div class="panel panel-default">
-    <div class="panel-heading xs-show">{{ lang.admin.domain_admins }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.domain_admins }}</div>
+    <div class="card-body">
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="domainadminstable"></table>
       </div>
diff --git a/data/web/templates/admin/tab-config-customize.twig b/data/web/templates/admin/tab-config-customize.twig
index c55e53ce..2a443830 100644
--- a/data/web/templates/admin/tab-config-customize.twig
+++ b/data/web/templates/admin/tab-config-customize.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-customize" role="tabpanel" aria-labelledby="tab-config-customize">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.customize }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.customize }}</div>
+    <div class="card-body">
       <legend><i class="bi bi-file-image"></i> {{ lang.admin.change_logo }}</legend>
       <p class="help-block">{{ lang.admin.logo_info }}</p>
       <form class="form-inline" role="form" method="post" enctype="multipart/form-data">
diff --git a/data/web/templates/admin/tab-config-dkim.twig b/data/web/templates/admin/tab-config-dkim.twig
index 522266fe..ca5ecef6 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-dkim" role="tabpanel" aria-labelledby="tab-config-dkim">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.dkim_keys }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <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>
diff --git a/data/web/templates/admin/tab-config-f2b.twig b/data/web/templates/admin/tab-config-f2b.twig
index e75086be..73afd34a 100644
--- a/data/web/templates/admin/tab-config-f2b.twig
+++ b/data/web/templates/admin/tab-config-f2b.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-f2b" role="tabpanel" aria-labelledby="tab-config-f2b">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.f2b_parameters }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.f2b_parameters }}</div>
+    <div class="card-body">
       <form class="form" data-id="f2b" role="form" method="post">
         <div class="form-group">
           <label for="f2b_ban_time">{{ lang.admin.f2b_ban_time }}:</label>
diff --git a/data/web/templates/admin/tab-config-fwdhosts.twig b/data/web/templates/admin/tab-config-fwdhosts.twig
index 50479e0d..dd1d96c1 100644
--- a/data/web/templates/admin/tab-config-fwdhosts.twig
+++ b/data/web/templates/admin/tab-config-fwdhosts.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-fwdhosts" role="tabpanel" aria-labelledby="tab-config-fwdhosts">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.forwarding_hosts }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.forwarding_hosts }}</div>
+    <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.forwarding_hosts_hint }}</p>
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="forwardinghoststable"></table>
diff --git a/data/web/templates/admin/tab-config-oauth2.twig b/data/web/templates/admin/tab-config-oauth2.twig
index cd62b2f3..5fd1e262 100644
--- a/data/web/templates/admin/tab-config-oauth2.twig
+++ b/data/web/templates/admin/tab-config-oauth2.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-oauth2" role="tabpanel" aria-labelledby="tab-config-oauth2">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.oauth2_apps }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.oauth2_apps }}</div>
+    <div class="card-body">
       <p>{{ lang.admin.oauth2_info|raw }}</p>
       <div class="table-responsive">
         <table class="table table-striped" id="oauth2clientstable"></table>
diff --git a/data/web/templates/admin/tab-config-password-policy.twig b/data/web/templates/admin/tab-config-password-policy.twig
index e91ea48e..962875fd 100644
--- a/data/web/templates/admin/tab-config-password-policy.twig
+++ b/data/web/templates/admin/tab-config-password-policy.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-password-policy" role="tabpanel" aria-labelledby="tab-config-password-policy">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.password_policy }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.password_policy }}</div>
+    <div class="card-body">
       <form class="form-horizontal" data-id="passwordpolicy" role="form" method="post">
         {% for name, value in password_complexity %}
           {% if name == 'length' %}
diff --git a/data/web/templates/admin/tab-config-quarantine.twig b/data/web/templates/admin/tab-config-quarantine.twig
index 6a04aeb6..7b8e8b6f 100644
--- a/data/web/templates/admin/tab-config-quarantine.twig
+++ b/data/web/templates/admin/tab-config-quarantine.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-quarantine" role="tabpanel" aria-labelledby="tab-config-quarantine">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.quarantine }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.quarantine }}</div>
+    <div class="card-body">
       {% if not q_data.retention_size or not q_data.max_size %}
       <div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div>
       {% endif %}
diff --git a/data/web/templates/admin/tab-config-quota.twig b/data/web/templates/admin/tab-config-quota.twig
index 2a8a9c89..c1f74966 100644
--- a/data/web/templates/admin/tab-config-quota.twig
+++ b/data/web/templates/admin/tab-config-quota.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-quota" role="tabpanel" aria-labelledby="tab-config-quota">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.quota_notifications }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.quota_notifications }}</div>
+    <div class="card-body">
       <p>{{ lang.admin.quota_notifications_info }}</p>
       <form class="form" role="form" data-id="quota_notification" method="post">
         <div class="row">
diff --git a/data/web/templates/admin/tab-config-rsettings.twig b/data/web/templates/admin/tab-config-rsettings.twig
index 8556521d..5523ff6c 100644
--- a/data/web/templates/admin/tab-config-rsettings.twig
+++ b/data/web/templates/admin/tab-config-rsettings.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-rsettings" role="tabpanel" aria-labelledby="tab-config-rsettings">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.rspamd_settings_map }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.rspamd_settings_map }}</div>
+    <div class="card-body">
       <legend data-bs-target="#active_settings_map" style="cursor:pointer" unselectable="on" data-bs-toggle="collapse">
         <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.active_rspamd_settings_map }}
       </legend>
diff --git a/data/web/templates/admin/tab-config-rspamd.twig b/data/web/templates/admin/tab-config-rspamd.twig
index 5b318cf2..26e099cd 100644
--- a/data/web/templates/admin/tab-config-rspamd.twig
+++ b/data/web/templates/admin/tab-config-rspamd.twig
@@ -1,9 +1,9 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-rspamd" role="tabpanel" aria-labelledby="tab-config-rspamd">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h3 class="panel-title">Rspamd UI</h3>
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">Rspamd UI</h3>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <div class="row">
         <div class="col-xs-12 visible-xs">
           <img class="img-responsive" src="/img/rspamd_logo.png" alt="Rspamd UI">
diff --git a/data/web/templates/admin/tab-globalfilter-regex.twig b/data/web/templates/admin/tab-globalfilter-regex.twig
index 91b25f43..07833121 100644
--- a/data/web/templates/admin/tab-globalfilter-regex.twig
+++ b/data/web/templates/admin/tab-globalfilter-regex.twig
@@ -1,9 +1,9 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-globalfilter-regex" role="tabpanel" aria-labelledby="tab-globalfilter-regex">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.admin.rspamd_global_filters }}
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <p>{{ lang.admin.rspamd_global_filters_info }}</p>
       <div id="confirm_show_rspamd_global_filters"{% if show_rspamd_global_filters %} class="hidden"{% endif %}>
         <div class="form-group">
diff --git a/data/web/templates/admin/tab-ldap.twig b/data/web/templates/admin/tab-ldap.twig
index 853c2683..d01529d3 100644
--- a/data/web/templates/admin/tab-ldap.twig
+++ b/data/web/templates/admin/tab-ldap.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-ldap-admins" role="tabpanel" aria-labelledby="tab-config-ldap-admins">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.admins_ldap }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.admins_ldap }}</div>
+    <div class="card-body">
     </div>
   </div>
 </div>
diff --git a/data/web/templates/admin/tab-mailq.twig b/data/web/templates/admin/tab-mailq.twig
index 19c51313..deede18a 100644
--- a/data/web/templates/admin/tab-mailq.twig
+++ b/data/web/templates/admin/tab-mailq.twig
@@ -1,12 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailq" role="tabpanel" aria-labelledby="tab-mailq">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <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>
       </div>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="queuetable"></table>
       </div>
diff --git a/data/web/templates/admin/tab-routing.twig b/data/web/templates/admin/tab-routing.twig
index 2b1f66fe..ad9be408 100644
--- a/data/web/templates/admin/tab-routing.twig
+++ b/data/web/templates/admin/tab-routing.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-routing" role="tabpanel" aria-labelledby="tab-routing">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.relayhosts }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.relayhosts }}</div>
+    <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.relayhosts_hint|raw }}</p>
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="relayhoststable"></table>
@@ -43,9 +43,9 @@
     </div>
   </div>
 
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.transport_maps }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.transport_maps }}</div>
+    <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.transports_hint|raw }}</p>
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="transportstable"></table>
diff --git a/data/web/templates/admin/tab-sys-mails.twig b/data/web/templates/admin/tab-sys-mails.twig
index 5eb1c2b4..c30e053b 100644
--- a/data/web/templates/admin/tab-sys-mails.twig
+++ b/data/web/templates/admin/tab-sys-mails.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-sys-mails" role="tabpanel" aria-labelledby="tab-sys-mails">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.sys_mails }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.sys_mails }}</div>
+    <div class="card-body">
       <form class="form-horizontal" autocapitalize="none" data-id="admin" autocorrect="off" role="form" method="post">
         <div class="form-group">
           <label class="control-label col-sm-2" for="admin_mass_from">{{ lang.admin.from }}:</label>
diff --git a/data/web/templates/debug.twig b/data/web/templates/debug.twig
index 8e8b9686..cb32e4b2 100644
--- a/data/web/templates/debug.twig
+++ b/data/web/templates/debug.twig
@@ -30,11 +30,11 @@
     <div class="tab-content" style="padding-top:20px">
       <div class="debug-log-info">{{ lang.debug.log_info|format(log_lines+1)|raw }}</div>
       <div role="tabpanel" class="tab-pane active" id="tab-containers">
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">{{ lang.debug.disk_usage }}</h3>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">{{ lang.debug.disk_usage }}</h3>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="row">
               <div class="col-sm-3">
                 <p><i class="bi bi-hdd-fill"></i> {{ vmail_df[0] }}</p>
@@ -48,11 +48,11 @@
             </div>
           </div>
         </div>
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">{{ lang.debug.solr_status }}</h3>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">{{ lang.debug.solr_status }}</h3>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="row">
               <div class="col-sm-3">
                 <p><img class="img-responsive" alt="Solr Logo" width="128px" src="data:image/png;base64,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" /></p>
@@ -77,11 +77,11 @@
             </div>
           </div>
         </div>
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">{{ lang.debug.containers_info }}</h3>
+        <div class="card">
+          <div class="card-header">
+            <h3 class="card-title">{{ lang.debug.containers_info }}</h3>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <ul class="list-group">
               {% for container, container_info in containers %}
                 <li class="list-group-item">
@@ -107,15 +107,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-postfix-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Postfix <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="postfix_log"></table>
             </div>
@@ -124,15 +124,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-ui">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading"> Mailcow UI <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="ui_logs"></table>
             </div>
@@ -141,15 +141,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-sasl">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">SASL <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="sasl_logs"></table>
             </div>
@@ -158,15 +158,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-dovecot-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Dovecot <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="dovecot_log"></table>
             </div>
@@ -175,15 +175,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-sogo-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">SOGo <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="sogo_log"></table>
             </div>
@@ -192,15 +192,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-netfilter-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Netfilter <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="netfilter_log"></table>
             </div>
@@ -209,15 +209,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-rspamd-history">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Rspamd history <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <legend>{{ lang.debug.chart_this_server }}</legend>
             <div id="chart-container">
               <canvas id="rspamd_donut" style="width:100%;height:400px"></canvas>
@@ -231,15 +231,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-autodiscover-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Autodiscover <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="autodiscover_log"></table>
             </div>
@@ -248,15 +248,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-watchdog-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Watchdog <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="watchdog_log"></table>
             </div>
@@ -265,15 +265,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-acme-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">ACME <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="acme_log"></table>
             </div>
@@ -282,15 +282,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-api-logs">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">API <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="api_log"></table>
             </div>
@@ -299,15 +299,15 @@
       </div>
 
       <div role="tabpanel" class="tab-pane" id="tab-api-rl">
-        <div class="panel panel-xs-lg panel-default">
-          <div class="panel-heading">Ratelimits <span class="badge badge-info table-lines"></span>
+        <div class="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>
             </div>
           </div>
-          <div class="panel-body">
+          <div class="card-body">
             <p class="help-block">{{ lang.admin.hash_remove_info }}</p>
             <div class="table-responsive">
               <table class="table table-striped table-condensed" id="rl_log"></table>
diff --git a/data/web/templates/domainadmin.twig b/data/web/templates/domainadmin.twig
index c00b64f0..5e2fd436 100644
--- a/data/web/templates/domainadmin.twig
+++ b/data/web/templates/domainadmin.twig
@@ -2,9 +2,9 @@
 
 {% block content %}
 <h3>{{ lang.user.user_settings }}</h3>
-<div class="panel panel-default">
-  <div class="panel-heading">{{ lang.user.user_settings }}</div>
-  <div class="panel-body">
+<div class="card">
+  <div class="card-header">{{ lang.user.user_settings }}</div>
+  <div class="card-body">
     <div class="row">
       <div class="col-sm-offset-3 col-sm-9">
         <p><a href="#pwChangeModal" data-bs-toggle="modal">[{{ lang.user.change_password }}]</a></p>
diff --git a/data/web/templates/edit.twig b/data/web/templates/edit.twig
index 2bce91a2..f1b9e651 100644
--- a/data/web/templates/edit.twig
+++ b/data/web/templates/edit.twig
@@ -3,11 +3,11 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">{{ lang.edit.title }}</h3>
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">{{ lang.edit.title }}</h3>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
         {% block inner_content %}
           {% if access_denied %}
           <div class="alert alert-danger" role="alert">{{ lang.danger.access_denied }}</div>
diff --git a/data/web/templates/index.twig b/data/web/templates/index.twig
index b6af3e6b..cc4815d0 100644
--- a/data/web/templates/index.twig
+++ b/data/web/templates/index.twig
@@ -5,9 +5,9 @@
 {% block content %}
 <div class="row">
   <div class="col-md-offset-3 col-md-6">
-    <div class="panel panel-default panel-login">
-      <div class="panel-heading"><i class="bi bi-person-fill"></i> {{ lang.login.login }}</div>
-      <div class="panel-body">
+    <div class="card card-default card-login">
+      <div class="card-header"><i class="bi bi-person-fill"></i> {{ lang.login.login }}</div>
+      <div class="card-body">
         <div class="text-center mailcow-logo"><img src="{{ logo|default('/img/cow_mailcow.svg') }}" alt="mailcow"></div>
         {% if ui_texts.ui_announcement_text and ui_texts.ui_announcement_active %}
         <div class="alert alert-{{ ui_texts.ui_announcement_type }} rot-enc ui-announcement-alert">{{ ui_texts.ui_announcement_text|rot13 }}</div>
@@ -86,12 +86,12 @@
   </div>
   {% if not oauth2_request %}
   <div class="col-md-offset-3 col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
+    <div class="card card-default">
+      <div class="card-header">
         <a data-bs-toggle="collapse" href="#collapse1"><i class="bi bi-patch-question-fill"></i> {{ lang.start.help }}</a>
       </div>
-      <div id="collapse1" class="panel-collapse collapse">
-        <div class="panel-body">
+      <div id="collapse1" class="card-collapse collapse">
+        <div class="card-body">
           {% if ui_texts.help_text %}
           <p>{{ ui_texts.help_text|raw }}</p>
           {% else %}
diff --git a/data/web/templates/mailbox/tab-bcc.twig b/data/web/templates/mailbox/tab-bcc.twig
index db2be339..d8020be8 100644
--- a/data/web/templates/mailbox/tab-bcc.twig
+++ b/data/web/templates/mailbox/tab-bcc.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-bcc" role="tabpanel" aria-labelledby="tab-bcc">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
@@ -36,8 +36,8 @@
       </div>
     </div>
   </div>
-  <div class="panel panel-default{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
-    <div class="panel-heading">
+  <div class="card{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
+    <div class="card-header">
       {{ 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>
diff --git a/data/web/templates/mailbox/tab-domain-aliases.twig b/data/web/templates/mailbox/tab-domain-aliases.twig
index 4063bf44..1c734903 100644
--- a/data/web/templates/mailbox/tab-domain-aliases.twig
+++ b/data/web/templates/mailbox/tab-domain-aliases.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-domain-aliases" role="tabpanel" aria-labelledby="tab-domain-aliases">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig
index 5ebd07e9..551d6945 100644
--- a/data/web/templates/mailbox/tab-domains.twig
+++ b/data/web/templates/mailbox/tab-domains.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-domains" role="tabpanel" aria-labelledby="tab-domains">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.domains }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         {% if mailcow_cc_role == 'admin' %}
diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
index 25ffbacc..d57f2a72 100644
--- a/data/web/templates/mailbox/tab-filters.twig
+++ b/data/web/templates/mailbox/tab-filters.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-filters" role="tabpanel" aria-labelledby="tab-filters">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
@@ -11,7 +11,7 @@
         </ul>
       </div>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <p class="help-block">{{ lang.mailbox.sieve_info|raw }}</p><br>
     </div>
 {#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
@@ -35,7 +35,7 @@
         <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="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
       </div>
     </div>
-    <div class="panel-body{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
+    <div class="card-body{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
     <div class="row">
       <div class="col-lg-6">
         <h5>Global Prefilter</h5>
diff --git a/data/web/templates/mailbox/tab-mailbox-defaults.twig b/data/web/templates/mailbox/tab-mailbox-defaults.twig
index 86ce1d59..ae023edb 100644
--- a/data/web/templates/mailbox/tab-mailbox-defaults.twig
+++ b/data/web/templates/mailbox/tab-mailbox-defaults.twig
@@ -1,9 +1,9 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailbox-defaults" role="tabpanel" aria-labelledby="tab-mailbox-defaults">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.mailbox_defaults }}
     </div>
-    <div class="panel-body help-block">
+    <div class="card-body help-block">
       {{ lang.mailbox.mailbox_defaults_info }}
     </div>
   </div>
diff --git a/data/web/templates/mailbox/tab-mailboxes.twig b/data/web/templates/mailbox/tab-mailboxes.twig
index aa5c2872..4864533b 100644
--- a/data/web/templates/mailbox/tab-mailboxes.twig
+++ b/data/web/templates/mailbox/tab-mailboxes.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailboxes" role="tabpanel" aria-labelledby="tab-mailboxes">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
diff --git a/data/web/templates/mailbox/tab-mbox-aliases.twig b/data/web/templates/mailbox/tab-mbox-aliases.twig
index 5e2055f3..7bef7354 100644
--- a/data/web/templates/mailbox/tab-mbox-aliases.twig
+++ b/data/web/templates/mailbox/tab-mbox-aliases.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mbox-aliases" role="tabpanel" aria-labelledby="tab-mbox-aliases">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
@@ -11,7 +11,7 @@
         </ul>
       </div>
     </div>
-    <div class="panel-body help-block">
+    <div class="card-body help-block">
       {{ lang.mailbox.alias_domain_alias_hint|raw }}
     </div>
     <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
diff --git a/data/web/templates/mailbox/tab-resources.twig b/data/web/templates/mailbox/tab-resources.twig
index 8ad94304..dbebcfcb 100644
--- a/data/web/templates/mailbox/tab-resources.twig
+++ b/data/web/templates/mailbox/tab-resources.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-resources" role="tabpanel" aria-labelledby="tab-resources">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
@@ -11,7 +11,7 @@
         </ul>
       </div>
     </div>
-    <div class="panel-body help-block">
+    <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>
diff --git a/data/web/templates/mailbox/tab-syncjobs.twig b/data/web/templates/mailbox/tab-syncjobs.twig
index 9bce6e77..f8bcea9a 100644
--- a/data/web/templates/mailbox/tab-syncjobs.twig
+++ b/data/web/templates/mailbox/tab-syncjobs.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-syncjobs"  role="tabpanel" aria-labelledby="tab-syncjobs">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
diff --git a/data/web/templates/mailbox/tab-tls-policy.twig b/data/web/templates/mailbox/tab-tls-policy.twig
index d0d6bbd1..d44a3831 100644
--- a/data/web/templates/mailbox/tab-tls-policy.twig
+++ b/data/web/templates/mailbox/tab-tls-policy.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade{% if mailcow_cc_role != 'admin' %} d-none{% endif %}" id="tab-tls-policy" role="tabpanel" aria-labelledby="tab-tls-policy">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ 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>
diff --git a/data/web/templates/oauth/authorize.twig b/data/web/templates/oauth/authorize.twig
index 289eab34..1577d309 100644
--- a/data/web/templates/oauth/authorize.twig
+++ b/data/web/templates/oauth/authorize.twig
@@ -1,9 +1,9 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<div class="panel panel-default">
-  <div class="panel-heading">{{ lang.oauth2.authorize_app }}</div>
-  <div class="panel-body">
+<div class="card">
+  <div class="card-header">{{ lang.oauth2.authorize_app }}</div>
+  <div class="card-body">
     {% if mailcow_cc_role == 'user' %}
     <p>{{ lang.oauth2.scope_ask_permission }}:</p>
     <dl class="dl-horizontal">
diff --git a/data/web/templates/qhandler.twig b/data/web/templates/qhandler.twig
index b2ef4375..c5524189 100644
--- a/data/web/templates/qhandler.twig
+++ b/data/web/templates/qhandler.twig
@@ -4,9 +4,9 @@
 <div class="row">
 {% if quick_release or quick_delete %}
   <div class="col-md-offset-2 col-md-8">
-    <div class="panel panel-default">
-      <div class="panel-heading"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
-      <div class="panel-body">
+    <div class="card">
+      <div class="card-header"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
+      <div class="card-body">
         <legend>
           {% if quick_release %}
             {{ lang.quarantine.release }}
@@ -21,9 +21,9 @@
 {% else %}
 {% if is_action_release_delete and is_hash_present %}
   <div class="col-md-offset-2 col-md-8">
-    <div class="panel panel-default">
-      <div class="panel-heading"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
-      <div class="panel-body">
+    <div class="card">
+      <div class="card-header"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
+      <div class="card-body">
         {% if action == 'release' %}
         <legend id="qtitle" data-hash="{{ hash }}">{{ lang.quarantine.release }}</legend>
         {% endif %}
diff --git a/data/web/templates/quarantine.twig b/data/web/templates/quarantine.twig
index fa1de9cd..6ed4126a 100644
--- a/data/web/templates/quarantine.twig
+++ b/data/web/templates/quarantine.twig
@@ -3,8 +3,8 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default panel-xs-lg">
-      <div class="panel-heading">
+    <div class="card card-xs-lg">
+      <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>
@@ -22,7 +22,7 @@
       <p style="margin:10px" class="help-block">{{ lang.quarantine.qinfo|raw }}</p>
       <p style="margin:10px">
         {% if not quarantine_settings.retention_size or not quarantine_settings.max_size %}
-        <div class="panel-body"><div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div></div>
+        <div class="card-body"><div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div></div>
         {% else %}
         <p style="margin:10px" class="help-block">
           {{ lang.quarantine.settings_info|format(quarantine_settings.retention_size, quarantine_settings.max_size)|raw }}
diff --git a/data/web/templates/user/AppPasswds.twig b/data/web/templates/user/AppPasswds.twig
index e63c5ff1..c80ebdd9 100644
--- a/data/web/templates/user/AppPasswds.twig
+++ b/data/web/templates/user/AppPasswds.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="AppPasswds">
+<div role="tabpanel" class="tab-pane fade" id="AppPasswds" role="tabpanel" aria-labelledby="AppPasswds">
   <p>{{ lang.user.app_hint|raw }}</p>
   <div class="table-responsive">
     <table class="table table-striped" id="app_passwd_table"></table>
diff --git a/data/web/templates/user/Pushover.twig b/data/web/templates/user/Pushover.twig
index c1761ece..408abc92 100644
--- a/data/web/templates/user/Pushover.twig
+++ b/data/web/templates/user/Pushover.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="Pushover">
+<div role="tabpanel" class="tab-pane fade" id="Pushover" role="tabpanel" aria-labelledby="Pushover">
   <form data-id="pushover" class="form well" method="post">
     <input type="hidden" value="0" name="evaluate_x_prio">
     <input type="hidden" value="0" name="only_x_prio">
diff --git a/data/web/templates/user/SpamAliases.twig b/data/web/templates/user/SpamAliases.twig
index 2342cd02..e04b84a0 100644
--- a/data/web/templates/user/SpamAliases.twig
+++ b/data/web/templates/user/SpamAliases.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="SpamAliases">
+<div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
   <div class="row">
     <div class="col-md-12 col-sm-12 col-xs-12">
       <div class="table-responsive">
diff --git a/data/web/templates/user/Spamfilter.twig b/data/web/templates/user/Spamfilter.twig
index ccd7e7d2..ce1940b0 100644
--- a/data/web/templates/user/Spamfilter.twig
+++ b/data/web/templates/user/Spamfilter.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="Spamfilter">
+<div role="tabpanel" class="tab-pane fade" id="Spamfilter" role="tabpanel" aria-labelledby="Spamfilter">
   <h4>{{ lang.user.spamfilter_behavior }}</h4>
   <div class="row">
     <div class="col-sm-12">
diff --git a/data/web/templates/user/Syncjobs.twig b/data/web/templates/user/Syncjobs.twig
index 2f8aa6d9..959a129a 100644
--- a/data/web/templates/user/Syncjobs.twig
+++ b/data/web/templates/user/Syncjobs.twig
@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="Syncjobs">
+<div role="tabpanel" class="tab-pane fade" id="Syncjobs" role="tabpanel" aria-labelledby="Syncjobs">
   <div class="table-responsive">
     <table class="table table-striped" id="sync_job_table"></table>
   </div>
diff --git a/data/web/templates/user/tab-user-auth.twig b/data/web/templates/user/tab-user-auth.twig
index edd315d4..053c9ba1 100644
--- a/data/web/templates/user/tab-user-auth.twig
+++ b/data/web/templates/user/tab-user-auth.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-user-auth" role="tabpanel" aria-labelledby="tab-user-auth">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_general }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.user.mailbox_general }}</div>
+    <div class="card-body">
       {% if not skip_sogo %}
       <div class="row">
         <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
diff --git a/data/web/templates/user/tab-user-details.twig b/data/web/templates/user/tab-user-details.twig
index da779d8f..e94becae 100644
--- a/data/web/templates/user/tab-user-details.twig
+++ b/data/web/templates/user/tab-user-details.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-details" role="tabpanel" aria-labelledby="tab-user-details">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_details }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.user.mailbox_details }}</div>
+    <div class="card-body">
       <div class="row">
         <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
           <p class="small">{{ lang.user.direct_aliases_desc }}</p>
diff --git a/data/web/templates/user/tab-user-settings.twig b/data/web/templates/user/tab-user-settings.twig
index 272811a2..ef7a88e6 100644
--- a/data/web/templates/user/tab-user-settings.twig
+++ b/data/web/templates/user/tab-user-settings.twig
@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-settings" role="tabpanel" aria-labelledby="tab-user-settings">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_settings }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.user.mailbox_settings }}</div>
+    <div class="card-body">
       {# Show tagging options #}
       <div class="row">
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tag_handling }}:</div>