diff --git a/data/web/css/build/014-mailcow.css b/data/web/css/build/014-mailcow.css
index 3e1ace79d2..3467c3c390 100644
--- a/data/web/css/build/014-mailcow.css
+++ b/data/web/css/build/014-mailcow.css
@@ -432,4 +432,25 @@ button[aria-expanded='true'] > .caret {
 
 .hr-title:not(:empty)::after {
   margin-left: 10px;
-}
\ No newline at end of file
+}
+/* Visual differentiation of login portals */
+body.login-portal-user {
+  background-color: #f2faf5 !important;
+}
+body.login-portal-user .card {
+  border-top: 4px solid #198754 !important;
+}
+
+body.login-portal-domainadmin {
+  background-color: #f3f4fc !important;
+}
+body.login-portal-domainadmin .card {
+  border-top: 4px solid #0d6efd !important;
+}
+
+body.login-portal-admin {
+  background-color: #fdf3f3 !important;
+}
+body.login-portal-admin .card {
+  border-top: 4px solid #dc3545 !important;
+}
diff --git a/data/web/css/themes/mailcow-darkmode.css b/data/web/css/themes/mailcow-darkmode.css
index 83befeaf52..bbeb87bc75 100644
--- a/data/web/css/themes/mailcow-darkmode.css
+++ b/data/web/css/themes/mailcow-darkmode.css
@@ -454,4 +454,38 @@ input::placeholder {
 }
 .btn-light, .btn-light:hover {
     background-image: none;
-}
\ No newline at end of file
+}
+
+/* Dark Mode Login Portals */
+body.login-portal-user {
+  background-color: #121814 !important;
+}
+body.login-portal-user .card {
+  background-color: #1d2520 !important;
+  border-color: #27332c !important;
+}
+body.login-portal-user .card-header {
+  background-color: #121814 !important;
+}
+
+body.login-portal-domainadmin {
+  background-color: #13151c !important;
+}
+body.login-portal-domainadmin .card {
+  background-color: #1d202b !important;
+  border-color: #282c3c !important;
+}
+body.login-portal-domainadmin .card-header {
+  background-color: #13151c !important;
+}
+
+body.login-portal-admin {
+  background-color: #1a1111 !important;
+}
+body.login-portal-admin .card {
+  background-color: #281b1b !important;
+  border-color: #382525 !important;
+}
+body.login-portal-admin .card-header {
+  background-color: #1a1111 !important;
+}
diff --git a/data/web/templates/admin_index.twig b/data/web/templates/admin_index.twig
index 0dcb9145e0..c934ffa839 100644
--- a/data/web/templates/admin_index.twig
+++ b/data/web/templates/admin_index.twig
@@ -2,6 +2,8 @@
 
 {% block navbar %}{% endblock %}
 
+{% block body_class %}login-portal login-portal-admin{% endblock %}
+
 {% block content %}
 <div class="row mb-4" style="margin-top: 60px">
   <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
@@ -52,7 +54,7 @@
             </div>
           </div>
           <div class="d-flex justify-content-between mt-4" style="position: relative">
-            <button type="submit" class="btn btn-xs-lg btn-success w-100 mt-2 mx-auto" style="max-width: 400px;" value="Login">{{ lang.login.login }}</button>
+            <button type="submit" class="btn btn-xs-lg btn-danger w-100 mt-2 mx-auto" style="max-width: 400px;" value="Login">{{ lang.login.login }}</button>
           </div>
         </form>
         <div class="hr-title"><strong>{{ lang.login.other_logins }}</strong></div>
@@ -90,12 +92,17 @@
     </div>
 
     {% if custom_login.hide_user_quicklink != 1 or custom_login.hide_domainadmin_quicklink != 1 %}
-    <p class="text-center mt-3 text-muted" style="font-size: 0.9rem;">
-      {{ lang.login.login_linkstext }}<br>
-      {% if custom_login.hide_user_quicklink != 1 %}<a href="/">{{ lang.login.login_usertext }}</a>{% endif %}
-      {% if custom_login.hide_user_quicklink != 1 and custom_login.hide_domainadmin_quicklink != 1 %}|{% endif %}
-      {% if custom_login.hide_domainadmin_quicklink != 1 %}<a href="/domainadmin">{{ lang.login.login_domainadmintext }}</a>{% endif %}
-    </p>
+    <div class="text-center mt-4">
+      <div class="text-muted mb-2" style="font-size: 0.9rem;">{{ lang.login.login_linkstext }}</div>
+      <div class="d-flex justify-content-center gap-2 flex-wrap">
+        {% if custom_login.hide_user_quicklink != 1 %}
+          <a href="/" class="btn btn-sm btn-outline-success">{{ lang.login.login_usertext }}</a>
+        {% endif %}
+        {% if custom_login.hide_domainadmin_quicklink != 1 %}
+          <a href="/domainadmin" class="btn btn-sm btn-outline-primary">{{ lang.login.login_domainadmintext }}</a>
+        {% endif %}
+      </div>
+    </div>
     {% endif %}
   </div>
 </div>
