diff --git a/core/templates/base.html b/core/templates/base.html
index 0155d6e..3a4fb0c 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -14,11 +14,13 @@
     
     {% block extra_head %}{% endblock %}
 </head>
-<body>
-    <nav class="navbar navbar-expand-lg sticky-top mb-4">
+<body class="app-body">
+    <div class="ambient-bg" aria-hidden="true"></div>
+    <nav class="navbar navbar-expand-lg sticky-top mb-4 site-nav">
         <div class="container">
-            <a class="navbar-brand fw-bold" href="{% url 'dashboard' %}">
-                <span style="color: var(--primary-color)">Support</span>Center
+            <a class="navbar-brand fw-bold d-flex align-items-center gap-2" href="{% url 'dashboard' %}">
+                <span class="brand-mark">SC</span>
+                <span class="brand-text">Support Center</span>
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
@@ -53,7 +55,7 @@
         </div>
     </nav>
 
-    <main class="container">
+    <main class="container page-shell">
         {% if messages %}
             {% for message in messages %}
                 <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
@@ -66,7 +68,7 @@
         {% block content %}{% endblock %}
     </main>
 
-    <footer class="py-5 mt-5 text-center text-muted small">
+    <footer class="py-5 mt-5 text-center text-muted small site-footer">
         <div class="container">
             <p>&copy; {% now 'Y' %} Support Center. Built with Django.</p>
         </div>
@@ -76,4 +78,4 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     {% block extra_js %}{% endblock %}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/core/templates/registration/login.html b/core/templates/registration/login.html
index bec6415..c6e4163 100644
--- a/core/templates/registration/login.html
+++ b/core/templates/registration/login.html
@@ -3,37 +3,48 @@
 {% block title %}Login - Support Center{% endblock %}
 
 {% block content %}
-<div class="row justify-content-center">
-    <div class="col-md-5">
-        <div class="card shadow-sm border-0 mt-5">
-            <div class="card-body p-5 text-center">
-                <h2 class="fw-bold mb-4">Welcome Back</h2>
-                <p class="text-muted mb-4">Please log in to manage your support tickets.</p>
-                
-                <form method="post">
-                    {% csrf_token %}
-                    <div class="mb-3 text-start">
-                        <label for="id_username" class="form-label">Username</label>
-                        <input type="text" name="username" autofocus maxlength="150" required id="id_username" class="form-control">
-                    </div>
-                    <div class="mb-4 text-start">
-                        <label for="id_password" class="form-label">Password</label>
-                        <input type="password" name="password" required id="id_password" class="form-control">
-                    </div>
-                    
-                    {% if form.errors %}
-                        <div class="alert alert-danger py-2 small">
-                            Your username and password didn't match. Please try again.
-                        </div>
-                    {% endif %}
-                    
-                    <button type="submit" class="btn btn-primary w-100 py-2 fw-bold">Login</button>
-                    <input type="hidden" name="next" value="{{ next }}">
-                </form>
-                
-                <div class="mt-4 pt-3 border-top">
-                    <p class="small text-muted mb-0">Don't have an account? Contact your administrator.</p>
+<div class="auth-shell">
+    <div class="card auth-card">
+        <div class="auth-hero">
+            <div class="auth-brand">
+                <span class="brand-mark">SC</span>
+                <span class="brand-text">Support Center</span>
+            </div>
+            <h2 class="auth-title">Welcome back.</h2>
+            <p class="auth-lead">Keep support flowing, track every issue, and stay on top of what matters.</p>
+            <div class="auth-highlights">
+                <div><span></span>Fast triage for incoming tickets</div>
+                <div><span></span>Clear priorities and status visibility</div>
+                <div><span></span>One place for team updates</div>
+            </div>
+        </div>
+        <div class="auth-form">
+            <h3 class="mb-2">Sign in</h3>
+            <p class="auth-meta mb-4">Use your team credentials to continue.</p>
+
+            <form method="post">
+                {% csrf_token %}
+                <div class="mb-3 text-start">
+                    <label for="id_username" class="form-label">Username</label>
+                    <input type="text" name="username" autofocus maxlength="150" required id="id_username" class="form-control">
                 </div>
+                <div class="mb-4 text-start">
+                    <label for="id_password" class="form-label">Password</label>
+                    <input type="password" name="password" required id="id_password" class="form-control">
+                </div>
+
+                {% if form.errors %}
+                    <div class="alert alert-danger py-2 small">
+                        Your username and password didn't match. Please try again.
+                    </div>
+                {% endif %}
+
+                <button type="submit" class="btn btn-primary w-100 py-2">Login</button>
+                <input type="hidden" name="next" value="{{ next }}">
+            </form>
+
+            <div class="mt-4 pt-3 border-top">
+                <p class="small text-muted mb-0">Need access? Reach out to your administrator.</p>
             </div>
         </div>
     </div>
