diff --git a/resources/css/app.css b/resources/css/app.css
index 9796ef6ca..6b05996c5 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -298,6 +298,83 @@ footer {
     border-color: var(--border-default-dark);
 }
 
+.auth-page {
+    background-color: var(--surface-body) !important;
+}
+.dark .auth-page {
+    background-color: var(--surface-body-dark) !important;
+}
+.auth-card {
+    background-color: var(--surface-card) !important;
+    border: 1px solid var(--border-default);
+}
+.dark .auth-card {
+    background-color: var(--surface-card-dark) !important;
+    border-color: var(--border-default-dark);
+}
+.release-chip {
+    @apply inline-flex items-center rounded px-2 py-0.5 text-xs font-medium;
+    background-color: var(--surface-panel-alt);
+    color: rgb(55 65 81);
+}
+.dark .release-chip {
+    background-color: var(--surface-panel-alt-dark);
+    color: rgb(209 213 219);
+}
+.release-action {
+    @apply inline-flex items-center justify-center rounded-lg px-2 py-1 text-sm transition;
+}
+.release-action-sm {
+    @apply inline-flex items-center justify-center rounded px-3 py-1 text-xs font-medium transition;
+}
+.release-action-download {
+    @apply bg-green-600 text-white hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800;
+}
+.release-action-primary {
+    @apply bg-primary-600 text-white hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-800;
+}
+.release-action-muted {
+    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
+}
+.surface-prose {
+    @apply max-w-none text-gray-700 dark:text-gray-300;
+}
+.surface-prose h1,
+.surface-prose h2,
+.surface-prose h3,
+.surface-prose h4,
+.surface-prose h5,
+.surface-prose h6 {
+    @apply mt-6 mb-3 font-semibold text-gray-900 dark:text-gray-100;
+}
+.surface-prose p,
+.surface-prose ul,
+.surface-prose ol {
+    @apply mb-4;
+}
+.surface-prose ul,
+.surface-prose ol {
+    @apply pl-6;
+}
+.surface-prose a {
+    @apply text-primary-600 underline hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300;
+}
+.surface-prose img {
+    @apply my-6 h-auto max-w-full rounded-lg;
+}
+.surface-prose blockquote {
+    @apply my-6 border-l-4 border-gray-200 pl-4 italic text-gray-600 dark:border-gray-700 dark:text-gray-400;
+}
+.surface-prose code {
+    @apply rounded bg-gray-100 px-1.5 py-1 text-sm dark:bg-gray-900;
+}
+.surface-prose pre {
+    @apply my-6 overflow-x-auto rounded-lg bg-gray-900 p-4 text-gray-50;
+}
+.surface-prose pre code {
+    @apply bg-transparent p-0 text-inherit;
+}
+
 /* Tables in main content - use scheme surfaces so they match sidebar/header/cards */
 main table {
     background-color: var(--surface-card) !important;
diff --git a/resources/views/auth/2fa.blade.php b/resources/views/auth/2fa.blade.php
index 6ba6d7009..24b23fa16 100644
--- a/resources/views/auth/2fa.blade.php
+++ b/resources/views/auth/2fa.blade.php
@@ -1,11 +1,11 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen auth-page flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-lg w-full space-y-8">
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-shield-alt text-3xl text-white"></i>
                 </div>
             </a>
@@ -17,7 +17,7 @@
             </p>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-8 py-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">
                     <p class="text-sm text-blue-800 dark:text-blue-200">
@@ -34,7 +34,7 @@
                         </ol>
                         <form method="POST" action="{{ route('generate2faSecret') }}">
                             @csrf
-                            <button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition">
+                            <button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition">
                                 <i class="fas fa-key mr-2"></i>
                                 Generate Secret Key to Enable 2FA
                             </button>
@@ -44,7 +44,7 @@
                     <div class="space-y-6">
                         <div>
                             <p class="text-gray-700 dark:text-gray-300 font-medium mb-3">
-                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 text-xs font-bold mr-2">1</span>
+                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 text-primary-600 dark:text-primary-400 text-xs font-bold mr-2">1</span>
                                 Scan this barcode with your Google Authenticator App:
                             </p>
                             <div class="flex justify-center p-4 bg-white rounded-lg border border-gray-200 dark:border-gray-600">
@@ -54,7 +54,7 @@
 
                         <div>
                             <p class="text-gray-700 dark:text-gray-300 font-medium mb-3">
-                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 text-xs font-bold mr-2">2</span>
+                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 text-primary-600 dark:text-primary-400 text-xs font-bold mr-2">2</span>
                                 Enter the pin code to enable 2FA:
                             </p>
                             <form method="POST" action="{{ route('enable2fa') }}" class="space-y-4">
@@ -68,7 +68,7 @@
                                             <i class="fas fa-key text-gray-400"></i>
                                         </div>
                                         <input id="verify-code" type="password" name="verify-code" required
-                                               class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('verify-code') border-red-500 @enderror"
+                                               class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('verify-code') border-red-500 @enderror"
                                                placeholder="Enter 6-digit code">
                                     </div>
                                     @error('verify-code')
@@ -106,7 +106,7 @@
                                         <i class="fas fa-lock text-gray-400"></i>
                                     </div>
                                     <input id="current-password" type="password" name="current-password" required
-                                           class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('current-password') border-red-500 @enderror"
+                                           class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('current-password') border-red-500 @enderror"
                                            placeholder="Enter your current password">
                                 </div>
                                 @error('current-password')
@@ -122,7 +122,7 @@
                 @endif
             </div>
 
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+            <div class="px-8 py-4 surface-panel-alt border-t border-gray-200 dark:border-gray-700">
                 <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
                     <i class="fas fa-home mr-1"></i> Back to home
                 </a>
diff --git a/resources/views/auth/2fa_verify.blade.php b/resources/views/auth/2fa_verify.blade.php
index e0f335c6e..9ad04c158 100644
--- a/resources/views/auth/2fa_verify.blade.php
+++ b/resources/views/auth/2fa_verify.blade.php
@@ -1,12 +1,12 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen auth-page flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-shield-alt text-3xl text-white"></i>
                 </div>
             </a>
@@ -19,7 +19,7 @@
         </div>
 
         <!-- 2FA Verification Card -->
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-8 py-6">
                 @if($errors->any())
                     <div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700">
@@ -40,7 +40,7 @@
                 <div class="mb-6">
                     <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
                         <div class="flex items-start">
-                            <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mr-3 mt-0.5"></i>
+                            <i class="fas fa-info-circle text-primary-600 dark:text-primary-400 mr-3 mt-0.5"></i>
                             <div class="text-sm text-blue-800 dark:text-blue-200">
                                 <p class="font-medium mb-1">Security Verification Required</p>
                                 <p>Open your authenticator app and enter the 6-digit verification code to complete your login.</p>
@@ -72,7 +72,7 @@
                             required
                             autofocus
                             placeholder="000000"
-                            class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-2xl tracking-widest font-mono bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+                            class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-center text-2xl tracking-widest font-mono bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
                         >
                         <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 text-center">
                             Enter the 6-digit code from your authenticator app
@@ -86,7 +86,7 @@
                             name="trust_device"
                             id="trust_device"
                             value="1"
-                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 checked:bg-blue-600 dark:checked:bg-blue-600"
+                            class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 checked:bg-primary-600 dark:checked:bg-primary-600"
                         >
                         <label for="trust_device" class="ml-2 block text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                             Trust this device for 30 days
@@ -97,7 +97,7 @@
                     <div>
                         <button
                             type="submit"
-                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200"
                         >
                             <i class="fas fa-sign-in-alt mr-2"></i>
                             Verify and Continue
@@ -107,7 +107,7 @@
 
                 <!-- Back to Login Link -->
                 <div class="mt-6 text-center">
-                    <a href="{{ route('login') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors">
+                    <a href="{{ route('login') }}" class="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 transition-colors">
                         <i class="fas fa-arrow-left mr-1"></i>
                         Back to login
                     </a>
@@ -115,7 +115,7 @@
             </div>
 
             <!-- Help Section -->
-            <div class="bg-gray-50 dark:bg-gray-900 px-8 py-4 border-t border-gray-200 dark:border-gray-700">
+            <div class="surface-panel-alt px-8 py-4 border-t border-gray-200 dark:border-gray-700">
                 <div class="text-xs text-gray-600 dark:text-gray-400">
                     <p class="mb-2">
                         <i class="fas fa-question-circle mr-1"></i>
diff --git a/resources/views/auth/google2fa.blade.php b/resources/views/auth/google2fa.blade.php
index 44c891a5f..f31e79f60 100644
--- a/resources/views/auth/google2fa.blade.php
+++ b/resources/views/auth/google2fa.blade.php
@@ -1,11 +1,11 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen auth-page flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-shield-alt text-3xl text-white"></i>
                 </div>
             </a>
@@ -17,7 +17,7 @@
             </p>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-8 py-6">
                 <form action="{{ route('2faVerify') }}" method="POST" class="space-y-6">
                     @csrf
@@ -35,7 +35,7 @@
                                 type="text"
                                 required
                                 autofocus
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('one_time_password') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('one_time_password') border-red-500 @enderror"
                                 placeholder="Enter 6-digit code"
                             >
                         </div>
@@ -46,7 +46,7 @@
 
                     <button
                         type="submit"
-                        class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
+                        class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition"
                     >
                         <i class="fas fa-sign-in-alt mr-2"></i>
                         Authenticate
@@ -54,7 +54,7 @@
                 </form>
             </div>
 
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+            <div class="px-8 py-4 surface-panel-alt border-t border-gray-200 dark:border-gray-700">
                 <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
                     <i class="fas fa-home mr-1"></i> Back to home
                 </a>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index dc30586d1..b2fc38f6a 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,12 +1,12 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-dvh flex items-start justify-center bg-gray-100 dark:bg-gray-900 px-4 py-6 sm:px-6 sm:py-10 lg:px-8">
+<div class="min-h-dvh auth-page flex items-start justify-center px-4 py-6 sm:px-6 sm:py-10 lg:px-8">
     <div class="w-full max-w-md space-y-6 sm:space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="mb-3 inline-flex items-center justify-center sm:mb-4">
-                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 shadow-lg dark:bg-gray-700 sm:h-16 sm:w-16">
+                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 shadow-lg dark:bg-primary-700 sm:h-16 sm:w-16">
                     <i class="fas fa-file-download text-2xl text-white sm:text-3xl"></i>
                 </div>
             </a>
@@ -19,7 +19,7 @@
         </div>
 
         <!-- Login Card -->
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div
                 x-data="loginMode"
                 x-on:use-password-login.stop="usePassword()"
@@ -51,7 +51,7 @@
                         type="button"
                         x-show="supported"
                         @click="usePassword()"
-                        class="mt-4 inline-flex items-center text-sm font-medium text-blue-600 transition hover:text-blue-500 dark:text-blue-400"
+                        class="mt-4 inline-flex items-center text-sm font-medium text-primary-600 transition hover:text-primary-500 dark:text-primary-400"
                     >
                         Sign in with password instead
                         <i class="fas fa-arrow-right ml-2"></i>
@@ -63,7 +63,7 @@
                         type="button"
                         x-show="supported"
                         @click="usePasskey()"
-                        class="mb-4 inline-flex items-center text-sm font-medium text-blue-600 transition hover:text-blue-500 dark:text-blue-400"
+                        class="mb-4 inline-flex items-center text-sm font-medium text-primary-600 transition hover:text-primary-500 dark:text-primary-400"
                     >
                         <i class="fas fa-arrow-left mr-2"></i>
                         Sign in with passkey
@@ -89,7 +89,7 @@
                                     value="{{ old('username') }}"
                                     required
                                     autofocus
-                                    class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('username') border-red-500 @enderror"
+                                    class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('username') border-red-500 @enderror"
                                     placeholder="Enter your username or email"
                                 >
                             </div>
@@ -112,7 +112,7 @@
                                     type="password"
                                     name="password"
                                     required
-                                    class="block w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
+                                    class="block w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('password') border-red-500 @enderror"
                                     placeholder="Enter your password"
                                 >
                                 <button type="button" class="password-toggle-btn absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" data-field-id="password">
@@ -132,7 +132,7 @@
                                     name="rememberme"
                                     type="checkbox"
                                     {{ old('rememberme') ? 'checked' : '' }}
-                                    class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
+                                    class="h-4 w-4 text-primary-600 dark:text-primary-400 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded"
                                 >
                                 <label for="rememberme" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                                     Remember me
@@ -140,7 +140,7 @@
                             </div>
 
                             @if(Route::has('forgottenpassword'))
-                                <a href="{{ route('forgottenpassword') }}" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 transition">
+                                <a href="{{ route('forgottenpassword') }}" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500 transition">
                                     Forgot password?
                                 </a>
                             @endif
@@ -160,7 +160,7 @@
                         <div>
                             <button
                                 type="submit"
-                                class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                                class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition duration-150 ease-in-out"
                             >
                                 <i class="fas fa-sign-in-alt mr-2"></i>
                                 Sign In
@@ -171,7 +171,7 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="border-t border-gray-200 bg-gray-50 px-5 py-4 dark:border-gray-700 dark:bg-gray-900 sm:px-8">
+            <div class="border-t border-gray-200 surface-panel-alt px-5 py-4 dark:border-gray-700 sm:px-8">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
                     <div class="flex flex-col sm:flex-row gap-3 items-center">
                         @if(Route::has('register'))
diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php
index 7eaa8a78d..bb5cb716f 100644
--- a/resources/views/auth/passwords/confirm.blade.php
+++ b/resources/views/auth/passwords/confirm.blade.php
@@ -1,11 +1,11 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen auth-page flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-lock text-3xl text-white"></i>
                 </div>
             </a>
@@ -17,7 +17,7 @@
             </p>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-8 py-6">
                 <form method="POST" action="{{ route('password.confirm') }}" class="space-y-6">
                     @csrf
@@ -36,7 +36,7 @@
                                 name="password"
                                 required
                                 autocomplete="current-password"
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('password') border-red-500 @enderror"
                                 placeholder="Enter your password"
                             >
                         </div>
@@ -48,14 +48,14 @@
                     <div class="flex items-center justify-between">
                         <button
                             type="submit"
-                            class="flex justify-center items-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
+                            class="flex justify-center items-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition"
                         >
                             <i class="fas fa-check mr-2"></i>
                             {{ __('Confirm Password') }}
                         </button>
 
                         @if (Route::has('password.request'))
-                            <a class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 transition" href="{{ route('password.request') }}">
+                            <a class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500 transition" href="{{ route('password.request') }}">
                                 {{ __('Forgot Your Password?') }}
                             </a>
                         @endif
@@ -63,7 +63,7 @@
                 </form>
             </div>
 
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+            <div class="px-8 py-4 surface-panel-alt border-t border-gray-200 dark:border-gray-700">
                 <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
                     <i class="fas fa-home mr-1"></i> Back to home
                 </a>
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 62a1213c1..502819b30 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -1,12 +1,12 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen auth-page flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-file-download text-3xl text-white"></i>
                 </div>
             </a>
@@ -19,7 +19,7 @@
         </div>
 
         <!-- Reset Password Card -->
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-8 py-6">
                 <!-- Error Messages -->
                 @if(isset($errors) && $errors->any())
@@ -57,7 +57,7 @@
                                 value="{{ old('email') }}"
                                 required
                                 autofocus
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition {{ isset($errors) && $errors->has('email') ? 'border-red-500' : '' }}"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition {{ isset($errors) && $errors->has('email') ? 'border-red-500' : '' }}"
                                 placeholder="your@email.com"
                             >
                         </div>
@@ -80,7 +80,7 @@
                     <div>
                         <button
                             type="submit"
-                            class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                            class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition duration-150 ease-in-out"
                         >
                             <i class="fas fa-paper-plane mr-2"></i>
                             Send Password Reset Link
@@ -90,9 +90,9 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+            <div class="px-8 py-4 surface-panel-alt border-t border-gray-200 dark:border-gray-700">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
-                    <a href="{{ route('login') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
+                    <a href="{{ route('login') }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-500 font-medium transition">
                         <i class="fas fa-arrow-left mr-1"></i> Back to login
                     </a>
 
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index db74e472e..890ac18b0 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -1,34 +1,34 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-linear-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen auth-page flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-file-download text-3xl text-white"></i>
                 </div>
             </a>
-            <h2 class="mt-4 text-4xl font-extrabold text-gray-900">
+            <h2 class="mt-4 text-4xl font-extrabold text-gray-900 dark:text-gray-100">
                 Set New Password
             </h2>
-            <p class="mt-2 text-sm text-gray-600">
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                 Choose a strong password for your account
             </p>
         </div>
 
         <!-- Reset Password Card -->
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-8 py-6">
                 <!-- Error Messages -->
                 @if($errors->any())
-                    <div class="mb-4 p-4 rounded-lg bg-red-50 border border-red-200">
+                    <div class="mb-4 p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/30 dark:border-red-700">
                         <div class="flex items-start">
-                            <i class="fas fa-exclamation-circle text-red-600 mr-3 mt-0.5"></i>
+                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 mt-0.5"></i>
                             <div class="flex-1">
-                                <p class="text-sm font-medium text-red-800">There were some errors:</p>
-                                <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
+                                <p class="text-sm font-medium text-red-800 dark:text-red-200">There were some errors:</p>
+                                <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                                     @foreach($errors->all() as $error)
                                         <li>{{ $error }}</li>
                                     @endforeach
@@ -60,7 +60,7 @@
                                 required
                                 autofocus
                                 readonly
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"
                             >
                         </div>
                     </div>
@@ -79,14 +79,14 @@
                                 type="password"
                                 name="password"
                                 required
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('password') border-red-500 @enderror"
                                 placeholder="Enter your new password"
                             >
                         </div>
                         @error('password')
                             <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                         @enderror
-                        <p class="mt-1 text-xs text-gray-500">Must be at least 8 characters</p>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Must be at least 8 characters</p>
                     </div>
 
                     <!-- Confirm Password Field -->
@@ -103,7 +103,7 @@
                                 type="password"
                                 name="password_confirmation"
                                 required
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"
                                 placeholder="Confirm your new password"
                             >
                         </div>
@@ -113,7 +113,7 @@
                     <div class="pt-2">
                         <button
                             type="submit"
-                            class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                            class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition duration-150 ease-in-out"
                         >
                             <i class="fas fa-check-circle mr-2"></i>
                             Reset Password
@@ -123,9 +123,9 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200">
+            <div class="px-8 py-4 surface-panel-alt border-t border-gray-200 dark:border-gray-700">
                 <div class="flex justify-center items-center text-sm">
-                    <a href="{{ route('login') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
+                    <a href="{{ route('login') }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-500 font-medium transition">
                         <i class="fas fa-arrow-left mr-1"></i> Back to login
                     </a>
                 </div>
@@ -133,7 +133,7 @@
         </div>
 
         <!-- Additional Info -->
-        <p class="text-center text-sm text-gray-600">
+        <p class="text-center text-sm text-gray-600 dark:text-gray-400">
             &copy; {{ now()->year }} {{ config('app.name') }}. All rights reserved.
         </p>
     </div>
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index bd9c02154..0774d8f5c 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,12 +1,12 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-dvh flex items-start justify-center bg-gray-100 dark:bg-gray-900 px-4 py-6 sm:px-6 sm:py-10 lg:px-8">
+<div class="min-h-dvh auth-page flex items-start justify-center px-4 py-6 sm:px-6 sm:py-10 lg:px-8">
     <div class="w-full max-w-md space-y-6 sm:space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="mb-3 inline-flex items-center justify-center sm:mb-4">
-                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 shadow-lg dark:bg-gray-700 sm:h-16 sm:w-16">
+                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 shadow-lg dark:bg-primary-700 sm:h-16 sm:w-16">
                     <i class="fas fa-file-download text-2xl text-white sm:text-3xl"></i>
                 </div>
             </a>
@@ -19,7 +19,7 @@
         </div>
 
         <!-- Register Card -->
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-5 py-5 sm:px-8 sm:py-6">
                 <!-- Registration Status Error Message -->
                 @if(!empty($error) && $showregister == 0)
@@ -43,7 +43,7 @@
                 @if(!empty($notice))
                     <div class="mb-4 p-4 rounded-lg bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700">
                         <div class="flex items-start">
-                            <i class="fas fa-circle-info text-blue-600 dark:text-blue-400 mr-3 mt-0.5"></i>
+                            <i class="fas fa-circle-info text-primary-600 dark:text-primary-400 mr-3 mt-0.5"></i>
                             <p class="text-sm text-blue-800 dark:text-blue-200">{{ $notice }}</p>
                         </div>
                     </div>
@@ -88,7 +88,7 @@
                                 value="{{ old('username') }}"
                                 required
                                 autofocus
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('username') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('username') border-red-500 @enderror"
                                 placeholder="Choose a username"
                             >
                         </div>
@@ -112,7 +112,7 @@
                                 name="email"
                                 value="{{ old('email', $email ?? '') }}"
                                 required
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('email') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('email') border-red-500 @enderror"
                                 placeholder="your@email.com"
                             >
                         </div>
@@ -135,7 +135,7 @@
                                 type="password"
                                 name="password"
                                 required
-                                class="block w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition @error('password') border-red-500 @enderror"
                                 placeholder="Create a strong password"
                             >
                             <button type="button" class="password-toggle-btn absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" data-field-id="password">
@@ -170,7 +170,7 @@
                                 type="password"
                                 name="password_confirmation"
                                 required
-                                class="block w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                class="block w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"
                                 placeholder="Confirm your password"
                             >
                             <button type="button" class="password-toggle-btn absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" data-field-id="password_confirmation">
@@ -196,13 +196,13 @@
                             name="terms"
                             type="checkbox"
                             required
-                            class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded mt-1"
+                            class="h-4 w-4 text-primary-600 dark:text-primary-400 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded mt-1"
                         >
                         <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                             I agree to the
-                            <a href="{{ url('/terms-and-conditions') }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Terms and Conditions</a>
+                            <a href="{{ url('/terms-and-conditions') }}" target="_blank" class="text-primary-600 dark:text-primary-400 hover:text-primary-500">Terms and Conditions</a>
                             and
-                            <a href="{{ url('/privacy-policy') }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Privacy Policy</a>
+                            <a href="{{ url('/privacy-policy') }}" target="_blank" class="text-primary-600 dark:text-primary-400 hover:text-primary-500">Privacy Policy</a>
                         </label>
                     </div>
 
@@ -210,7 +210,7 @@
                     <div>
                         <button
                             type="submit"
-                            class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                            class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition duration-150 ease-in-out"
                         >
                             <i class="fas fa-user-plus mr-2"></i>
                             Create Account
@@ -221,9 +221,9 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="border-t border-gray-200 bg-gray-50 px-5 py-4 dark:border-gray-700 dark:bg-gray-900 sm:px-8">
+            <div class="border-t border-gray-200 surface-panel-alt px-5 py-4 dark:border-gray-700 sm:px-8">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
-                    <a href="{{ route('login') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
+                    <a href="{{ route('login') }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-500 font-medium transition">
                         <i class="fas fa-sign-in-alt mr-1"></i> Already have an account? Sign in
                     </a>
 
diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
index b9afa3621..27bdca3c2 100644
--- a/resources/views/auth/verify-email.blade.php
+++ b/resources/views/auth/verify-email.blade.php
@@ -1,8 +1,8 @@
 @extends('layouts.guest')
 
 @section('content')
-    <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 px-4">
-        <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 space-y-6">
+    <div class="min-h-screen auth-page flex items-center justify-center px-4">
+        <div class="w-full max-w-md auth-card shadow-md rounded-xl p-8 space-y-6">
             <div class="space-y-2 text-center">
                 <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Verify your email address</h1>
                 <p class="text-sm text-gray-600 dark:text-gray-300">
@@ -20,7 +20,7 @@
                 @csrf
                 <button
                     type="submit"
-                    class="w-full inline-flex justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                    class="w-full inline-flex justify-center rounded-md bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
                 >
                     Resend verification email
                 </button>
diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php
index 99c5e4a6a..fe45ad03c 100644
--- a/resources/views/auth/verify.blade.php
+++ b/resources/views/auth/verify.blade.php
@@ -1,11 +1,11 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen auth-page flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-envelope-open-text text-3xl text-white"></i>
                 </div>
             </a>
@@ -14,7 +14,7 @@
             </h2>
         </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+        <div class="auth-card rounded-xl shadow-xl overflow-hidden">
             <div class="px-8 py-6">
                 <p class="text-gray-700 dark:text-gray-300 mb-4">
                     {{ __('Before proceeding, please check your email for a verification link.') }}
@@ -23,14 +23,14 @@
                     {{ __('If you did not receive the email') }},
                     <form class="inline" method="POST" action="{{ route('verification.resend') }}">
                         @csrf
-                        <button type="submit" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
+                        <button type="submit" class="text-primary-600 dark:text-primary-400 hover:text-primary-500 font-medium transition">
                             {{ __('click here to request another') }}
                         </button>.
                     </form>
                 </p>
             </div>
 
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+            <div class="px-8 py-4 surface-panel-alt border-t border-gray-200 dark:border-gray-700">
                 <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
                     <i class="fas fa-home mr-1"></i> Back to home
                 </a>
diff --git a/resources/views/components/badge.blade.php b/resources/views/components/badge.blade.php
index 1afc82024..a39dd4334 100644
--- a/resources/views/components/badge.blade.php
+++ b/resources/views/components/badge.blade.php
@@ -1,28 +1,27 @@
 @blaze
 @props([
-    'type' => 'default'
+    'type' => 'default',
+    'size' => 'sm',
 ])
 
 @php
-switch($type) {
-    case('info'):
-        $color = 'bg-gray-300';
-        break;
+    $sizes = [
+        'xs' => 'px-2 py-0.5 text-xs',
+        'sm' => 'px-2.5 py-0.5 text-xs',
+        'md' => 'px-3 py-1 text-sm',
+    ];
 
-    case('danger'):
-        $color = 'bg-red-500';
-        break;
+    $tones = [
+        'default' => 'bg-primary-100 text-primary-800 dark:bg-primary-900/50 dark:text-primary-200',
+        'info' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
+        'success' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+        'danger' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+        'warning' => 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
+    ];
 
-    case('warning'):
-        $color = 'bg-orange-500';
-        break;
-
-    default:
-        $color = 'bg-blue-500';
-        break;
-}
+    $classes = 'inline-flex items-center rounded-full font-medium '.($sizes[$size] ?? $sizes['sm']).' '.($tones[$type] ?? $tones['default']);
 @endphp
 
-<span {{ $attributes->merge(['class' => "$color rounded-full px-2 py-1 text-white text-xs font-semibold"]) }}>
+<span {{ $attributes->merge(['class' => $classes]) }}>
     {{ $slot }}
 </span>
diff --git a/resources/views/components/button-link.blade.php b/resources/views/components/button-link.blade.php
index 9911e8814..6e23cb823 100644
--- a/resources/views/components/button-link.blade.php
+++ b/resources/views/components/button-link.blade.php
@@ -1,4 +1,36 @@
 @blaze(fold: true)
-<a {{ $attributes->merge(['class' => 'bg-blue-500 text-white px-3 py-2 rounded-lg inline-block transition']) }}>
+@props([
+    'variant' => 'primary',
+    'size' => 'md',
+    'icon' => null,
+])
+
+@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';
+
+    $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',
+    ];
+
+    $variants = [
+        'primary' => 'border-primary-600 bg-primary-600 text-white hover:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 dark:hover:bg-primary-800',
+        'secondary' => 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+        'muted' => 'border-transparent bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600',
+        'success' => 'border-green-600 bg-green-600 text-white hover:bg-green-700 dark:border-green-700 dark:bg-green-700 dark:hover:bg-green-800',
+        'danger' => 'border-red-600 bg-red-600 text-white hover:bg-red-700 dark:border-red-700 dark:bg-red-700 dark:hover:bg-red-800',
+        'warning' => 'border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-600 dark:border-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-700',
+        'ghost' => 'border-transparent bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800',
+    ];
+
+    $classes = $base.' '.($sizes[$size] ?? $sizes['md']).' '.($variants[$variant] ?? $variants['primary']);
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    @if($icon)
+        <i class="{{ $icon }}" aria-hidden="true"></i>
+    @endif
     {{ $slot }}
 </a>
