From ee00cb2df83de59552944411a70c3c8fa0eebb56 Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Wed, 4 Mar 2026 11:53:21 +0100
Subject: [PATCH] Improve CSS and looks

---
 resources/css/app.css                         |  34 ++-
 resources/views/layouts/admin.blade.php       |  20 +-
 resources/views/layouts/main.blade.php        |  10 +-
 resources/views/partials/admin-menu.blade.php |  98 ++++-----
 resources/views/partials/footer.blade.php     |  43 ++--
 .../views/partials/header-menu.blade.php      | 198 +++++++++---------
 resources/views/partials/sidebar.blade.php    |  48 ++---
 7 files changed, 229 insertions(+), 222 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index f77a26ba5..d8630fa0f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -23,14 +23,18 @@
     --surface-card-dark: #1e293b;
     --surface-dropdown: #0f172a;
     --surface-dropdown-dark: #020617;
-    --surface-footer: #f1f5f9;
-    --surface-footer-dark: #1e293b;
+    --surface-footer: #1e293b;
+    --surface-footer-dark: #020617;
     --surface-hover: #334155;
     --surface-hover-dark: #1e293b;
     --border-default: #e2e8f0;
     --border-default-dark: #334155;
     --text-muted: #64748b;
     --text-muted-dark: #94a3b8;
+    --surface-panel-alt: #f1f5f9;
+    --surface-panel-alt-dark: #1e293b;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
     /* Accent - Blue */
     --color-primary-50: #eff6ff;
     --color-primary-100: #dbeafe;
@@ -56,14 +60,18 @@
     --surface-card-dark: #0f2e24;
     --surface-dropdown: #0d281f;
     --surface-dropdown-dark: #020c09;
-    --surface-footer: #ecfdf5;
-    --surface-footer-dark: #14332a;
+    --surface-footer: #14332a;
+    --surface-footer-dark: #020c09;
     --surface-hover: #166534;
     --surface-hover-dark: #14532d;
     --border-default: #bbf7d0;
     --border-default-dark: #14532d;
     --text-muted: #047857;
     --text-muted-dark: #6ee7b7;
+    --surface-panel-alt: #ecfdf5;
+    --surface-panel-alt-dark: #14332a;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
     --color-primary-50: #ecfdf5;
     --color-primary-100: #d1fae5;
     --color-primary-200: #a7f3d0;
@@ -88,14 +96,18 @@
     --surface-card-dark: #1e1b4b;
     --surface-dropdown: #1e1b4b;
     --surface-dropdown-dark: #0f0620;
-    --surface-footer: #f5f3ff;
-    --surface-footer-dark: #2d1f4e;
+    --surface-footer: #2d1f4e;
+    --surface-footer-dark: #0f0620;
     --surface-hover: #5b21b6;
     --surface-hover-dark: #3b0764;
     --border-default: #e9d5ff;
     --border-default-dark: #6b21a8;
     --text-muted: #6d28d9;
     --text-muted-dark: #c4b5fd;
+    --surface-panel-alt: #f5f3ff;
+    --surface-panel-alt-dark: #2d1f4e;
+    --surface-chrome-border: rgba(255,255,255,0.08);
+    --surface-chrome-border-dark: rgba(255,255,255,0.05);
     --color-primary-50: #f5f3ff;
     --color-primary-100: #ede9fe;
     --color-primary-200: #ddd6fe;
@@ -176,11 +188,11 @@ header.surface-header nav {
 }
 footer {
     background-color: var(--surface-footer) !important;
-    border-color: var(--border-default) !important;
+    color: white;
 }
 .dark footer {
     background-color: var(--surface-footer-dark) !important;
-    border-color: var(--border-default-dark) !important;
+    color: white;
 }
 
 /* Dark Mode Text Readability Fixes */
@@ -260,13 +272,13 @@ footer {
     background-color: var(--surface-card-dark) !important;
     border-color: var(--border-default-dark);
 }
-/* Sub-sections (filter bars, toolbars) - use footer surface for slight contrast */
+/* Sub-sections (filter bars, toolbars) - subtle contrast from cards */
 .surface-panel-alt {
-    background-color: var(--surface-footer) !important;
+    background-color: var(--surface-panel-alt) !important;
     border-color: var(--border-default);
 }
 .dark .surface-panel-alt {
-    background-color: var(--surface-footer-dark) !important;
+    background-color: var(--surface-panel-alt-dark) !important;
     border-color: var(--border-default-dark);
 }
 .surface-panel-alt.border-b,
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 3b6d812d9..f9643096a 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -28,8 +28,8 @@
 <body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
     <div class="h-screen flex">
         <!-- Admin Sidebar -->
-        <aside 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 rounded-r-xl">
-            <div class="flex items-center justify-between p-4 border-b border-gray-800 dark:border-gray-700">
+        <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">
+            <div class="flex items-center justify-between p-4 border-b border-white/10 dark:border-white/5">
                 <a href="{{ route('admin.index') }}" class="flex items-center space-x-2">
                     <i class="fas fa-cog text-2xl text-blue-500 dark:text-blue-400"></i>
                     <span class="text-xl font-semibold">Admin Panel</span>
@@ -44,16 +44,16 @@
         <!-- Main Content -->
         <div class="flex-1 flex flex-col h-full overflow-hidden">
             <!-- Top Bar -->
-            <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 shrink-0 rounded-b-xl">
+            <header class="surface-header bg-gray-800 dark:bg-gray-950 text-white shrink-0 z-10">
                 <div class="flex items-center justify-between px-6 py-4">
-                    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">{{ $page_title ?? 'Admin Dashboard' }}</h1>
+                    <h1 class="text-lg font-semibold text-gray-200">{{ $page_title ?? 'Admin Dashboard' }}</h1>
                     <div class="flex items-center space-x-4">
-                        <a href="{{ url('/') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
+                        <a href="{{ url('/') }}" class="text-gray-300 dark:text-gray-400 hover:text-white transition">
                             <i class="fas fa-home mr-1"></i> Back to Site
                         </a>
                         <a href="{{ route('logout') }}"
                            data-logout
-                           class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">
+                           class="text-red-400 hover:text-red-300 transition">
                             <i class="fas fa-sign-out-alt mr-1"></i> Logout
                         </a>
                         <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
@@ -64,7 +64,7 @@
             </header>
 
             <!-- Page Content - Scrollable Area -->
