diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
index 007b36777..772276973 100644
--- a/app/Http/Controllers/ProfileController.php
+++ b/app/Http/Controllers/ProfileController.php
@@ -176,7 +176,7 @@ class ProfileController extends BasePageController
                     // Update color scheme
                     if ($request->has('color_scheme')) {
                         $schemeValue = $request->input('color_scheme');
-                        if (in_array($schemeValue, ['blue', 'emerald', 'violet'], true)) {
+                        if (in_array($schemeValue, ['blue', 'indigo', 'cyan', 'teal', 'emerald', 'violet', 'pink', 'rose', 'red', 'orange', 'amber'], true)) {
                             User::where('id', $userid)->update(['color_scheme' => $schemeValue]);
                         }
                     }
diff --git a/app/Http/Requests/UpdateProfileRequest.php b/app/Http/Requests/UpdateProfileRequest.php
index 5baf1194a..d2553e282 100644
--- a/app/Http/Requests/UpdateProfileRequest.php
+++ b/app/Http/Requests/UpdateProfileRequest.php
@@ -20,7 +20,7 @@ class UpdateProfileRequest extends FormRequest
             'email' => ['nullable', 'string', 'email', 'max:255', 'unique:users,email,'.$userId, new ValidEmailDomain],
             'password' => ['nullable', 'string', 'min:8', 'confirmed', 'regex:/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/'],
             'theme_preference' => ['sometimes', 'in:light,dark,system'],
-            'color_scheme' => ['sometimes', 'in:blue,emerald,violet'],
+            'color_scheme' => ['sometimes', 'in:blue,indigo,cyan,teal,emerald,violet,pink,rose,red,orange,amber'],
         ];
     }
 }
diff --git a/app/Http/Requests/UpdateThemeRequest.php b/app/Http/Requests/UpdateThemeRequest.php
index 427530323..96629c46a 100644
--- a/app/Http/Requests/UpdateThemeRequest.php
+++ b/app/Http/Requests/UpdateThemeRequest.php
@@ -15,7 +15,7 @@ class UpdateThemeRequest extends FormRequest
     {
         return [
             'theme_preference' => ['sometimes', 'in:light,dark,system'],
-            'color_scheme' => ['sometimes', 'in:blue,emerald,violet'],
+            'color_scheme' => ['sometimes', 'in:blue,indigo,cyan,teal,emerald,violet,pink,rose,red,orange,amber'],
         ];
     }
 }
diff --git a/resources/css/app.css b/resources/css/app.css
index 3e6b8424d..0ced84d73 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -121,6 +121,294 @@
     --color-primary-950: #2e1065;
 }
 
+[data-color-scheme="rose"] {
+    --surface-body: #fff1f2;
+    --surface-body-dark: #1f0a12;
+    --surface-sidebar: #3b1825;
+    --surface-sidebar-dark: #13050a;
+    --surface-header: #3b1825;
+    --surface-header-dark: #13050a;
+    --surface-card: #ffffff;
+    --surface-card-dark: #32131e;
+    --surface-dropdown: #2b1019;
+    --surface-dropdown-dark: #13050a;
+    --surface-footer: #3b1825;
+    --surface-footer-dark: #13050a;
+    --surface-hover: #fff1f2;
+    --surface-hover-dark: #4c0519;
+    --border-default: #fecdd3;
+    --border-default-dark: #9f1239;
+    --text-muted: #be123c;
+    --text-muted-dark: #fda4af;
+    --surface-panel-alt: #fff1f2;
+    --surface-panel-alt-dark: #3b1825;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #fff1f2;
+    --color-primary-100: #ffe4e6;
+    --color-primary-200: #fecdd3;
+    --color-primary-300: #fda4af;
+    --color-primary-400: #fb7185;
+    --color-primary-500: #f43f5e;
+    --color-primary-600: #e11d48;
+    --color-primary-700: #be123c;
+    --color-primary-800: #9f1239;
+    --color-primary-900: #881337;
+    --color-primary-950: #4c0519;
+}
+
+[data-color-scheme="amber"] {
+    --surface-body: #fffbeb;
+    --surface-body-dark: #1c1304;
+    --surface-sidebar: #3b2a0e;
+    --surface-sidebar-dark: #120b02;
+    --surface-header: #3b2a0e;
+    --surface-header-dark: #120b02;
+    --surface-card: #ffffff;
+    --surface-card-dark: #33240d;
+    --surface-dropdown: #2c1d08;
+    --surface-dropdown-dark: #120b02;
+    --surface-footer: #3b2a0e;
+    --surface-footer-dark: #120b02;
+    --surface-hover: #fffbeb;
+    --surface-hover-dark: #78350f;
+    --border-default: #fde68a;
+    --border-default-dark: #92400e;
+    --text-muted: #b45309;
+    --text-muted-dark: #fcd34d;
+    --surface-panel-alt: #fffbeb;
+    --surface-panel-alt-dark: #3b2a0e;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #fffbeb;
+    --color-primary-100: #fef3c7;
+    --color-primary-200: #fde68a;
+    --color-primary-300: #fcd34d;
+    --color-primary-400: #fbbf24;
+    --color-primary-500: #f59e0b;
+    --color-primary-600: #d97706;
+    --color-primary-700: #b45309;
+    --color-primary-800: #92400e;
+    --color-primary-900: #78350f;
+    --color-primary-950: #451a03;
+}
+
+[data-color-scheme="cyan"] {
+    --surface-body: #ecfeff;
+    --surface-body-dark: #06191d;
+    --surface-sidebar: #12343c;
+    --surface-sidebar-dark: #031014;
+    --surface-header: #12343c;
+    --surface-header-dark: #031014;
+    --surface-card: #ffffff;
+    --surface-card-dark: #10313a;
+    --surface-dropdown: #0b2a32;
+    --surface-dropdown-dark: #031014;
+    --surface-footer: #12343c;
+    --surface-footer-dark: #031014;
+    --surface-hover: #ecfeff;
+    --surface-hover-dark: #164e63;
+    --border-default: #a5f3fc;
+    --border-default-dark: #155e75;
+    --text-muted: #0e7490;
+    --text-muted-dark: #67e8f9;
+    --surface-panel-alt: #ecfeff;
+    --surface-panel-alt-dark: #12343c;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #ecfeff;
+    --color-primary-100: #cffafe;
+    --color-primary-200: #a5f3fc;
+    --color-primary-300: #67e8f9;
+    --color-primary-400: #22d3ee;
+    --color-primary-500: #06b6d4;
+    --color-primary-600: #0891b2;
+    --color-primary-700: #0e7490;
+    --color-primary-800: #155e75;
+    --color-primary-900: #164e63;
+    --color-primary-950: #083344;
+}
+
+[data-color-scheme="indigo"] {
+    --surface-body: #eef2ff;
+    --surface-body-dark: #0b1024;
+    --surface-sidebar: #1e2850;
+    --surface-sidebar-dark: #070b1b;
+    --surface-header: #1e2850;
+    --surface-header-dark: #070b1b;
+    --surface-card: #ffffff;
+    --surface-card-dark: #182143;
+    --surface-dropdown: #141c39;
+    --surface-dropdown-dark: #070b1b;
+    --surface-footer: #1e2850;
+    --surface-footer-dark: #070b1b;
+    --surface-hover: #eef2ff;
+    --surface-hover-dark: #312e81;
+    --border-default: #c7d2fe;
+    --border-default-dark: #3730a3;
+    --text-muted: #4338ca;
+    --text-muted-dark: #a5b4fc;
+    --surface-panel-alt: #eef2ff;
+    --surface-panel-alt-dark: #1e2850;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #eef2ff;
+    --color-primary-100: #e0e7ff;
+    --color-primary-200: #c7d2fe;
+    --color-primary-300: #a5b4fc;
+    --color-primary-400: #818cf8;
+    --color-primary-500: #6366f1;
+    --color-primary-600: #4f46e5;
+    --color-primary-700: #4338ca;
+    --color-primary-800: #3730a3;
+    --color-primary-900: #312e81;
+    --color-primary-950: #1e1b4b;
+}
+
+[data-color-scheme="teal"] {
+    --surface-body: #f0fdfa;
+    --surface-body-dark: #061a18;
+    --surface-sidebar: #123b36;
+    --surface-sidebar-dark: #021412;
+    --surface-header: #123b36;
+    --surface-header-dark: #021412;
+    --surface-card: #ffffff;
+    --surface-card-dark: #10332f;
+    --surface-dropdown: #0b2b27;
+    --surface-dropdown-dark: #021412;
+    --surface-footer: #123b36;
+    --surface-footer-dark: #021412;
+    --surface-hover: #f0fdfa;
+    --surface-hover-dark: #134e4a;
+    --border-default: #99f6e4;
+    --border-default-dark: #115e59;
+    --text-muted: #0f766e;
+    --text-muted-dark: #5eead4;
+    --surface-panel-alt: #f0fdfa;
+    --surface-panel-alt-dark: #123b36;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #f0fdfa;
+    --color-primary-100: #ccfbf1;
+    --color-primary-200: #99f6e4;
+    --color-primary-300: #5eead4;
+    --color-primary-400: #2dd4bf;
+    --color-primary-500: #14b8a6;
+    --color-primary-600: #0d9488;
+    --color-primary-700: #0f766e;
+    --color-primary-800: #115e59;
+    --color-primary-900: #134e4a;
+    --color-primary-950: #042f2e;
+}
+
+[data-color-scheme="orange"] {
+    --surface-body: #fff7ed;
+    --surface-body-dark: #1f1007;
+    --surface-sidebar: #452515;
+    --surface-sidebar-dark: #160a03;
+    --surface-header: #452515;
+    --surface-header-dark: #160a03;
+    --surface-card: #ffffff;
+    --surface-card-dark: #3a2012;
+    --surface-dropdown: #32190b;
+    --surface-dropdown-dark: #160a03;
+    --surface-footer: #452515;
+    --surface-footer-dark: #160a03;
+    --surface-hover: #fff7ed;
+    --surface-hover-dark: #7c2d12;
+    --border-default: #fed7aa;
+    --border-default-dark: #9a3412;
+    --text-muted: #c2410c;
+    --text-muted-dark: #fdba74;
+    --surface-panel-alt: #fff7ed;
+    --surface-panel-alt-dark: #452515;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #fff7ed;
+    --color-primary-100: #ffedd5;
+    --color-primary-200: #fed7aa;
+    --color-primary-300: #fdba74;
+    --color-primary-400: #fb923c;
+    --color-primary-500: #f97316;
+    --color-primary-600: #ea580c;
+    --color-primary-700: #c2410c;
+    --color-primary-800: #9a3412;
+    --color-primary-900: #7c2d12;
+    --color-primary-950: #431407;
+}
+
+[data-color-scheme="red"] {
+    --surface-body: #fef2f2;
+    --surface-body-dark: #200a0a;
+    --surface-sidebar: #461818;
+    --surface-sidebar-dark: #170505;
+    --surface-header: #461818;
+    --surface-header-dark: #170505;
+    --surface-card: #ffffff;
+    --surface-card-dark: #3a1414;
+    --surface-dropdown: #310f0f;
+    --surface-dropdown-dark: #170505;
+    --surface-footer: #461818;
+    --surface-footer-dark: #170505;
+    --surface-hover: #fef2f2;
+    --surface-hover-dark: #7f1d1d;
+    --border-default: #fecaca;
+    --border-default-dark: #991b1b;
+    --text-muted: #b91c1c;
+    --text-muted-dark: #fca5a5;
+    --surface-panel-alt: #fef2f2;
+    --surface-panel-alt-dark: #461818;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #fef2f2;
+    --color-primary-100: #fee2e2;
+    --color-primary-200: #fecaca;
+    --color-primary-300: #fca5a5;
+    --color-primary-400: #f87171;
+    --color-primary-500: #ef4444;
+    --color-primary-600: #dc2626;
+    --color-primary-700: #b91c1c;
+    --color-primary-800: #991b1b;
+    --color-primary-900: #7f1d1d;
+    --color-primary-950: #450a0a;
+}
+
+[data-color-scheme="pink"] {
+    --surface-body: #fdf2f8;
+    --surface-body-dark: #200a17;
+    --surface-sidebar: #45172f;
+    --surface-sidebar-dark: #17040f;
+    --surface-header: #45172f;
+    --surface-header-dark: #17040f;
+    --surface-card: #ffffff;
+    --surface-card-dark: #391326;
+    --surface-dropdown: #310f20;
+    --surface-dropdown-dark: #17040f;
+    --surface-footer: #45172f;
+    --surface-footer-dark: #17040f;
+    --surface-hover: #fdf2f8;
+    --surface-hover-dark: #831843;
+    --border-default: #fbcfe8;
+    --border-default-dark: #9d174d;
+    --text-muted: #be185d;
+    --text-muted-dark: #f9a8d4;
+    --surface-panel-alt: #fdf2f8;
+    --surface-panel-alt-dark: #45172f;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
+    --color-primary-50: #fdf2f8;
+    --color-primary-100: #fce7f3;
+    --color-primary-200: #fbcfe8;
+    --color-primary-300: #f9a8d4;
+    --color-primary-400: #f472b6;
+    --color-primary-500: #ec4899;
+    --color-primary-600: #db2777;
+    --color-primary-700: #be185d;
+    --color-primary-800: #9d174d;
+    --color-primary-900: #831843;
+    --color-primary-950: #500724;
+}
+
 /* Theme customization (replaces theme.extend in tailwind.config.js) */
 @theme {
     --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -285,24 +573,161 @@
     @apply border-amber-200 bg-amber-50/95 text-amber-950 dark:border-amber-800 dark:bg-amber-950/80 dark:text-amber-100;
 }
 
-.app-page-header,
 .admin-page-header {
-    border-bottom: 1px solid var(--border-default);
-    background-image: linear-gradient(120deg, color-mix(in srgb, var(--color-primary-50) 72%, white), transparent 62%);
+    position: relative;
+    isolation: isolate;
+    border: 1px solid var(--border-default);
+    background-image:
+        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--color-primary-400) 16%, transparent), transparent 15rem),
+        linear-gradient(125deg, color-mix(in srgb, var(--color-primary-50) 80%, white), var(--surface-card) 68%);
 }
 
-.dark .app-page-header,
 .dark .admin-page-header {
-    border-bottom-color: var(--border-default-dark);
-    background-image: linear-gradient(120deg, color-mix(in srgb, var(--color-primary-950) 35%, transparent), transparent 62%);
+    border-color: var(--border-default-dark);
+    background-image:
+        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--color-primary-500) 18%, transparent), transparent 17rem),
+        linear-gradient(125deg, color-mix(in srgb, var(--color-primary-950) 42%, var(--surface-card-dark)), var(--surface-card-dark) 68%);
 }
 
+.app-page-header {
+    isolation: isolate;
+    border: 1px solid color-mix(in srgb, var(--color-primary-400) 20%, transparent);
+    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-950) 92%, #020617), var(--color-primary-700));
+}
+
+.workspace-hero__glow {
+    position: absolute;
+    border-radius: 9999px;
+    background: rgb(255 255 255 / 0.12);
+    filter: blur(1px);
+    pointer-events: none;
+}
+
+.workspace-hero__glow--one {
+    width: 18rem;
+    height: 18rem;
+    top: -11rem;
+    right: 8%;
+}
+
+.workspace-hero__glow--two {
+    width: 11rem;
+    height: 11rem;
+    right: -4rem;
+    bottom: -6rem;
+    background: rgb(255 255 255 / 0.08);
+}
+
+.workspace-hero__icon,
+.workspace-hero__stat,
+.workspace-hero__action {
+    border: 1px solid rgb(255 255 255 / 0.18);
+    background: rgb(255 255 255 / 0.12);
+    color: #fff;
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
+}
+
+.workspace-hero__icon {
+    display: inline-flex;
+    width: 3.25rem;
+    height: 3.25rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1rem;
+    font-size: 1.25rem;
+}
+
+.workspace-hero__stat,
+.workspace-hero__action {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 9999px;
+    background: rgb(15 23 42 / 0.24);
+    color: rgb(255 255 255 / 0.88);
+    backdrop-filter: blur(8px);
+}
+
+.workspace-hero__stat {
+    padding: 0.4rem 0.75rem;
+}
+
+.workspace-hero__action {
+    min-height: 2.75rem;
+    padding: 0.65rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.workspace-hero__action:hover {
+    border-color: rgb(255 255 255 / 0.3);
+    background: rgb(255 255 255 / 0.16);
+    transform: translateY(-1px);
+}
+
+.workspace-hero__action:focus-visible {
+    outline: 2px solid rgb(255 255 255 / 0.9);
+    outline-offset: 2px;
+}
+
+.inline-search-widget {
+    display: grid;
+    width: min(100%, 17.5rem);
+    grid-template-columns: minmax(0, 1fr) 2.5rem;
+    align-items: center;
+    gap: 0.5rem;
+    isolation: isolate;
+}
+
+.inline-search-widget__field,
+.inline-search-widget__input {
+    width: 100%;
+    min-width: 0;
+}
+
+.inline-search-widget__input {
+    padding-inline-start: 2.5rem !important;
+}
+
+.inline-search-widget__button {
+    position: relative;
+    z-index: 1;
+}
+
+.workspace-page-header::after {
+    position: absolute;
+    z-index: -1;
+    width: 9rem;
+    height: 9rem;
+    right: -3rem;
+    bottom: -5rem;
+    border-radius: 9999px;
+    background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
+    content: '';
+}
+
+.workspace-page-header__icon,
 .admin-page-header__icon {
+    display: inline-flex;
+    width: 2.75rem;
+    height: 2.75rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
     border: 1px solid color-mix(in srgb, var(--color-primary-500) 24%, transparent);
+    border-radius: 0.875rem;
     background-color: color-mix(in srgb, var(--color-primary-500) 11%, transparent);
     color: var(--color-primary-700);
 }
 
+.admin-page-header__icon {
+    width: 2.75rem;
+    height: 2.75rem;
+}
+
+.dark .workspace-page-header__icon,
 .dark .admin-page-header__icon {
     color: var(--color-primary-300);
 }
@@ -329,6 +754,17 @@
 
 .admin-data-table-wrap {
     border-radius: 0.875rem;
+    background-color: var(--surface-card);
+    box-shadow: 0 10px 32px -26px rgb(15 23 42 / 0.55);
+}
+
+.dark .admin-data-table-wrap {
+    background-color: var(--surface-card-dark);
+    box-shadow: 0 12px 34px -24px rgb(0 0 0 / 0.8);
+}
+
+.admin-data-table__head th {
+    background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface-dropdown) 94%, white), var(--surface-dropdown));
 }
 
 .admin-dashboard-page__hero {
@@ -395,6 +831,183 @@
     }
 }
 
