diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 78f77fd7..aa627777 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -6,6 +6,9 @@
 }
 
 :root {
+    /* Login-specific vars */
+    --login-bg-gradient: linear-gradient(135deg, var(--bg0) 0%, var(--bg1) 50%, var(--bg0) 100%);
+    
     /* Gruvbox Dark Color Palette */
     --bg0: #282828;
     --bg1: #3c3836;
@@ -84,6 +87,197 @@ body {
     overflow-x: hidden;
 }
 
+/* Login Screen Styles */
+.login-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: var(--login-bg-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    padding: 2rem;
+    backdrop-filter: blur(20px);
+}
+
+.login-card {
+    background: var(--bg1);
+    border-radius: 20px;
+    padding: 3rem 2.5rem;
+    width: 100%;
+    max-width: 420px;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--bg2);
+    text-align: center;
+    animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.login-header {
+    margin-bottom: 2.5rem;
+}
+
+.login-logo {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 1rem;
+    border-radius: 16px;
+    box-shadow: var(--shadow);
+    object-fit: contain;
+}
+
+.login-header h1 {
+    font-size: 1.75rem;
+    font-weight: 800;
+    color: var(--fg0);
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.025em;
+}
+
+.login-subtitle {
+    color: var(--fg3);
+    font-size: 1rem;
+    opacity: 0.8;
+}
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.form-group {
+    position: relative;
+}
+
+.form-group label {
+    position: absolute;
+    top: 0.75rem;
+    left: 1rem;
+    font-size: 0.875rem;
+    color: var(--fg3);
+    font-weight: 500;
+    pointer-events: none;
+    transition: all 0.2s;
+    background: var(--bg1);
+    padding: 0 0.25rem;
+}
+
+.form-group input:focus + label,
+.form-group input:not(:placeholder-shown) + label {
+    top: -0.5rem;
+    left: 0.75rem;
+    font-size: 0.75rem;
+    color: var(--orange);
+}
+
+.form-group input {
+    padding: 1.25rem 1rem 0.75rem;
+    background: var(--bg0);
+    border: 2px solid var(--bg3);
+    border-radius: 12px;
+    font-size: 1rem;
+    color: var(--fg1);
+    transition: all 0.3s;
+}
+
+.form-group input:focus {
+    border-color: var(--orange);
+    box-shadow: 0 0 0 4px rgba(214, 93, 14, 0.15);
+    outline: none;
+}
+
+.login-btn {
+    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--bg0);
+    cursor: pointer;
+    transition: all 0.3s;
+    box-shadow: var(--shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.login-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.login-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.login-footer {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--bg2);
+}
+
+.login-footer p {
+    color: var(--fg4);
+    font-size: 0.875rem;
+}
+
+.login-footer code {
+    background: var(--bg2);
+    color: var(--aqua-light);
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+.error-message {
+    background: rgba(204, 36, 29, 0.15);
+    border: 1px solid var(--red);
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--red-light);
+}
+
+.error-message i {
+    font-size: 1.125rem;
+}
+
+/* Responsive Login */
+@media (max-width: 480px) {
+    .login-card {
+        padding: 2rem 1.5rem;
+        margin: 1rem;
+    }
+    
+    .login-logo {
+        width: 64px;
+        height: 64px;
+    }
+}
+
 /* Utils */
 .text-center { text-align: center; }
 .whitespace-nowrap { white-space: nowrap; }
@@ -168,12 +362,22 @@ body {
     white-space: nowrap;
 }
 
-.logo i {
-    color: var(--orange);
-    font-size: 1.5rem;
-    min-width: 24px;
+.sidebar-logo {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    object-fit: contain;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(254, 128, 25, 0.3);
 }
 
+.sidebar.collapsed .sidebar-logo {
+    width: 40px;
+    height: 40px;
+}
+
+/* Legacy icon fallback removed - logo replaces */
+
 .sidebar-menu {
     flex: 1;
     overflow-y: auto;
diff --git a/static/img/LLMProxyLogo.png b/static/img/LLMProxyLogo.png
new file mode 100644
index 00000000..d8dc2c4f
Binary files /dev/null and b/static/img/LLMProxyLogo.png differ
diff --git a/static/index.html b/static/index.html
index 82c7ead9..16bae8fb 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,6 +6,8 @@
     <title>LLM Proxy Gateway - Admin Dashboard</title>
     <link rel="stylesheet" href="/css/dashboard.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="icon" href="img/LLMProxyLogo.png" type="image/png" sizes="32x32">
+    <link rel="apple-touch-icon" href="img/LLMProxyLogo.png">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
@@ -15,7 +17,7 @@
     <div id="login-screen" class="login-container">
         <div class="login-card">
             <div class="login-header">
-                <i class="fas fa-robot login-icon"></i>
+                <img src="img/LLMProxyLogo.png" alt="LLM Proxy Logo" class="login-logo">
                 <h1>LLM Proxy Gateway</h1>
                 <p class="login-subtitle">Admin Dashboard</p>
             </div>
@@ -38,7 +40,7 @@
                     </button>
                 </div>
                 <div class="login-footer">
-                    <p>Default credentials: admin / admin123</p>
+                    <p>Default: <code>admin</code> / <code>admin</code> (change in Settings &gt; Security)</p>
                 </div>
             </form>
             <div id="login-error" class="error-message" style="display: none;">
@@ -54,8 +56,8 @@
         <nav class="sidebar">
             <div class="sidebar-header">
                 <div class="logo">
-                    <i class="fas fa-shield-alt"></i>
-                    <span>LLM Proxy</span>
+                    <img src="img/LLMProxyLogo.png" alt="LLM Proxy" class="sidebar-logo">
+                    <span>Gateway</span>
                 </div>
                 <button class="sidebar-toggle" id="sidebar-toggle">
                     <i class="fas fa-bars"></i>