-            <main class="flex-1 overflow-y-auto p-6" data-scroll-container>
+            <main class="flex-1 overflow-y-auto p-6 rounded-xl shadow-inner ring-1 ring-black/10 dark:ring-white/5" data-scroll-container>
                 @if(session('success'))
                     <div class="mb-4 p-4 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 dark:border-green-600 text-green-800 dark:text-green-200 rounded">
                         <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
@@ -81,10 +81,10 @@
             </main>
 
             <!-- Admin Footer - Fixed at bottom -->
-            <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shrink-0 rounded-t-xl">
+            <footer class="shrink-0">
                 <div class="px-6 py-3">
-                    <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-gray-600 dark:text-gray-400">
-                        <p>&copy; {{ now()->year }} <a href="https://github.com/NNTmux/newznab-tmux" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition">NNTmux</a> Admin Panel</p>
+                    <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-gray-300 dark:text-gray-400">
+                        <p>&copy; {{ now()->year }} <a href="https://github.com/NNTmux/newznab-tmux" class="text-primary-400 hover:text-primary-300 transition">NNTmux</a> Admin Panel</p>
                         <p>{{ config('app.name') }} v{{ config('nntmux.versions.git.tag') ?? '1.0.0' }}</p>
                     </div>
                 </div>
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index e759597ea..7e13d0380 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -34,8 +34,8 @@
     <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 rounded-r-xl">
-                <div class="flex items-center justify-between p-4 border-b border-gray-800 dark:border-gray-700">
+            <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">
+                <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">
                         <span class="text-xl font-semibold">{{ config('app.name') }}</span>
@@ -52,13 +52,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 shadow-lg shrink-0 z-10 rounded-b-xl">
+                <header class="surface-header bg-gray-800 dark:bg-gray-950 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" data-scroll-container>
+            <main class="flex-1 overflow-y-auto rounded-xl 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">
@@ -86,7 +86,7 @@
             </main>
 
             <!-- Footer - Fixed at bottom -->
-            <footer class="shrink-0 rounded-t-xl">
+            <footer class="shrink-0">
                 @include('partials.footer')
             </footer>
         </div>
diff --git a/resources/views/partials/admin-menu.blade.php b/resources/views/partials/admin-menu.blade.php
index 537b93405..a1d637236 100644
--- a/resources/views/partials/admin-menu.blade.php
+++ b/resources/views/partials/admin-menu.blade.php
@@ -1,7 +1,7 @@
 <div class="space-y-2 px-4">
     <!-- Dashboard -->
     <div class="mb-4">
