diff --git a/app/pages/credentials.php b/app/pages/credentials.php
index 48498c3..c90d0d8 100644
--- a/app/pages/credentials.php
+++ b/app/pages/credentials.php
@@ -23,8 +23,11 @@ $item = $_REQUEST['item'] ?? '';
 
 // if a form is submitted
 if ($_SERVER['REQUEST_METHOD'] == 'POST') {
+    // Ensure security helper is available
+    require_once '../app/helpers/security.php';
+    $security = SecurityHelper::getInstance();
+
     // Validate CSRF token
-    $security->verifyCsrfToken($_POST['csrf_token'] ?? '');
     if (!$security->verifyCsrfToken($_POST['csrf_token'] ?? '')) {
         Feedback::flash('ERROR', 'DEFAULT', 'Invalid security token. Please try again.');
         header("Location: $app_root?page=credentials");
diff --git a/app/templates/credentials-2fa-setup.php b/app/templates/credentials-2fa-setup.php
index 615314b..6f5eb91 100644
--- a/app/templates/credentials-2fa-setup.php
+++ b/app/templates/credentials-2fa-setup.php
@@ -4,94 +4,88 @@
  */
 ?>
 
-<div class="container mt-4">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">
-                    <h3>Set up two-factor authentication</h3>
-                </div>
-                <div class="card-body">
-                    <div class="alert alert-info">
-                        <p>Two-factor authentication adds an extra layer of security to your account. Once enabled, you'll need to enter both your password and a code from your authenticator app when signing in.</p>
+<div class="tm-cred-card mx-auto">
+    <div class="tm-profile-header">
+        <p class="tm-profile-eyebrow">Security</p>
+        <h2 class="tm-profile-title">Set up two-factor authentication</h2>
+        <p class="tm-profile-subtitle">Protect your account with an extra verification step whenever you sign in.</p>
+    </div>
+
+    <div class="tm-cred-intro alert alert-info">
+        Two-factor authentication adds an extra layer of protection. After setup, you will sign in with both your password and a code from your authenticator app.
+    </div>
+
+    <?php if (isset($error)): ?>
+        <div class="alert alert-danger mb-4">
+            <?php echo htmlspecialchars($error); ?>
+        </div>
+    <?php endif; ?>
+
+    <?php if (isset($setupData) && is_array($setupData)): ?>
+        <div class="tm-cred-steps">
+            <div class="tm-cred-step">
+                <h3>1. Install an authenticator app</h3>
+                <p>Use any TOTP-compatible app such as Google Authenticator, Microsoft Authenticator, or Authy.</p>
+            </div>
+
+            <div class="tm-cred-step">
+                <h3>2. Scan the QR code</h3>
+                <p>Open your authenticator app and scan the QR code below.</p>
+                <div class="tm-cred-qr">
+                    <div id="qrcode"></div>
+                    <div class="tm-cred-secret">
+                        <small>Can&apos;t scan? Enter this code manually:</small>
+                        <code><?php echo htmlspecialchars($setupData['secret']); ?></code>
                     </div>
-
-                    <?php if (isset($error)): ?>
-                        <div class="alert alert-danger">
-                            <?php echo htmlspecialchars($error); ?>
-                        </div>
-                    <?php endif; ?>
-
-                    <?php if (isset($setupData) && is_array($setupData)): ?>
-                        <div class="setup-steps">
-                            <h4>1. Install an authenticator app</h4>
-                            <p>If you haven't already, install an authenticator app on your mobile device:</p>
-                            <ul>
-                                <li>Google Authenticator</li>
-                                <li>Microsoft Authenticator</li>
-                                <li>Authy</li>
-                            </ul>
-
-                            <h4 class="mt-4">2. Scan the QR code</h4>
-                            <p>Open your authenticator app and scan this QR code:</p>
-
-                            <div class="text-center my-4">
-                                <div id="qrcode"></div>
-                                <div class="mt-2">
-                                    <small class="text-muted">Can't scan? Use this code instead:</small><br>
-                                    <code class="secret-key"><?php echo htmlspecialchars($setupData['secret']); ?></code>
-                                </div>
-                            </div>
-
-                            <h4 class="mt-4">3. Verify setup</h4>
-                            <p>Enter the 6-digit code from your authenticator app to verify the setup:</p>
-
-                            <form method="post" action="?page=credentials&item=2fa&action=setup" class="mt-3">
-                                <div class="form-group">
-                                    <input type="text" 
-                                           name="code" 
-                                           class="form-control" 
-                                           pattern="[0-9]{6}" 
-                                           maxlength="6"
-                                           required
-                                           placeholder="Enter 6-digit code">
-                                </div>
-
-                                <input type="hidden" name="secret" value="<?php echo htmlspecialchars($setupData['secret']); ?>">
-                                <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
-
-                                <button type="submit" class="btn btn-primary mt-3">
-                                    Verify and enable 2FA
-                                </button>
-                            </form>
-
-                            <div class="mt-4">
-                                <h4>Backup codes</h4>
-                                <p class="text-warning">
-                                    <strong>Important:</strong> Save these backup codes in a secure place. 
-                                    If you lose access to your authenticator app, you can use these codes to sign in.
-                                    Each code can only be used once.
-                                </p>
-                                <div class="backup-codes bg-light p-3 rounded">
-                                    <?php foreach ($setupData['backupCodes'] as $code): ?>
-                                        <code class="d-block"><?php echo htmlspecialchars($code); ?></code>
-                                    <?php endforeach; ?>
-                                </div>
-                                <button class="btn btn-secondary mt-2" onclick="window.print()">
-                                    Print backup codes
-                                </button>
-                            </div>
-                        </div>
-                    <?php else: ?>
-                        <div class="alert alert-danger">
-                            Failed to generate 2FA setup data. Please try again.
-                        </div>
-                        <a href="?page=credentials" class="btn btn-primary">Back to credentials</a>
-                    <?php endif; ?>
                 </div>
             </div>
+
+            <div class="tm-cred-step">
+                <h3>3. Verify setup</h3>
+                <p>Enter the 6-digit code shown in your authenticator app.</p>
+                <form method="post" action="?page=credentials&item=2fa&action=setup" class="tm-cred-form" novalidate>
+                    <div class="mb-3">
+                        <label for="setup_code" class="form-label">One-time code</label>
+                        <input type="text"
+                               id="setup_code"
+                               name="code"
+                               class="form-control"
+                               pattern="[0-9]{6}"
+                               maxlength="6"
+                               required
+                               placeholder="000000">
+                    </div>
+
+                    <input type="hidden" name="secret" value="<?php echo htmlspecialchars($setupData['secret']); ?>">
+                    <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
+
+                    <button type="submit" class="btn btn-primary tm-contact-submit w-100">
+                        Verify and enable 2FA
+                    </button>
+                </form>
+            </div>
+
+            <div class="tm-cred-step">
+                <h3>Backup codes</h3>
+                <p class="text-danger mb-3">
+                    Save these codes somewhere secure. Each code can be used once if you lose access to your authenticator app.
+                </p>
+                <div class="tm-cred-backup">
+                    <?php foreach ($setupData['backupCodes'] as $code): ?>
+                        <code><?php echo htmlspecialchars($code); ?></code>
+                    <?php endforeach; ?>
+                </div>
+                <button class="btn btn-outline-secondary mt-3" onclick="window.print()">
+                    Print backup codes
+                </button>
+            </div>
         </div>
-    </div>
+    <?php else: ?>
+        <div class="alert alert-danger">
+            Failed to generate 2FA setup data. Please try again.
+        </div>
+        <a href="?page=credentials" class="btn btn-primary">Back to credentials</a>
+    <?php endif; ?>
 </div>
 
 <?php if (isset($setupData) && is_array($setupData)): ?>
diff --git a/app/templates/credentials-2fa-verify.php b/app/templates/credentials-2fa-verify.php
index 8705bf3..7096156 100644
--- a/app/templates/credentials-2fa-verify.php
+++ b/app/templates/credentials-2fa-verify.php
@@ -4,74 +4,70 @@
  */
 ?>
 
-<div class="container mt-4">
-    <div class="row justify-content-center">
-        <div class="col-md-6">
-            <div class="card">
-                <div class="card-header">
-                    <h3>Two-factor authentication</h3>
-                </div>
-                <div class="card-body">
-                    <?php if (isset($error)): ?>
-                        <div class="alert alert-danger">
-                            <?php echo htmlspecialchars($error); ?>
-                        </div>
-                    <?php endif; ?>
+<div class="auth-card mx-auto">
+    <div class="auth-card-body">
+        <div class="auth-header">
+            <p class="auth-eyebrow">Security check</p>
+            <h2 class="auth-title">Two-factor authentication</h2>
+            <p class="auth-subtitle">Enter the 6-digit code from your authenticator app to continue.</p>
+        </div>
 
-                    <p>Enter the 6-digit code from your authenticator app:</p>
-
-                    <form method="post" action="?page=login&action=verify" class="mt-3">
-                        <div class="form-group">
-                            <input type="text" 
-                                   name="code" 
-                                   class="form-control form-control-lg text-center" 
-                                   pattern="[0-9]{6}" 
-                                   maxlength="6"
-                                   inputmode="numeric"
-                                   autocomplete="one-time-code"
-                                   required
-                                   autofocus
-                                   placeholder="000000">
-                        </div>
-
-                        <input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
-
-                        <button type="submit" class="btn btn-primary btn-block mt-4">
-                            Verify code
-                        </button>
-                    </form>
-
-                    <div class="mt-4">
-                        <p class="text-muted text-center">
-                            Lost access to your authenticator app?<br>
-                            <a href="#" data-toggle="collapse" data-target="#backupCodeForm">
-                                Use a backup code
-                            </a>
-                        </p>
-
-                        <div class="collapse mt-3" id="backupCodeForm">
-                            <form method="post" action="?page=login&action=verify" class="mt-3">
-                                <div class="form-group">
-                                    <label>Enter backup code:</label>
-                                    <input type="text" 
-                                           name="backup_code" 
-                                           class="form-control"
-                                           pattern="[a-f0-9]{8}"
-                                           maxlength="8"
-                                           required
-                                           placeholder="Enter backup code">
-                                </div>
-
-                                <input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
-
-                                <button type="submit" class="btn btn-secondary btn-block">
-                                    Use backup code
-                                </button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
+        <?php if (isset($error)): ?>
+            <div class="alert alert-danger mb-4">
+                <?php echo htmlspecialchars($error); ?>
             </div>
+        <?php endif; ?>
+
+        <form method="post" action="?page=login&action=verify" class="auth-form" novalidate>
+            <div class="text-center mb-3">
+                <label for="code" class="form-label">One-time code</label>
+                <input type="text"
+                       id="code"
+                       name="code"
+                       class="form-control text-center auth-otp-input"
+                       pattern="[0-9]{6}"
+                       maxlength="6"
+                       inputmode="numeric"
+                       autocomplete="one-time-code"
+                       required
+                       autofocus
+                       placeholder="000000">
+            </div>
+
+            <input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
+
+            <button type="submit" class="btn btn-primary auth-submit w-100">
+                Verify code
+            </button>
+        </form>
+
+        <div class="mt-4 text-center">
+            <p class="text-muted mb-2">Lost access to your authenticator app?</p>
+            <button class="btn btn-link auth-link p-0" type="button" data-toggle="collapse" data-target="#backupCodeForm">
+                Use a backup code
+            </button>
+        </div>
+
+        <div class="collapse mt-3" id="backupCodeForm">
+            <form method="post" action="?page=login&action=verify" class="auth-form" novalidate>
+                <div class="mb-3">
+                    <label for="backup_code" class="form-label">Backup code</label>
+                    <input type="text"
+                           id="backup_code"
+                           name="backup_code"
+                           class="form-control"
+                           pattern="[a-f0-9]{8}"
+                           maxlength="8"
+                           required
+                           placeholder="Enter 8-character code">
+                </div>
+
+                <input type="hidden" name="user_id" value="<?php echo htmlspecialchars($userId); ?>">
+
+                <button type="submit" class="btn btn-secondary w-100">
+                    Use backup code
+                </button>
+            </form>
         </div>
     </div>
 </div>
diff --git a/app/templates/credentials-manage.php b/app/templates/credentials-manage.php
index c73f190..d16d607 100644
--- a/app/templates/credentials-manage.php
+++ b/app/templates/credentials-manage.php
@@ -5,88 +5,80 @@
  */
 ?>
 
-<div class="container mt-4">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <!-- Password Management -->
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h3>change password</h3>
+<div class="tm-cred-card mx-auto">
+    <div class="tm-profile-header">
+        <p class="tm-profile-eyebrow">Security</p>
+        <h2 class="tm-profile-title">Manage credentials</h2>
+        <p class="tm-profile-subtitle">Update your password and keep two-factor authentication status in one place.</p>
+    </div>
+
+    <div class="tm-cred-grid">
+        <section class="tm-cred-panel">
+            <div class="tm-cred-panel-head">
+                <div>
+                    <h3>Change password</h3>
+                    <p>Choose a strong password to keep your account safe.</p>
                 </div>
-                <div class="card-body">
-                    <form method="post" action="?page=credentials&item=password">
-                        <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
+                <span class="badge bg-light text-dark">Required</span>
+            </div>
+            <form method="post" action="?page=credentials&item=password" class="tm-cred-form" novalidate>
+                <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
 
-                        <div class="form-group">
-                            <label for="current_password">current password</label>
-                            <input type="password" 
-                                   class="form-control" 
-                                   id="current_password" 
-                                   name="current_password" 
-                                   required>
-                        </div>
-
-                        <div class="form-group mt-3">
-                            <label for="new_password">new password</label>
-                            <input type="password" 
-                                   class="form-control" 
-                                   id="new_password" 
-                                   name="new_password"
-                                   pattern=".{8,}"
-                                   title="Password must be at least 8 characters long"
-                                   required>
-                            <small class="form-text text-muted">minimum 8 characters</small>
-                        </div>
-
-                        <div class="form-group mt-3">
-                            <label for="confirm_password">confirm new password</label>
-                            <input type="password" 
-                                   class="form-control" 
-                                   id="confirm_password" 
-                                   name="confirm_password"
-                                   pattern=".{8,}"
-                                   required>
-                        </div>
-
-                        <div class="mt-4">
-                            <button type="submit" class="btn btn-primary">change password</button>
-                        </div>
-                    </form>
+                <div class="mb-3">
+                    <label for="current_password" class="form-label">Current password</label>
+                    <input type="password" class="form-control" id="current_password" name="current_password" required>
                 </div>
+
+                <div class="mb-3">
+                    <label for="new_password" class="form-label">New password</label>
+                    <input type="password" class="form-control" id="new_password" name="new_password" pattern=".{8,}" title="Password must be at least 8 characters long" required>
+                    <small class="form-text text-muted">Minimum 8 characters</small>
+                </div>
+
+                <div class="mb-4">
+                    <label for="confirm_password" class="form-label">Confirm new password</label>
+                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" pattern=".{8,}" required>
+                </div>
+
+                <button type="submit" class="btn btn-primary tm-contact-submit w-100">Save new password</button>
+            </form>
+        </section>
+
+        <section class="tm-cred-panel">
+            <div class="tm-cred-panel-head">
+                <div>
+                    <h3>Two-factor authentication</h3>
+                    <p>Strengthen security with a verification code from your authenticator app.</p>
+                </div>
+                <span class="badge <?= $has2fa ? 'bg-success' : 'bg-warning text-dark' ?>">
+                    <?= $has2fa ? 'Enabled' : 'Disabled' ?>
+                </span>
             </div>
 
-            <!-- 2FA Management -->
-            <div class="card">
-                <div class="card-header">
-                    <h3>two-factor authentication</h3>
+            <?php if ($has2fa): ?>
+                <div class="alert alert-success d-flex align-items-center gap-2">
+                    <i class="fas fa-shield-check"></i>
+                    <span>Two-factor authentication is currently enabled.</span>
                 </div>
-                <div class="card-body">
-                    <p class="mb-4">Two-factor authentication adds an extra layer of security to your account. Once enabled, you'll need to enter both your password and a code from your authenticator app when signing in.</p>
-
-                    <?php if ($has2fa): ?>
-                        <div class="alert alert-success">
-                            <i class="fas fa-check-circle"></i> two-factor authentication is enabled
-                        </div>
-                        <form method="post" action="?page=credentials&item=2fa&action=disable">
-                            <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
-                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to disable two-factor authentication? This will make your account less secure.')">
-                                disable two-factor authentication
-                            </button>
-                        </form>
-                    <?php else: ?>
-                        <div class="alert alert-warning">
-                            <i class="fas fa-exclamation-triangle"></i> two-factor authentication is not enabled
-                        </div>
-                        <form method="post" action="?page=credentials&item=2fa&action=setup">
-                            <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
-                            <button type="submit" class="btn btn-primary">
-                                set up two-factor authentication
-                            </button>
-                        </form>
-                    <?php endif; ?>
+                <form method="post" action="?page=credentials&item=2fa&action=disable" class="tm-cred-form">
+                    <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
+                    <button type="submit" class="btn btn-outline-danger w-100" onclick="return confirm('Disable two-factor authentication? This will make your account less secure.')">
+                        Disable 2FA
+                    </button>
+                </form>
+            <?php else: ?>
+                <div class="alert alert-warning d-flex align-items-center gap-2">
+                    <i class="fas fa-lock"></i>
+                    <span>Two-factor authentication is not enabled yet.</span>
                 </div>
-            </div>
-        </div>
+                <form method="post" action="?page=credentials&item=2fa&action=setup" class="tm-cred-form">
+                    <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
+                    <button type="submit" class="btn btn-outline-primary w-100">
+                        Set up 2FA
+                    </button>
+                </form>
+            <?php endif; ?>
+        </section>
     </div>
 </div>
 
diff --git a/public_html/static/css/main.css b/public_html/static/css/main.css
index e68009d..9a9676a 100644
--- a/public_html/static/css/main.css
+++ b/public_html/static/css/main.css
@@ -5,10 +5,114 @@ html, body {
     padding: 0;
 }
 
+/* Credentials management */
+.tm-cred-card {
+    max-width: 900px;
+    background: rgba(255,255,255,0.97);
+    border-radius: 1.5rem;
+    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
+    padding: 2.5rem;
+    margin: 2.5rem auto;
+}
+
+.tm-cred-intro {
+    border-radius: 1rem;
+    border: none;
+}
+
+.tm-cred-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.tm-cred-step {
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 1.2rem;
+    padding: 1.5rem;
+    background: rgba(248, 250, 252, 0.75);
+}
+
+.tm-cred-qr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.5rem;
+    border-radius: 1rem;
+    background: #fff;
+    border: 1px dashed rgba(148, 163, 184, 0.5);
+}
+
+.tm-cred-secret code,
+.tm-cred-backup code {
+    display: inline-block;
+    padding: 0.35rem 0.6rem;
+    border-radius: 0.6rem;
+    background: #0f172a;
+    color: #f8fafc;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+}
+
+.tm-cred-backup {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    background: #fff;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.tm-cred-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.tm-cred-panel {
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    background: rgba(248, 250, 252, 0.75);
+}
+
+.tm-cred-panel-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    gap: 1rem;
+}
+
+.tm-cred-panel-head h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.tm-cred-form .form-label {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.tm-cred-form .form-control {
+    border-radius: 0.85rem;
+    border: 1px solid rgba(148, 163, 184, 0.7);
+}
+
+@media (max-width: 768px) {
+    .tm-cred-card {
+        padding: 2rem 1.5rem;
+    }
+}
+
 /* Profile form */
 .tm-profile-card {
     max-width: 1100px;
-    margin: 2.5rem auto;
+    margin: 0rem auto 1.5rem;
     background: rgba(255, 255, 255, 0.97);
     border-radius: 1.5rem;
     box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);