+/* Shared treatment for all first-party application views. */
+.app-view-stack > .surface-panel,
+.app-view-stack > .bg-white {
+    border: 1px solid var(--border-default);
+    border-radius: 1rem;
+    box-shadow: 0 12px 36px -28px rgb(15 23 42 / 0.55);
+}
+
+.dark .app-view-stack > .surface-panel,
+.dark .app-view-stack > .bg-white {
+    border-color: var(--border-default-dark);
+    box-shadow: 0 14px 38px -26px rgb(0 0 0 / 0.78);
+}
+
+.app-view-stack :where(a, button, input, select, textarea):focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 2px;
+}
+
+.app-view-stack :where(
+    input[type='text'],
+    input[type='search'],
+    input[type='email'],
+    input[type='url'],
+    input[type='tel'],
+    input[type='number'],
+    input[type='password'],
+    input[type='date'],
+    input[type='datetime-local'],
+    input[type='time'],
+    select,
+    textarea
+) {
+    border-radius: 0.75rem;
+    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+}
+
+.app-view-stack :where(
+    input[type='text'],
+    input[type='search'],
+    input[type='email'],
+    input[type='url'],
+    input[type='tel'],
+    input[type='number'],
+    input[type='password'],
+    input[type='date'],
+    input[type='datetime-local'],
+    input[type='time'],
+    select
+) {
+    min-height: 2.75rem;
+}
+
+.app-view-stack :where(button, .btn) {
+    border-radius: 0.75rem;
+}
+
+.app-view-stack nav[aria-label='breadcrumb' i] a,
+.breadcrumb-bar a {
+    border-radius: 0.375rem;
+    font-weight: 500;
+}
+
+.breadcrumb-bar {
+    background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-primary-50) 52%, transparent), transparent 65%);
+}
+
+.dark .breadcrumb-bar {
+    background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-primary-950) 26%, transparent), transparent 65%);
+}
+
+.empty-state__icon {
+    border: 1px solid color-mix(in srgb, var(--color-primary-500) 18%, transparent);
+    background: color-mix(in srgb, var(--color-primary-500) 9%, white);
+    color: var(--color-primary-600);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
+}
+
+.dark .empty-state__icon {
+    background: color-mix(in srgb, var(--color-primary-500) 16%, var(--surface-card-dark));
+    color: var(--color-primary-300);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
+}
+
+.catalog-results-toolbar,
+.catalog-release-row,
+.admin-card,
+.admin-stat-card {
+    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+}
+
+.catalog-release-row:hover,
+.admin-card:hover,
+.admin-stat-card:hover {
+    border-color: color-mix(in srgb, var(--color-primary-500) 30%, var(--border-default));
+    box-shadow: 0 14px 34px -28px rgb(15 23 42 / 0.55);
+}
+
+.dark .catalog-release-row:hover,
+.dark .admin-card:hover,
+.dark .admin-stat-card:hover {
+    border-color: color-mix(in srgb, var(--color-primary-400) 34%, var(--border-default-dark));
+    box-shadow: 0 16px 36px -26px rgb(0 0 0 / 0.78);
+}
+
+.guest-view-stack {
+    min-height: 100vh;
+    background:
+        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--color-primary-500) 12%, transparent), transparent 28rem),
+        radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--color-primary-400) 8%, transparent), transparent 24rem),
+        var(--surface-body);
+}
+
+.workspace-brand-mark {
+    border: 1px solid color-mix(in srgb, var(--color-primary-500) 24%, transparent);
+    background: color-mix(in srgb, var(--color-primary-500) 11%, white);
+    color: var(--color-primary-700);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 12px 30px -20px rgb(15 23 42 / 0.5);
+}
+
+.dark .workspace-brand-mark {
+    background: color-mix(in srgb, var(--color-primary-500) 18%, var(--surface-card-dark));
+    color: var(--color-primary-300);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 14px 32px -20px rgb(0 0 0 / 0.85);
+}
+
+.workspace-document-header {
+    background-image:
+        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-primary-500) 12%, transparent), transparent 12rem),
+        linear-gradient(120deg, color-mix(in srgb, var(--color-primary-50) 70%, white), transparent 68%);
+}
+
+.dark .workspace-document-header {
+    background-image:
+        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-primary-500) 14%, transparent), transparent 14rem),
+        linear-gradient(120deg, color-mix(in srgb, var(--color-primary-950) 34%, transparent), transparent 68%);
+}
+
+.header-gradient {
+    border: 1px solid color-mix(in srgb, var(--color-primary-500) 30%, transparent);
+    background:
+        radial-gradient(circle at 92% 12%, rgb(255 255 255 / 0.13), transparent 14rem),
+        linear-gradient(135deg, color-mix(in srgb, var(--color-primary-950) 92%, #020617), var(--color-primary-700));
+    color: #fff;
+}
+
+.info-card-gradient {
+    border-color: color-mix(in srgb, var(--color-primary-500) 32%, var(--border-default));
+    background:
+        linear-gradient(120deg, color-mix(in srgb, var(--color-primary-50) 72%, white), var(--surface-card));
+    box-shadow: 0 12px 30px -26px rgb(15 23 42 / 0.48);
+}
+
+.dark .info-card-gradient {
+    border-color: color-mix(in srgb, var(--color-primary-400) 34%, var(--border-default-dark));
+    background:
+        linear-gradient(120deg, color-mix(in srgb, var(--color-primary-950) 34%, var(--surface-card-dark)), var(--surface-card-dark));
+    box-shadow: 0 14px 32px -24px rgb(0 0 0 / 0.78);
+}
+
+.table-header-gradient {
+    background:
+        linear-gradient(90deg, color-mix(in srgb, var(--color-primary-50) 64%, white), var(--surface-card));
+}
+
+.dark .table-header-gradient {
+    background:
+        linear-gradient(90deg, color-mix(in srgb, var(--color-primary-950) 30%, var(--surface-card-dark)), var(--surface-card-dark));
+}
+
+.dark .guest-view-stack {
+    background:
+        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--color-primary-500) 15%, transparent), transparent 30rem),
+        radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--color-primary-600) 10%, transparent), transparent 26rem),
+        var(--surface-body-dark);
+}
+
 /* Default document flow - public/guest pages need vertical scrolling */
 html,
 body {
@@ -514,6 +1127,7 @@ footer {
 .surface-panel {
     background-color: var(--surface-card) !important;
     border-color: var(--border-default);
+    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
 }
 .surface-panel.border {
     border-width: 1px;
@@ -550,10 +1164,13 @@ footer {
 .auth-card {
     background-color: var(--surface-card) !important;
     border: 1px solid var(--border-default);
+    border-radius: 1.25rem;
+    box-shadow: 0 24px 65px -38px rgb(15 23 42 / 0.55);
 }
 .dark .auth-card {
     background-color: var(--surface-card-dark) !important;
     border-color: var(--border-default-dark);
+    box-shadow: 0 26px 70px -38px rgb(0 0 0 / 0.9);
 }
 .release-chip {
     @apply inline-flex items-center rounded px-2 py-0.5 text-xs font-medium;
@@ -628,6 +1245,11 @@ main table {
 main thead th {
     background-color: var(--surface-dropdown) !important;
     border-bottom-color: var(--border-default) !important;
+    color: rgb(241 245 249);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.045em;
+    text-transform: uppercase;
 }
 .dark main thead th {
     background-color: var(--surface-dropdown-dark) !important;
@@ -643,6 +1265,7 @@ main tbody {
 main tbody tr {
     background-color: var(--surface-card) !important;
     border-bottom-color: var(--border-default);
+    transition: background-color 140ms ease;
 }
 .dark main tbody tr {
     background-color: var(--surface-card-dark) !important;
diff --git a/resources/css/csp-safe.css b/resources/css/csp-safe.css
index af37d7478..afb38f76f 100644
--- a/resources/css/csp-safe.css
+++ b/resources/css/csp-safe.css
@@ -787,73 +787,436 @@ code.api-token::-webkit-scrollbar-thumb:hover {
 }
 
 /* ------------------------------------------------------------------ */
-/* Movies grid: layout toggle (1-column default, 2-column on lg+)    */
-/* Driven by [data-layout] attribute set via Alpine.js                */
+/* Movies library                                                     */
 /* ------------------------------------------------------------------ */
 
+.movies-hero {
+    background:
+        linear-gradient(135deg, color-mix(in srgb, var(--color-primary-950) 92%, #020617), var(--color-primary-700));
+}
+
+.movies-hero__glow {
+    position: absolute;
+    border-radius: 9999px;
+    background: rgb(255 255 255 / 0.12);
+    filter: blur(1px);
+    pointer-events: none;
+}
+
+.movies-hero__glow--one {
+    width: 18rem;
+    height: 18rem;
+    top: -11rem;
+    right: 8%;
+}
+
+.movies-hero__glow--two {
+    width: 11rem;
+    height: 11rem;
+    right: -4rem;
+    bottom: -6rem;
+    background: rgb(255 255 255 / 0.08);
+}
+
+.movies-hero__icon {
+    display: inline-flex;
+    width: 3.25rem;
+    height: 3.25rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(255 255 255 / 0.18);
+    border-radius: 1rem;
+    background: rgb(255 255 255 / 0.12);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
+    font-size: 1.25rem;
+}
+
+.movies-hero__stat,
+.movies-hero__action {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid rgb(255 255 255 / 0.16);
+    border-radius: 9999px;
+    background: rgb(15 23 42 / 0.24);
+    color: rgb(255 255 255 / 0.88);
+    backdrop-filter: blur(8px);
+}
+
+.movies-hero__stat {
+    padding: 0.4rem 0.75rem;
+}
+
+.movies-hero__action {
+    min-height: 2.75rem;
+    padding: 0.65rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.movies-hero__action:hover {
+    border-color: rgb(255 255 255 / 0.3);
+    background: rgb(255 255 255 / 0.16);
+    transform: translateY(-1px);
+}
+
+.movies-hero__action:focus-visible {
+    outline: 2px solid rgb(255 255 255 / 0.9);
+    outline-offset: 2px;
+}
+
+.movies-hero__action--accent {
+    border-color: rgb(251 146 60 / 0.45);
+    background: linear-gradient(135deg, rgb(249 115 22 / 0.94), rgb(220 38 38 / 0.94));
+    color: #fff;
+}
+
+.movie-filter-control {
+    width: 100%;
+    min-height: 2.75rem;
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.75rem;
+    background-color: #fff;
+    color: rgb(17 24 39);
+    font-size: 0.875rem;
+    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+}
+
+.movie-filter-control:focus {
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
+    outline: none;
+}
+
+.dark .movie-filter-control {
+    border-color: rgb(75 85 99);
+    background-color: rgb(31 41 55);
+    color: rgb(243 244 246);
+}
+
+.movie-filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    border: 1px solid color-mix(in srgb, var(--color-primary-500) 24%, transparent);
+    border-radius: 9999px;
+    background-color: color-mix(in srgb, var(--color-primary-500) 9%, white);
+    padding: 0.35rem 0.65rem;
+    color: var(--color-primary-800);
+    font-size: 0.75rem;
+}
+
+.dark .movie-filter-chip {
+    background-color: color-mix(in srgb, var(--color-primary-500) 16%, rgb(15 23 42));
+    color: var(--color-primary-200);
+}
+
 .movies-grid {
     display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    transition: gap 0.3s ease;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
 }
 
-@media (min-width: 1024px) {
-    .movies-grid[data-layout="2"] {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 1rem;
-    }
+.movie-card {
+    position: relative;
+    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+}
+
+.movie-card:hover {
+    border-color: color-mix(in srgb, var(--color-primary-500) 38%, var(--border-default));
+    box-shadow: 0 16px 36px -24px rgb(15 23 42 / 0.55);
+    transform: translateY(-2px);
+}
+
+.dark .movie-card:hover {
+    border-color: color-mix(in srgb, var(--color-primary-400) 45%, var(--border-default-dark));
+    box-shadow: 0 18px 42px -24px rgb(0 0 0 / 0.8);
+}
+
+.movie-card__layout {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.movie-card__poster-wrap {
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+    background: var(--surface-panel-alt);
+}
+
+.dark .movie-card__poster-wrap {
+    background: var(--surface-panel-alt-dark);
+}
+
+.movie-card__poster-link {
+    display: block;
 }
 
-/* Cover image / placeholder sizing */
 .movies-grid .movie-cover {
-    width: 12rem;
-    height: 18rem;
-    transition: width 0.3s ease, height 0.3s ease;
+    display: block;
+    width: 100%;
+    height: 15rem;
+    object-fit: cover;
+    transition: transform 240ms ease;
 }
 
-.movies-grid[data-layout="2"] .movie-cover {
-    width: 8rem;
-    height: 12rem;
+.movie-card:hover .movie-cover {
+    transform: scale(1.015);
+}
+
+.movie-card__poster-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: var(--text-muted);
+}
+
+.dark .movie-card__poster-placeholder {
+    color: var(--text-muted-dark);
+}
+
+.movie-card__poster-placeholder i {
+    font-size: 2rem;
+}
+
+.movie-card__poster-placeholder span {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.movie-card__release-count {
+    position: absolute;
+    right: 0.75rem;
+    bottom: 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border: 1px solid rgb(255 255 255 / 0.18);
+    border-radius: 9999px;
+    background: rgb(15 23 42 / 0.84);
+    padding: 0.35rem 0.6rem;
+    color: #fff;
+    font-size: 0.7rem;
+    font-weight: 700;
+    backdrop-filter: blur(6px);
+}
+
+.movie-card__content {
+    display: flex;
+    flex-direction: column;
+    padding: 1.25rem;
+}
+
+.movie-card__title {
+    overflow-wrap: anywhere;
+}
+
+.movie-meta-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border-radius: 9999px;
+    background: var(--surface-panel-alt);
+    padding: 0.35rem 0.6rem;
+    color: var(--text-muted);
+}
+
+.dark .movie-meta-chip {
+    background: var(--surface-panel-alt-dark);
+    color: var(--text-muted-dark);
+}
+
+.movie-meta-chip--rating {
+    background: rgb(254 249 195);
+    color: rgb(161 98 7);
+}
+
+.dark .movie-meta-chip--rating {
+    background: rgb(113 63 18 / 0.45);
+    color: rgb(253 224 71);
+}
+
+.movie-card__metadata-row {
+    display: grid;
+    grid-template-columns: 5rem minmax(0, 1fr);
+    gap: 0.65rem;
+    min-width: 0;
+}
+
+.movie-card__metadata-row dt {
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.dark .movie-card__metadata-row dt {
+    color: var(--text-muted-dark);
+}
+
+.movie-card__metadata-row dd {
+    min-width: 0;
+    color: rgb(55 65 81);
+}
+
+.dark .movie-card__metadata-row dd {
+    color: rgb(209 213 219);
+}
+
+.movie-card__metadata-row dd a {
+    color: var(--color-primary-600);
+}
+
+.dark .movie-card__metadata-row dd a {
+    color: var(--color-primary-400);
+}
+
+.movie-source-link {
+    display: inline-flex;
+    min-height: 2rem;
+    align-items: center;
+    gap: 0.35rem;
+    border-radius: 0.5rem;
+    padding: 0.35rem 0.6rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    transition: filter 160ms ease, transform 160ms ease;
+}
+
+.movie-source-link:hover {
+    filter: brightness(0.96);
+    transform: translateY(-1px);
+}
+
+.movie-source-link:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 2px;
+}
+
+.movie-source-link--imdb {
+    background: rgb(254 240 138);
+    color: rgb(113 63 18);
+}
+
+.movie-source-link--tmdb {
+    background: color-mix(in srgb, var(--color-primary-500) 13%, white);
+    color: var(--color-primary-800);
+}
+
+.movie-source-link--trakt {
+    background: rgb(254 226 226);
+    color: rgb(153 27 27);
+}
+
+.dark .movie-source-link--imdb {
+    background: rgb(113 63 18 / 0.6);
+    color: rgb(254 240 138);
+}
+
+.dark .movie-source-link--tmdb {
+    background: color-mix(in srgb, var(--color-primary-500) 20%, rgb(15 23 42));
+    color: var(--color-primary-200);
+}
+
+.dark .movie-source-link--trakt {
+    background: rgb(127 29 29 / 0.5);
+    color: rgb(254 202 202);
 }
 
-/* Release card: row layout by default (1-col), column in 2-col */
 .movies-grid .release-card-container {
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    transition: gap 0.2s ease;
-}
-
-.movies-grid[data-layout="2"] .release-card-container {
     flex-direction: column;
     gap: 0.75rem;
 }
 
-.movies-grid .release-info-wrapper {
-    flex: 1;
-    min-width: 0;
-}
-
-.movies-grid[data-layout="2"] .release-info-wrapper {
-    flex: unset;
-    min-width: unset;
-}
-
-/* Release action buttons */
 .movies-grid .release-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5rem;
-    flex-shrink: 0;
 }
 
-.movies-grid[data-layout="2"] .release-actions {
-    flex-shrink: unset;
-    margin-top: 0.5rem;
+.movies-grid .release-actions .release-action-sm {
+    gap: 0.35rem;
+    min-height: 2rem;
+    border-radius: 0.5rem;
+}
+
+.movie-release-row {
+    transition: border-color 160ms ease, background-color 160ms ease;
+}
+
+.movie-release-row:hover {
+    border-color: color-mix(in srgb, var(--color-primary-500) 28%, var(--border-default));
+}
+
+@media (min-width: 640px) {
+    .movie-card__layout {
+        flex-direction: row;
+    }
+
+    .movie-card__poster-wrap,
+    .movies-grid .movie-cover {
+        width: 10rem;
+    }
+
+    .movies-grid .movie-cover {
+        height: 15rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .movies-grid[data-layout="2"] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .movies-grid[data-layout="1"] .movie-card__poster-wrap,
+    .movies-grid[data-layout="1"] .movie-cover {
+        width: 12rem;
+    }
+
+    .movies-grid[data-layout="1"] .movie-cover {
+        height: 18rem;
+    }
+
+    .movies-grid[data-layout="1"] .release-card-container {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+    }
+
+    .movies-grid[data-layout="1"] .release-actions {
+        flex-shrink: 0;
+        justify-content: flex-end;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .movie-card,
+    .movie-cover,
+    .movies-hero__action,
+    .movie-source-link {
+        transition: none;
+    }
+
+    .movie-card:hover,
+    .movie-card:hover .movie-cover,
+    .movies-hero__action:hover,
+    .movie-source-link:hover {
+        transform: none;
+    }
 }
 
 /* Sidebar - Useful Links Content Styling */
@@ -1008,4 +1371,3 @@ code.api-token::-webkit-scrollbar-thumb:hover {
 .series-detail-page .series-detail-poster {
     @apply rounded-xl shadow-xl transition-shadow duration-300;
 }
-
diff --git a/resources/js/alpine/components/movies-page.js b/resources/js/alpine/components/movies-page.js
index 0550ef9bb..e866181aa 100644
--- a/resources/js/alpine/components/movies-page.js
+++ b/resources/js/alpine/components/movies-page.js
@@ -16,11 +16,11 @@ Alpine.data('moviesPage', () => ({
     },
 
     get layoutLabel() {
-        return this.layout === 1 ? '1 Column' : '2 Columns';
+        return this.layout === 1 ? 'Comfortable list' : 'Compact grid';
     },
 
     get layoutIcon() {
-        return this.layout === 1 ? 'fas fa-th-list' : 'fas fa-th-large';
+        return this.layout === 1 ? 'fas fa-list' : 'fas fa-table-cells-large';
     },
 
     toggleLayout() {
diff --git a/resources/js/alpine/stores/theme.js b/resources/js/alpine/stores/theme.js
index 606e19d92..0018ab77b 100644
--- a/resources/js/alpine/stores/theme.js
+++ b/resources/js/alpine/stores/theme.js
@@ -5,6 +5,7 @@
 import Alpine from '@alpinejs/csp';
 
 const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const colorSchemes = ['blue', 'indigo', 'cyan', 'teal', 'emerald', 'violet', 'pink', 'rose', 'red', 'orange', 'amber'];
 
 Alpine.store('theme', {
     current: 'light',
@@ -19,18 +20,19 @@ Alpine.store('theme', {
 
         const schemeMeta = document.querySelector('meta[name="color-scheme-preference"]');
         const schemeData = document.getElementById('current-theme-data');
-        this.colorScheme = (isAuth && isAuth.content === 'true')
+        const preferredScheme = (isAuth && isAuth.content === 'true')
             ? (schemeMeta ? schemeMeta.content : (schemeData?.dataset?.colorScheme || 'blue'))
             : (localStorage.getItem('color_scheme') || 'blue');
+        this.colorScheme = colorSchemes.includes(preferredScheme) ? preferredScheme : 'blue';
 
         this.apply();
         this.applyScheme();
         this._listenOS();
     },
 
-    /** Set and persist color scheme (blue, emerald, violet) */
+    /** Set and persist a supported color scheme. */
     setScheme(scheme) {
-        if (!['blue', 'emerald', 'violet'].includes(scheme)) return;
+        if (!colorSchemes.includes(scheme)) return;
         this.colorScheme = scheme;
         this.applyScheme();
         this._save();
@@ -114,6 +116,7 @@ Alpine.store('theme', {
         // Update color scheme swatch buttons
         document.querySelectorAll('.dropdown-scheme-btn, .mobile-scheme-btn').forEach(function(btn) {
             var isActive = btn.dataset.scheme === self.colorScheme;
+            btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
             btn.classList.remove('ring-2', 'ring-offset-2', 'ring-offset-gray-900', 'ring-primary-500', 'ring-white');
             if (isActive) {
                 btn.classList.add('ring-2', 'ring-offset-2', 'ring-offset-gray-900', 'ring-primary-500', 'dark:ring-offset-gray-950');
diff --git a/resources/views/admin/anidb/edit.blade.php b/resources/views/admin/anidb/edit.blade.php
index f74a0ffa7..d4cd628f9 100644
--- a/resources/views/admin/anidb/edit.blade.php
+++ b/resources/views/admin/anidb/edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-edit mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ route('admin.anidb-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.anidb-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Edit Form -->
         <div class="p-6">
diff --git a/resources/views/admin/anidb/index.blade.php b/resources/views/admin/anidb/index.blade.php
index c7934136e..26142ff79 100644
--- a/resources/views/admin/anidb/index.blade.php
+++ b/resources/views/admin/anidb/index.blade.php
@@ -3,17 +3,13 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-dragon mr-2"></i>{{ $title }}
-                </h1>
-                <div class="text-sm text-gray-600 dark:text-gray-400">
-                    Total: {{ $anidblist->total() }} anime
-                </div>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-dragon">
+            <x-slot:actions>
+                <span class="inline-flex min-h-11 items-center rounded-xl border border-gray-200 bg-white/70 px-4 text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-200">
+                    {{ number_format($anidblist->total()) }} anime
+                </span>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Search Form -->
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
diff --git a/resources/views/admin/anidb/remove.blade.php b/resources/views/admin/anidb/remove.blade.php
index f507423a9..8d66b131f 100644
--- a/resources/views/admin/anidb/remove.blade.php
+++ b/resources/views/admin/anidb/remove.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-unlink mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ route('admin.anidb-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-unlink">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.anidb-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Content -->
         <div class="p-6">
@@ -114,4 +108,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/blacklist/edit.blade.php b/resources/views/admin/blacklist/edit.blade.php
index 4bedd0712..62f137519 100644
--- a/resources/views/admin/blacklist/edit.blade.php
+++ b/resources/views/admin/blacklist/edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800">
-                    <i class="fas fa-edit mr-2"></i>{{ $title ?? 'Binary Black/Whitelist Edit' }}
-                </h1>
-                <a href="{{ url('/admin/binaryblacklist-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Binary Black/Whitelist Edit'" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/binaryblacklist-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Form -->
         <form action="{{ url('/admin/binaryblacklist-edit?action=submit') }}" method="POST" id="blacklistForm" class="px-6 py-6">
@@ -182,4 +176,3 @@
 
 {{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
-
diff --git a/resources/views/admin/books/edit.blade.php b/resources/views/admin/books/edit.blade.php
index bee816438..aa4dba91b 100644
--- a/resources/views/admin/books/edit.blade.php
+++ b/resources/views/admin/books/edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-edit mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ route('admin.book-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.book-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Edit Form -->
         <div class="p-6">
diff --git a/resources/views/admin/books/index.blade.php b/resources/views/admin/books/index.blade.php
index c0b3c1de9..f28fd7efd 100644
--- a/resources/views/admin/books/index.blade.php
+++ b/resources/views/admin/books/index.blade.php
@@ -3,17 +3,13 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-book mr-2"></i>{{ $title }}
-                </h1>
-                <div class="text-sm text-gray-600 dark:text-gray-400">
-                    Total: {{ $bookList->total() }} books
-                </div>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-book">
+            <x-slot:actions>
+                <span class="inline-flex min-h-11 items-center rounded-xl border border-gray-200 bg-white/70 px-4 text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-200">
+                    {{ number_format($bookList->total()) }} books
+                </span>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Books Table -->
         <x-admin.data-table>
diff --git a/resources/views/admin/console/edit.blade.php b/resources/views/admin/console/edit.blade.php
index 36e9898ec..4978177f0 100644
--- a/resources/views/admin/console/edit.blade.php
+++ b/resources/views/admin/console/edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-edit mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ route('admin.console-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.console-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Edit Form -->
         <div class="p-6">
diff --git a/resources/views/admin/console/index.blade.php b/resources/views/admin/console/index.blade.php
index d2704c6a2..d0a3b3e21 100644
--- a/resources/views/admin/console/index.blade.php
+++ b/resources/views/admin/console/index.blade.php
@@ -3,17 +3,13 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-gamepad mr-2"></i>{{ $title }}
-                </h1>
-                <div class="text-sm text-gray-600 dark:text-gray-400">
-                    Total: {{ $consoleList->total() }} games
-                </div>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-gamepad">
+            <x-slot:actions>
+                <span class="inline-flex min-h-11 items-center rounded-xl border border-gray-200 bg-white/70 px-4 text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-200">
+                    {{ number_format($consoleList->total()) }} games
+                </span>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Console Table -->
         <x-admin.data-table>
diff --git a/resources/views/admin/content/add.blade.php b/resources/views/admin/content/add.blade.php
index cde59daa3..b2c7e0971 100644
--- a/resources/views/admin/content/add.blade.php
+++ b/resources/views/admin/content/add.blade.php
@@ -7,12 +7,7 @@
 @endphp
 <div class="space-y-6" x-data="tinyMceEditor">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800">
-                <i class="fas fa-file-alt mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-file-alt" />
 
         <!-- Content Form -->
         <form method="post" action="{{ route('admin.content-add') }}" class="p-6">
@@ -185,4 +180,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index f27191bff..edd354ef6 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -18,22 +18,16 @@
      data-data-url="{{ route('admin.api.dashboard-data') }}"
      data-refresh-interval="{{ 60 * 1000 }}">
     <div class="admin-dashboard-page__content space-y-6" data-dashboard-content>
-    <!-- Welcome Section -->
-    <x-admin.card class="admin-dashboard-page__hero p-6">
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-            <div>
-                <p class="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-300">Operations overview</p>
-                <h1 class="text-2xl font-semibold tracking-tight text-gray-950 dark:text-white sm:text-3xl">Admin Dashboard</h1>
-                <p class="mt-2 text-gray-600 dark:text-gray-300">Monitor index health, users, releases, and site activity from one workspace.</p>
-            </div>
-            <div class="rounded-lg bg-gray-50 dark:bg-gray-900 px-4 py-3 text-sm text-gray-600 dark:text-gray-300 lg:text-right">
+    <x-admin.page-header title="Admin Dashboard" icon="fas fa-gauge-high" subtitle="Monitor index health, users, releases, and site activity from one workspace." class="admin-dashboard-page__hero">
+        <x-slot:actions>
+            <div class="rounded-xl border border-gray-200 bg-white/70 px-4 py-2 text-sm text-gray-600 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-300 lg:text-right">
                 <p class="font-medium text-gray-700 dark:text-gray-200">
                     <i class="fas fa-sync-alt mr-1"></i> Last dashboard refresh: <span data-stat="last-refresh">{{ $dashboardLastRefreshedAt }}</span>
                 </p>
                 <p class="mt-1 text-xs text-green-600 dark:text-green-400">Auto-refreshes every minute</p>
             </div>
-        </div>
-    </x-admin.card>
+        </x-slot:actions>
+    </x-admin.page-header>
 
     <!-- Stats Grid -->
     <div class="admin-dashboard-page__stats-grid grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
diff --git a/resources/views/admin/games/edit.blade.php b/resources/views/admin/games/edit.blade.php
index 3780dc230..38742de61 100644
--- a/resources/views/admin/games/edit.blade.php
+++ b/resources/views/admin/games/edit.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-gamepad mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-gamepad" />
 
         <!-- Success/Error/Warning Messages -->
         @if(session('success'))
diff --git a/resources/views/admin/games/index.blade.php b/resources/views/admin/games/index.blade.php
index e3e741ec5..4128e98e3 100644
--- a/resources/views/admin/games/index.blade.php
+++ b/resources/views/admin/games/index.blade.php
@@ -3,14 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-gamepad mr-2"></i>{{ $title }}
-                </h1>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-gamepad" />
 
         <!-- Success/Error/Warning Messages -->
         @if(session('success'))
@@ -131,4 +124,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/gdpr/index.blade.php b/resources/views/admin/gdpr/index.blade.php
index a29076ab3..4c25c8d6b 100644
--- a/resources/views/admin/gdpr/index.blade.php
+++ b/resources/views/admin/gdpr/index.blade.php
@@ -3,13 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-shield-alt mr-2"></i>{{ $title }}
-                </h1>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-shield-alt" />
 
         @if(session('success'))
             <div class="mx-6 mt-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-green-800 dark:text-green-200">
@@ -103,4 +97,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/gdpr/show.blade.php b/resources/views/admin/gdpr/show.blade.php
index f6e32ee3e..7aad91ba5 100644
--- a/resources/views/admin/gdpr/show.blade.php
+++ b/resources/views/admin/gdpr/show.blade.php
@@ -3,16 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-shield-alt mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ route('admin.gdpr-requests.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-shield-alt">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.gdpr-requests.index')" tone="gray" icon="fas fa-arrow-left">Back</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         @if(session('success'))
             <div class="mx-6 mt-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-green-800 dark:text-green-200">
@@ -145,4 +140,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/groups/bulk.blade.php b/resources/views/admin/groups/bulk.blade.php
index 1318b2c4f..a75a56cdc 100644
--- a/resources/views/admin/groups/bulk.blade.php
+++ b/resources/views/admin/groups/bulk.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-plus-square mr-2"></i>{{ $title ?? 'Bulk Add Newsgroups' }}
-                </h1>
-                <a href="{{ url('/admin/group-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600">
-                    <i class="fas fa-list mr-2"></i>View All Groups
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Bulk Add Newsgroups'" icon="fas fa-plus-square">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/group-list')" tone="gray" icon="fas fa-list">View All Groups</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <div class="px-6 py-6">
             @if(!empty($groupmsglist))
@@ -179,4 +173,3 @@
 </div>
 
 @endsection
-
diff --git a/resources/views/admin/groups/edit.blade.php b/resources/views/admin/groups/edit.blade.php
index 70ad4b8e8..a37fef784 100644
--- a/resources/views/admin/groups/edit.blade.php
+++ b/resources/views/admin/groups/edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-edit mr-2"></i>{{ $title ?? 'Group Edit' }}
-                </h1>
-                <a href="{{ url('/admin/group-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to Groups
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Group Edit'" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/group-list')" tone="gray" icon="fas fa-arrow-left">Back to Groups</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Error Message -->
         @if(isset($error) && $error != '')
@@ -263,4 +257,3 @@
 </div>
 
 @endsection
-
diff --git a/resources/views/admin/invitations/show.blade.php b/resources/views/admin/invitations/show.blade.php
index b4f3bf05e..effc9451d 100644
--- a/resources/views/admin/invitations/show.blade.php
+++ b/resources/views/admin/invitations/show.blade.php
@@ -3,35 +3,25 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-envelope mr-2"></i>{{ $title }}
-                </h1>
-                <div class="space-x-2">
+        <x-admin.page-header :title="$title" icon="fas fa-envelope">
+            <x-slot:actions>
+                <div class="flex flex-wrap gap-2">
                     @if(!$invitation->used_at)
                         <form method="POST" action="{{ url('admin/invitations/' . $invitation->id . '/resend') }}" class="inline">
                             @csrf
-                            <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
-                                <i class="fas fa-paper-plane mr-2"></i>Resend
-                            </button>
+                            <x-admin.button type="submit" tone="success" icon="fas fa-paper-plane">Resend</x-admin.button>
                         </form>
                         <form method="POST" action="{{ url('admin/invitations/' . $invitation->id . '/cancel') }}" class="inline"
                               x-data="confirmForm"
                               data-message="Are you sure you want to cancel this invitation?">
                             @csrf
-                            <button type="button" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700" @click="submit()">
-                                <i class="fas fa-ban mr-2"></i>Cancel
-                            </button>
+                            <x-admin.button type="button" tone="warning" icon="fas fa-ban" @click="submit()">Cancel</x-admin.button>
                         </form>
                     @endif
-                    <a href="{{ url('admin/invitations') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                        <i class="fas fa-arrow-left mr-2"></i>Back to List
-                    </a>
+                    <x-admin.button :href="url('admin/invitations')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
                 </div>
-            </div>
-        </div>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Invitation Details -->
         <div class="p-6">
@@ -205,4 +195,3 @@
 
 {{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
-
diff --git a/resources/views/admin/movies/add.blade.php b/resources/views/admin/movies/add.blade.php
index ff441c25b..32de24d36 100644
--- a/resources/views/admin/movies/add.blade.php
+++ b/resources/views/admin/movies/add.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-film mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-film" />
 
         <!-- Success/Error/Warning Messages -->
         @if(session('success'))
@@ -101,4 +96,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/movies/edit.blade.php b/resources/views/admin/movies/edit.blade.php
index 0c6f82456..5ef192492 100644
--- a/resources/views/admin/movies/edit.blade.php
+++ b/resources/views/admin/movies/edit.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-edit mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-edit" />
 
         <!-- Success/Error/Warning Messages -->
         @if(session('success'))
@@ -264,17 +259,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-film mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ url('admin/movie-add') }}" class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700">
-                    <i class="fas fa-plus mr-2"></i>Add Movie
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-film">
+            <x-slot:actions>
+                <x-admin.button :href="url('admin/movie-add')" icon="fas fa-plus">Add Movie</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Search Form -->
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
diff --git a/resources/views/admin/music/edit.blade.php b/resources/views/admin/music/edit.blade.php
index df45e8ad9..ab8041255 100644
--- a/resources/views/admin/music/edit.blade.php
+++ b/resources/views/admin/music/edit.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-music mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-music" />
 
         <!-- Success/Error/Warning Messages -->
         @if(session('success'))
diff --git a/resources/views/admin/music/index.blade.php b/resources/views/admin/music/index.blade.php
index ac5eeeafd..7bcf1b4b5 100644
--- a/resources/views/admin/music/index.blade.php
+++ b/resources/views/admin/music/index.blade.php
@@ -3,14 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-music mr-2"></i>{{ $title }}
-                </h1>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-music" />
 
         <!-- Success/Error/Warning Messages -->
         @if(session('success'))
@@ -137,4 +130,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/predb/index.blade.php b/resources/views/admin/predb/index.blade.php
index 14b48fe34..e17aab40a 100644
--- a/resources/views/admin/predb/index.blade.php
+++ b/resources/views/admin/predb/index.blade.php
@@ -3,17 +3,13 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-database mr-2"></i>{{ $title }}
-                </h1>
-                <div class="text-sm text-gray-600 dark:text-gray-400">
-                    Total: {{ $results->total() }} entries
-                </div>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-database">
+            <x-slot:actions>
+                <span class="inline-flex min-h-11 items-center rounded-xl border border-gray-200 bg-white/70 px-4 text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-200">
+                    {{ number_format($results->total()) }} entries
+                </span>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Search Form -->
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
@@ -171,4 +167,3 @@
     @endif
 </div>
 @endsection
-
diff --git a/resources/views/admin/promotions/create.blade.php b/resources/views/admin/promotions/create.blade.php
index 4dee60870..712d6fbc6 100644
--- a/resources/views/admin/promotions/create.blade.php
+++ b/resources/views/admin/promotions/create.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card class="max-w-3xl mx-auto">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-plus mr-2"></i>Create New Promotion
-            </h1>
-        </div>
+        <x-admin.page-header title="Create New Promotion" icon="fas fa-plus" />
 
         <!-- Form -->
         <form action="{{ route('admin.promotions.store') }}" method="POST" class="p-6">
@@ -129,4 +124,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/promotions/edit.blade.php b/resources/views/admin/promotions/edit.blade.php
index 71a45ee76..014f19db5 100644
--- a/resources/views/admin/promotions/edit.blade.php
+++ b/resources/views/admin/promotions/edit.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card class="max-w-3xl mx-auto">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-edit mr-2"></i>Edit Promotion
-            </h1>
-        </div>
+        <x-admin.page-header title="Edit Promotion" icon="fas fa-edit" />
 
         <!-- Form -->
         <form action="{{ route('admin.promotions.update', $promotion->id) }}" method="POST" class="p-6">
@@ -135,4 +130,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/promotions/index.blade.php b/resources/views/admin/promotions/index.blade.php
index 373522813..99807929e 100644
--- a/resources/views/admin/promotions/index.blade.php
+++ b/resources/views/admin/promotions/index.blade.php
@@ -3,23 +3,12 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-gift mr-2"></i>Role Promotions
-                </h1>
-                <div class="flex gap-2">
-                    <a href="{{ route('admin.promotions.statistics') }}" class="px-4 py-2 bg-purple-600 dark:bg-purple-700 text-white rounded-lg hover:bg-purple-700">
-                        <i class="fas fa-chart-bar mr-2"></i>View Statistics
-                    </a>
-                    <a href="{{ route('admin.promotions.create') }}" class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700">
-                        <i class="fas fa-plus mr-2"></i>Add New Promotion
-                    </a>
-                </div>
-            </div>
-        </div>
-
+        <x-admin.page-header title="Role Promotions" icon="fas fa-gift">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.promotions.statistics')" tone="gray" icon="fas fa-chart-bar">View Statistics</x-admin.button>
+                <x-admin.button :href="route('admin.promotions.create')" icon="fas fa-plus">Add New Promotion</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Promotions Table -->
         @if(count($promotions) > 0)
@@ -135,4 +124,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/promotions/show-statistics.blade.php b/resources/views/admin/promotions/show-statistics.blade.php
index f0a55555b..3c4b6a614 100644
--- a/resources/views/admin/promotions/show-statistics.blade.php
+++ b/resources/views/admin/promotions/show-statistics.blade.php
@@ -2,25 +2,12 @@
 
 @section('content')
 <div class="space-y-6">
-    <!-- Header -->
-    <div class="mb-6">
-        <div class="flex justify-between items-center">
-            <div>
-                <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-chart-line mr-2"></i>{{ $promotion->name }} - Statistics
-                </h1>
-                <p class="text-gray-600 dark:text-gray-400 mt-1">Detailed statistics for this promotion</p>
-            </div>
-            <div class="flex gap-2">
-                <a href="{{ route('admin.promotions.statistics') }}" class="px-4 py-2 bg-purple-600 dark:bg-purple-700 text-white rounded-lg hover:bg-purple-700">
-                    <i class="fas fa-chart-bar mr-2"></i>All Statistics
-                </a>
-                <a href="{{ route('admin.promotions.index') }}" class="px-4 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to Promotions
-                </a>
-            </div>
-        </div>
-    </div>
+    <x-admin.page-header :title="$promotion->name.' - Statistics'" icon="fas fa-chart-line" subtitle="Detailed statistics for this promotion">
+        <x-slot:actions>
+            <x-admin.button :href="route('admin.promotions.statistics')" tone="gray" icon="fas fa-chart-bar">All Statistics</x-admin.button>
+            <x-admin.button :href="route('admin.promotions.index')" tone="gray" icon="fas fa-arrow-left">Back to Promotions</x-admin.button>
+        </x-slot:actions>
+    </x-admin.page-header>
 
     <!-- Promotion Info Card -->
     <x-admin.card class="p-6 mb-6">
@@ -294,4 +281,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/promotions/statistics.blade.php b/resources/views/admin/promotions/statistics.blade.php
index 4ba834af4..b8304d72c 100644
--- a/resources/views/admin/promotions/statistics.blade.php
+++ b/resources/views/admin/promotions/statistics.blade.php
@@ -2,20 +2,11 @@
 
 @section('content')
 <div class="space-y-6">
-    <!-- Header -->
-    <div class="mb-6">
-        <div class="flex justify-between items-center">
-            <div>
-                <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-chart-bar mr-2"></i>Promotion Statistics
-                </h1>
-                <p class="text-gray-600 dark:text-gray-400 mt-1">Overview of all promotion activities</p>
-            </div>
-            <a href="{{ route('admin.promotions.index') }}" class="px-4 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-700">
-                <i class="fas fa-arrow-left mr-2"></i>Back to Promotions
-            </a>
-        </div>
-    </div>
+    <x-admin.page-header title="Promotion Statistics" icon="fas fa-chart-bar" subtitle="Overview of all promotion activities">
+        <x-slot:actions>
+            <x-admin.button :href="route('admin.promotions.index')" tone="gray" icon="fas fa-arrow-left">Back to Promotions</x-admin.button>
+        </x-slot:actions>
+    </x-admin.page-header>
 
     <!-- Date Range Filter -->
     <x-admin.card class="p-6 mb-6">
@@ -299,4 +290,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/regexes/category-edit.blade.php b/resources/views/admin/regexes/category-edit.blade.php
index 6f4a1def2..59e268fd2 100644
--- a/resources/views/admin/regexes/category-edit.blade.php
+++ b/resources/views/admin/regexes/category-edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800">
-                    <i class="fas fa-edit mr-2"></i>{{ $title ?? 'Category Regex Edit' }}
-                </h1>
-                <a href="{{ url('/admin/category_regexes-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Category Regex Edit'" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/category_regexes-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Form -->
         <form action="{{ url('/admin/category_regexes-edit?action=submit') }}" method="POST" id="regexForm" class="px-6 py-6">
@@ -185,4 +179,3 @@
 {{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
-
diff --git a/resources/views/admin/regexes/category-list.blade.php b/resources/views/admin/regexes/category-list.blade.php
index 48aa286b6..b3a740758 100644
--- a/resources/views/admin/regexes/category-list.blade.php
+++ b/resources/views/admin/regexes/category-list.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-folder-open mr-2"></i>{{ $title ?? 'Category Regex List' }}
-                </h1>
-                <a href="{{ url('/admin/category-regexes-edit') }}" class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800">
-                    <i class="fas fa-plus mr-2"></i>Add New Regex
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Category Regex List'" icon="fas fa-folder-open">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/category-regexes-edit')" icon="fas fa-plus">Add New Regex</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Info Alert -->
         <div class="px-6 py-4 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-800">
diff --git a/resources/views/admin/regexes/collection-edit.blade.php b/resources/views/admin/regexes/collection-edit.blade.php
index 3ceb76f9d..8f5146c93 100644
--- a/resources/views/admin/regexes/collection-edit.blade.php
+++ b/resources/views/admin/regexes/collection-edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-edit mr-2"></i>{{ $title ?? 'Collection Regex Edit' }}
-                </h1>
-                <a href="{{ url('/admin/collection_regexes-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Collection Regex Edit'" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/collection_regexes-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Form -->
         <form action="{{ url('/admin/collection_regexes-edit?action=submit') }}" method="POST" id="regexForm" class="px-6 py-6">
@@ -159,4 +153,3 @@
 
 {{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
-
diff --git a/resources/views/admin/regexes/collection-list.blade.php b/resources/views/admin/regexes/collection-list.blade.php
index c6ce2d28b..1cf4fde71 100644
--- a/resources/views/admin/regexes/collection-list.blade.php
+++ b/resources/views/admin/regexes/collection-list.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-layer-group mr-2"></i>{{ $title ?? 'Collection Regex List' }}
-                </h1>
-                <a href="{{ url('/admin/collection_regexes-edit') }}" class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800">
-                    <i class="fas fa-plus mr-2"></i>Add New Regex
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Collection Regex List'" icon="fas fa-layer-group">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/collection_regexes-edit')" icon="fas fa-plus">Add New Regex</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Info Alert -->
         <div class="px-6 py-4 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-800">
diff --git a/resources/views/admin/regexes/collection-test.blade.php b/resources/views/admin/regexes/collection-test.blade.php
index 4d668757c..ed4c5f9c1 100644
--- a/resources/views/admin/regexes/collection-test.blade.php
+++ b/resources/views/admin/regexes/collection-test.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800">
-                    <i class="fas fa-flask mr-2"></i>{{ $title ?? 'Collection Regex Test' }}
-                </h1>
-                <a href="{{ url('/admin/collection_regexes-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Collection Regex Test'" icon="fas fa-flask">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/collection_regexes-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Info Alert -->
         <div class="px-6 py-4 bg-blue-50 border-b border-blue-100">
diff --git a/resources/views/admin/regexes/release-naming-edit.blade.php b/resources/views/admin/regexes/release-naming-edit.blade.php
index eb84aba1d..332ad53d2 100644
--- a/resources/views/admin/regexes/release-naming-edit.blade.php
+++ b/resources/views/admin/regexes/release-naming-edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
     <div class="space-y-6">
         <x-admin.card>
-            <!-- Header -->
-            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-                <div class="flex justify-between items-center">
-                    <h1 class="text-2xl font-semibold text-gray-800">
-                        <i class="fas fa-edit mr-2"></i>{{ $title ?? 'Release Naming Regex Edit' }}
-                    </h1>
-                    <a href="{{ url('/admin/release_naming_regexes-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200">
-                        <i class="fas fa-arrow-left mr-2"></i>Back to List
-                    </a>
-                </div>
-            </div>
+            <x-admin.page-header :title="$title ?? 'Release Naming Regex Edit'" icon="fas fa-edit">
+                <x-slot:actions>
+                    <x-admin.button :href="url('/admin/release_naming_regexes-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+                </x-slot:actions>
+            </x-admin.page-header>
 
             <!-- Form -->
             <form action="{{ url('/admin/release_naming_regexes-edit?action=submit') }}" method="POST" id="regexForm" class="px-6 py-6">
@@ -159,4 +153,3 @@
 
     {{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
-
diff --git a/resources/views/admin/regexes/release-naming-list.blade.php b/resources/views/admin/regexes/release-naming-list.blade.php
index e65ddc969..7267a3150 100644
--- a/resources/views/admin/regexes/release-naming-list.blade.php
+++ b/resources/views/admin/regexes/release-naming-list.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-tag mr-2"></i>{{ $title ?? 'Release Naming Regex List' }}
-                </h1>
-                <a href="{{ url('/admin/release_naming_regexes-edit') }}" class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800">
-                    <i class="fas fa-plus mr-2"></i>Add New Regex
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Release Naming Regex List'" icon="fas fa-tag">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/release_naming_regexes-edit')" icon="fas fa-plus">Add New Regex</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Info Alert -->
         <div class="px-6 py-4 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-800">
diff --git a/resources/views/admin/regexes/release-naming-test.blade.php b/resources/views/admin/regexes/release-naming-test.blade.php
index 44066b971..b8c5a7bff 100644
--- a/resources/views/admin/regexes/release-naming-test.blade.php
+++ b/resources/views/admin/regexes/release-naming-test.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800">
-                    <i class="fas fa-flask mr-2"></i>{{ $title ?? 'Release Naming Regex Test' }}
-                </h1>
-                <a href="{{ url('/admin/release_naming_regexes-list') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title ?? 'Release Naming Regex Test'" icon="fas fa-flask">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/release_naming_regexes-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Info Alert -->
         <div class="px-6 py-4 bg-blue-50 border-b border-blue-100">
diff --git a/resources/views/admin/releases/edit.blade.php b/resources/views/admin/releases/edit.blade.php
index e6d6425ee..ce91e009c 100644
--- a/resources/views/admin/releases/edit.blade.php
+++ b/resources/views/admin/releases/edit.blade.php
@@ -4,16 +4,11 @@
 
 @section('content')
 <div class="space-y-6">
-    <div class="mb-6">
-        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Edit Release</h1>
-        <nav class="text-sm text-gray-600 dark:text-gray-400 mt-2">
-            <a href="{{ route('admin.index') }}" class="hover:text-blue-600">Dashboard</a>
-            <i class="fas fa-chevron-right mx-2 text-xs"></i>
-            <a href="{{ route('admin.release-list') }}" class="hover:text-blue-600">Releases</a>
-            <i class="fas fa-chevron-right mx-2 text-xs"></i>
-            <span>Edit</span>
-        </nav>
-    </div>
+    <x-admin.page-header title="Edit Release" icon="fas fa-edit">
+        <x-slot:actions>
+            <x-admin.button :href="route('admin.release-list')" tone="gray" icon="fas fa-arrow-left">Back to Releases</x-admin.button>
+        </x-slot:actions>
+    </x-admin.page-header>
 
     @if(session('success'))
         <div class="bg-green-100 dark:bg-green-900/20 border border-green-400 dark:border-green-900 text-green-700 dark:text-green-300 px-4 py-3 rounded mb-4">
@@ -253,4 +248,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/admin/releases/failed.blade.php b/resources/views/admin/releases/failed.blade.php
index f865b3e2f..ed6a8b1f5 100644
--- a/resources/views/admin/releases/failed.blade.php
+++ b/resources/views/admin/releases/failed.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div x-data="adminReleaseList" class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-exclamation-triangle mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ url('/admin/release-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-list mr-2"></i>View All Releases
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-exclamation-triangle">
+            <x-slot:actions>
+                <x-admin.button :href="url('/admin/release-list')" tone="gray" icon="fas fa-list">View All Releases</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Success/Error/Warning Messages -->
         @if(session('success'))
@@ -181,4 +175,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/roles/add.blade.php b/resources/views/admin/roles/add.blade.php
index 6fe26abe1..8232eabe2 100644
--- a/resources/views/admin/roles/add.blade.php
+++ b/resources/views/admin/roles/add.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                <i class="fas fa-user-shield mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-user-shield" />
 
         <!-- Role Add Form -->
         <form method="post" action="{{ url('admin/role-add') }}" class="p-6">
@@ -214,4 +209,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/roles/edit.blade.php b/resources/views/admin/roles/edit.blade.php
index c7861587f..167fa0a36 100644
--- a/resources/views/admin/roles/edit.blade.php
+++ b/resources/views/admin/roles/edit.blade.php
@@ -3,12 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-user-shield mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-user-shield" />
 
         <!-- Role Edit Form -->
         @if($role)
@@ -254,4 +249,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/shows/add.blade.php b/resources/views/admin/shows/add.blade.php
index a3b9d186d..60beeb692 100644
--- a/resources/views/admin/shows/add.blade.php
+++ b/resources/views/admin/shows/add.blade.php
@@ -13,16 +13,11 @@
 @section('content')
 <div class="space-y-6" x-data="showAddForm" data-config="{{ $configJson }}">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-tv mr-2"></i>{{ $title }}
-            </h1>
-            <a href="{{ url('admin/show-list') }}"
-               class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 text-sm">
-                <i class="fas fa-arrow-left mr-2"></i>Back to TV Shows List
-            </a>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-tv">
+            <x-slot:actions>
+                <x-admin.button :href="url('admin/show-list')" tone="gray" icon="fas fa-arrow-left">Back to TV Shows List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Flash Messages -->
         @if(session('success'))
@@ -162,4 +157,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/shows/edit.blade.php b/resources/views/admin/shows/edit.blade.php
index c99a9c883..e80676a70 100644
--- a/resources/views/admin/shows/edit.blade.php
+++ b/resources/views/admin/shows/edit.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-edit mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ route('admin.show-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-edit">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.show-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Edit Form -->
         <div class="p-6">
@@ -225,4 +219,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/shows/index.blade.php b/resources/views/admin/shows/index.blade.php
index 5afa2c8b8..fdebbdc52 100644
--- a/resources/views/admin/shows/index.blade.php
+++ b/resources/views/admin/shows/index.blade.php
@@ -3,23 +3,14 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-tv mr-2"></i>{{ $title }}
-                </h1>
-                <div class="flex items-center gap-4">
-                    <div class="text-sm text-gray-600 dark:text-gray-400">
-                        Total: {{ $tvshowlist->total() }} shows
-                    </div>
-                    <a href="{{ route('admin.show-add') }}"
-                       class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm">
-                        <i class="fas fa-plus mr-2"></i>Add TV Show
-                    </a>
-                </div>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-tv">
+            <x-slot:actions>
+                <span class="inline-flex min-h-11 items-center rounded-xl border border-gray-200 bg-white/70 px-4 text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800/70 dark:text-gray-200">
+                    {{ number_format($tvshowlist->total()) }} shows
+                </span>
+                <x-admin.button :href="route('admin.show-add')" tone="success" icon="fas fa-plus">Add TV Show</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Search Form -->
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
diff --git a/resources/views/admin/shows/remove.blade.php b/resources/views/admin/shows/remove.blade.php
index 16058e0f2..4efe50867 100644
--- a/resources/views/admin/shows/remove.blade.php
+++ b/resources/views/admin/shows/remove.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-unlink mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ route('admin.show-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to List
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-unlink">
+            <x-slot:actions>
+                <x-admin.button :href="route('admin.show-list')" tone="gray" icon="fas fa-arrow-left">Back to List</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Content -->
         <div class="p-6">
@@ -114,4 +108,3 @@
     </x-admin.card>
 </div>
 @endsection
-
diff --git a/resources/views/admin/site/edit.blade.php b/resources/views/admin/site/edit.blade.php
index c7d231c94..e9c425bc7 100644
--- a/resources/views/admin/site/edit.blade.php
+++ b/resources/views/admin/site/edit.blade.php
@@ -4,12 +4,7 @@
 
 <div class="space-y-6" x-data="tinyMceEditor">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                <i class="fas fa-cog mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-cog" />
 
         <!-- Error Messages -->
         @if(!empty($error))
diff --git a/resources/views/admin/site/stats.blade.php b/resources/views/admin/site/stats.blade.php
index 24c961343..dca6187ae 100644
--- a/resources/views/admin/site/stats.blade.php
+++ b/resources/views/admin/site/stats.blade.php
@@ -2,18 +2,7 @@
 
 @section('content')
 <div class="space-y-6">
-    <!-- Header -->
-    <div class="mb-8">
-        <div class="flex items-center space-x-3">
-            <div class="flex items-center justify-center w-12 h-12 bg-linear-to-br from-blue-400 to-purple-500 rounded-xl shadow-md">
-                <i class="fas fa-chart-bar text-white text-xl"></i>
-            </div>
-            <div>
-                <h1 class="text-3xl font-bold text-gray-700 dark:text-white">{{ $title }}</h1>
-                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Overview of your site's performance and activity</p>
-            </div>
-        </div>
-    </div>
+    <x-admin.page-header :title="$title" icon="fas fa-chart-bar" subtitle="Overview of your site's performance and activity" />
 
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- Top Grabbers -->
@@ -159,4 +148,3 @@
     @endif
 </div>
 @endsection
-
diff --git a/resources/views/admin/site/tmux-edit-content.blade.php b/resources/views/admin/site/tmux-edit-content.blade.php
index 82b983f44..f9ca058cc 100644
--- a/resources/views/admin/site/tmux-edit-content.blade.php
+++ b/resources/views/admin/site/tmux-edit-content.blade.php
@@ -1,11 +1,6 @@
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h1 class="text-2xl font-semibold text-gray-800">
-                <i class="fas fa-terminal mr-2"></i>{{ $title }}
-            </h1>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-terminal" />
 
         <!-- Success Message -->
         @if(session('success'))
diff --git a/resources/views/admin/user-role-history/index.blade.php b/resources/views/admin/user-role-history/index.blade.php
index e0cb47a26..4d560c4ea 100644
--- a/resources/views/admin/user-role-history/index.blade.php
+++ b/resources/views/admin/user-role-history/index.blade.php
@@ -3,14 +3,7 @@
 @section('content')
 <div class="space-y-6">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-history mr-2"></i>{{ $title }}
-                </h1>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-history" />
 
         <!-- Search Filters -->
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
@@ -184,4 +177,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/admin/user-role-history/show.blade.php b/resources/views/admin/user-role-history/show.blade.php
index 762070dd7..5afba3111 100644
--- a/resources/views/admin/user-role-history/show.blade.php
+++ b/resources/views/admin/user-role-history/show.blade.php
@@ -3,22 +3,12 @@
 @section('content')
 <div class="space-y-6">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-history mr-2"></i>{{ $title }}
-                </h1>
-                <div class="flex gap-2">
-                    <a href="{{ url('admin/user-edit?id=' . $user->id) }}" class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800">
-                        <i class="fas fa-edit mr-2"></i>Edit User
-                    </a>
-                    <a href="{{ url('admin/user-role-history') }}" class="px-4 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
-                        <i class="fas fa-arrow-left mr-2"></i>Back to All
-                    </a>
-                </div>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-history">
+            <x-slot:actions>
+                <x-admin.button :href="url('admin/user-edit?id='.$user->id)" icon="fas fa-edit">Edit User</x-admin.button>
+                <x-admin.button :href="url('admin/user-role-history')" tone="gray" icon="fas fa-arrow-left">Back to All</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- User Info -->
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
@@ -170,4 +160,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/admin/users/deleted.blade.php b/resources/views/admin/users/deleted.blade.php
index b8c084fa4..cade28e03 100644
--- a/resources/views/admin/users/deleted.blade.php
+++ b/resources/views/admin/users/deleted.blade.php
@@ -3,17 +3,11 @@
 @section('content')
 <div class="space-y-6" x-data="adminDeletedUsers">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">
-                    <i class="fas fa-trash-restore mr-2"></i>{{ $title }}
-                </h1>
-                <a href="{{ url('admin/user-list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
-                    <i class="fas fa-arrow-left mr-2"></i>Back to Active Users
-                </a>
-            </div>
-        </div>
+        <x-admin.page-header :title="$title" icon="fas fa-trash-restore">
+            <x-slot:actions>
+                <x-admin.button :href="url('admin/user-list')" tone="gray" icon="fas fa-arrow-left">Back to Active Users</x-admin.button>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Search Filters -->
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
@@ -266,4 +260,3 @@
     @csrf
 </form>
 @endsection
-
diff --git a/resources/views/admin/users/edit.blade.php b/resources/views/admin/users/edit.blade.php
index 3ec15ef60..65aa4f92d 100644
--- a/resources/views/admin/users/edit.blade.php
+++ b/resources/views/admin/users/edit.blade.php
@@ -3,19 +3,13 @@
 @section('content')
 <div class="space-y-6">
     <x-admin.card>
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-user mr-2"></i>{{ $title }}
-                </h1>
+        <x-admin.page-header :title="$title" icon="fas fa-user">
+            <x-slot:actions>
                 @if(!empty($user['id']))
-                    <a href="{{ url('admin/user-role-history/' . $user['id']) }}" class="px-4 py-2 bg-purple-600 dark:bg-purple-700 text-white rounded-lg hover:bg-purple-700 dark:hover:bg-purple-800">
-                        <i class="fas fa-history mr-2"></i>View Role History
-                    </a>
+                    <x-admin.button :href="url('admin/user-role-history/'.$user['id'])" tone="gray" icon="fas fa-history">View Role History</x-admin.button>
                 @endif
-            </div>
-        </div>
+            </x-slot:actions>
+        </x-admin.page-header>
 
         <!-- Error Messages -->
         @if(!empty($error))
@@ -173,4 +167,3 @@
     </div>
 </x-admin.card>
 @endsection
-
diff --git a/resources/views/api/apidesc.blade.php b/resources/views/api/apidesc.blade.php
index dbc0f6e31..9d7eefedd 100644
--- a/resources/views/api/apidesc.blade.php
+++ b/resources/views/api/apidesc.blade.php
@@ -1,11 +1,7 @@
 @extends('layouts.main')
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm mb-6">
-    <div class="surface-panel-alt px-6 py-4 border-b rounded-t-lg">
-        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center">
-            <i class="fa fa-code mr-2 text-primary-600 dark:text-primary-400"></i>{{ $title }}
-        </h3>
-    </div>
+    <x-page-header :title="$title" eyebrow="Developer resources" description="Integrate with the index using the Newznab-compatible XML API and authenticated download endpoints." icon="fas fa-code" />
     <div class="p-6">
         <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 dark:text-gray-300">
             Here lives the documentation for the API for accessing NZB and index data. API functions require your API key
diff --git a/resources/views/api/apiv2desc.blade.php b/resources/views/api/apiv2desc.blade.php
index 8cc5e471b..7236b3020 100644
--- a/resources/views/api/apiv2desc.blade.php
+++ b/resources/views/api/apiv2desc.blade.php
@@ -2,11 +2,7 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm mb-6">
-    <div class="surface-panel-alt px-6 py-4 border-b rounded-t-lg">
-        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center">
-            <i class="fa fa-code mr-2 text-primary-600 dark:text-primary-400"></i>{{ $title }}
-        </h3>
-    </div>
+    <x-page-header :title="$title" eyebrow="Developer resources" description="Build JSON integrations with the versioned API, authenticated search, and capability endpoints." icon="fas fa-code-branch" />
     <div class="p-6">
         <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 dark:text-gray-300">
             Here lives the documentation for the API v2 for accessing NZB and index data. API functions can be called by providing an API token.
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index 8baeb2bca..3ea108659 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -2,20 +2,12 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav aria-label="breadcrumb">
-            <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
-                <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                <li><a href="{{ url('/browse/Books') }}" class="hover:text-blue-600">Books</a></li>
-                @if(!empty($categorytitle) && $categorytitle !== 'All')
-                    <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                    <li class="text-gray-500">{{ $categorytitle }}</li>
-                @endif
-            </ol>
-        </nav>
-    </div>
+    <x-page-header title="Books" :current="!empty($categorytitle) ? $categorytitle : 'All books'" eyebrow="Discover and download" description="Browse books, compare releases, and narrow the library by author, title, or category." icon="fas fa-book-open">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-book" aria-hidden="true"></i>{{ number_format($results->total()) }} books</span>
+            <span class="workspace-hero__stat"><i class="fas fa-folder-open" aria-hidden="true"></i>{{ $categorytitle ?: 'All books' }}</span>
+        </x-slot:stats>
+    </x-page-header>
 
     <div class="px-6 py-4">
         <!-- Search Filters -->
diff --git a/resources/views/browse/index.blade.php b/resources/views/browse/index.blade.php
index d8e797988..170f057c3 100644
--- a/resources/views/browse/index.blade.php
+++ b/resources/views/browse/index.blade.php
@@ -7,21 +7,19 @@
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm transition-colors duration-200">
     @php
-        $crumbs = [['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home']];
-        $currentCategoryLabel = isset($catname) && is_string($catname) && strtolower($catname) === 'all'
-            ? 'All'
-            : ($catname ?? 'All');
-        if (isset($parentcat) && $parentcat != '') {
-            $crumbs[] = ['label' => $parentcat, 'url' => url('/browse/' . ($parentcat == 'music' ? 'Audio' : $parentcat))];
-            if (isset($catname) && $catname != '' && $catname != 'all') {
-                $crumbs[] = ['label' => $catname];
-            }
-        } else {
-            $crumbs[] = ['label' => 'Browse', 'url' => route('All')];
-            $crumbs[] = ['label' => $currentCategoryLabel];
-        }
+        $currentCategoryLabel = match (true) {
+            is_object($catname ?? null) => $catname->title ?? 'All',
+            is_string($catname ?? null) && strtolower($catname) !== 'all' => $catname,
+            default => 'All',
+        };
+        $browseTitle = !empty($parentcat) && $parentcat !== 'All' ? $parentcat : 'Browse releases';
     @endphp
-    <x-breadcrumb :items="$crumbs" />
+    <x-page-header :title="$browseTitle" :current="$currentCategoryLabel" eyebrow="Discover and download" description="Browse the latest indexed releases, refine the list, and send selections to your download basket." icon="fas fa-compass">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-layer-group" aria-hidden="true"></i>{{ number_format($results->total()) }} releases</span>
+            <span class="workspace-hero__stat"><i class="fas fa-folder-open" aria-hidden="true"></i>{{ $currentCategoryLabel }}</span>
+        </x-slot:stats>
+    </x-page-header>
 
     @if($results->count() > 0)
         @php
diff --git a/resources/views/browsegroup/index.blade.php b/resources/views/browsegroup/index.blade.php
index 9ce206bf0..642038658 100644
--- a/resources/views/browsegroup/index.blade.php
+++ b/resources/views/browsegroup/index.blade.php
@@ -1,23 +1,11 @@
-<!-- Breadcrumb -->
-<div class="mb-6">
-    <nav aria-label="breadcrumb">
-        <ol class="flex items-center space-x-2 text-sm">
-            <li>
-                <a href="{{ url($site['home_link']) }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:text-blue-400 transition-colors">
-                    Home
-                </a>
-            </li>
-            <li class="text-gray-400">/</li>
-            <li>
-                <a href="{{ url('/browse') }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:text-blue-400 transition-colors">
-                    Browse
-                </a>
-            </li>
-            <li class="text-gray-400">/</li>
-            <li class="text-gray-900 dark:text-gray-100 font-medium">Groups</li>
-        </ol>
-    </nav>
-</div>
+<x-page-header title="Browse groups" eyebrow="Explore Usenet" description="Search indexed groups and jump directly into their available releases." icon="fas fa-layer-group">
+    <x-slot:stats>
+        <span class="workspace-hero__stat"><i class="fas fa-list" aria-hidden="true"></i>{{ isset($results) ? number_format($results->total()) : 0 }} groups</span>
+        @if(!empty($search))
+            <span class="workspace-hero__stat"><i class="fas fa-filter" aria-hidden="true"></i>Filtered by {{ $search }}</span>
+        @endif
+    </x-slot:stats>
+</x-page-header>
 
 {!! $site['adbrowse'] ?? '' !!}
 
@@ -138,4 +126,3 @@
         </div>
     </div>
 @endif
-
diff --git a/resources/views/cart/index.blade.php b/resources/views/cart/index.blade.php
index 541487f6a..f24f983ce 100644
--- a/resources/views/cart/index.blade.php
+++ b/resources/views/cart/index.blade.php
@@ -2,16 +2,11 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="surface-panel-alt px-6 py-4 border-b">
-        <nav aria-label="breadcrumb">
-            <ol class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
-                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-primary-600 dark:hover:text-primary-400">Home</a></li>
-                <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                <li class="text-gray-500 dark:text-gray-400">Download Basket</li>
-            </ol>
-        </nav>
-    </div>
+    <x-page-header title="Download basket" eyebrow="Your saved releases" description="Review saved NZBs, download selected releases, or use the private RSS feed with your downloader." icon="fas fa-basket-shopping">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-box-archive" aria-hidden="true"></i>{{ number_format(count($results)) }} saved</span>
+        </x-slot:stats>
+    </x-page-header>
 
     <div class="px-6 py-4">
 
diff --git a/resources/views/components/admin/action-bar.blade.php b/resources/views/components/admin/action-bar.blade.php
index ca978285b..776e61194 100644
--- a/resources/views/components/admin/action-bar.blade.php
+++ b/resources/views/components/admin/action-bar.blade.php
@@ -1,5 +1,5 @@
 {{-- Dense action/filter bar for admin list pages --}}
-<div {{ $attributes->merge(['class' => 'px-4 sm:px-6 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700']) }}>
+<div {{ $attributes->merge(['class' => 'surface-panel-alt border-b px-4 py-3 sm:px-6']) }}>
     <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
         {{ $slot }}
     </div>
diff --git a/resources/views/components/admin/button.blade.php b/resources/views/components/admin/button.blade.php
index f2ac61160..985630479 100644
--- a/resources/views/components/admin/button.blade.php
+++ b/resources/views/components/admin/button.blade.php
@@ -15,7 +15,7 @@
         'warning' => 'bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500',
     ][$tone] ?? 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500';
 
-    $base = 'inline-flex min-h-9 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 '.$classes;
+    $base = 'inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 '.$classes;
 @endphp
 
 @if($href)
diff --git a/resources/views/components/admin/data-table.blade.php b/resources/views/components/admin/data-table.blade.php
index 6f63c29f3..b8b64cc26 100644
--- a/resources/views/components/admin/data-table.blade.php
+++ b/resources/views/components/admin/data-table.blade.php
@@ -5,11 +5,11 @@
     'striped' => false,
 ])
 
-<div class="admin-data-table-wrap overflow-x-auto overscroll-x-contain">
+<div class="admin-data-table-wrap overflow-x-auto overscroll-x-contain rounded-xl border shadow-sm">
     <table {{ $attributes->merge(['class' => 'min-w-full table-auto divide-y divide-gray-200 dark:divide-gray-700']) }}>
         @if(isset($head))
             <thead @class([
-                'bg-gray-50 dark:bg-gray-900',
+                'admin-data-table__head',
                 'sticky top-0 z-10' => $sticky,
             ])>
                 <tr>
diff --git a/resources/views/components/admin/empty-state.blade.php b/resources/views/components/admin/empty-state.blade.php
index 6b5f00074..063e44a3b 100644
--- a/resources/views/components/admin/empty-state.blade.php
+++ b/resources/views/components/admin/empty-state.blade.php
@@ -4,9 +4,9 @@
     'message' => null,
 ])
 
-<div {{ $attributes->merge(['class' => 'px-6 py-12 text-center']) }}>
-    <i class="{{ $icon }} mb-4 text-4xl text-gray-400 dark:text-gray-600" aria-hidden="true"></i>
-    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ $title }}</h3>
+<div {{ $attributes->merge(['class' => 'empty-state px-6 py-14 text-center']) }}>
+    <span class="empty-state__icon mb-5 inline-flex h-16 w-16 items-center justify-center rounded-2xl" aria-hidden="true"><i class="{{ $icon }} text-2xl"></i></span>
+    <h3 class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100">{{ $title }}</h3>
     @if($message)
         <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>
     @endif
diff --git a/resources/views/components/admin/filter-panel.blade.php b/resources/views/components/admin/filter-panel.blade.php
index 33697f291..5862ed109 100644
--- a/resources/views/components/admin/filter-panel.blade.php
+++ b/resources/views/components/admin/filter-panel.blade.php
@@ -1,4 +1,4 @@
 {{-- Compact filter panel for admin list pages --}}
-<div {{ $attributes->merge(['class' => 'px-4 sm:px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700']) }}>
+<div {{ $attributes->merge(['class' => 'surface-panel-alt border-b px-4 py-4 sm:px-6']) }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/admin/info-alert.blade.php b/resources/views/components/admin/info-alert.blade.php
index 4c30fda2b..e60e6e2a7 100644
--- a/resources/views/components/admin/info-alert.blade.php
+++ b/resources/views/components/admin/info-alert.blade.php
@@ -1,12 +1,13 @@
 {{-- Admin blue info alert box --}}
-<div class="px-6 py-4 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-800">
+<div class="border-b border-blue-100 bg-blue-50/80 px-6 py-4 dark:border-blue-800 dark:bg-blue-900/20" role="note">
     <div class="flex">
         <div class="shrink-0">
-            <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 text-xl mr-3"></i>
+            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-blue-100 text-blue-600 dark:bg-blue-900/60 dark:text-blue-300">
+                <i class="fas fa-info-circle" aria-hidden="true"></i>
+            </span>
         </div>
-        <div class="text-sm text-blue-700 dark:text-blue-300">
+        <div class="ml-3 self-center text-sm leading-6 text-blue-800 dark:text-blue-200">
             {{ $slot }}
         </div>
     </div>
 </div>
-
diff --git a/resources/views/components/admin/page-header.blade.php b/resources/views/components/admin/page-header.blade.php
index ae2f52bfd..c6ea22c71 100644
--- a/resources/views/components/admin/page-header.blade.php
+++ b/resources/views/components/admin/page-header.blade.php
@@ -5,7 +5,7 @@
     'subtitle' => null,
 ])
 
-<div {{ $attributes->merge(['class' => 'admin-page-header px-4 py-5 sm:px-6']) }}>
+<header {{ $attributes->merge(['class' => 'admin-page-header workspace-page-header overflow-hidden rounded-2xl px-5 py-6 shadow-sm sm:px-7']) }}>
     <div class="flex flex-wrap items-start justify-between gap-4">
         <div class="min-w-0">
             <h1 class="flex items-center gap-3 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
@@ -26,4 +26,4 @@
             </div>
         @endif
     </div>
-</div>
+</header>
diff --git a/resources/views/components/admin/pagination.blade.php b/resources/views/components/admin/pagination.blade.php
index d75ed3bd9..1bd5165d6 100644
--- a/resources/views/components/admin/pagination.blade.php
+++ b/resources/views/components/admin/pagination.blade.php
@@ -10,8 +10,7 @@
             ? 'border-b border-gray-200 dark:border-gray-700'
             : 'border-t border-gray-200 dark:border-gray-700';
     @endphp
-    <div class="px-6 py-4 {{ $borderClass }} bg-gray-50 dark:bg-gray-900">
+    <nav class="surface-panel-alt px-6 py-4 {{ $borderClass }}" aria-label="Pagination">
         {{ $paginator->onEachSide(5)->links() }}
-    </div>
+    </nav>
 @endif
-
diff --git a/resources/views/components/admin/search-bar.blade.php b/resources/views/components/admin/search-bar.blade.php
index a557b08c0..1fd7b8f77 100644
--- a/resources/views/components/admin/search-bar.blade.php
+++ b/resources/views/components/admin/search-bar.blade.php
@@ -1,5 +1,4 @@
 {{-- Admin search/filter bar container --}}
-<div {{ $attributes->merge(['class' => 'px-6 py-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700']) }}>
+<div {{ $attributes->merge(['class' => 'surface-panel-alt border-b px-4 py-4 sm:px-6']) }}>
     {{ $slot }}
 </div>
-
diff --git a/resources/views/components/admin/th.blade.php b/resources/views/components/admin/th.blade.php
index 2a58a46de..5505754ff 100644
--- a/resources/views/components/admin/th.blade.php
+++ b/resources/views/components/admin/th.blade.php
@@ -13,6 +13,6 @@
     $widthClass = $width ? "w-{$width}" : '';
 @endphp
 
-<th {{ $attributes->merge(['class' => "px-4 py-2.5 {$alignClass} text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide {$widthClass}"]) }}>
+<th {{ $attributes->merge(['class' => "px-4 py-3 {$alignClass} text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider {$widthClass}"]) }}>
     {{ $slot }}
 </th>
diff --git a/resources/views/components/breadcrumb.blade.php b/resources/views/components/breadcrumb.blade.php
index 347b9185c..70a9eaf41 100644
--- a/resources/views/components/breadcrumb.blade.php
+++ b/resources/views/components/breadcrumb.blade.php
@@ -2,9 +2,9 @@
     'items' => []
 ])
 
-<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+<div class="breadcrumb-bar border-b border-gray-200 px-5 py-3.5 dark:border-gray-700 sm:px-6">
     <nav class="flex" aria-label="Breadcrumb">
-        <ol class="inline-flex items-center space-x-1 md:space-x-2 text-sm">
+        <ol class="inline-flex flex-wrap items-center gap-1.5 text-sm">
             @foreach($items as $index => $item)
                 @if($index > 0)
                     <li aria-hidden="true">
@@ -15,14 +15,14 @@
                     @if(!empty($item['url']))
                         <a href="{{ $item['url'] }}" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center transition">
                             @if(!empty($item['icon']))
-                                <i class="{{ $item['icon'] }} mr-1.5"></i>
+                                <i class="{{ $item['icon'] }} mr-1.5" aria-hidden="true"></i>
                             @endif
                             {{ $item['label'] }}
                         </a>
                     @else
                         <span class="text-gray-500 dark:text-gray-400 inline-flex items-center">
                             @if(!empty($item['icon']))
-                                <i class="{{ $item['icon'] }} mr-1.5"></i>
+                                <i class="{{ $item['icon'] }} mr-1.5" aria-hidden="true"></i>
                             @endif
                             {{ $item['label'] }}
                         </span>
@@ -32,4 +32,3 @@
         </ol>
     </nav>
 </div>
-
diff --git a/resources/views/components/button-group.blade.php b/resources/views/components/button-group.blade.php
index 5d7ca2819..2a1fb3bad 100644
--- a/resources/views/components/button-group.blade.php
+++ b/resources/views/components/button-group.blade.php
@@ -1,4 +1,4 @@
 @blaze(fold: true)
-<div class="flex items-center [&_a:first-child]:rounded-r-none [&_a:last-child]:rounded-l-none" role="group">
+<div class="inline-flex items-center overflow-hidden rounded-xl border border-gray-200 shadow-sm dark:border-gray-700 [&_a]:rounded-none [&_button]:rounded-none" role="group">
     {{ $slot }}
 </div>
diff --git a/resources/views/components/button-link.blade.php b/resources/views/components/button-link.blade.php
index 6e23cb823..86582f6c1 100644
--- a/resources/views/components/button-link.blade.php
+++ b/resources/views/components/button-link.blade.php
@@ -6,13 +6,13 @@
 ])
 
 @php
-    $base = 'inline-flex items-center justify-center gap-2 rounded-lg border font-semibold transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900';
+    $base = 'inline-flex items-center justify-center gap-2 rounded-xl border font-semibold shadow-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900';
 
     $sizes = [
-        'sm' => 'px-3 py-1.5 text-xs',
-        'md' => 'px-4 py-2 text-sm',
-        'lg' => 'px-6 py-3 text-base',
-        'icon' => 'h-9 w-9 p-0 text-sm',
+        'sm' => 'min-h-9 px-3 py-1.5 text-xs',
+        'md' => 'min-h-11 px-4 py-2 text-sm',
+        'lg' => 'min-h-12 px-6 py-3 text-base',
+        'icon' => 'h-11 w-11 p-0 text-sm',
     ];
 
     $variants = [
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
index 45388b729..d16222eb3 100644
--- a/resources/views/components/button.blade.php
+++ b/resources/views/components/button.blade.php
@@ -7,13 +7,13 @@
 ])
 
 @php
-    $base = 'inline-flex items-center justify-center gap-2 rounded-lg border font-semibold transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-60';
+    $base = 'inline-flex items-center justify-center gap-2 rounded-xl border font-semibold shadow-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-60';
 
     $sizes = [
-        'sm' => 'px-3 py-1.5 text-xs',
-        'md' => 'px-4 py-2 text-sm',
-        'lg' => 'px-6 py-3 text-base',
-        'icon' => 'h-9 w-9 p-0 text-sm',
+        'sm' => 'min-h-9 px-3 py-1.5 text-xs',
+        'md' => 'min-h-11 px-4 py-2 text-sm',
+        'lg' => 'min-h-12 px-6 py-3 text-base',
+        'icon' => 'h-11 w-11 p-0 text-sm',
     ];
 
     $variants = [
diff --git a/resources/views/components/cover-release-list.blade.php b/resources/views/components/cover-release-list.blade.php
index a8ccd6364..12037d8a2 100644
--- a/resources/views/components/cover-release-list.blade.php
+++ b/resources/views/components/cover-release-list.blade.php
@@ -20,9 +20,9 @@
 @endphp
 
 @if(!empty($displayReleases))
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
-            Available Releases
+    <div class="mt-4 border-t border-gray-200 pt-4 dark:border-gray-700">
+        <h4 class="mb-2 text-sm font-semibold text-gray-800 dark:text-gray-200">
+            <i class="fas fa-box-open mr-1.5 text-primary-500" aria-hidden="true"></i>Available releases
             @if($totalReleaseCount > $maxReleases)
                 <span class="text-xs font-normal text-gray-500">(Showing {{ $maxReleases }} of {{ $totalReleaseCount }})</span>
             @endif
@@ -30,14 +30,14 @@
         <div class="space-y-2">
             @foreach($displayReleases as $release)
                 @if(!empty($release->searchname))
-                    <div class="surface-panel-alt rounded-lg p-2 border">
+                    <div class="catalog-release-row surface-panel-alt rounded-xl border p-3">
                         <div class="space-y-2">
                             <div class="{{ $shouldShowCheckbox ? 'flex items-start justify-between gap-2' : '' }}">
                                 <a href="{{ url('/details/' . $release->guid) }}" class="text-sm text-gray-800 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 font-medium block break-all {{ $shouldShowCheckbox ? 'flex-1' : '' }}" title="{{ $release->searchname }}">
                                     {{ $release->searchname }}
                                 </a>
                                 @if($shouldShowCheckbox)
-                                    <label class="inline-flex items-center shrink-0">
+                                    <label class="inline-flex shrink-0 items-center" aria-label="Select {{ $release->searchname }}">
                                         <input type="checkbox" class="chkRelease form-checkbox h-4 w-4 text-primary-600" value="{{ $release->guid }}" name="release[]" @change="onCheckboxChange()">
                                     </label>
                                 @endif
@@ -46,12 +46,12 @@
                             <div class="flex flex-wrap items-center gap-1.5">
                                 @if(isset($release->size))
                                     <span class="release-chip">
-                                        <i class="fas fa-hdd mr-1"></i>{{ number_format($release->size / 1073741824, 2) }} GB
+                                        <i class="fas fa-hard-drive mr-1" aria-hidden="true"></i>{{ number_format($release->size / 1073741824, 2) }} GB
                                     </span>
                                 @endif
                                 @if(isset($release->postdate))
                                     <span class="release-chip">
-                                        <i class="fas fa-calendar-alt mr-1"></i>{{ date('M d, Y H:i', strtotime($release->postdate)) }}
+                                        <i class="fas fa-calendar-days mr-1" aria-hidden="true"></i>{{ date('M d, Y H:i', strtotime($release->postdate)) }}
                                     </span>
                                 @endif
                                 @if($shouldShowAddDate && isset($release->adddate))
diff --git a/resources/views/components/cover-results-toolbar.blade.php b/resources/views/components/cover-results-toolbar.blade.php
index 676d37dc0..50e3a9cbe 100644
--- a/resources/views/components/cover-results-toolbar.blade.php
+++ b/resources/views/components/cover-results-toolbar.blade.php
@@ -14,10 +14,10 @@
     $totalResults = is_object($results) && method_exists($results, 'total') ? $results->total() : count($results);
 @endphp
 
-<div class="mb-4 flex flex-wrap justify-between items-center gap-4">
-    <div class="flex items-center gap-4">
-        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
-            <i class="{{ $icon }} mr-2 text-blue-600 dark:text-blue-400"></i>
+<div class="catalog-results-toolbar mb-4 flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white px-4 py-3 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex-row lg:items-center lg:justify-between sm:px-5">
+    <div class="flex flex-wrap items-center gap-4">
+        <h2 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
+            <i class="{{ $icon }} mr-2 text-primary-600 dark:text-primary-400" aria-hidden="true"></i>
             {{ $title }}
         </h2>
         <x-view-toggle
@@ -28,10 +28,10 @@
             :shows="false"
         />
     </div>
-    <div class="flex items-center gap-4">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
         <x-inline-search :placeholder="$searchPlaceholder" :category="$searchCategory" />
         <span class="text-sm text-gray-600 dark:text-gray-400">
-            {{ $totalResults }} {{ $totalLabel }}
+            <span class="font-semibold text-gray-800 dark:text-gray-200">{{ number_format($totalResults) }}</span> {{ $totalLabel }}
         </span>
     </div>
 </div>
diff --git a/resources/views/components/empty-state.blade.php b/resources/views/components/empty-state.blade.php
index e35f1d979..2329395d4 100644
--- a/resources/views/components/empty-state.blade.php
+++ b/resources/views/components/empty-state.blade.php
@@ -7,19 +7,18 @@
     'actionIcon' => null,
 ])
 
-<div class="px-6 py-12 text-center">
-    <div class="inline-flex items-center justify-center w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full mb-6">
-        <i class="{{ $icon }} text-gray-400 dark:text-gray-500 text-4xl"></i>
+<div class="empty-state px-6 py-14 text-center">
+    <div class="empty-state__icon mb-6 inline-flex h-20 w-20 items-center justify-center rounded-2xl">
+        <i class="{{ $icon }} text-3xl" aria-hidden="true"></i>
     </div>
-    <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">{{ $title }}</h3>
-    <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto mb-4">{{ $message }}</p>
+    <h3 class="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">{{ $title }}</h3>
+    <p class="mx-auto mb-5 max-w-md text-sm leading-6 text-gray-500 dark:text-gray-400">{{ $message }}</p>
     @if($actionUrl && $actionLabel)
-        <a href="{{ $actionUrl }}" class="inline-flex items-center px-4 py-2 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition shadow-sm">
+        <a href="{{ $actionUrl }}" class="inline-flex min-h-11 items-center gap-2 rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:bg-primary-700 dark:hover:bg-primary-600">
             @if($actionIcon)
-                <i class="{{ $actionIcon }} mr-2"></i>
+                <i class="{{ $actionIcon }}" aria-hidden="true"></i>
             @endif
             {{ $actionLabel }}
         </a>
     @endif
 </div>
-
diff --git a/resources/views/components/form/group.blade.php b/resources/views/components/form/group.blade.php
index 1148f3248..47ea4c282 100644
--- a/resources/views/components/form/group.blade.php
+++ b/resources/views/components/form/group.blade.php
@@ -1,7 +1,7 @@
 @blaze
 @props(['label', 'for', 'help' => null])
 
-<div class="space-y-1">
+<div class="space-y-2">
     @if($label)
         <x-label :for="$for" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
             {{ $label }}
@@ -11,7 +11,6 @@
     {{ $slot }}
 
     @if($help)
-        <small class="text-gray-600 dark:text-gray-400 text-xs">{{ $help }}</small>
+        <small class="block text-xs leading-5 text-gray-600 dark:text-gray-400">{{ $help }}</small>
     @endif
 </div>
-
diff --git a/resources/views/components/inline-search.blade.php b/resources/views/components/inline-search.blade.php
index 76df33726..962d4ec30 100644
--- a/resources/views/components/inline-search.blade.php
+++ b/resources/views/components/inline-search.blade.php
@@ -11,21 +11,22 @@
     }
 @endphp
 
-<div class="inline-search-widget flex items-center gap-2" data-base-url="{{ $baseUrl }}">
-    <div class="relative">
-        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-            <i class="fas fa-search text-gray-400 dark:text-gray-500 text-sm"></i>
+<div class="inline-search-widget min-w-0" data-base-url="{{ $baseUrl }}">
+    <div class="inline-search-widget__field relative min-w-0">
+        <div class="inline-search-widget__icon pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <i class="fas fa-search text-sm text-gray-400 dark:text-gray-500" aria-hidden="true"></i>
         </div>
         <input type="text"
                data-role="inline-search-input"
                placeholder="{{ $placeholder }}"
-               class="w-48 lg:w-56 pl-9 pr-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition"
+               class="inline-search-widget__input min-h-10 w-full rounded-xl border border-gray-300 bg-white py-2 pl-10 pr-3 text-sm text-gray-900 shadow-sm transition placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+               aria-label="{{ $placeholder }}"
                autocomplete="off">
     </div>
     <button type="button"
             data-role="inline-search-btn"
-            class="px-3 py-1.5 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition text-sm">
-        <i class="fas fa-search"></i>
+            class="inline-search-widget__button inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary-600 text-sm text-white shadow-sm transition hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:bg-primary-700 dark:hover:bg-primary-600"
+            aria-label="Search">
+        <i class="fas fa-search" aria-hidden="true"></i>
     </button>
 </div>
-
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
index 0c71af7e2..ff9483b9a 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/input.blade.php
@@ -1,2 +1,2 @@
 @blaze(fold: true)
-<input {{ $attributes->merge(['type' => 'text', 'class' => 'w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm transition placeholder:text-gray-400 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500']) }}>
+<input {{ $attributes->merge(['type' => 'text', 'class' => 'min-h-11 w-full rounded-xl border border-gray-300 bg-white px-3.5 py-2.5 text-gray-900 shadow-sm transition placeholder:text-gray-400 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500']) }}>
diff --git a/resources/views/components/label.blade.php b/resources/views/components/label.blade.php
index 61ea661ac..3b3acc6e1 100644
--- a/resources/views/components/label.blade.php
+++ b/resources/views/components/label.blade.php
@@ -1,4 +1,4 @@
 @blaze(fold: true)
-<label {{ $attributes->merge(['class' => 'mb-1 block w-full text-sm font-medium text-gray-700 dark:text-gray-300']) }}>
+<label {{ $attributes->merge(['class' => 'mb-1.5 block w-full text-sm font-semibold text-gray-700 dark:text-gray-300']) }}>
     {{ $slot }}
 </label>
diff --git a/resources/views/components/page-header.blade.php b/resources/views/components/page-header.blade.php
index 2d1a39f06..77aed1f91 100644
--- a/resources/views/components/page-header.blade.php
+++ b/resources/views/components/page-header.blade.php
@@ -2,26 +2,56 @@
     'title',
     'description' => null,
     'icon' => null,
+    'eyebrow' => 'Explore',
+    'current' => null,
 ])
 
-<div {{ $attributes->merge(['class' => 'app-page-header px-4 py-5 sm:px-6 sm:py-6']) }}>
-    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div class="min-w-0">
-            <h1 class="flex items-center gap-3 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white sm:text-3xl">
+<header {{ $attributes->merge(['class' => 'app-page-header workspace-hero relative mb-6 overflow-hidden rounded-2xl px-5 py-4 text-white shadow-lg sm:px-7 sm:py-5']) }}>
+    <div class="workspace-hero__glow workspace-hero__glow--one" aria-hidden="true"></div>
+    <div class="workspace-hero__glow workspace-hero__glow--two" aria-hidden="true"></div>
+
+    <div class="relative z-10 flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+        <div class="min-w-0 max-w-3xl xl:flex-1">
+            <nav aria-label="Breadcrumb" class="mb-2 text-sm text-white/70">
+                <ol class="flex flex-wrap items-center gap-2">
+                    <li><a href="{{ url('/') }}" class="rounded hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70">Home</a></li>
+                    <li aria-hidden="true"><i class="fas fa-chevron-right text-[0.65rem]"></i></li>
+                    <li aria-current="page" class="font-medium text-white">{{ $current ?? $title }}</li>
+                </ol>
+            </nav>
+
+            <div class="flex items-center gap-3">
                 @if($icon)
-                    <i class="{{ $icon }} text-primary-600 dark:text-primary-400" aria-hidden="true"></i>
+                    <span class="workspace-hero__icon" aria-hidden="true"><i class="{{ $icon }}"></i></span>
                 @endif
-                <span class="break-words">{{ $title }}</span>
-            </h1>
+                <div>
+                    @if($eyebrow)
+                        <p class="mb-1 text-xs font-semibold uppercase tracking-[0.18em] text-white/65">{{ $eyebrow }}</p>
+                    @endif
+                    <h1 class="break-words text-3xl font-bold tracking-tight text-white sm:text-4xl">{{ $title }}</h1>
+                </div>
+            </div>
+
             @if($description)
-                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 sm:text-base">{{ $description }}</p>
+                <p class="mt-2 max-w-2xl text-sm leading-5 text-white/75 sm:text-base">{{ $description }}</p>
             @endif
+
         </div>
 
-        @isset($actions)
-            <div class="app-page-header__actions flex shrink-0 flex-wrap items-center gap-2">
-                {{ $actions }}
+        @if(isset($stats) || isset($actions))
+            <div class="app-page-header__meta flex min-w-0 flex-wrap items-center gap-3 xl:max-w-[48%] xl:justify-end">
+                @isset($stats)
+                    <div class="flex flex-wrap gap-2 text-sm xl:justify-end">
+                        {{ $stats }}
+                    </div>
+                @endisset
+
+                @isset($actions)
+                    <div class="app-page-header__actions flex flex-wrap items-center gap-3">
+                        {{ $actions }}
+                    </div>
+                @endisset
             </div>
-        @endisset
+        @endif
     </div>
-</div>
+</header>
diff --git a/resources/views/components/panel.blade.php b/resources/views/components/panel.blade.php
index a03a5894b..572569fd0 100644
--- a/resources/views/components/panel.blade.php
+++ b/resources/views/components/panel.blade.php
@@ -18,6 +18,6 @@
     ];
 @endphp
 
-<div {{ $attributes->merge(['class' => 'rounded-xl '.($surfaces[$variant] ?? $surfaces['default']).' '.($paddings[$padding] ?? $paddings['md'])]) }}>
+<div {{ $attributes->merge(['class' => 'rounded-2xl '.($surfaces[$variant] ?? $surfaces['default']).' '.($paddings[$padding] ?? $paddings['md'])]) }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/release-category-link.blade.php b/resources/views/components/release-category-link.blade.php
new file mode 100644
index 000000000..2655115aa
--- /dev/null
+++ b/resources/views/components/release-category-link.blade.php
@@ -0,0 +1,40 @@
+@props([
+    'categoryName' => null,
+    'parentCategory' => null,
+    'subCategory' => null,
+])
+
+@php
+    $categoryLabel = trim((string) ($categoryName ?: 'Other'));
+    $resolvedParentCategory = trim((string) ($parentCategory ?? ''));
+    $resolvedSubCategory = trim((string) ($subCategory ?? ''));
+
+    if ($resolvedParentCategory === '' || $resolvedSubCategory === '') {
+        $categoryParts = preg_split('/\s*>\s*/u', $categoryLabel, 2);
+
+        if (is_array($categoryParts) && count($categoryParts) === 2) {
+            $resolvedParentCategory = trim($categoryParts[0]);
+            $resolvedSubCategory = trim($categoryParts[1]);
+        }
+    }
+
+    $categoryUrl = $resolvedParentCategory !== '' && $resolvedSubCategory !== ''
+        ? route('browse', [
+            'parentCategory' => $resolvedParentCategory,
+            'id' => $resolvedSubCategory,
+        ])
+        : null;
+
+    $categoryClasses = 'inline-flex items-center rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-medium text-primary-800 transition dark:bg-primary-900/50 dark:text-primary-200';
+@endphp
+
+@if($categoryUrl !== null)
+    <a href="{{ $categoryUrl }}"
+       class="{{ $categoryClasses }} hover:bg-primary-200 hover:text-primary-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:hover:bg-primary-800 dark:hover:text-white"
+       title="Browse releases in {{ $categoryLabel }}"
+       aria-label="Browse releases in {{ $categoryLabel }}">
+        {{ $categoryLabel }}
+    </a>
+@else
+    <span class="{{ $categoryClasses }}">{{ $categoryLabel }}</span>
+@endif
diff --git a/resources/views/components/release-results.blade.php b/resources/views/components/release-results.blade.php
index 099148fe7..c20835012 100644
--- a/resources/views/components/release-results.blade.php
+++ b/resources/views/components/release-results.blade.php
@@ -135,9 +135,11 @@
                         </div>
                     </td>
                     <td class="px-3 py-4 whitespace-nowrap">
-                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
-                            {{ $result->category_name ?? 'Other' }}
-                        </span>
+                        <x-release-category-link
+                            :category-name="$result->category_name ?? null"
+                            :parent-category="$result->parent_category ?? null"
+                            :sub-category="$result->sub_category ?? null"
+                        />
                     </td>
                     <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
                         {{ $dateValue ? userDateDiffForHumans($dateValue) : 'Unknown' }}
@@ -238,9 +240,11 @@
                         @endif
                     </div>
                     <div class="flex flex-wrap items-center gap-2 mt-2 text-sm text-gray-600 dark:text-gray-400">
-                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
-                            {{ $result->category_name ?? 'Other' }}
-                        </span>
+                        <x-release-category-link
+                            :category-name="$result->category_name ?? null"
+                            :parent-category="$result->parent_category ?? null"
+                            :sub-category="$result->sub_category ?? null"
+                        />
                         <span><i class="fas fa-clock mr-1"></i>{{ $dateValue ? userDateDiffForHumans($dateValue) : 'Unknown' }}</span>
                         <span><i class="fas fa-hdd mr-1"></i>{{ $sizeLabel }}</span>
                         <span><i class="fas fa-file mr-1"></i>{{ $result->totalpart ?? 0 }} files</span>
diff --git a/resources/views/components/search-autocomplete.blade.php b/resources/views/components/search-autocomplete.blade.php
index 17966e16c..96f991f1d 100644
--- a/resources/views/components/search-autocomplete.blade.php
+++ b/resources/views/components/search-autocomplete.blade.php
@@ -23,10 +23,11 @@
 @endphp
 
 <form method="GET" action="{{ route('search') }}" class="relative" id="{{ $formId }}" data-autocomplete-form>
-    <div class="flex items-center">
+    <div class="flex items-stretch rounded-xl shadow-sm">
         @if($categorySelect && !empty($categories))
             <select name="t"
-                    class="bg-gray-700 text-white {{ $sizeClasses }} rounded-l border-r border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    aria-label="Search category"
+                    class="min-h-11 border border-r-0 border-gray-300 bg-gray-50 text-gray-800 {{ $sizeClasses }} rounded-l-xl focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                 <option value="-1">All</option>
                 @foreach($categories as $category)
                     @php
@@ -60,20 +61,21 @@
                    data-autocomplete-input="{{ $inputId }}-dropdown"
                    data-autocomplete-form="{{ $formId }}"
                    class="w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white {{ $sizeClasses }}
-                          {{ $categorySelect ? '' : 'rounded-l' }}
-                          {{ $submitButton ? '' : 'rounded-r' }}
+                          {{ $categorySelect ? '' : 'rounded-l-xl' }}
+                          {{ $submitButton ? '' : 'rounded-r-xl' }}
                           border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
 
             <!-- Autocomplete Dropdown -->
             <div id="{{ $inputId }}-dropdown"
-                 class="hidden absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                 class="absolute z-50 mt-2 hidden max-h-60 w-full overflow-y-auto rounded-xl border border-gray-300 bg-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
             </div>
         </div>
 
         @if($submitButton)
             <button type="submit"
-                    class="bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 text-white {{ $sizeClasses }} rounded-r transition font-medium">
-                <i class="fas fa-search"></i>
+                    aria-label="Search releases"
+                    class="min-h-11 rounded-r-xl bg-primary-600 text-white {{ $sizeClasses }} font-semibold transition hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-primary-700 dark:hover:bg-primary-600">
+                <i class="fas fa-search" aria-hidden="true"></i>
                 <span class="sr-only">Search</span>
             </button>
         @endif
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
index c12150cfa..9eecc7500 100644
--- a/resources/views/components/select.blade.php
+++ b/resources/views/components/select.blade.php
@@ -1,4 +1,4 @@
 @blaze(fold: true)
-<select {{ $attributes->merge(['class' => 'w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100']) }}>
+<select {{ $attributes->merge(['class' => 'min-h-11 w-full rounded-xl border border-gray-300 bg-white px-3.5 py-2.5 text-gray-900 shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100']) }}>
     {{ $slot }}
 </select>
diff --git a/resources/views/components/sort-dropdown.blade.php b/resources/views/components/sort-dropdown.blade.php
index 9eb83f0db..5ecd42707 100644
--- a/resources/views/components/sort-dropdown.blade.php
+++ b/resources/views/components/sort-dropdown.blade.php
@@ -2,11 +2,13 @@
     <button
         type="button"
         @click="toggle"
-        class="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 transition shadow-sm"
+        class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm transition hover:border-primary-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-primary-600 dark:hover:bg-gray-700 dark:focus:ring-primary-400"
+        aria-haspopup="menu"
+        x-bind:aria-expanded="open"
     >
-        <i class="fas {{ $currentIcon }} text-gray-500 dark:text-gray-300"></i>
+        <i class="fas {{ $currentIcon }} text-primary-600 dark:text-primary-400" aria-hidden="true"></i>
         <span>Sort: {{ $currentLabel }}</span>
-        <i class="fas fa-chevron-down text-xs text-gray-400 dark:text-gray-300 transition-transform" :class="chevronClass()"></i>
+        <i class="fas fa-chevron-down text-xs text-gray-400 transition-transform dark:text-gray-300" :class="chevronClass()" aria-hidden="true"></i>
     </button>
 
     <div x-show="open"
@@ -17,12 +19,14 @@
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100 scale-100"
          x-transition:leave-end="opacity-0 scale-95"
-         class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-600 focus:outline-none">
+         class="absolute right-0 z-50 mt-2 w-56 origin-top-right overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl focus:outline-none dark:border-gray-600 dark:bg-gray-800"
+         role="menu">
         <div class="py-1 max-h-80 overflow-y-auto">
             @foreach($sortOptions as $sortKey => $sortData)
                 <a
                     href="{{ $sortUrls[$sortKey] }}"
-                    class="flex items-center gap-3 px-4 py-2 text-sm transition {{ $currentSort === $sortKey ? 'bg-primary-100 dark:bg-primary-600 text-primary-800 dark:text-white font-medium' : 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600' }}"
+                    class="flex min-h-10 items-center gap-3 px-4 py-2 text-sm transition {{ $currentSort === $sortKey ? 'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-white font-semibold' : 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700' }}"
+                    role="menuitem"
                 >
                     <i class="fas {{ $sortData['icon'] }} w-4 text-center {{ $currentSort === $sortKey ? 'text-primary-600 dark:text-primary-200' : 'text-gray-400 dark:text-gray-400' }}"></i>
                     <span class="flex-1">{{ $sortData['label'] }}</span>
diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
index 9faf6848d..feebf524b 100644
--- a/resources/views/components/textarea.blade.php
+++ b/resources/views/components/textarea.blade.php
@@ -1,2 +1,2 @@
 @blaze(fold: true)
-<textarea {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-2 border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500 rounded-lg border shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition']) }}>{{ $slot }}</textarea>
+<textarea {{ $attributes->merge(['class' => 'w-full rounded-xl border border-gray-300 bg-white px-3.5 py-2.5 text-gray-900 shadow-sm transition focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100']) }}>{{ $slot }}</textarea>
diff --git a/resources/views/components/view-toggle.blade.php b/resources/views/components/view-toggle.blade.php
index 8ed4bfb10..c93a085b0 100644
--- a/resources/views/components/view-toggle.blade.php
+++ b/resources/views/components/view-toggle.blade.php
@@ -85,31 +85,28 @@
     $showThumbnails = request()->query('thumbs', '0') === '1';
 @endphp
 
-<div class="flex items-center gap-2 text-sm">
-    <span class="text-gray-600 dark:text-gray-400">View:</span>
+<div class="inline-flex min-h-11 flex-wrap items-center gap-1 rounded-xl border border-gray-200 bg-white/80 p-1 text-sm shadow-sm dark:border-gray-700 dark:bg-gray-800/80" aria-label="Result view options">
+    <span class="px-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">View</span>
 
     @if($currentView === 'covers')
         {{-- Currently in cover view --}}
-        <span class="font-semibold text-gray-800 dark:text-gray-200">Covers</span>
-        <span class="text-gray-400 dark:text-gray-500">|</span>
-        <a href="{{ $listUrl }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">List</a>
+        <span class="inline-flex min-h-9 items-center rounded-lg bg-primary-600 px-3 font-semibold text-white shadow-sm">Covers</span>
+        <a href="{{ $listUrl }}" class="inline-flex min-h-9 items-center rounded-lg px-3 font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">List</a>
     @else
         {{-- Currently in list view --}}
         @if($covgroup || $shows)
-            <a href="{{ $coverUrl }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">Covers</a>
-            <span class="text-gray-400 dark:text-gray-500">|</span>
+            <a href="{{ $coverUrl }}" class="inline-flex min-h-9 items-center rounded-lg px-3 font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white">Covers</a>
         @endif
-        <span class="font-semibold text-gray-800 dark:text-gray-200">List</span>
+        <span class="inline-flex min-h-9 items-center rounded-lg bg-primary-600 px-3 font-semibold text-white shadow-sm">List</span>
 
         {{-- Thumbnail toggle in list view - client-side via Alpine --}}
         @if($covgroup || $shows)
-            <span class="text-gray-400 dark:text-gray-500 ml-2">|</span>
             <button type="button"
                @click="toggleThumbs()"
-               class="inline-flex items-center gap-1 hover:text-primary-800 dark:hover:text-primary-300 cursor-pointer"
-               x-bind:class="showThumbs ? 'text-green-600 dark:text-green-400' : 'text-primary-600 dark:text-primary-400'"
+               class="inline-flex min-h-9 cursor-pointer items-center gap-1.5 rounded-lg px-3 font-medium transition hover:bg-gray-100 dark:hover:bg-gray-700"
+               x-bind:class="showThumbs ? 'text-green-700 dark:text-green-300' : 'text-gray-600 dark:text-gray-300'"
                x-bind:title="showThumbs ? 'Hide thumbnails' : 'Show thumbnails'">
-                <i class="fas fa-image text-xs"></i>
+                <i class="fas fa-image text-xs" aria-hidden="true"></i>
                 <span x-text="showThumbs ? 'Hide Thumbs' : 'Show Thumbs'"></span>
             </button>
         @endif
diff --git a/resources/views/console/index.blade.php b/resources/views/console/index.blade.php
index 6ce31761e..190fd517f 100644
--- a/resources/views/console/index.blade.php
+++ b/resources/views/console/index.blade.php
@@ -7,15 +7,14 @@
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
     @php
-        $crumbs = [['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home']];
-        if (!empty($catname) && is_object($catname) && !empty($catname->parent)) {
-            $crumbs[] = ['label' => $catname->parent->title, 'url' => url('/browse/' . $catname->parent->title)];
-            $crumbs[] = ['label' => $catname->title, 'url' => url('/browse/' . $catname->title)];
-        } else {
-            $crumbs[] = ['label' => 'Console / ' . (is_object($catname) ? $catname->title : $catname)];
-        }
+        $consoleCategory = is_object($catname) ? $catname->title : ($catname ?: 'All consoles');
     @endphp
-    <x-breadcrumb :items="$crumbs" />
+    <x-page-header title="Console" :current="$consoleCategory" eyebrow="Games and releases" description="Explore console titles and compare every indexed release in one place." icon="fas fa-gamepad">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-gamepad" aria-hidden="true"></i>{{ number_format($results->total()) }} releases</span>
+            <span class="workspace-hero__stat"><i class="fas fa-folder-open" aria-hidden="true"></i>{{ $consoleCategory }}</span>
+        </x-slot:stats>
+    </x-page-header>
 
     @if($results->count() > 0)
         <form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
diff --git a/resources/views/contact/index.blade.php b/resources/views/contact/index.blade.php
index ecc040c4d..d4bd43b1e 100644
--- a/resources/views/contact/index.blade.php
+++ b/resources/views/contact/index.blade.php
@@ -4,16 +4,7 @@
 @section('content')
 <div class="w-full contact-page-container mx-auto">
     <div class="surface-panel rounded-xl shadow-sm mb-6">
-        <div class="surface-panel-alt px-6 py-4 border-b rounded-t-lg">
-            <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-0">Contact Us</h4>
-            <nav class="mt-2" aria-label="breadcrumb">
-                <ol class="flex space-x-2 text-sm">
-                    <li><a href="{{ url($site['home_link'] ?? '/') }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">Home</a></li>
-                    <li class="text-gray-500 dark:text-gray-400">/</li>
-                    <li class="text-gray-600 dark:text-gray-300">Contact</li>
-                </ol>
-            </nav>
-        </div>
+        <x-page-header title="Contact us" eyebrow="We are here to help" description="Send a message to the site team and we will get back to you as soon as possible." icon="fas fa-message" />
 
         <div class="px-6 py-8 lg:px-12 lg:py-10">
             @if(isset($msg) && $msg != '')
@@ -132,4 +123,3 @@
         {!! \App\Support\CaptchaHelper::renderJs() !!}
     @endif
 @endpush
-
diff --git a/resources/views/content/index.blade.php b/resources/views/content/index.blade.php
index f77d7c91b..e570a8a7b 100644
--- a/resources/views/content/index.blade.php
+++ b/resources/views/content/index.blade.php
@@ -2,6 +2,8 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
+    <x-page-header :title="$front ? ($site['title'] ?? config('app.name')) : 'Content'" :eyebrow="$front ? 'Welcome' : 'Explore the site'" :description="$front ? 'Discover the latest site information and start exploring the index.' : 'Browse our published information and useful content pages.'" icon="fas fa-file-alt" />
+
     @if($front)
         <!-- Front Page Content -->
         <div class="px-6 py-8">
@@ -11,7 +13,7 @@
                         <article class="surface-panel rounded-lg shadow-sm p-6 border transition-shadow duration-200 hover:shadow-md">
                             <div class="surface-prose">
                                 @if(filled($item->title))
-                                    <h1 class="mb-4 text-3xl font-bold">{{ $item->title }}</h1>
+                                    <h2 class="mb-4 text-3xl font-bold">{{ $item->title }}</h2>
                                 @endif
 
                                 @if(isset($item->body))
@@ -37,8 +39,6 @@
         </div>
     @else
         <!-- Content List Page -->
-        <x-page-header title="Content" description="Browse our content pages" icon="fas fa-file-alt" />
-
         <div class="px-6 pb-6">
             @if(!empty($content) && count($content) > 0)
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
diff --git a/resources/views/details/index.blade.php b/resources/views/details/index.blade.php
index 3accc02b7..4593ccac2 100644
--- a/resources/views/details/index.blade.php
+++ b/resources/views/details/index.blade.php
@@ -6,14 +6,12 @@
 
 @section('content')
 <div class="release-detail-page surface-panel rounded-xl shadow-sm p-6">
-    <div class="mb-6">
-        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Release Details</h1>
-        <nav class="text-sm text-gray-600 dark:text-gray-400">
-            <a href="{{ url('/') }}" class="hover:text-primary-600 dark:hover:text-primary-400">Home</a>
-            <i class="fas fa-chevron-right mx-2 text-xs"></i>
-            <span class="wrap-break-word break-all">{{ $release->searchname }}</span>
-        </nav>
-    </div>
+    <x-page-header title="Release details" :current="$release->searchname" eyebrow="Inspect this release" description="Review metadata, previews, files, reports, and download options for this indexed release." icon="fas fa-circle-info" class="mb-6">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-folder-open" aria-hidden="true"></i>{{ $release->category_name ?? 'Release' }}</span>
+            <span class="workspace-hero__stat"><i class="fas fa-database" aria-hidden="true"></i>{{ isset($release->size) ? number_format($release->size / 1073741824, 2).' GB' : 'Size unavailable' }}</span>
+        </x-slot:stats>
+    </x-page-header>
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Main Content -->
diff --git a/resources/views/games/index.blade.php b/resources/views/games/index.blade.php
index f8be22945..4f78fd2c4 100644
--- a/resources/views/games/index.blade.php
+++ b/resources/views/games/index.blade.php
@@ -6,20 +6,12 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav aria-label="breadcrumb">
-            <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
-                <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                <li><a href="{{ url('/browse/PC') }}" class="hover:text-blue-600">PC</a></li>
-                @if(!empty($catname) && $catname !== 'All')
-                    <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                    <li class="text-gray-500">{{ $catname }}</li>
-                @endif
-            </ol>
-        </nav>
-    </div>
+    <x-page-header title="Games" :current="!empty($catname) ? $catname : 'All games'" eyebrow="Play and discover" description="Browse PC games and refine the catalog by title, genre, year, or category." icon="fas fa-dice-d20">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-gamepad" aria-hidden="true"></i>{{ number_format($results->total()) }} games</span>
+            <span class="workspace-hero__stat"><i class="fas fa-folder-open" aria-hidden="true"></i>{{ $catname ?: 'All games' }}</span>
+        </x-slot:stats>
+    </x-page-header>
 
     <div class="px-6 py-4">
         <!-- Search Filters -->
diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php
index 3be530fdd..a4936fbd2 100644
--- a/resources/views/home/index.blade.php
+++ b/resources/views/home/index.blade.php
@@ -1,17 +1,10 @@
 @extends('layouts.main')
 
 @section('content')
-<x-panel class="mx-auto max-w-4xl">
-    <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Welcome back</h1>
-            <p class="mt-2 text-gray-600 dark:text-gray-400">Jump back into browsing releases, searching the index, or managing your account.</p>
-        </div>
-
-        <div class="flex flex-wrap gap-2">
-            <x-button-link href="{{ route('search') }}" icon="fas fa-search">Search</x-button-link>
-            <x-button-link href="{{ route('All') }}" variant="secondary" icon="fas fa-list-ul">Browse</x-button-link>
-        </div>
-    </div>
-</x-panel>
+<x-page-header title="Welcome back" eyebrow="Your index workspace" description="Jump back into browsing releases, searching the index, or managing your account." icon="fas fa-house">
+    <x-slot:actions>
+        <a href="{{ route('search') }}" class="workspace-hero__action"><i class="fas fa-search" aria-hidden="true"></i>Search</a>
+        <a href="{{ route('All') }}" class="workspace-hero__action"><i class="fas fa-list-ul" aria-hidden="true"></i>Browse</a>
+    </x-slot:actions>
+</x-page-header>
 @endsection
diff --git a/resources/views/invitations/create.blade.php b/resources/views/invitations/create.blade.php
index d4d82f0d5..c1f6262c4 100644
--- a/resources/views/invitations/create.blade.php
+++ b/resources/views/invitations/create.blade.php
@@ -1,34 +1,18 @@
 @extends('layouts.main')
 
 @section('content')
+<x-page-header :title="$invite_mode ? 'Send an invitation' : 'Invitations disabled'" eyebrow="Invite someone new" :description="$invite_mode ? 'Share a secure, time-limited invitation and track it from your account.' : 'User invitations are currently unavailable on this site.'" icon="fas fa-paper-plane">
+    @if($invite_mode)
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-envelope" aria-hidden="true"></i>{{ number_format($user_invites_left) }} invites left</span>
+        </x-slot:stats>
+        <x-slot:actions>
+            <a href="{{ url('/invitations') }}" class="workspace-hero__action"><i class="fas fa-arrow-left" aria-hidden="true"></i>My invitations</a>
+        </x-slot:actions>
+    @endif
+</x-page-header>
+
 @unless($invite_mode)
-<div class="mb-6">
-    <nav class="flex" aria-label="breadcrumb">
-        <ol class="inline-flex items-center space-x-1 md:space-x-3">
-            <li class="inline-flex items-center">
-                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
-            </li>
-            <li>
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <a href="{{ url('/profile') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Profile</a>
-                </div>
-            </li>
-            <li>
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <a href="{{ url('/invitations') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">My Invitations</a>
-                </div>
-            </li>
-            <li aria-current="page">
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <span class="text-gray-500 dark:text-gray-400">Invitations Disabled</span>
-                </div>
-            </li>
-        </ol>
-    </nav>
-</div>
 <div class="max-w-4xl mx-auto px-4 py-3">
     <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-6 shadow-sm dark:bg-yellow-900 dark:border-yellow-700 dark:text-yellow-300">
         <h5 class="text-lg font-semibold mb-2 flex items-center">
@@ -41,34 +25,6 @@
     </div>
 </div>
 @else
-<div class="mb-6">
-    <nav class="flex" aria-label="breadcrumb">
-        <ol class="inline-flex items-center space-x-1 md:space-x-3">
-            <li class="inline-flex items-center">
-                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
-            </li>
-            <li>
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <a href="{{ url('/profile') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Profile</a>
-                </div>
-            </li>
-            <li>
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <a href="{{ url('/invitations') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">My Invitations</a>
-                </div>
-            </li>
-            <li aria-current="page">
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <span class="text-gray-500 dark:text-gray-400">Send New Invitation</span>
-                </div>
-            </li>
-        </ol>
-    </nav>
-</div>
-
 <div class="max-w-4xl mx-auto px-4 py-3">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm dark:bg-gray-800">
         <div class="bg-gray-50 dark:bg-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700 rounded-t-lg flex justify-between items-center dark:bg-gray-700 dark:border-gray-600">
@@ -231,4 +187,3 @@
 </div>
 @endif
 @endsection
-
diff --git a/resources/views/invitations/index.blade.php b/resources/views/invitations/index.blade.php
index 057ee2cc6..f9e3875ff 100644
--- a/resources/views/invitations/index.blade.php
+++ b/resources/views/invitations/index.blade.php
@@ -1,6 +1,18 @@
 @extends('layouts.main')
 
 @section('content')
+<x-page-header :title="$invite_mode ? 'My invitations' : 'Invitations disabled'" eyebrow="Invite and track" :description="$invite_mode ? 'Send invitations and follow their acceptance or expiry status.' : 'User invitations are currently unavailable on this site.'" icon="fas fa-envelope">
+    @if($invite_mode)
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-paper-plane" aria-hidden="true"></i>{{ number_format($stats['total'] ?? 0) }} sent</span>
+            <span class="workspace-hero__stat"><i class="fas fa-clock" aria-hidden="true"></i>{{ number_format($stats['pending'] ?? 0) }} pending</span>
+        </x-slot:stats>
+        <x-slot:actions>
+            <a href="{{ url('/invitations/create') }}" class="workspace-hero__action"><i class="fas fa-plus" aria-hidden="true"></i>Send invitation</a>
+        </x-slot:actions>
+    @endif
+</x-page-header>
+
 @unless($invite_mode)
 <div class="max-w-4xl mx-auto px-4 py-3">
     <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-6 shadow-sm dark:bg-yellow-900 dark:border-yellow-700 dark:text-yellow-300">
@@ -11,28 +23,6 @@
     </div>
 </div>
 @else
-<div class="mb-6">
-    <nav class="flex" aria-label="breadcrumb">
-        <ol class="inline-flex items-center space-x-1 md:space-x-3">
-            <li class="inline-flex items-center">
-                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
-            </li>
-            <li>
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <a href="{{ url('/profile') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Profile</a>
-                </div>
-            </li>
-            <li aria-current="page">
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <span class="text-gray-500 dark:text-gray-400">My Invitations</span>
-                </div>
-            </li>
-        </ol>
-    </nav>
-</div>
-
 <div class="px-4 py-3">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm mb-4 dark:bg-gray-800">
         <div class="bg-gray-50 dark:bg-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700 rounded-t-lg flex justify-between items-center dark:bg-gray-700 dark:border-gray-600">
@@ -251,4 +241,3 @@
 </div>
 @endunless
 @endsection
-
diff --git a/resources/views/invitations/show.blade.php b/resources/views/invitations/show.blade.php
index b9f4187f1..624bbfcaa 100644
--- a/resources/views/invitations/show.blade.php
+++ b/resources/views/invitations/show.blade.php
@@ -2,19 +2,7 @@
 
 @section('content')
 <div class="max-w-4xl mx-auto px-4 py-3">
-    <nav class="flex mb-6" aria-label="breadcrumb">
-        <ol class="inline-flex items-center space-x-1 md:space-x-3">
-            <li class="inline-flex items-center">
-                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
-            </li>
-            <li aria-current="page">
-                <div class="flex items-center">
-                    <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    <span class="text-gray-500 dark:text-gray-400">Invitation</span>
-                </div>
-            </li>
-        </ol>
-    </nav>
+    <x-page-header :title="'Invitation to join ' . $site['title']" eyebrow="Welcome" description="Review this invitation and create your account securely." icon="fas fa-envelope-open" />
 
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm dark:bg-gray-800">
         <div class="bg-gray-50 dark:bg-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700 rounded-t-lg dark:bg-gray-700 dark:border-gray-600">
@@ -174,4 +162,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 55267b63d..f0a4ab560 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -101,7 +101,7 @@
             </header>
 
             <!-- Page Content - Scrollable Area -->
-            <main id="main-content" class="layout-main flex-1 overflow-y-auto p-3 sm:p-5 lg:p-6" data-scroll-container tabindex="-1">
+            <main id="main-content" class="app-view-stack app-view-stack--admin layout-main flex-1 overflow-y-auto p-3 sm:p-5 lg:p-6" data-scroll-container tabindex="-1">
                 @unless(trim($__env->yieldContent('suppress_layout_flash')))
                     @if(session('success'))
                         <div class="layout-flash layout-flash--success mb-5" role="status">
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 4ef7cd5c2..9f31439d1 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -33,7 +33,7 @@
         @endif
     @endif
 </head>
-<body class="font-sans antialiased pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)]">
+<body class="guest-view-stack font-sans antialiased pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)]">
     @php
         $legacyMessage = session('message');
         $legacyType = session('message_type');
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index e933948df..76dd48f3a 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -72,7 +72,7 @@
 
             <!-- Page Content - This is the scrollable area -->
             <main id="main-content" class="layout-main flex-1 overflow-y-auto" data-scroll-container tabindex="-1">
-                <div class="layout-page-container container mx-auto max-w-[1600px] px-3 py-5 pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:px-5 sm:py-6 lg:px-8">
+                <div class="app-view-stack layout-page-container container mx-auto max-w-[1600px] px-3 py-5 pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:px-5 sm:py-6 lg:px-8">
                     @if(session('success'))
                         <div class="layout-flash layout-flash--success mb-5" role="status">
                             <i class="fas fa-circle-check" aria-hidden="true"></i>
diff --git a/resources/views/movies/index.blade.php b/resources/views/movies/index.blade.php
index 421dcb99e..77340fe57 100644
--- a/resources/views/movies/index.blade.php
+++ b/resources/views/movies/index.blade.php
@@ -5,24 +5,92 @@
 @endpush
 
 @section('content')
-<div class="surface-panel rounded-xl shadow-sm" x-data="moviesPage" data-movie-layout="{{ $movie_layout ?? 2 }}">
-    @php
-        $currentMovieCategory = !empty($categorytitle) ? $categorytitle : 'All';
-        $movieCrumbs = [
-            ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
-            ['label' => 'Movies', 'url' => $currentMovieCategory !== 'All' ? route('Movies') : null],
-            ['label' => $currentMovieCategory],
-        ];
-    @endphp
-    <x-breadcrumb :items="$movieCrumbs" />
+@php
+    $currentMovieCategory = !empty($categorytitle) ? $categorytitle : 'All movies';
+    $activeMovieFilters = collect([
+        'Title' => $title ?? '',
+        'Genre' => $genre ?? '',
+        'Year' => $year ?? '',
+        'Rating' => !empty($rating) ? $rating . '+ stars' : '',
+    ])->filter(static fn ($value): bool => $value !== '' && $value !== null);
+@endphp
 
-    {{-- Movies Filter Section --}}
-    <div class="px-6 py-5 surface-panel-alt border-b">
-        <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-5">
-            <div class="flex flex-wrap items-center gap-4">
-                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
-                    <i class="fas fa-film mr-2 text-primary-600 dark:text-primary-400"></i>Filter Movies
+<div class="space-y-5" x-data="moviesPage" data-movie-layout="{{ $movie_layout ?? 2 }}">
+    <section class="movies-hero relative overflow-hidden rounded-2xl px-5 py-4 text-white shadow-lg sm:px-7 sm:py-5" aria-labelledby="movies-heading">
+        <div class="movies-hero__glow movies-hero__glow--one" aria-hidden="true"></div>
+        <div class="movies-hero__glow movies-hero__glow--two" aria-hidden="true"></div>
+
+        <div class="relative z-10 flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+            <div class="min-w-0 max-w-3xl xl:flex-1">
+                <nav aria-label="Breadcrumb" class="mb-2 text-sm text-white/70">
+                    <ol class="flex flex-wrap items-center gap-2">
+                        <li><a href="{{ url($site['home_link'] ?? '/') }}" class="rounded hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70">Home</a></li>
+                        <li aria-hidden="true"><i class="fas fa-chevron-right text-[0.65rem]"></i></li>
+                        <li aria-current="page" class="font-medium text-white">{{ $currentMovieCategory }}</li>
+                    </ol>
+                </nav>
+
+                <div class="flex items-center gap-3">
+                    <span class="movies-hero__icon" aria-hidden="true"><i class="fas fa-clapperboard"></i></span>
+                    <div>
+                        <p class="mb-1 text-xs font-semibold uppercase tracking-[0.18em] text-white/65">Discover and download</p>
+                        <h1 id="movies-heading" class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Movies</h1>
+                    </div>
+                </div>
+
+                <p class="mt-2 max-w-2xl text-sm leading-5 text-white/75 sm:text-base">
+                    Browse available movies, compare recent releases, and narrow the catalog by title, genre, year, or rating.
+                </p>
+
+            </div>
+
+            <div class="movies-hero__meta flex min-w-0 flex-wrap items-center gap-3 xl:max-w-[48%] xl:justify-end">
+                <div class="flex flex-wrap gap-2 text-sm xl:justify-end">
+                    <span class="movies-hero__stat">
+                        <i class="fas fa-film" aria-hidden="true"></i>
+                        {{ isset($results) ? number_format($results->total()) : 0 }} movies
+                    </span>
+                    <span class="movies-hero__stat">
+                        <i class="fas fa-folder-open" aria-hidden="true"></i>
+                        {{ $currentMovieCategory }}
+                    </span>
+                    @if($activeMovieFilters->isNotEmpty())
+                        <span class="movies-hero__stat">
+                            <i class="fas fa-filter" aria-hidden="true"></i>
+                            {{ $activeMovieFilters->count() }} active {{ Str::plural('filter', $activeMovieFilters->count()) }}
+                        </span>
+                    @endif
+                </div>
+
+                <div class="flex flex-wrap items-center gap-3">
+                    <button type="button"
+                            @click="toggleLayout()"
+                            class="movies-hero__action"
+                            :aria-label="layout === 1 ? 'Switch to two-column movie grid' : 'Switch to one-column movie list'"
+                            title="Change movie layout">
+                        <i :class="layoutIcon" aria-hidden="true"></i>
+                        <span x-text="layoutLabel"></span>
+                    </button>
+
+                    <a href="{{ route('trending-movies') }}" class="movies-hero__action movies-hero__action--accent">
+                        <i class="fas fa-fire" aria-hidden="true"></i>
+                        Trending now
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="surface-panel overflow-hidden rounded-2xl border shadow-sm" aria-labelledby="movie-filters-heading">
+        <div class="flex flex-col gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-700 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+            <div>
+                <h2 id="movie-filters-heading" class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    <i class="fas fa-sliders mr-2 text-primary-500" aria-hidden="true"></i>Find your next movie
                 </h2>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Combine filters to quickly narrow the catalog.</p>
+            </div>
+
+            <div class="flex flex-wrap items-center gap-3">
                 <x-view-toggle
                     current-view="covers"
                     covgroup="movies"
@@ -30,131 +98,120 @@
                     parentcat="Movies"
                     :shows="false"
                 />
-            </div>
-
-            <div class="flex flex-wrap gap-2">
-                {{-- Layout Toggle Button --}}
-                <button type="button"
-                        @click="toggleLayout()"
-                        class="inline-flex items-center px-4 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-700 dark:hover:bg-gray-600 transition shadow-md focus:outline-none focus:ring-2 focus:ring-gray-500"
-                        title="Toggle layout">
-                    <i class="mr-2" :class="layoutIcon"></i>
-                    <span x-text="layoutLabel"></span>
-                </button>
-
-                {{-- Trending Movies Button --}}
-                <a href="{{ route('trending-movies') }}"
-                   class="inline-flex items-center px-4 py-2 bg-linear-to-r from-orange-500 to-red-600 text-white rounded-lg hover:from-orange-600 hover:to-red-700 transition shadow-md">
-                    <i class="fas fa-fire mr-2"></i> View Trending Movies
-                </a>
+                @if($activeMovieFilters->isNotEmpty())
+                    <a href="{{ route('Movies') }}" class="text-sm font-medium text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400">
+                        <i class="fas fa-rotate-left mr-1" aria-hidden="true"></i>Clear filters
+                    </a>
+                @endif
             </div>
         </div>
 
-        {{-- Search Form --}}
-        <form method="get" action="{{ route('Movies') }}" class="space-y-4">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <form method="get" action="{{ route('Movies') }}" class="p-5 sm:p-6" aria-label="Movie filters">
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
                 <div>
-                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Title</label>
-                    <input type="text"
-                           id="title"
-                           name="title"
-                           value="{{ $title ?? '' }}"
-                           placeholder="Search by title..."
-                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition">
+                    <label for="title" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
+                    <div class="relative">
+                        <span class="pointer-events-none absolute inset-y-0 left-0 flex w-10 items-center justify-center text-gray-400" aria-hidden="true">
+                            <i class="fas fa-magnifying-glass text-sm"></i>
+                        </span>
+                        <input type="search"
+                               id="title"
+                               name="title"
+                               value="{{ $title ?? '' }}"
+                               placeholder="Movie title"
+                               autocomplete="off"
+                               class="movie-filter-control pl-10">
+                    </div>
                 </div>
 
                 <div>
-                    <label for="genre" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Genre</label>
-                    <select id="genre"
-                            name="genre"
-                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition">
-                        <option value="">All Genres</option>
-                        @if(isset($genres))
-                            @foreach($genres as $gen)
-                                <option value="{{ $gen }}" {{ (isset($genre) && $genre == $gen) ? 'selected' : '' }}>{{ $gen }}</option>
-                            @endforeach
-                        @endif
+                    <label for="genre" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Genre</label>
+                    <select id="genre" name="genre" class="movie-filter-control">
+                        <option value="">All genres</option>
+                        @foreach($genres ?? [] as $gen)
+                            <option value="{{ $gen }}" {{ (isset($genre) && $genre === $gen) ? 'selected' : '' }}>{{ $gen }}</option>
+                        @endforeach
                     </select>
                 </div>
 
                 <div>
-                    <label for="year" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Year</label>
-                    <select id="year"
-                            name="year"
-                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition">
-                        <option value="">All Years</option>
-                        @if(isset($years))
-                            @foreach($years as $yr)
-                                <option value="{{ $yr }}" {{ (isset($year) && $year == $yr) ? 'selected' : '' }}>{{ $yr }}</option>
-                            @endforeach
-                        @endif
+                    <label for="year" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Release year</label>
+                    <select id="year" name="year" class="movie-filter-control">
+                        <option value="">Any year</option>
+                        @foreach($years ?? [] as $yr)
+                            <option value="{{ $yr }}" {{ (isset($year) && (int) $year === (int) $yr) ? 'selected' : '' }}>{{ $yr }}</option>
+                        @endforeach
                     </select>
                 </div>
 
                 <div>
-                    <label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Rating</label>
-                    <select id="rating"
-                            name="rating"
-                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition">
-                        <option value="">All Ratings</option>
-                        @if(isset($ratings))
-                            @foreach($ratings as $rate)
-                                <option value="{{ $rate }}" {{ (isset($rating) && $rating == $rate) ? 'selected' : '' }}>{{ $rate }}+</option>
-                            @endforeach
-                        @endif
+                    <label for="rating" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Minimum rating</label>
+                    <select id="rating" name="rating" class="movie-filter-control">
+                        <option value="">Any rating</option>
+                        @foreach($ratings ?? [] as $rate)
+                            <option value="{{ $rate }}" {{ (isset($rating) && (int) $rating === (int) $rate) ? 'selected' : '' }}>{{ $rate }}+ stars</option>
+                        @endforeach
                     </select>
                 </div>
             </div>
 
-            <div class="flex justify-end">
-                <button type="submit"
-                        class="inline-flex items-center px-6 py-2 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition shadow-md">
-                    <i class="fas fa-search mr-2"></i> Search
+            <div class="mt-5 flex flex-col gap-3 border-t border-gray-200 pt-5 dark:border-gray-700 sm:flex-row sm:items-center sm:justify-between">
+                <div class="flex min-h-7 flex-wrap items-center gap-2" aria-live="polite">
+                    @forelse($activeMovieFilters as $label => $value)
+                        <span class="movie-filter-chip"><span class="font-semibold">{{ $label }}:</span> {{ $value }}</span>
+                    @empty
+                        <span class="text-sm text-gray-500 dark:text-gray-400">Showing the full movie catalog.</span>
+                    @endforelse
+                </div>
+
+                <button type="submit" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:bg-primary-700 dark:hover:bg-primary-600">
+                    <i class="fas fa-search" aria-hidden="true"></i>
+                    Search movies
                 </button>
             </div>
         </form>
-    </div>
+    </section>
 
-    {{-- Movies List --}}
     @if(isset($results) && $results->count() > 0)
-        <div class="px-6 py-6">
-            {{-- Results Summary and Pagination --}}
-            <div class="flex flex-col sm:flex-row justify-between items-center mb-6 pb-4 border-b border-gray-200 dark:border-gray-700 gap-4">
-                <div class="text-sm text-gray-700 dark:text-gray-300">
-                    <span class="font-medium">{{ $results->total() }}</span> movies found
-                    <span class="text-gray-500 dark:text-gray-400">
-                        (showing {{ $results->firstItem() }}-{{ $results->lastItem() }})
-                    </span>
+        <section aria-labelledby="movie-results-heading">
+            <div class="mb-4 flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white px-4 py-3 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:px-5 lg:flex-row lg:items-center lg:justify-between">
+                <div>
+                    <h2 id="movie-results-heading" class="font-semibold text-gray-900 dark:text-gray-100">
+                        {{ number_format($results->total()) }} {{ Str::plural('movie', $results->total()) }} found
+                    </h2>
+                    <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+                        Showing {{ number_format($results->firstItem()) }}–{{ number_format($results->lastItem()) }} on this page
+                    </p>
                 </div>
-                <div class="flex items-center gap-4">
-                    <x-inline-search placeholder="Search in Movies..." :category="$category ?? null" />
-                    {{ $results->links() }}
+
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+                    <x-inline-search placeholder="Quick release search..." :category="$category ?? null" />
+                    <div class="overflow-x-auto">{{ $results->links() }}</div>
                 </div>
             </div>
 
-            {{-- Movies Grid --}}
-            <div id="moviesGrid"
-                 class="movies-grid"
-                 :data-layout="layout">
+            <div id="moviesGrid" class="movies-grid" :data-layout="layout">
                 @foreach($results as $result)
                     @include('movies.partials.movie-card', ['result' => $result, 'site' => $site])
                 @endforeach
             </div>
 
-            {{-- Bottom Pagination --}}
-            <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <div class="mt-6 flex justify-center rounded-2xl border border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                 {{ $results->links() }}
             </div>
-        </div>
+        </section>
     @else
-        <x-empty-state
-            icon="fas fa-film"
-            title="No Movies Found"
-            message="Try adjusting your search filters or check back later for new releases."
-        />
+        <section class="surface-panel rounded-2xl border shadow-sm" aria-labelledby="movie-results-heading">
+            <h2 id="movie-results-heading" class="sr-only">Movie results</h2>
+            <x-empty-state
+                icon="fas fa-film"
+                title="No movies found"
+                message="Try broadening your filters or clear them to return to the full catalog."
+                action-url="{{ $activeMovieFilters->isNotEmpty() ? route('Movies') : null }}"
+                action-label="{{ $activeMovieFilters->isNotEmpty() ? 'Clear filters' : null }}"
+                action-icon="fas fa-rotate-left"
+            />
+        </section>
     @endif
 </div>
-
-{{-- NFO, preview, and other modals are included globally via layouts.main --}}
 @endsection
-
diff --git a/resources/views/movies/partials/movie-card.blade.php b/resources/views/movies/partials/movie-card.blade.php
index fce5632b6..b0cd9cf09 100644
--- a/resources/views/movies/partials/movie-card.blade.php
+++ b/resources/views/movies/partials/movie-card.blade.php
@@ -1,7 +1,3 @@
-{{-- Movie Card Partial --}}
-{{-- Props: $result (movie object with ->releases array), $site (site configuration) --}}
-{{-- Layout-agnostic: visual differences are driven by CSS via the parent .movies-grid[data-layout] --}}
-
 @props([
     'result',
     'site' => [],
@@ -9,206 +5,154 @@
 
 @php
     $releases = $result->releases ?? [];
-    $totalReleases = $result->total_releases ?? count($releases);
-    $maxReleases = 2;
-    $guid = !empty($releases) ? $releases[0]->guid : null;
+    $totalReleases = (int) ($result->total_releases ?? count($releases));
+    $guid = !empty($releases) ? ($releases[0]->guid ?? null) : null;
+    $movieUrl = !empty($result->imdbid)
+        ? route('movie.view', ['imdbid' => $result->imdbid])
+        : ($guid ? url('/details/' . $guid) : null);
 @endphp
 
-<div class="surface-panel border rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
-    <div class="flex flex-row">
-        {{-- Movie Poster --}}
-        <div class="shrink-0 p-4">
-            @if($guid)
-                <a href="{{ url('/details/' . $guid) }}" class="block">
-                    @if(isset($result->cover) && $result->cover)
-                        <img src="{{ $result->cover }}"
-                             alt="{{ $result->title }}"
-                             class="object-cover movie-cover rounded-lg shadow-lg"
-                             loading="lazy">
-                    @else
-                        <div class="bg-gray-200 dark:bg-gray-700 flex items-center justify-center movie-cover rounded-lg shadow-lg">
-                            <i class="fas fa-film text-gray-400 text-3xl"></i>
-                        </div>
-                    @endif
-                </a>
-            @else
-                @if(isset($result->cover) && $result->cover)
-                    <img src="{{ $result->cover }}"
-                         alt="{{ $result->title }}"
-                         class="object-cover movie-cover rounded-lg shadow-lg"
-                         loading="lazy">
-                @else
-                    <div class="bg-gray-200 dark:bg-gray-700 flex items-center justify-center movie-cover rounded-lg shadow-lg">
-                        <i class="fas fa-film text-gray-400 text-3xl"></i>
-                    </div>
-                @endif
+<article class="movie-card surface-panel overflow-hidden rounded-2xl border shadow-sm">
+    <div class="movie-card__layout">
+        <div class="movie-card__poster-wrap">
+            @if($movieUrl)
+                <a href="{{ $movieUrl }}" class="movie-card__poster-link" aria-label="View {{ $result->title }}">
             @endif
+
+            @if(!empty($result->cover))
+                <img src="{{ $result->cover }}"
+                     alt="{{ $result->title }} poster"
+                     class="movie-cover"
+                     width="320"
+                     height="480"
+                     loading="lazy"
+                     decoding="async">
+            @else
+                <div class="movie-cover movie-card__poster-placeholder" role="img" aria-label="No poster available for {{ $result->title }}">
+                    <i class="fas fa-clapperboard" aria-hidden="true"></i>
+                    <span>No poster</span>
+                </div>
+            @endif
+
+            @if($movieUrl)
+                </a>
+            @endif
+
+            <span class="movie-card__release-count">
+                <i class="fas fa-box-open" aria-hidden="true"></i>
+                {{ $totalReleases }} {{ Str::plural('release', $totalReleases) }}
+            </span>
         </div>
 
-        {{-- Movie Details --}}
-        <div class="flex-1 py-4 pr-4 min-w-0">
-            {{-- Title --}}
-            <div class="flex justify-between items-start mb-2">
-                <div class="flex-1 min-w-0">
-                    @if(isset($result->imdbid) && $result->imdbid)
-                        <a href="{{ route('movie.view', ['imdbid' => $result->imdbid]) }}" class="hover:text-primary-600 dark:hover:text-primary-400 transition">
-                            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 truncate">{{ $result->title }}</h3>
+        <div class="movie-card__content min-w-0 flex-1">
+            <div class="flex min-w-0 flex-1 flex-col">
+                <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0">
+                        @if($movieUrl)
+                            <a href="{{ $movieUrl }}" class="group/title rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500">
+                                <h3 class="movie-card__title text-xl font-bold tracking-tight text-gray-900 transition group-hover/title:text-primary-600 dark:text-gray-100 dark:group-hover/title:text-primary-400">
+                                    {{ $result->title }}
+                                </h3>
+                            </a>
+                        @else
+                            <h3 class="movie-card__title text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">{{ $result->title }}</h3>
+                        @endif
+
+                        <div class="mt-2 flex flex-wrap items-center gap-2 text-xs font-medium">
+                            @if(!empty($result->year))
+                                <span class="movie-meta-chip">
+                                    <i class="fas fa-calendar" aria-hidden="true"></i>{{ $result->year }}
+                                </span>
+                            @endif
+                            @if(!empty($result->rating))
+                                <span class="movie-meta-chip movie-meta-chip--rating">
+                                    <i class="fas fa-star" aria-hidden="true"></i>{{ $result->rating }} / 10
+                                </span>
+                            @endif
+                            @if(!empty($result->latest_postdate))
+                                <span class="movie-meta-chip">
+                                    <i class="fas fa-clock" aria-hidden="true"></i>Updated {{ userDateDiffForHumans($result->latest_postdate) }}
+                                </span>
+                            @endif
+                        </div>
+                    </div>
+                </div>
+
+                @if(!empty($result->plot))
+                    <p class="mt-4 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-300">{{ $result->plot }}</p>
+                @endif
+
+                @if(!empty($result->genre) || !empty($result->director) || !empty($result->actors))
+                    <dl class="movie-card__metadata mt-4 grid gap-2 text-sm">
+                        @if(!empty($result->genre))
+                            <div class="movie-card__metadata-row">
+                                <dt><i class="fas fa-masks-theater" aria-hidden="true"></i><span>Genre</span></dt>
+                                <dd>{!! $result->genre !!}</dd>
+                            </div>
+                        @endif
+                        @if(!empty($result->director))
+                            <div class="movie-card__metadata-row">
+                                <dt><i class="fas fa-video" aria-hidden="true"></i><span>Director</span></dt>
+                                <dd>{!! $result->director !!}</dd>
+                            </div>
+                        @endif
+                        @if(!empty($result->actors))
+                            <div class="movie-card__metadata-row">
+                                <dt><i class="fas fa-users" aria-hidden="true"></i><span>Cast</span></dt>
+                                <dd class="line-clamp-2">{!! $result->actors !!}</dd>
+                            </div>
+                        @endif
+                    </dl>
+                @endif
+
+                <div class="mt-4 flex flex-wrap items-center gap-2" aria-label="External movie links">
+                    @if(!empty($result->imdbid))
+                        <a href="{{ ($site['dereferrer_link'] ?? '') }}https://www.imdb.com/title/tt{{ $result->imdbid }}"
+                           target="_blank"
+                           rel="noopener noreferrer"
+                           class="movie-source-link movie-source-link--imdb">
+                            <i class="fab fa-imdb" aria-hidden="true"></i>IMDb<span class="sr-only"> (opens in a new tab)</span>
+                        </a>
+                    @endif
+                    @if(!empty($result->tmdbid))
+                        <a href="{{ ($site['dereferrer_link'] ?? '') }}https://www.themoviedb.org/movie/{{ $result->tmdbid }}"
+                           target="_blank"
+                           rel="noopener noreferrer"
+                           class="movie-source-link movie-source-link--tmdb">
+                            <i class="fas fa-film" aria-hidden="true"></i>TMDb<span class="sr-only"> (opens in a new tab)</span>
+                        </a>
+                    @endif
+                    @if(!empty($result->traktid))
+                        <a href="{{ ($site['dereferrer_link'] ?? '') }}https://trakt.tv/movies/{{ $result->traktid }}"
+                           target="_blank"
+                           rel="noopener noreferrer"
+                           class="movie-source-link movie-source-link--trakt">
+                            <i class="fas fa-heart" aria-hidden="true"></i>Trakt<span class="sr-only"> (opens in a new tab)</span>
                         </a>
-                    @else
-                        <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 truncate">{{ $result->title }}</h3>
                     @endif
-
-                    {{-- Year and Rating --}}
-                    <div class="flex items-center gap-4 mt-2 text-sm text-gray-600 dark:text-gray-400">
-                        @if(isset($result->year) && $result->year)
-                            <span><i class="fas fa-calendar mr-1"></i> {{ $result->year }}</span>
-                        @endif
-                        @if(isset($result->rating) && $result->rating)
-                            <span class="text-yellow-600 dark:text-yellow-400">
-                                <i class="fas fa-star mr-1"></i> {{ $result->rating }}
-                            </span>
-                        @endif
-                    </div>
-
-                    {{-- External Links --}}
-                    <div class="flex items-center gap-2 mt-2 text-xs">
-                        @if(isset($result->imdbid) && $result->imdbid)
-                            <a href="{{ ($site['dereferrer_link'] ?? '') }}https://www.imdb.com/title/tt{{ $result->imdbid }}"
-                               target="_blank"
-                               rel="noopener noreferrer"
-                               class="inline-flex items-center px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded hover:bg-yellow-200 dark:hover:bg-yellow-800 transition">
-                                <i class="fab fa-imdb mr-1"></i> IMDb
-                            </a>
-                        @endif
-                        @if(isset($result->tmdbid) && $result->tmdbid)
-                            <a href="{{ ($site['dereferrer_link'] ?? '') }}https://www.themoviedb.org/movie/{{ $result->tmdbid }}"
-                               target="_blank"
-                               rel="noopener noreferrer"
-                               class="inline-flex items-center px-2 py-1 bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200 rounded hover:bg-primary-200 dark:hover:bg-primary-800 transition">
-                                <i class="fas fa-film mr-1"></i> TMDb
-                            </a>
-                        @endif
-                        @if(isset($result->traktid) && $result->traktid)
-                            <a href="{{ ($site['dereferrer_link'] ?? '') }}https://trakt.tv/movies/{{ $result->traktid }}"
-                               target="_blank"
-                               rel="noopener noreferrer"
-                               class="inline-flex items-center px-2 py-1 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded hover:bg-red-200 dark:hover:bg-red-800 transition">
-                                <i class="fas fa-heart mr-1"></i> Trakt
-                            </a>
-                        @endif
-                    </div>
                 </div>
             </div>
 
-            {{-- Plot --}}
-            @if(isset($result->plot) && $result->plot)
-                <p class="text-gray-700 dark:text-gray-300 text-sm mt-3 line-clamp-3">{{ $result->plot }}</p>
-            @endif
-
-            {{-- Metadata: Genre, Director, Actors --}}
-            <div class="mt-3 space-y-1 text-xs text-gray-600 dark:text-gray-400">
-                @if(isset($result->genre) && $result->genre)
-                    <div>
-                        <strong class="text-gray-700 dark:text-gray-300">Genre:</strong> {!! $result->genre !!}
-                    </div>
-                @endif
-                @if(isset($result->director) && $result->director)
-                    <div>
-                        <strong class="text-gray-700 dark:text-gray-300">Director:</strong> {!! $result->director !!}
-                    </div>
-                @endif
-                @if(isset($result->actors) && $result->actors)
-                    <div>
-                        <strong class="text-gray-700 dark:text-gray-300">Actors:</strong> {!! $result->actors !!}
-                    </div>
-                @endif
-            </div>
-
-            {{-- Release Information --}}
             @if($guid && !empty($releases))
-                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                        <i class="fas fa-box mr-1"></i> Available Releases
-                        @if($totalReleases > $maxReleases)
-                            <span class="text-xs font-normal text-gray-500 dark:text-gray-400">
-                                (Showing {{ $maxReleases }} of {{ $totalReleases }})
-                            </span>
+                <section class="movie-card__releases mt-5 border-t border-gray-200 pt-4 dark:border-gray-700" aria-label="Available releases for {{ $result->title }}">
+                    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+                        <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">
+                            <i class="fas fa-box-open mr-1.5 text-primary-500" aria-hidden="true"></i>Latest releases
+                        </h4>
+                        @if($totalReleases > count($releases) && !empty($result->imdbid))
+                            <a href="{{ route('movie.view', ['imdbid' => $result->imdbid]) }}" class="text-xs font-semibold text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">
+                                View all {{ $totalReleases }} <i class="fas fa-arrow-right ml-1" aria-hidden="true"></i>
+                            </a>
                         @endif
-                    </h4>
-                    <div class="space-y-3">
+                    </div>
+
+                    <div class="grid gap-2.5">
                         @foreach($releases as $index => $release)
-                            @if(($release->searchname ?? null) && ($release->guid ?? null))
-                                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 border border-gray-200 dark:border-gray-700 shadow-sm">
-                                    <div class="release-card-container">
-                                        <div class="release-info-wrapper">
-                                            {{-- Release Name --}}
-                                            <a href="{{ url('/details/' . $release->guid) }}"
-                                               class="text-sm text-gray-800 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 font-medium block break-all"
-                                               title="{{ $release->searchname }}">
-                                                {{ $release->searchname }}
-                                            </a>
-
-                                            {{-- Info Badges --}}
-                                            <div class="flex flex-wrap items-center gap-2 mt-2">
-                                                @if($release->size)
-                                                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
-                                                        <i class="fas fa-hdd mr-1"></i>{{ number_format($release->size / 1073741824, 2) }} GB
-                                                    </span>
-                                                @endif
-
-                                                @if($release->postdate)
-                                                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
-                                                        <i class="fas fa-calendar-alt mr-1"></i>{{ userDate($release->postdate, 'M d, Y H:i') }}
-                                                    </span>
-                                                @endif
-
-                                                @if($release->adddate)
-                                                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
-                                                        <i class="fas fa-plus-circle mr-1"></i>{{ userDateDiffForHumans($release->adddate) }}
-                                                    </span>
-                                                @endif
-
-                                                @if(($release->haspreview ?? 0) == 1)
-                                                    <button type="button"
-                                                            class="preview-badge inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800 transition cursor-pointer"
-                                                            data-guid="{{ $release->guid }}"
-                                                            data-image-url="{{ getImageAssetUrl('preview', $release->guid . '_thumb') }}"
-                                                            title="View preview image">
-                                                        <i class="fas fa-image mr-1"></i> Preview
-                                                    </button>
-                                                @endif
-                                            </div>
-                                        </div>
-
-                                        {{-- Action Buttons --}}
-                                        <div class="release-actions">
-                                            <a href="{{ url('/getnzb/' . $release->guid) }}"
-                                               class="inline-flex items-center px-3 py-1 rounded text-xs font-medium bg-green-600 dark:bg-green-700 text-white hover:bg-green-700 dark:hover:bg-green-800 transition">
-                                                <i class="fas fa-download mr-1"></i> Download
-                                            </a>
-
-                                            <button type="button"
-                                                    class="add-to-cart inline-flex items-center px-3 py-1 rounded text-xs font-medium bg-primary-600 dark:bg-primary-700 text-white hover:bg-primary-700 dark:hover:bg-primary-800 transition"
-                                                    data-guid="{{ $release->guid }}">
-                                                <i class="fas fa-shopping-cart mr-1"></i> Cart
-                                            </button>
-
-                                            <a href="{{ url('/details/' . $release->guid) }}"
-                                               class="inline-flex items-center px-3 py-1 rounded text-xs font-medium bg-gray-600 dark:bg-gray-700 text-white hover:bg-gray-700 dark:hover:bg-gray-800 transition">
-                                                <i class="fas fa-info-circle mr-1"></i> Details
-                                            </a>
-
-                                            @if($release->id)
-                                                <x-report-button :release-id="(int)$release->id" variant="icon" />
-                                            @endif
-                                        </div>
-                                    </div>
-                                </div>
-                            @endif
+                            @include('movies.partials.release-item', ['release' => $release, 'index' => $index])
                         @endforeach
                     </div>
-                </div>
+                </section>
             @endif
         </div>
     </div>
-</div>
+</article>
diff --git a/resources/views/movies/partials/release-item.blade.php b/resources/views/movies/partials/release-item.blade.php
index 5baab4dd2..178022e0e 100644
--- a/resources/views/movies/partials/release-item.blade.php
+++ b/resources/views/movies/partials/release-item.blade.php
@@ -1,71 +1,67 @@
-{{-- Release Item Partial --}}
-{{-- Props: $release (object with ->id, ->guid, ->searchname, ->size, ->postdate, ->adddate, ->haspreview), $layout, $index --}}
-
 @props([
     'release',
-    'layout' => 2,
     'index' => 0,
 ])
 
 @if(($release->searchname ?? null) && ($release->guid ?? null))
-    <div class="surface-panel-alt rounded-lg p-3 border">
-        <div class="release-card-container {{ $layout == 1 ? 'flex flex-row items-start justify-between gap-4' : 'flex flex-col space-y-3' }}">
-            <div class="release-info-wrapper {{ $layout == 1 ? 'flex-1 min-w-0' : '' }}">
-                {{-- Release Name --}}
+    <article class="movie-release-row surface-panel-alt rounded-xl border p-3">
+        <div class="release-card-container">
+            <div class="release-info-wrapper min-w-0 flex-1">
                 <a href="{{ url('/details/' . $release->guid) }}"
-                   class="text-sm text-gray-800 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 font-medium block break-all"
+                   class="line-clamp-2 block break-all text-sm font-semibold leading-5 text-gray-800 hover:text-primary-600 dark:text-gray-200 dark:hover:text-primary-400"
                    title="{{ $release->searchname }}">
                     {{ $release->searchname }}
                 </a>
 
-                {{-- Info Badges --}}
-                <div class="flex flex-wrap items-center gap-2 mt-2">
+                <div class="mt-2 flex flex-wrap items-center gap-1.5">
                     @if($release->size)
                         <span class="release-chip py-1">
-                            <i class="fas fa-hdd mr-1"></i>{{ number_format($release->size / 1073741824, 2) }} GB
+                            <i class="fas fa-hard-drive mr-1" aria-hidden="true"></i>{{ number_format($release->size / 1073741824, 2) }} GB
                         </span>
                     @endif
 
                     @if($release->postdate)
                         <span class="release-chip py-1">
-                            <i class="fas fa-calendar-alt mr-1"></i>{{ userDate($release->postdate, 'M d, Y H:i') }}
+                            <i class="fas fa-calendar-days mr-1" aria-hidden="true"></i>{{ userDate($release->postdate, 'M j, Y') }}
                         </span>
                     @endif
 
                     @if($release->adddate)
                         <span class="release-chip py-1">
-                            <i class="fas fa-plus-circle mr-1"></i>{{ userDateDiffForHumans($release->adddate) }}
+                            <i class="fas fa-clock mr-1" aria-hidden="true"></i>{{ userDateDiffForHumans($release->adddate) }}
                         </span>
                     @endif
 
                     @if(($release->haspreview ?? 0) == 1)
                         <button type="button"
-                                class="preview-badge inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800 transition cursor-pointer"
+                                class="preview-badge inline-flex cursor-pointer items-center rounded bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800 transition hover:bg-purple-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 dark:bg-purple-900 dark:text-purple-200 dark:hover:bg-purple-800"
                                 data-guid="{{ $release->guid }}"
                                 data-image-url="{{ getImageAssetUrl('preview', $release->guid . '_thumb') }}"
-                                title="View preview image">
-                            <i class="fas fa-image mr-1"></i> Preview
+                                aria-label="Preview {{ $release->searchname }}">
+                            <i class="fas fa-image mr-1" aria-hidden="true"></i>Preview
                         </button>
                     @endif
                 </div>
             </div>
 
-            {{-- Action Buttons --}}
-            <div class="release-actions flex flex-wrap items-center gap-2 {{ $layout == 1 ? 'shrink-0' : 'mt-2' }}">
+            <div class="release-actions">
                 <a href="{{ url('/getnzb/' . $release->guid) }}"
-                   class="release-action-sm release-action-download">
-                    <i class="fas fa-download mr-1"></i> Download
+                   class="release-action-sm release-action-download focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+                   aria-label="Download {{ $release->searchname }}">
+                    <i class="fas fa-download" aria-hidden="true"></i><span>Download</span>
                 </a>
 
                 <button type="button"
-                        class="add-to-cart release-action-sm release-action-primary"
-                        data-guid="{{ $release->guid }}">
-                    <i class="fas fa-shopping-cart mr-1"></i> Cart
+                        class="add-to-cart release-action-sm release-action-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                        data-guid="{{ $release->guid }}"
+                        aria-label="Add {{ $release->searchname }} to cart">
+                    <i class="fas fa-cart-plus" aria-hidden="true"></i><span>Cart</span>
                 </button>
 
                 <a href="{{ url('/details/' . $release->guid) }}"
-                   class="release-action-sm release-action-muted">
-                    <i class="fas fa-info-circle mr-1"></i> Details
+                   class="release-action-sm release-action-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500"
+                   aria-label="View details for {{ $release->searchname }}">
+                    <i class="fas fa-circle-info" aria-hidden="true"></i><span>Details</span>
                 </a>
 
                 @if($release->id)
@@ -73,5 +69,5 @@
                 @endif
             </div>
         </div>
-    </div>
+    </article>
 @endif
diff --git a/resources/views/movies/trending.blade.php b/resources/views/movies/trending.blade.php
index 7f4fc07b9..c34bd9130 100644
--- a/resources/views/movies/trending.blade.php
+++ b/resources/views/movies/trending.blade.php
@@ -2,33 +2,17 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <x-breadcrumb :items="[
-        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
-        ['label' => 'Movies', 'url' => route('Movies')],
-        ['label' => 'Trending'],
-    ]" />
-
-    <!-- Header -->
-    <div class="px-6 py-6 bg-primary-600 text-white">
-        <div class="flex items-center justify-between">
-            <div>
-                <h1 class="text-3xl font-bold mb-2">
-                    <i class="fas fa-fire mr-2"></i>Trending Movies
-                </h1>
-                <p class="text-primary-100">Most downloaded movies in the last 48 hours - Updated every hour</p>
-            </div>
-            <div class="text-right flex gap-2">
-                @if(auth()->check())
-                    <a href="{{ url('/rss/trending-movies?dl=1&api_token=' . auth()->user()->api_token) }}" class="inline-flex items-center px-4 py-2 bg-primary-700 hover:bg-primary-800 text-white rounded-lg transition shadow-md" title="RSS Feed">
-                        <i class="fas fa-rss mr-2"></i> RSS Feed
-                    </a>
-                @endif
-                <a href="{{ route('Movies') }}" class="inline-flex items-center px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg transition">
-                    <i class="fas fa-film mr-2"></i> Browse All Movies
-                </a>
-            </div>
-        </div>
-    </div>
+    <x-page-header title="Trending movies" eyebrow="Popular right now" description="Most downloaded movies in the last 48 hours, refreshed every hour." icon="fas fa-fire">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-ranking-star" aria-hidden="true"></i>{{ isset($trendingMovies) ? number_format($trendingMovies->count()) : 0 }} trending</span>
+        </x-slot:stats>
+        <x-slot:actions>
+            @if(auth()->check())
+                <a href="{{ url('/rss/trending-movies?dl=1&api_token='.auth()->user()->api_token) }}" class="workspace-hero__action" title="RSS Feed"><i class="fas fa-rss" aria-hidden="true"></i>RSS Feed</a>
+            @endif
+            <a href="{{ route('Movies') }}" class="workspace-hero__action"><i class="fas fa-film" aria-hidden="true"></i>Browse all movies</a>
+        </x-slot:actions>
+    </x-page-header>
 
     <!-- Trending Movies List -->
     @if(isset($trendingMovies) && $trendingMovies->count() > 0)
@@ -163,4 +147,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/movies/viewmoviefull.blade.php b/resources/views/movies/viewmoviefull.blade.php
index 3744192db..0ae43ed78 100644
--- a/resources/views/movies/viewmoviefull.blade.php
+++ b/resources/views/movies/viewmoviefull.blade.php
@@ -2,11 +2,16 @@
 
 @section('content')
 <div class="movie-detail-page bg-white dark:bg-gray-800 rounded-xl shadow-sm">
-    <x-breadcrumb :items="[
-        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
-        ['label' => 'Movies', 'url' => route('Movies')],
-        ['label' => $movie['title'] ?? 'Movie Details'],
-    ]" />
+    <x-page-header :title="$movie['title'] ?? 'Movie details'" eyebrow="Movie information" description="Explore the movie metadata, synopsis, ratings, and related release information." icon="fas fa-clapperboard">
+        <x-slot:stats>
+            @if(!empty($movie['year'] ?? null))
+                <span class="workspace-hero__stat"><i class="fas fa-calendar" aria-hidden="true"></i>{{ $movie['year'] }}</span>
+            @endif
+            @if(!empty($movie['rating'] ?? null))
+                <span class="workspace-hero__stat"><i class="fas fa-star" aria-hidden="true"></i>{{ $movie['rating'] }}/10</span>
+            @endif
+        </x-slot:stats>
+    </x-page-header>
 
     @if(isset($movie))
         <div class="px-6 py-6">
@@ -24,8 +29,6 @@
 
                 <!-- Movie Details -->
                 <div class="lg:col-span-2">
-                    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ $movie['title'] ?? 'Unknown Title' }}</h1>
-
                     @if(!empty($movie['tagline'] ?? null))
                         <p class="text-lg text-gray-600 dark:text-gray-400 italic mb-4">"{{ $movie['tagline'] }}"</p>
                     @endif
@@ -243,4 +246,3 @@
 </div>
 
 @endsection
-
diff --git a/resources/views/movies/viewmovietrailer.blade.php b/resources/views/movies/viewmovietrailer.blade.php
index f1b2c22aa..971c633eb 100644
--- a/resources/views/movies/viewmovietrailer.blade.php
+++ b/resources/views/movies/viewmovietrailer.blade.php
@@ -2,16 +2,10 @@
 
 @section('content')
 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
-    <x-breadcrumb :items="[
-        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
-        ['label' => 'Movies', 'url' => route('Movies')],
-        ['label' => 'Trailer'],
-    ]" />
+    <x-page-header :title="$movie['title'] ?? 'Movie trailer'" current="Trailer" eyebrow="Watch the preview" description="Watch the available trailer and review the key details for this movie." icon="fas fa-circle-play" />
 
     <div class="px-6 py-6">
         @if(isset($movie))
-            <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-6">{{ $movie['title'] ?? 'Movie Trailer' }}</h1>
-
             @if(isset($movie['trailer']) && $movie['trailer'])
                 <div class="aspect-w-16 aspect-h-9 mb-6">
                     <iframe src="https://www.youtube.com/embed/{{ $movie['trailer'] }}"
@@ -71,4 +65,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/music/index.blade.php b/resources/views/music/index.blade.php
index ff956304a..4f2bee2bb 100644
--- a/resources/views/music/index.blade.php
+++ b/resources/views/music/index.blade.php
@@ -6,20 +6,12 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav aria-label="breadcrumb">
-            <ol class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
-                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Home</a></li>
-                <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                <li><a href="{{ url('/browse/Audio') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Audio</a></li>
-                @if(!empty($categorytitle) && $categorytitle !== 'All')
-                    <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                    <li class="text-gray-500 dark:text-gray-400">{{ $categorytitle }}</li>
-                @endif
-            </ol>
-        </nav>
-    </div>
+    <x-page-header title="Music" :current="!empty($categorytitle) ? $categorytitle : 'All audio'" eyebrow="Listen and discover" description="Browse indexed music and refine the catalog by artist, title, genre, or year." icon="fas fa-headphones">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-compact-disc" aria-hidden="true"></i>{{ number_format($results->total()) }} releases</span>
+            <span class="workspace-hero__stat"><i class="fas fa-folder-open" aria-hidden="true"></i>{{ $categorytitle ?: 'All audio' }}</span>
+        </x-slot:stats>
+    </x-page-header>
 
     <div class="px-6 py-4">
         <!-- Search Filters -->
diff --git a/resources/views/mymovies/add.blade.php b/resources/views/mymovies/add.blade.php
index 51741ad0a..66eaac7ae 100644
--- a/resources/views/mymovies/add.blade.php
+++ b/resources/views/mymovies/add.blade.php
@@ -1,23 +1,11 @@
 <div class="max-w-4xl mx-auto">
-    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 mb-6">
-        <!-- Header -->
-        <div class="bg-linear-to-r from-blue-600 to-blue-700 px-6 py-4">
-            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-                <h3 class="text-xl font-bold text-white flex items-center">
-                    <i class="fa fa-film mr-2"></i>{{ ucfirst($type ?? 'add') }} Movie to Watchlist
-                </h3>
-                <nav aria-label="breadcrumb">
-                    <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
-                        <li><i class="fas fa-chevron-right text-xs"></i></li>
-                        <li><a href="{{ url('/mymovies') }}" class="hover:text-white transition">My Movies</a></li>
-                        <li><i class="fas fa-chevron-right text-xs"></i></li>
-                        <li class="text-white font-medium">{{ ucfirst($type ?? 'add') }} Movie</li>
-                    </ol>
-                </nav>
-            </div>
-        </div>
+    <x-page-header :title="ucfirst($type ?? 'add') . ' movie'" eyebrow="Movie watchlist" description="Choose how this movie should be organized in your saved collection." icon="fas fa-film">
+        <x-slot:actions>
+            <a href="{{ url('/mymovies') }}" class="workspace-hero__action"><i class="fas fa-arrow-left" aria-hidden="true"></i>My movies</a>
+        </x-slot:actions>
+    </x-page-header>
 
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 mb-6">
         <div class="p-6">
             <div class="mb-6">
                 <div class="flex items-center gap-4 mb-4">
@@ -90,21 +78,6 @@
 </div>
 <div class="max-w-4xl mx-auto">
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
-        <div class="bg-linear-to-r from-blue-600 to-blue-700 px-6 py-4">
-            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-                <h3 class="text-xl font-bold text-white flex items-center">
-                    <i class="fa fa-film mr-2"></i>My Movies
-                </h3>
-                <nav aria-label="breadcrumb">
-                    <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
-                        <li><i class="fas fa-chevron-right text-xs"></i></li>
-                        <li class="text-white font-medium">My Movies</li>
-                    </ol>
-                </nav>
-            </div>
-        </div>
-
         <div class="p-6">
             <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
                 <div class="flex items-start">
diff --git a/resources/views/mymovies/index.blade.php b/resources/views/mymovies/index.blade.php
index 868b2ba02..b2b044b01 100644
--- a/resources/views/mymovies/index.blade.php
+++ b/resources/views/mymovies/index.blade.php
@@ -1,25 +1,13 @@
 
 <div class="max-w-7xl mx-auto">
-    <!-- Header Section -->
-    <div class="header-gradient rounded-xl shadow-lg mb-6 overflow-hidden">
-        <div class="px-8 py-6">
-            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-                <div>
-                    <h1 class="text-3xl font-bold text-white flex items-center">
-                        <i class="fa fa-film mr-3"></i>My Movies
-                    </h1>
-                    <p class="text-blue-100 mt-2">Manage your movie wishlist and get automatic updates</p>
-                </div>
-                <nav aria-label="breadcrumb">
-                    <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
-                        <li><i class="fas fa-chevron-right text-xs"></i></li>
-                        <li class="text-white font-medium">My Movies</li>
-                    </ol>
-                </nav>
-            </div>
-        </div>
-    </div>
+    <x-page-header title="My movies" eyebrow="Your watchlist" description="Manage saved movies and receive automatic updates when releases become available." icon="fas fa-film">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-bookmark" aria-hidden="true"></i>{{ number_format(count($movies ?? [])) }} saved</span>
+        </x-slot:stats>
+        <x-slot:actions>
+            <a href="{{ url('/browse/Movies') }}" class="workspace-hero__action"><i class="fas fa-list" aria-hidden="true"></i>Browse all movies</a>
+        </x-slot:actions>
+    </x-page-header>
 
     <!-- RSS Feed Info Card -->
     <div class="info-card-gradient border-l-4 border-blue-500 rounded-lg p-5 mb-6 shadow">
diff --git a/resources/views/myshows/add.blade.php b/resources/views/myshows/add.blade.php
index 6deba7633..56e360eea 100644
--- a/resources/views/myshows/add.blade.php
+++ b/resources/views/myshows/add.blade.php
@@ -1,23 +1,11 @@
 <div class="max-w-4xl mx-auto">
-    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 mb-6">
-        <!-- Header -->
-        <div class="bg-linear-to-r from-blue-600 to-blue-700 px-6 py-4">
-            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-                <h3 class="text-xl font-bold text-white flex items-center">
-                    <i class="fa fa-tv mr-2"></i>{{ ucfirst($type ?? 'add') }} Show to Watchlist
-                </h3>
-                <nav aria-label="breadcrumb">
-                    <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
-                        <li><i class="fas fa-chevron-right text-xs"></i></li>
-                        <li><a href="{{ url('/myshows') }}" class="hover:text-white transition">My Shows</a></li>
-                        <li><i class="fas fa-chevron-right text-xs"></i></li>
-                        <li class="text-white font-medium">{{ ucfirst($type ?? 'add') }} Show</li>
-                    </ol>
-                </nav>
-            </div>
-        </div>
+    <x-page-header :title="ucfirst($type ?? 'add') . ' TV show'" eyebrow="Series watchlist" description="Choose how this show should be organized in your followed collection." icon="fas fa-tv">
+        <x-slot:actions>
+            <a href="{{ url('/myshows') }}" class="workspace-hero__action"><i class="fas fa-arrow-left" aria-hidden="true"></i>My shows</a>
+        </x-slot:actions>
+    </x-page-header>
 
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 mb-6">
         <div class="p-6">
             <div class="mb-6">
                 <div class="flex items-center gap-4 mb-4">
diff --git a/resources/views/myshows/index.blade.php b/resources/views/myshows/index.blade.php
index 8ec8185ab..611e58991 100644
--- a/resources/views/myshows/index.blade.php
+++ b/resources/views/myshows/index.blade.php
@@ -1,25 +1,14 @@
 
 <div class="max-w-7xl mx-auto">
-    <!-- Header Section -->
-    <div class="header-gradient rounded-xl shadow-lg mb-6 overflow-hidden">
-        <div class="px-8 py-6">
-            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
-                <div>
-                    <h1 class="text-3xl font-bold text-white flex items-center">
-                        <i class="fa fa-tv mr-3"></i>My TV Shows
-                    </h1>
-                    <p class="text-blue-100 mt-2">Manage your favorite TV series and get automatic updates</p>
-                </div>
-                <nav aria-label="breadcrumb">
-                    <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
-                        <li><i class="fas fa-chevron-right text-xs"></i></li>
-                        <li class="text-white font-medium">My TV Shows</li>
-                    </ol>
-                </nav>
-            </div>
-        </div>
-    </div>
+    <x-page-header title="My TV shows" eyebrow="Your watchlist" description="Manage followed series and keep automatic updates flowing through your personal feed." icon="fas fa-tv">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-bookmark" aria-hidden="true"></i>{{ number_format(count($shows ?? [])) }} followed</span>
+        </x-slot:stats>
+        <x-slot:actions>
+            <a href="{{ url('/browse/TV') }}" class="workspace-hero__action"><i class="fas fa-list" aria-hidden="true"></i>Browse all series</a>
+            <a href="{{ url('/myshows/browse') }}" class="workspace-hero__action"><i class="fas fa-search" aria-hidden="true"></i>View releases</a>
+        </x-slot:actions>
+    </x-page-header>
 
     <!-- RSS Feed Info Card -->
     <div class="info-card-gradient border-l-4 border-blue-500 rounded-lg p-5 mb-6 shadow">
@@ -238,4 +227,3 @@
         </div>
     @endif
 </div>
-
diff --git a/resources/views/nfo/view.blade.php b/resources/views/nfo/view.blade.php
index 2f9ce7e29..ec7e6c75b 100644
--- a/resources/views/nfo/view.blade.php
+++ b/resources/views/nfo/view.blade.php
@@ -4,20 +4,15 @@
     @extends('layouts.main')
 
     @section('content')
-    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
-        <div class="mb-6">
-            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">NFO File</h1>
-            <nav class="text-sm text-gray-600 dark:text-gray-400">
-                <a href="{{ url('/') }}" class="hover:text-blue-600">Home</a>
-                <i class="fas fa-chevron-right mx-2 text-xs"></i>
-                @if(isset($rel))
-                    <a href="{{ url('/details/' . $rel['guid']) }}" class="hover:text-blue-600 wrap-break-word break-all">{{ $rel['searchname'] }}</a>
-                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
-                @endif
-                <span>NFO</span>
-            </nav>
-        </div>
+    <x-page-header title="NFO file" eyebrow="Release metadata" description="Review the original text metadata supplied with this release." icon="fas fa-file-lines">
+        @if(isset($rel))
+            <x-slot:actions>
+                <a href="{{ url('/details/' . $rel['guid']) }}" class="workspace-hero__action"><i class="fas fa-arrow-left" aria-hidden="true"></i>Back to release</a>
+            </x-slot:actions>
+        @endif
+    </x-page-header>
 
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
         <div class="bg-gray-900 text-green-400 p-6 rounded-lg overflow-x-auto font-mono text-sm">
             <pre class="whitespace-pre">{{ $nfo['nfoUTF'] ?? $nfo['nfo'] ?? 'NFO content not available' }}</pre>
         </div>
@@ -32,4 +27,3 @@
     </div>
     @endsection
 @endif
-
diff --git a/resources/views/partials/header-menu.blade.php b/resources/views/partials/header-menu.blade.php
index 194c1bbf6..59e42ca36 100644
--- a/resources/views/partials/header-menu.blade.php
+++ b/resources/views/partials/header-menu.blade.php
@@ -170,9 +170,9 @@
                 </button>
 
                 <!-- Desktop Search Form with Autocomplete (visible at lg+) -->
-                <form method="GET" action="{{ route('search') }}" class="layout-primary-nav__search relative hidden items-center lg:flex" id="header-search-form" role="search">
+                <form method="GET" action="{{ route('search') }}" class="layout-primary-nav__search relative hidden items-center gap-2 lg:flex" id="header-search-form" role="search">
                     <label for="header-search-category" class="sr-only">Search category</label>
-                    <select id="header-search-category" name="t" class="bg-gray-700 text-white text-sm rounded-l-lg px-3 py-2 border-r border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    <select id="header-search-category" name="t" class="rounded-lg border border-gray-600 bg-gray-700 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                         <option value="-1">All</option>
                         @if(isset($parentcatlist))
                             @foreach($parentcatlist as $parentcat)
@@ -191,12 +191,12 @@
                                value="{{ $header_menu_search ?? '' }}"
                                placeholder="Search releases"
                                autocomplete="off"
-                               class="bg-gray-700 text-white text-sm px-3 py-2 w-40 xl:w-48 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                               class="w-40 rounded-lg border border-gray-600 bg-gray-700 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-primary-500 xl:w-48">
                         <!-- Autocomplete dropdown for header -->
                         <div id="header-autocomplete-dropdown" class="hidden absolute z-50 w-64 mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto right-0">
                         </div>
                     </div>
-                    <button type="submit" class="bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 text-white px-4 py-2 rounded-r-lg transition" aria-label="Search releases">
+                    <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-white transition hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-800" aria-label="Search releases">
                         <i class="fa fa-search" aria-hidden="true"></i>
                     </button>
                 </form>
diff --git a/resources/views/partials/scheme-switcher.blade.php b/resources/views/partials/scheme-switcher.blade.php
index 7d2ff9517..5a548cbac 100644
--- a/resources/views/partials/scheme-switcher.blade.php
+++ b/resources/views/partials/scheme-switcher.blade.php
@@ -1,16 +1,28 @@
 {{-- Shared color scheme switcher. JS hooks by button class (see alpine/stores/theme.js). Expects: $switcherId, $btnClass, $mobile (bool) --}}
-@php $currentScheme = $userColorScheme ?? 'blue'; @endphp
-<div class="flex items-center justify-center {{ $mobile ? 'gap-3' : 'gap-2' }}" id="{{ $switcherId }}">
-    <button type="button" data-scheme="blue" title="Blue"
-        class="{{ $btnClass }} {{ $mobile ? 'w-9 h-9' : 'w-8 h-8' }} rounded-full bg-blue-600 transition {{ $mobile ? 'touch-target ' : '' }}ring-offset-2 ring-offset-gray-900 {{ $currentScheme === 'blue' ? 'ring-2 ring-primary-500' : '' }}">
-        <span class="sr-only">Blue</span>
-    </button>
-    <button type="button" data-scheme="emerald" title="Emerald"
-        class="{{ $btnClass }} {{ $mobile ? 'w-9 h-9' : 'w-8 h-8' }} rounded-full bg-emerald-600 transition {{ $mobile ? 'touch-target ' : '' }}ring-offset-2 ring-offset-gray-900 {{ $currentScheme === 'emerald' ? 'ring-2 ring-primary-500' : '' }}">
-        <span class="sr-only">Emerald</span>
-    </button>
-    <button type="button" data-scheme="violet" title="Violet"
-        class="{{ $btnClass }} {{ $mobile ? 'w-9 h-9' : 'w-8 h-8' }} rounded-full bg-violet-600 transition {{ $mobile ? 'touch-target ' : '' }}ring-offset-2 ring-offset-gray-900 {{ $currentScheme === 'violet' ? 'ring-2 ring-primary-500' : '' }}">
-        <span class="sr-only">Violet</span>
-    </button>
+@php
+    $currentScheme = $userColorScheme ?? 'blue';
+    $colorSchemes = [
+        ['value' => 'blue', 'label' => 'Blue', 'swatch' => 'bg-blue-600'],
+        ['value' => 'indigo', 'label' => 'Indigo', 'swatch' => 'bg-indigo-600'],
+        ['value' => 'cyan', 'label' => 'Cyan', 'swatch' => 'bg-cyan-600'],
+        ['value' => 'teal', 'label' => 'Teal', 'swatch' => 'bg-teal-600'],
+        ['value' => 'emerald', 'label' => 'Emerald', 'swatch' => 'bg-emerald-600'],
+        ['value' => 'violet', 'label' => 'Violet', 'swatch' => 'bg-violet-600'],
+        ['value' => 'pink', 'label' => 'Pink', 'swatch' => 'bg-pink-600'],
+        ['value' => 'rose', 'label' => 'Rose', 'swatch' => 'bg-rose-600'],
+        ['value' => 'red', 'label' => 'Red', 'swatch' => 'bg-red-600'],
+        ['value' => 'orange', 'label' => 'Orange', 'swatch' => 'bg-orange-600'],
+        ['value' => 'amber', 'label' => 'Amber', 'swatch' => 'bg-amber-600'],
+    ];
+@endphp
+<div class="grid grid-cols-4 place-items-center {{ $mobile ? 'gap-3' : 'gap-2' }}" id="{{ $switcherId }}">
+    @foreach($colorSchemes as $scheme)
+        <button type="button"
+            data-scheme="{{ $scheme['value'] }}"
+            title="{{ $scheme['label'] }}"
+            aria-pressed="{{ $currentScheme === $scheme['value'] ? 'true' : 'false' }}"
+            class="{{ $btnClass }} {{ $mobile ? 'w-9 h-9' : 'w-8 h-8' }} rounded-full {{ $scheme['swatch'] }} transition {{ $mobile ? 'touch-target ' : '' }}ring-offset-2 ring-offset-gray-900 {{ $currentScheme === $scheme['value'] ? 'ring-2 ring-primary-500' : '' }}">
+            <span class="sr-only">{{ $scheme['label'] }}</span>
+        </button>
+    @endforeach
 </div>
diff --git a/resources/views/partials/theme-init.blade.php b/resources/views/partials/theme-init.blade.php
index 118a7953f..23a6418b4 100644
--- a/resources/views/partials/theme-init.blade.php
+++ b/resources/views/partials/theme-init.blade.php
@@ -16,6 +16,10 @@
         var t = localStorage.getItem('theme') || 'light';
         var scheme = localStorage.getItem('color_scheme') || 'blue';
     @endauth
+    var allowedSchemes = ['blue', 'indigo', 'cyan', 'teal', 'emerald', 'violet', 'pink', 'rose', 'red', 'orange', 'amber'];
+    if (allowedSchemes.indexOf(scheme) === -1) {
+        scheme = 'blue';
+    }
     var isDark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
     if (isDark) {
         d.classList.add('dark');
@@ -34,4 +38,20 @@ html[data-color-scheme="emerald"], html[data-color-scheme="emerald"] body { back
 html.dark[data-color-scheme="emerald"], html.dark[data-color-scheme="emerald"] body { background-color: #071a12; color: #d1fae5; }
 html[data-color-scheme="violet"], html[data-color-scheme="violet"] body { background-color: #faf5ff; color: #1e293b; }
 html.dark[data-color-scheme="violet"], html.dark[data-color-scheme="violet"] body { background-color: #120b20; color: #e9d5ff; }
+html[data-color-scheme="rose"], html[data-color-scheme="rose"] body { background-color: #fff1f2; color: #1e293b; }
+html.dark[data-color-scheme="rose"], html.dark[data-color-scheme="rose"] body { background-color: #1f0a12; color: #fecdd3; }
+html[data-color-scheme="amber"], html[data-color-scheme="amber"] body { background-color: #fffbeb; color: #1e293b; }
+html.dark[data-color-scheme="amber"], html.dark[data-color-scheme="amber"] body { background-color: #1c1304; color: #fde68a; }
+html[data-color-scheme="cyan"], html[data-color-scheme="cyan"] body { background-color: #ecfeff; color: #1e293b; }
+html.dark[data-color-scheme="cyan"], html.dark[data-color-scheme="cyan"] body { background-color: #06191d; color: #cffafe; }
+html[data-color-scheme="indigo"], html[data-color-scheme="indigo"] body { background-color: #eef2ff; color: #1e293b; }
+html.dark[data-color-scheme="indigo"], html.dark[data-color-scheme="indigo"] body { background-color: #0b1024; color: #c7d2fe; }
+html[data-color-scheme="teal"], html[data-color-scheme="teal"] body { background-color: #f0fdfa; color: #1e293b; }
+html.dark[data-color-scheme="teal"], html.dark[data-color-scheme="teal"] body { background-color: #061a18; color: #ccfbf1; }
+html[data-color-scheme="orange"], html[data-color-scheme="orange"] body { background-color: #fff7ed; color: #1e293b; }
+html.dark[data-color-scheme="orange"], html.dark[data-color-scheme="orange"] body { background-color: #1f1007; color: #ffedd5; }
+html[data-color-scheme="red"], html[data-color-scheme="red"] body { background-color: #fef2f2; color: #1e293b; }
+html.dark[data-color-scheme="red"], html.dark[data-color-scheme="red"] body { background-color: #200a0a; color: #fee2e2; }
+html[data-color-scheme="pink"], html[data-color-scheme="pink"] body { background-color: #fdf2f8; color: #1e293b; }
+html.dark[data-color-scheme="pink"], html.dark[data-color-scheme="pink"] body { background-color: #200a17; color: #fce7f3; }
 </style>
diff --git a/resources/views/privacy-center/index.blade.php b/resources/views/privacy-center/index.blade.php
index 3bb7de1b7..e7381ac92 100644
--- a/resources/views/privacy-center/index.blade.php
+++ b/resources/views/privacy-center/index.blade.php
@@ -2,14 +2,9 @@
 
 @section('content')
 <div class="max-w-5xl mx-auto space-y-6">
-    <div class="surface-panel rounded-xl shadow-sm overflow-hidden">
-        <div class="surface-panel-alt border-b px-6 py-4">
-            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
-                <i class="fas fa-shield-alt mr-2 text-primary-600 dark:text-primary-400"></i>Privacy Center
-            </h1>
-            <p class="text-gray-600 dark:text-gray-400 mt-1">Export your account data and manage GDPR requests.</p>
-        </div>
+    <x-page-header title="Privacy center" eyebrow="Your data and privacy" description="Export your account data and manage GDPR requests from one place." icon="fas fa-shield-alt" />
 
+    <div class="surface-panel rounded-xl shadow-sm overflow-hidden">
         @if(session('success'))
             <div class="mx-6 mt-6 p-4 bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 text-green-800 dark:text-green-200 rounded">
                 <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
@@ -126,4 +121,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/privacy-policy.blade.php b/resources/views/privacy-policy.blade.php
index c21aaf44e..aa8f716b0 100644
--- a/resources/views/privacy-policy.blade.php
+++ b/resources/views/privacy-policy.blade.php
@@ -3,9 +3,9 @@
 @section('content')
 <div class="container mx-auto px-4 py-6">
     <div class="max-w-4xl mx-auto">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+        <div class="auth-card overflow-hidden rounded-2xl border shadow-sm">
             <!-- Header -->
-            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <div class="workspace-document-header border-b border-gray-200 px-6 py-5 dark:border-gray-700">
                 <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Privacy Policy</h1>
                 <nav aria-label="breadcrumb">
                     <ol class="flex text-sm text-gray-600 dark:text-gray-400">
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index 014f517c2..ad2f75ce6 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -1,14 +1,14 @@
 @extends('layouts.main')
 
 @section('content')
-<div class="max-w-4xl mx-auto">
-    <div class="surface-panel rounded-xl shadow-sm">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h1 class="text-2xl font-bold text-gray-800">Edit Profile</h1>
-            <p class="text-gray-600 dark:text-gray-400 mt-1">Update your account settings and preferences</p>
-        </div>
+<div class="w-full">
+    <x-page-header title="Edit profile" eyebrow="Account settings" description="Update your account, security, downloads, and browsing preferences." icon="fas fa-user-pen">
+        <x-slot:actions>
+            <a href="{{ route('profile') }}" class="workspace-hero__action"><i class="fas fa-arrow-left" aria-hidden="true"></i>Back to profile</a>
+        </x-slot:actions>
+    </x-page-header>
 
+    <div class="surface-panel rounded-xl shadow-sm">
         <!-- Messages -->
         @if(session('success'))
             <div class="mx-6 mt-6 p-4 bg-green-50 border-l-4 border-green-500 text-green-800 rounded">
@@ -128,26 +128,35 @@
                     <i class="fas fa-swatchbook mr-2 text-primary-600"></i>Color Scheme
                 </h3>
                 <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Choose the main color scheme for the site (sidebar, header, buttons, and accents).</p>
-                <div class="flex flex-wrap items-center gap-4">
-                    @php $currentScheme = $user->color_scheme ?? 'blue'; @endphp
-                    <label class="flex items-center gap-2 cursor-pointer">
-                        <input type="radio" name="color_scheme" value="blue" {{ $currentScheme === 'blue' ? 'checked' : '' }}
-                            class="sr-only profile-scheme-radio" data-scheme="blue">
-                        <span class="w-10 h-10 rounded-full bg-blue-600 ring-2 ring-offset-2 transition {{ $currentScheme === 'blue' ? 'ring-primary-500 ring-offset-gray-100 dark:ring-offset-gray-800' : 'ring-transparent ring-offset-gray-100 dark:ring-offset-gray-800 hover:ring-gray-300' }}" aria-hidden="true"></span>
-                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Blue</span>
-                    </label>
-                    <label class="flex items-center gap-2 cursor-pointer">
-                        <input type="radio" name="color_scheme" value="emerald" {{ $currentScheme === 'emerald' ? 'checked' : '' }}
-                            class="sr-only profile-scheme-radio" data-scheme="emerald">
-                        <span class="w-10 h-10 rounded-full bg-emerald-600 ring-2 ring-offset-2 transition {{ $currentScheme === 'emerald' ? 'ring-primary-500 ring-offset-gray-100 dark:ring-offset-gray-800' : 'ring-transparent ring-offset-gray-100 dark:ring-offset-gray-800 hover:ring-gray-300' }}" aria-hidden="true"></span>
-                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Emerald</span>
-                    </label>
-                    <label class="flex items-center gap-2 cursor-pointer">
-                        <input type="radio" name="color_scheme" value="violet" {{ $currentScheme === 'violet' ? 'checked' : '' }}
-                            class="sr-only profile-scheme-radio" data-scheme="violet">
-                        <span class="w-10 h-10 rounded-full bg-violet-600 ring-2 ring-offset-2 transition {{ $currentScheme === 'violet' ? 'ring-primary-500 ring-offset-gray-100 dark:ring-offset-gray-800' : 'ring-transparent ring-offset-gray-100 dark:ring-offset-gray-800 hover:ring-gray-300' }}" aria-hidden="true"></span>
-                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Violet</span>
-                    </label>
+                @php
+                    $currentScheme = $user->color_scheme ?? 'blue';
+                    $colorSchemes = [
+                        ['value' => 'blue', 'label' => 'Blue', 'swatch' => 'bg-blue-600'],
+                        ['value' => 'indigo', 'label' => 'Indigo', 'swatch' => 'bg-indigo-600'],
+                        ['value' => 'cyan', 'label' => 'Cyan', 'swatch' => 'bg-cyan-600'],
+                        ['value' => 'teal', 'label' => 'Teal', 'swatch' => 'bg-teal-600'],
+                        ['value' => 'emerald', 'label' => 'Emerald', 'swatch' => 'bg-emerald-600'],
+                        ['value' => 'violet', 'label' => 'Violet', 'swatch' => 'bg-violet-600'],
+                        ['value' => 'pink', 'label' => 'Pink', 'swatch' => 'bg-pink-600'],
+                        ['value' => 'rose', 'label' => 'Rose', 'swatch' => 'bg-rose-600'],
+                        ['value' => 'red', 'label' => 'Red', 'swatch' => 'bg-red-600'],
+                        ['value' => 'orange', 'label' => 'Orange', 'swatch' => 'bg-orange-600'],
+                        ['value' => 'amber', 'label' => 'Amber', 'swatch' => 'bg-amber-600'],
+                    ];
+                @endphp
+                <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4">
+                    @foreach($colorSchemes as $scheme)
+                        <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-gray-200 p-3 transition hover:border-primary-300 hover:bg-primary-50 dark:border-gray-700 dark:hover:border-primary-700 dark:hover:bg-primary-950/30">
+                            <input type="radio"
+                                name="color_scheme"
+                                value="{{ $scheme['value'] }}"
+                                {{ $currentScheme === $scheme['value'] ? 'checked' : '' }}
+                                class="sr-only profile-scheme-radio"
+                                data-scheme="{{ $scheme['value'] }}">
+                            <span class="h-10 w-10 shrink-0 rounded-full {{ $scheme['swatch'] }} ring-2 ring-offset-2 transition {{ $currentScheme === $scheme['value'] ? 'ring-primary-500 ring-offset-gray-100 dark:ring-offset-gray-800' : 'ring-transparent ring-offset-gray-100 hover:ring-gray-300 dark:ring-offset-gray-800' }}" aria-hidden="true"></span>
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $scheme['label'] }}</span>
+                        </label>
+                    @endforeach
                 </div>
                 <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
                     <i class="fas fa-info-circle mr-1"></i>Save your profile to apply the color scheme. You can also change it from the user menu in the header.
@@ -485,4 +494,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/profile/index.blade.php b/resources/views/profile/index.blade.php
index b16d2cd76..6c7f97ec0 100644
--- a/resources/views/profile/index.blade.php
+++ b/resources/views/profile/index.blade.php
@@ -1,23 +1,23 @@
 @extends('layouts.main')
 
 @section('content')
-<!-- Breadcrumb -->
-<nav class="mb-4 text-sm" aria-label="breadcrumb">
-    <ol class="flex items-center space-x-2">
-        <li><a href="{{ url('/') }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800">Home</a></li>
-        <li class="text-gray-400">/</li>
-        <li><a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-800">Profile</a></li>
-        <li class="text-gray-400">/</li>
-        <li class="text-gray-600">{{ $user->username }}</li>
-    </ol>
-</nav>
+<x-page-header :title="($publicview ?? false) ? $user->username : 'Your profile'" :current="$user->username" eyebrow="Account overview" description="Review account details, preferences, and download access." icon="fas fa-user-circle">
+    @if(($isadmin ?? false) || !$publicview)
+        <x-slot:actions>
+            <a href="{{ route('profileedit') }}" class="workspace-hero__action"><i class="fas fa-user-pen" aria-hidden="true"></i>Edit profile</a>
+            @if(!($isadmin ?? false) && !$publicview)
+                <a href="{{ route('privacy-center.index') }}" class="workspace-hero__action"><i class="fas fa-shield-alt" aria-hidden="true"></i>Privacy center</a>
+            @endif
+        </x-slot:actions>
+    @endif
+</x-page-header>
 
 <div class="surface-panel rounded-xl shadow-sm overflow-hidden">
         <!-- Profile Header -->
         <div class="surface-panel-alt border-b px-6 py-4 flex justify-between items-center">
-            <h1 class="text-xl font-semibold text-gray-800">
+            <h2 class="text-xl font-semibold text-gray-800">
                 <i class="fas fa-user mr-2"></i>User Profile
-            </h1>
+            </h2>
             <div class="flex gap-2">
                 @if(($isadmin ?? false) || !$publicview)
                     <a href="{{ route('profileedit') }}" class="px-4 py-2 bg-green-600 dark:bg-green-700 text-white text-sm rounded hover:bg-green-700 dark:hover:bg-green-800 transition">
@@ -418,4 +418,3 @@
 
 
 @endsection
-
diff --git a/resources/views/rss/rssdesc.blade.php b/resources/views/rss/rssdesc.blade.php
index 239f46605..37b435f5c 100644
--- a/resources/views/rss/rssdesc.blade.php
+++ b/resources/views/rss/rssdesc.blade.php
@@ -1,12 +1,9 @@
 @extends('layouts.main')
 
 @section('content')
+<x-page-header :title="$title" eyebrow="Feeds and automation" description="Build authenticated RSS feeds for categories, saved content, and direct NZB downloads." icon="fas fa-rss" />
+
 <div class="surface-panel rounded-xl shadow-sm mb-6">
-    <div class="surface-panel-alt px-6 py-4 border-b rounded-t-lg">
-        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center">
-            <i class="fa fa-rss mr-2 text-primary-500 dark:text-primary-400"></i>{{ $title }}
-        </h3>
-    </div>
     <div class="p-6">
         <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 dark:text-gray-300">
             Here you can find RSS feeds for various categories and content types. These feeds provide either descriptions or
@@ -288,4 +285,3 @@
 
 {{-- Copy to clipboard functionality moved to csp-safe.js --}}
 @endsection
-
diff --git a/resources/views/series/trending.blade.php b/resources/views/series/trending.blade.php
index be45eab20..aeeca67bd 100644
--- a/resources/views/series/trending.blade.php
+++ b/resources/views/series/trending.blade.php
@@ -2,33 +2,17 @@
 
 @section('content')
 <div class="surface-panel rounded-xl shadow-sm">
-    <x-breadcrumb :items="[
-        ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
-        ['label' => 'TV Shows', 'url' => route('series')],
-        ['label' => 'Trending'],
-    ]" />
-
-    <!-- Header -->
-    <div class="px-6 py-6 bg-primary-600 text-white">
-        <div class="flex items-center justify-between">
-            <div>
-                <h1 class="text-3xl font-bold mb-2">
-                    <i class="fas fa-fire mr-2"></i>Trending TV Shows
-                </h1>
-                <p class="text-primary-100">Most downloaded TV shows in the last 48 hours - Updated every hour</p>
-            </div>
-            <div class="text-right flex gap-2">
-                @if(auth()->check())
-                    <a href="{{ url('/rss/trending-shows?dl=1&api_token=' . auth()->user()->api_token) }}" class="inline-flex items-center px-4 py-2 bg-primary-700 hover:bg-primary-800 text-white rounded-lg transition shadow-md" title="RSS Feed">
-                        <i class="fas fa-rss mr-2"></i> RSS Feed
-                    </a>
-                @endif
-                <a href="{{ route('series') }}" class="inline-flex items-center px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg transition">
-                    <i class="fas fa-tv mr-2"></i> Browse All TV Shows
-                </a>
-            </div>
-        </div>
-    </div>
+    <x-page-header title="Trending TV shows" eyebrow="Popular right now" description="Most downloaded TV shows in the last 48 hours, refreshed every hour." icon="fas fa-fire">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-ranking-star" aria-hidden="true"></i>{{ isset($trendingShows) ? number_format($trendingShows->count()) : 0 }} trending</span>
+        </x-slot:stats>
+        <x-slot:actions>
+            @if(auth()->check())
+                <a href="{{ url('/rss/trending-shows?dl=1&api_token=' . auth()->user()->api_token) }}" class="workspace-hero__action" title="RSS Feed"><i class="fas fa-rss" aria-hidden="true"></i>RSS feed</a>
+            @endif
+            <a href="{{ route('series') }}" class="workspace-hero__action"><i class="fas fa-tv" aria-hidden="true"></i>Browse all TV shows</a>
+        </x-slot:actions>
+    </x-page-header>
 
     <!-- Trending TV Shows List -->
     @if(isset($trendingShows) && $trendingShows->count() > 0)
diff --git a/resources/views/series/viewseries.blade.php b/resources/views/series/viewseries.blade.php
index e53573184..a52385d84 100644
--- a/resources/views/series/viewseries.blade.php
+++ b/resources/views/series/viewseries.blade.php
@@ -1,20 +1,17 @@
 @extends('layouts.main')
 
 @section('content')
-<div class="series-detail-page surface-panel rounded-xl shadow-sm">
-    <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <nav aria-label="breadcrumb">
-            <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
-                <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                <li><a href="{{ route('series') }}" class="hover:text-blue-600">TV Series</a></li>
-                <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                <li class="text-gray-500">{{ $seriestitles ?? '' }}</li>
-            </ol>
-        </nav>
-    </div>
+<x-page-header :title="!empty($seriestitles) ? $seriestitles : 'TV series'" eyebrow="Series details" description="Explore available seasons, episodes, and release information." icon="fas fa-tv">
+    <x-slot:stats>
+        <span class="workspace-hero__stat"><i class="fas fa-layer-group" aria-hidden="true"></i>{{ number_format($totalSeasonsAvailable ?? 0) }} seasons available</span>
+        <span class="workspace-hero__stat"><i class="fas fa-clapperboard" aria-hidden="true"></i>{{ number_format($episodeCount ?? 0) }} episodes available</span>
+    </x-slot:stats>
+    <x-slot:actions>
+        <a href="{{ route('series') }}" class="workspace-hero__action"><i class="fas fa-arrow-left" aria-hidden="true"></i>Back to TV shows</a>
+    </x-slot:actions>
+</x-page-header>
 
+<div class="series-detail-page surface-panel rounded-xl shadow-sm">
     <div class="px-6 py-4">
         @if(!empty($nodata))
             <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-yellow-800">
diff --git a/resources/views/series/viewserieslist.blade.php b/resources/views/series/viewserieslist.blade.php
index d82aed9b1..f5d43fce0 100644
--- a/resources/views/series/viewserieslist.blade.php
+++ b/resources/views/series/viewserieslist.blade.php
@@ -1,23 +1,18 @@
 @extends('layouts.main')
 
 @section('content')
-<div class="surface-panel rounded-xl shadow-sm">
-    <!-- Header -->
-    <div class="surface-panel-alt px-6 py-4 border-b">
-        <div class="flex justify-between items-center">
-            <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 flex items-center">
-                <i class="fa fa-tv mr-3 text-primary-600 dark:text-primary-400"></i>TV Series
-            </h3>
-            <nav aria-label="breadcrumb">
-                <ol class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
-                    <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-primary-600 dark:hover:text-primary-400">Home</a></li>
-                    <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
-                    <li class="text-gray-500 dark:text-gray-400">TV Series List</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
+<x-page-header title="TV series" eyebrow="Discover and follow" description="Browse available series, find a title, and manage the shows you follow." icon="fas fa-tv">
+    <x-slot:stats>
+        <span class="workspace-hero__stat"><i class="fas fa-list" aria-hidden="true"></i>{{ number_format(count($serieslist)) }} groups</span>
+        <span class="workspace-hero__stat"><i class="fas fa-font" aria-hidden="true"></i>{{ $seriesletter }} range</span>
+    </x-slot:stats>
+    <x-slot:actions>
+        <a href="{{ route('trending-tv') }}" class="workspace-hero__action"><i class="fas fa-fire" aria-hidden="true"></i>Trending shows</a>
+        <a href="{{ route('myshows') }}" class="workspace-hero__action"><i class="fas fa-list" aria-hidden="true"></i>My shows</a>
+    </x-slot:actions>
+</x-page-header>
 
+<div class="surface-panel rounded-xl shadow-sm">
     <div class="px-6 py-4">
         <!-- Alphabet navigation -->
         <div class="mb-4">
@@ -225,4 +220,3 @@
     </div>
 </div>
 @endsection
-
diff --git a/resources/views/status/index.blade.php b/resources/views/status/index.blade.php
index 7ea426a63..11c631814 100644
--- a/resources/views/status/index.blade.php
+++ b/resources/views/status/index.blade.php
@@ -47,9 +47,16 @@
 @endphp
 
 <div class="w-full max-w-5xl mx-auto">
+    <x-page-header title="Service status" eyebrow="Live system health" description="Current availability, performance, and incident updates for core services." icon="fas fa-heart-pulse">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-signal" aria-hidden="true"></i>{{ $overallStatus->label() }}</span>
+            <span class="workspace-hero__stat"><i class="fas fa-triangle-exclamation" aria-hidden="true"></i>{{ number_format($activeIncidents->count()) }} active {{ Str::plural('incident', $activeIncidents->count()) }}</span>
+        </x-slot:stats>
+    </x-page-header>
+
     <div class="surface-panel rounded-xl shadow-sm mb-6 overflow-hidden border {{ $overallBanner }}">
         <div class="px-6 py-5">
-            <h1 class="text-2xl font-bold tracking-tight">Service status</h1>
+            <h2 class="text-2xl font-bold tracking-tight">Current status</h2>
             <p class="mt-2 text-sm leading-relaxed">
                 Overall: <strong class="font-semibold">{{ $overallStatus->label() }}</strong>
                 @if($activeIncidents->isNotEmpty())
@@ -149,12 +156,5 @@
         </div>
     </div>
 
-    <nav class="text-sm text-gray-700 dark:text-gray-300" aria-label="breadcrumb">
-        <ol class="flex flex-wrap gap-2">
-            <li><a href="{{ url($site['home_link'] ?? '/') }}" class="text-primary-600 dark:text-primary-400 hover:underline">Home</a></li>
-            <li aria-hidden="true">/</li>
-            <li class="text-gray-800 dark:text-gray-200">Status</li>
-        </ol>
-    </nav>
 </div>
 @endsection
diff --git a/resources/views/terms.blade.php b/resources/views/terms.blade.php
index d10e22201..17febb11c 100644
--- a/resources/views/terms.blade.php
+++ b/resources/views/terms.blade.php
@@ -3,9 +3,9 @@
 @section('content')
     <div class="container mx-auto px-4 py-6">
         <div class="max-w-4xl mx-auto">
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+            <div class="auth-card overflow-hidden rounded-2xl border shadow-sm">
                 <!-- Header -->
-                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                <div class="workspace-document-header border-b border-gray-200 px-6 py-5 dark:border-gray-700">
                     <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Terms and Conditions</h1>
                     <nav aria-label="breadcrumb">
                         <ol class="flex text-sm text-gray-600 dark:text-gray-400">
@@ -104,4 +104,3 @@
         </div>
     </div>
 @endsection
-
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index b9f170201..4785b1d19 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -4,8 +4,8 @@
 <div class="auth-page min-h-dvh px-4 py-10 sm:px-6 lg:px-8">
     <div class="mx-auto flex min-h-[calc(100dvh-5rem)] max-w-3xl items-center justify-center">
         <div class="auth-card w-full rounded-xl p-8 text-center shadow-xl">
-            <a href="{{ url('/') }}" class="inline-flex items-center justify-center">
-                <img src="{{ asset('assets/images/logo.svg') }}" alt="{{ config('app.name') }} Logo" class="h-16 w-16">
+            <a href="{{ url('/') }}" class="workspace-brand-mark inline-flex h-16 w-16 items-center justify-center rounded-2xl" aria-label="{{ config('app.name') }} home">
+                <i class="fas fa-layer-group text-2xl" aria-hidden="true"></i>
             </a>
 
             <h1 class="mt-6 text-3xl font-bold text-gray-900 dark:text-gray-100">{{ config('app.name') }}</h1>
diff --git a/resources/views/xxx/index.blade.php b/resources/views/xxx/index.blade.php
index d3c67695d..f7ca0129f 100644
--- a/resources/views/xxx/index.blade.php
+++ b/resources/views/xxx/index.blade.php
@@ -6,13 +6,12 @@
 
 @section('content')
 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
-    @php
-        $crumbs = [['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'], ['label' => 'XXX', 'url' => url('/XXX')]];
-        if (!empty($categorytitle) && $categorytitle !== 'All') {
-            $crumbs[] = ['label' => $categorytitle];
-        }
-    @endphp
-    <x-breadcrumb :items="$crumbs" />
+    <x-page-header title="Adult" :current="!empty($categorytitle) ? $categorytitle : 'All releases'" eyebrow="Browse the catalog" description="Explore adult releases by category, search the current collection, and choose your preferred ordering." icon="fas fa-user-lock">
+        <x-slot:stats>
+            <span class="workspace-hero__stat"><i class="fas fa-film" aria-hidden="true"></i>{{ number_format($results->total()) }} releases</span>
+            <span class="workspace-hero__stat"><i class="fas fa-folder-open" aria-hidden="true"></i>{{ $categorytitle ?: 'All releases' }}</span>
+        </x-slot:stats>
+    </x-page-header>
 
     <div class="px-6 py-4">
         <!-- Category and order -->
@@ -78,9 +77,11 @@
                                     </div>
                                 </td>
                                 <td class="px-3 py-4 whitespace-nowrap">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200">
-                                        {{ $result->category_name ?? 'Other' }}
-                                    </span>
+                                    <x-release-category-link
+                                        :category-name="$result->category_name ?? null"
+                                        :parent-category="$result->parent_category ?? null"
+                                        :sub-category="$result->sub_category ?? null"
+                                    />
                                 </td>
                                 <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
                                     {{ userDateDiffForHumans($result->adddate ?? null) }}
diff --git a/tests/Unit/LayoutShellMarkupTest.php b/tests/Unit/LayoutShellMarkupTest.php
index 740c723c5..23bf03ac7 100644
--- a/tests/Unit/LayoutShellMarkupTest.php
+++ b/tests/Unit/LayoutShellMarkupTest.php
@@ -51,6 +51,199 @@ class LayoutShellMarkupTest extends TestCase
         $this->assertStringContainsString('aria-label="Dismiss notification"', $this->view('partials/toast-notifications.blade.php'));
     }
 
+    public function test_desktop_header_search_uses_separated_fully_rounded_controls(): void
+    {
+        $markup = $this->view('partials/header-menu.blade.php');
+
+        $this->assertStringContainsString('layout-primary-nav__search relative hidden items-center gap-2 lg:flex', $markup);
+        $this->assertStringContainsString('id="header-search-category" name="t" class="rounded-lg', $markup);
+        $this->assertStringContainsString('class="w-40 rounded-lg border border-gray-600', $markup);
+        $this->assertStringContainsString('class="rounded-lg bg-primary-600', $markup);
+    }
+
+    public function test_profile_and_edit_profile_share_the_full_content_width(): void
+    {
+        $profile = $this->view('profile/index.blade.php');
+        $editProfile = $this->view('profile/edit.blade.php');
+
+        $this->assertStringContainsString('<div class="w-full">', $editProfile);
+        $this->assertStringNotContainsString('max-w-4xl', $editProfile);
+        $this->assertStringNotContainsString('max-w-4xl', $profile);
+    }
+
+    public function test_first_party_layouts_apply_the_shared_view_treatment(): void
+    {
+        $this->assertStringContainsString('class="app-view-stack layout-page-container', $this->view('layouts/main.blade.php'));
+        $this->assertStringContainsString('class="app-view-stack app-view-stack--admin', $this->view('layouts/admin.blade.php'));
+        $this->assertStringContainsString('class="guest-view-stack', $this->view('layouts/guest.blade.php'));
+    }
+
+    public function test_shared_page_components_use_the_modern_workspace_primitives(): void
+    {
+        $this->assertStringContainsString('workspace-hero', $this->view('components/page-header.blade.php'));
+        $this->assertStringContainsString('workspace-hero__glow', $this->view('components/page-header.blade.php'));
+        $this->assertStringContainsString('aria-label="Breadcrumb"', $this->view('components/page-header.blade.php'));
+        $this->assertStringContainsString('workspace-page-header', $this->view('components/admin/page-header.blade.php'));
+        $this->assertStringContainsString('rounded-2xl', $this->view('components/panel.blade.php'));
+        $this->assertStringContainsString('empty-state__icon', $this->view('components/empty-state.blade.php'));
+        $this->assertStringContainsString('min-h-11', $this->view('components/input.blade.php'));
+        $this->assertStringContainsString('rounded-xl', $this->view('components/select.blade.php'));
+        $this->assertStringContainsString('catalog-results-toolbar', $this->view('components/cover-results-toolbar.blade.php'));
+        $this->assertStringContainsString('catalog-release-row', $this->view('components/cover-release-list.blade.php'));
+        $this->assertStringContainsString('aria-label="Result view options"', $this->view('components/view-toggle.blade.php'));
+        $this->assertStringContainsString('aria-haspopup="menu"', $this->view('components/sort-dropdown.blade.php'));
+        $this->assertStringContainsString('aria-label="Search releases"', $this->view('components/search-autocomplete.blade.php'));
+        $this->assertStringContainsString('aria-label="Pagination"', $this->view('components/admin/pagination.blade.php'));
+    }
+
+    public function test_shared_user_hero_uses_compact_vertical_spacing(): void
+    {
+        $hero = $this->view('components/page-header.blade.php');
+
+        $this->assertStringContainsString('px-5 py-4', $hero);
+        $this->assertStringContainsString('sm:px-7 sm:py-5', $hero);
+        $this->assertStringContainsString('flex flex-col gap-4', $hero);
+        $this->assertStringContainsString('aria-label="Breadcrumb" class="mb-2', $hero);
+        $this->assertStringContainsString('class="mt-2 max-w-2xl text-sm leading-5', $hero);
+        $this->assertStringContainsString('app-page-header__meta flex min-w-0 flex-wrap', $hero);
+        $this->assertStringContainsString('@if(isset($stats) || isset($actions))', $hero);
+        $this->assertStringNotContainsString('mt-3 flex flex-wrap gap-2 text-sm', $hero);
+        $this->assertStringNotContainsString('sm:py-8', $hero);
+    }
+
+    public function test_shared_view_styles_cover_application_admin_and_guest_surfaces(): void
+    {
+        $stylesheet = $this->resource('css/app.css');
+
+        $this->assertStringContainsString('.app-view-stack > .surface-panel', $stylesheet);
+        $this->assertStringContainsString('.workspace-page-header::after', $stylesheet);
+        $this->assertStringContainsString('.workspace-hero__glow', $stylesheet);
+        $this->assertStringContainsString('.workspace-hero__action', $stylesheet);
+        $this->assertStringContainsString('.inline-search-widget', $stylesheet);
+        $this->assertStringContainsString('.admin-data-table__head th', $stylesheet);
+        $this->assertStringContainsString('.guest-view-stack', $stylesheet);
+        $this->assertStringContainsString('.header-gradient', $stylesheet);
+        $this->assertStringContainsString('.workspace-document-header', $stylesheet);
+    }
+
+    public function test_every_first_party_admin_page_uses_the_canonical_page_header(): void
+    {
+        $adminViews = new \RecursiveIteratorIterator(
+            new \RecursiveDirectoryIterator(
+                __DIR__.'/../../resources/views/admin',
+                \FilesystemIterator::SKIP_DOTS,
+            ),
+        );
+
+        foreach ($adminViews as $adminView) {
+            if (! str_ends_with($adminView->getFilename(), '.blade.php')) {
+                continue;
+            }
+
+            $markup = (string) file_get_contents($adminView->getPathname());
+
+            if (! str_contains($markup, "@extends('layouts.admin')")) {
+                continue;
+            }
+
+            preg_match_all("/@include\\('([^']+)'/", $markup, $includedViews);
+
+            foreach ($includedViews[1] as $includedView) {
+                $markup .= $this->view(str_replace('.', '/', $includedView).'.blade.php');
+            }
+
+            $relativePath = str_replace(__DIR__.'/../../resources/views/', '', $adminView->getPathname());
+
+            $this->assertStringContainsString(
+                '<x-admin.page-header',
+                $markup,
+                "{$relativePath} must use the canonical admin page header.",
+            );
+        }
+    }
+
+    public function test_every_main_layout_page_uses_the_canonical_user_hero(): void
+    {
+        $userViews = new \RecursiveIteratorIterator(
+            new \RecursiveDirectoryIterator(
+                __DIR__.'/../../resources/views',
+                \FilesystemIterator::SKIP_DOTS,
+            ),
+        );
+
+        foreach ($userViews as $userView) {
+            if (! str_ends_with($userView->getFilename(), '.blade.php')) {
+                continue;
+            }
+
+            $markup = (string) file_get_contents($userView->getPathname());
+
+            if (preg_match('/@extends\([\'\"]layouts\.main[\'\"]\)/', $markup) !== 1) {
+                continue;
+            }
+
+            $relativePath = str_replace(__DIR__.'/../../resources/views/', '', $userView->getPathname());
+            $usesCanonicalHero = str_contains($markup, '<x-page-header') || str_contains($markup, 'movies-hero');
+
+            $this->assertTrue($usesCanonicalHero, "{$relativePath} must use the canonical user hero.");
+        }
+    }
+
+    public function test_first_party_content_fragments_use_the_canonical_user_hero(): void
+    {
+        foreach ([
+            'browsegroup/index.blade.php',
+            'mymovies/add.blade.php',
+            'mymovies/index.blade.php',
+            'myshows/add.blade.php',
+            'myshows/index.blade.php',
+        ] as $fragment) {
+            $this->assertStringContainsString(
+                '<x-page-header',
+                $this->view($fragment),
+                "{$fragment} must use the canonical user hero.",
+            );
+        }
+    }
+
+    public function test_catalog_hero_titles_use_category_names_without_a_library_suffix(): void
+    {
+        foreach ([
+            'books/index.blade.php' => 'title="Books"',
+            'console/index.blade.php' => 'title="Console"',
+            'games/index.blade.php' => 'title="Games"',
+            'movies/index.blade.php' => '>Movies</h1>',
+            'music/index.blade.php' => 'title="Music"',
+            'xxx/index.blade.php' => 'title="Adult"',
+        ] as $view => $categoryTitle) {
+            $markup = $this->view($view);
+
+            $this->assertStringContainsString($categoryTitle, $markup);
+            $this->assertDoesNotMatchRegularExpression('/(?:Movie|Book|Console|Games|Music|Adult) library/', $markup);
+        }
+    }
+
+    public function test_inline_search_reserves_independent_space_for_both_icons(): void
+    {
+        $markup = $this->view('components/inline-search.blade.php');
+        $stylesheet = $this->resource('css/app.css');
+
+        $this->assertStringContainsString('inline-search-widget__icon', $markup);
+        $this->assertStringContainsString('inline-search-widget__input', $markup);
+        $this->assertStringContainsString('inline-search-widget__button', $markup);
+        $this->assertStringContainsString('grid-template-columns: minmax(0, 1fr) 2.5rem;', $stylesheet);
+        $this->assertStringContainsString('gap: 0.5rem;', $stylesheet);
+        $this->assertStringContainsString('padding-inline-start: 2.5rem !important;', $stylesheet);
+    }
+
+    public function test_project_owned_welcome_view_does_not_reference_a_missing_logo_asset(): void
+    {
+        $welcome = $this->view('welcome.blade.php');
+
+        $this->assertStringNotContainsString('assets/images/logo.svg', $welcome);
+        $this->assertStringContainsString('workspace-brand-mark', $welcome);
+    }
+
     private function view(string $path): string
     {
         return $this->resource("views/{$path}");
diff --git a/tests/Unit/MoviesPageMarkupTest.php b/tests/Unit/MoviesPageMarkupTest.php
new file mode 100644
index 000000000..9b36de1bd
--- /dev/null
+++ b/tests/Unit/MoviesPageMarkupTest.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace Tests\Unit;
+
+use PHPUnit\Framework\TestCase;
+
+class MoviesPageMarkupTest extends TestCase
+{
+    public function test_movie_page_exposes_a_semantic_heading_and_accessible_filters(): void
+    {
+        $markup = $this->resource('views/movies/index.blade.php');
+
+        $this->assertStringContainsString('<h1 id="movies-heading"', $markup);
+        $this->assertStringContainsString('aria-label="Movie filters"', $markup);
+        $this->assertStringContainsString('<label for="title"', $markup);
+        $this->assertStringContainsString('<label for="genre"', $markup);
+        $this->assertStringContainsString('<label for="year"', $markup);
+        $this->assertStringContainsString('<label for="rating"', $markup);
+        $this->assertStringContainsString('absolute inset-y-0 left-0 flex w-10 items-center justify-center', $markup);
+        $this->assertStringContainsString('class="movie-filter-control pl-10"', $markup);
+        $this->assertStringContainsString("route('trending-movies')", $markup);
+        $this->assertStringContainsString("route('Movies')", $markup);
+        $this->assertStringContainsString(':aria-label="layout === 1', $markup);
+    }
+
+    public function test_movie_hero_matches_the_compact_shared_hero_spacing(): void
+    {
+        $markup = $this->resource('views/movies/index.blade.php');
+
+        $this->assertStringContainsString('movies-hero relative overflow-hidden rounded-2xl px-5 py-4', $markup);
+        $this->assertStringContainsString('sm:px-7 sm:py-5', $markup);
+        $this->assertStringContainsString('relative z-10 flex flex-col gap-4', $markup);
+        $this->assertStringContainsString('aria-label="Breadcrumb" class="mb-2', $markup);
+        $this->assertStringContainsString('class="mt-2 max-w-2xl text-sm leading-5', $markup);
+        $this->assertStringContainsString('movies-hero__meta flex min-w-0 flex-wrap', $markup);
+        $this->assertStringNotContainsString('mt-3 flex flex-wrap gap-2 text-sm', $markup);
+        $this->assertStringNotContainsString('sm:py-8', $markup);
+    }
+
+    public function test_movie_cards_reserve_poster_space_and_reuse_release_rows(): void
+    {
+        $card = $this->resource('views/movies/partials/movie-card.blade.php');
+
+        $this->assertStringContainsString('<article class="movie-card', $card);
+        $this->assertStringContainsString('width="320"', $card);
+        $this->assertStringContainsString('height="480"', $card);
+        $this->assertStringContainsString('loading="lazy"', $card);
+        $this->assertStringContainsString('decoding="async"', $card);
+        $this->assertStringContainsString("@include('movies.partials.release-item'", $card);
+        $this->assertStringContainsString('rel="noopener noreferrer"', $card);
+        $this->assertStringContainsString('(opens in a new tab)', $card);
+    }
+
+    public function test_movie_styles_cover_grid_list_dark_and_reduced_motion_states(): void
+    {
+        $stylesheet = $this->resource('css/csp-safe.css');
+
+        $this->assertStringContainsString('.movies-grid[data-layout="2"]', $stylesheet);
+        $this->assertStringContainsString('.movies-grid[data-layout="1"] .release-card-container', $stylesheet);
+        $this->assertStringContainsString('.dark .movie-filter-control', $stylesheet);
+        $this->assertStringContainsString('@media (min-width: 640px)', $stylesheet);
+        $this->assertStringContainsString('@media (prefers-reduced-motion: reduce)', $stylesheet);
+    }
+
+    public function test_layout_toggle_retains_persistence_and_clear_state_labels(): void
+    {
+        $script = $this->resource('js/alpine/components/movies-page.js');
+
+        $this->assertStringContainsString("'Comfortable list'", $script);
+        $this->assertStringContainsString("'Compact grid'", $script);
+        $this->assertStringContainsString("fetch('/movies/update-layout'", $script);
+        $this->assertStringContainsString('body: JSON.stringify({ layout: this.layout })', $script);
+    }
+
+    private function resource(string $path): string
+    {
+        return (string) file_get_contents(__DIR__."/../../resources/{$path}");
+    }
+}
diff --git a/tests/Unit/ReleaseResultsComponentTest.php b/tests/Unit/ReleaseResultsComponentTest.php
index bfd5ef105..b12a7b3a4 100644
--- a/tests/Unit/ReleaseResultsComponentTest.php
+++ b/tests/Unit/ReleaseResultsComponentTest.php
@@ -44,4 +44,18 @@ class ReleaseResultsComponentTest extends TestCase
         $this->assertStringContainsString('mediainfo-badge', $component);
         $this->assertStringContainsString('<x-report-button', $component);
     }
+
+    public function test_release_categories_link_to_the_matching_browse_filter(): void
+    {
+        $releaseResults = (string) file_get_contents(__DIR__.'/../../resources/views/components/release-results.blade.php');
+        $categoryLink = (string) file_get_contents(__DIR__.'/../../resources/views/components/release-category-link.blade.php');
+        $adultBrowse = (string) file_get_contents(__DIR__.'/../../resources/views/xxx/index.blade.php');
+
+        $this->assertSame(2, substr_count($releaseResults, '<x-release-category-link'));
+        $this->assertStringContainsString('<x-release-category-link', $adultBrowse);
+        $this->assertStringContainsString("route('browse'", $categoryLink);
+        $this->assertStringContainsString("preg_split('/\\s*>\\s*/u'", $categoryLink);
+        $this->assertStringContainsString('Browse releases in {{ $categoryLabel }}', $categoryLink);
+        $this->assertStringContainsString('@if($categoryUrl !== null)', $categoryLink);
+    }
 }
diff --git a/tests/Unit/ThemeTableStylesTest.php b/tests/Unit/ThemeTableStylesTest.php
index b985dcbc0..e058a3f95 100644
--- a/tests/Unit/ThemeTableStylesTest.php
+++ b/tests/Unit/ThemeTableStylesTest.php
@@ -2,10 +2,19 @@
 
 namespace Tests\Unit;
 
+use App\Http\Requests\UpdateThemeRequest;
+use Illuminate\Translation\ArrayLoader;
+use Illuminate\Translation\Translator;
+use Illuminate\Validation\Factory;
 use PHPUnit\Framework\TestCase;
 
 class ThemeTableStylesTest extends TestCase
 {
+    /**
+     * @var list<string>
+     */
+    private const COLOR_SCHEMES = ['blue', 'indigo', 'cyan', 'teal', 'emerald', 'violet', 'pink', 'rose', 'red', 'orange', 'amber'];
+
     public function test_light_color_schemes_use_pale_table_hover_surfaces(): void
     {
         $stylesheet = (string) file_get_contents(__DIR__.'/../../resources/css/app.css');
@@ -13,6 +22,14 @@ class ThemeTableStylesTest extends TestCase
         $this->assertStringContainsString('--surface-hover: #f1f5f9;', $stylesheet);
         $this->assertStringContainsString('--surface-hover: #ecfdf5;', $stylesheet);
         $this->assertStringContainsString('--surface-hover: #f5f3ff;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #fff1f2;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #fffbeb;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #ecfeff;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #eef2ff;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #f0fdfa;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #fff7ed;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #fef2f2;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover: #fdf2f8;', $stylesheet);
         $this->assertMatchesRegularExpression(
             '/main tbody tr:hover\s*\{\s*background-color: var\(--surface-hover\) !important;\s*\}/',
             $stylesheet,
@@ -26,9 +43,77 @@ class ThemeTableStylesTest extends TestCase
         $this->assertStringContainsString('--surface-hover-dark: #1e293b;', $stylesheet);
         $this->assertStringContainsString('--surface-hover-dark: #14532d;', $stylesheet);
         $this->assertStringContainsString('--surface-hover-dark: #3b0764;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #4c0519;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #78350f;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #164e63;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #312e81;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #134e4a;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #7c2d12;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #7f1d1d;', $stylesheet);
+        $this->assertStringContainsString('--surface-hover-dark: #831843;', $stylesheet);
         $this->assertMatchesRegularExpression(
             '/\.dark main tbody tr:hover\s*\{\s*background-color: var\(--surface-hover-dark\) !important;\s*\}/',
             $stylesheet,
         );
     }
+
+    public function test_every_color_scheme_defines_complete_surface_and_accent_tokens(): void
+    {
+        $stylesheet = (string) file_get_contents(__DIR__.'/../../resources/css/app.css');
+
+        foreach (self::COLOR_SCHEMES as $scheme) {
+            $matched = preg_match(
+                '/\[data-color-scheme="'.preg_quote($scheme, '/').'"\]\s*\{(?<tokens>.*?)\}/s',
+                $stylesheet,
+                $matches,
+            );
+
+            $this->assertSame(1, $matched, "{$scheme} must define a color-scheme token block.");
+
+            foreach (['--surface-body:', '--surface-body-dark:', '--surface-hover:', '--surface-hover-dark:', '--color-primary-50:', '--color-primary-500:', '--color-primary-950:'] as $token) {
+                $this->assertStringContainsString($token, $matches['tokens'], "{$scheme} must define {$token}");
+            }
+        }
+    }
+
+    public function test_color_scheme_options_stay_in_sync_across_the_ui_and_persistence_layers(): void
+    {
+        $switcher = (string) file_get_contents(__DIR__.'/../../resources/views/partials/scheme-switcher.blade.php');
+        $profile = (string) file_get_contents(__DIR__.'/../../resources/views/profile/edit.blade.php');
+        $themeInit = (string) file_get_contents(__DIR__.'/../../resources/views/partials/theme-init.blade.php');
+        $themeStore = (string) file_get_contents(__DIR__.'/../../resources/js/alpine/stores/theme.js');
+        $profileRequest = (string) file_get_contents(__DIR__.'/../../app/Http/Requests/UpdateProfileRequest.php');
+        $profileController = (string) file_get_contents(__DIR__.'/../../app/Http/Controllers/ProfileController.php');
+        $schemeList = implode(',', self::COLOR_SCHEMES);
+        $javascriptSchemeList = "'".implode("', '", self::COLOR_SCHEMES)."'";
+
+        $this->assertStringContainsString("const colorSchemes = [{$javascriptSchemeList}]", $themeStore);
+        $this->assertStringContainsString("in:{$schemeList}", $profileRequest);
+        $this->assertStringContainsString($javascriptSchemeList, $themeInit);
+        $this->assertStringContainsString($javascriptSchemeList, $profileController);
+
+        foreach (self::COLOR_SCHEMES as $scheme) {
+            $this->assertStringContainsString("'value' => '{$scheme}'", $switcher);
+            $this->assertStringContainsString("'value' => '{$scheme}'", $profile);
+
+            if ($scheme !== 'blue') {
+                $this->assertStringContainsString("data-color-scheme=\"{$scheme}\"", $themeInit);
+            }
+        }
+    }
+
+    public function test_theme_update_validation_accepts_each_supported_scheme_and_rejects_unknown_values(): void
+    {
+        $validator = new Factory(new Translator(new ArrayLoader, 'en'));
+        $rules = (new UpdateThemeRequest)->rules();
+
+        foreach (self::COLOR_SCHEMES as $scheme) {
+            $this->assertFalse(
+                $validator->make(['color_scheme' => $scheme], $rules)->fails(),
+                "{$scheme} should be accepted as a color scheme.",
+            );
+        }
+
+        $this->assertTrue($validator->make(['color_scheme' => 'unknown'], $rules)->fails());
+    }
 }