-        <a href="{{ route('admin.index') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <a href="{{ route('admin.index') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <i class="fas fa-tachometer-alt"></i>
             <span>Dashboard</span>
         </a>
@@ -9,7 +9,7 @@
 
     <!-- Users -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-users"></i>
                 <span>Users</span>
@@ -17,19 +17,19 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/user-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/user-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-user-friends mr-2 text-blue-400"></i>User List
             </a>
-            <a href="{{ url('/admin/role-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/role-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-user-tag mr-2 text-purple-400"></i>Roles
             </a>
-            <a href="{{ url('/admin/user-role-history') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/user-role-history') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-history mr-2 text-yellow-400"></i>Role History
             </a>
-            <a href="{{ url('/admin/promotions') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/promotions') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-arrow-up mr-2 text-green-400"></i>Promotions
             </a>
-            <a href="{{ url('/admin/deleted-users') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/deleted-users') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-user-slash mr-2 text-gray-400"></i>Deleted Users
             </a>
         </div>
@@ -37,7 +37,7 @@
 
     <!-- Invitations -->
     <div class="mb-4">
-        <a href="{{ url('/admin/invitations') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <a href="{{ url('/admin/invitations') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <i class="fas fa-envelope-open-text"></i>
             <span>Invitations</span>
         </a>
@@ -45,7 +45,7 @@
 
     <!-- Content -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-file-alt"></i>
                 <span>Content</span>
@@ -53,10 +53,10 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/content-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/content-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-list mr-2 text-blue-400"></i>Content List
             </a>
-            <a href="{{ url('/admin/content-add') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/content-add') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-plus-circle mr-2 text-green-400"></i>Add Content
             </a>
         </div>
@@ -64,7 +64,7 @@
 
     <!-- Comments -->
     <div class="mb-4">
-        <a href="{{ url('/admin/comments-list') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <a href="{{ url('/admin/comments-list') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <i class="fas fa-comments"></i>
             <span>Comments</span>
         </a>
@@ -72,7 +72,7 @@
 
     <!-- Releases -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-download"></i>
                 <span>Releases</span>
@@ -80,16 +80,16 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/release-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/release-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-list-ul mr-2 text-blue-400"></i>Release List
             </a>
-            <a href="{{ url('/admin/release-reports') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/release-reports') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-flag text-red-500 mr-1"></i> Release Reports
             </a>
-            <a href="{{ url('/admin/failrel-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/failrel-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-exclamation-triangle mr-2 text-red-400"></i>Failed Releases
             </a>
-            <a href="{{ url('/admin/category-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/category-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-folder-tree mr-2 text-yellow-400"></i>Categories
             </a>
         </div>
@@ -97,7 +97,7 @@
 
     <!-- Movies -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-film"></i>
                 <span>Movies</span>
@@ -105,10 +105,10 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/movie-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/movie-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-video mr-2 text-blue-400"></i>Movie List
             </a>
-            <a href="{{ url('/admin/movie-add') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/movie-add') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-plus-circle mr-2 text-green-400"></i>Add Movie
             </a>
         </div>
@@ -116,7 +116,7 @@
 
     <!-- TV Shows -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-tv"></i>
                 <span>TV Shows</span>
@@ -124,7 +124,7 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/show-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/show-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-list mr-2 text-blue-400"></i>TV Shows List
             </a>
         </div>
@@ -132,7 +132,7 @@
 
     <!-- AniDB -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-dragon"></i>
                 <span>AniDB</span>
@@ -140,7 +140,7 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/anidb-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/anidb-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-list mr-2 text-pink-400"></i>AniDB List
             </a>
         </div>
@@ -148,7 +148,7 @@
 
     <!-- Games -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-gamepad"></i>
                 <span>Games</span>
@@ -156,7 +156,7 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/game-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/game-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-dice mr-2 text-green-400"></i>Game List
             </a>
         </div>
@@ -164,7 +164,7 @@
 
     <!-- Console -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-desktop"></i>
                 <span>Console</span>
@@ -172,7 +172,7 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/console-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/console-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-list mr-2 text-purple-400"></i>Console List
             </a>
         </div>
@@ -180,7 +180,7 @@
 
     <!-- Music -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-music"></i>
                 <span>Music</span>
@@ -188,7 +188,7 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/music-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/music-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-compact-disc mr-2 text-cyan-400"></i>Music List
             </a>
         </div>
@@ -196,7 +196,7 @@
 
     <!-- Books -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-book"></i>
                 <span>Books</span>
@@ -204,7 +204,7 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/book-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/book-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-book-open mr-2 text-amber-400"></i>Book List
             </a>
         </div>
@@ -212,7 +212,7 @@
 
     <!-- PreDB -->
     <div class="mb-4">
-        <a href="{{ url('/admin/predb') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <a href="{{ url('/admin/predb') }}" class="flex items-center space-x-3 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <i class="fas fa-database"></i>
             <span>PreDB</span>
         </a>
@@ -220,7 +220,7 @@
 
     <!-- Blacklist -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-ban"></i>
                 <span>Blacklist</span>
@@ -228,7 +228,7 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/binaryblacklist-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/binaryblacklist-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-file-circle-xmark mr-2 text-red-400"></i>Binary Blacklist
             </a>
         </div>
@@ -236,7 +236,7 @@
 
     <!-- Regexes -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-code"></i>
                 <span>Regexes</span>
@@ -244,13 +244,13 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/category_regexes-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/category_regexes-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-folder mr-2 text-yellow-400"></i>Category Regexes
             </a>
-            <a href="{{ url('/admin/collection_regexes-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/collection_regexes-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-layer-group mr-2 text-blue-400"></i>Collection Regexes
             </a>
-            <a href="{{ url('/admin/release_naming_regexes-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/release_naming_regexes-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-tag mr-2 text-green-400"></i>Release Naming Regexes
             </a>
         </div>
@@ -258,7 +258,7 @@
 
     <!-- Groups -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-server"></i>
                 <span>Groups Management</span>
@@ -266,16 +266,16 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/group-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/group-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-list mr-2 text-blue-400"></i>All Groups
             </a>
-            <a href="{{ url('/admin/group-list-active') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/group-list-active') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-check-circle mr-2 text-green-400"></i>Active Groups
             </a>
-            <a href="{{ url('/admin/group-list-inactive') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/group-list-inactive') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-pause-circle mr-2 text-gray-400"></i>Inactive Groups
             </a>
-            <a href="{{ url('/admin/group-bulk') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/group-bulk') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-plus-square mr-2 text-purple-400"></i>Bulk Add Groups
             </a>
         </div>
@@ -283,7 +283,7 @@
 
     <!-- System -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-cog"></i>
                 <span>System</span>
@@ -291,16 +291,16 @@
             <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
-            <a href="{{ url('/admin/site-edit') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/site-edit') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-sliders-h mr-2 text-blue-400"></i>Site Settings
             </a>
-            <a href="{{ url('/admin/tmux-edit') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/tmux-edit') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-terminal mr-2 text-green-400"></i>Tmux
             </a>
-            <a href="{{ url('/admin/site-stats') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url('/admin/site-stats') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-chart-bar mr-2 text-purple-400"></i>Statistics
             </a>
-            <a href="{{ url(config('horizon.path', 'horizon')) }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
+            <a href="{{ url(config('horizon.path', 'horizon')) }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded transition">
                 <i class="fas fa-stream mr-2 text-cyan-400"></i>Horizon
             </a>
         </div>
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
index 12fd1fea0..c3dd483f5 100644
--- a/resources/views/partials/footer.blade.php
+++ b/resources/views/partials/footer.blade.php
@@ -1,29 +1,24 @@
-<footer class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 transition-colors duration-200 rounded-t-xl">
-    <div class="container mx-auto px-4 py-3">
-        <div class="flex flex-wrap items-center justify-between gap-2 text-sm">
-            <!-- Copyright -->
-            <p class="text-gray-600 dark:text-gray-400">
-                &copy; {{ now()->year }}
-                <a href="https://github.com/NNTmux/newznab-tmux" class="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition">NNTmux</a>
-            </p>
+<div class="container mx-auto px-4 py-3">
+    <div class="flex flex-wrap items-center justify-between gap-2 text-sm">
+        <p class="text-gray-300 dark:text-gray-400">
+            &copy; {{ now()->year }}
+            <a href="https://github.com/NNTmux/newznab-tmux" class="text-primary-400 hover:text-primary-300 transition">NNTmux</a>
+        </p>
 
-            <!-- Quick Links -->
-            <div class="flex items-center gap-4">
-                <a href="{{ url('/terms-and-conditions') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition">Terms</a>
-                <a href="{{ url('/privacy-policy') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition">Privacy</a>
-                <a href="{{ route('contact-us') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition">Contact</a>
-            </div>
+        <div class="flex items-center gap-4">
+            <a href="{{ url('/terms-and-conditions') }}" class="text-gray-300 dark:text-gray-400 hover:text-white transition">Terms</a>
+            <a href="{{ url('/privacy-policy') }}" class="text-gray-300 dark:text-gray-400 hover:text-white transition">Privacy</a>
+            <a href="{{ route('contact-us') }}" class="text-gray-300 dark:text-gray-400 hover:text-white transition">Contact</a>
+        </div>
 
-            <!-- Social Links -->
-            <div class="flex items-center gap-3">
-                <a href="https://github.com/NNTmux/newznab-tmux" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition" title="GitHub">
-                    <i class="fab fa-github text-lg"></i>
-                </a>
-                <a href="{{ url('/rss') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition" title="RSS Feeds">
-                    <i class="fas fa-rss text-lg"></i>
-                </a>
-            </div>
+        <div class="flex items-center gap-3">
+            <a href="https://github.com/NNTmux/newznab-tmux" class="text-gray-300 dark:text-gray-400 hover:text-white transition" title="GitHub">
+                <i class="fab fa-github text-lg"></i>
+            </a>
+            <a href="{{ url('/rss') }}" class="text-gray-300 dark:text-gray-400 hover:text-white transition" title="RSS Feeds">
+                <i class="fas fa-rss text-lg"></i>
+            </a>
         </div>
     </div>
-</footer>
+</div>
 
diff --git a/resources/views/partials/header-menu.blade.php b/resources/views/partials/header-menu.blade.php
index a96b2178f..a02ead28e 100644
--- a/resources/views/partials/header-menu.blade.php
+++ b/resources/views/partials/header-menu.blade.php
@@ -13,139 +13,139 @@
                     @foreach($parentcatlist as $parentcat)
                         @if($parentcat['id'] == App\Models\Category::TV_ROOT)
                             <div class="relative dropdown-container shrink-0">
-                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition text-sm whitespace-nowrap">
+                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded-lg transition text-sm whitespace-nowrap">
                                     <i class="fa fa-television mr-1.5"></i>
                                     <span>{{ $parentcat['title'] }}</span>
                                     <i class="fas fa-chevron-down ml-1 text-xs"></i>
                                 </button>
                                 <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50">
-                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">All TV</a>
-                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
-                                    <a href="{{ route('series') }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">TV Series</a>
-                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
+                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">All TV</a>
+                                    <div class="border-t border-white/10 dark:border-white/5"></div>
+                                    <a href="{{ route('series') }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">TV Series</a>
+                                    <div class="border-t border-white/10 dark:border-white/5"></div>
                                     @foreach($parentcat['categories'] as $subcat)
                                         @if($subcat['id'] == App\Models\Category::TV_FOREIGN)
                                             <div class="relative submenu-container">
-                                                <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="submenu-toggle flex items-center justify-between px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">
+                                                <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="submenu-toggle flex items-center justify-between px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">
                                                     <span>{{ $subcat['title'] }}</span>
                                                     <i class="fas fa-chevron-right text-xs"></i>
                                                 </a>
                                                 <div class="submenu absolute left-full top-0 w-40 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50 ml-0.5 hidden">
-                                                    <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">All Foreign</a>
-                                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
-                                                    <a href="{{ route('search', ['search' => 'German|Deutsch|DE|GER', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">German</a>
-                                                    <a href="{{ route('search', ['search' => 'French|Francais|FR|FRENCH|VOSTFR|TRUEFRENCH', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">French</a>
-                                                    <a href="{{ route('search', ['search' => 'Spanish|Espanol|ES|ESP|SPANISH|Latino', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Spanish</a>
-                                                    <a href="{{ route('search', ['search' => 'Italian|Italiano|IT|ITA', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Italian</a>
-                                                    <a href="{{ route('search', ['search' => 'Dutch|NL|Flemish|Nederlands|DUTCH', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Dutch</a>
-                                                    <a href="{{ route('search', ['search' => 'Japanese|JP|JPN|JAP', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Japanese</a>
-                                                    <a href="{{ route('search', ['search' => 'Korean|KR|KOR|K-Drama', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Korean</a>
-                                                    <a href="{{ route('search', ['search' => 'Chinese|Mandarin|Cantonese|CH|CHN|C-Drama', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Chinese</a>
-                                                    <a href="{{ route('search', ['search' => 'Russian|RU|RUS', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Russian</a>
-                                                    <a href="{{ route('search', ['search' => 'Portuguese|PT|POR|Portugues|Brazilian', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Portuguese</a>
+                                                    <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">All Foreign</a>
+                                                    <div class="border-t border-white/10 dark:border-white/5"></div>
+                                                    <a href="{{ route('search', ['search' => 'German|Deutsch|DE|GER', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">German</a>
+                                                    <a href="{{ route('search', ['search' => 'French|Francais|FR|FRENCH|VOSTFR|TRUEFRENCH', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">French</a>
+                                                    <a href="{{ route('search', ['search' => 'Spanish|Espanol|ES|ESP|SPANISH|Latino', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Spanish</a>
+                                                    <a href="{{ route('search', ['search' => 'Italian|Italiano|IT|ITA', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Italian</a>
+                                                    <a href="{{ route('search', ['search' => 'Dutch|NL|Flemish|Nederlands|DUTCH', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Dutch</a>
+                                                    <a href="{{ route('search', ['search' => 'Japanese|JP|JPN|JAP', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Japanese</a>
+                                                    <a href="{{ route('search', ['search' => 'Korean|KR|KOR|K-Drama', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Korean</a>
+                                                    <a href="{{ route('search', ['search' => 'Chinese|Mandarin|Cantonese|CH|CHN|C-Drama', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Chinese</a>
+                                                    <a href="{{ route('search', ['search' => 'Russian|RU|RUS', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Russian</a>
+                                                    <a href="{{ route('search', ['search' => 'Portuguese|PT|POR|Portugues|Brazilian', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Portuguese</a>
                                                 </div>
                                             </div>
                                         @else
-                                            <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @endif
                                     @endforeach
                                 </div>
                             </div>
                         @elseif($parentcat['id'] == App\Models\Category::MOVIE_ROOT)
                             <div class="relative dropdown-container shrink-0">
-                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition text-sm whitespace-nowrap">
+                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded-lg transition text-sm whitespace-nowrap">
                                     <i class="fa fa-film mr-1.5"></i>
                                     <span>{{ $parentcat['title'] }}</span>
                                     <i class="fas fa-chevron-down ml-1 text-xs"></i>
                                 </button>
                                 <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50">
                                     @if(auth()->check() && auth()->user()->movieview == "1")
-                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
                                     @else
-                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
                                     @endif
-                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
-                                    <a href="{{ route('mymovies') }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">My Movies</a>
-                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
+                                    <div class="border-t border-white/10 dark:border-white/5"></div>
+                                    <a href="{{ route('mymovies') }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">My Movies</a>
+                                    <div class="border-t border-white/10 dark:border-white/5"></div>
                                     @foreach($parentcat['categories'] as $subcat)
                                         @if($subcat['id'] == App\Models\Category::MOVIE_FOREIGN)
                                             <div class="relative submenu-container">
                                                 @if(auth()->check() && auth()->user()->movieview == "1")
-                                                    <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="submenu-toggle flex items-center justify-between px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">
+                                                    <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="submenu-toggle flex items-center justify-between px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">
                                                         <span>{{ $subcat['title'] }}</span>
                                                         <i class="fas fa-chevron-right text-xs"></i>
                                                     </a>
                                                 @else
-                                                    <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="submenu-toggle flex items-center justify-between px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">
+                                                    <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="submenu-toggle flex items-center justify-between px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">
                                                         <span>{{ $subcat['title'] }}</span>
                                                         <i class="fas fa-chevron-right text-xs"></i>
                                                     </a>
                                                 @endif
                                                 <div class="submenu absolute left-full top-0 w-40 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50 ml-0.5 hidden">
                                                     @if(auth()->check() && auth()->user()->movieview == "1")
-                                                        <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">All Foreign</a>
+                                                        <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">All Foreign</a>
                                                     @else
-                                                        <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">All Foreign</a>
+                                                        <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">All Foreign</a>
                                                     @endif
-                                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
-                                                    <a href="{{ route('search', ['search' => 'German|Deutsch|DE|GER', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">German</a>
-                                                    <a href="{{ route('search', ['search' => 'French|Francais|FR|FRENCH|VOSTFR|TRUEFRENCH', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">French</a>
-                                                    <a href="{{ route('search', ['search' => 'Spanish|Espanol|ES|ESP|SPANISH|Latino', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Spanish</a>
-                                                    <a href="{{ route('search', ['search' => 'Italian|Italiano|IT|ITA', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Italian</a>
-                                                    <a href="{{ route('search', ['search' => 'Dutch|NL|Flemish|Nederlands|DUTCH', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Dutch</a>
-                                                    <a href="{{ route('search', ['search' => 'Japanese|JP|JPN|JAP', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Japanese</a>
-                                                    <a href="{{ route('search', ['search' => 'Korean|KR|KOR|K-Drama', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Korean</a>
-                                                    <a href="{{ route('search', ['search' => 'Chinese|Mandarin|Cantonese|CH|CHN|C-Drama', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Chinese</a>
-                                                    <a href="{{ route('search', ['search' => 'Russian|RU|RUS', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Russian</a>
-                                                    <a href="{{ route('search', ['search' => 'Portuguese|PT|POR|Portugues|Brazilian', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">Portuguese</a>
+                                                    <div class="border-t border-white/10 dark:border-white/5"></div>
+                                                    <a href="{{ route('search', ['search' => 'German|Deutsch|DE|GER', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">German</a>
+                                                    <a href="{{ route('search', ['search' => 'French|Francais|FR|FRENCH|VOSTFR|TRUEFRENCH', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">French</a>
+                                                    <a href="{{ route('search', ['search' => 'Spanish|Espanol|ES|ESP|SPANISH|Latino', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Spanish</a>
+                                                    <a href="{{ route('search', ['search' => 'Italian|Italiano|IT|ITA', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Italian</a>
+                                                    <a href="{{ route('search', ['search' => 'Dutch|NL|Flemish|Nederlands|DUTCH', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Dutch</a>
+                                                    <a href="{{ route('search', ['search' => 'Japanese|JP|JPN|JAP', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Japanese</a>
+                                                    <a href="{{ route('search', ['search' => 'Korean|KR|KOR|K-Drama', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Korean</a>
+                                                    <a href="{{ route('search', ['search' => 'Chinese|Mandarin|Cantonese|CH|CHN|C-Drama', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Chinese</a>
+                                                    <a href="{{ route('search', ['search' => 'Russian|RU|RUS', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Russian</a>
+                                                    <a href="{{ route('search', ['search' => 'Portuguese|PT|POR|Portugues|Brazilian', 't' => App\Models\Category::MOVIE_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">Portuguese</a>
                                                 </div>
                                             </div>
                                         @elseif(auth()->check() && auth()->user()->movieview == "1")
-                                            <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @else
-                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @endif
                                     @endforeach
                                 </div>
                             </div>
                         @elseif($parentcat['id'] == App\Models\Category::GAME_ROOT)
                             <div class="relative dropdown-container shrink-0">
-                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition text-sm whitespace-nowrap">
+                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded-lg transition text-sm whitespace-nowrap">
                                     <i class="fa fa-gamepad mr-1.5"></i>
                                     <span>{{ $parentcat['title'] }}</span>
                                     <i class="fas fa-chevron-down ml-1 text-xs"></i>
                                 </button>
                                 <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50">
                                     @if(auth()->check() && auth()->user()->consoleview == "1")
-                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
                                     @else
-                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
                                     @endif
-                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
+                                    <div class="border-t border-white/10 dark:border-white/5"></div>
                                     @foreach($parentcat['categories'] as $subcat)
                                         @if(auth()->check() && auth()->user()->consoleview == "1")
-                                            <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @else
-                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @endif
                                     @endforeach
                                 </div>
                             </div>
                         @elseif($parentcat['id'] == App\Models\Category::PC_ROOT)
                             <div class="relative dropdown-container shrink-0">
-                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition text-sm whitespace-nowrap">
+                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded-lg transition text-sm whitespace-nowrap">
                                     <i class="fa fa-desktop mr-1.5"></i>
                                     <span>{{ $parentcat['title'] }}</span>
                                     <i class="fas fa-chevron-down ml-1 text-xs"></i>
                                 </button>
                                 <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50">
-                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
-                                    <div class="border-t border-gray-700 dark:border-gray-600"></div>
+                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
+                                    <div class="border-t border-white/10 dark:border-white/5"></div>
                                     @foreach($parentcat['categories'] as $subcat)
                                         @if(auth()->check() && auth()->user()->gameview == "1" && $subcat['id'] == App\Models\Category::PC_GAMES)
-                                            <a href="{{ url('/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @else
-                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @endif
                                     @endforeach
                                 </div>
@@ -160,17 +160,17 @@
                                 $desktopIcon = $desktopIconMap[$parentcat['id']] ?? 'fa-folder';
                             @endphp
                             <div class="relative dropdown-container shrink-0">
-                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition text-sm whitespace-nowrap">
+                                <button class="dropdown-toggle flex items-center px-3 py-2 text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-white/5 rounded-lg transition text-sm whitespace-nowrap">
                                     <i class="fa {{ $desktopIcon }} mr-1.5"></i>
                                     <span>{{ $parentcat['title'] }}</span>
                                     <i class="fas fa-chevron-down ml-1 text-xs"></i>
                                 </button>
                                 <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50">
-                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
+                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $parentcat['title'] }}</a>
                                     @if(isset($parentcat['categories']) && count($parentcat['categories']) > 0)
-                                        <div class="border-t border-gray-700 dark:border-gray-600"></div>
+                                        <div class="border-t border-white/10 dark:border-white/5"></div>
                                         @foreach($parentcat['categories'] as $subcat)
-                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white dark:hover:text-white">{{ $subcat['title'] }}</a>
                                         @endforeach
                                     @endif
                                 </div>
@@ -220,7 +220,7 @@
                 <!-- User Menu -->
                 @auth
                     <div class="relative dropdown-container">
-                        <button class="dropdown-toggle flex items-center space-x-2 text-gray-300 hover:text-white px-2 lg:px-3 py-2 rounded-lg hover:bg-gray-700 transition">
+                        <button class="dropdown-toggle flex items-center space-x-2 text-gray-300 hover:text-white px-2 lg:px-3 py-2 rounded-lg hover:bg-white/10 transition">
                             <span class="w-8 h-8 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center text-white font-bold text-sm">
                                 {{ strtoupper(substr(auth()->user()->username, 0, 1)) }}
                             </span>
@@ -228,47 +228,47 @@
                             <i class="fas fa-chevron-down text-xs hidden lg:inline"></i>
                         </button>
                         <div class="dropdown-menu absolute right-0 top-full w-56 bg-gray-900 rounded-xl shadow-lg z-50">
-                            <a href="{{ url('/cart/index') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                            <a href="{{ url('/cart/index') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                 <i class="fa fa-shopping-basket fa-fw mr-2"></i>My Download Basket
                             </a>
-                            <a href="{{ route('mymovies') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                            <a href="{{ route('mymovies') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                 <i class="fa fa-film fa-fw mr-2"></i>My Movies
                             </a>
-                            <a href="{{ route('myshows') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                            <a href="{{ route('myshows') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                 <i class="fa fa-television fa-fw mr-2"></i>My Shows
                             </a>
-                            <a href="{{ route('invitations.index') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                            <a href="{{ route('invitations.index') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                 <i class="fa fa-envelope fa-fw mr-2"></i>My Invitations
                             </a>
-                            <div class="border-t border-gray-700"></div>
-                            <a href="{{ route('profileedit') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                            <div class="border-t border-white/10"></div>
+                            <a href="{{ route('profileedit') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                 <i class="fa fa-cog fa-fw mr-2"></i>Account Settings
                             </a>
                             @if(auth()->user()->hasRole('Admin'))
-                                <a href="{{ url('/admin/index') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                                <a href="{{ url('/admin/index') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                     <i class="fa fa-cogs fa-fw mr-2"></i>Admin
                                 </a>
                             @endif
-                            <div class="border-t border-gray-700"></div>
+                            <div class="border-t border-white/10"></div>
                             <!-- Theme Switcher -->
                             <div class="px-4 py-2">
                                 <span class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Theme</span>
                                 <div class="flex items-center gap-1" id="dropdown-theme-switcher">
                                     @php $currentTheme = auth()->user()->theme_preference ?? 'light'; @endphp
                                     <button type="button" data-theme="light"
-                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'light' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
+                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'light' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}"
                                         title="Light Mode">
                                         <i class="fas fa-sun"></i>
                                         <span>Light</span>
                                     </button>
                                     <button type="button" data-theme="dark"
-                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'dark' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
+                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'dark' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}"
                                         title="Dark Mode">
                                         <i class="fas fa-moon"></i>
                                         <span>Dark</span>
                                     </button>
                                     <button type="button" data-theme="system"
-                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'system' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}"
+                                        class="dropdown-theme-btn flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded-lg transition {{ $currentTheme === 'system' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}"
                                         title="System (Auto)">
                                         <i class="fas fa-desktop"></i>
                                         <span>Auto</span>
@@ -294,11 +294,11 @@
                                     </button>
                                 </div>
                             </div>
-                            <div class="border-t border-gray-700"></div>
-                            <a href="{{ route('profile') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                            <div class="border-t border-white/10"></div>
+                            <a href="{{ route('profile') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                 <i class="fa fa-user fa-fw mr-2"></i>Profile
                             </a>
-                            <a href="{{ route('logout') }}" data-logout class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
+                            <a href="{{ route('logout') }}" data-logout class="block px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white">
                                 <i class="fas fa-sign-out-alt fa-fw mr-2"></i>Sign Out
                             </a>
                             <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
@@ -309,7 +309,7 @@
                 @else
                     <!-- Guest Links -->
                     <div class="flex items-center space-x-2">
-                        <a href="{{ route('login') }}" class="px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg transition">
+                        <a href="{{ route('login') }}" class="px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                             <i class="fa fa-sign-in mr-1"></i><span class="hidden sm:inline">Login</span>
                         </a>
                         <a href="{{ route('register') }}" class="px-3 py-2 text-sm bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800 text-white rounded-lg transition">
@@ -322,7 +322,7 @@
     </div>
 
     <!-- Mobile Search Form (slides down below header, visible below lg) -->
-    <div id="mobile-search-form" class="lg:hidden hidden bg-gray-800 dark:bg-gray-950 border-t border-gray-700 dark:border-gray-600 shadow-lg z-50">
+    <div id="mobile-search-form" class="lg:hidden hidden bg-gray-800 dark:bg-gray-950 border-t border-white/10 dark:border-white/5 shadow-lg z-50">
         <div class="container mx-auto px-4 py-3">
             <form method="GET" action="{{ route('search') }}" class="space-y-3" id="mobile-search-form-el">
                 <select name="t" class="w-full bg-gray-700 text-white text-sm rounded-lg px-3 py-3 focus:outline-none focus:ring-2 focus:ring-primary-500 touch-target">
@@ -356,7 +356,7 @@
     </div>
 
     <!-- Mobile Navigation Panel (slides down below header, visible below lg) -->
-    <div id="mobile-nav-panel" class="lg:hidden hidden bg-gray-800 dark:bg-gray-950 border-t border-gray-700 dark:border-gray-600 shadow-lg z-50 max-h-[70vh] overflow-y-auto overscroll-contain">
+    <div id="mobile-nav-panel" class="lg:hidden hidden bg-gray-800 dark:bg-gray-950 border-t border-white/10 dark:border-white/5 shadow-lg z-50 max-h-[70vh] overflow-y-auto overscroll-contain">
         <div class="container mx-auto px-4 py-3">
             @if(isset($parentcatlist))
                 <div class="space-y-1">
@@ -374,7 +374,7 @@
                                 ];
                                 $catIcon = $iconMap[$parentcat['id']] ?? 'fa-folder';
                             @endphp
-                            <button type="button" class="mobile-nav-toggle w-full flex items-center justify-between px-4 py-3 text-gray-200 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition touch-target">
+                            <button type="button" class="mobile-nav-toggle w-full flex items-center justify-between px-4 py-3 text-gray-200 hover:bg-white/10 dark:hover:bg-white/5 rounded-lg transition touch-target">
                                 <div class="flex items-center">
                                     <i class="fa {{ $catIcon }} fa-fw mr-3 text-gray-400"></i>
                                     <span class="font-medium">{{ $parentcat['title'] }}</span>
@@ -383,47 +383,47 @@
                             </button>
                             <div class="mobile-nav-submenu hidden ml-4 mt-1 space-y-0.5 pb-1">
                                 @if($parentcat['id'] == App\Models\Category::TV_ROOT)
-                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">All TV</a>
-                                    <a href="{{ route('series') }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">TV Series</a>
+                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">All TV</a>
+                                    <a href="{{ route('series') }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">TV Series</a>
                                 @elseif($parentcat['id'] == App\Models\Category::MOVIE_ROOT)
                                     @if(auth()->check() && auth()->user()->movieview == "1")
-                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
                                     @else
-                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
                                     @endif
-                                    <a href="{{ route('mymovies') }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">My Movies</a>
+                                    <a href="{{ route('mymovies') }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">My Movies</a>
                                 @elseif($parentcat['id'] == App\Models\Category::GAME_ROOT)
                                     @if(auth()->check() && auth()->user()->consoleview == "1")
-                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
                                     @else
-                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
+                                        <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
                                     @endif
                                 @elseif($parentcat['id'] == App\Models\Category::PC_ROOT)
-                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
+                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $parentcat['title'] }}</a>
                                 @else
-                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">All {{ $parentcat['title'] }}</a>
+                                    <a href="{{ url('/browse/' . $parentcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">All {{ $parentcat['title'] }}</a>
                                 @endif
 
                                 @if(isset($parentcat['categories']))
                                     @foreach($parentcat['categories'] as $subcat)
                                         @if($parentcat['id'] == App\Models\Category::TV_ROOT)
-                                            <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
                                         @elseif($parentcat['id'] == App\Models\Category::MOVIE_ROOT)
                                             @if(auth()->check() && auth()->user()->movieview == "1")
-                                                <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
+                                                <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
                                             @else
-                                                <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
+                                                <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
                                             @endif
                                         @elseif($parentcat['id'] == App\Models\Category::GAME_ROOT)
                                             @if(auth()->check() && auth()->user()->consoleview == "1")
-                                                <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
+                                                <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
                                             @else
-                                                <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
+                                                <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
                                             @endif
                                         @elseif($parentcat['id'] == App\Models\Category::PC_ROOT && auth()->check() && auth()->user()->gameview == "1" && $subcat['id'] == App\Models\Category::PC_GAMES)
-                                            <a href="{{ url('/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
                                         @else
-                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
+                                            <a href="{{ url('/browse/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2.5 text-sm text-gray-400 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">{{ $subcat['title'] }}</a>
                                         @endif
                                     @endforeach
                                 @endif
@@ -435,15 +435,15 @@
 
             <!-- Mobile User Quick Links -->
             @auth
-                <div class="border-t border-gray-700 dark:border-gray-600 mt-3 pt-3 space-y-0.5">
-                    <a href="{{ url('/cart/index') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">
+                <div class="border-t border-white/10 dark:border-white/5 mt-3 pt-3 space-y-0.5">
+                    <a href="{{ url('/cart/index') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">
                         <i class="fa fa-shopping-basket fa-fw mr-3 text-gray-400"></i>My Download Basket
                     </a>
-                    <a href="{{ route('profileedit') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">
+                    <a href="{{ route('profileedit') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">
                         <i class="fa fa-cog fa-fw mr-3 text-gray-400"></i>Account Settings
                     </a>
                     @if(auth()->user()->hasRole('Admin'))
-                        <a href="{{ url('/admin/index') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-800 hover:text-white rounded-lg transition touch-target">
+                        <a href="{{ url('/admin/index') }}" class="flex items-center px-4 py-2.5 text-sm text-gray-300 hover:bg-white/10 dark:hover:bg-white/5 hover:text-white rounded-lg transition touch-target">
                             <i class="fa fa-cogs fa-fw mr-3 text-gray-400"></i>Admin
                         </a>
                     @endif
@@ -453,19 +453,19 @@
                         <div class="flex items-center gap-1.5" id="mobile-theme-switcher">
                             @php $mobileTheme = auth()->user()->theme_preference ?? 'light'; @endphp
                             <button type="button" data-theme="light"
-                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'light' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
+                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'light' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}"
                                 title="Light Mode">
                                 <i class="fas fa-sun"></i>
                                 <span>Light</span>
                             </button>
                             <button type="button" data-theme="dark"
-                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'dark' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
+                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'dark' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}"
                                 title="Dark Mode">
                                 <i class="fas fa-moon"></i>
                                 <span>Dark</span>
                             </button>
                             <button type="button" data-theme="system"
-                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'system' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}"
+                                class="mobile-theme-btn flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs rounded-lg transition touch-target {{ $mobileTheme === 'system' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}"
                                 title="System (Auto)">
                                 <i class="fas fa-desktop"></i>
                                 <span>Auto</span>
diff --git a/resources/views/partials/sidebar.blade.php b/resources/views/partials/sidebar.blade.php
index c0b39c402..018fec3f6 100644
--- a/resources/views/partials/sidebar.blade.php
+++ b/resources/views/partials/sidebar.blade.php
@@ -1,7 +1,7 @@
 <nav class="flex flex-col space-y-1 p-4">
     <!-- Browse Menu -->
     <div class="sidebar-section">
-        <button class="sidebar-toggle w-full flex items-center justify-between px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition" data-target="submenu1">
+        <button class="sidebar-toggle w-full flex items-center justify-between px-4 py-3 text-white hover:bg-white/10 rounded-lg transition" data-target="submenu1">
             <div class="flex items-center">
                 <i class="fas fa-tachometer-alt fa-fw mr-3"></i>
                 <span>Browse</span>
@@ -10,60 +10,60 @@
         </button>
         <div id="submenu1" class="sidebar-submenu ml-4 mt-1 space-y-1 hidden">
             @if(auth()->check() && auth()->user()->consoleview && auth()->user()->can('view console'))
-                <a href="{{ route('Console') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('Console') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-gamepad fa-fw mr-2"></i>
                     <span>Console</span>
                 </a>
             @endif
             @if(auth()->check() && auth()->user()->movieview && auth()->user()->can('view movies'))
-                <a href="{{ route('Movies') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('Movies') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-film fa-fw mr-2"></i>
                     <span>Movies</span>
                 </a>
-                <a href="{{ route('trending-movies') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('trending-movies') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-fire fa-fw mr-2"></i>
                     <span>Trending Movies</span>
                 </a>
             @endif
             @if(auth()->check() && auth()->user()->musicview && auth()->user()->can('view audio'))
-                <a href="{{ route('Audio') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('Audio') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-music fa-fw mr-2"></i>
                     <span>Audio</span>
                 </a>
             @endif
             @if(auth()->check() && auth()->user()->gameview && auth()->user()->can('view pc'))
-                <a href="{{ route('Games') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('Games') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-gamepad fa-fw mr-2"></i>
                     <span>Games</span>
                 </a>
             @endif
             @if(auth()->check() && auth()->user()->can('view tv'))
-                <a href="{{ route('series') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('series') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-television fa-fw mr-2"></i>
                     <span>TV</span>
                 </a>
-                <a href="{{ route('trending-tv') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('trending-tv') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-fire fa-fw mr-2"></i>
                     <span>Trending TV</span>
                 </a>
             @endif
             @if(auth()->check() && auth()->user()->xxxview && auth()->user()->can('view adult'))
-                <a href="{{ route('XXX') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('XXX') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-venus-mars fa-fw mr-2"></i>
                     <span>Adult</span>
                 </a>
             @endif
             @if(auth()->check() && auth()->user()->bookview && auth()->user()->can('view books'))
-                <a href="{{ route('Books') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+                <a href="{{ route('Books') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                     <i class="fa fa-book-open fa-fw mr-2"></i>
                     <span>Books</span>
                 </a>
             @endif
-            <a href="{{ url('browse/All') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ url('browse/All') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fa fa-list-ul fa-fw mr-2"></i>
                 <span>Browse All Releases</span>
             </a>
-            <a href="{{ route('browsegroup') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ route('browsegroup') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fa fa-layer-group fa-fw mr-2"></i>
                 <span>Browse Groups</span>
             </a>
@@ -72,7 +72,7 @@
 
     <!-- Articles & Links Menu -->
     <div class="sidebar-section">
-        <button class="sidebar-toggle w-full flex items-center justify-between px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition" data-target="submenu2">
+        <button class="sidebar-toggle w-full flex items-center justify-between px-4 py-3 text-white hover:bg-white/10 rounded-lg transition" data-target="submenu2">
             <div class="flex items-center">
                 <i class="fa fa-edit fa-fw mr-3"></i>
                 <span>Articles & Links</span>
@@ -80,31 +80,31 @@
             <i class="fas fa-chevron-down text-xs transition-transform"></i>
         </button>
         <div id="submenu2" class="sidebar-submenu ml-4 mt-1 space-y-1 hidden">
-            <a href="{{ url('forum') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ url('forum') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fab fa-forumbee fa-fw mr-2"></i>
                 <span>Forum</span>
             </a>
-            <a href="{{ route('search') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ route('search') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fab fa-searchengin fa-fw mr-2"></i>
                 <span>Search</span>
             </a>
-            <a href="{{ url('search?search_type=adv') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ url('search?search_type=adv') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fab fa-searchengin fa-fw mr-2"></i>
                 <span>Advanced Search</span>
             </a>
-            <a href="{{ route('rsshelp') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ route('rsshelp') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fa fa-rss-square fa-fw mr-2"></i>
                 <span>RSS Feeds</span>
             </a>
-            <a href="{{ route('apihelp') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ route('apihelp') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fa fa-hands-helping fa-fw mr-2"></i>
                 <span>API</span>
             </a>
-            <a href="{{ route('apiv2help') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ route('apiv2help') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fa fa-hands-helping fa-fw mr-2"></i>
                 <span>API V2</span>
             </a>
-            <a href="{{ route('contact-us') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition">
+            <a href="{{ route('contact-us') }}" class="flex items-center px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition">
                 <i class="fa fa-envelope fa-fw mr-2"></i>
                 <span>Contact Us</span>
             </a>
@@ -114,7 +114,7 @@
     <!-- Useful Links Menu -->
     @if(isset($usefulLinks) && $usefulLinks->isNotEmpty())
     <div class="sidebar-section">
-        <button class="sidebar-toggle w-full flex items-center justify-between px-4 py-3 text-white hover:bg-gray-800 rounded-lg transition" data-target="submenu-useful-links">
+        <button class="sidebar-toggle w-full flex items-center justify-between px-4 py-3 text-white hover:bg-white/10 rounded-lg transition" data-target="submenu-useful-links">
             <div class="flex items-center">
                 <i class="fa fa-link fa-fw mr-3"></i>
                 <span>Useful Links</span>
@@ -179,12 +179,12 @@
         @endphp
         @if($userRole !== 'Admin')
             @if($userRole === 'User')
-                <a href="https://simplegate.space/apps/3MjgKvosMZtc2sSxiRBwadDCn1zA/pos" target="_blank" class="flex items-center px-4 py-3 text-white hover:bg-gray-800 rounded transition mt-4">
+                <a href="https://simplegate.space/apps/3MjgKvosMZtc2sSxiRBwadDCn1zA/pos" target="_blank" class="flex items-center px-4 py-3 text-white hover:bg-white/10 rounded transition mt-4">
                     <i class="fa fa-arrow-up fa-fw mr-3"></i>
                     <span>Upgrade Your Account</span>
                 </a>
             @else
-                <a href="https://simplegate.space/apps/3MjgKvosMZtc2sSxiRBwadDCn1zA/pos" target="_blank" class="flex items-center px-4 py-3 text-white hover:bg-gray-800 rounded transition mt-4">
+                <a href="https://simplegate.space/apps/3MjgKvosMZtc2sSxiRBwadDCn1zA/pos" target="_blank" class="flex items-center px-4 py-3 text-white hover:bg-white/10 rounded transition mt-4">
                     <i class="fa fa-clock fa-fw mr-3"></i>
                     <span>Extend Your Account</span>
                 </a>
@@ -194,7 +194,7 @@
 
     <!-- Sign Out -->
     @auth
-        <a href="{{ route('logout') }}" data-logout class="flex items-center px-4 py-3 text-white hover:bg-gray-800 rounded transition mt-4">
+        <a href="{{ route('logout') }}" data-logout class="flex items-center px-4 py-3 text-white hover:bg-white/10 rounded transition mt-4">
             <i class="fa fa-sign-out-alt fa-fw mr-3"></i>
             <span>Sign Out</span>
         </a>