git subrepo commit mailcow/src/mailcow-dockerized

subrepo: subdir:   "mailcow/src/mailcow-dockerized"
  merged:   "308860af"
upstream: origin:   "https://github.com/mailcow/mailcow-dockerized.git"
  branch:   "master"
  commit:   "3f1a5af8"
git-subrepo: version:  "0.4.5"
  origin:   "???"
  commit:   "???"
Change-Id: I5d51c14b45db54fe706be40a591ddbfcea50d4b0
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig
index 7d63c4f..8806b06 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/admin.twig
@@ -6,42 +6,42 @@
 <br>
 <form class="form-horizontal" data-id="editadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" onkeyup="this.value = this.value.toLowerCase();" required value="{{ admin }}" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editadmin" data-item="{{ admin }}" data-api-url='edit/admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editadmin" data-item="{{ admin }}" data-api-url='edit/admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig
index 7ed5d7c..83a3760 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/alias.twig
@@ -9,16 +9,16 @@
   {% if not skip_sogo %}
   <input type="hidden" value="0" name="sogo_visible">
   {% endif %}
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="address">{{ lang.edit.alias }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="address" value="{{ result.address }}" />
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="goto">{{ lang.edit.target_address|raw }}</label>
     <div class="col-sm-10">
-      <textarea id="textarea_alias_goto" class="form-control" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
+      <textarea id="textarea_alias_goto" class="form-control mb-4" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
       <div class="checkbox">
         <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_null"{% if result.goto == 'null@localhost' %} checked{% endif %}> {{ lang.add.goto_null }}</label>
       </div>
@@ -33,34 +33,34 @@
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="sogo_visible"{% if result.sogo_visible == '1' %} checked{% endif %}> {{ lang.edit.sogo_visible }}</label>
       </div>
-      <p class="help-block">{{ lang.edit.sogo_visible_info }}</p>
+      <p class="text-muted">{{ lang.edit.sogo_visible_info }}</p>
       {% endif %}
     </div>
   </div>
   <hr>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="private_">{{ lang.edit.private_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="private_comment" value="{{ result.private_comment }}" />
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="public_comment">{{ lang.edit.public_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="public_comment" value="{{ result.public_comment }}" />
     </div>
   </div>
   <hr>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editalias" data-item="{{ alias }}" data-api-url='edit/alias' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editalias" data-item="{{ alias }}" data-api-url='edit/alias' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig
index 2580b5f..808d128 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/aliasdomain.twig
@@ -5,7 +5,7 @@
 <h4>{{ lang.edit.edit_alias_domain }}</h4>
 <form class="form-horizontal" data-id="editaliasdomain" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="target_domain">{{ lang.edit.target_domain }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="addSelectDomain" name="target_domain" required>
@@ -15,42 +15,36 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editaliasdomain" data-item="{{ alias_domain }}" data-api-url='edit/alias-domain' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-4">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editaliasdomain" data-item="{{ alias_domain }}" data-api-url='edit/alias-domain' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
 <hr>
 <form data-id="domratelimit" class="form-inline well" method="post">
-  <div class="form-group">
-    <label class="control-label">{{ lang.acl.ratelimit }}</label>
-    <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-  </div>
-  <div class="form-group">
-    <select name="rl_frame" class="form-control">
-      {% include 'mailbox/rl-frame.twig' %}
-    </select>
-  </div>
-  <div class="form-group">
-    <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-  </div>
+  <label class="control-label mb-2">{{ lang.acl.ratelimit }}</label>
+  <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+  <select name="rl_frame" class="form-control">
+    {% include 'mailbox/rl-frame.twig' %}
+  </select>
+  <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
 </form>
 {% if dkim %}
 <hr>
 <div class="row">
-  <div class="col-xs-12 col-sm-2">
+  <div class="col-12 col-sm-2">
     <p>Domain: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
   </div>
-  <div class="col-xs-12 col-sm-10">
-    <pre>{{ dkim.dkim_txt }}</pre>
+  <div class="col-12 col-sm-10">
+    <pre class="p-2">{{ dkim.dkim_txt }}</pre>
   </div>
 </div>
 {% endif %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig
index 046a34f..fcd9d04 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/app-passwd.twig
@@ -6,32 +6,32 @@
 <form class="form-horizontal" data-pwgen-length="32" data-id="editapp" role="form" method="post">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="protocols">
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="app_name">{{ lang.edit.app_name }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="app_name" id="app_name" value="{{ result.name }}" required maxlength="255">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="protocols">{{ lang.edit.app_passwd_protocols }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="protocols" name="protocols" multiple>
@@ -44,9 +44,9 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editapp" data-item="{{ result.id }}" data-api-url='edit/app-passwd' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editapp" data-item="{{ result.id }}" data-api-url='edit/app-passwd' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig
index e50239d..f7d0c5c 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/bcc.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editbcc" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
     <div class="col-sm-10">
       <input value="{{ result.bcc_dest }}" type="text" class="form-control" name="bcc_dest" id="bcc_dest">
       <small>{{ lang.edit.bcc_dest_format|raw }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="type">{{ lang.mailbox.bcc_map_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="type" id="type" required>
@@ -22,16 +22,16 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editbcc" data-item="{{ bcc }}" data-api-url='edit/bcc' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editbcc" data-item="{{ bcc }}" data-api-url='edit/bcc' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain-templates.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain-templates.twig
new file mode 100644
index 0000000..5a0cbb6
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain-templates.twig
@@ -0,0 +1,136 @@
+{% extends 'edit.twig' %}
+
+{% block inner_content %}
+{% if result %}
+<div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
+  <form data-id="editdomain_template" class="form-horizontal" role="form" method="post">
+
+    <input type="hidden" value="0" name="active">
+    <input type="hidden" value="0" name="backupmx">
+    <input type="hidden" value="0" name="gal">
+    <input type="hidden" value="0" name="relay_all_recipients">
+    <input type="hidden" value="0" name="relay_unknown_only">
+
+    {% if mailcow_cc_role == 'admin' %}
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="max_num_aliases_for_domain">{{ lang.mailbox.template }}</label>
+      <div class="col-sm-10">
+
+        <div class="input-group mb-3">
+          <input type="text" name="template" class="form-control" aria-label="Text input with dropdown button" value="{{ template.template }}" />
+        </div>
+      </div>
+
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+      <div class="col-sm-10">
+        <div class="form-control tag-box">
+          <input id="tags" type="text" class="tag-input">
+          <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+          <input type="hidden" value='{{ template.attributes.tags|json_encode }}' name="tags" class="tag-values" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="max_num_aliases_for_domain">{{ lang.edit.max_aliases }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_num_aliases_for_domain" value="{{ template.attributes.max_num_aliases_for_domain }}">
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="max_num_mboxes_for_domain">{{ lang.edit.max_mailboxes }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_num_mboxes_for_domain" value="{{ template.attributes.max_num_mboxes_for_domain }}">
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="def_quota_for_mbox">{{ lang.edit.mailbox_quota_def }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="def_quota_for_mbox" value="{{ (template.attributes.def_quota_for_mbox / 1048576) }}">
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="max_quota_for_mbox">{{ lang.edit.max_quota }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_quota_for_mbox" value="{{ (template.attributes.max_quota_for_mbox / 1048576) }}">
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="max_quota_for_domain">{{ lang.edit.domain_quota }}</label>
+      <div class="col-sm-10">
+        <input type="number" class="form-control" name="max_quota_for_domain" value="{{ (template.attributes.max_quota_for_domain / 1048576) }}">
+      </div>
+    </div>
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="gal"{% if template.attributes.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
+          <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="active"{% if template.attributes.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="row">
+      <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
+      <div class="col-sm-10">
+        <input name="rl_value" type="number" value="{{ template.attributes.rl_value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+        <select name="rl_frame" class="form-control">
+          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
+          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
+          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
+          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
+        </select>
+      </div>
+    </div>
+    {% endif %}
+    <hr>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
+      <div class="col-sm-10">
+        <input class="form-control" id="dkim_selector" name="dkim_selector" value="{{ template.attributes.dkim_selector }}">
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
+      <div class="col-sm-10">
+        <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+          <option value="1024" data-subtext="bits" {% if template.attributes.key_size == 1024 %} selected{% endif %}>1024</option>
+          <option value="2048" data-subtext="bits" {% if template.attributes.key_size == 2048 %} selected{% endif %}>2048</option>
+        </select>
+      </div>
+    </div>
+    <hr>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
+      <div class="col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="backupmx"{% if template.attributes.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
+          <br>
+          <label><input type="checkbox" value="1" name="relay_all_recipients"{% if template.attributes.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
+          <p>{{ lang.edit.relay_all_info|raw }}</p>
+          <label><input type="checkbox" value="1" name="relay_unknown_only"{% if template.attributes.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
+          <br>
+          <p>{{ lang.edit.relay_transport_info|raw }}</p>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editdomain_template" data-item="{{ template.id }}" data-api-url='edit/domain/template' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+      </div>
+    </div>
+  </form>
+</div>
+{% else %}
+  {{ parent() }}
+{% endif %}
+{% endblock %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig
index 2ece7ff..0c42488 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domain.twig
@@ -2,28 +2,44 @@
 
 {% block inner_content %}
 {% if result %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="active"><a data-toggle="tab" href="#dedit">{{ lang.edit.domain }}</a></li>
-  <li><a data-toggle="tab" href="#dratelimit">{{ lang.edit.ratelimit }}</a></li>
-  <li><a data-toggle="tab" href="#dspamfilter">{{ lang.edit.spam_filter }}</a></li>
-  <li><a data-toggle="tab" href="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</a></li>
+<ul class="nav nav-tabs" role="tablist">
+  <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dedit">{{ lang.edit.domain }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dratelimit">{{ lang.edit.ratelimit }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dspamfilter">{{ lang.edit.spam_filter }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</button></li>
 </ul>
 <hr>
 <div class="tab-content">
-  <div id="dedit" class="tab-pane in active">
+  <div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
     <form data-id="editdomain" class="form-horizontal" role="form" method="post">
       <input type="hidden" value="0" name="active">
       <input type="hidden" value="0" name="backupmx">
       <input type="hidden" value="0" name="gal">
       <input type="hidden" value="0" name="relay_all_recipients">
       <input type="hidden" value="0" name="relay_unknown_only">
-      <div class="form-group" data-acl="{{ acl.domain_desc }}">
+      <div class="row mb-2" data-acl="{{ acl.domain_desc }}">
         <label class="control-label col-sm-2" for="description">{{ lang.edit.description }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="description" value="{{ result.description }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
+        <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+        <div class="col-sm-10">
+          <div class="form-control tag-box">
+            {% for tag in domain_details.tags %}
+              <span data-action='delete_selected' data-item="{{ tag|url_encode }}" data-id="domain_tag_{{ tag }}" data-api-url='delete/domain/tag/{{ domain }}' class="badge bg-primary tag-badge btn-badge">
+                <i class="bi bi-tag-fill"></i> 
+                {{ tag }}
+              </span>
+            {% endfor %}
+            <input type="text" class="tag-input">
+            <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+            <input type="hidden" value="" name="tags" class="tag-values" />
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.domain_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control">
@@ -42,37 +58,37 @@
         </div>
       </div>
       {% if mailcow_cc_role == 'admin' %}
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="aliases">{{ lang.edit.max_aliases }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="aliases" value="{{ result.max_num_aliases_for_domain }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="mailboxes">{{ lang.edit.max_mailboxes }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="mailboxes" value="{{ result.max_num_mboxes_for_domain }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="defquota">{{ lang.edit.mailbox_quota_def }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="defquota" value="{{ (result.def_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="maxquota">{{ lang.edit.max_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="maxquota" value="{{ (result.max_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.domain_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="quota" value="{{ (result.max_quota_for_domain / 1048576) }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
         <div class="col-sm-10">
           <div class="checkbox">
@@ -88,126 +104,125 @@
         </div>
       </div>
       {% endif %}
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
-            <small class="help-block">{{ lang.edit.gal_info|raw }}</small>
+            <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
           </div>
         </div>
       </div>
       <hr>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
           </div>
         </div>
       </div>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
-          <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editdomain" data-item="{{ domain }}" data-api-url='edit/domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editdomain" data-item="{{ domain }}" data-api-url='edit/domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
+          <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
+          <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
         </div>
       </div>
     </form>
     {% if dkim %}
     <hr>
     <div class="row">
-      <div class="col-xs-12 col-sm-2">
+      <div class="col-12 col-sm-2">
         <p>Domain: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
       </div>
-      <div class="col-xs-12 col-sm-10">
-        <pre>{{ dkim.dkim_txt }}</pre>
+      <div class="col-12 col-sm-10">
+        <pre class="p-2">{{ dkim.dkim_txt }}</pre>
       </div>
     </div>
     {% endif %}
   </div>
-  <div id="dratelimit" class="tab-pane">
+  <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
     <form data-id="domratelimit" class="form-inline well" method="post">
-      <div class="form-group">
-        <label class="control-label">{{ lang.edit.ratelimit }}</label>
-        <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-      </div>
-      <div class="form-group">
-        <select name="rl_frame" class="form-control">
-          {% include 'mailbox/rl-frame.twig' %}
-        </select>
-      </div>
-      <div class="form-group">
-        <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+      <div class="row">
+        <div class="col-12">
+          <label class="control-label mb-2">{{ lang.edit.ratelimit }}</label>
+          <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
+            {% include 'mailbox/rl-frame.twig' %}
+          </select>
+          <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+        </div>
       </div>
     </form>
   </div>
-  <div id="dspamfilter" class="tab-pane">
+  <div id="dspamfilter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-spamfilter">
     <div class="row">
       <div class="col-sm-6">
         <h4>{{ lang.user.spamfilter_wl }}</h4>
         <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
-        <form class="form-inline space20" data-id="add_wl_policy_domain">
+        <form class="form-inline mb-4" data-id="add_wl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
-                      <button class="btn btn-default" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
                     </span>
           </div>
         </form>
-        <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="wl_policy_domain_table"></table>
-        </div>
+        <table id="wl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
         <div class="mass-actions-user">
           <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_wl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a>
-            <div class="clearfix visible-xs"></div>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_wl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a>
           </div>
         </div>
       </div>
       <div class="col-sm-6">
         <h4>{{ lang.user.spamfilter_bl }}</h4>
         <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
-        <form class="form-inline space20" data-id="add_bl_policy_domain">
+        <form class="form-inline mb-4" data-id="add_bl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
-                      <button class="btn btn-default" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
                     </span>
           </div>
         </form>
-        <div class="table-responsive">
-          <table class="table table-striped table-condensed" id="bl_policy_domain_table"></table>
-        </div>
+        <table id="bl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
         <div class="mass-actions-user">
           <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-default" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-            <a class="btn btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_bl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a></li>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_bl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a></li>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div id="dqwbcc" class="tab-pane">
+  <div id="dqwbcc" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-qwbcc">
     <div class="row">
       <div class="col-sm-12">
         <h4>{{ lang.edit.quota_warning_bcc }}</h4>
         <p>{{ lang.edit.quota_warning_bcc_info|raw }}</p>
         <form class="form-horizontal" data-id="quota_bcc">
           <input type="hidden" value="0" name="active">
-          <div class="form-group">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="script_data">{{ lang.edit.target_address|raw }}:</label>
             <div class="col-sm-10">
               <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="bcc_rcpt" name="bcc_rcpt">{{ quota_notification_bcc.bcc_rcpts|join("\n") }}</textarea>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
+          <div class="row mb-4">
+            <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
               </div>
             </div>
           </div>
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="quota_bcc" data-item="quota_bcc" data-api-url='edit/quota_notification_bcc' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
+          <div class="row">
+            <div class="offset-sm-2 col-sm-10">
+              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="quota_bcc" data-item="quota_bcc" data-api-url='edit/quota_notification_bcc' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
             </div>
           </div>
         </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig
index 4381843..d241fa5 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/domainadmin.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editdomainadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" value="{{ domain_admin }}" required onkeyup="this.value = this.value.toLowerCase();" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="domains">{{ lang.edit.domains }}</label>
     <div class="col-sm-10">
       <select data-live-search="true" class="full-width-select" name="domains" multiple required>
@@ -26,54 +26,50 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editdomainadmin" data-item="{{ domain_admin }}" data-api-url='edit/domain-admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-4">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editdomainadmin" data-item="{{ domain_admin }}" data-api-url='edit/domain-admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
 <form data-id="daacl" class="form-inline well" method="post">
   <div class="row">
     <div class="col-sm-1">
-      <p class="help-block">ACL</p>
+      <p class="text-muted">ACL</p>
     </div>
     <div class="col-sm-10">
-      <div class="form-group">
-        <select id="da_acl" name="da_acl" size="10" data-container="body" multiple>
-          {% for acl, val in da_acls %}
-          <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      <div class="form-group">
-        <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-      </div>
+      <select class="mb-2" id="da_acl" name="da_acl" size="10" data-container="body" multiple>
+        {% for acl, val in da_acls %}
+        <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
+        {% endfor %}
+      </select>
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary mb-2" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig
index 5aa6923..ff4ac4e 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/filter.twig
@@ -5,13 +5,13 @@
 <h4>Filter</h4>
 <form class="form-horizontal" data-id="editfilter" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="script_desc">{{ lang.edit.sieve_desc }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="script_desc" id="script_desc" value="{{ result.script_desc }}" required maxlength="255">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="filter_type">{{ lang.edit.sieve_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="filter_type" id="filter_type" required>
@@ -20,22 +20,22 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="script_data">Script:</label>
     <div class="col-sm-10">
       <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control textarea-code" rows="20" id="script_data" name="script_data" required>{{ result.script_data|raw }}</textarea>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editfilter" data-item="{{ result.id }}" data-api-url='edit/filter' data-api-attr='{}' href="#">{{ lang.edit.validate_save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editfilter" data-item="{{ result.id }}" data-api-url='edit/filter' data-api-attr='{}' href="#">{{ lang.edit.validate_save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox-templates.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox-templates.twig
new file mode 100644
index 0000000..fea99bd
--- /dev/null
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox-templates.twig
@@ -0,0 +1,169 @@
+{% extends 'edit.twig' %}
+
+{% block inner_content %}
+{% if result %}
+<hr>
+<div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
+  <form class="form-horizontal" data-id="editmailbox_template" role="form" method="post">
+
+    <input type="hidden" value="default" name="sender_acl">
+    <input type="hidden" value="0" name="force_pw_update">
+    <input type="hidden" value="0" name="sogo_access">
+    <input type="hidden" value="0" name="protocol_access">     
+         
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="template">{{ lang.mailbox.template }}</label>
+      <div class="col-sm-10">
+        <div class="input-group mb-3">
+          <input type="text" name="template" class="form-control" aria-label="Text input with dropdown button" value="{{ template.template }}" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+      <div class="col-sm-10">
+        <div class="form-control tag-box">
+          <input id="tags" type="text" class="tag-input">
+          <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+          <input type="hidden" value='{{ template.attributes.tags|json_encode }}' name="tags" class="tag-values" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}</label>
+      <div class="col-sm-10">
+        <input type="number" name="quota" class="w-100 form-control" min="0" value="{{ template.attributes.quota / 1048576 }}">
+        <small class="text-muted">0 = ∞</small>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
+      <div class="col-sm-10">
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_never" autocomplete="off" value="never" {% if template.attributes.quarantine_notification == 'never' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_never">{{ lang.user.never }}</label>
+
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_hourly" autocomplete="off" value="hourly" {% if template.attributes.quarantine_notification == 'hourly' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_daily" autocomplete="off" value="daily" {% if template.attributes.quarantine_notification == 'daily' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
+
+          <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_weekly" autocomplete="off" value="weekly" {% if template.attributes.quarantine_notification == 'weekly' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+        </div>
+        <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
+      <div class="col-sm-10">
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject" {% if template.attributes.quarantine_category == 'reject' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
+          
+          <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header" {% if template.attributes.quarantine_category == 'add_header' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+          
+          <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all" {% if template.attributes.quarantine_category == 'all' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
+        </div>
+        <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
+      <div class="col-sm-10">
+        <div class="btn-group">
+          <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1" {% if template.attributes.tls_enforce_in == '1' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+          
+          <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1" {% if template.attributes.tls_enforce_out == '1' %}checked{% endif %}>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <label class="control-label col-sm-2" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
+      <div class="col-sm-10">
+        <select name="protocol_access" multiple class="form-control">
+          <option value="imap"{% if template.attributes.imap_access == '1' %} selected{% endif %}>IMAP</option>
+          <option value="pop3"{% if template.attributes.pop3_access == '1' %} selected{% endif %}>POP3</option>
+          <option value="smtp"{% if template.attributes.smtp_access == '1' %} selected{% endif %}>SMTP</option>
+          <option value="sieve"{% if template.attributes.sieve_access == '1' %} selected{% endif %}>Sieve</option>
+        </select>
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2">ACL</label>
+      <div class="col-sm-10">
+        <select id="template_user_acl" name="acl" size="10" multiple class="form-control">                  
+          <option value="spam_alias" {% if template.attributes.acl_spam_alias == '1' %} selected{% endif %}>{{ lang.acl["spam_alias"] }}</option>
+          <option value="tls_policy" {% if template.attributes.acl_tls_policy == '1' %} selected{% endif %}>{{ lang.acl["tls_policy"] }}</option>
+          <option value="spam_score" {% if template.attributes.acl_spam_score == '1' %} selected{% endif %}>{{ lang.acl["spam_score"] }}</option>
+          <option value="spam_policy" {% if template.attributes.acl_spam_policy == '1' %} selected{% endif %}>{{ lang.acl["spam_policy"] }}</option>
+          <option value="delimiter_action" {% if template.attributes.acl_delimiter_action == '1' %} selected{% endif %}>{{ lang.acl["delimiter_action"] }}</option>
+          <option value="syncjobs" {% if template.attributes.acl_syncjobs == '1' %} selected{% endif %}>{{ lang.acl["syncjobs"] }}</option>
+          <option value="eas_reset" {% if template.attributes.acl_eas_reset == '1' %} selected{% endif %}>{{ lang.acl["eas_reset"] }}</option>
+          <option value="sogo_profile_reset" {% if template.attributes.acl_sogo_profile_reset == '1' %} selected{% endif %}>{{ lang.acl["sogo_profile_reset"] }}</option>
+          <option value="pushover" {% if template.attributes.acl_pushover == '1' %} selected{% endif %}>{{ lang.acl["pushover"] }}</option>
+          <option value="quarantine" {% if template.attributes.acl_quarantine == '1' %} selected{% endif %}>{{ lang.acl["quarantine"] }}</option>
+          <option value="quarantine_attachments" {% if template.attributes.acl_quarantine_attachments == '1' %} selected{% endif %}>{{ lang.acl["quarantine_attachments"] }}</option>
+          <option value="quarantine_notification" {% if template.attributes.acl_quarantine_notification == '1' %} selected{% endif %}>{{ lang.acl["quarantine_notification"] }}</option>
+          <option value="quarantine_category" {% if template.attributes.acl_quarantine_category == '1' %} selected{% endif %}>{{ lang.acl["quarantine_category"] }}</option>
+          <option value="app_passwds" {% if template.attributes.acl_app_passwds == '1' %} selected{% endif %}>{{ lang.acl["app_passwds"] }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="row mb-4">
+      <label class="control-label col-sm-2">{{ lang.acl.ratelimit }}</label>
+      <div class="col-sm-10">
+        <input name="rl_value" type="number" autocomplete="off" value="{{ template.attributes.rl_value }}" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+        <select name="rl_frame" class="form-control">
+          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
+          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
+          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
+          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
+        </select>
+        <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+      </div>
+    </div>
+    <hr>
+    <div class="row my-2">
+      <div class="offset-sm-2 col-sm-10">
+        <select name="active" class="form-control">
+          <option value="1"{% if template.attributes.active == '1' %} selected{% endif %}>{{ lang.edit.active }}</option>
+          <option value="2"{% if template.attributes.active == '2' %} selected{% endif %}>{{ lang.edit.disable_login }}</option>
+          <option value="0"{% if template.attributes.active == '0' %} selected{% endif %}>{{ lang.edit.inactive }}</option>
+        </select>
+      </div>
+    </div>
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="force_pw_update"{% if template.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
+          <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
+        </div>
+      </div>
+    </div>
+    {% if not skip_sogo %}
+    <div class="row">
+      <div class="offset-sm-2 col-sm-10">
+        <div class="checkbox">
+          <label><input type="checkbox" value="1" name="sogo_access"{% if template.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
+          <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+    <div class="row my-2">
+      <div class="offset-sm-2 col-sm-10">
+        <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox_template" data-item="{{ template.id }}" data-api-url='edit/mailbox/template' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+      </div>
+    </div>
+  </form>
+</div>
+{% else %}
+  {{ parent() }}
+{% endif %}
+{% endblock %}
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig
index 4447ccb..289638d 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/mailbox.twig
@@ -2,36 +2,52 @@
 
 {% block inner_content %}
 {% if result %}
-<ul class="nav nav-tabs responsive-tabs" role="tablist">
-  <li class="active"><a data-toggle="tab" href="#medit">{{ lang.edit.mailbox }}</a></li>
-  <li><a data-toggle="tab" href="#mpushover">{{ lang.edit.pushover }}</a></li>
-  <li><a data-toggle="tab" href="#macl">{{ lang.edit.acl }}</a></li>
-  <li><a data-toggle="tab" href="#mrl">{{ lang.edit.ratelimit }}</a></li>
+<ul class="nav nav-tabs" role="tablist">
+  <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#medit">{{ lang.edit.mailbox }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mpushover">{{ lang.edit.pushover }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#macl">{{ lang.edit.acl }}</button></li>
+  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mrl">{{ lang.edit.ratelimit }}</button></li>
 </ul>
 <hr>
 <div class="tab-content">
-  <div id="medit" class="tab-pane in active">
+  <div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
     <form class="form-horizontal" data-id="editmailbox" role="form" method="post">
       <input type="hidden" value="default" name="sender_acl">
       <input type="hidden" value="0" name="force_pw_update">
       <input type="hidden" value="0" name="sogo_access">
       <input type="hidden" value="0" name="protocol_access">
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="name">{{ lang.edit.full_name }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="name" value="{{ result.name }}">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
+        <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+        <div class="col-sm-10">
+          <div class="form-control tag-box">
+            {% for tag in mailbox_details.tags %}
+              <span data-action='delete_selected' data-item="{{ tag }}" data-id="mailbox_tag_{{ tag }}" data-api-url='delete/mailbox/tag/{{ mailbox }}' class="badge bg-primary tag-badge btn-badge">
+                <i class="bi bi-tag-fill"></i> 
+                {{ tag }}
+              </span>
+            {% endfor %}
+            <input type="text" class="tag-input">
+            <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+            <input type="hidden" value="" name="tags" class="tag-values" />
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}
-          <br><span id="quotaBadge" class="badge">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
+          <br><span id="quotaBadge" class="badge bg-info">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
         </label>
         <div class="col-sm-10">
           <input type="number" name="quota" style="width:100%" min="0" max="{{ (result.max_new_quota / 1048576) }}" value="{{ (result.quota / 1048576) }}" class="form-control">
-          <small class="help-block">0 = ∞</small>
+          <small class="text-muted">0 = ∞</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.edit.sender_acl }}</label>
         <div class="col-sm-10">
           <select data-live-search="true" data-width="100%" style="width:100%" id="editSelectSenderACL" name="sender_acl" size="10" multiple>
@@ -66,13 +82,13 @@
             {% endfor %}
           </select>
           <div id="sender_acl_disabled"><i class="bi bi-shield-exclamation"></i> {{ lang.edit.sender_acl_disabled|raw }}</div>
-          <small class="help-block">{{ lang.edit.sender_acl_info|raw }}</small>
+          <small class="text-muted d-block">{{ lang.edit.sender_acl_info|raw }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
-          <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control space20">
+          <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control mb-4">
             {% for rlyhost in rlyhosts %}
               <option
                 style="{% if rlyhost.active != '1' %}background: #ff4136; color: #fff{% endif %}"
@@ -85,113 +101,110 @@
               {{ lang.edit.none_inherit }}
             </option>
           </select>
-          <p class="visible-xs" style="margin: 0;padding: 0">&nbsp;</p>
-          <small class="help-block">{{ lang.edit.mailbox_relayhost_info }}</small>
+          <p class="d-block d-sm-none" style="margin: 0;padding: 0">&nbsp;</p>
+          <small class="text-muted d-block">{{ lang.edit.mailbox_relayhost_info }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'never' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'never' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'hourly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'hourly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'daily' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'daily' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_notification == 'weekly' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'weekly' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"weekly"}'>{{ lang.user.weekly }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block"><small>{{ lang.user.quarantine_notification_info }}</small></p>
+          <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'reject' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'reject' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'add_header' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'add_header' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if quarantine_category == 'all' %} active{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'all' %} active{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"all"}'>{{ lang.user.q_all }}</button>
-            <div class="clearfix visible-xs"></div>
           </div>
-          <p class="help-block"><small>{{ lang.user.quarantine_category_info }}</small></p>
+          <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="tls_policy"
-            data-api-url='edit/tls_policy'
-            data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="tls_policy"
-            data-api-url='edit/tls_policy'
-            data-api-attr='{"tls_enforce_out": {% if get_tls_policy.tls_enforce_out == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_out }}</button>
-            <div class="clearfix visible-xs"></div>
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
+              data-action="edit_selected"
+              data-item="{{ mailbox }}"
+              data-id="tls_policy"
+              data-api-url='edit/tls_policy'
+              data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary{% if get_tls_policy.tls_enforce_out == '1' %} active"{% endif %}"
+              data-action="edit_selected"
+              data-item="{{ mailbox }}"
+              data-id="tls_policy"
+              data-api-url='edit/tls_policy'
+              data-api-attr='{"tls_enforce_out": {% if get_tls_policy.tls_enforce_out == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_out }}</button>
           </div>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
         <div class="col-sm-10">
           <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="{{ lang.edit.unchanged_if_empty }}" autocomplete="new-password">
         </div>
       </div>
-      <div class="form-group">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
         <div class="col-sm-10">
           <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
         </div>
       </div>
-      <div data-acl="{{ acl.extend_sender_acl }}" class="form-group">
+      <div data-acl="{{ acl.extend_sender_acl }}" class="row mb-4">
         <label class="control-label col-sm-2" for="extended_sender_acl">{{ lang.edit.extended_sender_acl }}</label>
         <div class="col-sm-10">
           {% if sender_acl_handles.external_sender_aliases %}
             {% set ext_sender_acl = sender_acl_handles.external_sender_aliases|join(', ') %}
           {% endif %}
           <input type="text" class="form-control" name="extended_sender_acl" value="{{ ext_sender_acl }}" placeholder="user1@example.com, user2@example.org, @example.com, ...">
-          <small class="help-block">{{ lang.edit.extended_sender_acl_info|raw }}</small>
+          <small class="text-muted">{{ lang.edit.extended_sender_acl_info|raw }}</small>
         </div>
       </div>
-      <div class="form-group">
+      <div class="row">
         <label class="control-label col-sm-2" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.protocol_access }}" name="protocol_access" multiple class="form-control">
@@ -202,16 +215,16 @@
           </select>
         </div>
       </div>
-      <div hidden data-acl="{{ acl.smtp_ip_access }}" class="form-group">
+      <div hidden data-acl="{{ acl.smtp_ip_access }}" class="row">
         <label class="control-label col-sm-2" for="allow_from_smtp">{{ lang.edit.allow_from_smtp }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="allow_from_smtp" value="{{ allow_from_smtp }}" placeholder="1.1.1.1, 10.2.0.0/24, ...">
-          <small class="help-block">{{ lang.edit.allow_from_smtp_info }}</small>
+          <small class="text-muted">{{ lang.edit.allow_from_smtp_info }}</small>
         </div>
       </div>
       <hr>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
           <select name="active" class="form-control">
             <option value="1"{% if result.active == '1' %} selected{% endif %}>{{ lang.edit.active }}</option>
             <option value="2"{% if result.active == '2' %} selected{% endif %}>{{ lang.edit.disable_login }}</option>
@@ -219,151 +232,163 @@
           </select>
         </div>
       </div>
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
-            <small class="help-block">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
+            <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
           </div>
         </div>
       </div>
       {% if not skip_sogo %}
-      <div data-acl="{{ acl.sogo_access }}" class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
+      <div data-acl="{{ acl.sogo_access }}" class="row">
+        <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
-            <small class="help-block">{{ lang.edit.sogo_access_info }}</small>
+            <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
           </div>
         </div>
       </div>
       {% endif %}
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
-          <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="offset-sm-2 col-sm-10">
+          <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
+          <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
         </div>
       </div>
     </form>
   </div>
-  <div id="mpushover" class="tab-pane">
+  <div id="mpushover" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-pushover">
     <form data-id="pushover" class="form well" method="post">
       <input type="hidden" value="0" name="evaluate_x_prio">
       <input type="hidden" value="0" name="only_x_prio">
       <input type="hidden" value="0" name="active">
       <div class="row">
         <div class="col-sm-1">
-          <p class="help-block"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACglBMVEUAAAAAAAEAAAAilecFGigAAAAAAAAAAAAAAAANj+c3n+Ypm+oeYI4KWI4MieAtkdQbleoJcLcjmeswmN4Rit4KgdMKUYQJKUAQSnILL0kMNlMSTngimOoNPF0hlOQBBgkNOlkRS3MHIjUhk+IPf8wKLUYsjM0AAAASTngAAAAAAAAPfckbdLIbdrYUWIgegsgce70knfEAAAAknfENOVkGHi8YaaIjnvEdgMUhkuAQSG8aca0hleQUh9YLjOM4nOEMgtMcbaYWa6YemO02ltkKhNktgLodYZEPXJEyi8kKesktfLUzj84cWYMiluckZ5YJXJYeW4Y0k9YKfs4yjs0pc6YHZaUviskLfMkqmugak+cqkNcViNcqeK4Iaq4XRmYGPmYMKDsFJTstgr0LdL0ti84CCQ4BCQ4Qgc8rlt8XjN8shcQsi8wZSGgEP2cRMEUDKkUAAAD///8dmvEamfExo/EXmPEWl/ERlvElnvEsofEjnfETl/Enn/Ezo/E4pvEvovEfm/E1pPEzpPEvofEOlfEpoPEamPEQlfEYmfE6p/EgnPEVlvEroPE3pfE2pfENk/Ern/E3pPEcmfEfmvEnnvBlufT6/P0soPAknPDd7/zs9vzo9PxBqfItofAqoPD9/f3B4/q43/mx2/l/xfZ6w/Vxv/VtvfVgt/RXtPNTsfNEq/L3+/31+v3a7fvR6vvH5fqs2vmc0/jx+P3v9/3h8fzW7PvV7PvL5/q13fmo1/mh1PiY0fiNy/aHyfZ2wfVou/Vdt/RPsPM3oeoQkuowmeAgjdgcgMQbeLrw9/3k8vy74Pm63/mX0PdYtfNNr/Ikm+4wnOchkuAVjOAfdrMVcrOdoJikAAAAcnRSTlMAIQ8IzzweFwf+/fvw8P79+/Xt7e3p6eji4d7U08y8qZyTiIWDgn53bWxqaWBKQ0JBOjUwMCkoJCEfHBkT/vz8/Pv7+vr69/b29PTy7ezm5ubm5N7e29vQ0M/Pv7+4uLW1pqaWloWDg3x7e21mUVFFRUXdPracAAAEbElEQVRIx4WUZbvaQBCFF+ru7u7u7u7u7t4mvVwSoBC0JIUCLRQolLq7u7vr/+nMLkmQyvlwyfPcd86e3ZldUqwyQ/p329J+XfutPQYOLUP+q55rFtQJRvY79+xxlZTUWbKpz7/xrrMr2+3BoNPpdLn2lJQ4HEeqLOr1d7z7XNkesQed4A848G63Oy4Gmg/6Mz542QvZbqe8C/Ig73CLYiYTrtLmT3zfqbIcAR7y4wIqH/B6M9Fo0+Ldb6sM9ph/v4ozPuz12mxRofaAAr7jCNkuoz/jNf9AGHibkBCm51fsGKvxsAGWx4H+jBcEi6V2birDpCL/9Klrd1KHbiSvPWP8V0tTnTfO03iXi57P6WNHOVUf44IFdFDRz6pV5fw8Zy5z3JVH5+R48OwxqDiGvKJIY9R+9JsCuJ5HPg74OVEMpz+nbdEPUHEWeEk6IDUnTC1l5r+f8uffc0cfxc8fS17kLso24SwUPFDA/6DE82xKDOPliJ7n/GGOOyWK9zD9CdjvOfg9Dv6AH+AX04LW9gj2i8W/APx1UbxwCAu+wPmcpgUKL/EHdvtq4uwaZwCuznPJVY5LHhED15G/isd5Hz4eKui/e/du02YoKFeD5mHzHIN/nxEDe25gQQwKorAid04CfyzwL4XutXvl1Pt1guMOwwKPkU8mYIFT8JHK+vv8prpDScUVL+j8s3lOctw1GIhbWHAS+HgKPk7xPM/4UtNAYmzizJkf6NgTb/gM8jePQLsewMdthS3g95tMpT1IhVm6v1s8fYmLeb13Odwp8Fh5KY048y/d14WUrwrb1e/X/rNp73nkD8kWS+wi/MZ4XuetG4mhKubJm3/WNEvi8SHwB56nPKjUam0LBdp9ARwupFemTYudvgN/L1+A/Ko/LGBuS8pPy+YR1fuCTWNKnUyoeUyYx2o2dyEVGmr5xTD42xzvkD16+Pb9WIIH6fmt1r3mbsTY7Bvw+n23naT8BUWh86bz6G/e259UXPUK3gfAxQDlo7Rpx3Geqb2e3wp83SGEdKpB7zvwYbzvT2n65xLwbH6YP+M9C8vA8E1wxLU8gkCbdhXGUyrMgwVrcbzLHonr78lzDvWM3q/C/HtDlXoSUIe3YkblhRPIX4E8Oo/9siLv8dRjV7SBlkdgTXvKS7nzsA/9AfeEuhKq9T8zWIDv1Sd6ETAP4D6/H/1V+1BojvruNa4SZXz4JhY84dV5MOF5agUvu5OsOo+KRpG30KalEnoeDccFlutPZYs38D5n3zcpr1/0fBhfb3DOY1z2tSAgLxWezz6zuoHhfUmOejf6blHQH/sFuJYfcMZX307ytKvRa3ifoV/586P5j+tICtS77BuJxzxYAPZsntX8k3eSIhlajK4p8b7iefCEKs03kD/I2LnxL9ovH+43y4fAv1YrI/mzDBsavAX/UppfzVOrZT/ydxk6lJ047MfLfVbcb6hS9ZEzWxekKQ5WrtPqZg3rV6tWrX6Tle3KQZj/q6KxQnmDoXwFY0VSrN9e8FRXBCTAvwAAAABJRU5ErkJggg==" class="img img-fluid"></a></p>
+          <p class="text-muted"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,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" class="img img-fluid"></a></p>
         </div>
         <div class="col-sm-10">
-          <p class="help-block">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
-          <p class="help-block">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code></p>
-          <div class="form-group">
-            <div class="row">
-              <div class="col-sm-6">
+          <p class="text-muted">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
+          <p class="text-muted">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code>, <code>{SENDER_ADDRESS}</code>, <code>{SENDER_NAME}</code>, <code>{TO_NAME}</code>, <code>{TO_ADDRESS}</code>, <code>{MSG_ID}</code></p>
+          <div class="row">
+            <div class="col-sm-6 mb-2">
+              <label for="token">API Token/Key (Application)</label>
+              <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+            </div>
+            <div class="col-sm-6 mb-2">
+              <label for="key">User/Group Key</label>
+              <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
+            </div>
+            <div class="col-sm-6 mb-4">
+              <label for="title">{{ lang.edit.pushover_title }}</label>
+              <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
+            </div>
+            <div class="col-sm-6 mb-4">
+              <label for="text">{{ lang.edit.pushover_text }}</label>
+              <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+            </div>
+            <div class="col-sm-12 mb-4">
+              <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
+              <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+            </div>
+            <div class="col-sm-12 mb-2">
                 <div class="form-group">
-                  <label for="token">API Token/Key (Application)</label>
-                  <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="form-group">
-                  <label for="key">User/Group Key</label>
-                  <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="form-group">
-                  <label for="title">{{ lang.edit.pushover_title }}</label>
-                  <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="form-group">
-                  <label for="text">{{ lang.edit.pushover_text }}</label>
-                  <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+                  <label for="sound">{{ lang.edit.pushover_sound }}</label><br>
+                  <select name="sound" class="form-control">
+                    <option value="pushover"{% if pushover_data.attributes.sound == 'pushover' %} selected{% endif %}>Pushover (default)</option>
+                    <option value="bike"{% if pushover_data.attributes.sound == 'bike' %} selected{% endif %}>Bike</option>
+                    <option value="bugle"{% if pushover_data.attributes.sound == 'bugle' %} selected{% endif %}>Bugle</option>
+                    <option value="cashregister"{% if pushover_data.attributes.sound == 'cashregister' %} selected{% endif %}>Cash Register</option>
+                    <option value="classical"{% if pushover_data.attributes.sound == 'classical' %} selected{% endif %}>Classical</option>
+                    <option value="cosmic"{% if pushover_data.attributes.sound == 'cosmic' %} selected{% endif %}>Cosmic</option>
+                    <option value="falling"{% if pushover_data.attributes.sound == 'falling' %} selected{% endif %}>Falling</option>
+                    <option value="gamelan"{% if pushover_data.attributes.sound == 'gamelan' %} selected{% endif %}>Gamelan</option>
+                    <option value="incoming"{% if pushover_data.attributes.sound == 'incoming' %} selected{% endif %}>Incoming</option>
+                    <option value="intermission"{% if pushover_data.attributes.sound == 'intermission' %} selected{% endif %}>Intermission</option>
+                    <option value="magic"{% if pushover_data.attributes.sound == 'magic' %} selected{% endif %}>Magic</option>
+                    <option value="mechanical"{% if pushover_data.attributes.sound == 'mechanical' %} selected{% endif %}>Mechanical</option>
+                    <option value="pianobar"{% if pushover_data.attributes.sound == 'pianobar' %} selected{% endif %}>Piano Bar</option>
+                    <option value="siren"{% if pushover_data.attributes.sound == 'siren' %} selected{% endif %}>Siren</option>
+                    <option value="spacealarm"{% if pushover_data.attributes.sound == 'spacealarm' %} selected{% endif %}>Space Alarm</option>
+                    <option value="tugboat"{% if pushover_data.attributes.sound == 'tugboat' %} selected{% endif %}>Tug Boat</option>
+                    <option value="alien"{% if pushover_data.attributes.sound == 'alien' %} selected{% endif %}>Alien Alarm (long)</option>
+                    <option value="climb"{% if pushover_data.attributes.sound == 'climb' %} selected{% endif %}>Climb (long)</option>
+                    <option value="persistent"{% if pushover_data.attributes.sound == 'persistent' %} selected{% endif %}>Persistent (long)</option>
+                    <option value="echo"{% if pushover_data.attributes.sound == 'echo' %} selected{% endif %}>Pushover Echo (long)</option>
+                    <option value="updown"{% if pushover_data.attributes.sound == 'updown' %} selected{% endif %}>Up Down (long)</option>
+                    <option value="vibrate"{% if pushover_data.attributes.sound == 'vibrate' %} selected{% endif %}>Vibrate Only</option>
+                    <option value="none"{% if pushover_data.attributes.sound == 'none' %} selected{% endif %}> None (silent) </option>
+                  </select>
                 </div>
               </div>
               <div class="col-sm-12">
-                <div class="form-group">
-                  <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
-                  <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+              </div>
+            </div>
+            <div class="col-sm-12">
+              <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
+                <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
+              </legend>
+              <hr />
+            </div>
+            <div class="col-sm-12 mb-4">
+              <div id="po_advanced" class="collapse">
+                <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
+                <input type="text" class="form-control mt-2" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
+                <div class="checkbox mt-4">
+                  <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
                 </div>
-              </div>
-              <div class="col-sm-12">
-                <div class="checkbox">
-                  <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <legend style="cursor:pointer;margin-top:10px" data-target="#po_advanced" unselectable="on" data-toggle="collapse">
-                  <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
-                </legend>
-              </div>
-              <div class="col-sm-12">
-                <div id="po_advanced" class="collapse">
-                  <div class="form-group">
-                    <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
-                    <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
-                    </div>
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
-                    </div>
-                  </div>
+                <div class="checkbox mt-2">
+                  <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
                 </div>
               </div>
             </div>
           </div>
           <div class="btn-group" data-acl="{{ acl.pushover }}">
-            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.edit.save }}</a>
-            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
-            <div class="clearfix visible-xs"></div>
-            <a id="pushover_delete" class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.edit.remove }}</a>
+            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.edit.save }}</a>
+            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
+            <a id="pushover_delete" class="btn btn-sm d-block d-sm-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.edit.remove }}</a>
           </div>
         </div>
       </div>
     </form>
   </div>
-  <div id="macl" class="tab-pane">
+  <div id="macl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-acl">
     <form data-id="useracl" class="form-inline well" method="post">
       <div class="row">
         <div class="col-sm-1">
-          <p class="help-block">ACL</p>
+          <p class="text-muted">ACL</p>
         </div>
         <div class="col-sm-10">
-          <div class="form-group">
-            <select id="user_acl" name="user_acl" size="10" multiple>
-              {% for acl, val in user_acls %}
-                <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
-              {% endfor %}
-            </select>
-          </div>
-          <div class="form-group">
-            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          </div>
+          <select id="user_acl" name="user_acl" size="10" multiple>
+            {% for acl, val in user_acls %}
+              <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
+            {% endfor %}
+          </select>
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
         </div>
       </div>
     </form>
   </div>
-  <div id="mrl" class="tab-pane">
+  <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
     <form data-id="mboxratelimit" class="form-inline well" method="post">
       <div class="row">
         <div class="col-sm-1">
-          <p class="help-block">{{ lang.acl.ratelimit }}</p>
+          <p class="text-muted">{{ lang.acl.ratelimit }}</p>
         </div>
         <div class="col-sm-10">
-          <div class="form-group">
-            <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-          </div>
-          <div class="form-group">
-            <select name="rl_frame" class="form-control">
-              {% include 'mailbox/rl-frame.twig' %}
-            </select>
-          </div>
-          <div class="form-group">
-            <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          </div>
-          <p class="help-block">{{ lang.edit.mbox_rl_info }}</p>
+          <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
+            {% include 'mailbox/rl-frame.twig' %}
+          </select>
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+          <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
         </div>
       </div>
     </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig
index 0a123fc..f3dc4d0 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/oauth2client.twig
@@ -4,33 +4,33 @@
 {% if result %}
 <h4>OAuth2</h4>
 <form data-id="oauth2client" class="form-horizontal" role="form" method="post">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="client_id">{{ lang.edit.client_id }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_id" id="client_id" value="{{ result.client_id }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="client_secret">{{ lang.edit.client_secret }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_secret" id="client_secret" value="{{ result.client_secret }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="scope">{{ lang.edit.scope }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="scope" id="scope" value="{{ result.scope }}" disabled>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="redirect_uri">{{ lang.edit.redirect_uri }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="redirect_uri" id="redirect_uri" value="{{ result.redirect_uri }}">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" data-action="edit_selected" data-id="oauth2client" data-item="{{ oauth2client }}" data-api-url='edit/oauth2-client' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="oauth2client" data-item="{{ oauth2client }}" data-api-url='edit/oauth2-client' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig
index 7383713..9af30a3 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/recipient_map.twig
@@ -6,30 +6,30 @@
 <br>
 <form class="form-horizontal" data-id="edit_recipient_map" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_old }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_old }}" type="text" class="form-control" name="recipient_map_old" id="recipient_map_old">
       <small>{{ lang.mailbox.recipient_map_old_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_new }}" type="text" class="form-control" name="recipient_map_new" id="recipient_map_new">
       <small>{{ lang.mailbox.recipient_map_new_info }}</small>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="edit_recipient_map" data-item="{{ map }}" data-api-url='edit/recipient_map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_recipient_map" data-item="{{ map }}" data-api-url='edit/recipient_map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig
index 9e3d67c..c668981 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/relayhost.twig
@@ -5,35 +5,35 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editrelayhost">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="hostname">{{ lang.add.hostname }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="hostname" value="{{ result.hostname }}" required>
-      <p class="help-block">{{ lang.add.relayhost_wrapped_tls_info|raw }}</p>
+      <p class="text-muted">{{ lang.add.relayhost_wrapped_tls_info|raw }}</p>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editrelayhost" data-item="{{ result.id }}" data-api-url='edit/relayhost' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editrelayhost" data-item="{{ result.id }}" data-api-url='edit/relayhost' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig
index 36534bb..4ba65bd 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/resource.twig
@@ -5,13 +5,13 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editresource">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="description" value="{{ result.description }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="domain">{{ lang.edit.kind }}</label>
     <div class="col-sm-10">
       <select name="kind" title="{{ lang.edit.select }}" required>
@@ -21,7 +21,7 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
     <div class="col-sm-10">
       <select name="multiple_bookings_select" id="editSelectMultipleBookings" title="{{ lang.add.select }}" required>
@@ -36,16 +36,16 @@
       <input type="hidden" name="multiple_bookings" id="multiple_bookings">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editresource" data-item="{{ result.name }}" data-api-url='edit/resource' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editresource" data-item="{{ result.name }}" data-api-url='edit/resource' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig
index 6af7e0a..d2172e6 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/syncjob.twig
@@ -11,31 +11,31 @@
     <input type="hidden" value="0" name="skipcrossduplicates">
     <input type="hidden" value="0" name="active">
     <input type="hidden" value="0" name="subscribeall">
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="host1">{{ lang.edit.hostname }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="host1" id="host1" value="{{ result.host1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="port1">Port</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="port1" id="port1" min="1" max="65535" value="{{ result.port1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="user1">{{ lang.edit.username }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="user1" id="user1" value="{{ result.user1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="password1">{{ lang.edit.password }}</label>
       <div class="col-sm-10">
         <input type="password" class="form-control" name="password1" id="password1" value="{{ result.password1 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="enc1">{{ lang.edit.encryption }}</label>
       <div class="col-sm-10">
         <select id="enc1" name="enc1">
@@ -45,112 +45,112 @@
         </select>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="mins_interval">{{ lang.edit.mins_interval }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="{{ result.mins_interval }}" required>
-        <small class="help-block">1-43800</small>
+        <small class="text-muted">1-43800</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="subfolder2" id="subfolder2" value="{{ result.subfolder2 }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxage" id="maxage" min="0" max="32000" value="{{ result.maxage }}">
-        <small class="help-block">0-32000</small>
+        <small class="text-muted">0-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxbytespersecond" id="maxbytespersecond" min="0" max="125000000" value="{{ result.maxbytespersecond }}">
-        <small class="help-block">0-125000000</small>
+        <small class="text-muted">0-125000000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="timeout1">{{ lang.add.timeout1 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout1" id="timeout1" min="1" max="32000" value="{{ result.timeout1 }}">
-        <small class="help-block">1-32000</small>
+        <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="timeout2">{{ lang.add.timeout2 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout2" id="timeout2" min="1" max="32000" value="{{ result.timeout2 }}">
-        <small class="help-block">1-32000</small>
+        <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="exclude">{{ lang.edit.exclude }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="exclude" id="exclude" value="{{ result.exclude }}">
       </div>
     </div>
-    <div class="form-group">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="custom_params" id="custom_params" value="{{ result.custom_params }}" placeholder="--dry --some-param=xy --other-param=yx">
-        <small class="help-block">{{ lang.add.custom_params_hint }}</small>
+        <small class="text-muted">{{ lang.add.custom_params_hint }}</small>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
+    <div class="row mb-4">
+      <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="editsyncjob" data-item="{{ result.id }}" data-api-url='edit/syncjob' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+    <div class="row mb-2">
+      <div class="offset-sm-2 col-sm-10">
+        <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editsyncjob" data-item="{{ result.id }}" data-api-url='edit/syncjob' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
       </div>
     </div>
   </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig
index a40621c..199bbfe 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/tls_policy_map.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="edit_tls_policy_maps" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
     <div class="col-sm-10">
       <input value="{{ result.dest }}" type="text" class="form-control" name="dest" id="dest">
       <small>{{ lang.mailbox.tls_map_dest_info }}</small>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" name="policy" required>
@@ -23,23 +23,23 @@
       </select>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
     <div class="col-sm-10">
       <input value="{{ result.parameters }}" type="text" class="form-control" name="parameters" id="parameters">
       <small>{{ lang.mailbox.tls_map_parameters_info }}</small>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="edit_tls_policy_maps" data-item="{{ map }}" data-api-url='edit/tls-policy-map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_tls_policy_maps" data-item="{{ map }}" data-api-url='edit/tls-policy-map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>
diff --git a/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig b/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig
index bf804cc..2fc461f 100644
--- a/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig
+++ b/mailcow/src/mailcow-dockerized/data/web/templates/edit/transport.twig
@@ -6,47 +6,47 @@
 <form class="form-horizontal" role="form" method="post" data-id="edittransport">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="is_mx_based">
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="destination">{{ lang.add.destination }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="destination" value="{{ result.destination }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="nexthop">{{ lang.edit.nexthop }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="nexthop" placeholder='[0.0.0.0], [0.0.0.0]:25, host:25, host, [host]:25' value="{{ result.nexthop }}" required>
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="form-group">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-xs-lg visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-action="edit_selected" data-id="edittransport" data-item="{{ result.id }}" data-api-url='edit/transport' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+  <div class="row mb-2">
+    <div class="offset-sm-2 col-sm-10">
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edittransport" data-item="{{ result.id }}" data-api-url='edit/transport' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
   </div>
 </form>