diff --git a/webclient/src/features/auth/pages/LoginPage.vue b/webclient/src/features/auth/pages/LoginPage.vue
index df541be..811e910 100644
--- a/webclient/src/features/auth/pages/LoginPage.vue
+++ b/webclient/src/features/auth/pages/LoginPage.vue
@@ -1,33 +1,47 @@
 <template>
   <div class="login-page">
-    <GnEmptyState
-      icon="ph-user-circle"
-      title="Authentication Required"
-      description="Please sign in via gnexus-auth to continue."
-    >
-      <template #action>
-        <GnButton variant="primary" @click="handleLogin">
-          <template #icon>
-            <i class="ph ph-sign-in" />
-          </template>
-          Sign In
-        </GnButton>
-      </template>
-    </GnEmptyState>
+    <div class="login-card">
+      <div class="login-brand">
+        <i class="ph ph-fill ph-house-line brand-icon" />
+        <h1 class="brand-title">Smart Home Server</h1>
+        <p class="brand-subtitle">SHServ Web Client</p>
+      </div>
+
+      <div class="login-divider" />
+
+      <p class="login-hint">
+        You need to sign in to access the smart home dashboard.
+      </p>
+
+      <GnButton
+        variant="primary"
+        size="lg"
+        class="login-btn"
+        @click="handleLogin"
+      >
+        <template #icon>
+          <i class="ph ph-sign-in" />
+        </template>
+        Sign in with gnexus-auth
+      </GnButton>
+
+      <p v-if="authStore.isLoading" class="login-loading text-muted">
+        <i class="ph ph-spinner ph-spin" /> Checking session…
+      </p>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { GnEmptyState, GnButton } from "gnexus-ui-kit/vue";
+import { GnButton } from "gnexus-ui-kit/vue";
 import { useAuthStore } from "../../../stores/auth.js";
 
 const router = useRouter();
 const authStore = useAuthStore();
 
 onMounted(() => {
-  // If already authenticated, go home
   if (authStore.isAuthenticated) {
     router.replace({ name: "areas-favorites" });
   }
@@ -47,4 +61,65 @@
   min-height: 100vh;
   padding: 1rem;
 }
+
+.login-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 360px;
+  width: 100%;
+  padding: 2rem;
+  text-align: center;
+}
+
+.login-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand-icon {
+  font-size: 48px;
+  color: var(--color-primary);
+}
+
+.brand-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.brand-subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.login-divider {
+  width: 48px;
+  height: 2px;
+  background: var(--color-border);
+  border-radius: 1px;
+}
+
+.login-hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+}
+
+.login-btn {
+  width: 100%;
+}
+
+.login-loading {
+  margin: 0;
+  font-size: 0.8125rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
 </style>