diff --git a/static/css/custom.css b/static/css/custom.css
index 9e2ea4c..f28bbd5 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,85 +1,322 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
 
 :root {
-    --primary-color: #0984E3;
-    --success-color: #00B894;
-    --warning-color: #FDCB6E;
-    --danger-color: #D63031;
-    --bg-color: #F9FAFB;
-    --card-bg: rgba(255, 255, 255, 0.95);
-    --text-main: #2D3436;
-    --text-muted: #636E72;
+    --font-body: 'Space Grotesk', sans-serif;
+    --font-display: 'Fraunces', serif;
+    --ink: #1f2328;
+    --muted: #5b6570;
+    --paper: #f5f2ed;
+    --paper-strong: #ffffff;
+    --accent: #0f766e;
+    --accent-dark: #0b5f59;
+    --accent-warm: #f1b97a;
+    --success: #2f8f6a;
+    --warning: #d18f1b;
+    --danger: #c7413a;
+    --border: rgba(31, 35, 40, 0.08);
+    --shadow: 0 16px 48px rgba(31, 35, 40, 0.12);
+    --shadow-soft: 0 8px 24px rgba(31, 35, 40, 0.08);
 }
 
 body {
-    font-family: 'Inter', sans-serif;
-    background-color: var(--bg-color);
-    color: var(--text-main);
+    font-family: var(--font-body);
+    background-color: var(--paper);
+    color: var(--ink);
     line-height: 1.6;
+    min-height: 100vh;
+    background-image:
+        radial-gradient(1200px 420px at 10% -10%, rgba(241, 185, 122, 0.25), transparent 60%),
+        radial-gradient(900px 380px at 90% 0%, rgba(15, 118, 110, 0.2), transparent 60%),
+        linear-gradient(180deg, #f7f3ed 0%, #fbfaf7 45%, #f2f7f6 100%);
+}
+
+.app-body {
+    position: relative;
+}
+
+.ambient-bg {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+        radial-gradient(2px 2px at 20% 30%, rgba(31, 35, 40, 0.08), transparent 60%),
+        radial-gradient(2px 2px at 80% 40%, rgba(31, 35, 40, 0.08), transparent 60%),
+        radial-gradient(3px 3px at 70% 70%, rgba(31, 35, 40, 0.06), transparent 60%);
+    background-size: 260px 260px;
+    opacity: 0.35;
+    z-index: 0;
+}
+
+main.container,
+.site-nav,
+.site-footer {
+    position: relative;
+    z-index: 1;
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: 'Poppins', sans-serif;
+    font-family: var(--font-display);
     font-weight: 600;
+    letter-spacing: 0.2px;
 }
 
-.navbar {
-    background: var(--card-bg);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0,0,0,0.05);
+.site-nav {
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(14px);
+    border-bottom: 1px solid var(--border);
+    box-shadow: 0 6px 18px rgba(31, 35, 40, 0.05);
+}
+
+.navbar-brand {
+    font-family: var(--font-display);
+    font-weight: 600;
+    letter-spacing: 0.4px;
+}
+
+.brand-mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, var(--accent), #1aa39a);
+    color: #ffffff;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+}
+
+.brand-text {
+    color: var(--ink);
+}
+
+.nav-link {
+    color: var(--muted);
+    font-weight: 500;
+}
+
+.nav-link:hover,
+.nav-link:focus {
+    color: var(--ink);
+}
+
+.page-shell {
+    padding-bottom: 2rem;
 }
 
 .btn-primary {
-    background-color: var(--primary-color);
+    background: linear-gradient(135deg, var(--accent), #1aa39a);
     border: none;
     padding: 0.6rem 1.5rem;
-    border-radius: 8px;
-    font-weight: 500;
-    transition: all 0.3s ease;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 10px 18px rgba(15, 118, 110, 0.2);
 }
 
 .btn-primary:hover {
-    background-color: #0873C4;
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(9, 132, 227, 0.2);
+    box-shadow: 0 14px 24px rgba(15, 118, 110, 0.28);
+}
+
+.btn-light {
+    background: var(--paper-strong);
+    border: 1px solid var(--border);
+    color: var(--ink);
+}
+
+.btn-light:hover {
+    background: #f6faf9;
+}
+
+.btn-link {
+    color: var(--muted);
 }
 
 .card {
-    border: none;
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
-    background: var(--card-bg);
-    transition: transform 0.2s ease;
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: var(--shadow-soft);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .card-ticket:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
+    box-shadow: 0 18px 40px rgba(31, 35, 40, 0.12);
+}
+
+.table {
+    color: var(--ink);
+}
+
+.table thead th {
+    background: rgba(15, 118, 110, 0.08);
+    color: var(--muted);
+    font-weight: 500;
+    border-bottom: 1px solid var(--border);
+}
+
+.table-hover > tbody > tr:hover {
+    background: rgba(15, 118, 110, 0.05);
+}
+
+.form-label {
+    font-weight: 600;
+    color: var(--ink);
+}
+
+.form-control {
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.9);
+    padding: 0.7rem 0.9rem;
+}
+
+.form-control:focus {
+    border-color: rgba(15, 118, 110, 0.6);
+    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.15);
 }
 
 .status-badge {
-    padding: 0.4rem 0.8rem;
-    border-radius: 50px;
-    font-size: 0.75rem;
+    padding: 0.35rem 0.85rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.6px;
 }
 
