NobMail

diff --git a/data/web/css/build/008-mailcow.css b/data/web/css/build/008-mailcow.css
index d04feb25..32ec1ec9 100644
--- a/data/web/css/build/008-mailcow.css
+++ b/data/web/css/build/008-mailcow.css
@@ -75,6 +75,12 @@
   display: inline-block;
   font-size: inherit;
 }
+.btn-group-xs > .btn, .btn-xs {
+  padding: .25rem .4rem;
+  font-size: .875rem;
+  line-height: .5;
+  border-radius: .2rem;
+}
 .icon-spin {
   animation-name: spin;
   animation-duration: 2000ms;
@@ -172,14 +178,6 @@ legend {
 .bootstrap-select.btn-group .no-results {
   display: none;
 }
-.dropdown-desc {
-  display: block;
-  padding: 3px 10px;
-  clear: both;
-  font-weight: bold;
-  color: #5a5a5a;
-  white-space: nowrap;
-}
 .haveibeenpwned {
   cursor: pointer;
   -webkit-user-select: none;  
@@ -206,7 +204,7 @@ legend {
   flex-direction: column;
 }
 .footer .version {
-    margin-left: auto;
+  margin-left: auto;
 	margin-top: 20px;
 }
 .slave-info {
@@ -256,3 +254,6 @@ code {
 .flag-icon {
   margin-right: 5px;
 }
+.dropdown-header {
+  font-weight: 600;
+}
\ No newline at end of file
diff --git a/data/web/css/build/013-bootstrap-icons.css b/data/web/css/build/013-bootstrap-icons.css
index 5712315e..83e6babb 100644
--- a/data/web/css/build/013-bootstrap-icons.css
+++ b/data/web/css/build/013-bootstrap-icons.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "bootstrap-icons";
-  src: url("./fonts/bootstrap-icons.woff2?524846017b983fc8ded9325d94ed40f3") format("woff2"),
-url("./fonts/bootstrap-icons.woff?524846017b983fc8ded9325d94ed40f3") format("woff");
+  src: url("/fonts/bootstrap-icons.woff2?524846017b983fc8ded9325d94ed40f3") format("woff2"),
+url("/fonts/bootstrap-icons.woff?524846017b983fc8ded9325d94ed40f3") format("woff");
 }
 
 .bi::before,
diff --git a/data/web/inc/prerequisites.inc.php b/data/web/inc/prerequisites.inc.php
index 3df6410a..083ee5d8 100644
--- a/data/web/inc/prerequisites.inc.php
+++ b/data/web/inc/prerequisites.inc.php
@@ -254,10 +254,10 @@ $css_dir = array_diff(scandir('/web/css/build'), array('..', '.'));
 $UI_TEXTS = customize('get', 'ui_texts');
 $UI_THEME = "lumen"; // TODO: customize('get', 'ui_theme');
 // minify bootstrap theme
-if (file_exists('../css/themes'.$UI_THEME.'-bootstrap.css'))
-  $css_minifier->add('../css/themes/'.$UI_THEME.'-bootstrap.css');
+if (file_exists('/web/css/themes'.$UI_THEME.'-bootstrap.css'))
+  $css_minifier->add('/web/css/themes/'.$UI_THEME.'-bootstrap.css');
 else
-  $css_minifier->add('../css/themes/lumen-bootstrap.css'); 
+  $css_minifier->add('/web/css/themes/lumen-bootstrap.css'); 
 // minify css build files
 foreach ($css_dir as $css_file) {
   $css_minifier->add('/web/css/build/' . $css_file);
diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index e8f13919..7b668515 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-config-admins" role="tabpanel" aria-labelledby="tab-config-admins">
-    <div class="card bg-danger text-white">
-      <div class="card-header">{{ lang.admin.admin_details }}</div>
+    <div class="card">
+      <div class="card-header bg-danger text-white">{{ lang.admin.admin_details }}</div>
       <div class="card-body">
         <div class="table-responsive">
           <table class="table table-striped table-condensed" id="adminstable"></table>
diff --git a/data/web/templates/base.twig b/data/web/templates/base.twig
index c478ccb9..99068077 100644
--- a/data/web/templates/base.twig
+++ b/data/web/templates/base.twig
@@ -24,7 +24,7 @@
       </button>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
-      <ul class="navbar-nav d-flex">
+      <ul class="navbar-nav ms-auto">
         {% if mailcow_locale %}
         <li class="nav-item dropdown{% if available_languages|length == 1 %}lang-link-disabled{% endif %}">
           <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><span class="flag-icon flag-icon-{{ mailcow_locale }}"></span></a>
diff --git a/data/web/templates/debug.twig b/data/web/templates/debug.twig
index bb93fffd..73535309 100644
--- a/data/web/templates/debug.twig
+++ b/data/web/templates/debug.twig
@@ -4,7 +4,7 @@
 <ul class="nav nav-tabs" role="tablist">
   <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-target="#tab-containers" aria-controls="tab-containers" role="tab" data-bs-toggle="tab">{{ lang.debug.system_containers }}</button></li>
   <li class="nav-item dropdown">
-    <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.debug.logs }}</a>
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.debug.logs }}</a>
     <ul class="dropdown-menu">
       <li role="presentation"><span class="dropdown-header fs-6">{{ lang.debug.in_memory_logs }}</span></li>
       <li role="presentation"><a class="dropdown-item" href="#tab-postfix-logs" aria-controls="tab-postfix-logs" role="tab" data-bs-toggle="tab">Postfix</a></li>
diff --git a/data/web/templates/index.twig b/data/web/templates/index.twig
index f71e36a8..8a72cbe2 100644
--- a/data/web/templates/index.twig
+++ b/data/web/templates/index.twig
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="row">
-  <div class="col-md-offset-3 col-md-6">
+  <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
     <div class="card card-default card-login">
       <div class="card-header"><i class="bi bi-person-fill"></i> {{ lang.login.login }}</div>
       <div class="card-body">
@@ -83,11 +83,13 @@
       </div>
     </div>
   </div>
-  {% if not oauth2_request %}
-  <div class="col-md-offset-3 col-md-6">
+</div>
+{% if not oauth2_request %}
+<div class="row">
+  <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
     <div class="card card-default">
       <div class="card-header">
-        <a data-bs-toggle="collapse" href="#collapse1"><i class="bi bi-patch-question-fill"></i> {{ lang.start.help }}</a>
+        <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse1"><i class="bi bi-patch-question-fill"></i> {{ lang.start.help }}</a>
       </div>
       <div id="collapse1" class="card-collapse collapse">
         <div class="card-body">
diff --git a/data/web/templates/mailbox.twig b/data/web/templates/mailbox.twig
index 7d612a88..62c24bb4 100644
--- a/data/web/templates/mailbox.twig
+++ b/data/web/templates/mailbox.twig
@@ -3,7 +3,7 @@
 {% block content %}
 <ul class="nav nav-tabs" role="tablist">
   <li class="nav-item" role="presentation"><button class="nav-link active" aria-selected="false" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
-  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
   {#  <li class="nav-item dropdown" role="presentation">
   <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}</a>
   <ul class="dropdown-menu">
@@ -11,7 +11,7 @@
     <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailbox-defaults" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailbox-defaults">{{ lang.mailbox.mailbox_defaults }}</button></li>
   </ul>
   </li> #}
-  <li class="nav-item" role="presentation"><button aria-controls="tab-resources" role="tab" data-bs-toggle="tab" data-bs-target="#tab-resources">{{ lang.mailbox.resources }}</button></li>
+  <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-resources" role="tab" data-bs-toggle="tab" data-bs-target="#tab-resources">{{ lang.mailbox.resources }}</button></li>
   <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-target="#">{{ lang.mailbox.aliases }}</a>
     <ul class="dropdown-menu">