diff --git a/app/templates/auth/login.html b/app/templates/auth/login.html
index b1140e6..7ddf32f 100644
--- a/app/templates/auth/login.html
+++ b/app/templates/auth/login.html
@@ -2,52 +2,118 @@
 
 {% block title %}Login - Janitorial QC{% endblock %}
 
-{% block content %}
-<div class="row justify-content-center mt-5">
-    <div class="col-10 col-sm-8 col-md-5 col-lg-4">
-        <div class="card shadow-lg">
-            <div class="card-header bg-primary text-white text-center py-4">
-                <h3><i class="bi bi-clipboard-check-fill"></i> Janitorial QC</h3>
-                <p class="mb-0">Quality Control System</p>
-            </div>
-            <div class="card-body p-4">
-                <form method="POST" action="{{ url_for('auth.login') }}">
-                    {{ form.hidden_tag() }}
-                    
-                    <div class="mb-3">
-                        {{ form.username.label(class="form-label") }}
-                        {{ form.username(class="form-control form-control-lg", placeholder="Enter username") }}
-                        {% if form.username.errors %}
-                            <div class="text-danger small mt-1">
-                                {% for error in form.username.errors %}{{ error }}{% endfor %}
-                            </div>
-                        {% endif %}
-                    </div>
-                    
-                    <div class="mb-4">
-                        {{ form.password.label(class="form-label") }}
-                        {{ form.password(class="form-control form-control-lg", placeholder="Enter password") }}
-                        {% if form.password.errors %}
-                            <div class="text-danger small mt-1">
-                                {% for error in form.password.errors %}{{ error }}{% endfor %}
-                            </div>
-                        {% endif %}
-                    </div>
+{% block extra_css %}
+<style>
+  /* ── Login page background ─────────────────────────────────────────────── */
+  /* Scoped to this page only via the .login-page class set on <body>         */
+  body.login-page {
+    min-height: 100vh;
+    background:
+      linear-gradient(rgba(10, 25, 50, 0.55), rgba(10, 25, 50, 0.55)),
+      url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1920&q=80")
+      center center / cover no-repeat fixed;
+  }
 
-                    <div class="mb-3 form-check">
-                        {{ form.remember_me(class="form-check-input") }}
-                        {{ form.remember_me.label(class="form-check-label text-muted") }}
-                    </div>
-                    
-                    <button type="submit" class="btn btn-primary btn-lg w-100">
-                        <i class="bi bi-box-arrow-in-right"></i> Login
-                    </button>
-                </form>
-            </div>
-            <div class="card-footer text-center text-muted small">
-                &copy; 2025 Janitorial QC System
-            </div>
-        </div>
+  /* Ensure the content block fills the full viewport height so the card
+     appears centred against the background rather than near the top.       */
+  body.login-page .login-wrapper {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Card polish — glass-style surface that reads well on the dark overlay   */
+  body.login-page .login-card {
+    border: none;
+    border-radius: 14px;
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(2px);
+    overflow: hidden;
+    width: 100%;
+    max-width: 420px;
+  }
+
+  body.login-page .login-card .card-header {
+    background: #0d6efd;
+    padding: 2rem 2rem 1.5rem;
+    border-bottom: none;
+  }
+
+  body.login-page .login-card .card-body {
+    padding: 2rem;
+    background: #fff;
+  }
+
+  body.login-page .login-card .card-footer {
+    background: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+    padding: .75rem 2rem;
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+{# Add .login-page to <body> via a small inline script — Jinja has no direct
+   access to the <body> tag in base.html, so we set the class from JS on
+   DOMContentLoaded before first paint where possible, and also synchronously. #}
+<script>document.body.classList.add('login-page');</script>
+
+<div class="login-wrapper">
+  <div class="login-card card shadow-lg">
+
+    <div class="card-header text-white text-center">
+      <i class="bi bi-clipboard-check-fill fs-1 d-block mb-2"></i>
+      <h3 class="mb-0 fw-bold">Janitorial QC</h3>
+      <p class="mb-0 opacity-75 small">Quality Control System</p>
     </div>
+
+    <div class="card-body">
+      <form method="POST" action="{{ url_for('auth.login') }}">
+        {{ form.hidden_tag() }}
+
+        <div class="mb-3">
+          {{ form.username.label(class="form-label fw-semibold") }}
+          {{ form.username(class="form-control form-control-lg", placeholder="Enter username", autofocus=true) }}
+          {% if form.username.errors %}
+          <div class="text-danger small mt-1">
+            {% for error in form.username.errors %}{{ error }}{% endfor %}
+          </div>
+          {% endif %}
+        </div>
+
+        <div class="mb-4">
+          {{ form.password.label(class="form-label fw-semibold") }}
+          {{ form.password(class="form-control form-control-lg", placeholder="Enter password") }}
+          {% if form.password.errors %}
+          <div class="text-danger small mt-1">
+            {% for error in form.password.errors %}{{ error }}{% endfor %}
+          </div>
+          {% endif %}
+        </div>
+
+        <div class="mb-4 form-check">
+          {{ form.remember_me(class="form-check-input") }}
+          {{ form.remember_me.label(class="form-check-label text-muted") }}
+        </div>
+
+        <button type="submit" class="btn btn-primary btn-lg w-100">
+          <i class="bi bi-box-arrow-in-right me-1"></i> Log In
+        </button>
+      </form>
+    </div>
+
+    <div class="card-footer text-center text-muted small">
+      &copy; 2025 Janitorial QC System
+    </div>
+
+  </div>
 </div>
+
+{# Remove .login-page when navigating away (SPA-style guard) #}
+<script>
+  window.addEventListener('pagehide', function () {
+    document.body.classList.remove('login-page');
+  });
+</script>
 {% endblock %}
\ No newline at end of file
