diff --git a/ui-react/apps/console/src/components/common/EmptyState.tsx b/ui-react/apps/console/src/components/common/EmptyState.tsx
new file mode 100644
index 00000000000..62dec03712c
--- /dev/null
+++ b/ui-react/apps/console/src/components/common/EmptyState.tsx
@@ -0,0 +1,165 @@
+import { ReactNode, useId } from "react";
+
+export type EmptyStateAccent = "primary" | "yellow";
+
+export interface EmptyStateFeature {
+  /** Sized but uncolored heroicon, e.g. `<LinkIcon className="w-5 h-5" />`. */
+  icon: ReactNode;
+  title: string;
+  description: string;
+}
+
+export interface EmptyStateProps {
+  /** Sized but uncolored heroicon, e.g. `<GlobeAltIcon className="w-8 h-8" />`. */
+  icon: ReactNode;
+  overline: string;
+  title: string;
+  description: string;
+  accent?: EmptyStateAccent;
+  features?: EmptyStateFeature[];
+  /** Small muted text rendered under the call-to-action. */
+  footnote?: ReactNode;
+  /** Call-to-action slot — button(s), links, RestrictedAction, etc. */
+  children?: ReactNode;
+}
+
+interface AccentStyles {
+  badge: string;
+  icon: string;
+  overline: string;
+  orbPrimary: string;
+  orbSecondary: string;
+}
+
+/**
+ * Accent styles. Full literal class strings (never interpolated fragments) so
+ * the Tailwind JIT keeps them. The hero icon inherits the badge's text color
+ * via `currentColor`; feature-card icons stay primary-accented in all variants.
+ * Typed as `Record<EmptyStateAccent, …>` so adding an accent without a matching
+ * entry is a compile error rather than a runtime `undefined`.
+ */
+const ACCENT = {
+  primary: {
+    badge: "bg-primary/10 border-primary/20 shadow-primary/5",
+    icon: "text-primary",
+    overline: "text-primary/80",
+    orbPrimary: "bg-primary/5",
+    orbSecondary: "bg-accent-blue/5",
+  },
+  yellow: {
+    badge: "bg-accent-yellow/10 border-accent-yellow/20 shadow-accent-yellow/5",
+    icon: "text-accent-yellow",
+    overline: "text-accent-yellow/80",
+    orbPrimary: "bg-accent-yellow/5",
+    orbSecondary: "bg-primary/5",
+  },
+} satisfies Record<EmptyStateAccent, AccentStyles>;
+
+/**
+ * Full-page onboarding / empty / gated-feature splash: a centered card over a
+ * full-bleed decorative background. Owns the full-bleed layout so call sites
+ * only declare content. Render it as the sole content of a page (inside the
+ * AppLayout/AdminLayout `<main>`).
+ */
+export default function EmptyState({
+  icon,
+  overline,
+  title,
+  description,
+  accent = "primary",
+  features,
+  footnote,
+  children,
+}: EmptyStateProps) {
+  const headingId = useId();
+  const styles = ACCENT[accent];
+  const hasFeatures = !!features?.length;
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className="relative min-h-full flex items-center justify-center"
+    >
+      {/* Decorative background — bleeds past the main padding (p-8 pb-4) */}
+      <div
+        aria-hidden="true"
+        className="absolute inset-0 overflow-hidden pointer-events-none -mx-8 -mt-8 -mb-4"
+      >
+        <div
+          className={`absolute -top-32 left-1/3 w-[500px] h-[500px] rounded-full blur-[120px] animate-pulse-subtle ${styles.orbPrimary}`}
+        />
+        <div
+          className={`absolute bottom-0 right-1/4 w-[400px] h-[400px] rounded-full blur-[100px] animate-pulse-subtle ${styles.orbSecondary}`}
+          style={{ animationDelay: "1s" }}
+        />
+        <div className="absolute inset-0 grid-bg opacity-30" />
+      </div>
+
+      <div className="w-full max-w-3xl px-4 py-6 animate-fade-in">
+        {/* Header */}
+        <div className="text-center mb-10">
+          <div
+            aria-hidden="true"
+            className={`w-16 h-16 rounded-2xl border flex items-center justify-center mx-auto mb-6 shadow-lg ${styles.badge} ${styles.icon}`}
+          >
+            {icon}
+          </div>
+          <span
+            className={`inline-block text-2xs font-mono font-semibold uppercase tracking-wide mb-2 ${styles.overline}`}
+          >
+            {overline}
+          </span>
+          <h1
+            id={headingId}
+            className="text-3xl font-bold text-text-primary mb-3"
+          >
+            {title}
+          </h1>
+          <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
+            {description}
+          </p>
+        </div>
+
+        {/* Feature highlights */}
+        {features?.length ? (
+          <ul
+            role="list"
+            className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10"
+          >
+            {features.map((feature, idx) => (
+              <li
+                key={feature.title}
+                className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
+                style={{ animationDelay: `${150 + idx * 100}ms` }}
+              >
+                <div
+                  aria-hidden="true"
+                  className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary"
+                >
+                  {feature.icon}
+                </div>
+                <h2 className="text-sm font-semibold text-text-primary mb-1">
+                  {feature.title}
+                </h2>
+                <p className="text-xs text-text-muted leading-relaxed text-balance">
+                  {feature.description}
+                </p>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        {/* Call to action */}
+        <div
+          className="text-center animate-slide-up"
+          style={{ animationDelay: hasFeatures ? "450ms" : "200ms" }}
+        >
+          {children}
+          {footnote != null ? (
+            <p className="mt-4 text-2xs text-text-muted">{footnote}</p>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/ui-react/apps/console/src/components/common/FeatureGate.tsx b/ui-react/apps/console/src/components/common/FeatureGate.tsx
index c22e3f7e0a4..d6fd6e37c80 100644
--- a/ui-react/apps/console/src/components/common/FeatureGate.tsx
+++ b/ui-react/apps/console/src/components/common/FeatureGate.tsx
@@ -4,18 +4,15 @@ import {
   ArrowTopRightOnSquareIcon,
 } from "@heroicons/react/24/outline";
 import { getConfig } from "@/env";
-
-interface Highlight {
-  icon: ReactNode;
-  title: string;
-  description: string;
-}
+import EmptyState, {
+  type EmptyStateFeature,
+} from "@/components/common/EmptyState";
 
 interface FeatureGateProps {
   children: ReactNode;
   feature: string;
   description: string;
-  highlights?: Highlight[];
+  highlights?: EmptyStateFeature[];
 }
 
 export default function FeatureGate({
@@ -29,79 +26,24 @@ export default function FeatureGate({
   }
 
   return (
-    <div className="relative -mx-8 -mt-8 min-h-[calc(100vh-3.5rem)] flex flex-col">
-      {/* Background */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute -top-32 left-1/3 w-[500px] h-[500px] bg-accent-yellow/5 rounded-full blur-[120px] animate-pulse-subtle" />
-        <div
-          className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-primary/5 rounded-full blur-[100px] animate-pulse-subtle"
-          style={{ animationDelay: "1s" }}
-        />
-        <div className="absolute inset-0 grid-bg opacity-30" />
-      </div>
-
-      <div className="flex-1 flex items-center justify-center px-8 py-12">
-        <div className="w-full max-w-2xl animate-fade-in">
-          {/* Header */}
-          <div className="text-center mb-10">
-            <div className="w-16 h-16 rounded-2xl bg-accent-yellow/10 border border-accent-yellow/20 flex items-center justify-center mx-auto mb-6 shadow-lg shadow-accent-yellow/5">
-              <LockClosedIcon className="w-8 h-8 text-accent-yellow" />
-            </div>
-
-            <span className="inline-block text-2xs font-mono font-semibold uppercase tracking-wide text-accent-yellow/80 mb-2">
-              Premium Feature
-            </span>
-            <h1 className="text-3xl font-bold text-text-primary mb-3">
-              {feature}
-            </h1>
-            <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
-              {description}
-            </p>
-          </div>
-
-          {/* Highlights */}
-          {highlights && highlights.length > 0 && (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-              {highlights.map((h, idx) => (
-                <div
-                  key={h.title}
-                  className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
-                  style={{ animationDelay: `${150 + idx * 100}ms` }}
-                >
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary">
-                    {h.icon}
-                  </div>
-                  <h3 className="text-sm font-semibold text-text-primary mb-1">
-                    {h.title}
-                  </h3>
-                  <p className="text-xs text-text-muted leading-relaxed">
-                    {h.description}
-                  </p>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* CTA */}
-          <div
-            className="text-center animate-slide-up"
-            style={{ animationDelay: `${highlights ? 450 : 200}ms` }}
-          >
-            <a
-              href="https://www.shellhub.io/pricing"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20"
-            >
-              Pricing
-              <ArrowTopRightOnSquareIcon className="w-4 h-4" strokeWidth={2} />
-            </a>
-            <p className="mt-4 text-2xs text-text-muted">
-              Available on ShellHub Cloud and Enterprise editions.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
+    <EmptyState
+      accent="yellow"
+      icon={<LockClosedIcon className="w-8 h-8" />}
+      overline="Premium Feature"
+      title={feature}
+      description={description}
+      features={highlights}
+      footnote="Available on ShellHub Cloud and Enterprise editions."
+    >
+      <a
+        href="https://www.shellhub.io/pricing"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      >
+        Pricing
+        <ArrowTopRightOnSquareIcon className="w-4 h-4" strokeWidth={2} />
+      </a>
+    </EmptyState>
   );
 }
diff --git a/ui-react/apps/console/src/components/common/PageLoader.tsx b/ui-react/apps/console/src/components/common/PageLoader.tsx
index c741dfd7d53..aa6d9caac92 100644
--- a/ui-react/apps/console/src/components/common/PageLoader.tsx
+++ b/ui-react/apps/console/src/components/common/PageLoader.tsx
@@ -34,7 +34,7 @@ export default function PageLoader({
   padding = "md",
 }: PageLoaderProps) {
   const resolvedSize = size ?? (showLabel ? "md" : "lg");
-  const wrapper = ["flex items-center justify-center", PADDING[padding]]
+  const wrapper = ["flex h-full items-center justify-center", PADDING[padding]]
     .filter(Boolean)
     .join(" ");
 
diff --git a/ui-react/apps/console/src/components/common/WelcomeScreen.tsx b/ui-react/apps/console/src/components/common/WelcomeScreen.tsx
index 09fa364ea47..0b7635b13b8 100644
--- a/ui-react/apps/console/src/components/common/WelcomeScreen.tsx
+++ b/ui-react/apps/console/src/components/common/WelcomeScreen.tsx
@@ -123,9 +123,9 @@ const steps = [
 
 export default function WelcomeScreen({ namespaceName }: WelcomeScreenProps) {
   return (
-    <div className="-m-8 flex-1 relative overflow-hidden">
+    <div className="min-h-full relative overflow-hidden px-4 pb-12">
       {/* Hero */}
-      <div className="relative px-8 pt-16 pb-12 overflow-hidden">
+      <div className="relative pt-16 pb-12 overflow-hidden">
         <ConnectionGrid />
         <div className="absolute inset-0 bg-gradient-radial from-primary/10 via-transparent to-transparent" />
         <div className="absolute top-10 left-1/4 w-96 h-96 bg-primary/8 rounded-full blur-3xl" />
@@ -174,7 +174,7 @@ export default function WelcomeScreen({ namespaceName }: WelcomeScreenProps) {
       </div>
 
       {/* Steps */}
-      <div className="px-8 pb-12">
+      <>
         <ol className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
           {steps.map((step, idx) => (
             <li
@@ -249,7 +249,7 @@ export default function WelcomeScreen({ namespaceName }: WelcomeScreenProps) {
             Community
           </a>
         </div>
-      </div>
+      </>
     </div>
   );
 }
diff --git a/ui-react/apps/console/src/components/common/__tests__/EmptyState.test.tsx b/ui-react/apps/console/src/components/common/__tests__/EmptyState.test.tsx
new file mode 100644
index 00000000000..89f19da91a4
--- /dev/null
+++ b/ui-react/apps/console/src/components/common/__tests__/EmptyState.test.tsx
@@ -0,0 +1,113 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import EmptyState from "@/components/common/EmptyState";
+
+const features = [
+  {
+    icon: <svg data-testid="f0" />,
+    title: "Direct Access",
+    description: "Routes directly.",
+  },
+  {
+    icon: <svg data-testid="f1" />,
+    title: "Device-side TLS",
+    description: "Handles TLS locally.",
+  },
+];
+
+describe("EmptyState", () => {
+  it("renders the overline, title, description, children and footnote", () => {
+    render(
+      <EmptyState
+        icon={<svg data-testid="hero" />}
+        overline="HTTP Tunneling"
+        title="Web Endpoints"
+        description="Tunnel HTTP traffic to your devices."
+        footnote="No VPN required."
+      >
+        <button type="button">Create your first endpoint</button>
+      </EmptyState>,
+    );
+
+    expect(screen.getByText("HTTP Tunneling")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Web Endpoints" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Tunnel HTTP traffic to your devices."),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Create your first endpoint" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("No VPN required.")).toBeInTheDocument();
+  });
+
+  it("names the region via its heading (aria-labelledby -> h1)", () => {
+    render(
+      <EmptyState
+        icon={<svg />}
+        overline="HTTP Tunneling"
+        title="Web Endpoints"
+        description="desc"
+      />,
+    );
+
+    // The <section> is an accessible region named by the <h1>.
+    expect(
+      screen.getByRole("region", { name: "Web Endpoints" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the features as a list when provided", () => {
+    render(
+      <EmptyState
+        icon={<svg />}
+        overline="o"
+        title="t"
+        description="d"
+        features={features}
+      />,
+    );
+
+    const list = screen.getByRole("list");
+    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Direct Access" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Handles TLS locally.")).toBeInTheDocument();
+  });
+
+  it("omits the features list when none are provided", () => {
+    render(
+      <EmptyState icon={<svg />} overline="o" title="t" description="d" />,
+    );
+    expect(screen.queryByRole("list")).not.toBeInTheDocument();
+  });
+
+  it("applies the yellow accent to the overline", () => {
+    render(
+      <EmptyState
+        icon={<svg />}
+        overline="Vault Locked"
+        title="Locked"
+        description="d"
+        accent="yellow"
+      />,
+    );
+    expect(screen.getByText("Vault Locked")).toHaveClass(
+      "text-accent-yellow/80",
+    );
+  });
+
+  it("defaults to the primary accent", () => {
+    render(
+      <EmptyState
+        icon={<svg />}
+        overline="Networking"
+        title="t"
+        description="d"
+      />,
+    );
+    expect(screen.getByText("Networking")).toHaveClass("text-primary/80");
+  });
+});
diff --git a/ui-react/apps/console/src/components/layout/AdminLayout.tsx b/ui-react/apps/console/src/components/layout/AdminLayout.tsx
index 695a0537a3b..1985432d60b 100644
--- a/ui-react/apps/console/src/components/layout/AdminLayout.tsx
+++ b/ui-react/apps/console/src/components/layout/AdminLayout.tsx
@@ -6,11 +6,12 @@ import { useSidebarLayout } from "@/hooks/useSidebarLayout";
 
 export default function AdminLayout() {
   const { pathname } = useLocation();
-  const { isOpen, pinned, isDesktop, drawerOpen, handlers } = useSidebarLayout();
+  const { isOpen, pinned, isDesktop, drawerOpen, handlers } =
+    useSidebarLayout();
 
   return (
     <div className="flex flex-col h-screen bg-background">
-      <div className="flex flex-1 min-h-0 overflow-hidden">
+      <div className="flex flex-1 min-h-0">
         {isDesktop ? (
           <div
             onMouseEnter={handlers.onMouseEnter}
@@ -18,7 +19,11 @@ export default function AdminLayout() {
             onFocus={handlers.onFocus}
             onBlur={handlers.onBlur}
           >
-            <AdminSidebar expanded={isOpen} pinned={pinned} onToggle={handlers.onToggle} />
+            <AdminSidebar
+              expanded={isOpen}
+              pinned={pinned}
+              onToggle={handlers.onToggle}
+            />
           </div>
         ) : (
           <SidebarMobileDrawer
@@ -35,17 +40,19 @@ export default function AdminLayout() {
             />
           </SidebarMobileDrawer>
         )}
-        <div className="flex-1 flex flex-col min-w-0">
-          <AdminAppBar onMenuToggle={isDesktop ? undefined : handlers.toggleDrawer} />
-          <main className="flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-8 relative">
+        <div className="flex flex-col size-full">
+          <AdminAppBar
+            onMenuToggle={isDesktop ? undefined : handlers.toggleDrawer}
+          />
+          <div className="relative size-full">
             <div className="grid-bg scanline absolute inset-0 -z-10" />
-            <div
+            <main
               key={pathname}
-              className="page-enter flex-1 flex flex-col"
+              className="page-enter absolute inset-0 p-8 pb-4 overflow-y-auto"
             >
               <Outlet />
-            </div>
-          </main>
+            </main>
+          </div>
         </div>
       </div>
     </div>
diff --git a/ui-react/apps/console/src/components/layout/AppLayout.tsx b/ui-react/apps/console/src/components/layout/AppLayout.tsx
index c69317fd5ac..0bcb3a5284e 100644
--- a/ui-react/apps/console/src/components/layout/AppLayout.tsx
+++ b/ui-react/apps/console/src/components/layout/AppLayout.tsx
@@ -62,21 +62,21 @@ export default function AppLayout() {
               />
             </SidebarMobileDrawer>
           )}
-          <div className="flex-1 flex flex-col min-w-0">
+          <div className="flex flex-col size-full">
             <AppBar
               onMenuToggle={
                 showSidebar && !isDesktop ? handlers.toggleDrawer : undefined
               }
             />
-            <main className="flex-1 flex flex-col p-8 relative min-h-0 overflow-y-auto">
+            <div className="relative size-full">
               <div className="grid-bg scanline absolute inset-0 -z-10" />
-              <div
+              <main
                 key={pathname}
-                className="page-enter flex-1 flex flex-col min-h-0"
+                className="page-enter absolute inset-0 p-8 pb-4 overflow-y-auto"
               >
                 <Outlet />
-              </div>
-            </main>
+              </main>
+            </div>
           </div>
         </div>
         <TerminalManager sidebarOffset={sidebarOffset} />
diff --git a/ui-react/apps/console/src/pages/BannerEdit.tsx b/ui-react/apps/console/src/pages/BannerEdit.tsx
index f519df86a7c..607de2b0c1c 100644
--- a/ui-react/apps/console/src/pages/BannerEdit.tsx
+++ b/ui-react/apps/console/src/pages/BannerEdit.tsx
@@ -141,7 +141,7 @@ export default function BannerEdit() {
   }
 
   return (
-    <div className="flex flex-col flex-1 min-h-0">
+    <div className="min-h-full flex flex-col">
       {/* Header */}
       <div className="relative -mx-8 -mt-8 px-8 py-6 mb-8 border-b border-border bg-surface shrink-0">
         <Breadcrumb
diff --git a/ui-react/apps/console/src/pages/WebEndpoints.tsx b/ui-react/apps/console/src/pages/WebEndpoints.tsx
index 5a38a8e7179..0ba14a99ecc 100644
--- a/ui-react/apps/console/src/pages/WebEndpoints.tsx
+++ b/ui-react/apps/console/src/pages/WebEndpoints.tsx
@@ -10,6 +10,7 @@ import {
 import type { Webendpoint } from "@/client";
 import { useDevices, type NormalizedDevice } from "@/hooks/useDevices";
 import PageHeader from "@/components/common/PageHeader";
+import EmptyState from "@/components/common/EmptyState";
 import SearchField from "@/components/common/fields/SearchField";
 import Drawer from "@/components/common/Drawer";
 import ConfirmDialog from "@/components/common/ConfirmDialog";
@@ -866,109 +867,53 @@ function WebEndpointsContent() {
   const isNoResults = !isLoading && isSearching && totalCount === 0;
 
   return (
-    <div>
+    <>
       {/* Content */}
       {isLoading && webEndpoints.length === 0 && !isSearching ? (
         <PageLoader label="Loading web endpoints" />
       ) : isTrulyEmpty ? (
-        /* Empty state */
-        <div className="relative -mx-8 -mt-8 min-h-[calc(100vh-3.5rem)] flex flex-col">
-          {/* Background */}
-          <div className="absolute inset-0 overflow-hidden pointer-events-none">
-            <div className="absolute -top-32 left-1/3 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] animate-pulse-subtle" />
-            <div
-              className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-accent-cyan/5 rounded-full blur-[100px] animate-pulse-subtle"
-              style={{ animationDelay: "1s" }}
-            />
-            <div className="absolute inset-0 grid-bg opacity-30" />
-          </div>
-
-          <div className="flex-1 flex items-center justify-center px-8 py-12">
-            <div className="w-full max-w-2xl animate-fade-in">
-              {/* Header */}
-              <div className="text-center mb-10">
-                <div className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-6 shadow-lg shadow-primary/5">
-                  <GlobeAltIcon className="w-8 h-8 text-primary" />
-                </div>
-
-                <span className="inline-block text-2xs font-mono font-semibold uppercase tracking-wide text-primary/80 mb-2">
-                  HTTP Tunneling
-                </span>
-                <h1 className="text-3xl font-bold text-text-primary mb-3">
-                  Web Endpoints
-                </h1>
-                <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
-                  Create unique URLs that tunnel HTTP traffic to services
-                  running on your devices.
-                </p>
-              </div>
-
-              {/* Highlights */}
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-                {[
-                  {
-                    icon: <LinkIcon className="w-5 h-5" />,
-                    title: "Direct Access",
-                    description:
-                      "Each endpoint gets a unique URL that routes directly to a host and port on your device.",
-                  },
-                  {
-                    icon: <LockClosedIcon className="w-5 h-5" />,
-                    title: "Device-side TLS",
-                    description:
-                      "Connect to HTTPS services on your devices. The agent handles the TLS handshake locally.",
-                  },
-                  {
-                    icon: <ClockIcon className="w-5 h-5" />,
-                    title: "Auto-Expiring",
-                    description:
-                      "Endpoints expire automatically after a configurable TTL, or run indefinitely.",
-                  },
-                ].map((h, idx) => (
-                  <div
-                    key={h.title}
-                    className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
-                    style={{ animationDelay: `${150 + idx * 100}ms` }}
-                  >
-                    <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary">
-                      {h.icon}
-                    </div>
-                    <h3 className="text-sm font-semibold text-text-primary mb-1">
-                      {h.title}
-                    </h3>
-                    <p className="text-xs text-text-muted leading-relaxed">
-                      {h.description}
-                    </p>
-                  </div>
-                ))}
-              </div>
-
-              {/* CTA */}
-              <div
-                className="text-center animate-slide-up"
-                style={{ animationDelay: "450ms" }}
-              >
-                <RestrictedAction action="webEndpoint:create">
-                  <button
-                    type="button"
-                    onClick={openNew}
-                    className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-                  >
-                    <PlusIcon
-                      className="w-4 h-4"
-                      strokeWidth={2}
-                      aria-hidden="true"
-                    />
-                    Create your first endpoint
-                  </button>
-                </RestrictedAction>
-                <p className="mt-4 text-2xs text-text-muted">
-                  No VPN, no SSH port forwarding — just a URL.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
+        <EmptyState
+          icon={<GlobeAltIcon className="w-8 h-8" />}
+          overline="HTTP Tunneling"
+          title="Web Endpoints"
+          description="Create unique URLs that tunnel HTTP traffic to services running on your devices."
+          features={[
+            {
+              icon: <LinkIcon className="w-5 h-5" />,
+              title: "Direct Access",
+              description:
+                "Each endpoint gets a unique URL that routes directly to a host and port on your device.",
+            },
+            {
+              icon: <LockClosedIcon className="w-5 h-5" />,
+              title: "Device-side TLS",
+              description:
+                "Connect to HTTPS services on your devices. The agent handles the TLS handshake locally.",
+            },
+            {
+              icon: <ClockIcon className="w-5 h-5" />,
+              title: "Auto-Expiring",
+              description:
+                "Endpoints expire automatically after a configurable TTL, or run indefinitely.",
+            },
+          ]}
+          footnote="No VPN, no SSH port forwarding — just a URL."
+        >
+          <RestrictedAction action="webEndpoint:create">
+            <button
+              type="button"
+              onClick={openNew}
+              className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            >
+              <PlusIcon
+                className="w-4 h-4"
+                strokeWidth={2}
+                aria-hidden="true"
+              />
+              Create your first endpoint
+            </button>
+          </RestrictedAction>
+        </EmptyState>
       ) : (
         <>
           <PageHeader
@@ -1108,7 +1053,7 @@ function WebEndpointsContent() {
           </p>
         )}
       </ConfirmDialog>
-    </div>
+    </>
   );
 }
 
diff --git a/ui-react/apps/console/src/pages/admin/Dashboard.tsx b/ui-react/apps/console/src/pages/admin/Dashboard.tsx
index ebeabe167e0..8ac33b460b4 100644
--- a/ui-react/apps/console/src/pages/admin/Dashboard.tsx
+++ b/ui-react/apps/console/src/pages/admin/Dashboard.tsx
@@ -41,7 +41,7 @@ export default function AdminDashboard() {
 
   if (statsError) {
     return (
-      <div className="flex-1 flex items-center justify-center">
+      <div className="h-full flex items-center justify-center">
         <div className="text-center" role="alert">
           <ExclamationCircleIcon className="w-10 h-10 text-accent-red mx-auto mb-3" />
           <p className="text-sm font-medium text-text-primary">
diff --git a/ui-react/apps/console/src/pages/admin/License.tsx b/ui-react/apps/console/src/pages/admin/License.tsx
index 475e4158c6b..777c50864e3 100644
--- a/ui-react/apps/console/src/pages/admin/License.tsx
+++ b/ui-react/apps/console/src/pages/admin/License.tsx
@@ -377,7 +377,7 @@ export default function AdminLicense() {
 
   if (isError) {
     return (
-      <div className="flex-1 flex items-center justify-center">
+      <div className="h-full flex items-center justify-center">
         <div className="text-center" role="alert">
           <ExclamationCircleIcon className="w-10 h-10 text-accent-red mx-auto mb-3" />
           <p className="text-sm font-medium text-text-primary">Failed to load license information</p>
diff --git a/ui-react/apps/console/src/pages/admin/SessionDetails.tsx b/ui-react/apps/console/src/pages/admin/SessionDetails.tsx
index cb336faa376..3848cf9fda2 100644
--- a/ui-react/apps/console/src/pages/admin/SessionDetails.tsx
+++ b/ui-react/apps/console/src/pages/admin/SessionDetails.tsx
@@ -61,7 +61,7 @@ export default function AdminSessionDetails() {
 
   if (error || !session) {
     return (
-      <div className="flex-1 flex items-center justify-center">
+      <div className="h-full flex items-center justify-center">
         <div className="text-center" role="alert">
           <ExclamationCircleIcon className="w-10 h-10 text-accent-red mx-auto mb-3" />
           <p className="text-sm font-medium text-text-primary">
diff --git a/ui-react/apps/console/src/pages/admin/Unauthorized.tsx b/ui-react/apps/console/src/pages/admin/Unauthorized.tsx
index 8a5900511bf..ee5ac56a32f 100644
--- a/ui-react/apps/console/src/pages/admin/Unauthorized.tsx
+++ b/ui-react/apps/console/src/pages/admin/Unauthorized.tsx
@@ -8,8 +8,11 @@ import {
   CpuChipIcon,
 } from "@heroicons/react/24/outline";
 import { useAuthStore } from "@/stores/authStore";
+import EmptyState, {
+  type EmptyStateFeature,
+} from "@/components/common/EmptyState";
 
-const highlights = [
+const highlights: EmptyStateFeature[] = [
   {
     icon: <HomeIcon className="w-5 h-5" />,
     title: "Main Application",
@@ -40,91 +43,36 @@ export default function AdminUnauthorized() {
   };
 
   return (
-    <section
-      aria-labelledby="unauthorized-heading"
-      className="relative -mx-8 -mt-8 min-h-[calc(100vh-3.5rem)] flex flex-col"
+    <EmptyState
+      accent="yellow"
+      icon={<ShieldExclamationIcon className="w-8 h-8" />}
+      overline="Access Restricted"
+      title="Admin Access Required"
+      description="You don't have administrator privileges to access the Admin Console. This area is restricted to system administrators only."
+      features={highlights}
+      footnote="If you believe you should have admin access, contact your system administrator."
     >
-      {/* Background */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
-        <div className="absolute -top-32 left-1/3 w-[500px] h-[500px] bg-accent-yellow/5 rounded-full blur-[120px] animate-pulse-subtle" />
-        <div
-          className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-primary/5 rounded-full blur-[100px] animate-pulse-subtle"
-          style={{ animationDelay: "1s" }}
-        />
-        <div className="absolute inset-0 grid-bg opacity-30" />
+      <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
+        <button
+          type="button"
+          onClick={() => void navigate("/dashboard")}
+          className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        >
+          <ArrowLeftIcon className="w-4 h-4" aria-hidden="true" />
+          Go to ShellHub
+        </button>
+        <button
+          type="button"
+          onClick={handleLogout}
+          className="inline-flex items-center gap-2 px-6 py-3 border border-border rounded-lg text-sm font-medium text-text-secondary hover:bg-hover-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        >
+          <ArrowRightStartOnRectangleIcon
+            className="w-4 h-4"
+            aria-hidden="true"
+          />
+          Logout
+        </button>
       </div>
-
-      <div className="flex-1 flex items-center justify-center px-8 py-12">
-        <div className="w-full max-w-2xl animate-fade-in">
-          {/* Header */}
-          <header className="text-center mb-10">
-            <div className="w-16 h-16 rounded-2xl bg-accent-yellow/10 border border-accent-yellow/20 flex items-center justify-center mx-auto mb-6 shadow-lg shadow-accent-yellow/5">
-              <ShieldExclamationIcon className="w-8 h-8 text-accent-yellow" aria-hidden="true" />
-            </div>
-
-            <span className="inline-block text-2xs font-mono font-semibold uppercase tracking-wide text-accent-yellow/80 mb-2">
-              Access Restricted
-            </span>
-            <h1
-              id="unauthorized-heading"
-              className="text-3xl font-bold text-text-primary mb-3"
-            >
-              Admin Access Required
-            </h1>
-            <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
-              You don&apos;t have administrator privileges to access the Admin
-              Console. This area is restricted to system administrators only.
-            </p>
-          </header>
-
-          {/* Highlights */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-            {highlights.map((h, idx) => (
-              <div
-                key={h.title}
-                className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
-                style={{ animationDelay: `${150 + idx * 100}ms` }}
-              >
-                <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary">
-                  {h.icon}
-                </div>
-                <h3 className="text-sm font-semibold text-text-primary mb-1">
-                  {h.title}
-                </h3>
-                <p className="text-xs text-text-muted leading-relaxed">
-                  {h.description}
-                </p>
-              </div>
-            ))}
-          </div>
-
-          {/* Actions */}
-          <footer
-            className="flex flex-col sm:flex-row items-center justify-center gap-3 animate-slide-up"
-            style={{ animationDelay: "450ms" }}
-          >
-            <button
-              type="button"
-              onClick={() => void navigate("/dashboard")}
-              className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/20"
-            >
-              <ArrowLeftIcon className="w-4 h-4" aria-hidden="true" />
-              Go to ShellHub
-            </button>
-            <button
-              type="button"
-              onClick={handleLogout}
-              className="inline-flex items-center gap-2 px-6 py-3 border border-border rounded-lg text-sm font-medium text-text-secondary hover:bg-hover-medium transition-colors"
-            >
-              <ArrowRightStartOnRectangleIcon className="w-4 h-4" aria-hidden="true" />
-              Logout
-            </button>
-          </footer>
-          <p className="mt-4 text-center text-2xs text-text-muted">
-            If you believe you should have admin access, contact your system administrator.
-          </p>
-        </div>
-      </div>
-    </section>
+    </EmptyState>
   );
 }
diff --git a/ui-react/apps/console/src/pages/firewall-rules/index.tsx b/ui-react/apps/console/src/pages/firewall-rules/index.tsx
index 88d20d50b72..d6ab06fbe2b 100644
--- a/ui-react/apps/console/src/pages/firewall-rules/index.tsx
+++ b/ui-react/apps/console/src/pages/firewall-rules/index.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useFirewallRules } from "@/hooks/useFirewallRules";
 import { useDeleteFirewallRule } from "@/hooks/useFirewallRuleMutations";
 import PageHeader from "@/components/common/PageHeader";
+import EmptyState from "@/components/common/EmptyState";
 import ConfirmDialog from "@/components/common/ConfirmDialog";
 import DataTable, { type Column } from "@/components/common/DataTable";
 import SearchField from "@/components/common/fields/SearchField";
@@ -193,109 +194,56 @@ export default function FirewallRules() {
   /* Full-page onboarding empty state (no rules at all) */
   if (!isLoading && rules.length === 0) {
     return (
-      <div>
-        <div className="relative -mx-8 -mt-8 min-h-[calc(100vh-3.5rem)] flex flex-col">
-          <div className="absolute inset-0 overflow-hidden pointer-events-none">
-            <div className="absolute -top-32 left-1/3 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] animate-pulse-subtle" />
-            <div
-              className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-accent-blue/5 rounded-full blur-[100px] animate-pulse-subtle"
-              style={{ animationDelay: "1s" }}
-            />
-            <div className="absolute inset-0 grid-bg opacity-30" />
-          </div>
-
-          <div className="flex-1 flex items-center justify-center px-8 py-12">
-            <div className="w-full max-w-2xl animate-fade-in">
-              <div className="text-center mb-10">
-                <div className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-6 shadow-lg shadow-primary/5">
-                  <ExclamationTriangleIcon className="w-8 h-8 text-primary" />
-                </div>
-
-                <span className="inline-block text-2xs font-mono font-semibold uppercase tracking-wide text-primary/80 mb-2">
-                  Network Security
-                </span>
-                <h1 className="text-3xl font-bold text-text-primary mb-3">
-                  Firewall Rules
-                </h1>
-                <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
-                  Control who can access your devices and from where. Define
-                  rules based on source IP, username, and device filter to
-                  enforce your security policies.
-                </p>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-                {[
-                  {
-                    icon: <ExclamationTriangleIcon className="w-5 h-5" />,
-                    title: "Allow & Deny",
-                    description:
-                      "Create rules to allow or block SSH connections based on your criteria.",
-                  },
-                  {
-                    icon: <UsersIcon className="w-5 h-5" />,
-                    title: "User Filtering",
-                    description:
-                      "Restrict access per username, hostname, or source IP address.",
-                  },
-                  {
-                    icon: <Bars3Icon className="w-5 h-5" />,
-                    title: "Priority Order",
-                    description:
-                      "Organize rules by priority to control evaluation order.",
-                  },
-                ].map((h, idx) => (
-                  <div
-                    key={h.title}
-                    className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
-                    style={{ animationDelay: `${150 + idx * 100}ms` }}
-                  >
-                    <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary">
-                      {h.icon}
-                    </div>
-                    <h3 className="text-sm font-semibold text-text-primary mb-1">
-                      {h.title}
-                    </h3>
-                    <p className="text-xs text-text-muted leading-relaxed">
-                      {h.description}
-                    </p>
-                  </div>
-                ))}
-              </div>
-
-              <div
-                className="text-center animate-slide-up"
-                style={{ animationDelay: "450ms" }}
-              >
-                <RestrictedAction action="firewall:create">
-                  <button
-                    type="button"
-                    onClick={openNew}
-                    className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-                  >
-                    <PlusIcon
-                      className="w-4 h-4"
-                      strokeWidth={2}
-                      aria-hidden="true"
-                    />
-                    Add your first rule
-                  </button>
-                </RestrictedAction>
-                <p className="mt-4 text-2xs text-text-muted">
-                  Rules are evaluated by priority before connections reach
-                  devices.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
+      <>
+        <EmptyState
+          icon={<ExclamationTriangleIcon className="w-8 h-8" />}
+          overline="Network Security"
+          title="Firewall Rules"
+          description="Control who can access your devices and from where. Define rules based on source IP, username, and device filter to enforce your security policies."
+          features={[
+            {
+              icon: <ExclamationTriangleIcon className="w-5 h-5" />,
+              title: "Allow & Deny",
+              description:
+                "Create rules to allow or block SSH connections based on your criteria.",
+            },
+            {
+              icon: <UsersIcon className="w-5 h-5" />,
+              title: "User Filtering",
+              description:
+                "Restrict access per username, hostname, or source IP address.",
+            },
+            {
+              icon: <Bars3Icon className="w-5 h-5" />,
+              title: "Priority Order",
+              description:
+                "Organize rules by priority to control evaluation order.",
+            },
+          ]}
+          footnote="Rules are evaluated by priority before connections reach devices."
+        >
+          <RestrictedAction action="firewall:create">
+            <button
+              type="button"
+              onClick={openNew}
+              className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            >
+              <PlusIcon
+                className="w-4 h-4"
+                strokeWidth={2}
+                aria-hidden="true"
+              />
+              Add your first rule
+            </button>
+          </RestrictedAction>
+        </EmptyState>
 
         <RuleDrawer
           open={drawerOpen}
           editRule={editTarget}
           onClose={closeDrawer}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/ui-react/apps/console/src/pages/public-keys/index.tsx b/ui-react/apps/console/src/pages/public-keys/index.tsx
index efda1a4f2b4..51764ef1a16 100644
--- a/ui-react/apps/console/src/pages/public-keys/index.tsx
+++ b/ui-react/apps/console/src/pages/public-keys/index.tsx
@@ -3,6 +3,7 @@ import { usePublicKeys } from "@/hooks/usePublicKeys";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { useDeletePublicKey } from "@/hooks/usePublicKeyMutations";
 import PageHeader from "@/components/common/PageHeader";
+import EmptyState from "@/components/common/EmptyState";
 import ConfirmDialog from "@/components/common/ConfirmDialog";
 import CopyButton from "@/components/common/CopyButton";
 import DataTable, { type Column } from "@/components/common/DataTable";
@@ -216,99 +217,51 @@ export default function PublicKeys() {
   /* Full-page onboarding empty state (no keys at all) */
   if (!isLoading && publicKeys.length === 0 && !debouncedSearch) {
     return (
-      <div>
-        <div className="relative -mx-8 -mt-8 min-h-[calc(100vh-3.5rem)] flex flex-col">
-          <div className="absolute inset-0 overflow-hidden pointer-events-none">
-            <div className="absolute -top-32 left-1/3 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] animate-pulse-subtle" />
-            <div
-              className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-accent-blue/5 rounded-full blur-[100px] animate-pulse-subtle"
-              style={{ animationDelay: "1s" }}
-            />
-            <div className="absolute inset-0 grid-bg opacity-30" />
-          </div>
-          <div className="flex-1 flex items-center justify-center px-8 py-12">
-            <div className="w-full max-w-2xl animate-fade-in">
-              <div className="text-center mb-10">
-                <div className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-6">
-                  <KeyIcon className="w-8 h-8 text-primary" />
-                </div>
-                <span className="inline-block text-2xs font-mono font-semibold uppercase tracking-wide text-primary/80 mb-2">
-                  SSH Authentication
-                </span>
-                <h1 className="text-3xl font-bold text-text-primary mb-3">
-                  Public Keys
-                </h1>
-                <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
-                  Set up SSH public keys to enable secure, passwordless
-                  authentication to your devices. Manage access by user,
-                  hostname, or device tags.
-                </p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-                {[
-                  {
-                    icon: <ShieldCheckIcon className="w-5 h-5" />,
-                    title: "Passwordless Access",
-                    description:
-                      "Authenticate via SSH keys instead of passwords for stronger security.",
-                  },
-                  {
-                    icon: <UsersIcon className="w-5 h-5" />,
-                    title: "User Control",
-                    description:
-                      "Restrict which usernames can connect with each public key.",
-                  },
-                  {
-                    icon: <TagIcon className="w-5 h-5" />,
-                    title: "Device Filtering",
-                    description:
-                      "Scope keys to specific devices using hostname patterns or tags.",
-                  },
-                ].map((h, idx) => (
-                  <div
-                    key={h.title}
-                    className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
-                    style={{ animationDelay: `${150 + idx * 100}ms` }}
-                  >
-                    <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary">
-                      {h.icon}
-                    </div>
-                    <h3 className="text-sm font-semibold text-text-primary mb-1">
-                      {h.title}
-                    </h3>
-                    <p className="text-xs text-text-muted leading-relaxed">
-                      {h.description}
-                    </p>
-                  </div>
-                ))}
-              </div>
-              <div
-                className="text-center animate-slide-up"
-                style={{ animationDelay: "450ms" }}
-              >
-                <RestrictedAction action="publicKey:create">
-                  <button
-                    onClick={openNew}
-                    className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/20"
-                  >
-                    <PlusIcon className="w-4 h-4" strokeWidth={2} />
-                    Add your first key
-                  </button>
-                </RestrictedAction>
-                <p className="mt-4 text-2xs text-text-muted">
-                  Supports RSA, DSA, ECDSA, and ED25519 key types.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
+      <>
+        <EmptyState
+          icon={<KeyIcon className="w-8 h-8" />}
+          overline="SSH Authentication"
+          title="Public Keys"
+          description="Set up SSH public keys to enable secure, passwordless authentication to your devices. Manage access by user, hostname, or device tags."
+          features={[
+            {
+              icon: <ShieldCheckIcon className="w-5 h-5" />,
+              title: "Passwordless Access",
+              description:
+                "Authenticate via SSH keys instead of passwords for stronger security.",
+            },
+            {
+              icon: <UsersIcon className="w-5 h-5" />,
+              title: "User Control",
+              description:
+                "Restrict which usernames can connect with each public key.",
+            },
+            {
+              icon: <TagIcon className="w-5 h-5" />,
+              title: "Device Filtering",
+              description:
+                "Scope keys to specific devices using hostname patterns or tags.",
+            },
+          ]}
+          footnote="Supports RSA, DSA, ECDSA, and ED25519 key types."
+        >
+          <RestrictedAction action="publicKey:create">
+            <button
+              onClick={openNew}
+              className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            >
+              <PlusIcon className="w-4 h-4" strokeWidth={2} />
+              Add your first key
+            </button>
+          </RestrictedAction>
+        </EmptyState>
 
         <KeyDrawer
           open={drawerOpen}
           editKey={editTarget}
           onClose={closeDrawer}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/ui-react/apps/console/src/pages/secure-vault/index.tsx b/ui-react/apps/console/src/pages/secure-vault/index.tsx
index 24fac189e3b..4b1716ffa9b 100644
--- a/ui-react/apps/console/src/pages/secure-vault/index.tsx
+++ b/ui-react/apps/console/src/pages/secure-vault/index.tsx
@@ -10,6 +10,9 @@ import {
 } from "@heroicons/react/24/outline";
 import { useVaultStore } from "@/stores/vaultStore";
 import PageHeader from "@/components/common/PageHeader";
+import EmptyState, {
+  type EmptyStateFeature,
+} from "@/components/common/EmptyState";
 import CopyButton from "@/components/common/CopyButton";
 import VaultSetupDialog from "@/components/vault/VaultSetupDialog";
 import VaultUnlockDialog from "@/components/vault/VaultUnlockDialog";
@@ -21,6 +24,27 @@ import KeyDeleteDialog from "./KeyDeleteDialog";
 import { formatDate } from "@/utils/date";
 import type { VaultKeyEntry } from "@/types/vault";
 
+const VAULT_FEATURES: EmptyStateFeature[] = [
+  {
+    icon: <LockClosedIcon className="w-5 h-5" />,
+    title: "AES-256 Encryption",
+    description:
+      "Keys are encrypted with AES-256-GCM, derived from your master password.",
+  },
+  {
+    icon: <FingerPrintIcon className="w-5 h-5" />,
+    title: "Zero Knowledge",
+    description:
+      "Your master password is never stored — only you can unlock the vault.",
+  },
+  {
+    icon: <KeyIcon className="w-5 h-5" />,
+    title: "Quick Connect",
+    description:
+      "Select stored keys when connecting to devices — no more copy-pasting.",
+  },
+];
+
 export default function SecureVault() {
   const status = useVaultStore((s) => s.status);
   const keys = useVaultStore((s) => s.keys);
@@ -60,86 +84,21 @@ export default function SecureVault() {
   if (status === "uninitialized") {
     return (
       <>
-        <div className="relative -m-8 flex-1 flex flex-col overflow-hidden">
-          <div className="absolute inset-0 pointer-events-none">
-            <div className="absolute -top-32 left-1/3 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] animate-pulse-subtle" />
-            <div
-              className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-accent-blue/5 rounded-full blur-[100px] animate-pulse-subtle"
-              style={{ animationDelay: "1s" }}
-            />
-            <div className="absolute inset-0 grid-bg opacity-30" />
-          </div>
-          <div className="flex-1 flex items-center justify-center px-8 py-12">
-            <div className="w-full max-w-2xl animate-fade-in">
-              <div className="text-center mb-10">
-                <div className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-6">
-                  <ShieldCheckIcon className="w-8 h-8 text-primary" />
-                </div>
-                <span className="inline-block text-2xs font-mono font-semibold uppercase tracking-wide text-primary/80 mb-2">
-                  Encrypted Key Storage
-                </span>
-                <h1 className="text-3xl font-bold text-text-primary mb-3">
-                  Secure Vault
-                </h1>
-                <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
-                  Store and encrypt your SSH private keys with a master
-                  password. Your keys never leave your browser and are protected
-                  at rest.
-                </p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-                {[
-                  {
-                    icon: <LockClosedIcon className="w-5 h-5" />,
-                    title: "AES-256 Encryption",
-                    description:
-                      "Keys are encrypted with AES-256-GCM, derived from your master password.",
-                  },
-                  {
-                    icon: <FingerPrintIcon className="w-5 h-5" />,
-                    title: "Zero Knowledge",
-                    description:
-                      "Your master password is never stored — only you can unlock the vault.",
-                  },
-                  {
-                    icon: <KeyIcon className="w-5 h-5" />,
-                    title: "Quick Connect",
-                    description:
-                      "Select stored keys when connecting to devices — no more copy-pasting.",
-                  },
-                ].map((h, idx) => (
-                  <div
-                    key={h.title}
-                    className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
-                    style={{ animationDelay: `${150 + idx * 100}ms` }}
-                  >
-                    <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary">
-                      {h.icon}
-                    </div>
-                    <h3 className="text-sm font-semibold text-text-primary mb-1">
-                      {h.title}
-                    </h3>
-                    <p className="text-xs text-text-muted leading-relaxed">
-                      {h.description}
-                    </p>
-                  </div>
-                ))}
-              </div>
-              <div
-                className="text-center animate-slide-up"
-                style={{ animationDelay: "450ms" }}
-              >
-                <button
-                  onClick={() => setSetupOpen(true)}
-                  className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/20"
-                >
-                  <ShieldCheckIcon className="w-4 h-4" strokeWidth={2} />
-                  Set Up Secure Vault
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <EmptyState
+          icon={<ShieldCheckIcon className="w-8 h-8" />}
+          overline="Encrypted Key Storage"
+          title="Secure Vault"
+          description="Store and encrypt your SSH private keys with a master password. Your keys never leave your browser and are protected at rest."
+          features={VAULT_FEATURES}
+        >
+          <button
+            onClick={() => setSetupOpen(true)}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          >
+            <ShieldCheckIcon className="w-4 h-4" strokeWidth={2} />
+            Set Up Secure Vault
+          </button>
+        </EmptyState>
         <VaultSetupDialog
           open={setupOpen}
           onClose={() => setSetupOpen(false)}
@@ -151,85 +110,22 @@ export default function SecureVault() {
   if (status === "locked") {
     return (
       <>
-        <div className="relative -mx-8 -mt-8 min-h-[calc(100vh-3.5rem)] flex flex-col">
-          <div className="absolute inset-0 overflow-hidden pointer-events-none">
-            <div className="absolute -top-32 left-1/3 w-[500px] h-[500px] bg-accent-yellow/5 rounded-full blur-[120px] animate-pulse-subtle" />
-            <div
-              className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-primary/5 rounded-full blur-[100px] animate-pulse-subtle"
-              style={{ animationDelay: "1s" }}
-            />
-            <div className="absolute inset-0 grid-bg opacity-30" />
-          </div>
-          <div className="flex-1 flex items-center justify-center px-8 py-12">
-            <div className="w-full max-w-2xl animate-fade-in">
-              <div className="text-center mb-10">
-                <div className="w-16 h-16 rounded-2xl bg-accent-yellow/10 border border-accent-yellow/20 flex items-center justify-center mx-auto mb-6 shadow-lg shadow-accent-yellow/5">
-                  <LockClosedIcon className="w-8 h-8 text-accent-yellow" />
-                </div>
-                <span className="inline-block text-2xs font-mono font-semibold uppercase tracking-wide text-accent-yellow/80 mb-2">
-                  Vault Locked
-                </span>
-                <h1 className="text-3xl font-bold text-text-primary mb-3">
-                  Your vault is locked
-                </h1>
-                <p className="text-sm text-text-muted max-w-md mx-auto leading-relaxed">
-                  Enter your master password to access your SSH keys and connect
-                  to devices.
-                </p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-                {[
-                  {
-                    icon: <LockClosedIcon className="w-5 h-5" />,
-                    title: "AES-256 Encryption",
-                    description:
-                      "Keys are encrypted with AES-256-GCM, derived from your master password.",
-                  },
-                  {
-                    icon: <FingerPrintIcon className="w-5 h-5" />,
-                    title: "Zero Knowledge",
-                    description:
-                      "Your master password is never stored — only you can unlock the vault.",
-                  },
-                  {
-                    icon: <KeyIcon className="w-5 h-5" />,
-                    title: "Quick Connect",
-                    description:
-                      "Select stored keys when connecting to devices — no more copy-pasting.",
-                  },
-                ].map((h, idx) => (
-                  <div
-                    key={h.title}
-                    className="bg-card/60 border border-border rounded-xl p-5 text-center animate-slide-up"
-                    style={{ animationDelay: `${150 + idx * 100}ms` }}
-                  >
-                    <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3 text-primary">
-                      {h.icon}
-                    </div>
-                    <h3 className="text-sm font-semibold text-text-primary mb-1">
-                      {h.title}
-                    </h3>
-                    <p className="text-xs text-text-muted leading-relaxed">
-                      {h.description}
-                    </p>
-                  </div>
-                ))}
-              </div>
-              <div
-                className="text-center animate-slide-up"
-                style={{ animationDelay: "450ms" }}
-              >
-                <button
-                  onClick={() => setUnlockOpen(true)}
-                  className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20"
-                >
-                  <LockClosedIcon className="w-4 h-4" strokeWidth={2} />
-                  Unlock Vault
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <EmptyState
+          accent="yellow"
+          icon={<LockClosedIcon className="w-8 h-8" />}
+          overline="Vault Locked"
+          title="Your vault is locked"
+          description="Enter your master password to access your SSH keys and connect to devices."
+          features={VAULT_FEATURES}
+        >
+          <button
+            onClick={() => setUnlockOpen(true)}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all duration-200 shadow-lg shadow-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          >
+            <LockClosedIcon className="w-4 h-4" strokeWidth={2} />
+            Unlock Vault
+          </button>
+        </EmptyState>
         <VaultUnlockDialog
           open={unlockOpen}
           onClose={() => setUnlockOpen(false)}