diff --git a/server/SHServ/Controllers/AuthController.php b/server/SHServ/Controllers/AuthController.php
index b5c9707..27f6201 100644
--- a/server/SHServ/Controllers/AuthController.php
+++ b/server/SHServ/Controllers/AuthController.php
@@ -335,106 +335,109 @@
     <title>Smart Home — Authentication Complete</title>
     <style>
         :root {
-            --page: #0f172a;
-            --card: rgba(148, 163, 184, 0.06);
-            --border: rgba(148, 163, 184, 0.24);
-            --text-light: #f1f5f9;
-            --text-medium: #94a3b8;
-            --text-dark: #64748b;
-            --accent: #12b7f5;
-            --accent-rgb: 18, 183, 245;
-            --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            /* gnexus-ui-kit palette (extracted from kit.css) */
+            --gn-page: #16161e;
+            --gn-card: #1f2335;
+            --gn-primary: #c0caf5;
+            --gn-text: #c0caf5;
+            --gn-text-medium: #a9b1d6;
+            --gn-text-muted: #787c99;
+            --gn-success: #9ece6a;
+            --gn-danger: #f7768e;
+            --gn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         }
         * { box-sizing: border-box; }
         body {
-            font-family: var(--font);
+            font-family: var(--gn-font);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
             margin: 0;
-            background: var(--page);
+            background: var(--gn-page);
+            color: var(--gn-text);
         }
         .card {
-            background: var(--card);
-            border: 2px solid var(--border);
-            border-left: 6px solid var(--accent);
-            padding: 34px 22px;
-            text-align: center;
+            position: relative;
             max-width: 340px;
             width: 90%;
-            border-radius: 0 8px 8px 0;
+            overflow: hidden;
+            background: var(--gn-card);
+            border: 2px solid var(--gn-primary);
         }
-        .logo {
-            width: 64px;
-            height: 64px;
-            margin: 0 auto 16px;
-            background: rgba(var(--accent-rgb), 0.15);
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 28px;
-            color: var(--accent);
-        }
-        h1 {
-            margin: 0 0 12px;
-            font-size: 18px;
-            font-weight: 600;
-            color: var(--text-light);
+        .card .card-title {
+            color: var(--gn-page);
+            background: var(--gn-primary);
+            padding: 8px 12px;
+            font-weight: 700;
             text-transform: uppercase;
-            letter-spacing: 0.08em;
-        }
-        p {
-            color: var(--text-medium);
-            margin: 0 0 26px;
             font-size: 14px;
+            letter-spacing: 0.05em;
+            margin: 0;
+        }
+        .card .card-content {
+            padding: 22px 18px;
+            text-align: center;
+        }
+        .card .card-content p {
+            color: var(--gn-text-medium);
+            font-size: 13px;
+            margin: 0;
             line-height: 1.5;
             min-height: 42px;
         }
+        .card .card-footer {
+            padding: 0 18px 18px;
+            text-align: center;
+        }
+        /* gnexus-ui-kit .btn-primary */
         .btn {
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            min-height: 46px;
-            font-family: var(--font);
+            min-height: 40px;
+            font-family: var(--gn-font);
             font-size: 14px;
             font-weight: 600;
             text-transform: uppercase;
-            letter-spacing: 0.08em;
-            color: var(--accent);
+            letter-spacing: 0.05em;
+            color: var(--gn-primary);
             text-decoration: none;
-            padding: 12px 22px;
-            border: 2px solid var(--accent);
-            border-left-width: 6px;
-            border-radius: 0 4px 4px 0;
-            transition: background-color .2s, color .2s;
+            padding: 8px 18px;
+            border: 2px solid var(--gn-primary);
+            background: transparent;
             cursor: pointer;
+            transition: background-color .15s, color .15s;
         }
         .btn:hover, .btn:active {
-            background: var(--accent);
-            color: var(--page);
+            background-color: var(--gn-primary);
+            color: var(--gn-page);
         }
         .hidden { display: none; }
         .spinner {
-            width: 20px;
-            height: 20px;
-            border: 2px solid var(--border);
-            border-top-color: var(--accent);
+            width: 18px;
+            height: 18px;
+            border: 2px solid var(--gn-text-muted);
+            border-top-color: var(--gn-primary);
             border-radius: 50%;
             animation: spin 1s linear infinite;
-            margin: 0 auto 12px;
+            margin: 0 auto 10px;
+            display: inline-block;
+            vertical-align: middle;
         }
         @keyframes spin { to { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
     <div class="card">
-        <div class="logo">&#10003;</div>
-        <h1>Login successful</h1>
-        <p id="status"><span class="spinner"></span>Opening Smart Home…</p>
-        <a id="btn" class="btn hidden" href="' . $intentUrl . '">Open Smart Home App</a>
+        <div class="card-title">Authentication complete</div>
+        <div class="card-content">
+            <p id="status"><span class="spinner"></span>Opening Smart Home app…</p>
+        </div>
+        <div class="card-footer">
+            <a id="btn" class="btn hidden" href="' . $intentUrl . '">Open App</a>
+        </div>
     </div>
     <script>
         (function() {