-.status-open { background: rgba(9, 132, 227, 0.1); color: var(--primary-color); }
-.status-pending { background: rgba(253, 203, 110, 0.1); color: #E17055; }
-.status-resolved { background: rgba(0, 184, 148, 0.1); color: var(--success-color); }
-.status-closed { background: rgba(99, 110, 114, 0.1); color: var(--text-muted); }
+.status-open { background: rgba(15, 118, 110, 0.12); color: var(--accent); }
+.status-pending { background: rgba(241, 185, 122, 0.25); color: #9b5b12; }
+.status-resolved { background: rgba(47, 143, 106, 0.18); color: var(--success); }
+.status-closed { background: rgba(91, 101, 112, 0.16); color: var(--muted); }
 
-.priority-high { color: var(--danger-color); font-weight: 600; }
-.priority-urgent { color: #D63031; text-decoration: underline; }
+.priority-high { color: var(--danger); font-weight: 600; }
+.priority-urgent { color: var(--danger); text-decoration: underline; }
 
 .thread-comment {
-    border-left: 3px solid #dfe6e9;
+    border-left: 3px solid #dfe3e6;
     margin-bottom: 1.5rem;
     padding-left: 1.5rem;
 }
 
 .thread-comment.agent-reply {
-    border-left-color: var(--primary-color);
-}
\ No newline at end of file
+    border-left-color: var(--accent);
+}
+
+.auth-shell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: calc(100vh - 180px);
+}
+
+.auth-card {
+    display: grid;
+    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
+    gap: 0;
+    overflow: hidden;
+    width: min(920px, 100%);
+    animation: riseIn 0.6s ease both;
+}
+
+.auth-hero {
+    padding: 2.5rem;
+    color: #ffffff;
+    background:
+        radial-gradient(120px 120px at 20% 20%, rgba(255, 255, 255, 0.22), transparent 70%),
+        radial-gradient(180px 180px at 80% 30%, rgba(241, 185, 122, 0.28), transparent 70%),
+        linear-gradient(150deg, var(--accent), #1aa39a);
+}
+
+.auth-hero .brand-text {
+    color: #ffffff;
+}
+
+.auth-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-weight: 600;
+    margin-bottom: 2rem;
+}
+
+.auth-title {
+    font-family: var(--font-display);
+    font-size: 2rem;
+    margin-bottom: 0.6rem;
+}
+
+.auth-lead {
+    color: rgba(255, 255, 255, 0.85);
+    margin-bottom: 2rem;
+}
+
+.auth-highlights {
+    display: grid;
+    gap: 0.8rem;
+    font-size: 0.95rem;
+}
+
+.auth-highlights span {
+    display: inline-flex;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.8);
+    margin-right: 0.6rem;
+}
+
+.auth-form {
+    padding: 2.5rem;
+    background: rgba(255, 255, 255, 0.96);
+}
+
+.alert {
+    border-radius: 12px;
+    border: 1px solid var(--border);
+}
+
+.alert-danger {
+    border-color: rgba(199, 65, 58, 0.25);
+}
+
+.auth-form h3 {
+    font-family: var(--font-display);
+}
+
+.auth-meta {
+    color: var(--muted);
+    font-size: 0.9rem;
+}
+
+.site-footer {
+    color: var(--muted);
+}
+
+@keyframes riseIn {
+    from {
+        opacity: 0;
+        transform: translateY(14px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 991px) {
+    .auth-shell {
+        min-height: auto;
+    }
+
+    .auth-card {
+        grid-template-columns: 1fr;
+    }
+
+    .auth-hero {
+        padding: 2rem;
+    }
+}