diff --git a/data/web/templates/base.twig b/data/web/templates/base.twig
index 9e20b08a5d..ef82d03f33 100644
--- a/data/web/templates/base.twig
+++ b/data/web/templates/base.twig
@@ -26,7 +26,7 @@
   <link rel="shortcut icon" href="/favicon.png" type="image/png">
   <link rel="icon" href="/favicon.png" type="image/png">
 </head>
-<body>
+<body class="{% block body_class %}{% endblock %}">
 <div class="overlay"></div>
 {% block navbar %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top p-0">
diff --git a/data/web/templates/domainadmin_index.twig b/data/web/templates/domainadmin_index.twig
index 2fc7bad98f..8f7d9e356c 100644
--- a/data/web/templates/domainadmin_index.twig
+++ b/data/web/templates/domainadmin_index.twig
@@ -2,6 +2,8 @@
 
 {% block navbar %}{% endblock %}
 
+{% block body_class %}login-portal login-portal-domainadmin{% endblock %}
+
 {% block content %}
 <div class="row mb-4" style="margin-top: 60px">
   <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
@@ -52,7 +54,7 @@
             </div>
           </div>
           <div class="d-flex justify-content-between mt-4" style="position: relative">
-            <button type="submit" class="btn btn-xs-lg btn-success w-100 mt-2 mx-auto" style="max-width: 400px;" value="Login">{{ lang.login.login }}</button>
+            <button type="submit" class="btn btn-xs-lg btn-primary w-100 mt-2 mx-auto" style="max-width: 400px;" value="Login">{{ lang.login.login }}</button>
           </div>
         </form>
         <div class="hr-title"><strong>{{ lang.login.other_logins }}</strong></div>
@@ -90,12 +92,17 @@
     </div>
 
     {% if custom_login.hide_user_quicklink != 1 or custom_login.hide_admin_quicklink != 1 %}
-    <p class="text-center mt-3 text-muted" style="font-size: 0.9rem;">
-      {{ lang.login.login_linkstext }}<br>
-      {% if custom_login.hide_user_quicklink != 1 %}<a href="/">{{ lang.login.login_usertext }}</a>{% endif %}
-      {% if custom_login.hide_user_quicklink != 1 and custom_login.hide_admin_quicklink != 1 %}|{% endif %}
-      {% if custom_login.hide_admin_quicklink != 1 %}<a href="/admin">{{ lang.login.login_admintext }}</a>{% endif %}
-    </p>
+    <div class="text-center mt-4">
+      <div class="text-muted mb-2" style="font-size: 0.9rem;">{{ lang.login.login_linkstext }}</div>
+      <div class="d-flex justify-content-center gap-2 flex-wrap">
+        {% if custom_login.hide_user_quicklink != 1 %}
+          <a href="/" class="btn btn-sm btn-outline-success">{{ lang.login.login_usertext }}</a>
+        {% endif %}
+        {% if custom_login.hide_admin_quicklink != 1 %}
+          <a href="/admin" class="btn btn-sm btn-outline-danger">{{ lang.login.login_admintext }}</a>
+        {% endif %}
+      </div>
+    </div>
     {% endif %}
   </div>
 </div>
diff --git a/data/web/templates/user_index.twig b/data/web/templates/user_index.twig
index 28eb6389c2..558f61f744 100644
--- a/data/web/templates/user_index.twig
+++ b/data/web/templates/user_index.twig
@@ -2,6 +2,8 @@
 
 {% block navbar %}{% endblock %}
 
+{% block body_class %}login-portal login-portal-user{% endblock %}
+
 {% block content %}
 <div class="row mb-4" style="margin-top: 60px">
   <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
@@ -108,12 +110,17 @@
     </div>
 
     {% if custom_login.hide_admin_quicklink != 1 or custom_login.hide_domainadmin_quicklink != 1 %}
-    <p class="text-center mt-3 text-muted" style="font-size: 0.9rem;">
-      {{ lang.login.login_linkstext }}<br>
-      {% if custom_login.hide_admin_quicklink != 1 %}<a href="/admin">{{ lang.login.login_admintext }}</a>{% endif %}
-      {% if custom_login.hide_admin_quicklink != 1 and custom_login.hide_domainadmin_quicklink != 1 %}|{% endif %}
-      {% if custom_login.hide_domainadmin_quicklink != 1 %}<a href="/domainadmin">{{ lang.login.login_domainadmintext }}</a>{% endif %}
-    </p>
+    <div class="text-center mt-4">
+      <div class="text-muted mb-2" style="font-size: 0.9rem;">{{ lang.login.login_linkstext }}</div>
+      <div class="d-flex justify-content-center gap-2 flex-wrap">
+        {% if custom_login.hide_domainadmin_quicklink != 1 %}
+          <a href="/domainadmin" class="btn btn-sm btn-outline-primary">{{ lang.login.login_domainadmintext }}</a>
+        {% endif %}
+        {% if custom_login.hide_admin_quicklink != 1 %}
+          <a href="/admin" class="btn btn-sm btn-outline-danger">{{ lang.login.login_admintext }}</a>
+        {% endif %}
+      </div>
+    </div>
     {% endif %}
   </div>
 </div>