diff --git a/pub/login/css/style.full.css b/pub/login/css/style.full.css
index 294fb42..4b9a3d4 100644
--- a/pub/login/css/style.full.css
+++ b/pub/login/css/style.full.css
@@ -4,9 +4,7 @@
  * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */
-:root,
-[data-coreui-theme=light] {
-    color-scheme: light;
+:root {
     --cui-blue: #458588;
     --cui-indigo: #8f3f71;
     --cui-purple: #b16286;
@@ -70,8 +68,8 @@
     --cui-danger-border-subtle: #d3869b;
     --cui-light-border-subtle: #ebdbb2;
     --cui-dark-border-subtle: #928374;
-    --cui-white-rgb: 255, 255, 255;
-    --cui-black-rgb: 0, 0, 0;
+    --cui-white-rgb: 251, 241, 199;
+    --cui-black-rgb: 29, 32, 33;
     --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
@@ -79,21 +77,21 @@
     --cui-body-font-size: 1rem;
     --cui-body-font-weight: 400;
     --cui-body-line-height: 1.5;
-    --cui-body-color: #fbf1c7;
-    --cui-body-color-rgb: 33, 37, 41;
-    --cui-body-bg: #282828;
-    --cui-body-bg-rgb: 255, 255, 255;
-    --cui-emphasis-color: #282828;
-    --cui-emphasis-color-rgb: 0, 0, 0;
-    --cui-secondary-color: rgb(213, 196, 161);
+    --cui-body-color: #3c3836;
+    --cui-body-color-rgb: 235, 219, 178;
+    --cui-body-bg: #ebdbb2;
+    --cui-body-bg-rgb: 235, 219, 178;
+    --cui-emphasis-color: #ebdbb2;
+    --cui-emphasis-color-rgb: 235, 219, 178;
+    --cui-secondary-color: #3c3836;
     --cui-secondary-color-rgb: 33, 37, 41;
-    --cui-secondary-bg: #bdae93;
-    --cui-secondary-bg-rgb: 233, 236, 239;
+    --cui-secondary-bg: #ebdbb2;
+    --cui-secondary-bg-rgb: 235, 219, 178;
     --cui-tertiary-color: rgba(33, 37, 41, 0.5);
     --cui-tertiary-color-rgb: 33, 37, 41;
-    --cui-tertiary-bg: #d5c4a1;
-    --cui-tertiary-bg-rgb: 248, 249, 250;
-    --cui-heading-color: inherit;
+    --cui-tertiary-bg: #ebdbb2;
+    --cui-tertiary-bg-rgb: 235, 219, 178;
+    --cui-heading-color: #3c3836;
     --cui-link-color: #458588;
     --cui-link-color-rgb: 13, 110, 253;
     --cui-link-decoration: underline;
@@ -104,7 +102,7 @@
     --cui-highlight-bg: #fff3cd;
     --cui-border-width: 1px;
     --cui-border-style: solid;
-    --cui-border-color: #d5c4a1;
+    --cui-border-color: #7c6f64;
     --cui-border-color-translucent: rgba(0, 0, 0, 0.175);
     --cui-border-radius: 0.375rem;
     --cui-border-radius-sm: 0.25rem;
@@ -125,91 +123,127 @@
     --cui-form-invalid-color: #dc3545;
     --cui-form-invalid-border-color: #dc3545;
     --cui-input-placeholder-color: #a89984;
-    --cui-input-group-addon-color: #282828;
+    --cui-input-group-addon-color: #3c3836;
 }
 
-[data-coreui-theme=dark] {
-    color-scheme: dark;
-    --cui-body-color: #fbf1c7;
-    --cui-body-color-rgb: 33, 37, 41;
-    --cui-body-bg: #282828;
-    --cui-body-bg-rgb: 255, 255, 255;
-    --cui-emphasis-color: #282828;
-    --cui-emphasis-color-rgb: 0, 0, 0;
-    --cui-secondary-color: rgb(40, 40, 40);
-    --cui-secondary-color-rgb: 33, 37, 41;
-    --cui-secondary-bg: #bdae93;
-    --cui-secondary-bg-rgb: 168, 153, 132;
-    --cui-tertiary-color: rgba(33, 37, 41, 0.5);
-    --cui-tertiary-color-rgb: 33, 37, 41;
-    --cui-tertiary-bg: #A89984;
-    --cui-tertiary-bg-rgb: 40, 40, 40;
-    --cui-high-emphasis: rgba(255, 255, 255, 0.87);
-    --cui-medium-emphasis: rgba(255, 255, 255, 0.6);
-    --cui-disabled: rgba(255, 255, 255, 0.38);
-    --cui-primary: #83a598;
-    --cui-secondary: #928374;
-    --cui-success: #98971a;
-    --cui-info: #458588;
-    --cui-warning: #fabd2f;
-    --cui-danger: #cc241d;
-    --cui-light: #fbf1c7;
-    --cui-dark: #282828;
-    --cui-gray-100: #f9f5d7;
-    --cui-gray-200: #ebdbb2;
-    --cui-gray-300: #d5c4a1;
-    --cui-gray-400: #bdae93;
-    --cui-gray-500: #a89984;
-    --cui-gray-600: #928374;
-    --cui-gray-700: #665c54;
-    --cui-gray-800: #3c3836;
-    --cui-gray-900: #282828;
-    --cui-primary-rgb: 131, 165, 152;
-    --cui-secondary-rgb: 146, 131, 116;
-    --cui-success-rgb: 152, 151, 26;
-    --cui-info-rgb: 69, 133, 136;
-    --cui-warning-rgb: 250, 189, 47;
-    --cui-danger-rgb: 204, 36, 29;
-    --cui-light-rgb: 251, 241, 199;
-    --cui-dark-rgb: 40, 40, 40;
-    --cui-primary-text-emphasis: #458588;
-    --cui-secondary-text-emphasis: #3c3836;
-    --cui-success-text-emphasis: #98971a;
-    --cui-info-text-emphasis: #83a598;
-    --cui-warning-text-emphasis: #d79921;
-    --cui-danger-text-emphasis: #cc241d;
-    --cui-light-text-emphasis: #a89984;
-    --cui-dark-text-emphasis: #a89984;
-    --cui-primary-bg-subtle: #d5c4a1;
-    --cui-secondary-bg-subtle: #ebdbb2;
-    --cui-success-bg-subtle: #b8bb26;
-    --cui-info-bg-subtle: #83a598;
-    --cui-warning-bg-subtle: #fabd2f;
-    --cui-danger-bg-subtle: #fb4934;
-    --cui-light-bg-subtle: #f9f5d7;
-    --cui-dark-bg-subtle: #928374;
-    --cui-primary-border-subtle: #83a598;
-    --cui-secondary-border-subtle: #a89984;
-    --cui-success-border-subtle: #b8bb26;
-    --cui-info-border-subtle: #8ec07c;
-    --cui-warning-border-subtle: #d79921;
-    --cui-danger-border-subtle: #d3869b;
-    --cui-light-border-subtle: #ebdbb2;
-    --cui-dark-border-subtle: #928374;
-    --cui-heading-color: #fbf1c7;
-    --cui-link-color: #458588;
-    --cui-link-hover-color: #83a598;
-    --cui-link-color-rgb: 13, 110, 253;
-    --cui-link-hover-color-rgb: 10, 88, 202;
-    --cui-code-color: #e685b5;
-    --cui-highlight-color: rgba(255, 255, 255, 0.87);
-    --cui-highlight-bg: #664d03;
-    --cui-border-color: #323a49;
-    --cui-border-color-translucent: rgba(213, 196, 161, 2);
-    --cui-form-valid-color: #75b798;
-    --cui-form-valid-border-color: #75b798;
-    --cui-form-invalid-color: #98971a;
-    --cui-form-invalid-border-color: #98971a;
+@media (prefers-color-scheme: dark) {
+    :root {
+        --cui-body-color: #fbf1c7;
+        --cui-body-color-rgb: 33, 37, 41;
+        --cui-body-bg: #282828;
+        --cui-body-bg-rgb: 255, 255, 255;
+        --cui-emphasis-color: #282828;
+        --cui-emphasis-color-rgb: 0, 0, 0;
+        --cui-secondary-color: rgb(40, 40, 40);
+        --cui-secondary-color-rgb: 33, 37, 41;
+        --cui-secondary-bg: #bdae93;
+        --cui-secondary-bg-rgb: 168, 153, 132;
+        --cui-tertiary-color: rgba(33, 37, 41, 0.5);
+        --cui-tertiary-color-rgb: 33, 37, 41;
+        --cui-tertiary-bg: #282828;
+        --cui-tertiary-bg-rgb: 40, 40, 40;
+        --cui-high-emphasis: rgba(255, 255, 255, 0.87);
+        --cui-medium-emphasis: rgba(255, 255, 255, 0.6);
+        --cui-disabled: rgba(255, 255, 255, 0.38);
+        --cui-primary: #83a598;
+        --cui-secondary: #928374;
+        --cui-success: #98971a;
+        --cui-info: #458588;
+        --cui-warning: #fabd2f;
+        --cui-danger: #cc241d;
+        --cui-light: #fbf1c7;
+        --cui-dark: #282828;
+        --cui-gray-100: #f9f5d7;
+        --cui-gray-200: #ebdbb2;
+        --cui-gray-300: #d5c4a1;
+        --cui-gray-400: #bdae93;
+        --cui-gray-500: #a89984;
+        --cui-gray-600: #928374;
+        --cui-gray-700: #665c54;
+        --cui-gray-800: #3c3836;
+        --cui-gray-900: #282828;
+        --cui-primary-rgb: 131, 165, 152;
+        --cui-secondary-rgb: 146, 131, 116;
+        --cui-success-rgb: 152, 151, 26;
+        --cui-info-rgb: 69, 133, 136;
+        --cui-warning-rgb: 250, 189, 47;
+        --cui-danger-rgb: 204, 36, 29;
+        --cui-light-rgb: 251, 241, 199;
+        --cui-dark-rgb: 40, 40, 40;
+        --cui-primary-text-emphasis: #458588;
+        --cui-secondary-text-emphasis: #3c3836;
+        --cui-success-text-emphasis: #98971a;
+        --cui-info-text-emphasis: #83a598;
+        --cui-warning-text-emphasis: #d79921;
+        --cui-danger-text-emphasis: #cc241d;
+        --cui-light-text-emphasis: #a89984;
+        --cui-dark-text-emphasis: #a89984;
+        --cui-primary-bg-subtle: #d5c4a1;
+        --cui-secondary-bg-subtle: #ebdbb2;
+        --cui-success-bg-subtle: #b8bb26;
+        --cui-info-bg-subtle: #83a598;
+        --cui-warning-bg-subtle: #fabd2f;
+        --cui-danger-bg-subtle: #fb4934;
+        --cui-light-bg-subtle: #f9f5d7;
+        --cui-dark-bg-subtle: #928374;
+        --cui-primary-border-subtle: #83a598;
+        --cui-secondary-border-subtle: #a89984;
+        --cui-success-border-subtle: #b8bb26;
+        --cui-info-border-subtle: #8ec07c;
+        --cui-warning-border-subtle: #d79921;
+        --cui-danger-border-subtle: #d3869b;
+        --cui-light-border-subtle: #ebdbb2;
+        --cui-dark-border-subtle: #928374;
+        --cui-heading-color: #fbf1c7;
+        --cui-link-color: #458588;
+        --cui-link-hover-color: #83a598;
+        --cui-link-color-rgb: 13, 110, 253;
+        --cui-link-hover-color-rgb: 10, 88, 202;
+        --cui-code-color: #e685b5;
+        --cui-highlight-color: rgba(255, 255, 255, 0.87);
+        --cui-highlight-bg: #664d03;
+        --cui-border-color: #a89984;
+        --cui-border-color-translucent: rgba(213, 196, 161, 2);
+        --cui-form-valid-color: #75b798;
+        --cui-form-valid-border-color: #75b798;
+        --cui-form-invalid-color: #98971a;
+        --cui-form-invalid-border-color: #98971a;
+        --cui-input-group-addon-color: #ebdbb2;
+    }
+}
+
+.portal-image {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 3 / 1;
+    object-fit: contain;
+    display: block;
+    min-height: 200px;
+    content: url('/src/images/callconfig-logo-login-light.png');
+}
+
+@media (prefers-color-scheme: dark) {
+    .portal-image {
+        content: url('/src/images/logo-login-dark.webp');
+    }
+}
+
+.code-input {
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    text-align: center;
+    margin: 5px;
+    background-color: var(--cui-body-bg);
+    color: var(--cui-body-color);
+    border-color: var(--cui-body-color);
+    border: 2px solid var(--cui-body-color);;
+    outline: 1px;
+}
+
+.code-input:focus {
+    border-color: var(--cui-primary-text-emphasis);
+    box-shadow: 0 0 0 3px rgba(69, 133, 136, 0.3);
 }
 
 *,
@@ -3493,18 +3527,18 @@ textarea.form-control-lg {
 }
 
 .btn-primary {
-    --cui-btn-color: #fff;
-    --cui-btn-bg: #83a598;
-    --cui-btn-border-color: #83a598;
-    --cui-btn-hover-color: #fff;
+    --cui-btn-color: #ebdbb2;
+    --cui-btn-bg: #458588;
+    --cui-btn-border-color: #458588;
+    --cui-btn-hover-color: #ebdbb2;
     --cui-btn-hover-bg: #458588;
     --cui-btn-hover-border-color: #458588;
     --cui-btn-focus-shadow-rgb: 69, 133, 136;
-    --cui-btn-active-color: #fff;
+    --cui-btn-active-color: #ebdbb2;
     --cui-btn-active-bg: #458588;
     --cui-btn-active-border-color: #458588;
     --cui-btn-active-shadow: inset 0 3px 5px rgba(69, 133, 136, 0.125);
-    --cui-btn-disabled-color: #fff;
+    --cui-btn-disabled-color: #ebdbb2;
     --cui-btn-disabled-bg: #83a598;
     --cui-btn-disabled-border-color: #83a598;
 }
@@ -3885,21 +3919,23 @@ textarea.form-control-lg {
     --cui-btn-border-radius: var(--cui-border-radius-sm);
 }
 
-[data-coreui-theme=dark] .btn-primary {
-    --cui-btn-color: #fff;
-    --cui-btn-bg: #83a598;
-    --cui-btn-border-color: #83a598;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #458588;
-    --cui-btn-hover-border-color: #458588;
-    --cui-btn-focus-shadow-rgb: 69, 133, 136;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #458588;
-    --cui-btn-active-border-color: #458588;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
-    --cui-btn-disabled-color: #fff;
-    --cui-btn-disabled-bg: #83a598;
-    --cui-btn-disabled-border-color: #83a598;
+@media (prefers-color-scheme: dark) {
+    .btn-primary {
+        --cui-btn-color: #ebdbb2;
+        --cui-btn-bg: #458588;
+        --cui-btn-border-color: #458588;
+        --cui-btn-hover-color: #ebdbb2;
+        --cui-btn-hover-bg: #458588;
+        --cui-btn-hover-border-color: #076678;
+        --cui-btn-focus-shadow-rgb: 69, 133, 136;
+        --cui-btn-active-color: #ebdbb2;
+        --cui-btn-active-bg: #458588;
+        --cui-btn-active-border-color: #076678;
+        --cui-btn-active-shadow: inset 0 3px 5px rgba(69, 133, 136, 0.125);
+        --cui-btn-disabled-color: #ebdbb2;
+        --cui-btn-disabled-bg: #83a598;
+        --cui-btn-disabled-border-color: #83a598;
+    }
 }
 
 [data-coreui-theme=dark] .btn-secondary {
diff --git a/pub/login/forgotPassword.php b/pub/login/forgotPassword.php
index 6786e2f..c23744e 100644
--- a/pub/login/forgotPassword.php
+++ b/pub/login/forgotPassword.php
@@ -67,7 +67,7 @@ $loginAttempts = checkLoginAttempts();
         <div class="row justify-content-center">
             <div class="col-lg-8 col-md-10 col-12 d-flex align-items-center justify-content-center">
                 <div class="card-group d-block d-md-flex row">
-                    <div class="card col-md-7 mb-0">
+                    <div class="card col-md-7 mb-0 border-0">
                         <div class="card-body p-3">
                             <div class="card-body justify-content-center align-items-center">
                                 <?php if (isset($_GET['result'])) {
@@ -84,14 +84,12 @@ $loginAttempts = checkLoginAttempts();
                                     <?php } elseif ($_GET['result'] == "blocked") { ?>
                                         <h1 class="text-center">Blocked</h1>
                                         <p class="text-center">You’ve been temporarily blocked after multiple failed login attempts. Please try again later or contact support.</p>
-                                    <?php } ?>
-                                <?php } else { ?>
+                                    <?php } ?><?php } else { ?>
                                     <h1>Forgot password</h1>
                                     <p>Enter your email and we’ll send you a reset link.</p>
-                                    <hr>
+
                                     <form method="post" action="/login/php/forgotPasswordRequest.php">
                                         <div class="mb-3 text-reset">
-                                            <label for="email" class="form-label">Email</label>
                                             <input type="email" class="form-control" name="user_email" id="email" placeholder="somebody@somewhere.what" required>
                                         </div>
 
@@ -103,7 +101,7 @@ $loginAttempts = checkLoginAttempts();
                             </div>
                         </div>
                     </div>
-                    <div class="card col-md-5 text-white bg-transparent py-5">
+                    <div class="card col-md-5 text-white bg-transparent py-0 border-0">
                         <div class="card-body text-center pt-5">
                             <div>
                                 <img class="pt-3 w-100 portal-image" alt="portal-image" src="/src/images/logo-login-dark.webp" width="500" height="265" style="height: auto;">
diff --git a/pub/login/index.php b/pub/login/index.php
index 6c40291..50172f7 100644
--- a/pub/login/index.php
+++ b/pub/login/index.php
@@ -32,36 +32,6 @@ if ($loginAttemptCount = checkLoginAttempts() > 3) {
     <link rel="apple-touch-icon" sizes="180x180" href="/src/images/favicon/apple-touch-icon.png">
     <link rel="manifest" href="/src/images/favicon/site.webmanifest">
 
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #1d222b;
-        }
-
-        .portal-image {
-            width: 100%;
-            height: auto;
-            aspect-ratio: 3 / 1;
-            object-fit: contain;
-            display: block;
-            min-height: 200px; /* Prevent layout shift during image load */
-        }
-
-        #code-container {
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-        }
-
-        .code-input {
-            width: 40px;
-            height: 40px;
-            font-size: 24px;
-            text-align: center;
-            margin: 5px;
-        }
-    </style>
-
     <link rel="stylesheet" href="css/style.full.css" as="style">
 </head>
 <body>
@@ -104,7 +74,7 @@ if ($loginAttemptCount = checkLoginAttempts() > 3) {
                                         <p class="text-body-secondary">Login with your account</p>
                                         <div class="input-group mb-3">
                                             <span class="input-group-text"><i class="fa-solid fa-user"></i></span>
-                                            <input name="username" class="form-control" type="text" placeholder="Username">
+                                            <input name="username" class="form-control" type="text" placeholder="name@example.com">
                                         </div>
                                         <div class="input-group mb-4">
                                             <span class="input-group-text"><i class="fa-solid fa-lock"></i></span>
@@ -151,7 +121,7 @@ if ($loginAttemptCount = checkLoginAttempts() > 3) {
                     <div class="card col-md-5 text-white bg-transparent py-5 border-0">
                         <div class="card-body text-center pt-3">
                             <div>
-                                <img class="pt-3 w-100 portal-image" alt="portal-image" src="/src/images/logo-login-dark.webp" width="500" height="265" style="height: auto;">
+                                <img class="pt-3 w-100 portal-image" alt="portal-image" width="500" height="265" style="height: auto;">
                             </div>
                         </div>
                     </div>
diff --git a/pub/login/mfaSetup.php b/pub/login/mfaSetup.php
index 5102fae..d5302ba 100644
--- a/pub/login/mfaSetup.php
+++ b/pub/login/mfaSetup.php
@@ -55,27 +55,6 @@ $_SESSION['mfasetup']['secret'] = $secret;
     <link rel="manifest" href="/src/images/favicon/site.webmanifest">
 
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #1d222b;
-        }
-
-        .portal-image {
-            width: 100%;
-            height: auto;
-            aspect-ratio: 3 / 1;
-            object-fit: contain;
-            display: block;
-            min-height: 200px; /* Prevent layout shift during image load */
-        }
-
-        .code-input {
-            width: 40px;
-            height: 40px;
-            font-size: 24px;
-            text-align: center;
-            margin: 5px;
-        }
     </style>
 
     <link rel="stylesheet" href="css/style.full.css" as="style">
@@ -84,19 +63,21 @@ $_SESSION['mfasetup']['secret'] = $secret;
 <div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
     <div class="container">
         <div class="row justify-content-center">
-            <div class="col-lg-8 col-md-8 col-12 d-flex align-items-center justify-content-center">
+            <div class="col-lg-10 col-md-10 col-12 d-flex align-items-center justify-content-center">
                 <div class="card-group d-block d-md-flex row">
-                    <div class="card col-md-6 text-white bg-transparent">
-                        <div class="card-body text-center">
+                    <div class="card col-md-6 text-white bg-transparent border-0">
+                        <div class="card-body text-center py-0">
                             <h2>Step 1.</h2>
                             <small>Scan this code with your authentication app:</small><br><br>
-                            <img class=" w-100 portal-image" alt="portal-image" src="<?php echo $tfa->getQRCodeImageAsDataUri('Sentri - ' . $_SESSION['user']['user_first_name'], $secret); ?>">
+                            <img class="w-100" alt="portal-image" src="<?php echo $tfa->getQRCodeImageAsDataUri('Sentri - ' . $_SESSION['user']['user_first_name'], $secret); ?>">
                             <br>
                             <small class="">Or enter this code in your app:<br>
                                 <b><?php echo $secret ?></b></small>
                         </div>
                     </div>
-                    <div class="card col-md-6 mb-0">
+                </div>
+                <div class="col-lg-6 col-md-6 d-flex align-items-center justify-content-center">
+                    <div class="card mb-0 border-0 py-0">
                         <form method="post" action="/api/v1/user/mfa/">
                             <input type="hidden" name="_return" value="/userprofile/">
                             <div class="card-body text-center">