diff --git a/resources/views/components/button-secondary.blade.php b/resources/views/components/button-secondary.blade.php
index 3aae599aa..5e4ecf571 100644
--- a/resources/views/components/button-secondary.blade.php
+++ b/resources/views/components/button-secondary.blade.php
@@ -1,4 +1,7 @@
-@blaze(fold: true)
-<button {{ $attributes->merge(['class' => 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 px-3 py-2 rounded-lg inline-block transition']) }}>
+@props([
+    'type' => 'button',
+])
+
+<x-button :type="$type" variant="secondary" {{ $attributes }}>
     {{ $slot }}
-</button>
+</x-button>
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
index 0ec70b462..45388b729 100644
--- a/resources/views/components/button.blade.php
+++ b/resources/views/components/button.blade.php
@@ -1,4 +1,37 @@
 @blaze(fold: true)
-<button {{ $attributes->merge(['class' => 'bg-blue-500 text-white px-3 py-2 rounded-lg inline-block transition']) }}>
+@props([
+    'type' => 'button',
+    'variant' => 'primary',
+    'size' => 'md',
+    'icon' => null,
+])
+
+@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';
+
+    $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',
+    ];
+
+    $variants = [
+        'primary' => 'border-primary-600 bg-primary-600 text-white hover:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 dark:hover:bg-primary-800',
+        'secondary' => 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+        'muted' => 'border-transparent bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600',
+        'success' => 'border-green-600 bg-green-600 text-white hover:bg-green-700 dark:border-green-700 dark:bg-green-700 dark:hover:bg-green-800',
+        'danger' => 'border-red-600 bg-red-600 text-white hover:bg-red-700 dark:border-red-700 dark:bg-red-700 dark:hover:bg-red-800',
+        'warning' => 'border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-600 dark:border-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-700',
+        'ghost' => 'border-transparent bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800',
+    ];
+
+    $classes = $base.' '.($sizes[$size] ?? $sizes['md']).' '.($variants[$variant] ?? $variants['primary']);
+@endphp
+
+<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
+    @if($icon)
+        <i class="{{ $icon }}" aria-hidden="true"></i>
+    @endif
     {{ $slot }}
 </button>
diff --git a/resources/views/components/cover-release-list.blade.php b/resources/views/components/cover-release-list.blade.php
index 85be3dcb3..a8ccd6364 100644
--- a/resources/views/components/cover-release-list.blade.php
+++ b/resources/views/components/cover-release-list.blade.php
@@ -30,32 +30,32 @@
         <div class="space-y-2">
             @foreach($displayReleases as $release)
                 @if(!empty($release->searchname))
-                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2 border border-gray-200 dark:border-gray-700">
+                    <div class="surface-panel-alt rounded-lg p-2 border">
                         <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-blue-600 dark:hover:text-blue-400 font-medium block break-all {{ $shouldShowCheckbox ? 'flex-1' : '' }}" title="{{ $release->searchname }}">
+                                <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">
-                                        <input type="checkbox" class="chkRelease form-checkbox h-4 w-4 text-blue-600" value="{{ $release->guid }}" name="release[]" @change="onCheckboxChange()">
+                                        <input type="checkbox" class="chkRelease form-checkbox h-4 w-4 text-primary-600" value="{{ $release->guid }}" name="release[]" @change="onCheckboxChange()">
                                     </label>
                                 @endif
                             </div>
 
                             <div class="flex flex-wrap items-center gap-1.5">
                                 @if(isset($release->size))
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                                    <span class="release-chip">
                                         <i class="fas fa-hdd mr-1"></i>{{ number_format($release->size / 1073741824, 2) }} GB
                                     </span>
                                 @endif
                                 @if(isset($release->postdate))
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                                    <span class="release-chip">
                                         <i class="fas fa-calendar-alt mr-1"></i>{{ date('M d, Y H:i', strtotime($release->postdate)) }}
                                     </span>
                                 @endif
                                 @if($shouldShowAddDate && isset($release->adddate))
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                                    <span class="release-chip">
                                         <i class="fas fa-plus-circle mr-1"></i>{{ userDateDiffForHumans($release->adddate) }}
                                     </span>
                                 @endif
@@ -75,16 +75,16 @@
                             </div>
 
                             <div class="flex flex-wrap items-center gap-1.5">
-                                <a href="{{ url('/getnzb/' . $release->guid) }}" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-600 dark:bg-green-700 text-white hover:bg-green-700 dark:hover:bg-green-800 transition">
+                                <a href="{{ url('/getnzb/' . $release->guid) }}" class="release-action-sm release-action-download px-2 py-0.5">
                                     <i class="fas fa-download mr-1"></i> Download
                                     @if($shouldShowStats && isset($release->grabs) && $release->grabs > 0)
                                         <span class="ml-1 px-1 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs rounded">{{ $release->grabs }}</span>
                                     @endif
                                 </a>
-                                <button type="button" class="add-to-cart inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-600 dark:bg-blue-700 text-white hover:bg-blue-700 dark:hover:bg-blue-800 transition" data-guid="{{ $release->guid }}">
+                                <button type="button" class="add-to-cart release-action-sm release-action-primary px-2 py-0.5" 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-2 py-0.5 rounded text-xs font-medium bg-gray-600 dark:bg-gray-700 text-white hover:bg-gray-700 dark:hover:bg-gray-800 transition">
+                                <a href="{{ url('/details/' . $release->guid) }}" class="release-action-sm release-action-muted px-2 py-0.5">
                                     <i class="fas fa-info-circle mr-1"></i> Details
                                     @if($shouldShowStats && isset($release->comments) && $release->comments > 0)
                                         <span class="ml-1 px-1 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs rounded">{{ $release->comments }}</span>
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
index a9ea5ddc3..0c71af7e2 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/input.blade.php
@@ -1,3 +1,2 @@
 @blaze(fold: true)
-<input {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-2 border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500 rounded-lg border shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition']) }}>
-
+<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']) }}>
diff --git a/resources/views/components/label.blade.php b/resources/views/components/label.blade.php
index e2cd8b673..61ea661ac 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' => 'block w-full mb-1']) }}>
+<label {{ $attributes->merge(['class' => 'mb-1 block w-full text-sm font-medium text-gray-700 dark:text-gray-300']) }}>
     {{ $slot }}
 </label>
diff --git a/resources/views/components/release-results.blade.php b/resources/views/components/release-results.blade.php
index df70d4900..d88d6023d 100644
--- a/resources/views/components/release-results.blade.php
+++ b/resources/views/components/release-results.blade.php
@@ -163,13 +163,13 @@
                     </td>
                     <td class="px-3 py-4 whitespace-nowrap">
                         <div class="flex items-center gap-1 flex-wrap">
-                            <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb px-2 py-1 bg-green-600 dark:bg-green-700 text-white rounded-lg hover:bg-green-700 dark:hover:bg-green-800 transition text-sm" title="Download NZB">
+                            <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb release-action release-action-download" title="Download NZB">
                                 <i class="fa fa-download"></i>
                             </a>
-                            <a href="{{ url('/details/' . $result->guid) }}" class="px-2 py-1 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition text-sm" title="View Details">
+                            <a href="{{ url('/details/' . $result->guid) }}" class="release-action release-action-primary" title="View Details">
                                 <i class="fa fa-info"></i>
                             </a>
-                            <a href="#" class="add-to-cart px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition text-sm" data-guid="{{ $result->guid }}" title="Add to Cart">
+                            <a href="#" class="add-to-cart release-action release-action-muted" data-guid="{{ $result->guid }}" title="Add to Cart">
                                 <i class="icon_cart fa fa-shopping-basket"></i>
                             </a>
                             @if(!empty($result->imdbid) && imdb_id_is_valid($result->imdbid))
@@ -246,13 +246,13 @@
                         <span title="Comments"><i class="fas fa-comment text-primary-600 dark:text-primary-400 mr-1"></i>{{ $result->comments ?? 0 }}</span>
                     </div>
                     <div class="mt-3 flex gap-1 flex-wrap">
-                        <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb px-3 py-1.5 bg-green-600 dark:bg-green-700 text-white rounded-lg hover:bg-green-700 dark:hover:bg-green-800 transition text-sm" title="Download NZB">
+                        <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb release-action release-action-download px-3 py-1.5" title="Download NZB">
                             <i class="fa fa-download"></i>
                         </a>
-                        <a href="{{ url('/details/' . $result->guid) }}" 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" title="View Details">
+                        <a href="{{ url('/details/' . $result->guid) }}" class="release-action release-action-primary px-3 py-1.5" title="View Details">
                             <i class="fa fa-info"></i>
                         </a>
-                        <a href="#" class="add-to-cart px-3 py-1.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition text-sm" data-guid="{{ $result->guid }}" title="Add to Cart">
+                        <a href="#" class="add-to-cart release-action release-action-muted px-3 py-1.5" data-guid="{{ $result->guid }}" title="Add to Cart">
                             <i class="icon_cart fa fa-shopping-basket"></i>
                         </a>
                         @if(!empty($result->imdbid) && imdb_id_is_valid($result->imdbid))
diff --git a/resources/views/components/report-button.blade.php b/resources/views/components/report-button.blade.php
index f37538637..cde5f97e5 100644
--- a/resources/views/components/report-button.blade.php
+++ b/resources/views/components/report-button.blade.php
@@ -27,7 +27,7 @@
 @elseif($variant === 'button-lg')
     <button type="button"
             data-report-release-id="{{ $releaseId }}"
-            class="report-trigger px-4 py-2 {{ $hasReports ? 'bg-orange-600 dark:bg-orange-700 hover:bg-orange-700 dark:hover:bg-orange-800' : 'bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-800' }} text-white rounded-lg transition inline-flex items-center"
+            class="report-trigger release-action px-4 py-2 {{ $hasReports ? 'bg-orange-600 dark:bg-orange-700 hover:bg-orange-700 dark:hover:bg-orange-800' : 'bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-800' }} text-white"
             title="{{ $reportTitle }}">
         <i class="fas fa-flag mr-2"></i>
         <span class="report-label">{{ $hasReports ? 'Reported' : 'Report' }}</span>
@@ -35,7 +35,7 @@
 @elseif($variant === 'button')
     <button type="button"
             data-report-release-id="{{ $releaseId }}"
-            class="report-trigger px-3 py-1.5 text-{{ $size }} {{ $hasReports ? 'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-800' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-red-100 dark:hover:bg-red-900 hover:text-red-700 dark:hover:text-red-300' }} rounded-lg transition inline-flex items-center"
+            class="report-trigger release-action px-3 py-1.5 text-{{ $size }} {{ $hasReports ? 'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-800' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-red-100 dark:hover:bg-red-900 hover:text-red-700 dark:hover:text-red-300' }}"
             title="{{ $reportTitle }}">
         <i class="fas fa-flag mr-1.5"></i>
         <span class="report-label">{{ $hasReports ? 'Reported' : 'Report' }}</span>
@@ -50,4 +50,3 @@
     </button>
 @endif
 @endauth
-
diff --git a/resources/views/components/search-autocomplete.blade.php b/resources/views/components/search-autocomplete.blade.php
index af0b64488..17966e16c 100644
--- a/resources/views/components/search-autocomplete.blade.php
+++ b/resources/views/components/search-autocomplete.blade.php
@@ -26,7 +26,7 @@
     <div class="flex items-center">
         @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-blue-500">
+                    class="bg-gray-700 text-white {{ $sizeClasses }} rounded-l border-r border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
                 <option value="-1">All</option>
                 @foreach($categories as $category)
                     @php
@@ -62,7 +62,7 @@
                    class="w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white {{ $sizeClasses }}
                           {{ $categorySelect ? '' : 'rounded-l' }}
                           {{ $submitButton ? '' : 'rounded-r' }}
-                          border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                          border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
 
             <!-- Autocomplete Dropdown -->
             <div id="{{ $inputId }}-dropdown"
@@ -72,7 +72,7 @@
 
         @if($submitButton)
             <button type="submit"
-                    class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white {{ $sizeClasses }} rounded-r transition font-medium">
+                    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>
                 <span class="sr-only">Search</span>
             </button>
@@ -83,7 +83,7 @@
         <div class="mt-2 text-sm">
             <span class="text-gray-600 dark:text-gray-400">Did you mean: </span>
             <a href="{{ route('search', ['search' => $suggestion]) }}"
-               class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
+               class="text-primary-600 dark:text-primary-400 hover:underline font-medium">
                 {{ $suggestion }}
             </a>
             <span class="text-gray-500 dark:text-gray-500">?</span>
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
index f0226ee68..c12150cfa 100644
--- a/resources/views/components/select.blade.php
+++ b/resources/views/components/select.blade.php
@@ -1,5 +1,4 @@
 @blaze(fold: true)
-<select {{ $attributes->merge(['class' => 'px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition']) }}>
+<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']) }}>
     {{ $slot }}
 </select>
-
diff --git a/resources/views/components/sort-dropdown.blade.php b/resources/views/components/sort-dropdown.blade.php
index b76763d36..9eb83f0db 100644
--- a/resources/views/components/sort-dropdown.blade.php
+++ b/resources/views/components/sort-dropdown.blade.php
@@ -2,7 +2,7 @@
     <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-blue-500 dark:focus:ring-blue-400 transition shadow-sm"
+        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"
     >
         <i class="fas {{ $currentIcon }} text-gray-500 dark:text-gray-300"></i>
         <span>Sort: {{ $currentLabel }}</span>
@@ -22,12 +22,12 @@
             @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-blue-100 dark:bg-blue-600 text-blue-800 dark:text-white font-medium' : 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600' }}"
+                    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' }}"
                 >
-                    <i class="fas {{ $sortData['icon'] }} w-4 text-center {{ $currentSort === $sortKey ? 'text-blue-600 dark:text-blue-200' : 'text-gray-400 dark:text-gray-400' }}"></i>
+                    <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>
                     @if($currentSort === $sortKey)
-                        <i class="fas fa-check text-blue-600 dark:text-blue-200"></i>
+                        <i class="fas fa-check text-primary-600 dark:text-primary-200"></i>
                     @endif
                 </a>
             @endforeach
diff --git a/resources/views/components/textarea.blade.php b/resources/views/components/textarea.blade.php
index 02ea6e277..9faf6848d 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-blue-500 focus:ring-blue-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(['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>
diff --git a/resources/views/components/view-toggle.blade.php b/resources/views/components/view-toggle.blade.php
index 5b850203c..8ed4bfb10 100644
--- a/resources/views/components/view-toggle.blade.php
+++ b/resources/views/components/view-toggle.blade.php
@@ -92,11 +92,11 @@
         {{-- 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-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">List</a>
+        <a href="{{ $listUrl }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">List</a>
     @else
         {{-- Currently in list view --}}
         @if($covgroup || $shows)
-            <a href="{{ $coverUrl }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">Covers</a>
+            <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>
         @endif
         <span class="font-semibold text-gray-800 dark:text-gray-200">List</span>
@@ -106,8 +106,8 @@
             <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-blue-800 dark:hover:text-blue-300 cursor-pointer"
-               x-bind:class="showThumbs ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400'"
+               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'"
                x-bind:title="showThumbs ? 'Hide thumbnails' : 'Show thumbnails'">
                 <i class="fas fa-image text-xs"></i>
                 <span x-text="showThumbs ? 'Hide Thumbs' : 'Show Thumbs'"></span>
diff --git a/resources/views/content/index.blade.php b/resources/views/content/index.blade.php
index f3bb2223f..f77d7c91b 100644
--- a/resources/views/content/index.blade.php
+++ b/resources/views/content/index.blade.php
@@ -8,14 +8,14 @@
             @if(!empty($content) && count($content) > 0)
                 <div class="space-y-6">
                     @foreach($content as $item)
-                        <article class="surface-panel rounded-lg shadow-md p-6 border hover:shadow-lg transition-shadow duration-200">
-                            <div class="prose max-w-none">
+                        <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="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ $item->title }}</h1>
+                                    <h1 class="mb-4 text-3xl font-bold">{{ $item->title }}</h1>
                                 @endif
 
                                 @if(isset($item->body))
-                                    <div class="text-gray-700 dark:text-gray-300 leading-relaxed">
+                                    <div class="leading-relaxed">
                                         {!! html_entity_decode(trim($item->body, '\'"')) !!}
                                     </div>
                                 @endif
@@ -28,26 +28,23 @@
                     @endforeach
                 </div>
             @else
-                <div class="text-center py-12">
-                    <i class="fas fa-file-alt text-6xl text-gray-300 mb-4"></i>
-                    <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">No Content Available</h3>
-                    <p class="text-gray-500">There is no content to display at this time.</p>
-                </div>
+                <x-empty-state
+                    icon="fas fa-file-alt"
+                    title="No Content Available"
+                    message="There is no content to display at this time."
+                />
             @endif
         </div>
     @else
         <!-- Content List Page -->
-        <div class="px-6 py-6">
-            <div class="mb-6">
-                <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Content</h1>
-                <p class="text-gray-600">Browse our content pages</p>
-            </div>
+        <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">
                     @foreach($content as $item)
                         @if($item)
-                            <div class="surface-panel-alt rounded-lg p-6 hover:shadow-md transition">
+                            <div class="surface-panel-alt rounded-lg border p-6 transition hover:shadow-md">
                                 <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">
                                     <a href="{{ url('/content?page=content&id=' . $item->id) }}" class="hover:text-primary-600 dark:hover:text-primary-400 transition">
                                         {{ filled($item->title) ? $item->title : 'Untitled' }}
@@ -66,79 +63,13 @@
                     @endforeach
                 </div>
             @else
-                <div class="text-center py-12">
-                    <i class="fas fa-file-alt text-6xl text-gray-300 mb-4"></i>
-                    <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300 mb-2">No Content Available</h3>
-                    <p class="text-gray-500">There is no content to display at this time.</p>
-                </div>
+                <x-empty-state
+                    icon="fas fa-file-alt"
+                    title="No Content Available"
+                    message="There is no content to display at this time."
+                />
             @endif
         </div>
     @endif
 </div>
-
-@push('styles')
-<style>
-    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
-        margin-top: 1.5em;
-        margin-bottom: 0.75em;
-        font-weight: 600;
-    }
-
-    .prose p {
-        margin-bottom: 1em;
-    }
-
-    .prose ul, .prose ol {
-        margin-bottom: 1em;
-        padding-left: 1.5em;
-    }
-
-    .prose a {
-        color: #2563eb;
-        text-decoration: underline;
-    }
-
-    .prose a:hover {
-        color: #1d4ed8;
-    }
-
-    .prose img {
-        max-width: 100%;
-        height: auto;
-        border-radius: 0.5rem;
-        margin: 1.5em 0;
-    }
-
-    .prose blockquote {
-        border-left: 4px solid #e5e7eb;
-        padding-left: 1em;
-        color: #6b7280;
-        font-style: italic;
-        margin: 1.5em 0;
-    }
-
-    .prose code {
-        background-color: #f3f4f6;
-        padding: 0.25em 0.5em;
-        border-radius: 0.25rem;
-        font-size: 0.875em;
-    }
-
-    .prose pre {
-        background-color: #1f2937;
-        color: #f9fafb;
-        padding: 1em;
-        border-radius: 0.5rem;
-        overflow-x: auto;
-        margin: 1.5em 0;
-    }
-
-    .prose pre code {
-        background-color: transparent;
-        padding: 0;
-        color: inherit;
-    }
-</style>
-@endpush
 @endsection
-
diff --git a/resources/views/details/index.blade.php b/resources/views/details/index.blade.php
index f871125a2..553076ed0 100644
--- a/resources/views/details/index.blade.php
+++ b/resources/views/details/index.blade.php
@@ -50,25 +50,25 @@
                             </div>
                         </div>
                         <div class="flex flex-wrap gap-2">
-                            <a href="{{ url('/getnzb/' . $release->guid) }}" class="download-nzb 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 inline-flex items-center">
+                            <a href="{{ url('/getnzb/' . $release->guid) }}" class="download-nzb release-action release-action-download px-4 py-2">
                                 <i class="fas fa-download mr-2"></i> Download NZB
                             </a>
-                            <a href="#" class="add-to-cart 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 inline-flex items-center" data-guid="{{ $release->guid }}">
+                            <a href="#" class="add-to-cart release-action release-action-primary px-4 py-2" data-guid="{{ $release->guid }}">
                                 <i class="icon_cart fas fa-shopping-basket mr-2"></i> Add to Cart
                             </a>
                             @if(isset($release->nfostatus) && $release->nfostatus == 1)
-                                <button type="button" class="nfo-badge px-4 py-2 bg-primary-500 dark:bg-primary-600 text-white rounded-lg hover:bg-primary-600 dark:hover:bg-primary-700 transition inline-flex items-center" data-guid="{{ $release->guid }}" title="View NFO file">
+                                <button type="button" class="nfo-badge release-action release-action-primary px-4 py-2" data-guid="{{ $release->guid }}" title="View NFO file">
                                     <i class="fas fa-file-alt mr-2"></i> View NFO
                                 </button>
                             @endif
                             @if(($release->totalpart ?? 0) > 0)
-                                <button type="button" class="filelist-badge px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition inline-flex items-center" data-guid="{{ $release->guid }}" title="View file list">
+                                <button type="button" class="filelist-badge release-action release-action-muted px-4 py-2" data-guid="{{ $release->guid }}" title="View file list">
                                     <i class="fas fa-list mr-2"></i> View Files
                                 </button>
                             @endif
                             @auth
                                 @if(auth()->user()->hasRole('Admin') || auth()->user()->hasRole('Moderator'))
-                                    <a href="{{ route('admin.release-edit', ['id' => $release->guid]) }}" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition inline-flex items-center" title="Edit Release">
+                                    <a href="{{ route('admin.release-edit', ['id' => $release->guid]) }}" class="release-action release-action-primary px-4 py-2" title="Edit Release">
                                         <i class="fas fa-edit mr-2"></i> Edit Release
                                     </a>
                                 @endif
@@ -750,7 +750,7 @@
                             <dt class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Password</dt>
                             <dd class="mt-1">
                                 @if(!empty($release->password))
-                                    <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-300 dark:border-gray-700">
+                                    <div class="surface-panel rounded-lg p-3 border">
                                         <code class="text-sm text-gray-900 dark:text-gray-100 font-mono break-all">{{ $release->password }}</code>
                                     </div>
                                     <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
@@ -758,7 +758,7 @@
                                         This password is embedded in the NZB file and will be automatically recognized by NZBGet or SABnzbd.
                                     </p>
                                 @else
-                                    <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-300 dark:border-gray-700">
+                                    <div class="surface-panel rounded-lg p-3 border">
                                         <code class="text-sm text-gray-500 dark:text-gray-400 font-mono">None</code>
                                     </div>
                                     <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
@@ -784,7 +784,7 @@
                             <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                                 <i class="fas fa-video mr-2 text-primary-500 dark:text-primary-400"></i> Video Details
                             </h4>
-                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700">
+                            <div class="surface-panel rounded-lg p-4 shadow-sm border">
                                 <dl class="grid grid-cols-2 md:grid-cols-3 gap-4">
                                     @if(!empty($reVideo['containerformat']))
                                         <div>
@@ -857,7 +857,7 @@
                                 <i class="fas fa-volume-up mr-2 text-primary-500 dark:text-primary-400"></i> Audio Details
                             </h4>
                             @foreach($reAudio as $index => $audio)
-                                <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700 {{ $index > 0 ? 'mt-3' : '' }}">
+                                <div class="surface-panel rounded-lg p-4 shadow-sm border {{ $index > 0 ? 'mt-3' : '' }}">
                                     @if(count($reAudio) > 1)
                                         <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">Track {{ $index + 1 }}</p>
                                     @endif
@@ -909,7 +909,7 @@
                             <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                                 <i class="fas fa-closed-captioning mr-2 text-primary-500"></i> Subtitles
                             </h4>
-                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
+                            <div class="surface-panel rounded-lg p-4 shadow-sm">
                                 <p class="text-sm text-gray-900 dark:text-gray-100 font-semibold">{{ $reSubs->subs }}</p>
                             </div>
                         </div>
@@ -1020,7 +1020,7 @@
                 @if(isset($comments) && count($comments) > 0)
                     <div class="space-y-4">
                         @foreach($comments as $comment)
-                            <div class="detail-comment-card bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition">
+                            <div class="detail-comment-card surface-panel-alt rounded-lg p-4 border transition hover:border-gray-300 dark:hover:border-gray-600">
                                 <div class="flex items-start justify-between mb-3">
                                     <div class="flex items-center">
                                         <div class="w-10 h-10 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center text-white font-bold mr-3 shadow-sm">
@@ -1040,7 +1040,7 @@
                         @endforeach
                     </div>
                 @else
-                    <div class="detail-empty-comments bg-gray-50 dark:bg-gray-900 rounded-lg p-8 border border-gray-200 dark:border-gray-700 text-center">
+                    <div class="detail-empty-comments surface-panel-alt rounded-lg p-8 border text-center">
                         <i class="fas fa-comments text-4xl text-gray-400 dark:text-gray-600 mb-3"></i>
                         <p class="text-gray-500 dark:text-gray-400">No comments yet. Be the first to comment!</p>
                     </div>
diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php
index e69de29bb..3be530fdd 100644
--- a/resources/views/home/index.blade.php
+++ b/resources/views/home/index.blade.php
@@ -0,0 +1,17 @@
+@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>
+@endsection
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index d96a38b0e..f5785193d 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -32,11 +32,11 @@
     @stack('meta')
     @stack('styles')
 </head>
-<body class="app-shell bg-gray-50 dark:bg-gray-900 font-sans antialiased">
+<body class="app-shell font-sans antialiased">
     <div class="h-screen flex">
         <!-- Sidebar -->
         @auth
-            <aside id="sidebar" class="hidden md:flex md:flex-col w-64 bg-gray-900 dark:bg-gray-950 text-white shrink-0 h-full overflow-y-auto">
+            <aside id="sidebar" class="hidden md:flex md:flex-col w-64 text-white shrink-0 h-full overflow-y-auto">
                 <div class="flex items-center justify-between p-4 border-b border-white/10 dark:border-white/5">
                     <a href="{{ $site['home_link'] ?? url('/') }}" class="flex items-center space-x-3">
                         <img src="{{ asset('assets/images/logo.svg') }}" alt="{{ config('app.name') }} Logo" class="w-12 h-12" aria-hidden="true">
@@ -54,13 +54,13 @@
         <div class="flex-1 flex flex-col h-full overflow-hidden">
             <!-- Top Navigation -->
             @auth
-                <header class="surface-header bg-gray-800 dark:bg-gray-950 text-white shrink-0 z-10">
+                <header class="surface-header text-white shrink-0 z-10">
                     @include('partials.header-menu')
                 </header>
             @endauth
 
             <!-- Page Content - This is the scrollable area -->
-            <main class="flex-1 overflow-y-auto rounded-xl shadow-inner ring-1 ring-black/10 dark:ring-white/5" data-scroll-container>
+            <main class="flex-1 overflow-y-auto shadow-inner ring-1 ring-black/10 dark:ring-white/5" data-scroll-container>
                 <div class="container mx-auto px-4 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]">
                     @if(session('success'))
                         <div class="mb-4 p-4 bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-700 text-green-700 dark:text-green-200 rounded-lg">
@@ -145,4 +145,3 @@
     </div>
 </body>
 </html>
-
diff --git a/resources/views/movies/partials/release-item.blade.php b/resources/views/movies/partials/release-item.blade.php
index 7015b51b2..104b6f9af 100644
--- a/resources/views/movies/partials/release-item.blade.php
+++ b/resources/views/movies/partials/release-item.blade.php
@@ -8,12 +8,12 @@
 ])
 
 @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">
+    <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 --}}
                 <a href="{{ url('/details/' . $release->guid) }}"
-                   class="text-sm text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 font-medium block break-all"
+                   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>
@@ -21,19 +21,19 @@
                 {{-- 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">
+                        <span class="release-chip py-1">
                             <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">
+                        <span class="release-chip py-1">
                             <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">
+                        <span class="release-chip py-1">
                             <i class="fas fa-plus-circle mr-1"></i>{{ userDateDiffForHumans($release->adddate) }}
                         </span>
                     @endif
@@ -52,18 +52,18 @@
             {{-- Action Buttons --}}
             <div class="release-actions flex flex-wrap items-center gap-2 {{ $layout == 1 ? 'shrink-0' : 'mt-2' }}">
                 <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">
+                   class="release-action-sm release-action-download">
                     <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-blue-600 dark:bg-blue-700 text-white hover:bg-blue-700 dark:hover:bg-blue-800 transition"
+                        class="add-to-cart release-action-sm release-action-primary"
                         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">
+                   class="release-action-sm release-action-muted">
                     <i class="fas fa-info-circle mr-1"></i> Details
                 </a>
 
diff --git a/resources/views/search/index.blade.php b/resources/views/search/index.blade.php
index 5a9c01e15..062219c47 100644
--- a/resources/views/search/index.blade.php
+++ b/resources/views/search/index.blade.php
@@ -11,10 +11,7 @@
         ['label' => 'Search'],
     ]" />
 
-    <div class="px-6 py-6">
-        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Search Releases</h1>
-        <p class="text-gray-600 dark:text-gray-400">Find exactly what you're looking for</p>
-    </div>
+    <x-page-header title="Search Releases" description="Find exactly what you're looking for" icon="fas fa-search" />
 
     <!-- Search Form -->
     <form method="GET" action="{{ route('search') }}" class="px-6 pb-6" id="searchForm">
@@ -144,13 +141,9 @@
 
         <!-- Action Buttons -->
         <div class="flex flex-col sm:flex-row flex-wrap gap-2">
-            <button type="submit" class="px-6 py-2 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition inline-flex items-center justify-center font-semibold">
-                <i class="fas fa-search mr-2"></i> Search
-            </button>
-            <a href="{{ url('/search?search_type=adv') }}" class="px-6 py-2 bg-primary-600 dark:bg-primary-700 text-white rounded-lg hover:bg-primary-700 dark:hover:bg-primary-800 transition inline-flex items-center justify-center">
-                <i class="fas fa-sliders-h mr-2"></i> Advanced Search
-            </a>
-            <a href="{{ route('search') }}" class="px-6 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-700 transition justify-center inline-flex">
+            <x-button type="submit" size="lg" icon="fas fa-search">Search</x-button>
+            <x-button-link href="{{ url('/search?search_type=adv') }}" size="lg" icon="fas fa-sliders-h">Advanced Search</x-button-link>
+            <a href="{{ route('search') }}" class="inline-flex justify-center rounded-lg bg-gray-300 px-6 py-3 text-base font-semibold text-gray-700 transition hover:bg-gray-400 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-700">
                 Clear
             </a>
         </div>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index a7965ca2d..b9f170201 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -1,132 +1,28 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+@extends('layouts.guest')
 
-    <title>Laravel</title>
+@section('content')
+<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>
 
-    <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+            <h1 class="mt-6 text-3xl font-bold text-gray-900 dark:text-gray-100">{{ config('app.name') }}</h1>
+            <p class="mx-auto mt-3 max-w-xl text-gray-600 dark:text-gray-400">Your Usenet index is ready. Sign in to search releases, manage saved media, and use your download basket.</p>
 
-    <!-- Styles -->
-    <style>
-        /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
-    </style>
-
-    <style>
-        body {
-            font-family: 'Nunito';
-        }
-    </style>
-</head>
-<body class="antialiased">
-<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-800 dark:bg-gray-900 sm:items-center sm:pt-0">
-    @if (Route::has('login'))
-        <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
-            @auth
-                <a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-300 underline">Home</a>
-            @else
-                <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-300 underline">Login</a>
-
-                @if (Route::has('register'))
-                    <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-300 underline">Register</a>
-                @endif
-            @endif
-        </div>
-    @endif
-
-    <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
-        <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
-            <svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 dark:text-gray-300 sm:h-20">
-                <g clip-path="url(#clip0)" fill="#EF3B2D">
-                    <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
-                </g>
-            </svg>
-        </div>
-
-        <div class="mt-8 bg-white dark:bg-gray-800 dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
-            <div class="grid grid-cols-1 md:grid-cols-2">
-                <div class="p-6">
-                    <div class="flex items-center">
-                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
-                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-gray-100 dark:text-white">Documentation</a></div>
-                    </div>
-
-                    <div class="ml-12">
-                        <div class="mt-2 text-gray-600 dark:text-gray-400 dark:text-gray-400 text-sm">
-                            Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
-                        </div>
-                    </div>
-                </div>
-
-                <div class="p-6 border-t border-gray-200 dark:border-gray-700 dark:border-gray-700 md:border-t-0 md:border-l">
-                    <div class="flex items-center">
-                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
-                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laracasts.com" class="underline text-gray-900 dark:text-gray-100 dark:text-white">Laracasts</a></div>
-                    </div>
-
-                    <div class="ml-12">
-                        <div class="mt-2 text-gray-600 dark:text-gray-400 dark:text-gray-400 text-sm">
-                            Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
-                        </div>
-                    </div>
-                </div>
-
-                <div class="p-6 border-t border-gray-200 dark:border-gray-700 dark:border-gray-700">
-                    <div class="flex items-center">
-                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
-                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel-news.com/" class="underline text-gray-900 dark:text-gray-100 dark:text-white">Laravel News</a></div>
-                    </div>
-
-                    <div class="ml-12">
-                        <div class="mt-2 text-gray-600 dark:text-gray-400 dark:text-gray-400 text-sm">
-                            Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
-                        </div>
-                    </div>
-                </div>
-
-                <div class="p-6 border-t border-gray-200 dark:border-gray-700 dark:border-gray-700 md:border-l">
-                    <div class="flex items-center">
-                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                        <div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-gray-100 dark:text-white">Vibrant Ecosystem</div>
-                    </div>
-
-                    <div class="ml-12">
-                        <div class="mt-2 text-gray-600 dark:text-gray-400 dark:text-gray-400 text-sm">
-                            Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline">Forge</a>, <a href="https://vapor.laravel.com" class="underline">Vapor</a>, <a href="https://nova.laravel.com" class="underline">Nova</a>, and <a href="https://envoyer.io" class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline">Echo</a>, <a href="https://laravel.com/docs/sanctum" class="underline">Sanctum</a>, and more.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
-            <div class="text-center text-sm text-gray-500 sm:text-left">
-                <div class="flex items-center">
-                    <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="-mt-px w-5 h-5 text-gray-400">
-                        <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                    </svg>
-
-                    <a href="https://laravel.bigcartel.com" class="ml-1 underline">
-                        Shop
-                    </a>
-
-                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-4 -mt-px w-5 h-5 text-gray-400">
-                        <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
-                    </svg>
-
-                    <a href="https://github.com/sponsors/taylorotwell" class="ml-1 underline">
-                        Sponsor
-                    </a>
-                </div>
-            </div>
-
-            <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
-                Build v{{ Illuminate\Foundation\Application::VERSION }}
+            <div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
+                @auth
+                    <x-button-link href="{{ route('search') }}" icon="fas fa-search">Search Releases</x-button-link>
+                    <x-button-link href="{{ route('All') }}" variant="secondary" icon="fas fa-list-ul">Browse All</x-button-link>
+                @else
+                    <x-button-link href="{{ route('login') }}" icon="fas fa-sign-in-alt">Sign In</x-button-link>
+                    @if(Route::has('register'))
+                        <x-button-link href="{{ route('register') }}" variant="secondary" icon="fas fa-user-plus">Create Account</x-button-link>
+                    @endif
+                @endauth
             </div>
         </div>
     </div>
 </div>
-</body>
-</html>
+@endsection