diff --git a/.env.example b/.env.example
index 536d5299e..6dc6e770b 100644
--- a/.env.example
+++ b/.env.example
@@ -103,10 +103,15 @@ PUSHER_APP_CLUSTER=mt1
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 
-NOCAPTCHA_ENABLED=
+CAPTCHA_PROVIDER=recaptcha
+NOCAPTCHA_ENABLED=false
 NOCAPTCHA_SITEKEY=
 NOCAPTCHA_SECRET=
 
+TURNSTILE_SECRET=
+TURNSTILE_SITEKEY=
+TURNSTILE_ENABLED=false
+
 SCOUT_DRIVER=database
 SCOUT_QUEUE=true
 
diff --git a/CAPTCHA_CONFIGURATION.md b/CAPTCHA_CONFIGURATION.md
new file mode 100644
index 000000000..dd247bd4a
--- /dev/null
+++ b/CAPTCHA_CONFIGURATION.md
@@ -0,0 +1,157 @@
+# CAPTCHA Configuration Guide
+
+This application supports two CAPTCHA providers:
+- **Google reCAPTCHA v2**
+- **Cloudflare Turnstile**
+
+## Important: Only One Provider at a Time
+
+**You can only enable ONE captcha provider at a time.** The system will use the provider specified in `CAPTCHA_PROVIDER` environment variable.
+
+## Configuration
+
+### 1. Choose Your Provider
+
+In your `.env` file, set the provider:
+
+```env
+CAPTCHA_PROVIDER=recaptcha  # or 'turnstile'
+```
+
+### 2. Google reCAPTCHA Configuration
+
+To use Google reCAPTCHA:
+
+```env
+CAPTCHA_PROVIDER=recaptcha
+NOCAPTCHA_ENABLED=true
+NOCAPTCHA_SITEKEY=your_recaptcha_sitekey
+NOCAPTCHA_SECRET=your_recaptcha_secret
+
+# Disable Turnstile
+TURNSTILE_ENABLED=false
+```
+
+**How to get reCAPTCHA keys:**
+1. Visit [Google reCAPTCHA Admin](https://www.google.com/recaptcha/admin)
+2. Register a new site with reCAPTCHA v2 (Checkbox)
+3. Copy the Site Key and Secret Key
+
+### 3. Cloudflare Turnstile Configuration
+
+To use Cloudflare Turnstile:
+
+```env
+CAPTCHA_PROVIDER=turnstile
+TURNSTILE_ENABLED=true
+TURNSTILE_SITEKEY=your_turnstile_sitekey
+TURNSTILE_SECRET=your_turnstile_secret
+
+# Disable reCAPTCHA
+NOCAPTCHA_ENABLED=false
+```
+
+**How to get Turnstile keys:**
+1. Visit [Cloudflare Dashboard](https://dash.cloudflare.com/)
+2. Go to Turnstile section
+3. Create a new site
+4. Copy the Site Key and Secret Key
+
+## Features
+
+### Where CAPTCHA is Used
+
+CAPTCHA verification is applied to:
+- **User Registration** (`/register`)
+- **User Login** (`/login`)
+- **Password Reset** (`/password/reset`)
+- **Contact Form** (`/contact`)
+
+### Switching Between Providers
+
+To switch from one provider to another:
+
+1. Update `CAPTCHA_PROVIDER` in `.env`
+2. Enable the new provider and disable the old one
+3. Clear config cache: `php artisan config:clear`
+
+Example - Switching from reCAPTCHA to Turnstile:
+
+```env
+# Change this
+CAPTCHA_PROVIDER=turnstile
+
+# Enable Turnstile
+TURNSTILE_ENABLED=true
+TURNSTILE_SITEKEY=your_turnstile_sitekey
+TURNSTILE_SECRET=your_turnstile_secret
+
+# Disable reCAPTCHA
+NOCAPTCHA_ENABLED=false
+```
+
+## Disabling CAPTCHA
+
+To completely disable CAPTCHA protection:
+
+```env
+NOCAPTCHA_ENABLED=false
+TURNSTILE_ENABLED=false
+```
+
+## Testing
+
+### Test Keys
+
+**Google reCAPTCHA Test Keys:**
+- Site Key: `6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI`
+- Secret Key: `6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe`
+
+**Cloudflare Turnstile Test Keys:**
+- Site Key: `1x00000000000000000000AA` (Always passes)
+- Secret Key: `1x0000000000000000000000000000000AA`
+
+## Troubleshooting
+
+### CAPTCHA Not Showing
+
+1. Check if CAPTCHA is enabled in `.env`
+2. Verify you have both sitekey and secret configured
+3. Clear config cache: `php artisan config:clear`
+4. Check browser console for JavaScript errors
+
+### Validation Failing
+
+1. Verify the secret key is correct
+2. Check if the domain is allowed in your CAPTCHA provider settings
+3. Check application logs for detailed error messages
+
+### Both Providers Enabled Warning
+
+If you see a warning in logs about both providers being enabled, ensure you have:
+- Set `CAPTCHA_PROVIDER` to either `recaptcha` or `turnstile`
+- Disabled the provider you're not using by setting its `ENABLED` flag to `false`
+
+## Technical Details
+
+### Files Modified
+
+- **Config:** `config/captcha.php` - Main configuration
+- **Service:** `app/Services/TurnstileService.php` - Turnstile API integration
+- **Helper:** `app/Support/CaptchaHelper.php` - Unified captcha interface
+- **Rule:** `app/Rules/TurnstileRule.php` - Turnstile validation rule
+- **Views:** Updated to use dynamic captcha provider
+- **Requests:** Updated validation to support both providers
+
+### API Endpoints
+
+- **reCAPTCHA:** `https://www.google.com/recaptcha/api/siteverify`
+- **Turnstile:** `https://challenges.cloudflare.com/turnstile/v0/siteverify`
+
+## Security Notes
+
+- Never commit your production keys to version control
+- Use environment-specific `.env` files
+- Regularly rotate your secret keys
+- Monitor failed CAPTCHA attempts in logs
+
diff --git a/app/Extensions/helper/helpers.php b/app/Extensions/helper/helpers.php
index aa2982cd6..d36185e78 100644
--- a/app/Extensions/helper/helpers.php
+++ b/app/Extensions/helper/helpers.php
@@ -530,3 +530,20 @@ if (! function_exists('formatBytes')) {
         return round($bytes, 2).' '.$units[$pow];
     }
 }
+
+if (! function_exists('csp_nonce')) {
+    /**
+     * Generate a CSP nonce for inline scripts
+     * This should be stored in the request and reused across the request lifecycle
+     */
+    function csp_nonce(): string
+    {
+        static $nonce = null;
+
+        if ($nonce === null) {
+            $nonce = base64_encode(random_bytes(16));
+        }
+
+        return $nonce;
+    }
+}
diff --git a/app/Http/Controllers/Auth/ForgotPasswordController.php b/app/Http/Controllers/Auth/ForgotPasswordController.php
index 6bd422acb..15fba19aa 100644
--- a/app/Http/Controllers/Auth/ForgotPasswordController.php
+++ b/app/Http/Controllers/Auth/ForgotPasswordController.php
@@ -37,6 +37,12 @@ class ForgotPasswordController extends Controller
      */
     public function showLinkRequestForm(Request $request)
     {
+        // If it's a GET request, just show the form
+        if ($request->isMethod('get')) {
+            return view('auth.passwords.email');
+        }
+
+        // Handle POST request
         $sent = '';
         $email = $request->input('email') ?? '';
         $rssToken = $request->input('apikey') ?? '';
@@ -45,10 +51,8 @@ class ForgotPasswordController extends Controller
             return view('auth.passwords.email')->withErrors(['error' => 'Missing parameter (email and/or apikey) to send password reset']);
         }
 
-        if (config('captcha.enabled') === true && (! empty(config('captcha.secret')) && ! empty(config('captcha.sitekey')))) {
-            $validate = Validator::make($request->all(), [
-                'g-recaptcha-response' => 'required|captcha',
-            ]);
+        if (\App\Support\CaptchaHelper::isEnabled()) {
+            $validate = Validator::make($request->all(), \App\Support\CaptchaHelper::getValidationRules());
             if ($validate->fails()) {
                 return view('auth.passwords.email')->withErrors(['error' => 'Captcha validation failed.']);
             }
diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index dab2b8790..4ec6c7e92 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -13,6 +13,7 @@ use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Validator;
 
 class LoginController extends Controller
@@ -73,7 +74,13 @@ class LoginController extends Controller
         }
 
         if ($validator->passes()) {
-            $user = User::query()->orWhere(['username' => $request->input('username'), 'email' => $request->input('username')])->withTrashed()->first();
+            $user = User::query()
+                ->where(function ($query) use ($request) {
+                    $query->where('username', $request->input('username'))
+                        ->orWhere('email', $request->input('username'));
+                })
+                ->withTrashed()
+                ->first();
             if ($user !== null) {
                 // Check if user is soft deleted
                 if ($user->trashed()) {
@@ -147,9 +154,11 @@ class LoginController extends Controller
                 }
 
                 $this->incrementLoginAttempts($request);
+                Log::channel('failed_login')->error('Failed login attempt by user: '.$request->input('username').' from IP address: '.$request->ip());
                 $request->session()->flash('message', 'Username or email and password combination used does not match our records!');
             } else {
                 $this->incrementLoginAttempts($request);
+                Log::channel('failed_login')->error('Failed login attempt by user: '.$request->input('username').' from IP address: '.$request->ip());
                 $request->session()->flash('message', 'Username or email used do not match our records!');
             }
 
@@ -158,6 +167,7 @@ class LoginController extends Controller
 
         $this->incrementLoginAttempts($request);
         $request->session()->flash('message', implode('', Arr::collapse($validator->errors()->toArray())));
+        Log::channel('failed_login')->error('Failed login attempt by user: '.$request->input('username').' from IP address: '.$request->ip());
 
         return redirect()->to('login');
     }
diff --git a/app/Http/Controllers/Auth/RegisterController.php b/app/Http/Controllers/Auth/RegisterController.php
index e03c7fe8c..b0e805cb7 100644
--- a/app/Http/Controllers/Auth/RegisterController.php
+++ b/app/Http/Controllers/Auth/RegisterController.php
@@ -11,7 +11,6 @@ use Illuminate\Foundation\Auth\RegistersUsers;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Redirector;
-use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Password as PasswordFacade;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rules\Password;
@@ -130,12 +129,19 @@ class RegisterController extends Controller
             'username' => ['required', 'string', 'min:5', 'max:255', 'unique:users'],
             'email' => ['required', 'string', 'email', 'max:255', 'unique:users', 'indisposable'],
             'password' => ['required', 'confirmed', Password::min(8)->letters()->mixedCase()->numbers()->symbols()->uncompromised()],
+        ], [
+            'password.min' => 'The password must be at least 8 characters.',
+            'password.letters' => 'The password must contain letters.',
+            'password.mixed_case' => 'The password must contain both uppercase and lowercase letters.',
+            'password.numbers' => 'The password must contain at least one number.',
+            'password.symbols' => 'The password must contain at least one symbol.',
+            'password.uncompromised' => 'The password appears in a data breach and should not be used.',
         ]);
 
         if ($validator->fails()) {
-            $error = implode('', Arr::collapse($validator->errors()->toArray()));
-
-            return $this->showRegistrationForm($request, $error);
+            return redirect()->back()
+                ->withErrors($validator)
+                ->withInput($request->except('password', 'password_confirmation'));
         }
 
         $action = $request->input('action') ?? 'view';
@@ -164,7 +170,7 @@ class RegisterController extends Controller
 
                 // Check invitation validity using custom system
                 $invitationValid = $this->isInvitationValid($inviteCode, $email);
-                $registrationOpen = Settings::settingValue('registerstatus') !== Settings::REGISTER_STATUS_INVITE;
+                $registrationOpen = Settings::settingValue('registerstatus') === Settings::REGISTER_STATUS_OPEN;
 
                 if ($invitationValid || $registrationOpen) {
                     // Get invited_by from invitation if available
@@ -229,12 +235,10 @@ class RegisterController extends Controller
                 break;
 
             case 'view':
-                // See if it is a valid invite.
+                // Don't set showRegister here - let showRegistrationForm handle it
+                // Only validate invite code if present
                 if (($inviteCode !== null) && ! $this->isInvitationTokenValid($inviteCode)) {
                     $error = 'Invalid invitation token!';
-                    $showRegister = 0;
-                } else {
-                    $showRegister = 1;
                 }
                 break;
         }
diff --git a/app/Http/Middleware/ContentSecurityPolicy.php b/app/Http/Middleware/ContentSecurityPolicy.php
new file mode 100644
index 000000000..2f89a9e2c
--- /dev/null
+++ b/app/Http/Middleware/ContentSecurityPolicy.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class ContentSecurityPolicy
+{
+    /**
+     * Handle an incoming request.
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $response = $next($request);
+
+        // Check if Turnstile is enabled
+        $turnstileEnabled = config('captcha.provider') === 'turnstile'
+            && config('captcha.turnstile.enabled') === true;
+
+        // If Turnstile is enabled, skip CSP to avoid sandbox iframe issues
+        // Turnstile creates sandboxed iframes that conflict with strict CSP
+        if ($turnstileEnabled) {
+            // Set minimal security headers only
+            $response->headers->set('X-Frame-Options', 'SAMEORIGIN');
+            $response->headers->set('X-Content-Type-Options', 'nosniff');
+            $response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');
+
+            return $response;
+        }
+
+        // Generate nonce for inline scripts
+        $nonce = function_exists('csp_nonce') ? csp_nonce() : base64_encode(random_bytes(16));
+
+        // Build CSP directives for non-Turnstile pages
+        $directives = [
+            "default-src 'self'",
+            "script-src 'self' 'nonce-{$nonce}' 'unsafe-inline' 'unsafe-eval' https://www.google.com https://www.gstatic.com https://cdn.jsdelivr.net https://unpkg.com blob:",
+            "script-src-elem 'self' 'nonce-{$nonce}' 'unsafe-inline' https://www.google.com https://www.gstatic.com https://cdn.jsdelivr.net https://unpkg.com",
+            "script-src-attr 'unsafe-inline'",
+            "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+            "font-src 'self' https://fonts.gstatic.com data:",
+            "img-src 'self' data: https: blob:",
+            "connect-src 'self' https://www.google.com",
+            "frame-src 'self' https://www.google.com https://www.gstatic.com data: blob:",
+            "child-src 'self' https://www.google.com blob:",
+            "worker-src 'self' blob:",
+            "object-src 'none'",
+            "base-uri 'self'",
+            "form-action 'self'",
+            "frame-ancestors 'self'",
+        ];
+
+        $csp = implode('; ', $directives);
+
+        $response->headers->set('Content-Security-Policy', $csp);
+
+        // Also set X-Frame-Options for older browsers
+        $response->headers->set('X-Frame-Options', 'SAMEORIGIN');
+
+        // Set X-Content-Type-Options
+        $response->headers->set('X-Content-Type-Options', 'nosniff');
+
+        // Set Referrer-Policy
+        $response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');
+
+        return $response;
+    }
+}
diff --git a/app/Models/Settings.php b/app/Models/Settings.php
index 31411e0c9..4df00ebe4 100644
--- a/app/Models/Settings.php
+++ b/app/Models/Settings.php
@@ -27,18 +27,10 @@ use Illuminate\Database\Eloquent\Model;
 /**
  * Settings - model for settings table.
  *
- * @property string $section
- * @property string $subsection
  * @property string $name
  * @property string $value
- * @property string $hint
- * @property string $setting
  *
- * @method static \Illuminate\Database\Eloquent\Builder|\App\Models\Settings whereHint($value)
  * @method static \Illuminate\Database\Eloquent\Builder|\App\Models\Settings whereName($value)
- * @method static \Illuminate\Database\Eloquent\Builder|\App\Models\Settings whereSection($value)
- * @method static \Illuminate\Database\Eloquent\Builder|\App\Models\Settings whereSetting($value)
- * @method static \Illuminate\Database\Eloquent\Builder|\App\Models\Settings whereSubsection($value)
  * @method static \Illuminate\Database\Eloquent\Builder|\App\Models\Settings whereValue($value)
  *
  * @mixin \Eloquent
@@ -67,26 +59,19 @@ class Settings extends Model
 
     public const ERR_BADTMPUNRARPATH = -6;
 
-    public const ERR_BADNZBPATH_UNREADABLE = -7;
-
-    public const ERR_BADNZBPATH_UNSET = -8;
-
-    public const ERR_BAD_COVERS_PATH = -9;
-
-    public const ERR_BAD_YYDECODER_PATH = -10;
-
     public const ERR_BADLAMEPATH = -11;
 
     public const ERR_SABCOMPLETEPATH = -12;
 
     /**
-     * @var array
+     * @var string
      */
-    protected $primaryKey = ['section', 'subsection', 'name'];
+    protected $primaryKey = 'name';
 
     /**
      * @var string
      */
+    protected $keyType = 'string';
 
     /**
      * @var bool
@@ -110,6 +95,16 @@ class Settings extends Model
 
     protected static $settingsCollection;
 
+    /**
+     * Get the value attribute and convert empty strings to null and numeric strings to numbers.
+     *
+     * @param  string  $value
+     */
+    public function getValueAttribute($value): mixed
+    {
+        return self::convertValue($value);
+    }
+
     /**
      * Adapted from https://laravel.io/forum/01-15-2016-overriding-eloquent-attributes.
      *
@@ -130,41 +125,60 @@ class Settings extends Model
     }
 
     /**
-     * Return a tree-like array of all or selected settings.
-     *
-     * @param  bool  $excludeUnsectioned  If rows with empty 'section' field should be excluded.
-     *                                    Note this doesn't prevent empty 'subsection' fields.
+     * Return a simple key-value array of all settings.
      *
      * @throws \RuntimeException
      */
     public static function toTree(bool $excludeUnsectioned = true): array
     {
-        $results = self::cursor()->remember();
+        $results = self::query()->pluck('value', 'name')->toArray();
 
-        $tree = [];
-        if (! empty($results)) {
-            foreach ($results as $result) {
-                if (! $excludeUnsectioned || ! empty($result->section)) {
-                    $tree[$result->section][$result->subsection][$result->name] =
-                        ['value' => $result->value, 'hint' => $result->hint];
-                }
-            }
-        } else {
+        if (empty($results)) {
             throw new \RuntimeException(
                 'No results from Settings table! Check your table has been created and populated.'
             );
         }
 
-        return $tree;
+        return $results;
     }
 
     public static function settingValue($setting): mixed
     {
-        return self::query()->where(
-            [
-                'name' => $setting,
-            ]
-        )->value('value');
+        $value = self::query()->where('name', $setting)->value('value');
+
+        // Apply the same conversion logic as the accessor
+        return self::convertValue($value);
+    }
+
+    /**
+     * Convert setting value: numeric strings to numbers, preserve empty strings.
+     *
+     * @param  string|null  $value
+     */
+    public static function convertValue($value): mixed
+    {
+        // Handle null
+        if ($value === null) {
+            return null;
+        }
+
+        // Keep empty strings as empty strings (don't convert to null)
+        // Many settings expect empty strings, not null
+        if ($value === '') {
+            return '';
+        }
+
+        // Convert numeric strings to actual numbers
+        if (is_numeric($value)) {
+            // Check if it's an integer or float
+            if (strpos($value, '.') !== false) {
+                return (float) $value;
+            }
+
+            return (int) $value;
+        }
+
+        return $value;
     }
 
     public static function settingsUpdate(array $data = []): void
diff --git a/app/Models/User.php b/app/Models/User.php
index 2d403c704..24f05953c 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -690,4 +690,10 @@ class User extends Authenticatable
     {
         return $this->hasOne(PasswordSecurity::class);
     }
+
+    public static function canPost($user_id): bool
+    {
+        // return true if can_post column is true and false if can_post column is false
+        return self::where('id', $user_id)->value('can_post');
+    }
 }
diff --git a/app/Services/TurnstileService.php b/app/Services/TurnstileService.php
new file mode 100644
index 000000000..0d28c8db9
--- /dev/null
+++ b/app/Services/TurnstileService.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Services;
+
+use Illuminate\Support\Facades\Http;
+
+class TurnstileService
+{
+    /**
+     * Verify Cloudflare Turnstile token
+     */
+    public static function verify(string $token, ?string $remoteIp = null): bool
+    {
+        $secret = config('captcha.turnstile.secret');
+
+        if (empty($secret)) {
+            return false;
+        }
+
+        try {
+            $response = Http::asForm()->post('https://challenges.cloudflare.com/turnstile/v0/siteverify', [
+                'secret' => $secret,
+                'response' => $token,
+                'remoteip' => $remoteIp ?? request()->ip(),
+            ]);
+
+            $result = $response->json();
+
+            return isset($result['success']) && $result['success'] === true;
+        } catch (\Exception $e) {
+            \Log::error('Turnstile verification failed: '.$e->getMessage());
+
+            return false;
+        }
+    }
+
+    /**
+     * Get the Turnstile HTML widget
+     */
+    public static function display(array $attributes = []): string
+    {
+        $sitekey = config('captcha.turnstile.sitekey');
+
+        if (empty($sitekey)) {
+            return '';
+        }
+
+        $defaultAttributes = [
+            'class' => 'cf-turnstile',
+            'data-sitekey' => $sitekey,
+            'data-theme' => 'auto',
+            'data-size' => 'normal',
+        ];
+
+        $attributes = array_merge($defaultAttributes, $attributes);
+
+        $attributesString = '';
+        foreach ($attributes as $key => $value) {
+            $attributesString .= sprintf('%s="%s" ', $key, htmlspecialchars($value));
+        }
+
+        return sprintf('<div %s></div>', trim($attributesString));
+    }
+
+    /**
+     * Get the Turnstile JavaScript
+     */
+    public static function renderJs(): string
+    {
+        return '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>';
+    }
+}
diff --git a/app/Support/CaptchaHelper.php b/app/Support/CaptchaHelper.php
new file mode 100644
index 000000000..97779d4c8
--- /dev/null
+++ b/app/Support/CaptchaHelper.php
@@ -0,0 +1,129 @@
+<?php
+
+namespace App\Support;
+
+use App\Services\TurnstileService;
+
+class CaptchaHelper
+{
+    /**
+     * Check if captcha is enabled
+     */
+    public static function isEnabled(): bool
+    {
+        $provider = config('captcha.provider', 'recaptcha');
+
+        // Enforce that both providers cannot be enabled at the same time
+        $recaptchaEnabled = config('captcha.recaptcha.enabled') === true
+            && ! empty(config('captcha.recaptcha.sitekey'))
+            && ! empty(config('captcha.recaptcha.secret'));
+
+        $turnstileEnabled = config('captcha.turnstile.enabled') === true
+            && ! empty(config('captcha.turnstile.sitekey'))
+            && ! empty(config('captcha.turnstile.secret'));
+
+        // If both are configured as enabled, log a warning and use the configured provider
+        if ($recaptchaEnabled && $turnstileEnabled) {
+            \Log::warning('Both reCAPTCHA and Turnstile are enabled. Only one can be active at a time. Using provider: '.$provider);
+        }
+
+        if ($provider === 'turnstile') {
+            return $turnstileEnabled;
+        }
+
+        // Default to reCAPTCHA
+        return $recaptchaEnabled || config('captcha.enabled') === true
+            && ! empty(config('captcha.sitekey'))
+            && ! empty(config('captcha.secret'));
+    }
+
+    /**
+     * Get the current captcha provider
+     */
+    public static function getProvider(): string
+    {
+        return config('captcha.provider', 'recaptcha');
+    }
+
+    /**
+     * Display the captcha widget
+     */
+    public static function display(array $attributes = []): string
+    {
+        if (! self::isEnabled()) {
+            return '';
+        }
+
+        $provider = self::getProvider();
+
+        if ($provider === 'turnstile') {
+            return TurnstileService::display($attributes);
+        }
+
+        // Default to reCAPTCHA
+        return app('captcha')->display($attributes);
+    }
+
+    /**
+     * Render the captcha JavaScript
+     */
+    public static function renderJs(): string
+    {
+        if (! self::isEnabled()) {
+            return '';
+        }
+
+        $provider = self::getProvider();
+
+        if ($provider === 'turnstile') {
+            return TurnstileService::renderJs();
+        }
+
+        // Default to reCAPTCHA
+        return app('captcha')->renderJs();
+    }
+
+    /**
+     * Get the captcha response field name
+     */
+    public static function getResponseFieldName(): string
+    {
+        $provider = self::getProvider();
+
+        if ($provider === 'turnstile') {
+            return 'cf-turnstile-response';
+        }
+
+        return 'g-recaptcha-response';
+    }
+
+    /**
+     * Get validation rules for captcha
+     */
+    public static function getValidationRules(): array
+    {
+        if (! self::isEnabled()) {
+            return [];
+        }
+
+        $provider = self::getProvider();
+        $fieldName = self::getResponseFieldName();
+
+        if ($provider === 'turnstile') {
+            return [
+                $fieldName => [
+                    'required',
+                    new \App\Rules\TurnstileRule,
+                ],
+            ];
+        }
+
+        // Default to reCAPTCHA
+        return [
+            $fieldName => [
+                'required',
+                'captcha',
+            ],
+        ];
+    }
+}
diff --git a/config/captcha.php b/config/captcha.php
index b8cdc943a..9da6e618e 100644
--- a/config/captcha.php
+++ b/config/captcha.php
@@ -1,6 +1,24 @@
 <?php
 
 return [
+    // Captcha provider: 'recaptcha' or 'turnstile'
+    'provider' => env('CAPTCHA_PROVIDER', 'recaptcha'),
+
+    // Google reCAPTCHA settings
+    'recaptcha' => [
+        'secret' => env('NOCAPTCHA_SECRET', ''),
+        'sitekey' => env('NOCAPTCHA_SITEKEY', ''),
+        'enabled' => env('NOCAPTCHA_ENABLED', false),
+    ],
+
+    // Cloudflare Turnstile settings
+    'turnstile' => [
+        'secret' => env('TURNSTILE_SECRET', ''),
+        'sitekey' => env('TURNSTILE_SITEKEY', ''),
+        'enabled' => env('TURNSTILE_ENABLED', false),
+    ],
+
+    // Legacy support - keep for backward compatibility
     'secret' => env('NOCAPTCHA_SECRET', ''),
     'sitekey' => env('NOCAPTCHA_SITEKEY', ''),
     'enabled' => env('NOCAPTCHA_ENABLED', false),
diff --git a/config/database.php b/config/database.php
index ffd63705b..a49542e2d 100644
--- a/config/database.php
+++ b/config/database.php
@@ -14,8 +14,8 @@ return [
             'username' => env('DB_USERNAME', 'nntmux'),
             'password' => env('DB_PASSWORD', ''),
             'unix_socket' => env('DB_SOCKET', ''),
-            'charset' => 'utf8',
-            'collation' => 'utf8_unicode_ci',
+            'charset' => 'utf8mb4',
+            'collation' => 'utf8mb4_unicode_ci',
             'strict' => false,
             'engine' => 'InnoDB ROW_FORMAT=DYNAMIC',
             'options' => extension_loaded('pdo_mysql') ? array_filter([
@@ -56,8 +56,8 @@ return [
             'username' => env('DB_USERNAME', 'nntmux'),
             'password' => env('DB_PASSWORD', ''),
             'unix_socket' => env('DB_SOCKET', ''),
-            'charset' => 'utf8',
-            'collation' => 'utf8_unicode_ci',
+            'charset' => 'utf8mb4',
+            'collation' => 'utf8mb4_unicode_ci',
             'strict' => false,
             'engine' => 'InnoDB ROW_FORMAT=DYNAMIC',
             'options' => extension_loaded('pdo_mysql') ? array_filter([
diff --git a/database/migrations/2025_10_20_132950_convert_content_table_to_utf8mb4.php b/database/migrations/2025_10_20_132950_convert_content_table_to_utf8mb4.php
new file mode 100644
index 000000000..497a89ec8
--- /dev/null
+++ b/database/migrations/2025_10_20_132950_convert_content_table_to_utf8mb4.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        // Convert the content table to utf8mb4 to support emojis
+        DB::statement('ALTER TABLE content CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci');
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        // Revert back to utf8
+        DB::statement('ALTER TABLE content CONVERT TO CHARACTER SET utf8 COLLATE utf8_unicode_ci');
+    }
+};
diff --git a/package.json b/package.json
index a93c7a5e0..565516673 100644
--- a/package.json
+++ b/package.json
@@ -2,67 +2,29 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production",
-        "format": "prettier --write 'resources/**/*.{css,js,vue}'",
-        "package-update": "ncu -u -x pnotify,tinymce",
+        "dev": "vite",
         "build": "vite build",
-        "vitedev": "vite"
+        "format": "prettier --write 'resources/**/*.{css,js,vue}'",
+        "package-update": "ncu -u -x pnotify,tinymce"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.8",
+        "@tailwindcss/vite": "^4.0.0",
         "autoprefixer": "^10.4.20",
         "axios": "^1.7.7",
-        "cross-env": "^7.0.3",
-        "flatpickr": "^4.6.13",
-        "jquery": "3.7.1",
-        "laravel-mix": "^6.0.49",
         "lodash": "^4.17.21",
-        "popper.js": "^1.16.1",
+        "npm-check-updates": "^17.1.1",
         "postcss": "^8.4.44",
         "prettier": "^3.3.3",
-        "resolve-url-loader": "^5.0.0",
         "tailwindcss": "^3.4.10",
-        "vue": "^3.4.38",
-        "webpack-cli": "^5.1.4"
+        "vite": "^7.0",
+        "vue": "^3.4.38"
     },
     "dependencies": {
-        "@fancyapps/fancybox": "^3.5.7",
         "@fortawesome/fontawesome-free": "^6.6.0",
         "@melloware/coloris": "^0.24.0",
-        "@popperjs/core": "^2.11.8",
-        "@simonwep/pickr": "^1.9.1",
-        "alpinejs": "^3.14.1",
-        "animate.css": "^4.1.1",
-        "autosize": "^6.0.1",
-        "bootstrap": "^5.3.3",
-        "bootstrap-datepicker": "^1.10.0",
-        "bootstrap-hover-dropdown": "^2.2.1",
-        "bootstrap-progressbar": "^0.9.0",
-        "datatables": "^1.10.18",
         "date-fns": "^3.6.0",
-        "feather-icons": "^4.29.2",
-        "flexboxgrid2": "^7.2.1",
-        "icheck": "^1.0.2",
-        "jquery-colorbox": "^1.6.4",
-        "jquery-migrate": "3.5.2",
-        "laravel-echo": "^1.16.1",
-        "laravel-vite-plugin": "^1.0",
-        "nested-sort": "^5.2.0",
-        "nonblockjs": "^1.0.8",
-        "normalize.css": "^8.0.1",
-        "npm": "^10.8.3",
-        "npm-check-updates": "^17.1.1",
-        "pace-js": "^1.2.4",
-        "pnotify": "4.0.1",
-        "tailwindcss": "^3.4.10",
-        "tinymce": "5.10.9",
-        "vite": "^5.4",
-        "vuedraggable": "^2.24.3"
+        "laravel-vite-plugin": "^2.0",
+        "nested-sort": "^5.2.0"
     }
 }
diff --git a/public/assets/images/newznab-logo.svg b/public/assets/images/newznab-logo.svg
new file mode 100644
index 000000000..9a17d89ae
--- /dev/null
+++ b/public/assets/images/newznab-logo.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
+  <!-- Background circle -->
+  <circle cx="100" cy="100" r="95" fill="#2563eb" stroke="#1e40af" stroke-width="2"/>
+
+  <!-- NZB Icon representation -->
+  <g transform="translate(50, 50)">
+    <!-- Document icon -->
+    <path d="M20 10 L80 10 L80 20 L90 30 L90 90 L20 90 Z" fill="#ffffff" opacity="0.9"/>
+    <path d="M80 10 L80 30 L90 30 Z" fill="#cbd5e1"/>
+
+    <!-- NZB Text stylized -->
+    <text x="55" y="60" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#1e40af" text-anchor="middle">NZB</text>
+  </g>
+
+  <!-- Bottom accent -->
+  <path d="M 40 140 Q 100 150 160 140" stroke="#60a5fa" stroke-width="3" fill="none" opacity="0.8"/>
+</svg>
+
diff --git a/resources/assets/js/functions.js b/resources/assets/js/functions.js
deleted file mode 100755
index cb95f532c..000000000
--- a/resources/assets/js/functions.js
+++ /dev/null
@@ -1,914 +0,0 @@
-//enable bootstrap tooltips
-let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-    return new bootstrap.Tooltip(tooltipTriggerEl);
-});
-// event bindings
-jQuery(function ($) {
-    const base_url = window.location.origin;
-    $('.cartadd').click(function (e) {
-        if ($(this).hasClass('icon_cart_clicked')) return false;
-        let guid = $('.guid').attr('id').substring(4);
-        //alert(guid);
-        $.ajaxSetup({
-            headers: {
-                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
-            },
-        });
-        $.post(base_url + '/cart/add?id=' + guid, function (resp) {
-            $(e.target).addClass('icon_cart_clicked').attr('title', 'Added to Cart');
-            PNotify.defaults.icons = 'fontawesome5';
-            PNotify.success({
-                title: 'Release added to your Download Basket!',
-                type: 'success',
-                icon: 'fa fa-info fa-3x',
-                Animate: {
-                    animate: true,
-                    in_class: 'bounceInLeft',
-                    out_class: 'bounceOutRight',
-                },
-                desktop: {
-                    desktop: true,
-                    fallback: true,
-                },
-            });
-        });
-        return false;
-    });
-
-    // browse.tpl, search.tpl -- show icons on hover
-    let orig_opac = $('table.data tr').children('td.icons').children('div.icon').css('opacity');
-    $('table.data tr').hover(
-        function () {
-            $(this).children('td.icons').children('div.icon').css('opacity', 1);
-        },
-        function () {
-            $(this).children('td.icons').children('div.icon').css('opacity', orig_opac);
-        }
-    );
-
-    $('.forumpostsubmit').click(function (e) {
-        if ($.trim($('#addMessage').val()) == '' || $.trim($('#addSubject').val()) == '') {
-            alert('Please enter a subject and message.');
-            return false;
-        }
-    });
-
-    $('.forumreplysubmit').click(function (e) {
-        if ($.trim($('#addMessage').val()) == '') {
-            alert('Please enter a message.');
-            return false;
-        }
-    });
-
-    $('.check').click(function (e) {
-        if (!$(e.target).is('input'))
-            $(this)
-                .children('.nzb_check')
-                .attr('checked', !$(this).children('.nzb_check').attr('checked'));
-    });
-
-    $('.descmore').click(function (e) {
-        $(this).prev('.descinitial').hide();
-        $(this).next('.descfull').show();
-        $(this).hide();
-        return false;
-    });
-
-    $('.nzb_check_all').change(function () {
-        if ($(this).attr('checked')) {
-            $('table.data tr td input:checkbox').attr('checked', $(this).attr('checked'));
-        } else {
-            $('table.data tr td input:checkbox').removeAttr('checked');
-        }
-    });
-
-    $('.nzb_check_all_season').change(function () {
-        let season = $(this).attr('name');
-        $('table.data tr td input:checkbox').each(function (i, row) {
-            if ($(row).attr('name') == season) {
-                $(row).attr('checked', !$(row).attr('checked'));
-            }
-        });
-    });
-
-    // browse.tpl, search.tpl
-    $('.icon_cart').click(function (e) {
-        if ($(this).hasClass('icon_cart_clicked')) return false;
-        let guid = $(this).attr('id').substring(4);
-        //alert(guid);
-        //alert(base_url + "/cart/add?id=" + guid);
-        $.ajaxSetup({
-            headers: {
-                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
-            },
-        });
-        $.post(base_url + '/cart/add?id=' + guid, function (resp) {
-            $(e.target).addClass('icon_cart_clicked').attr('title', ' Release added to Cart');
-            PNotify.defaults.icons = 'fontawesome5';
-            PNotify.success({
-                title: 'Release added to your download basket!',
-                type: 'success',
-                icon: 'fa fa-info fa-3x',
-                Animate: {
-                    animate: true,
-                    in_class: 'bounceInLeft',
-                    out_class: 'bounceOutRight',
-                },
-                desktop: {
-                    desktop: true,
-                    fallback: true,
-                },
-            });
-        });
-        return false;
-    });
-
-    $('table.data a.modal_nfo').colorbox({
-        // NFO modal
-        href: function () {
-            return $(this).attr('href') + '&modal';
-        },
-        title: function () {
-            return $(this).parent().parent().children('a.title').text();
-        },
-        innerWidth: '800px',
-        innerHeight: '90%',
-        initialWidth: '800px',
-        initialHeight: '90%',
-        speed: 0,
-        opacity: 0.7,
-    });
-    // Screenshot modal
-    $('table.data a.modal_prev').colorbox({
-        scrolling: false,
-        maxWidth: '800px',
-        maxHeight: '450px',
-    });
-
-    $('table.data a.modal_imdb')
-        .colorbox({
-            // IMDB modal
-            href: function () {
-                return base_url + 'movie/' + $(this).attr('name').substring(4) + '&modal';
-            },
-            title: function () {
-                return $(this).parent().parent().children('a.title').text();
-            },
-            innerWidth: '800px',
-            innerHeight: '450px',
-            initialWidth: '800px',
-            initialHeight: '450px',
-            speed: 0,
-            opacity: 0.7,
-        })
-        .click(function () {
-            $('#colorbox').removeClass().addClass('cboxMovie');
-        });
-
-    $('a.modal_imdbtrailer')
-        .colorbox({
-            // IMDB trailer modal
-            href: function () {
-                return base_url + 'movietrailer/' + $(this).attr('name').substring(4) + '&modal';
-            },
-            title: function () {
-                return $(this).parent().parent().children('a.title').text();
-            },
-            innerWidth: '800px',
-            innerHeight: '450px',
-            initialWidth: '800px',
-            initialHeight: '450px',
-            speed: 0,
-            opacity: 0.7,
-        })
-        .click(function () {
-            $('#colorbox').removeClass().addClass('cboxMovie');
-        });
-
-    $('table.data a.modal_music')
-        .colorbox({
-            // Music modal
-            href: function () {
-                return base_url + 'musicmodal/' + $(this).attr('name').substring(4) + '&modal';
-            },
-            title: function () {
-                return $(this).parent().parent().children('a.title').text();
-            },
-            innerWidth: '800px',
-            innerHeight: '450px',
-            initialWidth: '800px',
-            initialHeight: '450px',
-            speed: 0,
-            opacity: 0.7,
-        })
-        .click(function () {
-            $('#colorbox').removeClass().addClass('cboxMusic');
-        });
-    $('table.data a.modal_console')
-        .colorbox({
-            // Console modal
-            href: function () {
-                return base_url + 'consolemodal/' + $(this).attr('name').substring(4) + '&modal';
-            },
-            title: function () {
-                return $(this).parent().parent().children('a.title').text();
-            },
-            innerWidth: '800px',
-            innerHeight: '450px',
-            initialWidth: '800px',
-            initialHeight: '450px',
-            speed: 0,
-            opacity: 0.7,
-        })
-        .click(function () {
-            $('#colorbox').removeClass().addClass('cboxConsole');
-        });
-    $('table.data a.modal_book')
-        .colorbox({
-            // Book modal
-            href: function () {
-                return base_url + 'bookmodal/' + $(this).attr('name').substring(4) + '&modal';
-            },
-            title: function () {
-                return $(this).parent().parent().children('a.title').text();
-            },
-            innerWidth: '800px',
-            innerHeight: '450px',
-            initialWidth: '800px',
-            initialHeight: '450px',
-            speed: 0,
-            opacity: 0.7,
-        })
-        .click(function () {
-            $('#colorbox').removeClass().addClass('cboxBook');
-        });
-
-    $('#nzb_multi_operations_form').submit(function () {
-        return false;
-    });
-
-    // Reusable function to get selected item IDs
-    function getSelectedItemIds() {
-        const selectedIds = [];
-
-        // Try multiple common container selectors to find checkboxes
-        const checkboxSelectors = [
-            "INPUT[type='checkbox']:checked",               // Any checked checkbox
-            ".table INPUT[type='checkbox']:checked",        // Table checkboxes
-            ".card INPUT[type='checkbox']:checked",         // Card layout checkboxes
-            "[data-guid] INPUT[type='checkbox']:checked",   // Elements with data-guid attribute
-            "form INPUT[type='checkbox']:checked"           // Form checkboxes
-        ];
-
-        // Try each selector until we find checked boxes
-        for (const selector of checkboxSelectors) {
-            $(selector).each(function() {
-                const value = $(this).val();
-                if (value && value !== 'on') {
-                    selectedIds.push(value);
-                }
-            });
-
-            // If we found any items, stop searching
-            if (selectedIds.length > 0) {
-                break;
-            }
-        }
-
-        console.log('Selected IDs:', selectedIds); // Debugging
-        return selectedIds;
-    }
-
-    // Download button handler
-    $('button.nzb_multi_operations_download').on('click', function() {
-        const ids = getSelectedItemIds().join(',');
-        if (ids) {
-            window.location = base_url + '/getnzb?zip=1&id=' + ids;
-        } else {
-            PNotify.alert({
-                title: 'No items selected',
-                text: 'Please select at least one item to download.',
-                type: 'info'
-            });
-        }
-    });
-
-    // Cart button handler
-    $('button.nzb_multi_operations_cart').on('click', function() {
-        const selectedIds = getSelectedItemIds();
-        if (selectedIds.length === 0) {
-            PNotify.alert({
-                title: 'No items selected',
-                text: 'Please select at least one item to add to your cart.',
-                type: 'info'
-            });
-            return;
-        }
-
-        $.ajaxSetup({
-            headers: {
-                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
-            },
-        });
-
-        // Find and update cart icons using data attributes
-        selectedIds.forEach(guid => {
-            // Look for cart icon with matching data attribute
-            const $cartIcon = $(`[data-guid="${guid}"] .icon_cart, #guid${guid}`);
-            if ($cartIcon.length && !$cartIcon.hasClass('icon_cart_clicked')) {
-                $cartIcon.addClass('icon_cart_clicked').attr('title', 'Added to Cart');
-            }
-        });
-
-        // Uncheck all selected checkboxes
-        $('input[type="checkbox"]:checked').prop('checked', false);
-
-        // Send to cart
-        if (selectedIds.length > 0) {
-            const guidString = selectedIds.join(',');
-            $.post(base_url + '/cart/add?id=' + guidString, function() {
-                PNotify.defaults.icons = 'fontawesome5';
-                PNotify.success({
-                    title: 'Items added to your Download Basket!',
-                    type: 'success',
-                    icon: 'fa fa-info fa-3x',
-                    Animate: {
-                        animate: true,
-                        in_class: 'bounceInLeft',
-                        out_class: 'bounceOutRight',
-                    },
-                    desktop: {
-                        desktop: true,
-                        fallback: true,
-                    },
-                });
-            });
-        }
-    });
-    $('button.nzb_multi_operations_sab').on('click', function () {
-        $("table.data INPUT[type='checkbox']:checked").each(function (i, row) {
-            let $sabIcon = $(row).parent().parent().children('td.icons').children('.icon_sab');
-            let guid = $(row).val();
-            //alert(guid);
-            if (guid && !$sabIcon.hasClass('icon_sab_clicked')) {
-                let nzburl = base_url + '/sendtoqueue/' + guid;
-                // alert(nzburl);
-                $.post(nzburl, function (resp) {
-                    $sabIcon.addClass('icon_sab_clicked').attr('title', 'Added to Queue');
-                    PNotify.defaults.icons = 'fontawesome5';
-                    PNotify.success({
-                        title: 'Release added to your download queue!',
-                        type: 'success',
-                        icon: 'fa fa-info fa-3x',
-                        Animate: {
-                            animate: true,
-                            in_class: 'bounceInLeft',
-                            out_class: 'bounceOutRight',
-                        },
-                        desktop: {
-                            desktop: true,
-                            fallback: true,
-                        },
-                    });
-                });
-            }
-            $(this).attr('checked', false);
-        });
-    });
-    $('input.nzb_multi_operations_nzbget').on('click', function () {
-        $("table.data INPUT[type='checkbox']:checked").each(function (i, row) {
-            let $nzbgetIcon = $(row)
-                .parent()
-                .parent()
-                .children('td.icons')
-                .children('.icon_nzbget');
-            let guid = $(row).val();
-            if (guid && !$nzbgetIcon.hasClass('icon_nzbget_clicked')) {
-                let nzburl = base_url + '/sendtoqueue/' + guid;
-                $.post(nzburl, function (resp) {
-                    $nzbgetIcon.addClass('icon_nzbget_clicked').attr('title', 'Added to Queue');
-                    PNotify.defaults.icons = 'fontawesome5';
-                    PNotify.success({
-                        title: 'Release added to your download queue!',
-                        type: 'success',
-                        icon: 'fa fa-info fa-3x',
-                        Animate: {
-                            animate: true,
-                            in_class: 'bounceInLeft',
-                            out_class: 'bounceOutRight',
-                        },
-                        desktop: {
-                            desktop: true,
-                            fallback: true,
-                        },
-                    });
-                });
-            }
-            $(this).attr('checked', false);
-        });
-    });
-
-    //front end admin functions
-    $('input.nzb_multi_operations_edit').click(function () {
-        let ids = '';
-        $("table.data INPUT[type='checkbox']:checked").each(function (i, row) {
-            if ($(row).val() != 'on') ids += '&id[]=' + $(row).val();
-        });
-        if (ids)
-            $('input.nzb_multi_operations_edit').colorbox({
-                href: function () {
-                    return (
-                        base_url +
-                        'ajax_release-admin?action=edit' +
-                        ids +
-                        '&from=' +
-                        encodeURIComponent(window.location)
-                    );
-                },
-                title: 'Edit Release',
-                innerWidth: '400px',
-                innerHeight: '250px',
-                initialWidth: '400px',
-                initialHeight: '250px',
-                speed: 0,
-                opacity: 0.7,
-            });
-    });
-    $('input.nzb_multi_operations_delete').click(function () {
-        let ids = '';
-        $("table.data INPUT[type='checkbox']:checked").each(function (i, row) {
-            if ($(row).val() != 'on') ids += '&id[]=' + $(row).val();
-        });
-        if (ids) {
-            PNotify.defaults.icons = 'fontawesome5';
-            const notice = PNotify.alert({
-                title: 'Confirmation Needed',
-                text: 'Are you sure you want to delete the selected releases?',
-                icon: 'glyphicon glyphicon-question-sign',
-                hide: false,
-                modules: {
-                    Confirm: {
-                        confirm: true,
-                    },
-                },
-                Buttons: {
-                    closer: false,
-                    sticker: false,
-                },
-                History: {
-                    history: false,
-                },
-            });
-            notice.on('pnotify.confirm', function () {
-                $.post(base_url + 'ajax_release-admin?action=dodelete' + ids, function (resp) {
-                    location.reload(true);
-                });
-            });
-            notice.on('pnotify.cancel', function () {
-                alert('Cancelled');
-            });
-        }
-    });
-    $('input.nzb_multi_operations_rebuild').click(function () {
-        let ids = '';
-        $("table.data INPUT[type='checkbox']:checked").each(function (i, row) {
-            if ($(row).val() != 'on') ids += '&id[]=' + $(row).val();
-        });
-        if (ids)
-            if (confirm('Are you sure you want to rebuild the selected releases?')) {
-                $.post(base_url + 'ajax_release-admin?action=dorebuild' + ids, function (resp) {
-                    location.reload(true);
-                });
-            }
-    });
-    //cart functions
-    $('input.nzb_multi_operations_cartdelete').click(function () {
-        let ids = new Array();
-        $("table.data INPUT[type='checkbox']:checked").each(function (i, row) {
-            if ($(row).val() != 'on') ids.push($(row).val());
-        });
-        $.ajaxSetup({
-            headers: {
-                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
-            },
-        });
-
-        //alert(base_url + "/cart/delete/" + ids);
-        if (ids) {
-            PNotify.defaults.icons = 'fontawesome5';
-            const notice = PNotify.alert({
-                title: 'Confirmation Needed',
-                text: 'Are you sure you want to delete the selected releases from your cart?',
-                hide: false,
-                modules: {
-                    Confirm: {
-                        confirm: true,
-                    },
-                },
-                Buttons: {
-                    closer: false,
-                    sticker: false,
-                },
-                History: {
-                    history: false,
-                },
-            });
-            notice.on('pnotify.confirm', function () {
-                $.post(base_url + '/cart/delete/' + ids);
-            });
-            notice.on('pnotify.cancel', function () {
-                alert('Cancelled');
-            });
-        }
-    });
-    $('input.nzb_multi_operations_cartsab').click(function () {
-        let ids = new Array();
-        $("table.data INPUT[type='checkbox']:checked").each(function (i, row) {
-            let guid = $(row).val();
-            let nzburl = base_url + '/sendtoqueue/' + guid;
-            $.post(nzburl, function () {
-                PNotify.defaults.icons = 'fontawesome5';
-                PNotify.success({
-                    title: 'Releases sent to queue!',
-                    type: 'success',
-                    icon: 'fa fa-info fa-3x',
-                    Animate: {
-                        animate: true,
-                        in_class: 'bounceInLeft',
-                        out_class: 'bounceOutRight',
-                    },
-                    desktop: {
-                        desktop: true,
-                        fallback: true,
-                    },
-                });
-            });
-        });
-    });
-
-    // headermenu.tpl
-    $('#headsearch')
-        .focus(function () {
-            if (this.value === 'Search...') this.value = '';
-            else this.select();
-        })
-        .blur(function () {
-            if (this.value === '') this.value = 'Search...';
-        });
-    $('#headsearch_form').submit(function () {
-        $('#headsearch_go').trigger('click');
-        return false;
-    });
-    document.getElementById('headsearch_go').addEventListener('click', function () {
-        let searchInput = document.getElementById('headsearch');
-        let categoryInput = document.getElementById('headcat');
-        if (searchInput.value && searchInput.value != 'Search...') {
-            let sText = searchInput.value;
-            let sCat = categoryInput.value !== '-1' ? '&t=' + categoryInput.value : 't=-1';
-            window.location.href = base_url + '/search?' + sCat + '&search=' + sText;
-        } else {
-            PNotify.defaults.icons = 'fontawesome5';
-            PNotify.alert({
-                title: 'You need to enter a search term!',
-                type: 'error',
-                icon: 'fa fa-info fa-3x',
-                Animate: {
-                    animate: true,
-                    in_class: 'bounceInLeft',
-                    out_class: 'bounceOutRight',
-                },
-                desktop: {
-                    desktop: true,
-                    fallback: true,
-                },
-            });
-        }
-    });
-
-    // search.tpl
-    $('#search_search_button').click(function () {
-        if ($('#search').val())
-            document.location =
-                base_url +
-                '/search?search=' +
-                $('#search').val() +
-                ($('#search_cat').val() != -1 ? '&t=' + $('#search_cat').val() : '&t=-1');
-        return false;
-    });
-
-    $('#search').focus(function () {
-        this.select();
-    });
-
-    // searchraw.tpl
-    $('#searchraw_search_button').click(function () {
-        if ($('#search').val()) document.location = base_url + '/searchraw/' + $('#search').val();
-        return false;
-    });
-    $('#searchraw_download_selected').click(function () {
-        if ($('#dl input:checked').length) $('#dl').trigger('submit');
-        return false;
-    });
-
-    // login.tpl, register.tpl, search.tpl, searchraw.tpl
-    if ($('#username').length) $('#username').focus();
-    if ($('#search').length) $('#search').focus();
-
-    // viewfilelist.tpl
-    $('#viewfilelist_download_selected').click(function () {
-        if ($('#fileform input:checked').length) $('#fileform').trigger('submit');
-        return false;
-    });
-
-    // misc
-    $('.confirm_action').click(function () {
-        return confirm('Are you sure?');
-    });
-
-    // play audio preview
-    $('.audioprev').click(function () {
-        let a = document.getElementById($(this).next('audio').attr('ID'));
-        if (a != null) {
-            if ($(this).text() == 'Listen') {
-                a.play();
-                $(this).text('Stop');
-            } else {
-                a.pause();
-                a.currentTime = 0;
-                $(this).text('Listen');
-            }
-        }
-
-        a.addEventListener('ended', function () {
-            $(this).prev().text('Listen');
-        });
-
-        return false;
-    });
-
-    // mmenu
-    $('.mmenu').click(function () {
-        document.location = $(this).children('a').attr('href');
-        return false;
-    });
-
-    // mmenu_new
-    $('.mmenu_new').click(function () {
-        window.open($(this).children('a').attr('href'));
-        return false;
-    });
-
-    // searchraw.tpl, viewfilelist.tpl -- checkbox operations
-    // selections
-    let last1, last2;
-    $('.checkbox_operations .select_all').click(function () {
-        $("table.data INPUT[type='checkbox']").attr('checked', true).trigger('change');
-        return false;
-    });
-    $('.checkbox_operations .select_none').click(function () {
-        $("table.data INPUT[type='checkbox']").attr('checked', false).trigger('change');
-        return false;
-    });
-    $('.checkbox_operations .select_invert').click(function () {
-        $("table.data INPUT[type='checkbox']").each(function () {
-            $(this).attr('checked', !$(this).attr('checked')).trigger('change');
-        });
-        return false;
-    });
-    $('.checkbox_operations .select_range').click(function () {
-        if (last1 && last2 && last1 < last2)
-            $("table.data INPUT[type='checkbox']")
-                .slice(last1, last2)
-                .attr('checked', true)
-                .trigger('change');
-        else if (last1 && last2)
-            $("table.data INPUT[type='checkbox']")
-                .slice(last2, last1)
-                .attr('checked', true)
-                .trigger('change');
-        return false;
-    });
-    $('table.data td.check INPUT[type="checkbox"]').click(function (e) {
-        // range event interaction -- see further above
-        let rowNum = $(e.target).parent().parent()[0].rowIndex;
-        if (last1) last2 = last1;
-        last1 = rowNum;
-
-        // perform range selection
-        if (e.shiftKey && last1 && last2) {
-            if (last1 < last2)
-                $("table.data INPUT[type='checkbox']")
-                    .slice(last1, last2)
-                    .attr('checked', true)
-                    .trigger('change');
-            else
-                $("table.data INPUT[type='checkbox']")
-                    .slice(last2, last1)
-                    .attr('checked', true)
-                    .trigger('change');
-        }
-    });
-    $('table.data a.data_filename').click(function (e) {
-        // click filenames to select
-        // range event interaction -- see further above
-        let rowNum = $(e.target).parent().parent()[0].rowIndex;
-        if (last1) last2 = last1;
-        last1 = rowNum;
-
-        let $checkbox = $(
-            'table.data tr:nth-child(' + (rowNum + 1) + ') td.selection INPUT[type="checkbox"]'
-        );
-        $checkbox.attr('checked', !$checkbox.attr('checked'));
-
-        return false;
-    });
-
-    // show/hide previews
-    $('#showmoviepreviews').click(function () {
-        $('#moviepreviews').next('form').toggle('fast');
-        $('#moviepreviews').toggle('fast', function () {
-            $('#showmoviepreviews').text(
-                ($('#moviepreviews').is(':visible') ? 'Hide' : 'Show') + ' previews'
-            );
-        });
-        return false;
-    });
-
-    // show/hide invite form
-    $('#lnkSendInvite').click(function () {
-        $('#divInvite').slideToggle('fast');
-    });
-
-    // send an invite
-    $('#frmSendInvite').submit(function () {
-        let inputEmailto = $('#txtInvite').val();
-        if (isValidEmailAddress(inputEmailto)) {
-            // no caching of results
-            $.ajax({
-                url: base_url + '/ajax_profile?action=1&rand=' + $.now(),
-                data: { emailto: inputEmailto },
-                dataType: 'html',
-                success: function (data) {
-                    $('#txtInvite').val('');
-                    $('#divInvite').slideToggle('fast');
-                    $('#divInviteSuccess').text(data).show();
-                    $('#divInviteError').hide();
-                },
-                error: function (xhr, err, e) {
-                    alert('Error in ajax_profile: ' + err);
-                },
-            });
-        } else {
-            $('#divInviteSuccess').hide();
-            $('#divInviteError').text('Invalid email').show();
-        }
-        return false;
-    });
-
-    // movie.tpl
-    $('.mlmore').click(function () {
-        // show more movies
-        $(this).parent().parent().hide();
-        $(this).parent().parent().parent().children('.mlextra').show();
-        return false;
-    });
-
-    // lookup tmdb for a movie
-    $('#frmMyMovieLookup').submit(function () {
-        let movSearchText = $('#txtsearch').val();
-        // no caching of results
-        $.ajax({
-            url: base_url + '/ajax_mymovies?rand=' + $.now(),
-            data: { id: movSearchText },
-            dataType: 'html',
-            success: function (data) {
-                $('#divMovResults').html(data);
-            },
-            error: function (xhr, err, e) {
-                alert('Error in ajax_mymovies: ' + err);
-            },
-        });
-
-        return false;
-    });
-
-    // season selector in TV
-    $('a[id^="seas_"]').click(function () {
-        seas = $(this).attr('ID').replace('seas_', '');
-
-        $('table[class^="tb_"]').hide();
-        $('.tb_' + seas).show();
-
-        $('li', $(this).closest('ul')).removeClass('active');
-        $(this).closest('li').addClass('active');
-
-        return false;
-    });
-});
-
-$.extend({
-    // http://plugins.jquery.com/project/URLEncode
-    URLEncode: function (c) {
-        let o = '';
-        let x = 0;
-        c = c.toString();
-        let r = /(^[a-zA-Z0-9_.]*)/;
-        while (x < c.length) {
-            let m = r.exec(c.substr(x));
-            if (m != null && m.length > 1 && m[1] != '') {
-                o += m[1];
-                x += m[1].length;
-            } else {
-                if (c[x] == ' ') o += '+';
-                else {
-                    let d = c.charCodeAt(x);
-                    let h = d.toString(16);
-                    o += '%' + (h.length < 2 ? '0' : '') + h.toUpperCase();
-                }
-                x++;
-            }
-        }
-        return o;
-    },
-    URLDecode: function (s) {
-        let o = s;
-        let binVal, t;
-        let r = /(%[^%]{2})/;
-        while ((m = r.exec(o)) != null && m.length > 1 && m[1] != '') {
-            b = parseInt(m[1].substr(1), 16);
-            t = String.fromCharCode(b);
-            o = o.replace(m[1], t);
-        }
-        return o;
-    },
-});
-
-function isValidEmailAddress(emailAddress) {
-    let pattern = new RegExp(
-        /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i
-    );
-    return pattern.test(emailAddress);
-}
-
-function getNzbGetQueue() {
-    $.ajax({
-        url: 'queuedata?type=nzbget&id=' + $.now(),
-        cache: false,
-        success: function (html) {
-            $('.nzbget_queue').html(html);
-            setTimeout('getNzbGetQueue()', 2500);
-        },
-        error: function () {
-            $('.nzbget_queue').html(
-                'Could not contact your queue. <a href="javascript:location.reload(true)">Refresh</a>'
-            );
-        },
-        timeout: 5000,
-    });
-}
-
-function getHistory() {
-    $.ajax({
-        url: 'queuedata?type=history&id=' + $.now(),
-        cache: false,
-        success: function (html) {
-            $('.sab_history').html(html);
-            setTimeout('getHistory()', 10000);
-        },
-        error: function () {
-            //$(".sab_history").html("Could not contact your queue. <a href=\"javascript:location.reload(true)\">Refresh</a>");
-        },
-        timeout: 5000,
-    });
-}
-
-/** ******  iswitch  *********************** **/
-
-$(function () {
-    let checkAll = $('input.flat-all');
-    let checkboxes = $('input.flat');
-
-    $('input').iCheck({
-        checkboxClass: 'icheckbox_flat-green',
-        radioClass: 'iradio_flat-green',
-    });
-
-    checkAll.on('ifChecked ifUnchecked', function (event) {
-        if (event.type === 'ifChecked') {
-            checkboxes.iCheck('check');
-        } else {
-            checkboxes.iCheck('uncheck');
-        }
-    });
-
-    checkboxes.on('ifChanged', function (event) {
-        if (checkboxes.filter(':checked').length === checkboxes.length) {
-            checkAll.prop('checked', 'checked');
-        } else {
-            checkAll.prop('checked', false);
-        }
-        checkAll.iCheck('update');
-    });
-});
-/** ******  /iswitch  *********************** **/
diff --git a/resources/assets/js/utils-admin.js b/resources/assets/js/utils-admin.js
deleted file mode 100644
index 05f17e34c..000000000
--- a/resources/assets/js/utils-admin.js
+++ /dev/null
@@ -1,374 +0,0 @@
-/**
- * ajax_group_status()
- *
- * @param id        group id
- * @param status    0 = deactive, 1 = activate
- */
-
-const base_url = window.location.origin;
-function ajax_group_status(id, what) {
-    // no caching of results
-    let rand_no = Math.random();
-    if (what != undefined) {
-        $.ajax({
-            url: base_url + '/admin/ajax?action=toggle_group_active_status&rand=' + rand_no,
-            data: { group_id: id, group_status: what },
-            dataType: 'html',
-            success: function (data) {
-                $('div#message').html(data);
-                $('div#message').show('fast', function () {});
-
-                // switch some links around
-                if (what == 0) {
-                    $('td#group-' + id).html(
-                        `<button type="button" onclick="ajax_group_status(${id}, 1)" class="btn btn-sm btn-outline-secondary">
-                            <i class="fa fa-times-circle me-1"></i>Inactive
-                        </button>`
-                    );
-                } else {
-                    $('td#group-' + id).html(
-                        `<button type="button" onclick="ajax_group_status(${id}, 0)" class="btn btn-sm btn-success">
-                            <i class="fa fa-check-circle me-1"></i>Active
-                        </button>`
-                    );
-                }
-
-                // fade.. mm
-                $('#message').fadeOut(5000);
-            },
-            error: function (xhr, err, e) {
-                alert('Error in ajax_group_status: ' + err);
-            },
-        });
-    } else {
-        alert('Weird.. what group id are looking for?');
-    }
-}
-
-/**
- * ajax_backfill_status()
- *
- * @param id        group id
- * @param status    0 = deactive, 1 = activate
- */
-function ajax_backfill_status(id, what) {
-    // no caching of results
-    let rand_no = Math.random();
-    if (what != undefined) {
-        $.ajax({
-            url: base_url + '/admin/ajax?action=toggle_group_backfill_status&rand=' + rand_no,
-            data: { group_id: id, backfill_status: what },
-            dataType: 'html',
-            success: function (data) {
-                $('div#message').html(data);
-                $('div#message').show('fast', function () {});
-
-                // switch some links around
-                if (what == 0) {
-                    $('td#backfill-' + id).html(
-                        `<button type="button" onclick="ajax_backfill_status(${id}, 1)" class="btn btn-sm btn-outline-secondary">
-                            <i class="fa fa-times-circle me-1"></i>Disabled
-                        </button>`
-                    );
-                } else {
-                    $('td#backfill-' + id).html(
-                        `<button type="button" onclick="ajax_backfill_status(${id}, 0)" class="btn btn-sm btn-info">
-                            <i class="fa fa-check-circle me-1"></i>Enabled
-                        </button>`
-                    );
-                }
-
-                // fade.. mm
-                $('#message').fadeOut(5000);
-            },
-            error: function (xhr, err, e) {
-                alert('Error in ajax_backfill_status: ' + err);
-            },
-        });
-    } else {
-        alert('Weird.. what group id are looking for?');
-    }
-}
-
-/**
- * ajax_group_delete()
- *
- * @param id        group id
- */
-function ajax_group_delete(id) {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=group_edit_delete_single&rand=' + rand_no,
-        data: { group_id: id },
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#grouprow-' + id).fadeOut(2000);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_group_delete: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_group_reset()
- *
- * @param id        group id
- */
-function ajax_group_reset(id) {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=group_edit_reset_single&rand=' + rand_no,
-        data: { group_id: id },
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#grouprow-' + id).fadeTo(2000, 0.5);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_group_reset: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_group_purge()
- *
- * @param id        group id
- */
-function ajax_group_purge(id) {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=group_edit_purge_single&rand=' + rand_no,
-        data: { group_id: id },
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#grouprow-' + id).fadeTo(2000, 0.5);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_group_purge: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_all_reset()
- *
- *
- */
-function ajax_all_reset() {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=group_edit_reset_all&rand=' + rand_no,
-        data: 'All groups reset.',
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#grouprow-' + id).fadeTo(2000, 0.5);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_all_reset: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_all_purge()
- */
-function ajax_all_purge() {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=group_edit_purge_all&rand=' + rand_no,
-        data: 'All groups purged',
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#grouprow-' + id).fadeTo(2000, 0.5);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_all_purge: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_binaryblacklist_delete()
- *
- * @param id        binary id
- */
-function ajax_binaryblacklist_delete(id) {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=binary_blacklist_delete&rand=' + rand_no,
-        data: { row_id: id },
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#row-' + id).fadeOut(2000);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_binaryblacklist_delete: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_category_regex_delete()
- *
- * @param id        binary id
- */
-function ajax_category_regex_delete(id) {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=category_regex_delete&rand=' + rand_no,
-        data: { row_id: id },
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#row-' + id).fadeOut(2000);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_category_regex_delete: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_collection_regex_delete()
- *
- * @param id        binary id
- */
-function ajax_collection_regex_delete(id) {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=collection_regex_delete&rand=' + rand_no,
-        data: { row_id: id },
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#row-' + id).fadeOut(2000);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_collection_regex_delete: ' + err);
-        },
-    });
-}
-
-/**
- * ajax_release_naming_regex_delete()
- *
- * @param id        binary id
- */
-function ajax_release_naming_regex_delete(id) {
-    // no caching of results
-    let rand_no = Math.random();
-    $.ajax({
-        url: base_url + '/admin/ajax?action=release_naming_regex_delete&rand=' + rand_no,
-        data: { row_id: id },
-        dataType: 'html',
-        success: function (data) {
-            $('div#message').html(data);
-            $('div#message').show('fast', function () {});
-            $('#row-' + id).fadeOut(2000);
-            $('#message').fadeOut(5000);
-        },
-        error: function (xhr, err, e) {
-            alert('Error in ajax_release_naming_regex_delete: ' + err);
-        },
-    });
-}
-
-jQuery(function ($) {
-    $('#regexGroupSelect').change(function () {
-        document.location = '?group=' + $('#regexGroupSelect option:selected').attr('value');
-    });
-
-    // misc
-    $('.confirm_action').click(function () {
-        return confirm('Are you sure?');
-    });
-});
-
-/** ****** tinyMCE ***************************/
-tinyMCE.init({
-    selector: 'textarea#body',
-    theme: 'silver',
-    plugins: [
-        'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
-        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
-        'save table directionality emoticons template paste code',
-    ],
-    theme_advanced_toolbar_location: 'top',
-    theme_advanced_toolbar_align: 'left',
-    toolbar:
-        'insertfile undo redo | styleselect | fontselect |sizeselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | code',
-    fontsize_formats: '8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt',
-    mode: 'exact',
-    relative_urls: false,
-    remove_script_host: false,
-    convert_urls: true,
-});
-
-tinyMCE.init({
-    selector: 'textarea#metadescription',
-    theme: 'silver',
-    plugins: [
-        'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
-        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
-        'save table contextmenu directionality emoticons template paste textcolor code',
-    ],
-    theme_advanced_toolbar_location: 'top',
-    theme_advanced_toolbar_align: 'left',
-    toolbar:
-        'insertfile undo redo | styleselect | fontselect |sizeselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | code',
-    fontsize_formats: '8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt',
-    mode: 'exact',
-    relative_urls: false,
-    remove_script_host: false,
-    convert_urls: true,
-});
-
-tinyMCE.init({
-    selector: 'textarea#metakeywords',
-    theme: 'silver',
-    plugins: [
-        'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
-        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
-        'save table contextmenu directionality emoticons template paste textcolor code',
-    ],
-    theme_advanced_toolbar_location: 'top',
-    theme_advanced_toolbar_align: 'left',
-    toolbar:
-        'insertfile undo redo | styleselect | fontselect |sizeselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | code',
-    fontsize_formats: '8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt',
-    mode: 'exact',
-    relative_urls: false,
-    remove_script_host: false,
-    convert_urls: true,
-});
diff --git a/resources/css/app.css b/resources/css/app.css
index 192ae1792..56169dba4 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,9 +1,9 @@
 /* Import FontAwesome */
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 
-/* Import other necessary libraries */
-@import 'animate.css/animate.min.css';
-@import 'datatables/media/css/jquery.dataTables.min.css';
+
+/* Import custom CSP-safe styles */
+@import './csp-safe.css';
 
 @tailwind base;
 @tailwind components;
@@ -124,3 +124,234 @@
     @apply flex-shrink-0;
 }
 
+/* Mobile Responsive Improvements */
+@layer utilities {
+    /* Mobile-friendly tables */
+    @media (max-width: 768px) {
+        .table-responsive {
+            @apply overflow-x-auto -mx-4 px-4;
+        }
+
+        .table-responsive table {
+            @apply min-w-max;
+        }
+
+        /* Card-style table rows for mobile */
+        .table-mobile-cards tbody tr {
+            @apply block border border-gray-200 dark:border-gray-700 rounded-lg mb-4 p-4;
+        }
+
+        .table-mobile-cards tbody td {
+            @apply block text-left;
+            padding-left: 50% !important;
+            position: relative;
+        }
+
+        .table-mobile-cards tbody td::before {
+            content: attr(data-label);
+            position: absolute;
+            left: 1rem;
+            font-weight: 600;
+            @apply text-gray-700 dark:text-gray-300;
+        }
+
+        .table-mobile-cards thead {
+            @apply hidden;
+        }
+
+        /* Stack buttons vertically on mobile */
+        .btn-group {
+            @apply flex-col space-x-0 space-y-2;
+        }
+
+        /* Full width buttons on mobile */
+        .btn-mobile-full {
+            @apply w-full justify-center;
+        }
+
+        /* Mobile search forms */
+        .search-form-mobile {
+            @apply flex-col space-y-2;
+        }
+
+        .search-form-mobile select,
+        .search-form-mobile input {
+            @apply w-full rounded;
+        }
+
+        /* Reduce padding on small screens */
+        .container {
+            @apply px-2;
+        }
+
+        /* Stack navigation items */
+        .nav-mobile-stack {
+            @apply flex-col space-x-0 space-y-2;
+        }
+
+        /* Hide non-essential columns on mobile */
+        .hide-mobile {
+            @apply hidden;
+        }
+
+        /* Smaller text on mobile */
+        .text-mobile-sm {
+            @apply text-xs;
+        }
+
+        /* Mobile dropdown menus should be full width */
+        .dropdown-menu {
+            @apply left-0 right-0 w-auto mx-2;
+        }
+
+        /* Mobile modal adjustments */
+        .modal-content {
+            @apply mx-2 max-h-[90vh] overflow-y-auto;
+        }
+
+        /* Smaller font sizes for headings on mobile */
+        h1 {
+            @apply text-2xl;
+        }
+
+        h2 {
+            @apply text-xl;
+        }
+
+        h3 {
+            @apply text-lg;
+        }
+
+        /* Mobile grid adjustments */
+        .grid-mobile-1 {
+            @apply grid-cols-1;
+        }
+
+        /* Touch-friendly sizing */
+        .touch-target {
+            min-height: 44px;
+            min-width: 44px;
+        }
+    }
+
+    /* Small mobile devices */
+    @media (max-width: 480px) {
+        /* Even smaller text on very small screens */
+        body {
+            @apply text-sm;
+        }
+
+        .btn {
+            @apply text-xs px-3 py-2;
+        }
+
+        /* Stack form fields */
+        .form-grid {
+            @apply grid-cols-1 gap-2;
+        }
+
+        /* Compact headers */
+        .page-header {
+            @apply text-xl py-2;
+        }
+
+        /* Reduce card padding */
+        .card-mobile-compact {
+            @apply p-3;
+        }
+    }
+
+    /* Tablet improvements */
+    @media (min-width: 768px) and (max-width: 1024px) {
+        /* 2-column layout on tablets where appropriate */
+        .tablet-cols-2 {
+            @apply grid-cols-2;
+        }
+
+        /* Tablet-optimized navigation */
+        .nav-tablet {
+            @apply space-x-2;
+        }
+    }
+
+    /* Landscape mobile optimization */
+    @media (max-height: 600px) and (orientation: landscape) {
+        /* Reduce vertical padding in landscape */
+        .py-6 {
+            @apply py-2;
+        }
+
+        /* Compact modals in landscape */
+        .modal-content {
+            max-height: 85vh;
+        }
+
+        /* Smaller fixed buttons */
+        #mobile-sidebar-toggle,
+        #theme-toggle {
+            @apply p-2 text-sm;
+        }
+    }
+
+    /* Mobile-optimized badges and labels */
+    @media (max-width: 768px) {
+        .badge {
+            @apply text-xs px-2 py-1;
+        }
+
+        /* Improve readability of release titles */
+        .release-title {
+            @apply text-sm leading-tight;
+        }
+
+        /* Stack action buttons in cards */
+        .card-actions {
+            @apply flex-col space-y-2 space-x-0;
+        }
+
+        /* Make pagination more compact */
+        .pagination {
+            @apply text-sm;
+        }
+
+        .pagination .page-link {
+            @apply px-2 py-1 min-w-[2rem];
+        }
+
+        /* Optimize data tables for mobile */
+        table.dataTable {
+            font-size: 0.875rem;
+        }
+
+        table.dataTable td,
+        table.dataTable th {
+            padding: 0.5rem 0.25rem;
+        }
+
+        /* Improve form labels */
+        label {
+            @apply text-sm font-medium;
+        }
+
+        /* Better spacing for form groups */
+        .form-group {
+            @apply mb-3;
+        }
+
+        /* Mobile-friendly alerts */
+        .alert {
+            @apply text-sm px-3 py-2;
+        }
+
+        /* Compact breadcrumbs */
+        .breadcrumb {
+            @apply text-xs;
+        }
+
+        /* Stack filter options vertically */
+        .filter-options {
+            @apply flex-col space-y-2;
+        }
+    }
+}
+
diff --git a/resources/css/csp-safe.css b/resources/css/csp-safe.css
new file mode 100644
index 000000000..9231d3117
--- /dev/null
+++ b/resources/css/csp-safe.css
@@ -0,0 +1,583 @@
+/* Sidebar Menu Animations */
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+.sidebar-toggle .fa-chevron-down,
+[data-toggle-submenu] .fa-chevron-down {
+    transition: transform 0.3s ease;
+}
+
+.sidebar-submenu {
+    transition: all 0.3s ease;
+}
+
+/* Mobile Sidebar */
+@media (max-width: 768px) {
+    #sidebar {
+        position: fixed;
+        top: 0;
+        left: -100%;
+        height: 100vh;
+        width: 280px;
+        z-index: 999;
+        transition: left 0.3s ease-in-out;
+        overflow-y: auto;
+    }
+
+    #sidebar.mobile-open {
+        left: 0;
+        display: flex !important;
+    }
+
+    /* Mobile overlay */
+    .mobile-sidebar-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 998;
+        display: none;
+    }
+
+    .mobile-sidebar-overlay.active {
+        display: block;
+    }
+}
+
+/* Admin Dashboard Charts */
+.chart-container {
+    position: relative;
+    height: 300px;
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .chart-container {
+        height: 250px;
+    }
+}
+
+/* Toast Notifications */
+#toast-container {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    pointer-events: none;
+}
+
+/* Mobile Toast Notifications */
+@media (max-width: 640px) {
+    #toast-container {
+        top: 0.5rem;
+        right: 0.5rem;
+        left: 0.5rem;
+        max-width: 100%;
+    }
+}
+
+.toast-notification {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 300px;
+    max-width: 500px;
+    padding: 1rem 1.25rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    animation: slideIn 0.3s ease-out;
+    pointer-events: auto;
+    transition: all 0.3s ease;
+}
+
+.toast-notification.removing {
+    animation: slideOut 0.3s ease-in;
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+/* Success Toast */
+.toast-notification.success {
+    background-color: #10b981;
+    color: white;
+}
+
+.dark .toast-notification.success {
+    background-color: #059669;
+}
+
+/* Error Toast */
+.toast-notification.error {
+    background-color: #ef4444;
+    color: white;
+}
+
+.dark .toast-notification.error {
+    background-color: #dc2626;
+}
+
+/* Info Toast */
+.toast-notification.info {
+    background-color: #3b82f6;
+    color: white;
+}
+
+.dark .toast-notification.info {
+    background-color: #2563eb;
+}
+
+/* Warning Toast */
+.toast-notification.warning {
+    background-color: #f59e0b;
+    color: white;
+}
+
+.dark .toast-notification.warning {
+    background-color: #d97706;
+}
+
+.toast-icon {
+    flex-shrink: 0;
+    font-size: 1.25rem;
+}
+
+.toast-message {
+    flex: 1;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5;
+}
+
+.toast-close {
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    color: inherit;
+    font-size: 1.5rem;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 0.5rem;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.toast-close:hover {
+    opacity: 1;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+/* Inline form display */
+.inline-form {
+    display: inline;
+}
+
+/* Line clamp utility for text truncation */
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Admin Tmux - Select color states - Light mode */
+#tmuxForm select.select-yes {
+    background-color: #d1e7dd !important;
+    border-color: #badbcc !important;
+    color: #0f5132 !important;
+}
+
+#tmuxForm select.select-no {
+    background-color: #f8d7da !important;
+    border-color: #f5c2c7 !important;
+    color: #842029 !important;
+}
+
+#tmuxForm select.select-other {
+    background-color: #e2e3e5 !important;
+    border-color: #d3d6d8 !important;
+    color: #41464b !important;
+}
+
+#tmuxForm select:focus {
+    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
+}
+
+/* Admin Tmux - Select color states - Dark mode */
+@media (prefers-color-scheme: dark) {
+    #tmuxForm select.select-yes {
+        background-color: #1a3a2a !important;
+        border-color: #2d5a3d !important;
+        color: #7fc99b !important;
+    }
+
+    #tmuxForm select.select-no {
+        background-color: #3a1a1d !important;
+        border-color: #5a2d31 !important;
+        color: #f5a9b0 !important;
+    }
+
+    #tmuxForm select.select-other {
+        background-color: #2a2a2a !important;
+        border-color: #3d3d3d !important;
+        color: #b0b0b0 !important;
+    }
+}
+
+/* Also support dark mode class on html element */
+html.dark #tmuxForm select.select-yes {
+    background-color: #1a3a2a !important;
+    border-color: #2d5a3d !important;
+    color: #7fc99b !important;
+}
+
+html.dark #tmuxForm select.select-no {
+    background-color: #3a1a1d !important;
+    border-color: #5a2d31 !important;
+    color: #f5a9b0 !important;
+}
+
+html.dark #tmuxForm select.select-other {
+    background-color: #2a2a2a !important;
+    border-color: #3d3d3d !important;
+    color: #b0b0b0 !important;
+}
+/* Dropdown menu hidden by default */
+.dropdown-menu {
+    display: none;
+}
+
+.dropdown-menu.show {
+    display: block;
+}
+
+/* Chart container heights */
+.chart-container {
+    height: 250px;
+    max-height: 250px;
+    position: relative;
+}
+
+/* Fixed widths for table columns */
+.col-width-180 {
+    width: 180px;
+}
+
+.col-width-160 {
+    width: 160px;
+}
+
+.col-width-170 {
+    width: 170px;
+}
+
+.col-width-200 {
+    width: 200px;
+}
+
+/* Image max heights */
+.img-max-h-400 {
+    max-height: 400px;
+}
+
+/* Forum quote styling */
+.forum-quote {
+    border-color: #eee;
+}
+
+.dark .forum-quote {
+    border-color: #374151;
+}
+
+/* Email styles (for email templates) */
+.email-text-center {
+    text-align: center;
+}
+
+.email-code-block {
+    word-break: break-all;
+    background-color: #f8f9fa;
+    padding: 10px;
+    border-radius: 4px;
+}
+
+/* Profile Page Tab Content */
+.tab-content {
+    display: none;
+}
+
+.tab-content:first-of-type,
+.tab-content.active {
+    display: block;
+}
+
+.dark .email-code-block {
+    background-color: #1f2937;
+}
+
+/* Modal z-index and display */
+.modal-hidden {
+    display: none;
+    z-index: 9999 !important;
+}
+
+.modal-visible {
+    display: flex;
+    z-index: 9999 !important;
+}
+
+/* Modal content max height */
+.modal-content-scroll {
+    max-height: calc(90vh - 80px);
+}
+
+/* Cart table column width */
+.cart-checkbox-col {
+    width: 30px;
+}
+
+/* Admin Groups Management - Fade Out Animation */
+.fade-out {
+    transition: opacity 0.3s ease;
+    opacity: 0;
+}
+
+/* My Movies/Shows Page Styles */
+.header-gradient {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+}
+
+.info-card-gradient {
+    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
+}
+
+.dark .info-card-gradient {
+    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
+}
+
+.table-header-gradient {
+    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}
+
+.dark .table-header-gradient {
+    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
+}
+
+.movie-poster-shadow {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.category-badge {
+    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+}
+
+.dark .category-badge {
+    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
+    color: #93c5fd !important;
+    border-color: #2563eb !important;
+}
+
+.empty-state-bg {
+    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
+}
+
+.dark .empty-state-bg {
+    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
+}
+
+.show-avatar {
+    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+}
+
+/* My Shows Table Borders */
+table {
+    border-collapse: collapse;
+}
+
+table thead tr {
+    border-bottom: 2px solid #e5e7eb;
+}
+
+.dark table thead tr {
+    border-bottom-color: #4b5563;
+}
+
+table tbody tr {
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.dark table tbody tr {
+    border-bottom-color: #374151;
+}
+
+table tbody tr:last-child {
+    border-bottom: none;
+}
+
+/* Checkbox :has() fallback for older browsers */
+@supports not selector(:has(*)) {
+    label:has(input[type="checkbox"]:checked) {
+        background-color: #eff6ff !important;
+        border-color: #3b82f6 !important;
+        color: #1e40af !important;
+    }
+}
+
+/* Content Page Prose Styles */
+.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+    font-weight: 600;
+}
+
+.prose p {
+    margin-bottom: 1em;
+}
+
+.prose ul, .prose ol {
+    margin-bottom: 1em;
+    padding-left: 1.5em;
+}
+
+.prose a {
+    color: #2563eb;
+    text-decoration: underline;
+}
+
+.prose a:hover {
+    color: #1d4ed8;
+}
+
+.prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    margin: 1.5em 0;
+}
+
+.prose blockquote {
+    border-left: 4px solid #e5e7eb;
+    padding-left: 1em;
+    color: #6b7280;
+    font-style: italic;
+    margin: 1.5em 0;
+}
+
+.prose code {
+    background-color: #f3f4f6;
+    padding: 0.2em 0.4em;
+    border-radius: 0.25rem;
+    font-size: 0.875em;
+}
+
+/* Cart Confirmation Modal Styles */
+.confirmation-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 99999;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.confirmation-modal-content {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    max-width: 500px;
+    width: 90%;
+    padding: 24px;
+    animation: slideUp 0.3s ease-out;
+}
+
+@media (prefers-color-scheme: dark) {
+    .confirmation-modal-content {
+        background: #1f2937;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    }
+}
+
+.confirmation-modal-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Contact Page Container */
+.contact-page-container {
+    max-width: 75% !important;
+    width: 75% !important;
+}
+
+@media (min-width: 1536px) {
+    .contact-page-container {
+        max-width: 1200px !important;
+    }
+}
+
+/* Toast Container Override */
+#toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 99999;
+    max-width: 350px;
+    pointer-events: none;
+}
+
+/* Preview/Sample Image Modal */
+#previewModal {
+    z-index: 9999 !important;
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index e1aa76900..2c3d78a0d 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,28 +1,23 @@
 import './bootstrap';
 
-// Import jQuery and make it globally available
-import $ from 'jquery';
-window.$ = window.jQuery = $;
+// Import CSP-safe styles and scripts
+import '../css/csp-safe.css';
+import './csp-safe.js';
 
-// Import Bootstrap JS
-import 'bootstrap';
+// Theme initialization - must run early to prevent flash
+(function() {
+    const themePreference = document.querySelector('meta[name="theme-preference"]')?.content || 'light';
+
+    if (themePreference === 'system') {
+        // Use OS preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
+    } else if (themePreference === 'dark') {
+        document.documentElement.classList.add('dark');
+    }
+})();
 
 // Import FontAwesome
 import '@fortawesome/fontawesome-free/js/all.min.js';
 
-// Import DataTables
-import 'datatables';
-
-// Import other necessary libraries
-import autosize from 'autosize';
-window.autosize = autosize;
-
-// Initialize autosize on page load
-document.addEventListener('DOMContentLoaded', function() {
-    // Auto-resize textareas
-    const textareas = document.querySelectorAll('textarea[data-autosize]');
-    if (textareas.length > 0) {
-        autosize(textareas);
-    }
-});
-
diff --git a/resources/js/csp-safe.js b/resources/js/csp-safe.js
new file mode 100644
index 000000000..3124e7bc5
--- /dev/null
+++ b/resources/js/csp-safe.js
@@ -0,0 +1,3831 @@
+// CSP-Safe JavaScript - All inline event handlers moved here
+// This file handles all onclick, onchange, and other inline event handlers
+
+document.addEventListener('DOMContentLoaded', function() {
+    initEventDelegation();
+    initToastNotifications();
+    initNfoModal();
+    initConfirmDialogs();
+    initSelectRedirects();
+    initLogoutForms();
+    initSeasonSwitcher();
+    initBinaryBlacklist();
+    initImageModal();
+    initTabSwitcher();
+    initPreviewModal();
+    initRegexManagement();
+    initMediainfoAndFilelist();
+    initCartFunctionality();
+    initAdminMenu();
+    initSidebarToggle();
+    initDropdownMenus();
+    initImageFallbacks();
+    initProfileTabs();
+    initAdminUserEdit();
+    initMobileEnhancements();
+    initAdminDashboardCharts();
+    initAdminGroups();
+    initTinyMCE();
+    initAdminSpecificFeatures();
+
+    // Initialize page-specific functionality from inline scripts
+    initMyMovies();
+    initAuthPages();
+    initProfileEdit();
+    initDetailsPageImageModal();
+    initAddToCart();
+});
+
+// Event delegation for dynamically added elements
+function initEventDelegation() {
+    document.addEventListener('click', function(e) {
+        // Handle toast close buttons
+        if (e.target.classList.contains('toast-close') || e.target.closest('.toast-close')) {
+            const toast = e.target.closest('.toast-notification');
+            if (toast) {
+                toast.remove();
+            }
+        }
+
+        // Handle NFO modal close
+        if (e.target.hasAttribute('data-close-nfo-modal') || e.target.closest('[data-close-nfo-modal]')) {
+            e.preventDefault();
+            closeNfoModal();
+        }
+
+        // Handle NFO modal open
+        if (e.target.hasAttribute('data-open-nfo') || e.target.closest('[data-open-nfo]')) {
+            e.preventDefault();
+            const guid = e.target.getAttribute('data-open-nfo') || e.target.closest('[data-open-nfo]').getAttribute('data-open-nfo');
+            if (guid) {
+                openNfoModal(guid);
+            }
+        }
+
+        // Handle logout
+        if (e.target.hasAttribute('data-logout') || e.target.closest('[data-logout]')) {
+            e.preventDefault();
+            const logoutForm = document.getElementById('logout-form');
+            if (logoutForm) {
+                logoutForm.submit();
+            }
+        }
+
+        // Handle confirm delete
+        if (e.target.hasAttribute('data-confirm-delete') || e.target.closest('[data-confirm-delete]')) {
+            const confirmed = confirm('Are you sure you want to delete this item?');
+            if (!confirmed) {
+                e.preventDefault();
+            }
+        }
+
+        // Handle confirm action
+        if (e.target.hasAttribute('data-confirm') || e.target.closest('[data-confirm]')) {
+            const message = e.target.getAttribute('data-confirm') || e.target.closest('[data-confirm]').getAttribute('data-confirm');
+            const confirmed = confirm(message);
+            if (!confirmed) {
+                e.preventDefault();
+            }
+        }
+
+        // Handle download NZB buttons
+        if (e.target.classList.contains('download-nzb') || e.target.closest('.download-nzb')) {
+            if (typeof showToast === 'function') {
+                showToast('Downloading NZB...', 'success');
+            }
+        }
+
+        // Handle season switcher
+        if (e.target.hasAttribute('data-season') || e.target.closest('[data-season]')) {
+            e.preventDefault();
+            const seasonNumber = e.target.getAttribute('data-season') || e.target.closest('[data-season]').getAttribute('data-season');
+            switchSeason(seasonNumber);
+        }
+
+        // Handle binary blacklist delete
+        if (e.target.hasAttribute('data-delete-blacklist') || e.target.closest('[data-delete-blacklist]')) {
+            const id = e.target.getAttribute('data-delete-blacklist') || e.target.closest('[data-delete-blacklist]').getAttribute('data-delete-blacklist');
+            const confirmed = confirm('Are you sure? This will delete the blacklist from this list.');
+            if (confirmed && typeof ajax_binaryblacklist_delete === 'function') {
+                ajax_binaryblacklist_delete(id);
+            }
+            e.preventDefault();
+        }
+
+        // Handle admin groups management actions
+        const actionTarget = e.target.closest('[data-action]');
+        if (actionTarget) {
+            const action = actionTarget.dataset.action;
+            const groupId = actionTarget.dataset.groupId;
+            const status = actionTarget.dataset.status;
+
+            switch(action) {
+                case 'show-reset-modal':
+                    showResetAllModal();
+                    break;
+                case 'hide-reset-modal':
+                    hideResetAllModal();
+                    break;
+                case 'show-purge-modal':
+                    showPurgeAllModal();
+                    break;
+                case 'hide-purge-modal':
+                    hidePurgeAllModal();
+                    break;
+                case 'toggle-group-status':
+                    ajax_group_status(groupId, status);
+                    break;
+                case 'toggle-backfill':
+                    ajax_backfill_status(groupId, status);
+                    break;
+                case 'reset-group':
+                    ajax_group_reset(groupId);
+                    break;
+                case 'delete-group':
+                    confirmGroupDelete(groupId);
+                    break;
+                case 'purge-group':
+                    confirmGroupPurge(groupId);
+                    break;
+                case 'reset-all':
+                    ajax_group_reset_all();
+                    break;
+                case 'purge-all':
+                    ajax_group_purge_all();
+                    break;
+            }
+        }
+    });
+
+    // Handle select redirects
+    document.addEventListener('change', function(e) {
+        if (e.target.hasAttribute('data-redirect-on-change')) {
+            const url = e.target.value;
+            if (url && url !== '#') {
+                window.location.href = url;
+            }
+        }
+    });
+}
+
+// Toast Notifications
+function initToastNotifications() {
+    // showToast is defined globally for backward compatibility
+    window.showToast = function(message, type) {
+        type = type || 'success';
+
+        let container = document.getElementById('toast-container');
+        if (!container) {
+            // Create container if it doesn't exist
+            container = document.createElement('div');
+            container.id = 'toast-container';
+            container.className = 'fixed top-4 right-4 z-50';
+            document.body.appendChild(container);
+        }
+
+        const toast = document.createElement('div');
+        toast.className = 'toast-notification ' + type;
+
+        const iconClass = type === 'success' ? 'fa-check-circle' :
+                        type === 'error' ? 'fa-exclamation-circle' :
+                        'fa-info-circle';
+
+        toast.innerHTML =
+            '<span class="toast-icon"><i class="fas ' + iconClass + '"></i></span>' +
+            '<span class="toast-message">' + escapeHtml(message) + '</span>' +
+            '<button class="toast-close" type="button" aria-label="Close">×</button>';
+
+        container.appendChild(toast);
+
+        // Auto-remove after 5 seconds
+        setTimeout(function() {
+            toast.classList.add('removing');
+            setTimeout(function() {
+                toast.remove();
+            }, 300);
+        }, 5000);
+    };
+}
+
+// NFO Modal
+function initNfoModal() {
+    window.openNfoModal = function(guid) {
+        const modal = document.getElementById('nfoModal');
+        const content = document.getElementById('nfoContent');
+
+        if (!modal || !content) return;
+
+        // Show modal
+        modal.classList.remove('hidden');
+
+        // Reset content with loading message
+        content.innerHTML = '<div class="flex items-center justify-center py-8"><i class="fas fa-spinner fa-spin text-2xl mr-2"></i><span>Loading NFO...</span></div>';
+
+        // Fetch NFO content
+        const baseUrl = document.querySelector('meta[name="app-url"]')?.content || '';
+        fetch(baseUrl + '/nfo/' + guid + '?modal=1')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('NFO not found');
+                }
+                return response.text();
+            })
+            .then(html => {
+                // Extract the NFO content from the response
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(html, 'text/html');
+                const nfoText = doc.querySelector('pre')?.textContent || doc.body.textContent;
+                content.textContent = nfoText;
+            })
+            .catch(error => {
+                content.innerHTML = '<div class="text-center py-8 text-red-400"><i class="fas fa-exclamation-triangle text-2xl mr-2"></i><span>Error loading NFO file</span></div>';
+                console.error('Error loading NFO:', error);
+            });
+    };
+
+    window.closeNfoModal = function() {
+        const modal = document.getElementById('nfoModal');
+        if (modal) {
+            modal.classList.add('hidden');
+        }
+    };
+
+    // Close modal on Escape key
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape') {
+            const modal = document.getElementById('nfoModal');
+            if (modal && !modal.classList.contains('hidden')) {
+                closeNfoModal();
+            }
+        }
+    });
+
+    // Add click handlers for NFO badges
+    document.addEventListener('click', function(event) {
+        if (event.target.closest('.nfo-badge')) {
+            event.preventDefault();
+            const badge = event.target.closest('.nfo-badge');
+            const guid = badge.getAttribute('data-guid');
+            if (guid) {
+                openNfoModal(guid);
+            }
+        }
+    });
+}
+
+// Confirm dialogs
+function initConfirmDialogs() {
+    window.confirmDelete = function(id) {
+        if (confirm('Are you sure you want to delete this item?')) {
+            // If there's a form with this ID, submit it
+            const form = document.getElementById('delete-form-' + id);
+            if (form) {
+                form.submit();
+            }
+            return true;
+        }
+        return false;
+    };
+}
+
+// Select redirects
+function initSelectRedirects() {
+    // Already handled in event delegation
+}
+
+// Logout forms
+function initLogoutForms() {
+    // Already handled in event delegation
+}
+
+// Season switcher for series
+function initSeasonSwitcher() {
+    window.switchSeason = function(seasonNumber) {
+        // Hide all season containers
+        document.querySelectorAll('[data-season-container]').forEach(function(container) {
+            container.style.display = 'none';
+        });
+
+        // Show selected season
+        const selectedSeason = document.querySelector('[data-season-container="' + seasonNumber + '"]');
+        if (selectedSeason) {
+            selectedSeason.style.display = 'block';
+        }
+
+        // Update button states
+        document.querySelectorAll('[data-season]').forEach(function(btn) {
+            btn.classList.remove('active', 'bg-blue-600', 'text-white');
+            btn.classList.add('bg-gray-200', 'text-gray-700');
+        });
+
+        const activeBtn = document.querySelector('[data-season="' + seasonNumber + '"]');
+        if (activeBtn) {
+            activeBtn.classList.remove('bg-gray-200', 'text-gray-700');
+            activeBtn.classList.add('active', 'bg-blue-600', 'text-white');
+        }
+    };
+}
+
+// Binary blacklist
+function initBinaryBlacklist() {
+    // Placeholder - actual implementation depends on existing ajax function
+    window.ajax_binaryblacklist_delete = window.ajax_binaryblacklist_delete || function(id) {
+        console.log('Delete blacklist:', id);
+    };
+}
+
+// Image modal
+function initImageModal() {
+    // Handle image modal if needed
+    document.querySelectorAll('[data-open-image-modal]').forEach(function(element) {
+        element.addEventListener('click', function(e) {
+            e.preventDefault();
+            const imageUrl = this.getAttribute('data-open-image-modal');
+            openImageModal(imageUrl);
+        });
+    });
+
+    window.openImageModal = function(imageUrl) {
+        const modal = document.getElementById('imageModal');
+        if (modal) {
+            const img = modal.querySelector('img');
+            if (img) {
+                img.src = imageUrl;
+            }
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        }
+    };
+
+    window.closeImageModal = function() {
+        const modal = document.getElementById('imageModal');
+        if (modal) {
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        }
+    };
+}
+
+// Tab switcher for profile and other pages
+function initTabSwitcher() {
+    document.querySelectorAll('[data-tab-trigger]').forEach(function(trigger) {
+        trigger.addEventListener('click', function(e) {
+            e.preventDefault();
+            const tabId = this.getAttribute('data-tab-trigger');
+
+            // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(function(tab) {
+                tab.style.display = 'none';
+            });
+
+            // Show selected tab
+            const selectedTab = document.getElementById(tabId);
+            if (selectedTab) {
+                selectedTab.style.display = 'block';
+            }
+
+            // Update active state
+            document.querySelectorAll('[data-tab-trigger]').forEach(function(t) {
+                t.classList.remove('active', 'border-blue-500', 'text-blue-600');
+                t.classList.add('border-transparent', 'text-gray-500');
+            });
+
+            this.classList.remove('border-transparent', 'text-gray-500');
+            this.classList.add('active', 'border-blue-500', 'text-blue-600');
+        });
+    });
+}
+
+// Preview Modal for Browse Page
+function initPreviewModal() {
+    window.closePreviewModal = function() {
+        const modal = document.getElementById('previewModal');
+        if (modal) {
+            modal.style.display = 'none';
+            modal.classList.add('hidden');
+            const img = document.getElementById('previewImage');
+            if (img) img.src = '';
+        }
+    };
+
+    window.showPreviewImage = function(guid, type = 'preview') {
+        const modal = document.getElementById('previewModal');
+        const img = document.getElementById('previewImage');
+        const error = document.getElementById('previewError');
+        const title = document.getElementById('previewTitle');
+
+        if (!modal || !img || !error || !title) return;
+
+        modal.style.display = 'flex';
+        modal.classList.remove('hidden');
+        title.textContent = type === 'sample' ? 'Sample Image' : 'Preview Image';
+
+        const imageUrl = '/covers/' + type + '/' + guid + '_thumb.jpg';
+        img.src = imageUrl;
+        error.classList.add('hidden');
+        img.style.display = 'block';
+
+        img.onerror = function() {
+            error.textContent = (type === 'sample' ? 'Sample' : 'Preview') + ' image not available';
+            error.classList.remove('hidden');
+            img.style.display = 'none';
+        };
+
+        img.onload = function() {
+            img.style.display = 'block';
+        };
+    };
+
+    // Event listeners for preview badges
+    document.querySelectorAll('.preview-badge').forEach(function(badge) {
+        badge.addEventListener('click', function() {
+            const guid = this.getAttribute('data-guid');
+            if (guid) {
+                window.showPreviewImage(guid, 'preview');
+            }
+        });
+    });
+
+    // Event listeners for sample badges
+    document.querySelectorAll('.sample-badge').forEach(function(badge) {
+        badge.addEventListener('click', function() {
+            const guid = this.getAttribute('data-guid');
+            if (guid) {
+                window.showPreviewImage(guid, 'sample');
+            }
+        });
+    });
+
+    // Event listeners for NFO badges
+    document.querySelectorAll('.nfo-badge').forEach(function(badge) {
+        badge.addEventListener('click', function() {
+            const guid = this.getAttribute('data-guid');
+            if (guid) {
+                fetch('/getnfo/' + guid)
+                    .then(response => response.text())
+                    .then(data => {
+                        const nfoContent = document.getElementById('nfo-content');
+                        if (nfoContent) {
+                            nfoContent.textContent = data;
+                            const nfoModal = document.getElementById('nfo-modal');
+                            if (nfoModal) {
+                                nfoModal.classList.remove('hidden');
+                                nfoModal.classList.add('flex');
+                            }
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error fetching NFO:', error);
+                    });
+            }
+        });
+    });
+
+    // Close preview modal on background click
+    const previewModal = document.getElementById('previewModal');
+    if (previewModal) {
+        previewModal.addEventListener('click', function(e) {
+            if (e.target === this) {
+                window.closePreviewModal();
+            }
+        });
+
+        // Event listener for close button (using onclick attribute)
+        const closeButton = previewModal.querySelector('button[onclick*="closePreviewModal"]');
+        if (closeButton) {
+            closeButton.addEventListener('click', function(e) {
+                e.stopPropagation();
+                window.closePreviewModal();
+            });
+        }
+
+        // Also handle any data-close-preview buttons
+        const dataCloseButton = previewModal.querySelector('[data-close-preview]');
+        if (dataCloseButton) {
+            dataCloseButton.addEventListener('click', function(e) {
+                e.stopPropagation();
+                window.closePreviewModal();
+            });
+        }
+    }
+
+    // Close modal on Escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            window.closePreviewModal();
+        }
+    });
+}
+
+// Regex Management Functions
+function initRegexManagement() {
+    window.deleteRegex = function(id, deleteUrl) {
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+
+        fetch(deleteUrl + '?id=' + id, {
+            method: 'GET',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': csrfToken
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                const row = document.getElementById('row-' + id);
+                if (row) {
+                    row.style.transition = 'opacity 0.3s';
+                    row.style.opacity = '0';
+                    setTimeout(() => row.remove(), 300);
+                }
+                showMessage('Regex deleted successfully', 'success');
+            } else {
+                showMessage('Error deleting regex', 'error');
+            }
+        })
+        .catch(error => {
+            showMessage('Error deleting regex', 'error');
+            console.error('Error:', error);
+        });
+    };
+
+    window.showMessage = function(message, type = 'success') {
+        const messageDiv = document.getElementById('message');
+        if (!messageDiv) return;
+
+        const bgColor = type === 'success' ? 'bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-700' : 'bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-700';
+        const textColor = type === 'success' ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200';
+        const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
+
+        const messageEl = document.createElement('div');
+        messageEl.className = 'mt-4 p-4 border rounded-lg ' + bgColor;
+        messageEl.innerHTML = `
+            <div class="flex items-center justify-between">
+                <p class="${textColor}">
+                    <i class="fa fa-${icon} mr-2"></i>${escapeHtml(message)}
+                </p>
+                <button type="button" class="${textColor} hover:opacity-75 close-message">
+                    <i class="fa fa-times"></i>
+                </button>
+            </div>
+        `;
+
+        messageDiv.appendChild(messageEl);
+
+        // Add close handler
+        messageEl.querySelector('.close-message').addEventListener('click', function() {
+            messageEl.remove();
+        });
+
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            messageEl.remove();
+        }, 5000);
+    };
+
+    // Handle delete buttons with proper confirmation
+    document.addEventListener('click', function(e) {
+        if (e.target.hasAttribute('data-delete-regex') || e.target.closest('[data-delete-regex]')) {
+            const element = e.target.hasAttribute('data-delete-regex') ? e.target : e.target.closest('[data-delete-regex]');
+            const id = element.getAttribute('data-delete-regex');
+            const deleteUrl = element.getAttribute('data-delete-url');
+
+            if (confirm('Are you sure you want to delete this regex? This action cannot be undone.')) {
+                deleteRegex(id, deleteUrl);
+            }
+            e.preventDefault();
+        }
+    });
+}
+
+// Mediainfo and Filelist Modals
+function initMediainfoAndFilelist() {
+    window.closeMediainfoModal = function() {
+        const modal = document.getElementById('mediainfoModal');
+        if (modal) {
+            modal.style.display = 'none';
+        }
+    };
+
+    window.closeFilelistModal = function() {
+        const modal = document.getElementById('filelistModal');
+        if (modal) {
+            modal.style.display = 'none';
+        }
+    };
+
+    window.formatFileSize = function(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    };
+
+    window.showFilelist = function(guid) {
+        let modal = document.getElementById('filelistModal');
+        if (modal && modal.parentElement !== document.body) {
+            document.body.appendChild(modal);
+        }
+
+        const content = document.getElementById('filelistContent');
+        modal.style.display = 'flex';
+        modal.style.position = 'fixed';
+        modal.style.top = '0';
+        modal.style.left = '0';
+        modal.style.right = '0';
+        modal.style.bottom = '0';
+        modal.style.zIndex = '99999';
+        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
+
+        content.innerHTML = `
+            <div class="text-center py-8">
+                <i class="fas fa-spinner fa-spin text-3xl text-green-600"></i>
+                <p class="text-gray-600 dark:text-gray-400 mt-2">Loading file list...</p>
+            </div>
+        `;
+
+        const apiUrl = '/api/release/' + guid + '/filelist';
+
+        fetch(apiUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to load file list');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (!data.files || data.files.length === 0) {
+                    content.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-8">No files available</p>';
+                    return;
+                }
+
+                let html = '<div class="space-y-4">';
+                html += `
+                    <div class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-lg p-4 mb-4">
+                        <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-2">${escapeHtml(data.release.searchname)}</h4>
+                        <p class="text-sm text-gray-600 dark:text-gray-400">Total Files: ${data.total}</p>
+                    </div>
+                `;
+
+                html += `
+                    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                            <thead class="bg-gray-100 dark:bg-gray-800">
+                                <tr>
+                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">File Name</th>
+                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Size</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                `;
+
+                data.files.forEach((file, index) => {
+                    const rowClass = index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900';
+                    const fileName = file.title || file.name || 'Unknown';
+                    const fileSize = file.size ? formatFileSize(file.size) : 'N/A';
+
+                    html += `
+                        <tr class="${rowClass} hover:bg-gray-100 dark:hover:bg-gray-700">
+                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 break-all">${escapeHtml(fileName)}</td>
+                            <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">${fileSize}</td>
+                        </tr>
+                    `;
+                });
+
+                html += `
+                            </tbody>
+                        </table>
+                    </div>
+                `;
+
+                html += '</div>';
+                content.innerHTML = html;
+            })
+            .catch(error => {
+                content.innerHTML = `
+                    <div class="text-center py-8">
+                        <i class="fas fa-exclamation-circle text-3xl text-red-600"></i>
+                        <p class="text-red-600 mt-2">${escapeHtml(error.message)}</p>
+                    </div>
+                `;
+            });
+    };
+
+    window.showMediainfo = function(releaseId) {
+        let modal = document.getElementById('mediainfoModal');
+
+        if (modal && modal.parentElement !== document.body) {
+            document.body.appendChild(modal);
+        }
+
+        const content = document.getElementById('mediainfoContent');
+
+        modal.style.display = 'flex';
+        modal.style.position = 'fixed';
+        modal.style.top = '0';
+        modal.style.left = '0';
+        modal.style.right = '0';
+        modal.style.bottom = '0';
+        modal.style.zIndex = '99999';
+        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
+
+        content.innerHTML = `
+            <div class="text-center py-8">
+                <i class="fas fa-spinner fa-spin text-3xl text-blue-600"></i>
+                <p class="text-gray-600 dark:text-gray-400 mt-2">Loading media information...</p>
+            </div>
+        `;
+
+        const apiUrl = '/api/release/' + releaseId + '/mediainfo';
+
+        fetch(apiUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to load media information');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (!data.video && !data.audio && !data.subs) {
+                    content.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-8">No media information available</p>';
+                    return;
+                }
+
+                let html = '<div class="space-y-6">';
+
+                // Video information
+                if (data.video) {
+                    html += `
+                        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900 dark:to-indigo-900 rounded-lg p-4">
+                            <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+                                <i class="fas fa-video mr-2 text-blue-600 dark:text-blue-400"></i> Video Information
+                            </h4>
+                            <dl class="grid grid-cols-2 gap-3">
+                    `;
+
+                    if (data.video.containerformat) {
+                        html += `
+                            <div>
+                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Container</dt>
+                                <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.containerformat)}</dd>
+                            </div>
+                        `;
+                    }
+                    if (data.video.videocodec) {
+                        html += `
+                            <div>
+                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Codec</dt>
+                                <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.videocodec)}</dd>
+                            </div>
+                        `;
+                    }
+                    if (data.video.videowidth && data.video.videoheight) {
+                        html += `
+                            <div>
+                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Resolution</dt>
+                                <dd class="text-sm text-gray-900 dark:text-gray-100">${data.video.videowidth}x${data.video.videoheight}</dd>
+                            </div>
+                        `;
+                    }
+                    if (data.video.videoaspect) {
+                        html += `
+                            <div>
+                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Aspect Ratio</dt>
+                                <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.videoaspect)}</dd>
+                            </div>
+                        `;
+                    }
+                    if (data.video.videoframerate) {
+                        html += `
+                            <div>
+                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Frame Rate</dt>
+                                <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.videoframerate)} fps</dd>
+                            </div>
+                        `;
+                    }
+                    if (data.video.videoduration) {
+                        const durationMs = parseInt(data.video.videoduration);
+                        if (!isNaN(durationMs) && durationMs > 0) {
+                            const minutes = Math.round(durationMs / 1000 / 60);
+                            html += `
+                                <div>
+                                    <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Duration</dt>
+                                    <dd class="text-sm text-gray-900 dark:text-gray-100">${minutes} minutes</dd>
+                                </div>
+                            `;
+                        }
+                    }
+
+                    html += '</dl></div>';
+                }
+
+                // Audio information
+                if (data.audio && data.audio.length > 0) {
+                    html += `
+                        <div class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-lg p-4">
+                            <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+                                <i class="fas fa-volume-up mr-2 text-green-600 dark:text-green-400"></i> Audio Information
+                            </h4>
+                    `;
+
+                    data.audio.forEach((audio, index) => {
+                        if (index > 0) html += '<hr class="my-3 border-gray-200 dark:border-gray-700">';
+                        html += '<dl class="grid grid-cols-2 gap-3">';
+
+                        if (audio.audioformat) {
+                            html += `
+                                <div>
+                                    <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Format</dt>
+                                    <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audioformat)}</dd>
+                                </div>
+                            `;
+                        }
+                        if (audio.audiochannels) {
+                            html += `
+                                <div>
+                                    <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Channels</dt>
+                                    <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiochannels)}</dd>
+                                </div>
+                            `;
+                        }
+                        if (audio.audiobitrate) {
+                            html += `
+                                <div>
+                                    <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Bit Rate</dt>
+                                    <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiobitrate)}</dd>
+                                </div>
+                            `;
+                        }
+                        if (audio.audiolanguage) {
+                            html += `
+                                <div>
+                                    <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Language</dt>
+                                    <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiolanguage)}</dd>
+                                </div>
+                            `;
+                        }
+                        if (audio.audiosamplerate) {
+                            html += `
+                                <div>
+                                    <dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Sample Rate</dt>
+                                    <dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiosamplerate)}</dd>
+                                </div>
+                            `;
+                        }
+
+                        html += '</dl>';
+                    });
+
+                    html += '</div>';
+                }
+
+                // Subtitle information
+                if (data.subs) {
+                    html += `
+                        <div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900 dark:to-pink-900 rounded-lg p-4">
+                            <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+                                <i class="fas fa-closed-captioning mr-2 text-purple-600 dark:text-purple-400"></i> Subtitles
+                            </h4>
+                            <p class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.subs)}</p>
+                        </div>
+                    `;
+                }
+
+                html += '</div>';
+                content.innerHTML = html;
+            })
+            .catch(error => {
+                content.innerHTML = `
+                    <div class="text-center py-8">
+                        <i class="fas fa-exclamation-circle text-3xl text-red-600"></i>
+                        <p class="text-red-600 mt-2">${escapeHtml(error.message)}</p>
+                    </div>
+                `;
+            });
+    };
+
+    // Event handlers for badges and modals
+    document.addEventListener('click', function(e) {
+        // Preview badge
+        const previewBadge = e.target.closest('.preview-badge');
+        if (previewBadge) {
+            e.preventDefault();
+            const guid = previewBadge.dataset.guid;
+            if (typeof showPreviewImage === 'function') {
+                showPreviewImage(guid, 'preview');
+            }
+        }
+
+        // Sample badge
+        const sampleBadge = e.target.closest('.sample-badge');
+        if (sampleBadge) {
+            e.preventDefault();
+            const guid = sampleBadge.dataset.guid;
+            if (typeof showPreviewImage === 'function') {
+                showPreviewImage(guid, 'sample');
+            }
+        }
+
+        // Mediainfo badge
+        const mediainfoBadge = e.target.closest('.mediainfo-badge');
+        if (mediainfoBadge) {
+            e.preventDefault();
+            const releaseId = mediainfoBadge.dataset.releaseId;
+            showMediainfo(releaseId);
+        }
+
+        // File list badge
+        const filelistBadge = e.target.closest('.filelist-badge');
+        if (filelistBadge) {
+            e.preventDefault();
+            const guid = filelistBadge.dataset.guid;
+            showFilelist(guid);
+        }
+    });
+
+    // Close modals on background click
+    const previewModal = document.getElementById('previewModal');
+    if (previewModal) {
+        previewModal.addEventListener('click', function(e) {
+            if (e.target === this && typeof closePreviewModal === 'function') {
+                closePreviewModal();
+            }
+        });
+    }
+
+    const mediainfoModal = document.getElementById('mediainfoModal');
+    if (mediainfoModal) {
+        mediainfoModal.addEventListener('click', function(e) {
+            // Close if clicking the backdrop OR the close button
+            if (e.target === this || e.target.closest('[onclick*="closeMediainfoModal"]')) {
+                closeMediainfoModal();
+            }
+        });
+    }
+
+    const filelistModal = document.getElementById('filelistModal');
+    if (filelistModal) {
+        filelistModal.addEventListener('click', function(e) {
+            // Close if clicking the backdrop OR the close button
+            if (e.target === this || e.target.closest('[onclick*="closeFilelistModal"]')) {
+                closeFilelistModal();
+            }
+        });
+    }
+
+    // Close modals on ESC key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            if (typeof closePreviewModal === 'function') closePreviewModal();
+            closeMediainfoModal();
+            closeFilelistModal();
+        }
+    });
+}
+
+// Cart and Multi-select functionality
+function initCartFunctionality() {
+    // Select all checkbox functionality
+    const selectAllCheckbox = document.getElementById('chkSelectAll');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.addEventListener('change', function() {
+            const checkboxes = document.querySelectorAll('.chkRelease');
+            checkboxes.forEach(checkbox => checkbox.checked = this.checked);
+        });
+    }
+
+    // Multi-operations download
+    const multiDownloadBtn = document.querySelector('.nzb_multi_operations_download');
+    if (multiDownloadBtn) {
+        multiDownloadBtn.addEventListener('click', function() {
+            const selected = Array.from(document.querySelectorAll('.chkRelease:checked')).map(cb => cb.value);
+            if (selected.length === 0) {
+                if (typeof showToast === 'function') {
+                    showToast('Please select at least one release', 'error');
+                }
+                return;
+            }
+
+            // If only one release is selected, download it directly
+            if (selected.length === 1) {
+                window.location.href = '/getnzb/' + selected[0];
+                if (typeof showToast === 'function') {
+                    showToast('Downloading NZB...', 'success');
+                }
+            } else {
+                // For multiple releases, download as zip
+                const guids = selected.join(',');
+                window.location.href = '/getnzb?id=' + encodeURIComponent(guids) + '&zip=1';
+                if (typeof showToast === 'function') {
+                    showToast(`Downloading ${selected.length} NZBs as zip file...`, 'success');
+                }
+            }
+        });
+    }
+
+    // Multi-operations cart
+    const multiCartBtn = document.querySelector('.nzb_multi_operations_cart');
+    if (multiCartBtn) {
+        multiCartBtn.addEventListener('click', function() {
+            const selected = Array.from(document.querySelectorAll('.chkRelease:checked')).map(cb => cb.value);
+            if (selected.length === 0) {
+                if (typeof showToast === 'function') {
+                    showToast('Please select at least one release', 'error');
+                }
+                return;
+            }
+
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: JSON.stringify({ id: selected.join(',') })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    if (typeof showToast === 'function') {
+                        showToast(data.message || `Added ${selected.length} item${selected.length > 1 ? 's' : ''} to cart`, 'success');
+                    }
+                } else {
+                    if (typeof showToast === 'function') {
+                        showToast('Failed to add items to cart', 'error');
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error adding to cart:', error);
+                if (typeof showToast === 'function') {
+                    showToast('An error occurred', 'error');
+                }
+            });
+        });
+    }
+
+    // Individual add to cart buttons
+    document.addEventListener('click', function(e) {
+        const cartBtn = e.target.closest('.add-to-cart');
+
+        if (cartBtn) {
+            e.preventDefault();
+
+            const guid = cartBtn.dataset.guid;
+            const iconElement = cartBtn.querySelector('.icon_cart');
+
+            if (!guid) {
+                console.error('No GUID found for cart item');
+                return;
+            }
+
+            // Prevent double-clicking
+            if (iconElement && iconElement.classList.contains('icon_cart_clicked')) {
+                return;
+            }
+
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+
+            // Send AJAX request to add item to cart
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: JSON.stringify({ id: guid })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Visual feedback
+                    if (iconElement) {
+                        iconElement.classList.remove('fa-shopping-basket');
+                        iconElement.classList.add('fa-check', 'icon_cart_clicked');
+
+                        // Reset icon after 2 seconds
+                        setTimeout(() => {
+                            iconElement.classList.remove('fa-check', 'icon_cart_clicked');
+                            iconElement.classList.add('fa-shopping-basket');
+                        }, 2000);
+                    }
+
+                    // Show success notification
+                    if (typeof showToast === 'function') {
+                        showToast('Added to cart successfully!', 'success');
+                    }
+                } else {
+                    if (typeof showToast === 'function') {
+                        showToast('Failed to add item to cart', 'error');
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error adding to cart:', error);
+                if (typeof showToast === 'function') {
+                    showToast('An error occurred', 'error');
+                }
+            });
+        }
+    });
+}
+
+// Admin Menu Toggle
+function initAdminMenu() {
+    window.toggleAdminSubmenu = function(id) {
+        const submenu = document.getElementById(id);
+        const icon = document.getElementById(id + '-icon');
+        if (submenu) {
+            submenu.classList.toggle('hidden');
+        }
+        if (icon) {
+            icon.classList.toggle('rotate-180');
+        }
+    };
+
+    // Add click handlers for admin menu buttons
+    document.addEventListener('click', function(e) {
+        const menuButton = e.target.closest('[data-toggle-submenu]');
+        if (menuButton) {
+            const menuId = menuButton.getAttribute('data-toggle-submenu');
+            if (menuId) {
+                toggleAdminSubmenu(menuId);
+            }
+        }
+    });
+
+    // Theme management with system preference support for admin panel
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const themeToggle = document.getElementById('theme-toggle');
+
+    if (themeToggle) {
+        // Get initial theme preference
+        const metaTheme = document.querySelector('meta[name="theme-preference"]');
+        const isAuthenticated = document.querySelector('meta[name="user-authenticated"]');
+        let currentTheme = metaTheme ? metaTheme.content : 'light';
+
+        if (!isAuthenticated || isAuthenticated.content !== 'true') {
+            currentTheme = localStorage.getItem('theme') || 'light';
+        }
+
+        // Function to apply theme
+        function applyTheme(themePreference) {
+            const html = document.documentElement;
+
+            if (themePreference === 'system') {
+                if (mediaQuery.matches) {
+                    html.classList.add('dark');
+                } else {
+                    html.classList.remove('dark');
+                }
+            } else if (themePreference === 'dark') {
+                html.classList.add('dark');
+            } else {
+                html.classList.remove('dark');
+            }
+        }
+
+        // Apply initial theme
+        applyTheme(currentTheme);
+
+        // Listen for OS theme changes
+        mediaQuery.addEventListener('change', () => {
+            const userThemePreference = metaTheme ? metaTheme.content : localStorage.getItem('theme') || 'light';
+            if (userThemePreference === 'system') {
+                applyTheme('system');
+            }
+        });
+
+        // Theme toggle click handler - cycles through light -> dark -> system
+        themeToggle.addEventListener('click', function() {
+            let nextTheme;
+
+            // Cycle through: light -> dark -> system -> light
+            if (currentTheme === 'light') {
+                nextTheme = 'dark';
+            } else if (currentTheme === 'dark') {
+                nextTheme = 'system';
+            } else {
+                nextTheme = 'light';
+            }
+
+            applyTheme(nextTheme);
+
+            // Update button title
+            const titles = {
+                'light': 'Theme: Light',
+                'dark': 'Theme: Dark',
+                'system': 'Theme: System (Auto)'
+            };
+            this.setAttribute('title', titles[nextTheme]);
+
+            // Save theme preference
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+            const updateThemeUrl = document.querySelector('meta[name="update-theme-url"]')?.content;
+
+            if (isAuthenticated && isAuthenticated.content === 'true' && updateThemeUrl && csrfToken) {
+                // Save to backend for authenticated users
+                fetch(updateThemeUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    },
+                    body: JSON.stringify({ theme_preference: nextTheme })
+                }).then(response => response.json())
+                  .then(data => {
+                      if (data.success) {
+                          currentTheme = nextTheme;
+                          if (metaTheme) {
+                              metaTheme.content = nextTheme;
+                          }
+                      }
+                  })
+                  .catch(error => console.error('Error updating theme:', error));
+            } else {
+                // Save to localStorage for guests
+                localStorage.setItem('theme', nextTheme);
+                currentTheme = nextTheme;
+            }
+        });
+    }
+}
+
+// Sidebar Toggle functionality for regular user sidebar
+function initSidebarToggle() {
+    const sidebarToggles = document.querySelectorAll('.sidebar-toggle');
+
+    sidebarToggles.forEach(toggle => {
+        toggle.addEventListener('click', function() {
+            const targetId = this.getAttribute('data-target');
+            const submenu = document.getElementById(targetId);
+            const chevron = this.querySelector('.fa-chevron-down');
+
+            if (submenu) {
+                submenu.classList.toggle('hidden');
+                if (chevron) {
+                    chevron.classList.toggle('rotate-180');
+                }
+            }
+        });
+    });
+
+    // Handle logout link in sidebar
+    const sidebarLogoutLink = document.querySelector('[data-logout]');
+    const sidebarLogoutForm = document.getElementById('sidebar-logout-form');
+
+    if (sidebarLogoutLink && sidebarLogoutForm) {
+        sidebarLogoutLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            sidebarLogoutForm.submit();
+        });
+    }
+}
+
+// Dropdown Menus for Header Navigation
+function initDropdownMenus() {
+    document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
+        toggle.addEventListener('click', function(e) {
+            e.preventDefault();
+            const menu = this.nextElementSibling;
+            if (menu && menu.classList.contains('dropdown-menu')) {
+                // Close all other dropdowns
+                document.querySelectorAll('.dropdown-menu').forEach(function(m) {
+                    if (m !== menu) {
+                        m.classList.remove('show');
+                        m.style.display = 'none';
+                    }
+                });
+
+                // Toggle this dropdown
+                menu.classList.toggle('show');
+                menu.style.display = menu.classList.contains('show') ? 'block' : 'none';
+            }
+        });
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', function(e) {
+        if (!e.target.closest('.dropdown-toggle') && !e.target.closest('.dropdown-menu')) {
+            document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
+                menu.classList.remove('show');
+                menu.style.display = 'none';
+            });
+        }
+    });
+}
+
+// Image Fallbacks
+function initImageFallbacks() {
+    // Handle images with data-fallback-src attribute
+    document.querySelectorAll('img[data-fallback-src]').forEach(function(img) {
+        img.addEventListener('error', function() {
+            const fallbackSrc = this.getAttribute('data-fallback-src');
+            if (fallbackSrc && this.src !== fallbackSrc) {
+                this.src = fallbackSrc;
+            }
+        });
+    });
+}
+
+// Profile Page Tab Switching
+function initProfileTabs() {
+    const tabLinks = document.querySelectorAll('.tab-link');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    if (tabLinks.length === 0 || tabContents.length === 0) {
+        return; // Not on a page with tabs
+    }
+
+    tabLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href').substring(1);
+
+            // Update active states on tab links
+            tabLinks.forEach(l => {
+                l.classList.remove('bg-blue-50', 'text-blue-700', 'font-medium');
+                l.classList.add('text-gray-700');
+                l.classList.add('dark:text-gray-300');
+            });
+            this.classList.add('bg-blue-50', 'text-blue-700', 'font-medium');
+            this.classList.remove('text-gray-700', 'dark:text-gray-300');
+
+            // Hide all tab contents
+            tabContents.forEach(content => {
+                content.style.display = 'none';
+            });
+
+            // Show selected tab content
+            const targetContent = document.getElementById(targetId);
+            if (targetContent) {
+                targetContent.style.display = 'block';
+            }
+
+            // Update URL hash without scrolling
+            history.pushState(null, null, '#' + targetId);
+        });
+    });
+
+    // Handle initial hash
+    const hash = window.location.hash.substring(1);
+    if (hash && document.getElementById(hash)) {
+        const link = document.querySelector(`a[href="#${hash}"]`);
+        if (link) {
+            link.click();
+        }
+    }
+}
+
+// Add to Cart function (standalone for backward compatibility)
+window.addToCart = function(guid) {
+    if (!guid) {
+        console.error('No GUID provided to addToCart');
+        return;
+    }
+
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+
+    fetch('/cart/add', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken,
+            'X-Requested-With': 'XMLHttpRequest'
+        },
+        body: JSON.stringify({ id: guid })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            if (typeof showToast === 'function') {
+                showToast('Added to cart successfully!', 'success');
+            }
+        } else {
+            if (typeof showToast === 'function') {
+                showToast('Failed to add item to cart', 'error');
+            }
+        }
+    })
+    .catch(error => {
+        console.error('Error adding to cart:', error);
+        if (typeof showToast === 'function') {
+            showToast('An error occurred', 'error');
+        }
+    });
+};
+
+// Admin User Edit - Role Expiry DateTime Picker
+function initAdminUserEdit() {
+    // Only run if we're on the admin user edit page
+    if (!document.getElementById('rolechangedate')) {
+        return;
+    }
+
+    initializeDateTimePicker();
+    setupTypeToSelect();
+    setupExpiryDateHandlers();
+}
+
+// Initialize the datetime picker with existing values
+function initializeDateTimePicker() {
+    const hiddenInput = document.getElementById('rolechangedate');
+    if (!hiddenInput) return;
+
+    if (hiddenInput.value) {
+        const date = new Date(hiddenInput.value);
+        if (!isNaN(date.getTime())) {
+            document.getElementById('expiry_year').value = date.getFullYear().toString();
+            document.getElementById('expiry_month').value = String(date.getMonth() + 1).padStart(2, '0');
+            document.getElementById('expiry_day').value = String(date.getDate()).padStart(2, '0');
+            document.getElementById('expiry_hour').value = String(date.getHours()).padStart(2, '0');
+            document.getElementById('expiry_minute').value = String(date.getMinutes()).padStart(2, '0');
+            updateDateTimePreview();
+        }
+    }
+
+    // Add change listeners to all selectors
+    ['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
+        const element = document.getElementById(id);
+        if (element) {
+            element.addEventListener('change', updateDateTime);
+        }
+    });
+}
+
+// Setup type-to-select functionality for all dropdowns
+function setupTypeToSelect() {
+    const selects = ['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'];
+
+    selects.forEach(selectId => {
+        const select = document.getElementById(selectId);
+        if (!select) return;
+
+        let typedValue = '';
+        let typingTimer;
+
+        select.addEventListener('keypress', function(e) {
+            clearTimeout(typingTimer);
+
+            // Add typed character
+            typedValue += e.key;
+
+            // Find matching option
+            const options = Array.from(this.options);
+            const match = options.find(opt =>
+                opt.value.startsWith(typedValue) ||
+                opt.text.toLowerCase().startsWith(typedValue.toLowerCase())
+            );
+
+            if (match) {
+                this.value = match.value;
+                updateDateTime();
+
+                // Visual feedback
+                this.classList.add('ring-2', 'ring-green-500', 'dark:ring-green-400');
+                setTimeout(() => {
+                    this.classList.remove('ring-2', 'ring-green-500', 'dark:ring-green-400');
+                }, 300);
+            }
+
+            // Clear typed value after 1 second
+            typingTimer = setTimeout(() => {
+                typedValue = '';
+            }, 1000);
+        });
+    });
+}
+
+// Update the hidden input and preview when any selector changes
+function updateDateTime() {
+    const year = document.getElementById('expiry_year')?.value;
+    const month = document.getElementById('expiry_month')?.value;
+    const day = document.getElementById('expiry_day')?.value;
+    const hour = document.getElementById('expiry_hour')?.value;
+    const minute = document.getElementById('expiry_minute')?.value;
+
+    if (year && month && day && hour && minute) {
+        const dateTimeStr = `${year}-${month}-${day}T${hour}:${minute}:00`;
+        document.getElementById('rolechangedate').value = dateTimeStr;
+        updateDateTimePreview();
+
+        // Show success flash on all filled selectors
+        ['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
+            const el = document.getElementById(id);
+            if (el && el.value) {
+                el.classList.add('border-green-500', 'dark:border-green-400');
+                setTimeout(() => {
+                    el.classList.remove('border-green-500', 'dark:border-green-400');
+                }, 500);
+            }
+        });
+    } else {
+        const preview = document.getElementById('datetime_preview');
+        if (preview) {
+            preview.classList.add('hidden');
+        }
+    }
+}
+
+// Update the datetime preview display
+function updateDateTimePreview() {
+    const hiddenInput = document.getElementById('rolechangedate');
+    const preview = document.getElementById('datetime_preview');
+    const display = document.getElementById('datetime_display');
+
+    if (!hiddenInput || !preview || !display) return;
+
+    if (hiddenInput.value) {
+        const date = new Date(hiddenInput.value);
+        const options = {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        };
+        display.textContent = date.toLocaleDateString('en-US', options);
+        preview.classList.remove('hidden');
+
+        // Check if date is in past or expiring soon
+        const now = new Date();
+        const diff = date - now;
+        if (diff < 0) {
+            display.classList.add('text-red-600', 'dark:text-red-400');
+            display.classList.remove('text-blue-600', 'dark:text-blue-400', 'text-yellow-600', 'dark:text-yellow-400');
+        } else if (diff < 7 * 24 * 60 * 60 * 1000) {
+            display.classList.add('text-yellow-600', 'dark:text-yellow-400');
+            display.classList.remove('text-blue-600', 'dark:text-blue-400', 'text-red-600', 'dark:text-red-400');
+        } else {
+            display.classList.add('text-blue-600', 'dark:text-blue-400');
+            display.classList.remove('text-red-600', 'dark:text-red-400', 'text-yellow-600', 'dark:text-yellow-400');
+        }
+    } else {
+        preview.classList.add('hidden');
+    }
+}
+
+// Setup event handlers for expiry date quick actions
+function setupExpiryDateHandlers() {
+    // Event delegation for all expiry date buttons
+    document.addEventListener('click', function(e) {
+        const target = e.target.closest('[data-expiry-action]');
+        if (!target) return;
+
+        e.preventDefault();
+        const action = target.getAttribute('data-expiry-action');
+        const days = parseInt(target.getAttribute('data-days') || '0', 10);
+        const hours = parseInt(target.getAttribute('data-hours') || '0', 10);
+
+        if (action === 'set') {
+            setExpiryDateTime(days, hours);
+        } else if (action === 'end-of-day') {
+            setEndOfDay();
+        } else if (action === 'clear') {
+            clearExpiryDate();
+        }
+    });
+}
+
+// Function to set expiry date and time by adding days and hours (stackable)
+function setExpiryDateTime(days, hours) {
+    let baseDate;
+
+    // Check if there's already a selected datetime
+    const year = document.getElementById('expiry_year')?.value;
+    const month = document.getElementById('expiry_month')?.value;
+    const day = document.getElementById('expiry_day')?.value;
+    const hour = document.getElementById('expiry_hour')?.value;
+    const minute = document.getElementById('expiry_minute')?.value;
+
+    if (year && month && day && hour && minute) {
+        // Use existing selected datetime as base
+        baseDate = new Date(year, parseInt(month) - 1, day, hour, minute);
+        showExpiryToast('Added ' + (days > 0 ? days + ' day' + (days !== 1 ? 's' : '') : '') + (days > 0 && hours > 0 ? ' and ' : '') + (hours > 0 ? hours + ' hour' + (hours !== 1 ? 's' : '') : ''), 'info');
+    } else {
+        // Start from current time
+        baseDate = new Date();
+        showExpiryToast('Expiry date set to ' + formatDateTimeForDisplay(baseDate), 'success');
+    }
+
+    // Add the days and hours
+    baseDate.setDate(baseDate.getDate() + days);
+    baseDate.setHours(baseDate.getHours() + hours);
+
+    // Update all selectors
+    document.getElementById('expiry_year').value = baseDate.getFullYear().toString();
+    document.getElementById('expiry_month').value = String(baseDate.getMonth() + 1).padStart(2, '0');
+    document.getElementById('expiry_day').value = String(baseDate.getDate()).padStart(2, '0');
+    document.getElementById('expiry_hour').value = String(baseDate.getHours()).padStart(2, '0');
+    document.getElementById('expiry_minute').value = String(baseDate.getMinutes()).padStart(2, '0');
+
+    updateDateTime();
+
+    // Add animated visual feedback
+    ['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.classList.add('ring-2', 'ring-green-500', 'dark:ring-green-400', 'scale-105');
+            setTimeout(() => {
+                el.classList.remove('ring-2', 'ring-green-500', 'dark:ring-green-400', 'scale-105');
+            }, 600);
+        }
+    });
+}
+
+// Function to set expiry to end of current day (23:59)
+function setEndOfDay() {
+    const endOfDay = new Date();
+    endOfDay.setHours(23, 59, 0, 0);
+
+    document.getElementById('expiry_year').value = endOfDay.getFullYear().toString();
+    document.getElementById('expiry_month').value = String(endOfDay.getMonth() + 1).padStart(2, '0');
+    document.getElementById('expiry_day').value = String(endOfDay.getDate()).padStart(2, '0');
+    document.getElementById('expiry_hour').value = '23';
+    document.getElementById('expiry_minute').value = '55';
+
+    updateDateTime();
+
+    ['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.classList.add('ring-2', 'ring-indigo-500', 'dark:ring-indigo-400', 'scale-105');
+            setTimeout(() => {
+                el.classList.remove('ring-2', 'ring-indigo-500', 'dark:ring-indigo-400', 'scale-105');
+            }, 600);
+        }
+    });
+
+    showExpiryToast('Expiry set to end of today (23:59)', 'info');
+}
+
+// Function to clear expiry date
+function clearExpiryDate() {
+    document.getElementById('expiry_year').value = '';
+    document.getElementById('expiry_month').value = '';
+    document.getElementById('expiry_day').value = '';
+    document.getElementById('expiry_hour').value = '';
+    document.getElementById('expiry_minute').value = '';
+    document.getElementById('rolechangedate').value = '';
+    const preview = document.getElementById('datetime_preview');
+    if (preview) {
+        preview.classList.add('hidden');
+    }
+
+    // Add a visual feedback with gray pulse
+    ['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.classList.add('ring-2', 'ring-gray-500', 'dark:ring-gray-400', 'scale-105');
+            setTimeout(() => {
+                el.classList.remove('ring-2', 'ring-gray-500', 'dark:ring-gray-400', 'scale-105');
+            }, 600);
+        }
+    });
+
+    showExpiryToast('Expiry date cleared - role is now permanent', 'info');
+}
+
+// Format date for display
+function formatDateTimeForDisplay(date) {
+    const options = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+    return date.toLocaleDateString('en-US', options);
+}
+
+// Show toast notification specific to expiry date changes
+function showExpiryToast(message, type) {
+    type = type || 'success';
+
+    // Remove existing toast if any
+    const existingToast = document.getElementById('expiryToast');
+    if (existingToast) {
+        existingToast.remove();
+    }
+
+    // Create toast
+    const toast = document.createElement('div');
+    toast.id = 'expiryToast';
+    toast.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg flex items-center gap-2 z-50 transform transition-all duration-300 translate-y-0 opacity-100';
+
+    if (type === 'success') {
+        toast.classList.add('bg-green-500', 'dark:bg-green-600', 'text-white');
+        toast.innerHTML = '<i class="fa fa-check-circle"></i><span>' + escapeHtml(message) + '</span>';
+    } else if (type === 'info') {
+        toast.classList.add('bg-blue-500', 'dark:bg-blue-600', 'text-white');
+        toast.innerHTML = '<i class="fa fa-info-circle"></i><span>' + escapeHtml(message) + '</span>';
+    }
+
+    document.body.appendChild(toast);
+
+    // Animate in
+    setTimeout(() => {
+        toast.style.transform = 'translateY(0)';
+        toast.style.opacity = '1';
+    }, 10);
+
+    // Remove after 3 seconds with fade out
+    setTimeout(() => {
+        toast.style.transform = 'translateY(20px)';
+        toast.style.opacity = '0';
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+// Utility function to escape HTML
+function escapeHtml(text) {
+    // Handle non-string values
+    if (text === null || text === undefined) {
+        return '';
+    }
+    // Convert to string if it's not already
+    if (typeof text !== 'string') {
+        text = String(text);
+    }
+
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
+}
+
+// TinyMCE Initialization for Admin Content Pages
+function initTinyMCE() {
+    // Only initialize if TinyMCE editor element exists
+    if (!document.getElementById('body')) {
+        return;
+    }
+
+    // Function to dynamically load TinyMCE from CDN
+    function loadTinyMCEScript() {
+        return new Promise(function(resolve, reject) {
+            // Check if already loaded
+            if (typeof tinymce !== 'undefined') {
+                resolve();
+                return;
+            }
+
+            // Get API key from textarea data attribute or create meta tag
+            const bodyTextarea = document.getElementById('body');
+            let apiKey = 'no-api-key';
+
+            // Try to get from existing meta tag first
+            let apiKeyMeta = document.querySelector('meta[name="tinymce-api-key"]');
+
+            if (!apiKeyMeta) {
+                // Create meta tag dynamically if it doesn't exist
+                // Get API key from window config or use default
+                if (window.NNTmuxConfig && window.NNTmuxConfig.tinymceApiKey) {
+                    apiKey = window.NNTmuxConfig.tinymceApiKey;
+                } else if (bodyTextarea && bodyTextarea.dataset.tinymceApiKey) {
+                    apiKey = bodyTextarea.dataset.tinymceApiKey;
+                }
+
+                // Create and append meta tag
+                apiKeyMeta = document.createElement('meta');
+                apiKeyMeta.setAttribute('name', 'tinymce-api-key');
+                apiKeyMeta.setAttribute('content', apiKey);
+                document.head.appendChild(apiKeyMeta);
+            } else {
+                apiKey = apiKeyMeta.content;
+            }
+
+            // Create script element
+            const script = document.createElement('script');
+            script.src = 'https://cdn.tiny.cloud/1/' + apiKey + '/tinymce/8/tinymce.min.js';
+            script.referrerPolicy = 'origin';
+
+            script.onload = function() {
+                console.log('TinyMCE script loaded from CDN');
+                resolve();
+            };
+
+            script.onerror = function() {
+                console.error('Failed to load TinyMCE script from CDN');
+                reject(new Error('Failed to load TinyMCE'));
+            };
+
+            // Append to head
+            document.head.appendChild(script);
+        });
+    }
+
+    // Function to detect if dark mode is active
+    function isDarkMode() {
+        return document.documentElement.classList.contains('dark') ||
+               (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    }
+
+    // Function to get TinyMCE config
+    function getTinyMCEConfig() {
+        const darkMode = isDarkMode();
+        const apiKeyMeta = document.querySelector('meta[name="tinymce-api-key"]');
+        const apiKey = apiKeyMeta ? apiKeyMeta.content : 'no-api-key';
+
+        return {
+            selector: '#body',
+            height: 500,
+            menubar: true,
+            skin: darkMode ? 'oxide-dark' : 'oxide',
+            content_css: darkMode ? 'dark' : 'default',
+            plugins: [
+                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+                'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+                'insertdatetime', 'media', 'table', 'help', 'wordcount', 'emoticons'
+            ],
+            toolbar: 'undo redo | blocks fontfamily fontsize | ' +
+                'bold italic underline strikethrough | forecolor backcolor | ' +
+                'alignleft aligncenter alignright alignjustify | ' +
+                'bullist numlist outdent indent | ' +
+                'link image media table emoticons | ' +
+                'removeformat code fullscreen | help',
+            toolbar_mode: 'sliding',
+            content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; }',
+            branding: false,
+            promotion: false,
+            resize: true,
+            statusbar: true,
+            elementpath: true,
+            automatic_uploads: false,
+            file_picker_types: 'image',
+            font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; Georgia=georgia,palatino,serif; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times,serif; Verdana=verdana,geneva,sans-serif',
+            font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
+            autolink_pattern: /^(https?:\/\/|www\.|(?!www\.)[a-z0-9\-]+\.[a-z]{2,13})/i,
+            link_default_protocol: 'https',
+            link_assume_external_targets: true,
+            link_target_list: [
+                {title: 'None', value: ''},
+                {title: 'New window', value: '_blank'},
+                {title: 'Same window', value: '_self'}
+            ],
+            block_formats: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6; Preformatted=pre; Blockquote=blockquote',
+            valid_elements: '*[*]',
+            extended_valid_elements: '*[*]',
+            valid_children: '+body[style]',
+            paste_as_text: false,
+            paste_block_drop: false,
+            paste_data_images: true,
+            image_advtab: true,
+            image_caption: true,
+            image_description: true,
+            image_dimensions: true,
+            image_title: true,
+            table_default_attributes: {
+                border: '1'
+            },
+            table_default_styles: {
+                'border-collapse': 'collapse',
+                'width': '100%'
+            },
+            emoticons_database: 'emojis',
+            setup: function(editor) {
+                // Auto-save on content change
+                editor.on('change', function() {
+                    editor.save();
+                });
+                // Auto-save on blur (when editor loses focus)
+                editor.on('blur', function() {
+                    editor.save();
+                });
+                // Auto-save on keyup (for continuous saving)
+                editor.on('keyup', function() {
+                    editor.save();
+                });
+                // Save before form submission
+                editor.on('submit', function() {
+                    editor.save();
+                });
+            }
+        };
+    }
+
+    // Function to actually initialize TinyMCE once it's loaded
+    function doInitTinyMCE() {
+        // Initialize TinyMCE
+        tinymce.init(getTinyMCEConfig()).then(function(editors) {
+            if (editors && editors[0]) {
+                console.log('TinyMCE initialized successfully');
+
+                // Add form submission handler to sync content
+                const textarea = document.getElementById('body');
+                if (textarea && textarea.form) {
+                    textarea.form.addEventListener('submit', function(e) {
+                        // Sync all TinyMCE editors before form submission
+                        tinymce.triggerSave();
+                        console.log('TinyMCE content synced to textarea before form submission');
+                    });
+                }
+            }
+        }).catch(function(error) {
+            console.error('TinyMCE initialization failed:', error);
+        });
+
+        // Watch for theme changes and reinitialize TinyMCE
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'class') {
+                    const editor = tinymce.get('body');
+                    if (editor) {
+                        // Save current content
+                        const content = editor.getContent();
+                        // Remove the editor
+                        tinymce.remove('#body');
+                        // Reinitialize with new theme
+                        tinymce.init(getTinyMCEConfig()).then(function(editors) {
+                            // Restore content
+                            if (editors && editors[0]) {
+                                editors[0].setContent(content);
+                            }
+                        });
+                    }
+                }
+            });
+        });
+
+        // Start observing theme changes on the html element
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+    }
+
+    // Load TinyMCE script dynamically, then initialize
+    loadTinyMCEScript()
+        .then(function() {
+            console.log('TinyMCE available, initializing editor...');
+            doInitTinyMCE();
+        })
+        .catch(function(error) {
+            console.error('Failed to load TinyMCE:', error);
+            // Show error message to user
+            const bodyTextarea = document.getElementById('body');
+            if (bodyTextarea && bodyTextarea.parentElement) {
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'mt-2 p-3 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded';
+                errorDiv.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i>TinyMCE editor failed to load. Please refresh the page or check your internet connection.';
+                bodyTextarea.parentElement.insertBefore(errorDiv, bodyTextarea.nextSibling);
+            }
+        });
+}
+
+// Mobile Enhancements
+function initMobileEnhancements() {
+    // Create mobile sidebar overlay
+    createMobileSidebarOverlay();
+
+    // Enhanced mobile sidebar toggle
+    initMobileSidebarToggle();
+
+    // Mobile menu toggle in header
+    initMobileHeaderMenu();
+
+    // Touch-friendly improvements
+    initTouchEnhancements();
+
+    // Mobile table responsiveness
+    initMobileTableEnhancements();
+
+    // Prevent zoom on double tap for buttons
+    preventDoubleTapZoom();
+
+    // Optimize modals for mobile
+    optimizeModalsForMobile();
+}
+
+// Create overlay for mobile sidebar
+function createMobileSidebarOverlay() {
+    if (document.querySelector('.mobile-sidebar-overlay')) return;
+
+    const overlay = document.createElement('div');
+    overlay.className = 'mobile-sidebar-overlay';
+    overlay.addEventListener('click', function() {
+        closeMobileSidebar();
+    });
+    document.body.appendChild(overlay);
+}
+
+// Mobile sidebar toggle functionality
+function initMobileSidebarToggle() {
+    const mobileToggle = document.getElementById('mobile-sidebar-toggle');
+    const sidebar = document.getElementById('sidebar');
+
+    if (mobileToggle && sidebar) {
+        mobileToggle.addEventListener('click', function(e) {
+            e.stopPropagation();
+            toggleMobileSidebar();
+        });
+    }
+}
+
+function toggleMobileSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.querySelector('.mobile-sidebar-overlay');
+
+    if (sidebar && overlay) {
+        sidebar.classList.toggle('mobile-open');
+        overlay.classList.toggle('active');
+
+        // Prevent body scroll when sidebar is open
+        if (sidebar.classList.contains('mobile-open')) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+    }
+}
+
+function closeMobileSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.querySelector('.mobile-sidebar-overlay');
+
+    if (sidebar && overlay) {
+        sidebar.classList.remove('mobile-open');
+        overlay.classList.remove('active');
+        document.body.style.overflow = '';
+    }
+}
+
+// Mobile header menu toggle
+function initMobileHeaderMenu() {
+    // Mobile search toggle
+    const mobileSearchToggle = document.getElementById('mobile-search-toggle');
+    const mobileSearchForm = document.getElementById('mobile-search-form');
+
+    if (mobileSearchToggle && mobileSearchForm) {
+        mobileSearchToggle.addEventListener('click', function(e) {
+            e.stopPropagation();
+
+            if (mobileSearchForm.classList.contains('hidden')) {
+                mobileSearchForm.classList.remove('hidden');
+                // Close mobile menu if open
+                const mobileMenu = document.getElementById('mobile-menu');
+                if (mobileMenu) {
+                    mobileMenu.style.display = 'none';
+                }
+            } else {
+                mobileSearchForm.classList.add('hidden');
+            }
+        });
+
+        // Close mobile search when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!mobileSearchForm.contains(e.target) &&
+                !mobileSearchToggle.contains(e.target) &&
+                !mobileSearchForm.classList.contains('hidden')) {
+                mobileSearchForm.classList.add('hidden');
+            }
+        });
+    }
+
+    const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+
+    if (mobileMenuToggle) {
+        mobileMenuToggle.addEventListener('click', function(e) {
+            e.stopPropagation();
+
+            // Close mobile search if open
+            if (mobileSearchForm && !mobileSearchForm.classList.contains('hidden')) {
+                mobileSearchForm.classList.add('hidden');
+            }
+
+            const desktopNav = document.querySelector('.hidden.md\\:flex');
+
+            if (desktopNav) {
+                // Create mobile menu if it doesn't exist
+                let mobileMenu = document.getElementById('mobile-menu');
+
+                if (!mobileMenu) {
+                    mobileMenu = document.createElement('div');
+                    mobileMenu.id = 'mobile-menu';
+                    mobileMenu.className = 'md:hidden absolute top-16 left-0 right-0 bg-gray-800 dark:bg-gray-950 shadow-lg z-50 max-h-[80vh] overflow-y-auto';
+                    mobileMenu.style.display = 'none';
+
+                    // Clone navigation content
+                    const navClone = desktopNav.cloneNode(true);
+                    navClone.classList.remove('hidden', 'md:flex', 'md:items-center', 'md:space-x-1', 'flex-1');
+                    navClone.classList.add('flex', 'flex-col', 'space-y-2', 'p-4');
+
+                    // Update dropdown styles for mobile
+                    navClone.querySelectorAll('.dropdown-container').forEach(dropdown => {
+                        dropdown.classList.remove('relative');
+                        dropdown.classList.add('w-full');
+
+                        const button = dropdown.querySelector('.dropdown-toggle');
+                        if (button) {
+                            button.classList.add('w-full', 'justify-between');
+                        }
+
+                        const menu = dropdown.querySelector('.dropdown-menu');
+                        if (menu) {
+                            menu.classList.remove('absolute', 'left-0', 'top-full', 'w-48');
+                            menu.classList.add('relative', 'w-full', 'mt-2');
+                        }
+                    });
+
+                    mobileMenu.appendChild(navClone);
+                    mobileMenuToggle.parentElement.parentElement.appendChild(mobileMenu);
+                }
+
+                // Toggle menu visibility
+                if (mobileMenu.style.display === 'none') {
+                    mobileMenu.style.display = 'block';
+                    mobileMenuToggle.querySelector('i').classList.replace('fa-bars', 'fa-times');
+                } else {
+                    mobileMenu.style.display = 'none';
+                    mobileMenuToggle.querySelector('i').classList.replace('fa-times', 'fa-bars');
+                }
+            }
+        });
+    }
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', function(e) {
+        const mobileMenu = document.getElementById('mobile-menu');
+        const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+
+        if (mobileMenu && mobileMenuToggle &&
+            mobileMenu.style.display === 'block' &&
+            !mobileMenu.contains(e.target) &&
+            !mobileMenuToggle.contains(e.target)) {
+            mobileMenu.style.display = 'none';
+            mobileMenuToggle.querySelector('i').classList.replace('fa-times', 'fa-bars');
+        }
+    });
+}
+
+// Touch enhancements for better mobile interaction
+function initTouchEnhancements() {
+    // Add touch feedback to all buttons
+    document.addEventListener('touchstart', function(e) {
+        const btn = e.target.closest('.btn, button, a[class*="btn"]');
+        if (btn) {
+            btn.style.opacity = '0.7';
+        }
+    }, { passive: true });
+
+    document.addEventListener('touchend', function(e) {
+        const btn = e.target.closest('.btn, button, a[class*="btn"]');
+        if (btn) {
+            setTimeout(() => {
+                btn.style.opacity = '';
+            }, 100);
+        }
+    }, { passive: true });
+
+    // Improve dropdown touch handling
+    document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
+        let touchStartY = 0;
+
+        toggle.addEventListener('touchstart', function(e) {
+            touchStartY = e.touches[0].clientY;
+        }, { passive: true });
+
+        toggle.addEventListener('touchend', function(e) {
+            const touchEndY = e.changedTouches[0].clientY;
+            const touchDiff = Math.abs(touchEndY - touchStartY);
+
+            // Only trigger if it's a tap, not a scroll
+            if (touchDiff < 10) {
+                e.preventDefault();
+                this.click();
+            }
+        });
+    });
+}
+
+// Mobile table enhancements
+function initMobileTableEnhancements() {
+    // Add data labels to table cells for mobile view
+    const tables = document.querySelectorAll('table');
+
+    tables.forEach(table => {
+        const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
+
+        table.querySelectorAll('tbody tr').forEach(row => {
+            Array.from(row.querySelectorAll('td')).forEach((cell, index) => {
+                if (headers[index] && !cell.hasAttribute('data-label')) {
+                    cell.setAttribute('data-label', headers[index]);
+                }
+            });
+        });
+
+        // Add responsive wrapper if not present
+        if (!table.parentElement.classList.contains('table-responsive')) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'table-responsive';
+            table.parentNode.insertBefore(wrapper, table);
+            wrapper.appendChild(table);
+        }
+    });
+}
+
+// Prevent double-tap zoom on buttons
+function preventDoubleTapZoom() {
+    let lastTouchEnd = 0;
+
+    document.addEventListener('touchend', function(e) {
+        const now = Date.now();
+        if (now - lastTouchEnd <= 300) {
+            const target = e.target.closest('button, a, .btn, input[type="submit"]');
+            if (target) {
+                e.preventDefault();
+            }
+        }
+        lastTouchEnd = now;
+    }, { passive: false });
+}
+
+// Optimize modals for mobile devices
+function optimizeModalsForMobile() {
+    // Ensure modals are properly sized on mobile
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            mutation.addedNodes.forEach(function(node) {
+                if (node.nodeType === 1) {
+                    const modal = node.querySelector('.modal-content') ||
+                                 (node.classList && node.classList.contains('modal-content') ? node : null);
+
+                    if (modal && window.innerWidth < 768) {
+                        modal.style.maxHeight = '90vh';
+                        modal.style.overflowY = 'auto';
+                        modal.style.margin = '0.5rem';
+                        modal.style.width = 'calc(100% - 1rem)';
+                    }
+                }
+            });
+        });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    // Handle existing modals
+    document.querySelectorAll('.modal-content').forEach(modal => {
+        if (window.innerWidth < 768) {
+            modal.style.maxHeight = '90vh';
+            modal.style.overflowY = 'auto';
+            modal.style.margin = '0.5rem';
+            modal.style.width = 'calc(100% - 1rem)';
+        }
+    });
+
+    // Close sidebar when opening modal
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('[data-open-nfo], [data-open-image-modal], .mediainfo-badge, .filelist-badge')) {
+            closeMobileSidebar();
+        }
+    });
+}
+
+// Admin Dashboard Charts Initialization
+function initAdminDashboardCharts() {
+    // Check if Chart.js is loaded and if we're on the admin dashboard
+    if (typeof Chart === 'undefined') {
+        return;
+    }
+
+    // Check for dark mode
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    const textColor = isDarkMode ? '#e5e7eb' : '#374151';
+    const gridColor = isDarkMode ? '#374151' : '#e5e7eb';
+
+    // Store chart instances for updates
+    window.adminCharts = {
+        cpu24h: null,
+        ram24h: null,
+        cpu30d: null,
+        ram30d: null
+    };
+
+    // Downloads Chart
+    const downloadsCtx = document.getElementById('downloadsChart');
+    if (downloadsCtx) {
+        const downloadsData = JSON.parse(downloadsCtx.getAttribute('data-chart-data') || '[]');
+        new Chart(downloadsCtx, {
+            type: 'bar',
+            data: {
+                labels: downloadsData.map(d => d.date),
+                datasets: [{
+                    label: 'Downloads',
+                    data: downloadsData.map(d => d.count),
+                    backgroundColor: 'rgba(34, 197, 94, 0.7)',
+                    borderColor: 'rgba(34, 197, 94, 1)',
+                    borderWidth: 2,
+                    borderRadius: 6,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+                        titleColor: textColor,
+                        bodyColor: textColor,
+                        borderColor: gridColor,
+                        borderWidth: 1,
+                        padding: 12,
+                        displayColors: false,
+                        callbacks: {
+                            label: function(context) {
+                                return 'Downloads: ' + context.parsed.y.toLocaleString();
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            color: textColor,
+                            precision: 0
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: textColor
+                        },
+                        grid: {
+                            display: false
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // API Hits Chart
+    const apiHitsCtx = document.getElementById('apiHitsChart');
+    if (apiHitsCtx) {
+        const apiHitsData = JSON.parse(apiHitsCtx.getAttribute('data-chart-data') || '[]');
+        new Chart(apiHitsCtx, {
+            type: 'line',
+            data: {
+                labels: apiHitsData.map(d => d.date),
+                datasets: [{
+                    label: 'API Hits',
+                    data: apiHitsData.map(d => d.count),
+                    backgroundColor: 'rgba(147, 51, 234, 0.1)',
+                    borderColor: 'rgba(147, 51, 234, 1)',
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 4,
+                    pointHoverRadius: 6,
+                    pointBackgroundColor: 'rgba(147, 51, 234, 1)',
+                    pointBorderColor: '#ffffff',
+                    pointBorderWidth: 2,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+                        titleColor: textColor,
+                        bodyColor: textColor,
+                        borderColor: gridColor,
+                        borderWidth: 1,
+                        padding: 12,
+                        displayColors: false,
+                        callbacks: {
+                            label: function(context) {
+                                return 'API Hits: ' + context.parsed.y.toLocaleString();
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            color: textColor,
+                            precision: 0
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: textColor
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // CPU Usage 24 Hour Historical Chart (Line)
+    const cpuHistory24hCtx = document.getElementById('cpuHistory24hChart');
+    if (cpuHistory24hCtx) {
+        const cpuHistory = JSON.parse(cpuHistory24hCtx.getAttribute('data-history') || '[]');
+        const cpuLabel = cpuHistory24hCtx.getAttribute('data-chart-label') || 'CPU Usage %';
+
+        window.adminCharts.cpu24h = new Chart(cpuHistory24hCtx, {
+            type: 'line',
+            data: {
+                labels: cpuHistory.map(d => d.time),
+                datasets: [{
+                    label: cpuLabel,
+                    data: cpuHistory.map(d => d.value),
+                    backgroundColor: 'rgba(249, 115, 22, 0.1)',
+                    borderColor: 'rgba(249, 115, 22, 1)',
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 4,
+                    pointHoverRadius: 6,
+                    pointBackgroundColor: 'rgba(249, 115, 22, 1)',
+                    pointBorderColor: '#ffffff',
+                    pointBorderWidth: 2,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+                        titleColor: textColor,
+                        bodyColor: textColor,
+                        borderColor: gridColor,
+                        borderWidth: 1,
+                        padding: 12,
+                        displayColors: false,
+                        callbacks: {
+                            label: function(context) {
+                                return 'CPU: ' + context.parsed.y.toFixed(1) + '%';
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        ticks: {
+                            color: textColor,
+                            callback: function(value) {
+                                return value + '%';
+                            }
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: textColor,
+                            maxRotation: 45,
+                            minRotation: 45
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // RAM Usage 24 Hour Historical Chart (Line)
+    const ramHistory24hCtx = document.getElementById('ramHistory24hChart');
+    if (ramHistory24hCtx) {
+        const ramHistory = JSON.parse(ramHistory24hCtx.getAttribute('data-history') || '[]');
+        const ramLabel = ramHistory24hCtx.getAttribute('data-chart-label') || 'RAM Usage %';
+
+        window.adminCharts.ram24h = new Chart(ramHistory24hCtx, {
+            type: 'line',
+            data: {
+                labels: ramHistory.map(d => d.time),
+                datasets: [{
+                    label: ramLabel,
+                    data: ramHistory.map(d => d.value),
+                    backgroundColor: 'rgba(6, 182, 212, 0.1)',
+                    borderColor: 'rgba(6, 182, 212, 1)',
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 4,
+                    pointHoverRadius: 6,
+                    pointBackgroundColor: 'rgba(6, 182, 212, 1)',
+                    pointBorderColor: '#ffffff',
+                    pointBorderWidth: 2,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+                        titleColor: textColor,
+                        bodyColor: textColor,
+                        borderColor: gridColor,
+                        borderWidth: 1,
+                        padding: 12,
+                        displayColors: false,
+                        callbacks: {
+                            label: function(context) {
+                                return 'RAM: ' + context.parsed.y.toFixed(1) + '%';
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        ticks: {
+                            color: textColor,
+                            callback: function(value) {
+                                return value + '%';
+                            }
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: textColor,
+                            maxRotation: 45,
+                            minRotation: 45
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // CPU Usage 30 Day Historical Chart (Line)
+    const cpuHistory30dCtx = document.getElementById('cpuHistory30dChart');
+    if (cpuHistory30dCtx) {
+        const cpuHistory = JSON.parse(cpuHistory30dCtx.getAttribute('data-history') || '[]');
+        const cpuLabel = cpuHistory30dCtx.getAttribute('data-chart-label') || 'CPU Usage %';
+
+        window.adminCharts.cpu30d = new Chart(cpuHistory30dCtx, {
+            type: 'line',
+            data: {
+                labels: cpuHistory.map(d => d.time),
+                datasets: [{
+                    label: cpuLabel,
+                    data: cpuHistory.map(d => d.value),
+                    backgroundColor: 'rgba(249, 115, 22, 0.1)',
+                    borderColor: 'rgba(249, 115, 22, 1)',
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 3,
+                    pointHoverRadius: 5,
+                    pointBackgroundColor: 'rgba(249, 115, 22, 1)',
+                    pointBorderColor: '#ffffff',
+                    pointBorderWidth: 2,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+                        titleColor: textColor,
+                        bodyColor: textColor,
+                        borderColor: gridColor,
+                        borderWidth: 1,
+                        padding: 12,
+                        displayColors: false,
+                        callbacks: {
+                            label: function(context) {
+                                return 'CPU: ' + context.parsed.y.toFixed(1) + '%';
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        ticks: {
+                            color: textColor,
+                            callback: function(value) {
+                                return value + '%';
+                            }
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: textColor,
+                            maxRotation: 45,
+                            minRotation: 45
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // RAM Usage 30 Day Historical Chart (Line)
+    const ramHistory30dCtx = document.getElementById('ramHistory30dChart');
+    if (ramHistory30dCtx) {
+        const ramHistory = JSON.parse(ramHistory30dCtx.getAttribute('data-history') || '[]');
+        const ramLabel = ramHistory30dCtx.getAttribute('data-chart-label') || 'RAM Usage %';
+
+        window.adminCharts.ram30d = new Chart(ramHistory30dCtx, {
+            type: 'line',
+            data: {
+                labels: ramHistory.map(d => d.time),
+                datasets: [{
+                    label: ramLabel,
+                    data: ramHistory.map(d => d.value),
+                    backgroundColor: 'rgba(6, 182, 212, 0.1)',
+                    borderColor: 'rgba(6, 182, 212, 1)',
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 3,
+                    pointHoverRadius: 5,
+                    pointBackgroundColor: 'rgba(6, 182, 212, 1)',
+                    pointBorderColor: '#ffffff',
+                    pointBorderWidth: 2,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+                        titleColor: textColor,
+                        bodyColor: textColor,
+                        borderColor: gridColor,
+                        borderWidth: 1,
+                        padding: 12,
+                        displayColors: false,
+                        callbacks: {
+                            label: function(context) {
+                                return 'RAM: ' + context.parsed.y.toFixed(1) + '%';
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        ticks: {
+                            color: textColor,
+                            callback: function(value) {
+                                return value + '%';
+                            }
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    },
+                    x: {
+                        ticks: {
+                            color: textColor,
+                            maxRotation: 45,
+                            minRotation: 45
+                        },
+                        grid: {
+                            color: gridColor,
+                            drawBorder: false
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // Start auto-refresh for system metrics (every 60 seconds)
+    startSystemMetricsAutoRefresh();
+}
+
+// Auto-refresh system metrics every minute
+function startSystemMetricsAutoRefresh() {
+    // Check if we're on the admin dashboard with system metrics
+    if (!document.getElementById('cpuHistory24hChart')) {
+        return;
+    }
+
+    // Update current metrics display
+    function updateCurrentMetrics() {
+        fetch('/admin/api/system-metrics/current')
+            .then(response => response.json())
+            .then(data => {
+                // Update CPU current usage
+                const cpuCurrentElem = document.querySelector('[data-metric="cpu-current"]');
+                if (cpuCurrentElem) {
+                    cpuCurrentElem.textContent = data.cpu.current.toFixed(1) + '%';
+                }
+
+                // Update CPU load averages
+                const load1minElem = document.querySelector('[data-metric="cpu-load-1min"]');
+                const load5minElem = document.querySelector('[data-metric="cpu-load-5min"]');
+                const load15minElem = document.querySelector('[data-metric="cpu-load-15min"]');
+
+                if (load1minElem) load1minElem.textContent = data.cpu.load_average['1min'];
+                if (load5minElem) load5minElem.textContent = data.cpu.load_average['5min'];
+                if (load15minElem) load15minElem.textContent = data.cpu.load_average['15min'];
+
+                // Update RAM current usage
+                const ramCurrentElem = document.querySelector('[data-metric="ram-current"]');
+                if (ramCurrentElem) {
+                    ramCurrentElem.textContent = data.ram.percentage.toFixed(1) + '%';
+                }
+
+                const ramDetailsElem = document.querySelector('[data-metric="ram-details"]');
+                if (ramDetailsElem) {
+                    ramDetailsElem.textContent = `${data.ram.used.toFixed(2)} GB / ${data.ram.total.toFixed(2)} GB`;
+                }
+
+                // Update last updated timestamp
+                const timestampElem = document.querySelector('[data-metric="last-updated"]');
+                if (timestampElem) {
+                    const now = new Date();
+                    timestampElem.textContent = now.toLocaleTimeString();
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching current metrics:', error);
+            });
+    }
+
+    // Update historical charts
+    function updateHistoricalCharts() {
+        fetch('/admin/api/system-metrics/historical')
+            .then(response => response.json())
+            .then(data => {
+                // Update CPU 24h chart
+                if (window.adminCharts && window.adminCharts.cpu24h) {
+                    window.adminCharts.cpu24h.data.labels = data.cpu.history_24h.map(d => d.time);
+                    window.adminCharts.cpu24h.data.datasets[0].data = data.cpu.history_24h.map(d => d.value);
+                    window.adminCharts.cpu24h.update('none'); // 'none' for no animation
+                }
+
+                // Update RAM 24h chart
+                if (window.adminCharts && window.adminCharts.ram24h) {
+                    window.adminCharts.ram24h.data.labels = data.ram.history_24h.map(d => d.time);
+                    window.adminCharts.ram24h.data.datasets[0].data = data.ram.history_24h.map(d => d.value);
+                    window.adminCharts.ram24h.update('none');
+                }
+
+                // Update CPU 30d chart
+                if (window.adminCharts && window.adminCharts.cpu30d) {
+                    window.adminCharts.cpu30d.data.labels = data.cpu.history_30d.map(d => d.time);
+                    window.adminCharts.cpu30d.data.datasets[0].data = data.cpu.history_30d.map(d => d.value);
+                    window.adminCharts.cpu30d.update('none');
+                }
+
+                // Update RAM 30d chart
+                if (window.adminCharts && window.adminCharts.ram30d) {
+                    window.adminCharts.ram30d.data.labels = data.ram.history_30d.map(d => d.time);
+                    window.adminCharts.ram30d.data.datasets[0].data = data.ram.history_30d.map(d => d.value);
+                    window.adminCharts.ram30d.update('none');
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching historical metrics:', error);
+            });
+    }
+
+    // Initial update
+    updateCurrentMetrics();
+
+    // Update current metrics every 60 seconds (1 minute)
+    setInterval(updateCurrentMetrics, 60000);
+
+    // Update historical charts every 5 minutes (to reduce load)
+    setInterval(updateHistoricalCharts, 300000);
+}
+
+// Admin Groups Management
+function initAdminGroups() {
+    // Group Edit Form Validation
+    const groupEditForm = document.getElementById('groupForm');
+    if (groupEditForm) {
+        groupEditForm.addEventListener('submit', function(event) {
+            const firstRecord = document.getElementById('first_record');
+            const lastRecord = document.getElementById('last_record');
+
+            if (!firstRecord || !lastRecord) return;
+
+            const firstVal = parseInt(firstRecord.value);
+            const lastVal = parseInt(lastRecord.value);
+
+            if (firstVal > lastVal && lastVal > 0) {
+                event.preventDefault();
+                alert('First record ID cannot be greater than last record ID');
+                return false;
+            }
+        });
+    }
+
+    // Group Bulk Form Validation
+    const groupBulkForm = document.getElementById('groupBulkForm');
+    if (groupBulkForm) {
+        groupBulkForm.addEventListener('submit', function(event) {
+            const groupfilter = document.getElementById('groupfilter');
+            if (!groupfilter) return;
+
+            const filterValue = groupfilter.value.trim();
+
+            if (filterValue === '') {
+                event.preventDefault();
+                alert('Please enter a group pattern');
+                return false;
+            }
+
+            // Simple regex validation
+            try {
+                new RegExp(filterValue);
+            } catch(e) {
+                event.preventDefault();
+                alert('Invalid regex pattern: ' + e.message);
+                return false;
+            }
+        });
+    }
+}
+
+function showResetAllModal() {
+    const modal = document.getElementById('resetAllModal');
+    if (modal) {
+        modal.classList.remove('hidden');
+    }
+}
+
+function hideResetAllModal() {
+    const modal = document.getElementById('resetAllModal');
+    if (modal) {
+        modal.classList.add('hidden');
+    }
+}
+
+function showPurgeAllModal() {
+    const modal = document.getElementById('purgeAllModal');
+    if (modal) {
+        modal.classList.remove('hidden');
+    }
+}
+
+function hidePurgeAllModal() {
+    const modal = document.getElementById('purgeAllModal');
+    if (modal) {
+        modal.classList.add('hidden');
+    }
+}
+
+function ajax_group_status(id, status) {
+    const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
+    const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
+
+    if (!ajaxUrl || !csrfToken) return;
+
+    // Ensure status is an integer
+    const statusInt = parseInt(status);
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            action: 'toggle_group_active_status',
+            group_id: parseInt(id),
+            group_status: statusInt
+        })
+    })
+    .then(response => response.text())
+    .then(data => {
+        // Update succeeded, regenerate the button with the new status
+        const groupCell = document.getElementById('group-' + id);
+        if (groupCell) {
+            // The status parameter is what we're setting it TO (not toggling)
+            // status = 1 means we're activating, status = 0 means we're deactivating
+            const isActive = statusInt === 1;
+
+            // Generate new button HTML with proper data attributes
+            const buttonHTML = isActive
+                ? `<button type="button"
+                        data-action="toggle-group-status"
+                        data-group-id="${id}"
+                        data-status="0"
+                        class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 hover:bg-green-200">
+                        <i class="fa fa-check-circle mr-1"></i>Active
+                    </button>`
+                : `<button type="button"
+                        data-action="toggle-group-status"
+                        data-group-id="${id}"
+                        data-status="1"
+                        class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200">
+                        <i class="fa fa-times-circle mr-1"></i>Inactive
+                    </button>`;
+
+            groupCell.innerHTML = buttonHTML;
+
+            // Show success message
+            if (typeof showToast === 'function') {
+                showToast(isActive ? 'Group activated successfully' : 'Group deactivated successfully', 'success');
+            }
+        }
+    })
+    .catch(error => {
+        console.error('Error toggling group status:', error);
+        if (typeof showToast === 'function') {
+            showToast('Error updating group status', 'error');
+        }
+    });
+}
+
+function ajax_backfill_status(id, status) {
+    const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
+    const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
+
+    if (!ajaxUrl || !csrfToken) return;
+
+    // Ensure status is an integer
+    const statusInt = parseInt(status);
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            action: 'toggle_group_backfill',
+            group_id: parseInt(id),
+            backfill: statusInt
+        })
+    })
+    .then(response => response.text())
+    .then(data => {
+        // Update succeeded, regenerate the button with the new status
+        const backfillCell = document.getElementById('backfill-' + id);
+        if (backfillCell) {
+            // The status parameter is what we're setting it TO (not toggling)
+            // status = 1 means we're enabling, status = 0 means we're disabling
+            const isEnabled = statusInt === 1;
+
+            // Generate new button HTML with proper data attributes
+            const buttonHTML = isEnabled
+                ? `<button type="button"
+                        data-action="toggle-backfill"
+                        data-group-id="${id}"
+                        data-status="0"
+                        class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200">
+                        <i class="fa fa-check-circle mr-1"></i>Enabled
+                    </button>`
+                : `<button type="button"
+                        data-action="toggle-backfill"
+                        data-group-id="${id}"
+                        data-status="1"
+                        class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200">
+                        <i class="fa fa-times-circle mr-1"></i>Disabled
+                    </button>`;
+
+            backfillCell.innerHTML = buttonHTML;
+
+            // Show success message
+            if (typeof showToast === 'function') {
+                showToast(isEnabled ? 'Backfill enabled successfully' : 'Backfill disabled successfully', 'success');
+            }
+        }
+    })
+    .catch(error => {
+        console.error('Error toggling backfill status:', error);
+        if (typeof showToast === 'function') {
+            showToast('Error updating backfill status', 'error');
+        }
+    });
+}
+
+function ajax_group_reset(id) {
+    if (!confirm('Are you sure you want to reset this group?')) {
+        return;
+    }
+
+    const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
+    const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
+
+    if (!ajaxUrl || !csrfToken) return;
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            action: 'reset_group',
+            group_id: id
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            location.reload();
+        }
+    })
+    .catch(error => console.error('Error resetting group:', error));
+}
+
+function confirmGroupDelete(id) {
+    if (!confirm('Are you sure you want to delete this group?')) {
+        return;
+    }
+
+    const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
+    const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
+
+    if (!ajaxUrl || !csrfToken) return;
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            action: 'delete_group',
+            group_id: id
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            const row = document.getElementById('grouprow-' + id);
+            if (row) {
+                row.classList.add('fade-out');
+                setTimeout(() => row.remove(), 300);
+            }
+        }
+    })
+    .catch(error => console.error('Error deleting group:', error));
+}
+
+function confirmGroupPurge(id) {
+    if (!confirm('Are you sure you want to purge this group? This will delete all releases and binaries!')) {
+        return;
+    }
+
+    const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
+    const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
+
+    if (!ajaxUrl || !csrfToken) return;
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            action: 'purge_group',
+            group_id: id
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            location.reload();
+        }
+    })
+    .catch(error => console.error('Error purging group:', error));
+}
+
+function ajax_group_reset_all() {
+    const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
+    const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
+
+    if (!ajaxUrl || !csrfToken) return;
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            action: 'reset_all_groups'
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            hideResetAllModal();
+            location.reload();
+        }
+    })
+    .catch(error => console.error('Error resetting all groups:', error));
+}
+
+function ajax_group_purge_all() {
+    const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
+    const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
+
+    if (!ajaxUrl || !csrfToken) return;
+
+    fetch(ajaxUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': csrfToken
+        },
+        body: JSON.stringify({
+            action: 'purge_all_groups'
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            hidePurgeAllModal();
+            location.reload();
+        }
+    })
+    .catch(error => console.error('Error purging all groups:', error));
+}
+
+// ========================================
+// Admin-specific functions
+// ========================================
+
+// Admin Categories - Delete confirmation
+window.confirmDelete = window.confirmDelete || function(id) {
+    const modal = document.getElementById('deleteModal');
+    const deleteLink = document.getElementById('confirmDeleteLink');
+    if (modal && deleteLink) {
+        deleteLink.href = window.location.origin + '/admin/category-delete?id=' + id;
+        modal.classList.remove('hidden');
+    }
+};
+
+window.closeDeleteModal = function() {
+    const modal = document.getElementById('deleteModal');
+    if (modal) {
+        modal.classList.add('hidden');
+    }
+};
+
+// Admin Console/Books - Image preview on file upload
+function initAdminImagePreview() {
+    // Console cover preview
+    const consoleCoverInput = document.getElementById('cover');
+    if (consoleCoverInput) {
+        consoleCoverInput.addEventListener('change', function(e) {
+            if (e.target.files && e.target.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    const imgs = document.querySelectorAll('img[alt]');
+                    imgs.forEach(img => {
+                        if (img.closest('form')?.contains(consoleCoverInput)) {
+                            img.src = event.target.result;
+                        }
+                    });
+                };
+                reader.readAsDataURL(e.target.files[0]);
+            }
+        });
+    }
+}
+
+// Admin Users - Verify user modal
+window.showVerifyModal = function(event, form) {
+    event.preventDefault();
+    window.currentVerifyForm = form;
+    const modal = document.getElementById('verifyUserModal');
+    if (modal) {
+        modal.classList.remove('hidden');
+    }
+};
+
+window.hideVerifyModal = function() {
+    const modal = document.getElementById('verifyUserModal');
+    if (modal) {
+        modal.classList.add('hidden');
+    }
+    window.currentVerifyForm = null;
+};
+
+window.submitVerifyForm = function() {
+    if (window.currentVerifyForm) {
+        window.currentVerifyForm.submit();
+    }
+};
+
+// Admin Invitations - Select all checkboxes
+function initAdminInvitationsSelectAll() {
+    const selectAllCheckbox = document.getElementById('select_all');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.addEventListener('change', function(e) {
+            document.querySelectorAll('.invitation-checkbox').forEach(cb => {
+                cb.checked = e.target.checked;
+            });
+        });
+    }
+}
+
+// Admin Invitations - Copy to clipboard
+window.copyToClipboard = function(text) {
+    navigator.clipboard.writeText(text).then(function() {
+        if (typeof showToast === 'function') {
+            showToast('Link copied to clipboard!', 'success');
+        } else {
+            alert('Link copied to clipboard!');
+        }
+    }, function(err) {
+        console.error('Could not copy text: ', err);
+        alert('Failed to copy to clipboard');
+    });
+};
+
+// Admin Blacklist - Delete via AJAX
+window.ajax_binaryblacklist_delete = function(id) {
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+
+    fetch(window.location.origin + '/admin/binaryblacklist-delete?id=' + id, {
+        method: 'GET',
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-CSRF-TOKEN': csrfToken
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            const row = document.getElementById('row-' + id);
+            if (row) {
+                row.style.transition = 'opacity 0.3s';
+                row.style.opacity = '0';
+                setTimeout(() => row.remove(), 300);
+            }
+            if (typeof showToast === 'function') {
+                showToast('Blacklist entry deleted successfully', 'success');
+            }
+        } else {
+            if (typeof showToast === 'function') {
+                showToast('Error deleting blacklist entry', 'error');
+            }
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        if (typeof showToast === 'function') {
+            showToast('Error deleting blacklist entry', 'error');
+        }
+    });
+};
+
+// Admin Comments - Delete modal
+window.openDeleteModal = function(commentId, commentText) {
+    const modal = document.getElementById('deleteModal');
+    const form = document.getElementById('deleteForm');
+    const preview = document.getElementById('deleteCommentPreview');
+
+    if (modal && form && preview) {
+        // Set the form action
+        form.action = window.location.origin + '/admin/comments-delete/' + commentId;
+
+        // Set the comment preview
+        preview.textContent = '"' + commentText.substring(0, 100) + (commentText.length >= 100 ? '..."' : '"');
+
+        // Show the modal
+        modal.classList.remove('hidden');
+        modal.classList.add('flex');
+
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+    }
+};
+
+window.closeDeleteModal = window.closeDeleteModal || function() {
+    const modal = document.getElementById('deleteModal');
+    if (modal) {
+        // Hide the modal
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+
+        // Restore body scroll
+        document.body.style.overflow = '';
+    }
+};
+
+// Admin Regex Forms - Validation
+function initAdminRegexFormValidation() {
+    // Release naming regex form
+    const releaseNamingForm = document.getElementById('regexForm');
+    if (releaseNamingForm && window.location.pathname.includes('release-naming')) {
+        releaseNamingForm.addEventListener('submit', function(event) {
+            const groupRegex = document.getElementById('group_regex');
+            const regex = document.getElementById('regex');
+            const ordinal = document.getElementById('ordinal');
+
+            if (!groupRegex?.value.trim() || !regex?.value.trim() || !ordinal?.value) {
+                event.preventDefault();
+                alert('Please fill in all required fields.');
+                return false;
+            }
+        });
+    }
+
+    // Category regex form
+    if (releaseNamingForm && window.location.pathname.includes('category')) {
+        releaseNamingForm.addEventListener('submit', function(event) {
+            const groupRegex = document.getElementById('group_regex');
+            const regex = document.getElementById('regex');
+            const ordinal = document.getElementById('ordinal');
+
+            if (!groupRegex?.value.trim() || !regex?.value.trim() || !ordinal?.value) {
+                event.preventDefault();
+                alert('Please fill in all required fields.');
+                return false;
+            }
+        });
+    }
+
+    // Collection regex form
+    if (releaseNamingForm && window.location.pathname.includes('collection')) {
+        releaseNamingForm.addEventListener('submit', function(event) {
+            const groupRegex = document.getElementById('group_regex');
+            const regex = document.getElementById('regex');
+            const ordinal = document.getElementById('ordinal');
+
+            if (!groupRegex?.value.trim() || !regex?.value.trim() || !ordinal?.value) {
+                event.preventDefault();
+                alert('Please fill in all required fields.');
+                return false;
+            }
+        });
+    }
+
+    // Blacklist form
+    const blacklistForm = document.getElementById('blacklistForm');
+    if (blacklistForm) {
+        blacklistForm.addEventListener('submit', function(event) {
+            const groupname = document.getElementById('groupname');
+            const regex = document.getElementById('regex');
+
+            if (!groupname?.value.trim() || !regex?.value.trim()) {
+                event.preventDefault();
+                alert('Please fill in all required fields.');
+                return false;
+            }
+        });
+    }
+}
+
+// Admin Tmux - Select color highlighting
+function initAdminTmuxSelectColors() {
+    const tmuxForm = document.getElementById('tmuxForm');
+    if (!tmuxForm) return;
+
+    // Function to update select colors based on value
+    function updateSelectColor(select) {
+        select.classList.remove('select-yes', 'select-no', 'select-other');
+
+        const value = select.value.toLowerCase();
+        if (value === '1' || value === 'true' || value === 'yes') {
+            select.classList.add('select-yes');
+        } else if (value === '0' || value === 'false' || value === 'no') {
+            select.classList.add('select-no');
+        } else {
+            select.classList.add('select-other');
+        }
+    }
+
+    // Apply to all select elements in the form
+    const selects = tmuxForm.querySelectorAll('select');
+    selects.forEach(select => {
+        // Initial color
+        updateSelectColor(select);
+
+        // Update on change
+        select.addEventListener('change', function() {
+            updateSelectColor(this);
+        });
+    });
+}
+
+// Initialize all admin-specific features
+function initAdminSpecificFeatures() {
+    initAdminImagePreview();
+    initAdminInvitationsSelectAll();
+    initAdminRegexFormValidation();
+    initAdminTmuxSelectColors();
+    initAdminDeletedUsers();
+
+    // Close delete modal when clicking outside
+    const deleteModal = document.getElementById('deleteModal');
+    if (deleteModal) {
+        deleteModal.addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeDeleteModal();
+            }
+        });
+    }
+
+    // Close verify modal when clicking outside
+    const verifyUserModal = document.getElementById('verifyUserModal');
+    if (verifyUserModal) {
+        verifyUserModal.addEventListener('click', function(event) {
+            if (event.target === this) {
+                hideVerifyModal();
+            }
+        });
+    }
+}
+
+// Admin Deleted Users page functionality
+function initAdminDeletedUsers() {
+    // Select all checkbox
+    const selectAllCheckbox = document.getElementById('selectAll');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.addEventListener('change', function() {
+            const checkboxes = document.querySelectorAll('.user-checkbox');
+            checkboxes.forEach(checkbox => {
+                checkbox.checked = this.checked;
+            });
+        });
+    }
+
+    // Bulk action confirmation
+    window.confirmBulkAction = function() {
+        const action = document.getElementById('bulkAction')?.value;
+        const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
+        const validationError = document.getElementById('validationError');
+        const validationErrorMessage = document.getElementById('validationErrorMessage');
+
+        if (!action) {
+            if (validationError && validationErrorMessage) {
+                validationErrorMessage.textContent = 'Please select an action from the dropdown.';
+                validationError.classList.remove('hidden');
+            }
+            return false;
+        }
+
+        if (checkedBoxes.length === 0) {
+            if (validationError && validationErrorMessage) {
+                validationErrorMessage.textContent = 'Please select at least one user.';
+                validationError.classList.remove('hidden');
+            }
+            return false;
+        }
+
+        // Hide validation error if showing
+        if (validationError) {
+            validationError.classList.add('hidden');
+        }
+
+        const count = checkedBoxes.length;
+        const actionText = action === 'restore' ? 'restore' : 'permanently delete';
+
+        return confirm(`Are you sure you want to ${actionText} ${count} user${count > 1 ? 's' : ''}?`);
+    };
+
+    // Individual action confirmations
+    document.querySelectorAll('.inline-form button[data-confirm]').forEach(button => {
+        button.addEventListener('click', function(e) {
+            const message = this.getAttribute('data-confirm');
+            if (!confirm(message)) {
+                e.preventDefault();
+            }
+        });
+    });
+}
+
+// My Movies page functionality
+function initMyMovies() {
+    // Confirm before removing movies
+    document.querySelectorAll('.confirm_action').forEach(element => {
+        element.addEventListener('click', function(e) {
+            if (!confirm('Are you sure you want to remove this movie from your watchlist?')) {
+                e.preventDefault();
+            }
+        });
+    });
+
+    // Image fallback for movie covers
+    document.querySelectorAll('img[data-fallback-src]').forEach(img => {
+        img.addEventListener('error', function() {
+            const fallback = this.getAttribute('data-fallback-src');
+            if (fallback && this.src !== fallback) {
+                this.src = fallback;
+            }
+        });
+    });
+
+    // Initialize Bootstrap tooltips if they exist
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+    }
+}
+
+// Auth pages functionality
+function initAuthPages() {
+    // Auto-hide success messages after 5 seconds on login page
+    if (window.location.pathname.includes('/login')) {
+        setTimeout(function() {
+            const alerts = document.querySelectorAll('.bg-green-50, .bg-blue-50');
+            alerts.forEach(function(alert) {
+                alert.style.transition = 'opacity 0.5s ease-out';
+                alert.style.opacity = '0';
+                setTimeout(() => alert.remove(), 500);
+            });
+        }, 5000);
+    }
+
+    // 2FA verification - Auto-submit when 6 digits are entered
+    const otpInput = document.getElementById('one_time_password');
+    if (otpInput) {
+        otpInput.addEventListener('input', function(e) {
+            // Remove non-numeric characters
+            this.value = this.value.replace(/[^0-9]/g, '');
+
+            // Auto-submit when 6 digits are entered
+            if (this.value.length === 6) {
+                // Small delay to show the complete code before submitting
+                setTimeout(() => {
+                    this.form.submit();
+                }, 300);
+            }
+        });
+
+        // Focus on input when page loads
+        otpInput.focus();
+    }
+}
+
+// Profile edit page functionality
+function initProfileEdit() {
+    // 2FA Disable Form Toggle
+    const toggleBtn = document.getElementById('toggle-disable-2fa-btn');
+    const cancelBtn = document.getElementById('cancel-disable-2fa-btn');
+    const formContainer = document.getElementById('disable-2fa-form-container');
+
+    if (toggleBtn && formContainer) {
+        toggleBtn.addEventListener('click', function() {
+            formContainer.style.display = formContainer.style.display === 'none' ? 'block' : 'none';
+        });
+    }
+
+    if (cancelBtn && formContainer) {
+        cancelBtn.addEventListener('click', function() {
+            formContainer.style.display = 'none';
+            // Clear password field
+            const passwordInput = document.getElementById('disable_2fa_password');
+            if (passwordInput) {
+                passwordInput.value = '';
+            }
+        });
+    }
+
+    // Theme preference instant preview
+    const themeRadios = document.querySelectorAll('input[name="theme_preference"]');
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function applyTheme(themeValue) {
+        const html = document.documentElement;
+
+        if (themeValue === 'system') {
+            // Use system preference
+            if (mediaQuery.matches) {
+                html.classList.add('dark');
+            } else {
+                html.classList.remove('dark');
+            }
+        } else if (themeValue === 'dark') {
+            html.classList.add('dark');
+        } else {
+            html.classList.remove('dark');
+        }
+    }
+
+    themeRadios.forEach(radio => {
+        radio.addEventListener('change', function() {
+            applyTheme(this.value);
+        });
+    });
+
+    // Listen to system preference changes if 'system' is selected
+    mediaQuery.addEventListener('change', function(e) {
+        const selectedTheme = document.querySelector('input[name="theme_preference"]:checked')?.value;
+        if (selectedTheme === 'system') {
+            applyTheme('system');
+        }
+    });
+}
+
+// Details page image modal functionality
+function initDetailsPageImageModal() {
+    window.openImageModal = function(imageUrl, title) {
+        const modal = document.getElementById('imageModal');
+        const modalImage = document.getElementById('imageModalImage');
+        const modalTitle = document.getElementById('imageModalTitle');
+
+        if (modal && modalImage) {
+            modalImage.src = imageUrl;
+            if (modalTitle) {
+                modalTitle.textContent = title || '';
+            }
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+
+            // Prevent body scroll when modal is open
+            document.body.style.overflow = 'hidden';
+        }
+    };
+
+    window.closeImageModal = function() {
+        const modal = document.getElementById('imageModal');
+        if (modal) {
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+
+            // Restore body scroll
+            document.body.style.overflow = '';
+        }
+    };
+
+    // Close modal when clicking outside the image
+    const imageModal = document.getElementById('imageModal');
+    if (imageModal) {
+        imageModal.addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeImageModal();
+            }
+        });
+    }
+
+    // Close modal with Escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            const modal = document.getElementById('imageModal');
+            if (modal && !modal.classList.contains('hidden')) {
+                closeImageModal();
+            }
+        }
+    });
+}
+
+// Add to cart functionality for movie/browse pages
+function initAddToCart() {
+    window.addToCart = function(guid) {
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+        const baseUrl = document.querySelector('meta[name="app-url"]')?.content || '';
+
+        fetch(baseUrl + '/cart/add', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': csrfToken,
+                'X-Requested-With': 'XMLHttpRequest'
+            },
+            body: JSON.stringify({ id: guid })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                if (typeof showToast === 'function') {
+                    showToast('Added to cart successfully!', 'success');
+                }
+            } else {
+                if (typeof showToast === 'function') {
+                    showToast('Failed to add to cart', 'error');
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            if (typeof showToast === 'function') {
+                showToast('An error occurred', 'error');
+            }
+        });
+    };
+}
+
+// Note: Main DOMContentLoaded event listener is already defined at the top of the file
+// Just adding the new initializations to the existing initialization list above
+
+// Show validation error message for deleted users page
+window.showValidationError = function(message) {
+    const errorDiv = document.getElementById('validationError');
+    const errorMessage = document.getElementById('validationErrorMessage');
+    if (errorDiv && errorMessage) {
+        errorMessage.textContent = message;
+        errorDiv.classList.remove('hidden');
+
+        // Scroll to the error message
+        errorDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+        // Auto-hide after 5 seconds
+        setTimeout(() => {
+            errorDiv.classList.add('hidden');
+        }, 5000);
+    }
+};
+
+// Hide validation error
+window.hideValidationError = function() {
+    const errorDiv = document.getElementById('validationError');
+    if (errorDiv) {
+        errorDiv.classList.add('hidden');
+    }
+};
+
+// Confirm bulk action for deleted users
+window.confirmBulkAction = function(event) {
+    const action = document.getElementById('bulkAction')?.value;
+    const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
+
+    if (!action) {
+        event.preventDefault();
+        showValidationError('Please select an action from the dropdown.');
+        return false;
+    }
+
+    if (checkedBoxes.length === 0) {
+        event.preventDefault();
+        showValidationError('Please select at least one user to perform this action.');
+        return false;
+    }
+
+    // Show confirmation dialog with appropriate message
+    let confirmMessage = '';
+    if (action === 'delete') {
+        confirmMessage = `Are you sure you want to PERMANENTLY delete ${checkedBoxes.length} user(s)?\n\nThis action cannot be undone!`;
+    } else if (action === 'restore') {
+        confirmMessage = `Are you sure you want to restore ${checkedBoxes.length} user(s)?`;
+    }
+
+    if (!confirm(confirmMessage)) {
+        event.preventDefault();
+        return false;
+    }
+
+    return true;
+};
+
diff --git a/resources/smarty/plugins/block.php.php b/resources/smarty/plugins/block.php.php
deleted file mode 100755
index e40ead937..000000000
--- a/resources/smarty/plugins/block.php.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/**
- * Smarty plugin to execute PHP code.
- *
- * @author Uwe Tews
- */
-/**
- * Smarty {php}{/php} block plugin.
- *
- * @param  string  $content  contents of the block
- * @param  object  $template  template object
- * @param bool $ &$repeat repeat flag
- * @return string content re-formatted
- */
-function smarty_block_php($params, $content, $template, &$repeat)
-{
-    if (! $template->allow_php_tag) {
-        throw new SmartyException('{php} is deprecated, set allow_php_tag = true to enable');
-    }
-    eval($content);
-
-    return '';
-}
diff --git a/resources/smarty/plugins/function.getcatval.php b/resources/smarty/plugins/function.getcatval.php
deleted file mode 100755
index 3c7fee49a..000000000
--- a/resources/smarty/plugins/function.getcatval.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-/**
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- * You should have received a copy of the GNU General Public License
- * along with this program (see LICENSE.txt in the base directory.  If
- * not, see:.
- *
- * @link      <http://www.gnu.org/licenses/>.
- *
- * @author    niel
- * @copyright 2016 nZEDb
- */
-use App\Models\Category;
-
-/**
- * Returns the value of the specified Category constant.
- *
- * @usage {getcatval category=BOOKS_COMICS}
- *
- * @param  string  $params  Name of constant whose value to return.
- * @return Value of the specified Category constant.
- */
-function smarty_function_getcatval($params)
-{
-    return Category::getCategoryValue($params['category']);
-}
diff --git a/resources/smarty/plugins/function.html_options_multiple.php b/resources/smarty/plugins/function.html_options_multiple.php
deleted file mode 100755
index b04cf61ec..000000000
--- a/resources/smarty/plugins/function.html_options_multiple.php
+++ /dev/null
@@ -1,185 +0,0 @@
-<?php
-
-/**
- * Smarty plugin.
- */
-
-// Fix by nZEDb
-require_once 'load_plugin_dependency.php';
-// End fix by nZEDb.
-
-/**
- * Smarty {html_options_multiple} function plugin.
- *
- * Type:     function<br>
- * Name:     html_options_multiple<br>
- * Purpose:  Prints the list of <option> tags generated from
- *           the passed parameters<br>
- * Params:
- * <pre>
- * - name       (optional) - string default "select"
- * - values     (required) - if no options supplied) - array
- * - options    (required) - if no values supplied) - associative array
- * - selected   (optional) - string default not set
- * - output     (required) - if not options supplied) - array
- * - id         (optional) - string default not set
- * - class      (optional) - string default not set
- * </pre>
- *
- * @link http://www.smarty.net/manual/en/language.function.html.options.php {html_image}
- *      (Smarty online manual)
- *
- * @author Monte Ohrt <monte at ohrt dot com>
- * @author Ralf Strehle (minor optimization) <ralf dot strehle at yahoo dot de>
- *
- * @param  array  $params  parameters
- * @param  Smarty_Internal_Template  $template  template object
- * @return string
- *
- * @uses smarty_function_escape_special_chars()
- */
-function smarty_function_html_options_multiple($params, $template)
-{
-    load_plugin_dependency('shared.escape_special_chars.php');
-    $name = null;
-    $values = null;
-    $options = null;
-    $selected = null;
-    $output = null;
-    $id = null;
-    $class = null;
-    $extra = '';
-    foreach ($params as $_key => $_val) {
-        switch ($_key) {
-            case 'name':
-            case 'class':
-            case 'id':
-                $$_key = (string) $_val;
-                break;
-            case 'options':
-                $options = (array) $_val;
-                break;
-            case 'values':
-            case 'output':
-                $$_key = array_values((array) $_val);
-                break;
-            case 'selected':
-                if (is_array($_val)) {
-                    $selected = [];
-                    foreach ($_val as $_sel) {
-                        if (is_object($_sel)) {
-                            if (method_exists($_sel, '__toString')) {
-                                $_sel = smarty_function_escape_special_chars((string) $_sel->__toString());
-                            } else {
-                                trigger_error("html_options_multiple: selected attribute contains an object of class '".get_class($_sel)."' without __toString() method", E_USER_NOTICE);
-
-                                continue;
-                            }
-                        } else {
-                            $_sel = smarty_function_escape_special_chars((string) $_sel);
-                        }
-                        $selected[$_sel] = true;
-                    }
-                } elseif (is_object($_val)) {
-                    if (method_exists($_val, '__toString')) {
-                        $selected = smarty_function_escape_special_chars((string) $_val->__toString());
-                    } else {
-                        trigger_error("html_options_multiple: selected attribute is an object of class '".get_class($_val)."' without __toString() method", E_USER_NOTICE);
-                    }
-                } else {
-                    $selected = smarty_function_escape_special_chars((string) $_val);
-                }
-                break;
-            case 'strict': break;
-            case 'disabled':
-            case 'readonly':
-                if (! empty($params['strict'])) {
-                    if (! is_scalar($_val)) {
-                        trigger_error("html_options_multiple: $_key attribute must be a scalar, only boolean true or string '$_key' will actually add the attribute", E_USER_NOTICE);
-                    }
-                    if ($_val === true || $_val === $_key) {
-                        $extra .= ' '.$_key.'="'.smarty_function_escape_special_chars($_key).'"';
-                    }
-                    break;
-                }
-                // omit break; to fall through!
-                // no break
-            default:
-                if (! is_array($_val)) {
-                    $extra .= ' '.$_key.'="'.smarty_function_escape_special_chars($_val).'"';
-                } else {
-                    trigger_error("html_options_multiple: extra attribute '$_key' cannot be an array", E_USER_NOTICE);
-                }
-                break;
-        }
-    }
-    if (! isset($options) && ! isset($values)) {
-        /* raise error here? */
-        return '';
-    }
-    $_html_result = '';
-    $_idx = 0;
-    if (isset($options)) {
-        foreach ($options as $_key => $_val) {
-            $_html_result .= smarty_function_html_options_multiple_optoutput($_key, $_val, $selected, $id, $class, $_idx);
-        }
-    } else {
-        foreach ($values as $_i => $_key) {
-            $_val = isset($output[$_i]) ? $output[$_i] : '';
-            $_html_result .= smarty_function_html_options_multiple_optoutput($_key, $_val, $selected, $id, $class, $_idx);
-        }
-    }
-    if (! empty($name)) {
-        $_html_class = ! empty($class) ? ' class="'.$class.'"' : '';
-        $_html_id = ! empty($id) ? ' id="'.$id.'"' : '';
-        // the name needs to have [] added (this is html text [] not PHP, so that the return for the multiselect is an array
-        $_html_result = '<select multiple="multiple" name="'.$name.'[]"'.$_html_class.$_html_id.$extra.'>'."\n".$_html_result.'</select>'."\n";
-    }
-
-    return $_html_result;
-}
-function smarty_function_html_options_multiple_optoutput($key, $value, $selected, $id, $class, &$idx)
-{
-    if (! is_array($value)) {
-        $_key = smarty_function_escape_special_chars($key);
-        $_html_result = '<option value="'.$_key.'"';
-        if (is_array($selected)) {
-            if (isset($selected[$_key])) {
-                $_html_result .= ' selected="selected"';
-            }
-        } elseif ($_key === $selected) {
-            $_html_result .= ' selected="selected"';
-        }
-        $_html_class = ! empty($class) ? ' class="'.$class.' option"' : '';
-        $_html_id = ! empty($id) ? ' id="'.$id.'-'.$idx.'"' : '';
-        if (is_object($value)) {
-            if (method_exists($value, '__toString')) {
-                $value = smarty_function_escape_special_chars((string) $value->__toString());
-            } else {
-                trigger_error("html_options_multiple: value is an object of class '".get_class($value)."' without __toString() method", E_USER_NOTICE);
-
-                return '';
-            }
-        } else {
-            $value = smarty_function_escape_special_chars((string) $value);
-        }
-        $_html_result .= $_html_class.$_html_id.'>'.$value.'</option>'."\n";
-        $idx++;
-    } else {
-        $_idx = 0;
-        $_html_result = smarty_function_html_options_multiple_optgroup($key, $value, $selected, ! empty($id) ? ($id.'-'.$idx) : null, $class, $_idx);
-        $idx++;
-    }
-
-    return $_html_result;
-}
-function smarty_function_html_options_multiple_optgroup($key, $values, $selected, $id, $class, &$idx)
-{
-    $optgroup_html = '<optgroup label="'.smarty_function_escape_special_chars($key).'">'."\n";
-    foreach ($values as $key => $value) {
-        $optgroup_html .= smarty_function_html_options_multiple_optoutput($key, $value, $selected, $id, $class, $idx);
-    }
-    $optgroup_html .= "</optgroup>\n";
-
-    return $optgroup_html;
-}
diff --git a/resources/smarty/plugins/load_plugin_dependency.php b/resources/smarty/plugins/load_plugin_dependency.php
deleted file mode 100644
index fa0943624..000000000
--- a/resources/smarty/plugins/load_plugin_dependency.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-use Ytake\LaravelSmarty\Smarty;
-
-function load_plugin_dependency($filename)
-{
-    global $smarty;
-
-    if (! isset($smarty)) {
-        $smarty = new Smarty;
-    }
-
-    switch (true) {
-        case is_string($smarty->getPluginsDir()) && is_dir($smarty->getPluginsDir()):
-            $plugins_dir = $smarty->getPluginsDir();
-            require_once $plugins_dir.DIRECTORY_SEPARATOR.$filename;
-            break;
-        case is_array($smarty->getPluginsDir()):
-            $plugins_dir = '';
-            foreach ($smarty->getPluginsDir() as $dir) {
-                if (is_string($dir) && is_dir($dir)) {
-                    $file = $dir.DIRECTORY_SEPARATOR.$filename;
-                    if (file_exists($file) && is_readable($file)) {
-                        $plugins_dir = $dir;
-                        require_once $file;
-                        break;
-                    }
-                }
-            }
-            break;
-        default:
-            $plugins_dir = '';
-    }
-
-    if (! is_dir($plugins_dir)) {
-        exit('Fatal: Unable to find smarty plugins directory.'.PHP_EOL);
-    }
-}
diff --git a/resources/smarty/plugins/modifier.daysago.php b/resources/smarty/plugins/modifier.daysago.php
deleted file mode 100755
index 89a7e00ab..000000000
--- a/resources/smarty/plugins/modifier.daysago.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/**
- * Smarty plugin.
- */
-/**
- * Smarty date modifier plugin
- * Purpose:  converts unix timestamps or datetime strings to words
- * Type:     modifier<br>
- * Name:     daysAgo<br>.
- *
- * @author   Stephan Otto
- *
- * @param string
- * @return string
- */
-function smarty_modifier_daysAgo($date)
-{
-    if ($date == '') {
-        return 'n/a';
-    }
-    $sec = mktime(0, 0, 0, date('m'), date('d'), date('Y')) - ((strtotime($date)) ? strtotime(date('Y-m-d', strtotime($date))) : strtotime(date('Y-m-d', $date)));
-    $min = $sec / 60;
-    $hrs = $min / 60;
-    $days = $sec / 60 / 60 / 24;
-    if ($hrs <= 24) {
-        return ' Today';
-    }
-    if ($days >= 365) {
-        $years = round(($days / 365), 1);
-
-        return $years.' Yr'.($years != 1 ? 's' : '').' ago';
-    } elseif ($days >= 90) {
-        return round($days / 7).' Wks ago';
-    } elseif ($days <= 2) {
-        return 'Yesterday';
-    } else {
-        return round($days, 0).'d ago';
-    }
-}
diff --git a/resources/smarty/plugins/modifier.filesize.php b/resources/smarty/plugins/modifier.filesize.php
deleted file mode 100644
index dc5352f35..000000000
--- a/resources/smarty/plugins/modifier.filesize.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/**
- * Smarty plugin
- */
-
-/**
- * Smarty replace modifier plugin
- *
- * Type:     modifier<br>
- * Name:     filesize<br>
- * Purpose:  show the filesize of a file in kb, mb, gb etc...
- *
- * @param string $
- * @return string
- */
-function smarty_modifier_filesize($size)
-{
-    $size = max(0, (int) $size);
-    $units = ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
-    $power = $size > 0 ? floor(log($size, 1024)) : 0;
-
-    return number_format($size / (1024 ** $power), 2, '.', ',').$units[$power];
-}
diff --git a/resources/smarty/plugins/modifier.fsize_format.php b/resources/smarty/plugins/modifier.fsize_format.php
deleted file mode 100755
index 30682579d..000000000
--- a/resources/smarty/plugins/modifier.fsize_format.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php
-
-/*
-* Smarty plugin
-* -------------------------------------------------------------
-* Type:    modifier
-* Name:    fsize_format
-* Version:    0.2
-* Date:    2003-05-15
-* Author:    Joscha Feth, joscha@feth.com
-* Purpose: formats a filesize (in bytes) to human-readable format
-* Usage:    In the template, use
-            {$filesize|fsize_format}    =>    123.45 B|KB|MB|GB|TB
-            or
-            {$filesize|fsize_format:"MB"}    =>    123.45 MB
-            or
-            {$filesize|fsize_format:"TB":4}    =>    0.0012 TB
-* Params:
-            int        size            the filesize in bytes
-            string    format            the format, the output shall be: B, KB, MB, GB or TB
-            int        precision        the rounding precision
-            string    dec_point        the decimal separator
-            string    thousands_sep    the thousands separator
-* Install: Drop into the plugin directory
-* Version:
-*            2007-05-24    Version 0.3    - added the peta, exa, zeta, and yeta byte magnitudes thanks to coreone (at) gmail (dot) com
-*            2003-05-15    Version 0.2    - added dec_point and thousands_sep thanks to Thomas Brandl, tbrandl@barff.de
-*                                    - made format always uppercase
-*                                    - count sizes "on-the-fly"
-*            2003-02-21    Version 0.1    - initial release
-* -------------------------------------------------------------
-*/
-function smarty_modifier_fsize_format($size, $format = '', $precision = 2, $dec_point = '.', $thousands_sep = ',')
-{
-    $format = strtoupper($format);
-    static $sizes = [];
-    if (! count($sizes)) {
-        $b = 1024;
-        $sizes['B'] = 1;
-        $sizes['KB'] = $sizes['B'] * $b;
-        $sizes['MB'] = $sizes['KB'] * $b;
-        $sizes['GB'] = $sizes['MB'] * $b;
-        $sizes['TB'] = $sizes['GB'] * $b;
-        $sizes['PB'] = $sizes['TB'] * $b;
-        $sizes['EB'] = $sizes['PB'] * $b;
-        $sizes['ZB'] = $sizes['EB'] * $b;
-        $sizes['YB'] = $sizes['ZB'] * $b;
-        $sizes = array_reverse($sizes, true);
-    }
-    // ~ get "human" filesize
-    foreach ($sizes as $unit => $bytes) {
-        if ($size > $bytes || $unit == $format) {
-            // ~ return formatted size
-            return number_format($size / $bytes, $precision, $dec_point, $thousands_sep).' '.$unit;
-        } // ~ end if
-    } // ~ end foreach
-} // ~ end function
diff --git a/resources/smarty/plugins/modifier.magicurl.php b/resources/smarty/plugins/modifier.magicurl.php
deleted file mode 100755
index c45fea962..000000000
--- a/resources/smarty/plugins/modifier.magicurl.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php
-
-/**
- * Smarty plugin.
- */
-/**
- * Smarty magicurl modifier plugin.
- *
- * Type:     modifier<br>
- * Name:     magicurl<br>
- * Purpose:  turn www addresses into hyperlinks
- *
- * @author   bb
- *
- * @param string
- * @return string
- */
-function smarty_modifier_magicurl($str, $dereferrer = '')
-{
-    return preg_replace('/(https?):\/\/([A-Za-z0-9\._\-\/\?=&;%]+)/is', '<a href="'.$dereferrer.'$1://$2" target="_blank">$1://$2</a>', $str);
-}
diff --git a/resources/smarty/plugins/modifier.nl2br.php b/resources/smarty/plugins/modifier.nl2br.php
deleted file mode 100755
index ecb54f164..000000000
--- a/resources/smarty/plugins/modifier.nl2br.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/**
- * Smarty plugin.
- */
-/**
- * Smarty plugin.
- *
- * Type:     modifier<br>
- * Name:     nl2br<br>
- * Date:     Feb 26, 2003
- * Purpose:  convert \r\n, \r or \n to <<br>>
- * Input:<br>
- *         - contents = contents to replace
- *         - preceed_test = if true, includes preceeding break tags
- *           in replacement
- * Example:  {$text|nl2br}
- *
- * @link http://smarty.php.net/manual/en/language.modifier.nl2br.php
- *          nl2br (Smarty online manual)
- *
- * @version  1.0
- *
- * @author   Monte Ohrt <monte at ohrt dot com>
- *
- * @param string
- * @return string
- */
-function smarty_modifier_nl2br($string)
-{
-    return nl2br($string);
-}
-/* vim: set expandtab: */
diff --git a/resources/smarty/plugins/modifier.parray.php b/resources/smarty/plugins/modifier.parray.php
deleted file mode 100755
index b0640c812..000000000
--- a/resources/smarty/plugins/modifier.parray.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php
-
-function smarty_modifier_parray($string, $explode, $limit = null)
-{
-    if ($limit == null) {
-        return explode($explode, $string);
-    } else {
-        return explode($explode, $string, $limit);
-    }
-}
diff --git a/resources/smarty/plugins/modifier.phpdate_format.php b/resources/smarty/plugins/modifier.phpdate_format.php
deleted file mode 100755
index 70ff7372a..000000000
--- a/resources/smarty/plugins/modifier.phpdate_format.php
+++ /dev/null
@@ -1,105 +0,0 @@
-<?php
-
-/**
- * Smarty plugin
- * phpdate_format plugin
- * Sam Easterby-Smith
- * Does exactly what the normal date_format plugin does - only it uses date() rather than strftime()
- * It also supports the various php date constants for doing things like rfc822 dates.
- */
-
-use Ytake\LaravelSmarty\Smarty;
-
-/**
- * Include the {@link shared.make_timestamp.php} plugin.
- */
-// Fix by nZEDb
-if (! isset($smarty)) {
-    $smarty = new Smarty;
-}
-switch (true) {
-    case is_string($smarty->getPluginsDir()) && is_dir($smarty->getPluginsDir()):
-        $plugins_dir = $smarty->getPluginsDir();
-        break;
-    case is_array($smarty->getPluginsDir()):
-        $plugins_dir = '';
-        foreach ($smarty->getPluginsDir() as $dir) {
-            if (is_string($dir) && is_dir($dir)) {
-                $plugins_dir = $dir;
-                break;
-            }
-        }
-        break;
-    default:
-        $plugins_dir = '';
-}
-if (! is_dir($plugins_dir)) {
-    exit('Fatal: Unable to find smarty plugins directory.'.PHP_EOL);
-}
-// End fix by nZEDb.
-require_once $plugins_dir.'shared.make_timestamp.php';
-/**
- * Smarty phpdate_format modifier plugin.
- *
- * Type:     modifier<br>
- * Name:     date_format<br>
- * Purpose:  format datestamps via date()<br>
- * Input:<br>
- *         - string: input date string
- *         - format: strftime format for output
- *         - default_date: default date if $string is empty
- *
- * @link http://smarty.php.net/manual/en/language.modifier.date.format.php
- *          date_format (Smarty online manual)
- *
- * @param string
- * @param string
- * @param string
- * @return string|void
- *
- * @uses smarty_make_timestamp()
- */
-function smarty_modifier_phpdate_format($string, $format = 'Y/m/d H:i:s', $default_date = null)
-{
-    /*  if (substr(PHP_OS,0,3) == 'WIN') {
-           $_win_from = array ('%e',  '%T',       '%D');
-           $_win_to   = array ('%#d', '%H:%M:%S', '%m/%d/%y');
-           $format = str_replace($_win_from, $_win_to, $format);
-    }*/
-    if (substr($format, 0, 5) == 'DATE_') {
-        switch ($format) {
-            case 'DATE_ATOM': $nformat = DATE_ATOM;
-                break;
-            case 'DATE_COOKIE': $nformat = DATE_COOKIE;
-                break;
-            case 'DATE_ISO8601': $nformat = DATE_ISO8601;
-                break;
-            case 'DATE_RFC822': $nformat = 'D, d M y H:i:s O';
-                break; // The php constant is not quite right - as the time-zone comes out with invalid values like "UTC"...
-            case 'DATE_RFC850': $nformat = DATE_RFC850;
-                break;
-            case 'DATE_RFC1036': $nformat = DATE_RFC1036;
-                break;
-            case 'DATE_RFC1123': $nformat = DATE_RFC1123;
-                break;
-            case 'DATE_RFC2822': $nformat = DATE_RFC2822;
-                break;
-            case 'DATE_RFC3339': $nformat = DATE_RFC3339;
-                break;
-            case 'DATE_RSS': $nformat = 'D, d M Y H:i:s O';
-                break; // as rfc822 ...
-            case 'DATE_W3C': $nformat = DATE_W3C;
-                break;
-        }
-    } else {
-        $nformat = $format;
-    }
-    if ($string != '') {
-        return date($nformat, smarty_make_timestamp($string));
-    } elseif (isset($default_date) && $default_date != '') {
-        return date($nformat, smarty_make_timestamp($default_date));
-    } else {
-        return;
-    }
-}
-/* vim: set expandtab: */
diff --git a/resources/smarty/plugins/modifier.strtotime.php b/resources/smarty/plugins/modifier.strtotime.php
deleted file mode 100755
index 804a785a1..000000000
--- a/resources/smarty/plugins/modifier.strtotime.php
+++ /dev/null
@@ -1,6 +0,0 @@
-<?php
-
-function smarty_modifier_strtotime($date)
-{
-    return strtotime($date);
-}
diff --git a/resources/smarty/plugins/modifier.timeago.php b/resources/smarty/plugins/modifier.timeago.php
deleted file mode 100755
index ce029c656..000000000
--- a/resources/smarty/plugins/modifier.timeago.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<?php
-
-/**
- * Smarty plugin.
- */
-/**
- * Smarty date modifier plugin
- * Purpose:  converts unix timestamps or datetime strings to words
- * Type:     modifier<br>
- * Name:     timeAgo<br>.
- *
- * @author   Stephan Otto
- *
- * @param string
- * @return string
- */
-function smarty_modifier_timeAgo($date)
-{
-    if ($date == '') {
-        return 'n/a';
-    }
-    $timeStrings = ['now',      // 0
-        'Sec', 'Secs',    // 1,1
-        'Min', 'Mins',     // 3,3
-        'Hour', 'Hrs',  // 5,5
-        'Day', 'Days', ];
-    $sec = time() - ((! is_numeric($date) && strtotime($date)) ? strtotime($date) : $date);
-    if ($sec <= 0) {
-        return $timeStrings[0];
-    }
-    if ($sec < 2) {
-        return $sec.' '.$timeStrings[1];
-    }
-    if ($sec < 60) {
-        return $sec.' '.$timeStrings[2];
-    }
-    $min = $sec / 60;
-    if (floor($min + 0.5) < 2) {
-        return floor($min + 0.5).' '.$timeStrings[3];
-    }
-    if ($min < 60) {
-        return floor($min + 0.5).' '.$timeStrings[4];
-    }
-    $hrs = $min / 60;
-    if (floor($hrs + 0.5) < 2) {
-        return floor($hrs + 0.5).' '.$timeStrings[5];
-    }
-    if ($hrs < 24) {
-        return floor($hrs + 0.5).' '.$timeStrings[6];
-    }
-    $days = $sec / 60 / 60 / 24;
-    if ($days > 365) {
-        return round(($days / 365), 1).' Yrs';
-    } elseif ($days > 90) {
-        return round($days / 7).' Wks';
-    } else {
-        return round($days, 1).'d';
-    }
-}
diff --git a/resources/smarty/plugins/shared.make_timestamp.php b/resources/smarty/plugins/shared.make_timestamp.php
deleted file mode 100644
index 47eb30904..000000000
--- a/resources/smarty/plugins/shared.make_timestamp.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/**
- * Smarty shared plugin.
- */
-
-/**
- * Function: smarty_make_timestamp<br>
- * Purpose:  used by other smarty functions to make a timestamp from a string.
- *
- * @author   Monte Ohrt <monte at ohrt dot com>
- *
- * @param  DateTime|int|string  $string  date object, timestamp or string that can be converted using strtotime()
- * @return int
- */
-function smarty_make_timestamp($string)
-{
-    if (empty($string)) {
-        // use "now":
-        return time();
-    } elseif ($string instanceof DateTime || (interface_exists('DateTimeInterface', false) && $string instanceof DateTimeInterface)) {
-        return (int) $string->format('U'); // PHP 5.2 BC
-    } elseif (strlen($string) == 14 && ctype_digit($string)) {
-        // it is mysql timestamp format of YYYYMMDDHHMMSS?
-        return mktime(
-            substr($string, 8, 2),
-            substr($string, 10, 2),
-            substr($string, 12, 2),
-            substr($string, 4, 2),
-            substr($string, 6, 2),
-            substr($string, 0, 4)
-        );
-    } elseif (is_numeric($string)) {
-        // it is a numeric string, we handle it as timestamp
-        return (int) $string;
-    } else {
-        // strtotime should handle it
-        $time = strtotime($string);
-        if ($time == -1 || $time === false) {
-            // strtotime() was not able to parse $string, use "now":
-            return time();
-        }
-
-        return $time;
-    }
-}
diff --git a/resources/views/admin/anidb/index.blade.php b/resources/views/admin/anidb/index.blade.php
index 3472c866a..445d8ddbb 100644
--- a/resources/views/admin/anidb/index.blade.php
+++ b/resources/views/admin/anidb/index.blade.php
@@ -161,15 +161,6 @@
     </div>
 </div>
 
-@push('styles')
-<style>
-    .line-clamp-2 {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-</style>
-@endpush
+{{-- Styles moved to resources/css/csp-safe.css --}}
 @endsection
 
diff --git a/resources/views/admin/blacklist/edit.blade.php b/resources/views/admin/blacklist/edit.blade.php
index cea569988..b73fdba7c 100644
--- a/resources/views/admin/blacklist/edit.blade.php
+++ b/resources/views/admin/blacklist/edit.blade.php
@@ -180,24 +180,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const form = document.getElementById('blacklistForm');
-    if (form) {
-        form.addEventListener('submit', function(event) {
-            const groupname = document.getElementById('groupname');
-            const regex = document.getElementById('regex');
-
-            if (!groupname.value.trim() || !regex.value.trim()) {
-                event.preventDefault();
-                alert('Please fill in all required fields.');
-                return false;
-            }
-        });
-    }
-});
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/blacklist/index.blade.php b/resources/views/admin/blacklist/index.blade.php
index b955f37c8..dc39b11f2 100644
--- a/resources/views/admin/blacklist/index.blade.php
+++ b/resources/views/admin/blacklist/index.blade.php
@@ -113,7 +113,7 @@
                                         </a>
                                         <button type="button"
                                                 class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
-                                                onclick="if(confirm('Are you sure? This will delete the blacklist from this list.')) { ajax_binaryblacklist_delete({{ $bin->id }}) }"
+                                                data-delete-blacklist="{{ $bin->id }}"
                                                 title="Delete this blacklist">
                                             <i class="fa fa-trash"></i>
                                         </button>
@@ -147,56 +147,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-function ajax_binaryblacklist_delete(id) {
-    fetch('{{ url("/admin/binaryblacklist-delete") }}?id=' + id, {
-        method: 'GET',
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        }
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            const row = document.getElementById('row-' + id);
-            row.style.transition = 'opacity 0.3s';
-            row.style.opacity = '0';
-            setTimeout(() => row.remove(), 300);
-            showMessage('Blacklist entry deleted successfully', 'success');
-        } else {
-            showMessage('Error deleting blacklist entry', 'error');
-        }
-    })
-    .catch(error => {
-        showMessage('Error deleting blacklist entry', 'error');
-    });
-}
-
-function showMessage(message, type = 'success') {
-    const messageDiv = document.getElementById('message');
-    const bgColor = type === 'success' ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
-    const textColor = type === 'success' ? 'text-green-800 dark:text-green-300' : 'text-red-800 dark:text-red-300';
-    const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
-
-    messageDiv.innerHTML = `
-        <div class="mt-4 p-4 ${bgColor} border rounded-lg">
-            <div class="flex items-center justify-between">
-                <p class="${textColor}">
-                    <i class="fa fa-${icon} mr-2"></i>${message}
-                </p>
-                <button type="button" class="${textColor} hover:opacity-75" onclick="this.parentElement.parentElement.remove()">
-                    <i class="fa fa-times"></i>
-                </button>
-            </div>
-        </div>
-    `;
-    setTimeout(() => {
-        messageDiv.innerHTML = '';
-    }, 5000);
-}
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/books/edit.blade.php b/resources/views/admin/books/edit.blade.php
index bedc408dc..86a9b30cc 100644
--- a/resources/views/admin/books/edit.blade.php
+++ b/resources/views/admin/books/edit.blade.php
@@ -115,9 +115,8 @@
                                 @if(isset($book['cover']) && $book['cover'] == 1)
                                     <img src="{{ asset('storage/covers/book/' . $book['id'] . '.jpg') }}"
                                          alt="{{ $book['title'] }}"
-                                         class="max-w-full h-auto mx-auto rounded shadow-lg"
-                                         style="max-height: 400px;"
-                                         onerror="this.src='{{ asset('images/no-cover.png') }}'">
+                                         class="max-w-full h-auto mx-auto rounded shadow-lg img-max-h-400"
+                                         data-fallback-src="{{ asset('images/no-cover.png') }}">
                                 @else
                                     <div class="flex flex-col items-center justify-center py-12 text-gray-400 dark:text-gray-500">
                                         <i class="fas fa-book text-6xl mb-3"></i>
@@ -189,22 +188,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-    // Preview image before upload
-    document.getElementById('cover')?.addEventListener('change', function(e) {
-        if (e.target.files && e.target.files[0]) {
-            const reader = new FileReader();
-            reader.onload = function(event) {
-                const img = document.querySelector('img[alt="{{ $book['title'] ?? '' }}"]');
-                if (img) {
-                    img.src = event.target.result;
-                }
-            }
-            reader.readAsDataURL(e.target.files[0]);
-        }
-    });
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/books/index.blade.php b/resources/views/admin/books/index.blade.php
index 2a9d6a666..060d7e244 100644
--- a/resources/views/admin/books/index.blade.php
+++ b/resources/views/admin/books/index.blade.php
@@ -37,7 +37,7 @@
                                     <img src="{{ asset('storage/covers/book/' . $book->id . '.jpg') }}"
                                          alt="{{ $book->title }}"
                                          class="h-16 w-12 object-cover rounded shadow"
-                                         onerror="this.src='{{ asset('images/no-cover.png') }}'">
+                                         data-fallback-src="{{ asset('images/no-cover.png') }}">
                                 @else
                                     <div class="h-16 w-12 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
                                         <i class="fas fa-book text-gray-400"></i>
diff --git a/resources/views/admin/categories/edit.blade.php b/resources/views/admin/categories/edit.blade.php
index 6344aa6b1..b62b76406 100644
--- a/resources/views/admin/categories/edit.blade.php
+++ b/resources/views/admin/categories/edit.blade.php
@@ -134,10 +134,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-// Form validation can be added here if needed in the future
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/categories/index.blade.php b/resources/views/admin/categories/index.blade.php
index 9d03b53c2..79a0de704 100644
--- a/resources/views/admin/categories/index.blade.php
+++ b/resources/views/admin/categories/index.blade.php
@@ -185,28 +185,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-// Delete confirmation handling
-function confirmDelete(id) {
-    const modal = document.getElementById('deleteModal');
-    const deleteLink = document.getElementById('confirmDeleteLink');
-    deleteLink.href = `{{ url('/admin/category-delete?id=') }}${id}`;
-    modal.classList.remove('hidden');
-}
-
-function closeDeleteModal() {
-    const modal = document.getElementById('deleteModal');
-    modal.classList.add('hidden');
-}
-
-// Close modal when clicking outside
-document.getElementById('deleteModal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeDeleteModal();
-    }
-});
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/comments/index.blade.php b/resources/views/admin/comments/index.blade.php
index 2ec5373d9..73315ef2f 100644
--- a/resources/views/admin/comments/index.blade.php
+++ b/resources/views/admin/comments/index.blade.php
@@ -184,79 +184,8 @@
     </div>
 </div>
 
-@push('styles')
-<style>
-    .line-clamp-2 {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-</style>
-@endpush
+{{-- Styles moved to resources/css/csp-safe.css --}}
 
-@push('scripts')
-<script>
-function openDeleteModal(commentId, commentText) {
-    const modal = document.getElementById('deleteModal');
-    const form = document.getElementById('deleteForm');
-    const preview = document.getElementById('deleteCommentPreview');
-
-    // Set the form action
-    form.action = "{{ url('admin/comments-delete') }}/" + commentId;
-
-    // Set the comment preview
-    preview.textContent = '"' + commentText + (commentText.length >= 50 ? '..."' : '"');
-
-    // Show the modal
-    modal.classList.remove('hidden');
-    modal.classList.add('flex');
-
-    // Prevent body scroll
-    document.body.style.overflow = 'hidden';
-}
-
-function closeDeleteModal() {
-    const modal = document.getElementById('deleteModal');
-
-    // Hide the modal
-    modal.classList.add('hidden');
-    modal.classList.remove('flex');
-
-    // Restore body scroll
-    document.body.style.overflow = '';
-}
-
-// Close modal on escape key
-document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape') {
-        closeDeleteModal();
-    }
-});
-
-// Close modal when clicking outside
-document.getElementById('deleteModal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeDeleteModal();
-    }
-});
-
-// Auto-dismiss flash messages after 5 seconds
-document.addEventListener('DOMContentLoaded', function() {
-    setTimeout(function() {
-        const flashMessages = document.querySelectorAll('[class*="bg-green-50"], [class*="bg-red-50"]');
-        flashMessages.forEach(function(message) {
-            if (message.querySelector('.fa-check-circle') || message.querySelector('.fa-exclamation-circle')) {
-                message.style.transition = 'opacity 0.5s';
-                message.style.opacity = '0';
-                setTimeout(function() {
-                    message.remove();
-                }, 500);
-            }
-        });
-    }, 5000);
-});
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/console/edit.blade.php b/resources/views/admin/console/edit.blade.php
index 02cf86c9b..575c38358 100644
--- a/resources/views/admin/console/edit.blade.php
+++ b/resources/views/admin/console/edit.blade.php
@@ -166,8 +166,7 @@
                                 @if($hasCover)
                                     <img src="{{ asset('covers/console/' . $con['id'] . '.jpg') }}"
                                          alt="{{ $con['title'] }}"
-                                         class="max-w-full h-auto mx-auto rounded shadow-lg"
-                                         style="max-height: 400px;">
+                                         class="max-w-full h-auto mx-auto rounded shadow-lg img-max-h-400">
                                 @else
                                     <div class="flex flex-col items-center justify-center py-12 text-gray-400 dark:text-gray-500">
                                         <i class="fas fa-gamepad text-6xl mb-3"></i>
@@ -239,22 +238,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-    // Preview image before upload
-    document.getElementById('cover')?.addEventListener('change', function(e) {
-        if (e.target.files && e.target.files[0]) {
-            const reader = new FileReader();
-            reader.onload = function(event) {
-                const img = document.querySelector('img[alt="{{ $con['title'] ?? '' }}"]');
-                if (img) {
-                    img.src = event.target.result;
-                }
-            }
-            reader.readAsDataURL(e.target.files[0]);
-        }
-    });
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/content/add.blade.php b/resources/views/admin/content/add.blade.php
index e0c91f82c..6274e9134 100644
--- a/resources/views/admin/content/add.blade.php
+++ b/resources/views/admin/content/add.blade.php
@@ -54,6 +54,7 @@
                     <textarea id="body"
                               name="body"
                               rows="15"
+                              data-tinymce-api-key="{{ config('tinymce.api_key', 'no-api-key') }}"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100">{{ is_array($content) ? trim(($content['body'] ?? ''), '\'"') : trim(($content->body ?? ''), '\'"') }}</textarea>
                     <p class="mt-1 text-sm text-gray-500">Use the rich text editor to format your content</p>
                 </div>
@@ -165,127 +166,5 @@
         </form>
     </div>
 </div>
-
-@push('scripts')
-<!-- TinyMCE 8 (Latest Version) -->
-<script src="https://cdn.tiny.cloud/1/{{ config('tinymce.api_key', 'no-api-key') }}/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
-<script>
-// Function to detect if dark mode is active
-function isDarkMode() {
-    return document.documentElement.classList.contains('dark') ||
-           (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
-}
-
-// Function to get TinyMCE config
-function getTinyMCEConfig() {
-    const darkMode = isDarkMode();
-    return {
-        selector: '#body',
-        height: 500,
-        menubar: true,
-        skin: darkMode ? 'oxide-dark' : 'oxide',
-        content_css: darkMode ? 'dark' : 'default',
-        plugins: [
-            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
-            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-            'insertdatetime', 'media', 'table', 'help', 'wordcount', 'emoticons'
-        ],
-        toolbar: 'undo redo | blocks fontfamily fontsize | ' +
-            'bold italic underline strikethrough | forecolor backcolor | ' +
-            'alignleft aligncenter alignright alignjustify | ' +
-            'bullist numlist outdent indent | ' +
-            'link image media table emoticons | ' +
-            'removeformat code fullscreen | help',
-        toolbar_mode: 'sliding',
-        content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; }',
-        branding: false,
-        promotion: false,
-        resize: true,
-        statusbar: true,
-        elementpath: true,
-        images_upload_url: false,
-        automatic_uploads: false,
-        file_picker_types: 'image',
-        /* Font options */
-        font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; Georgia=georgia,palatino,serif; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times,serif; Verdana=verdana,geneva,sans-serif',
-        font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
-        /* Enable automatic link creation */
-        autolink_pattern: /^(https?:\/\/|www\.|(?!www\.)[a-z0-9\-]+\.[a-z]{2,13})/i,
-        link_default_protocol: 'https',
-        link_assume_external_targets: true,
-        /* Link target options */
-        link_target_list: [
-            {title: 'None', value: ''},
-            {title: 'New window', value: '_blank'},
-            {title: 'Same window', value: '_self'}
-        ],
-        /* Block formats */
-        block_formats: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6; Preformatted=pre; Blockquote=blockquote',
-        /* Content filtering - allow all HTML */
-        valid_elements: '*[*]',
-        extended_valid_elements: '*[*]',
-        valid_children: '+body[style]',
-        /* Paste settings */
-        paste_as_text: false,
-        paste_block_drop: false,
-        paste_data_images: true,
-        paste_retain_style_properties: 'all',
-        /* Image settings */
-        image_advtab: true,
-        image_caption: true,
-        image_description: true,
-        image_dimensions: true,
-        image_title: true,
-        /* Table settings */
-        table_default_attributes: {
-            border: '1'
-        },
-        table_default_styles: {
-            'border-collapse': 'collapse',
-            'width': '100%'
-        },
-        table_responsive_width: true,
-        /* Auto-save */
-        setup: function(editor) {
-            editor.on('change', function() {
-                editor.save();
-            });
-            editor.on('blur', function() {
-                editor.save();
-            });
-        }
-    };
-}
-
-// Initialize TinyMCE
-tinymce.init(getTinyMCEConfig());
-
-// Watch for theme changes and reinitialize TinyMCE
-const observer = new MutationObserver(function(mutations) {
-    mutations.forEach(function(mutation) {
-        if (mutation.attributeName === 'class') {
-            const editor = tinymce.get('body');
-            if (editor) {
-                // Save current content
-                const content = editor.getContent();
-                // Remove the editor
-                tinymce.remove('#body');
-                // Reinitialize with new theme
-                tinymce.init(getTinyMCEConfig()).then(function(editors) {
-                    // Restore content
-                    editors[0].setContent(content);
-                });
-            }
-        }
-    });
-});
-
-// Start observing theme changes on the html element
-observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['class']
-});
-</script>
-@endpush
 @endsection
 
diff --git a/resources/views/admin/content/index.blade.php b/resources/views/admin/content/index.blade.php
index 81d4b4d4f..33b566622 100644
--- a/resources/views/admin/content/index.blade.php
+++ b/resources/views/admin/content/index.blade.php
@@ -4,9 +4,9 @@
 <div class="container mx-auto px-4 py-6">
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
         <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-semibold text-gray-800">
+                <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
                     <i class="fa fa-file-alt mr-2"></i>{{ $title }}
                 </h1>
                 <a href="{{ url('admin/content-add?action=add') }}" class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700">
@@ -18,53 +18,53 @@
         <!-- Content Table -->
         @if(count($contentlist) > 0)
             <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-50 dark:bg-gray-700">
                         <tr>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ordinal</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">ID</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Title</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">URL</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Ordinal</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
                         </tr>
                     </thead>
-                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                         @foreach($contentlist as $item)
-                            <tr class="hover:bg-gray-50">
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->id }}</td>
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">{{ $item->id }}</td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-sm font-medium text-gray-900">{{ $item->title }}</div>
+                                    <div class="text-sm font-medium text-gray-900 dark:text-gray-200">{{ $item->title }}</div>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                     @if(!empty($item->url))
-                                        <a href="{{ $item->url }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800">
+                                        <a href="{{ $item->url }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                                             {{ Str::limit($item->url, 30) }}
                                         </a>
                                     @else
-                                        N/A
+                                        <span class="text-gray-500 dark:text-gray-400">N/A</span>
                                     @endif
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                     @if($item->contenttype == 1)
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100">
                                             Useful Link
                                         </span>
                                     @elseif($item->contenttype == 2)
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100">
                                             Article
                                         </span>
                                     @elseif($item->contenttype == 3)
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-100">
                                             Homepage
                                         </span>
                                     @else
-                                        N/A
+                                        <span class="text-gray-500 dark:text-gray-400">N/A</span>
                                     @endif
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                     @if($item->role == 1)
                                         Everyone
                                     @elseif($item->role == 2)
@@ -77,25 +77,25 @@
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     @if($item->status == 1)
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100">
                                             <i class="fa fa-check mr-1"></i>Enabled
                                         </span>
                                     @else
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100">
                                             <i class="fa fa-times mr-1"></i>Disabled
                                         </span>
                                     @endif
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->ordinal ?? 0 }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{{ $item->ordinal ?? 0 }}</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                     <div class="flex gap-2">
                                         <a href="{{ url('admin/content-add?id=' . $item->id) }}"
-                                           class="text-blue-600 dark:text-blue-400 hover:text-blue-900"
+                                           class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300"
                                            title="Edit">
                                             <i class="fa fa-edit"></i>
                                         </a>
                                         <a href="{{ url('admin/content-delete?id=' . $item->id) }}"
-                                           class="text-red-600 hover:text-red-900"
+                                           class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
                                            title="Delete"
                                            onclick="return confirm('Are you sure you want to delete \'{{ $item->title }}\'?')">
                                             <i class="fa fa-trash"></i>
@@ -109,9 +109,9 @@
             </div>
         @else
             <div class="px-6 py-12 text-center">
-                <i class="fa fa-file-alt text-gray-400 text-5xl mb-4"></i>
+                <i class="fa fa-file-alt text-gray-400 dark:text-gray-500 text-5xl mb-4"></i>
                 <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No content found</h3>
-                <p class="text-gray-500">Create your first content to get started.</p>
+                <p class="text-gray-500 dark:text-gray-400">Create your first content to get started.</p>
             </div>
         @endif
     </div>
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index cf7aa382e..6108ce9ce 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -193,10 +193,10 @@
                                     @endif
                                 </td>
                                 <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-gray-100">
-                                    {{ $downloader->username }}
+                                    {{ $downloader['username'] }}
                                 </td>
                                 <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-gray-100 font-semibold">
-                                    {{ number_format($downloader->download_count) }}
+                                    {{ number_format($downloader['download_count']) }}
                                 </td>
                             </tr>
                             @endforeach
@@ -218,8 +218,8 @@
                     <i class="fas fa-chart-bar mr-2 text-green-600 dark:text-green-400"></i>
                     Downloads (Last 7 Days)
                 </h4>
-                <div style="height: 250px; max-height: 250px; position: relative;">
-                    <canvas id="downloadsChart"></canvas>
+                <div class="chart-container">
+                    <canvas id="downloadsChart" data-chart-data="{{ json_encode($userStats['downloads_per_day']) }}"></canvas>
                 </div>
             </div>
 
@@ -229,8 +229,158 @@
                     <i class="fas fa-chart-area mr-2 text-purple-600 dark:text-purple-400"></i>
                     API Hits (Last 7 Days)
                 </h4>
-                <div style="height: 250px; max-height: 250px; position: relative;">
-                    <canvas id="apiHitsChart"></canvas>
+                <div class="chart-container">
+                    <canvas id="apiHitsChart" data-chart-data="{{ json_encode($userStats['api_hits_per_day']) }}"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    @endif
+
+    <!-- System Metrics (CPU & RAM) -->
+    @if(isset($systemMetrics))
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
+        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
+            <i class="fas fa-server mr-2 text-orange-600 dark:text-orange-400"></i>
+            System Resources
+        </h3>
+
+        <!-- Current Usage Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+            <div class="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900 dark:to-orange-800 rounded-lg p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div>
+                        <p class="text-sm text-orange-600 dark:text-orange-300 font-medium mb-1">CPU Usage</p>
+                        <p class="text-3xl font-bold text-orange-800 dark:text-orange-100" data-metric="cpu-current">{{ number_format($systemMetrics['cpu']['current'], 1) }}%</p>
+                    </div>
+                    <div class="w-12 h-12 bg-orange-200 dark:bg-orange-700 rounded-lg flex items-center justify-center">
+                        <i class="fas fa-microchip text-2xl text-orange-600 dark:text-orange-300"></i>
+                    </div>
+                </div>
+                <div class="border-t border-orange-200 dark:border-orange-700 pt-3 space-y-2">
+                    <div class="flex justify-between text-xs">
+                        <span class="text-orange-600 dark:text-orange-300">Cores:</span>
+                        <span class="font-semibold text-orange-800 dark:text-orange-100">{{ $systemMetrics['cpu']['cores'] }}</span>
+                    </div>
+                    <div class="flex justify-between text-xs">
+                        <span class="text-orange-600 dark:text-orange-300">Threads:</span>
+                        <span class="font-semibold text-orange-800 dark:text-orange-100">{{ $systemMetrics['cpu']['threads'] }}</span>
+                    </div>
+                    <div class="flex justify-between text-xs">
+                        <span class="text-orange-600 dark:text-orange-300">Load (1m):</span>
+                        <span class="font-semibold text-orange-800 dark:text-orange-100" data-metric="cpu-load-1min">{{ $systemMetrics['cpu']['load_average']['1min'] }}</span>
+                    </div>
+                    <div class="flex justify-between text-xs">
+                        <span class="text-orange-600 dark:text-orange-300">Load (5m):</span>
+                        <span class="font-semibold text-orange-800 dark:text-orange-100" data-metric="cpu-load-5min">{{ $systemMetrics['cpu']['load_average']['5min'] }}</span>
+                    </div>
+                    <div class="flex justify-between text-xs">
+                        <span class="text-orange-600 dark:text-orange-300">Load (15m):</span>
+                        <span class="font-semibold text-orange-800 dark:text-orange-100" data-metric="cpu-load-15min">{{ $systemMetrics['cpu']['load_average']['15min'] }}</span>
+                    </div>
+                    @if($systemMetrics['cpu']['model'] !== 'Unknown')
+                    <div class="pt-2 border-t border-orange-200 dark:border-orange-700">
+                        <p class="text-xs text-orange-600 dark:text-orange-300 truncate" title="{{ $systemMetrics['cpu']['model'] }}">
+                            <i class="fas fa-info-circle mr-1"></i>{{ $systemMetrics['cpu']['model'] }}
+                        </p>
+                    </div>
+                    @endif
+                </div>
+            </div>
+
+            <div class="bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900 dark:to-cyan-800 rounded-lg p-4">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-sm text-cyan-600 dark:text-cyan-300 font-medium mb-1">RAM Usage</p>
+                        <p class="text-3xl font-bold text-cyan-800 dark:text-cyan-100" data-metric="ram-current">{{ number_format($systemMetrics['ram']['percentage'], 1) }}%</p>
+                        <p class="text-xs text-cyan-600 dark:text-cyan-300 mt-1" data-metric="ram-details">
+                            {{ number_format($systemMetrics['ram']['used'], 2) }} GB / {{ number_format($systemMetrics['ram']['total'], 2) }} GB
+                        </p>
+                    </div>
+                    <div class="w-12 h-12 bg-cyan-200 dark:bg-cyan-700 rounded-lg flex items-center justify-center">
+                        <i class="fas fa-memory text-2xl text-cyan-600 dark:text-cyan-300"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Last Updated Indicator -->
+        <div class="mb-4 text-right">
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+                <i class="fas fa-sync-alt mr-1"></i>Last updated: <span data-metric="last-updated">{{ now()->format('H:i:s') }}</span>
+                <span class="ml-2 text-green-600 dark:text-green-400">(Auto-updates every minute)</span>
+            </span>
+        </div>
+
+        <!-- Historical Graphs -->
+        <div class="space-y-6">
+            <!-- 24 Hour Charts -->
+            <div>
+                <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
+                    <i class="fas fa-clock mr-2 text-blue-600 dark:text-blue-400"></i>
+                    Last 24 Hours (Hour by Hour)
+                </h4>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <!-- CPU Usage 24h Graph -->
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <h5 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+                            <i class="fas fa-microchip mr-2 text-orange-600 dark:text-orange-400"></i>
+                            CPU Usage
+                        </h5>
+                        <div class="chart-container">
+                            <canvas id="cpuHistory24hChart"
+                                    data-history="{{ json_encode($systemMetrics['cpu']['history_24h']) }}"
+                                    data-chart-label="CPU Usage %"></canvas>
+                        </div>
+                    </div>
+
+                    <!-- RAM Usage 24h Graph -->
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <h5 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+                            <i class="fas fa-memory mr-2 text-cyan-600 dark:text-cyan-400"></i>
+                            RAM Usage
+                        </h5>
+                        <div class="chart-container">
+                            <canvas id="ramHistory24hChart"
+                                    data-history="{{ json_encode($systemMetrics['ram']['history_24h']) }}"
+                                    data-chart-label="RAM Usage %"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 30 Day Charts -->
+            <div>
+                <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
+                    <i class="fas fa-calendar-alt mr-2 text-purple-600 dark:text-purple-400"></i>
+                    Last 30 Days (Day by Day)
+                </h4>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <!-- CPU Usage 30d Graph -->
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <h5 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+                            <i class="fas fa-microchip mr-2 text-orange-600 dark:text-orange-400"></i>
+                            CPU Usage
+                        </h5>
+                        <div class="chart-container">
+                            <canvas id="cpuHistory30dChart"
+                                    data-history="{{ json_encode($systemMetrics['cpu']['history_30d']) }}"
+                                    data-chart-label="CPU Usage %"></canvas>
+                        </div>
+                    </div>
+
+                    <!-- RAM Usage 30d Graph -->
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                        <h5 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+                            <i class="fas fa-memory mr-2 text-cyan-600 dark:text-cyan-400"></i>
+                            RAM Usage
+                        </h5>
+                        <div class="chart-container">
+                            <canvas id="ramHistory30dChart"
+                                    data-history="{{ json_encode($systemMetrics['ram']['history_30d']) }}"
+                                    data-chart-label="RAM Usage %"></canvas>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -319,148 +469,5 @@
 @push('scripts')
 @if(isset($userStats))
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Check for dark mode
-    const isDarkMode = document.documentElement.classList.contains('dark');
-    const textColor = isDarkMode ? '#e5e7eb' : '#374151';
-    const gridColor = isDarkMode ? '#374151' : '#e5e7eb';
-
-    // Downloads Chart
-    const downloadsCtx = document.getElementById('downloadsChart');
-    if (downloadsCtx) {
-        const downloadsData = {!! json_encode($userStats['downloads_per_day']) !!};
-        new Chart(downloadsCtx, {
-            type: 'bar',
-            data: {
-                labels: downloadsData.map(d => d.date),
-                datasets: [{
-                    label: 'Downloads',
-                    data: downloadsData.map(d => d.count),
-                    backgroundColor: 'rgba(34, 197, 94, 0.7)',
-                    borderColor: 'rgba(34, 197, 94, 1)',
-                    borderWidth: 2,
-                    borderRadius: 6,
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: {
-                        display: false
-                    },
-                    tooltip: {
-                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
-                        titleColor: textColor,
-                        bodyColor: textColor,
-                        borderColor: gridColor,
-                        borderWidth: 1,
-                        padding: 12,
-                        displayColors: false,
-                        callbacks: {
-                            label: function(context) {
-                                return 'Downloads: ' + context.parsed.y.toLocaleString();
-                            }
-                        }
-                    }
-                },
-                scales: {
-                    y: {
-                        beginAtZero: true,
-                        ticks: {
-                            color: textColor,
-                            precision: 0
-                        },
-                        grid: {
-                            color: gridColor,
-                            drawBorder: false
-                        }
-                    },
-                    x: {
-                        ticks: {
-                            color: textColor
-                        },
-                        grid: {
-                            display: false
-                        }
-                    }
-                }
-            }
-        });
-    }
-
-    // API Hits Chart
-    const apiHitsCtx = document.getElementById('apiHitsChart');
-    if (apiHitsCtx) {
-        const apiHitsData = {!! json_encode($userStats['api_hits_per_day']) !!};
-        new Chart(apiHitsCtx, {
-            type: 'line',
-            data: {
-                labels: apiHitsData.map(d => d.date),
-                datasets: [{
-                    label: 'API Hits',
-                    data: apiHitsData.map(d => d.count),
-                    backgroundColor: 'rgba(147, 51, 234, 0.1)',
-                    borderColor: 'rgba(147, 51, 234, 1)',
-                    borderWidth: 3,
-                    fill: true,
-                    tension: 0.4,
-                    pointRadius: 4,
-                    pointHoverRadius: 6,
-                    pointBackgroundColor: 'rgba(147, 51, 234, 1)',
-                    pointBorderColor: '#ffffff',
-                    pointBorderWidth: 2,
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: {
-                        display: false
-                    },
-                    tooltip: {
-                        backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
-                        titleColor: textColor,
-                        bodyColor: textColor,
-                        borderColor: gridColor,
-                        borderWidth: 1,
-                        padding: 12,
-                        displayColors: false,
-                        callbacks: {
-                            label: function(context) {
-                                return 'API Hits: ' + context.parsed.y.toLocaleString();
-                            }
-                        }
-                    }
-                },
-                scales: {
-                    y: {
-                        beginAtZero: true,
-                        ticks: {
-                            color: textColor,
-                            precision: 0
-                        },
-                        grid: {
-                            color: gridColor,
-                            drawBorder: false
-                        }
-                    },
-                    x: {
-                        ticks: {
-                            color: textColor
-                        },
-                        grid: {
-                            color: gridColor,
-                            drawBorder: false
-                        }
-                    }
-                }
-            }
-        });
-    }
-});
-</script>
 @endif
 @endpush
diff --git a/resources/views/admin/groups/bulk.blade.php b/resources/views/admin/groups/bulk.blade.php
index b6e182a6b..e319918bd 100644
--- a/resources/views/admin/groups/bulk.blade.php
+++ b/resources/views/admin/groups/bulk.blade.php
@@ -178,32 +178,5 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const form = document.getElementById('groupBulkForm');
-    if (form) {
-        form.addEventListener('submit', function(event) {
-            const groupfilter = document.getElementById('groupfilter').value.trim();
-
-            if (groupfilter === '') {
-                event.preventDefault();
-                alert('Please enter a group pattern');
-                return false;
-            }
-
-            // Simple regex validation
-            try {
-                new RegExp(groupfilter);
-            } catch(e) {
-                event.preventDefault();
-                alert('Invalid regex pattern: ' + e.message);
-                return false;
-            }
-        });
-    }
-});
-</script>
-@endpush
 @endsection
 
diff --git a/resources/views/admin/groups/edit.blade.php b/resources/views/admin/groups/edit.blade.php
index 4394d1d7c..0e3b6e127 100644
--- a/resources/views/admin/groups/edit.blade.php
+++ b/resources/views/admin/groups/edit.blade.php
@@ -229,11 +229,10 @@
         <!-- Footer -->
         <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
             <div class="flex justify-between">
-                <button type="button"
-                        onclick="window.location='{{ url('/admin/group-list') }}'"
+                <a href="{{ url('/admin/group-list') }}"
                         class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600">
                     <i class="fa fa-times mr-2"></i>Cancel
-                </button>
+                </a>
                 <button type="submit"
                         form="groupForm"
                         class="px-4 py-2 bg-green-600 dark:bg-green-700 text-white rounded-lg hover:bg-green-700 dark:hover:bg-green-600">
@@ -244,23 +243,5 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const form = document.getElementById('groupForm');
-    form.addEventListener('submit', function(event) {
-        const firstRecord = document.getElementById('first_record').value;
-        const lastRecord = document.getElementById('last_record').value;
-
-        // Validate record IDs relationship
-        if (parseInt(firstRecord) > parseInt(lastRecord) && parseInt(lastRecord) > 0) {
-            event.preventDefault();
-            alert('First record ID cannot be greater than last record ID');
-            return false;
-        }
-    });
-});
-</script>
-@endpush
 @endsection
 
diff --git a/resources/views/admin/groups/index.blade.php b/resources/views/admin/groups/index.blade.php
index a19e6ea00..818ef3438 100644
--- a/resources/views/admin/groups/index.blade.php
+++ b/resources/views/admin/groups/index.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.admin')
 
 @section('content')
-<div class="max-w-full px-4 py-6">
+<div class="max-w-full px-4 py-6" data-ajax-url="{{ url('/admin/ajax') }}" data-csrf-token="{{ csrf_token() }}">
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
         <!-- Header -->
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -78,12 +78,12 @@
                     <div class="flex justify-end items-center">
                         <div class="flex gap-2">
                             <button type="button"
-                                    onclick="showResetAllModal()"
+                                    data-action="show-reset-modal"
                                     class="px-3 py-2 bg-yellow-600 text-white text-sm rounded-lg hover:bg-yellow-700">
                                 <i class="fa fa-refresh mr-1"></i> Reset All
                             </button>
                             <button type="button"
-                                    onclick="showPurgeAllModal()"
+                                    data-action="show-purge-modal"
                                     class="px-3 py-2 bg-red-600 dark:bg-red-700 text-white text-sm rounded-lg hover:bg-red-700">
                                 <i class="fa fa-trash mr-1"></i> Purge All
                             </button>
@@ -134,13 +134,17 @@
                                 <td class="px-6 py-4 text-center" id="group-{{ $group->id }}">
                                     @if($group->active == 1)
                                         <button type="button"
-                                                onclick="ajax_group_status({{ $group->id }}, 0)"
+                                                data-action="toggle-group-status"
+                                                data-group-id="{{ $group->id }}"
+                                                data-status="0"
                                                 class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 hover:bg-green-200">
                                             <i class="fa fa-check-circle mr-1"></i>Active
                                         </button>
                                     @else
                                         <button type="button"
-                                                onclick="ajax_group_status({{ $group->id }}, 1)"
+                                                data-action="toggle-group-status"
+                                                data-group-id="{{ $group->id }}"
+                                                data-status="1"
                                                 class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200">
                                             <i class="fa fa-times-circle mr-1"></i>Inactive
                                         </button>
@@ -149,13 +153,17 @@
                                 <td class="px-6 py-4 text-center" id="backfill-{{ $group->id }}">
                                     @if($group->backfill == 1)
                                         <button type="button"
-                                                onclick="ajax_backfill_status({{ $group->id }}, 0)"
+                                                data-action="toggle-backfill"
+                                                data-group-id="{{ $group->id }}"
+                                                data-status="0"
                                                 class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200">
                                             <i class="fa fa-check-circle mr-1"></i>Enabled
                                         </button>
                                     @else
                                         <button type="button"
-                                                onclick="ajax_backfill_status({{ $group->id }}, 1)"
+                                                data-action="toggle-backfill"
+                                                data-group-id="{{ $group->id }}"
+                                                data-status="1"
                                                 class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200">
                                             <i class="fa fa-times-circle mr-1"></i>Disabled
                                         </button>
@@ -197,19 +205,22 @@
                                             <i class="fa fa-pencil"></i>
                                         </a>
                                         <button type="button"
-                                                onclick="ajax_group_reset({{ $group->id }})"
+                                                data-action="reset-group"
+                                                data-group-id="{{ $group->id }}"
                                                 class="text-yellow-600 dark:text-yellow-400 hover:text-yellow-900 dark:hover:text-yellow-300"
                                                 title="Reset this group">
                                             <i class="fa fa-refresh"></i>
                                         </button>
                                         <button type="button"
-                                                onclick="confirmGroupDelete({{ $group->id }})"
+                                                data-action="delete-group"
+                                                data-group-id="{{ $group->id }}"
                                                 class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
                                                 title="Delete this group">
                                             <i class="fa fa-trash"></i>
                                         </button>
                                         <button type="button"
-                                                onclick="confirmGroupPurge({{ $group->id }})"
+                                                data-action="purge-group"
+                                                data-group-id="{{ $group->id }}"
                                                 class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
                                                 title="Purge this group">
                                             <i class="fa fa-eraser"></i>
@@ -259,12 +270,12 @@
             </p>
             <div class="flex justify-end gap-3">
                 <button type="button"
-                        onclick="hideResetAllModal()"
+                        data-action="hide-reset-modal"
                         class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300">
                     Cancel
                 </button>
                 <button type="button"
-                        onclick="ajax_group_reset_all()"
+                        data-action="reset-all"
                         class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700">
                     Reset All
                 </button>
@@ -286,12 +297,12 @@
             </p>
             <div class="flex justify-end gap-3">
                 <button type="button"
-                        onclick="hidePurgeAllModal()"
+                        data-action="hide-purge-modal"
                         class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300">
                     Cancel
                 </button>
                 <button type="button"
-                        onclick="ajax_group_purge_all()"
+                        data-action="purge-all"
                         class="px-4 py-2 bg-red-600 dark:bg-red-700 text-white rounded-lg hover:bg-red-700">
                     Purge All
                 </button>
@@ -300,175 +311,5 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-function showResetAllModal() {
-    document.getElementById('resetAllModal').classList.remove('hidden');
-}
-
-function hideResetAllModal() {
-    document.getElementById('resetAllModal').classList.add('hidden');
-}
-
-function showPurgeAllModal() {
-    document.getElementById('purgeAllModal').classList.remove('hidden');
-}
-
-function hidePurgeAllModal() {
-    document.getElementById('purgeAllModal').classList.add('hidden');
-}
-
-function ajax_group_status(id, status) {
-    fetch('{{ url('/admin/ajax') }}', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        },
-        body: JSON.stringify({
-            action: 'toggle_group_active_status',
-            group_id: id,
-            group_status: status
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            document.getElementById('group-' + id).innerHTML = data.html;
-        }
-    });
-}
-
-function ajax_backfill_status(id, status) {
-    fetch('{{ url('/admin/ajax') }}', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        },
-        body: JSON.stringify({
-            action: 'toggle_group_backfill',
-            group_id: id,
-            backfill: status
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            document.getElementById('backfill-' + id).innerHTML = data.html;
-        }
-    });
-}
-
-function ajax_group_reset(id) {
-    if (confirm('Are you sure you want to reset this group?')) {
-        fetch('{{ url('/admin/ajax') }}', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRF-TOKEN': '{{ csrf_token() }}'
-            },
-            body: JSON.stringify({
-                action: 'reset_group',
-                group_id: id
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                location.reload();
-            }
-        });
-    }
-}
-
-function confirmGroupDelete(id) {
-    if (confirm('Are you sure you want to delete this group?')) {
-        fetch('{{ url('/admin/ajax') }}', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRF-TOKEN': '{{ csrf_token() }}'
-            },
-            body: JSON.stringify({
-                action: 'delete_group',
-                group_id: id
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                const row = document.getElementById('grouprow-' + id);
-                row.style.transition = 'opacity 0.3s';
-                row.style.opacity = '0';
-                setTimeout(() => row.remove(), 300);
-            }
-        });
-    }
-}
-
-function confirmGroupPurge(id) {
-    if (confirm('Are you sure you want to purge this group? This will delete all releases and binaries!')) {
-        fetch('{{ url('/admin/ajax') }}', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRF-TOKEN': '{{ csrf_token() }}'
-            },
-            body: JSON.stringify({
-                action: 'purge_group',
-                group_id: id
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                location.reload();
-            }
-        });
-    }
-}
-
-function ajax_group_reset_all() {
-    fetch('{{ url('/admin/ajax') }}', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        },
-        body: JSON.stringify({
-            action: 'reset_all_groups'
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            hideResetAllModal();
-            location.reload();
-        }
-    });
-}
-
-function ajax_group_purge_all() {
-    fetch('{{ url('/admin/ajax') }}', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        },
-        body: JSON.stringify({
-            action: 'purge_all_groups'
-        })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            hidePurgeAllModal();
-            location.reload();
-        }
-    });
-}
-</script>
-@endpush
 @endsection
 
diff --git a/resources/views/admin/invitations/index.blade.php b/resources/views/admin/invitations/index.blade.php
index 5011c3452..38fbbe042 100644
--- a/resources/views/admin/invitations/index.blade.php
+++ b/resources/views/admin/invitations/index.blade.php
@@ -178,7 +178,7 @@
                                         </form>
                                         <form method="POST" action="{{ url('admin/invitations/' . $invitation->id . '/cancel') }}" class="inline">
                                             @csrf
-                                            <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300" title="Cancel" onclick="return confirm('Are you sure you want to cancel this invitation?')">
+                                            <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300" title="Cancel" data-confirm="Are you sure you want to cancel this invitation?">
                                                 <i class="fas fa-ban"></i>
                                             </button>
                                         </form>
@@ -205,7 +205,7 @@
                                 <option value="cancel">Cancel Selected</option>
                                 <option value="delete">Delete Selected</option>
                             </select>
-                            <button type="submit" class="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-900" onclick="return confirm('Are you sure you want to perform this bulk action?')">
+                            <button type="submit" class="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-900" data-confirm="Are you sure you want to perform this bulk action?">
                                 Apply
                             </button>
                         </div>
@@ -280,15 +280,6 @@
     @endif
 </div>
 
-@push('scripts')
-<script>
-    // Select all checkbox functionality
-    document.getElementById('select_all')?.addEventListener('change', function(e) {
-        document.querySelectorAll('.invitation-checkbox').forEach(cb => {
-            cb.checked = e.target.checked;
-        });
-    });
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/invitations/show.blade.php b/resources/views/admin/invitations/show.blade.php
index a1be58043..3ad8cf523 100644
--- a/resources/views/admin/invitations/show.blade.php
+++ b/resources/views/admin/invitations/show.blade.php
@@ -200,16 +200,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text).then(function() {
-            alert('Link copied to clipboard!');
-        }, function(err) {
-            console.error('Could not copy text: ', err);
-        });
-    }
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/regexes/category-edit.blade.php b/resources/views/admin/regexes/category-edit.blade.php
index 34deecd55..8dac1f1ab 100644
--- a/resources/views/admin/regexes/category-edit.blade.php
+++ b/resources/views/admin/regexes/category-edit.blade.php
@@ -182,26 +182,7 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const form = document.getElementById('regexForm');
-    if (form) {
-        form.addEventListener('submit', function(event) {
-            const groupRegex = document.getElementById('group_regex');
-            const regex = document.getElementById('regex');
-            const ordinal = document.getElementById('ordinal');
-
-            if (!groupRegex.value.trim() || !regex.value.trim() || !ordinal.value) {
-                event.preventDefault();
-                alert('Please fill in all required fields.');
-                return false;
-            }
-        });
-    }
-});
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
 
diff --git a/resources/views/admin/regexes/category-list.blade.php b/resources/views/admin/regexes/category-list.blade.php
index c60813fed..5f36dc520 100644
--- a/resources/views/admin/regexes/category-list.blade.php
+++ b/resources/views/admin/regexes/category-list.blade.php
@@ -125,7 +125,8 @@
                                         </a>
                                         <button type="button"
                                                 class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
-                                                onclick="confirmDelete({{ $row->id }})"
+                                                data-delete-regex="{{ $row->id }}"
+                                                data-delete-url="{{ url('/admin/category_regexes-delete') }}"
                                                 title="Delete this regex">
                                             <i class="fa fa-trash"></i>
                                         </button>
@@ -173,63 +174,4 @@
         </div>
     </div>
 </div>
-
-@push('scripts')
-<script>
-function confirmDelete(id) {
-    if (confirm('Are you sure you want to delete this regex? This action cannot be undone.')) {
-        deleteRegex(id);
-    }
-}
-
-function deleteRegex(id) {
-    fetch('{{ url("/admin/category_regexes-delete") }}?id=' + id, {
-        method: 'GET',
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        }
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            const row = document.getElementById('row-' + id);
-            row.style.transition = 'opacity 0.3s';
-            row.style.opacity = '0';
-            setTimeout(() => row.remove(), 300);
-            showMessage('Regex deleted successfully', 'success');
-        } else {
-            showMessage('Error deleting regex', 'error');
-        }
-    })
-    .catch(error => {
-        showMessage('Error deleting regex', 'error');
-    });
-}
-
-function showMessage(message, type = 'success') {
-    const messageDiv = document.getElementById('message');
-    const bgColor = type === 'success' ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200';
-    const textColor = type === 'success' ? 'text-green-800' : 'text-red-800';
-    const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
-
-    messageDiv.innerHTML = `
-        <div class="mt-4 p-4 ${bgColor} border rounded-lg">
-            <div class="flex items-center justify-between">
-                <p class="${textColor}">
-                    <i class="fa fa-${icon} mr-2"></i>${message}
-                </p>
-                <button type="button" class="${textColor} hover:opacity-75" onclick="this.parentElement.parentElement.remove()">
-                    <i class="fa fa-times"></i>
-                </button>
-            </div>
-        </div>
-    `;
-    setTimeout(() => {
-        messageDiv.innerHTML = '';
-    }, 5000);
-}
-</script>
-@endpush
-@endsection
-
+{{-- Regex management functions moved to resources/js/csp-safe.js --}}
diff --git a/resources/views/admin/regexes/collection-edit.blade.php b/resources/views/admin/regexes/collection-edit.blade.php
index de76c1607..f56aa3969 100644
--- a/resources/views/admin/regexes/collection-edit.blade.php
+++ b/resources/views/admin/regexes/collection-edit.blade.php
@@ -157,25 +157,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const form = document.getElementById('regexForm');
-    if (form) {
-        form.addEventListener('submit', function(event) {
-            const groupRegex = document.getElementById('group_regex');
-            const regex = document.getElementById('regex');
-            const ordinal = document.getElementById('ordinal');
-
-            if (!groupRegex.value.trim() || !regex.value.trim() || !ordinal.value) {
-                event.preventDefault();
-                alert('Please fill in all required fields.');
-                return false;
-            }
-        });
-    }
-});
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/regexes/collection-list.blade.php b/resources/views/admin/regexes/collection-list.blade.php
index 9c6dc05b9..73762ef22 100644
--- a/resources/views/admin/regexes/collection-list.blade.php
+++ b/resources/views/admin/regexes/collection-list.blade.php
@@ -117,12 +117,13 @@
                                            title="Edit this regex">
                                             <i class="fa fa-edit"></i>
                                         </a>
-                                        <button type="button"
-                                                class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
-                                                onclick="confirmDelete({{ $row->id }})"
-                                                title="Delete this regex">
-                                            <i class="fa fa-trash"></i>
-                                        </button>
+                                                <button type="button"
+                                                        class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                                                        data-delete-regex="{{ $row->id }}"
+                                                        data-delete-url="{{ url('/admin/collection_regexes-delete') }}"
+                                                        title="Delete this regex">
+                                                    <i class="fa fa-trash"></i>
+                                                </button>
                                     </div>
                                 </td>
                             </tr>
@@ -172,63 +173,4 @@
         </div>
     </div>
 </div>
-
-@push('scripts')
-<script>
-function confirmDelete(id) {
-    if (confirm('Are you sure you want to delete this regex? This action cannot be undone.')) {
-        deleteRegex(id);
-    }
-}
-
-function deleteRegex(id) {
-    fetch('{{ url("/admin/collection_regexes-delete") }}?id=' + id, {
-        method: 'GET',
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        }
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            const row = document.getElementById('row-' + id);
-            row.style.transition = 'opacity 0.3s';
-            row.style.opacity = '0';
-            setTimeout(() => row.remove(), 300);
-            showMessage('Regex deleted successfully', 'success');
-        } else {
-            showMessage('Error deleting regex', 'error');
-        }
-    })
-    .catch(error => {
-        showMessage('Error deleting regex', 'error');
-    });
-}
-
-function showMessage(message, type = 'success') {
-    const messageDiv = document.getElementById('message');
-    const bgColor = type === 'success' ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200';
-    const textColor = type === 'success' ? 'text-green-800' : 'text-red-800';
-    const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
-
-    messageDiv.innerHTML = `
-        <div class="mt-4 p-4 ${bgColor} border rounded-lg">
-            <div class="flex items-center justify-between">
-                <p class="${textColor}">
-                    <i class="fa fa-${icon} mr-2"></i>${message}
-                </p>
-                <button type="button" class="${textColor} hover:opacity-75" onclick="this.parentElement.parentElement.remove()">
-                    <i class="fa fa-times"></i>
-                </button>
-            </div>
-        </div>
-    `;
-    setTimeout(() => {
-        messageDiv.innerHTML = '';
-    }, 5000);
-}
-</script>
-@endpush
-@endsection
-
+{{-- Regex management functions moved to resources/js/csp-safe.js --}}
diff --git a/resources/views/admin/regexes/release-naming-edit.blade.php b/resources/views/admin/regexes/release-naming-edit.blade.php
index af197ce78..d05f7a705 100644
--- a/resources/views/admin/regexes/release-naming-edit.blade.php
+++ b/resources/views/admin/regexes/release-naming-edit.blade.php
@@ -157,25 +157,6 @@
     </div>
 </div>
 
-@push('scripts')
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const form = document.getElementById('regexForm');
-    if (form) {
-        form.addEventListener('submit', function(event) {
-            const groupRegex = document.getElementById('group_regex');
-            const regex = document.getElementById('regex');
-            const ordinal = document.getElementById('ordinal');
-
-            if (!groupRegex.value.trim() || !regex.value.trim() || !ordinal.value) {
-                event.preventDefault();
-                alert('Please fill in all required fields.');
-                return false;
-            }
-        });
-    }
-});
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/regexes/release-naming-list.blade.php b/resources/views/admin/regexes/release-naming-list.blade.php
index ab1c041b9..53c67340f 100644
--- a/resources/views/admin/regexes/release-naming-list.blade.php
+++ b/resources/views/admin/regexes/release-naming-list.blade.php
@@ -117,12 +117,13 @@
                                            title="Edit this regex">
                                             <i class="fa fa-edit"></i>
                                         </a>
-                                        <button type="button"
-                                                class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
-                                                onclick="confirmDelete({{ $row->id }})"
-                                                title="Delete this regex">
-                                            <i class="fa fa-trash"></i>
-                                        </button>
+                                                <button type="button"
+                                                        class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                                                        data-delete-regex="{{ $row->id }}"
+                                                        data-delete-url="{{ url('/admin/release_naming_regexes-delete') }}"
+                                                        title="Delete this regex">
+                                                    <i class="fa fa-trash"></i>
+                                                </button>
                                     </div>
                                 </td>
                             </tr>
@@ -172,63 +173,4 @@
         </div>
     </div>
 </div>
-
-@push('scripts')
-<script>
-function confirmDelete(id) {
-    if (confirm('Are you sure you want to delete this regex? This action cannot be undone.')) {
-        deleteRegex(id);
-    }
-}
-
-function deleteRegex(id) {
-    fetch('{{ url("/admin/release_naming_regexes-delete") }}?id=' + id, {
-        method: 'GET',
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-        }
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            const row = document.getElementById('row-' + id);
-            row.style.transition = 'opacity 0.3s';
-            row.style.opacity = '0';
-            setTimeout(() => row.remove(), 300);
-            showMessage('Regex deleted successfully', 'success');
-        } else {
-            showMessage('Error deleting regex', 'error');
-        }
-    })
-    .catch(error => {
-        showMessage('Error deleting regex', 'error');
-    });
-}
-
-function showMessage(message, type = 'success') {
-    const messageDiv = document.getElementById('message');
-    const bgColor = type === 'success' ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200';
-    const textColor = type === 'success' ? 'text-green-800' : 'text-red-800';
-    const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
-
-    messageDiv.innerHTML = `
-        <div class="mt-4 p-4 ${bgColor} border rounded-lg">
-            <div class="flex items-center justify-between">
-                <p class="${textColor}">
-                    <i class="fa fa-${icon} mr-2"></i>${message}
-                </p>
-                <button type="button" class="${textColor} hover:opacity-75" onclick="this.parentElement.parentElement.remove()">
-                    <i class="fa fa-times"></i>
-                </button>
-            </div>
-        </div>
-    `;
-    setTimeout(() => {
-        messageDiv.innerHTML = '';
-    }, 5000);
-}
-</script>
-@endpush
-@endsection
-
+{{-- Regex management functions moved to resources/js/csp-safe.js --}}
diff --git a/resources/views/admin/releases/edit.blade.php b/resources/views/admin/releases/edit.blade.php
index 5864b8a26..8b7aa2ce1 100644
--- a/resources/views/admin/releases/edit.blade.php
+++ b/resources/views/admin/releases/edit.blade.php
@@ -227,6 +227,16 @@
                 <dt class="font-medium text-gray-600 dark:text-gray-400">Group</dt>
                 <dd class="text-gray-900 dark:text-gray-100 mt-1">{{ $release->group_name ?? $release['group_name'] ?? 'N/A' }}</dd>
             </div>
+            @if(!empty($release->fromname ?? $release['fromname'] ?? ''))
+                <div>
+                    <dt class="font-medium text-gray-600 dark:text-gray-400">Posted By</dt>
+                    <dd class="text-gray-900 dark:text-gray-100 mt-1">
+                        <span class="inline-flex items-center px-2 py-1 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono text-xs">
+                            <i class="fas fa-user mr-1"></i>{{ $release->fromname ?? $release['fromname'] }}
+                        </span>
+                    </dd>
+                </div>
+            @endif
             <div>
                 <dt class="font-medium text-gray-600 dark:text-gray-400">Password Status</dt>
                 <dd class="text-gray-900 dark:text-gray-100 mt-1">
diff --git a/resources/views/admin/releases/failed.blade.php b/resources/views/admin/releases/failed.blade.php
index 910a7c86c..4e587df01 100644
--- a/resources/views/admin/releases/failed.blade.php
+++ b/resources/views/admin/releases/failed.blade.php
@@ -76,8 +76,8 @@
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Category</th>
                             <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Size</th>
                             <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Files</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Post Date</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Add Date</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Post Date</th>
                             <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Grabs</th>
                             <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                         </tr>
@@ -110,17 +110,17 @@
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                     <div class="flex items-center">
-                                        <i class="fa fa-calendar text-gray-400 mr-2"></i>
-                                        <span title="{{ $release->postdate }}">
-                                            {{ \Carbon\Carbon::parse($release->postdate)->format('Y-m-d H:i') }}
+                                        <i class="fa fa-calendar-plus-o text-gray-400 mr-2"></i>
+                                        <span title="{{ $release->adddate }}">
+                                            {{ \Carbon\Carbon::parse($release->adddate)->format('Y-m-d H:i') }}
                                         </span>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                     <div class="flex items-center">
-                                        <i class="fa fa-calendar-plus-o text-gray-400 mr-2"></i>
-                                        <span title="{{ $release->adddate }}">
-                                            {{ \Carbon\Carbon::parse($release->adddate)->format('Y-m-d H:i') }}
+                                        <i class="fa fa-calendar text-gray-400 mr-2"></i>
+                                        <span title="{{ $release->postdate }}">
+                                            {{ \Carbon\Carbon::parse($release->postdate)->format('Y-m-d H:i') }}
                                         </span>
                                     </div>
                                 </td>
diff --git a/resources/views/admin/releases/index.blade.php b/resources/views/admin/releases/index.blade.php
index 8ec21d3c1..8efe41576 100644
--- a/resources/views/admin/releases/index.blade.php
+++ b/resources/views/admin/releases/index.blade.php
@@ -40,8 +40,8 @@
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Category</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Size</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Files</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Posted</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Added</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Posted</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Grabs</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
                         </tr>
@@ -51,7 +51,7 @@
                             <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{{ $release->id }}</td>
                                 <td class="px-6 py-4 text-sm">
-                                    <div class="text-gray-900 dark:text-gray-100 font-medium max-w-md truncate" title="{{ $release->searchname }}">
+                                    <div class="text-gray-900 dark:text-gray-100 font-medium max-w-md break-words break-all" title="{{ $release->searchname }}">
                                         {{ $release->searchname }}
                                     </div>
                                     <div class="text-gray-500 dark:text-gray-400 text-xs mt-1 max-w-md truncate" title="{{ $release->name }}">
@@ -70,10 +70,10 @@
                                     {{ $release->totalpart ?? 0 }}
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                                    {{ \Carbon\Carbon::parse($release->postdate)->format('Y-m-d H:i') }}
+                                    {{ \Carbon\Carbon::parse($release->adddate)->format('Y-m-d H:i') }}
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                                    {{ \Carbon\Carbon::parse($release->adddate)->format('Y-m-d H:i') }}
+                                    {{ \Carbon\Carbon::parse($release->postdate)->format('Y-m-d H:i') }}
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                     {{ $release->grabs ?? 0 }}
diff --git a/resources/views/admin/shows/edit.blade.php b/resources/views/admin/shows/edit.blade.php
index 98dfd41bd..56b172c17 100644
--- a/resources/views/admin/shows/edit.blade.php
+++ b/resources/views/admin/shows/edit.blade.php
@@ -144,7 +144,7 @@
                                          alt="{{ $show['title'] }}"
                                          class="max-w-full h-auto mx-auto rounded shadow-lg"
                                          style="max-height: 400px;"
-                                         onerror="this.src='{{ asset('images/no-cover.png') }}'">
+                                         data-fallback-src="{{ asset('images/no-cover.png') }}">
                                 @else
                                     <div class="flex flex-col items-center justify-center py-12 text-gray-400 dark:text-gray-500">
                                         <i class="fas fa-tv text-6xl mb-3"></i>
diff --git a/resources/views/admin/shows/index.blade.php b/resources/views/admin/shows/index.blade.php
index a35f9db14..993a6e826 100644
--- a/resources/views/admin/shows/index.blade.php
+++ b/resources/views/admin/shows/index.blade.php
@@ -191,15 +191,6 @@
     </div>
 </div>
 
-@push('styles')
-<style>
-    .line-clamp-2 {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-</style>
-@endpush
+{{-- Styles moved to resources/css/csp-safe.css --}}
 @endsection
 
diff --git a/resources/views/admin/site/edit.blade.php b/resources/views/admin/site/edit.blade.php
index 67d465d01..eca8d20bb 100644
--- a/resources/views/admin/site/edit.blade.php
+++ b/resources/views/admin/site/edit.blade.php
@@ -1,6 +1,7 @@
 @extends('layouts.admin')
 
 @section('content')
+
 <div class="container mx-auto px-4 py-6">
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
         <!-- Header -->
@@ -42,7 +43,7 @@
                             <label for="strapline" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-quote-right mr-1"></i>Strapline
                             </label>
-                            <input type="text" id="strapline" name="strapline" value="{{ $site->strapline ?? '' }}"
+                            <input type="text" id="strapline" name="strapline" value="{{ $site['strapline'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">Displayed in the header on every public page.</p>
                         </div>
@@ -51,7 +52,7 @@
                             <label for="metatitle" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-heading mr-1"></i>Meta Title
                             </label>
-                            <input type="text" id="metatitle" name="metatitle" value="{{ $site->metatitle ?? '' }}"
+                            <input type="text" id="metatitle" name="metatitle" value="{{ $site['metatitle'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">Stem meta-tag appended to all page title tags.</p>
                         </div>
@@ -61,7 +62,7 @@
                                 <i class="fa fa-comment mr-1"></i>Meta Description
                             </label>
                             <textarea id="metadescription" name="metadescription" rows="3"
-                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site->metadescription ?? '' }}</textarea>
+                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site['metadescription'] ?? '' }}</textarea>
                             <p class="mt-1 text-sm text-gray-500">Stem meta-description appended to all page meta description tags.</p>
                         </div>
 
@@ -70,7 +71,7 @@
                                 <i class="fa fa-tags mr-1"></i>Meta Keywords
                             </label>
                             <textarea id="metakeywords" name="metakeywords" rows="3"
-                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site->metakeywords ?? '' }}</textarea>
+                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site['metakeywords'] ?? '' }}</textarea>
                             <p class="mt-1 text-sm text-gray-500">Stem meta-keywords appended to all page meta keyword tags.</p>
                         </div>
 
@@ -79,7 +80,7 @@
                                 <i class="fa fa-copyright mr-1"></i>Footer
                             </label>
                             <textarea id="footer" name="footer" rows="3"
-                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site->footer ?? '' }}</textarea>
+                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site['footer'] ?? '' }}</textarea>
                             <p class="mt-1 text-sm text-gray-500">Displayed in the footer section of every public page.</p>
                         </div>
 
@@ -87,7 +88,7 @@
                             <label for="home_link" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-home mr-1"></i>Default Home Page
                             </label>
-                            <input type="text" id="home_link" name="home_link" value="{{ $site->home_link ?? '' }}"
+                            <input type="text" id="home_link" name="home_link" value="{{ $site['home_link'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The relative path to the landing page shown when a user logs in, or clicks the home link.</p>
                         </div>
@@ -96,7 +97,7 @@
                             <label for="dereferrer_link" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-external-link-alt mr-1"></i>Dereferrer Link
                             </label>
-                            <input type="text" id="dereferrer_link" name="dereferrer_link" value="{{ $site->dereferrer_link ?? '' }}"
+                            <input type="text" id="dereferrer_link" name="dereferrer_link" value="{{ $site['dereferrer_link'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">Optional URL to prepend to external links.</p>
                         </div>
@@ -106,7 +107,7 @@
                                 <i class="fa fa-gavel mr-1"></i>Terms and Conditions
                             </label>
                             <textarea id="tandc" name="tandc" rows="5"
-                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site->tandc ?? '' }}</textarea>
+                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site['tandc'] ?? '' }}</textarea>
                             <p class="mt-1 text-sm text-gray-500">Text displayed in the terms and conditions page.</p>
                         </div>
                     </div>
@@ -121,7 +122,7 @@
                             <label for="nzbsplitlevel" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-folder-tree mr-1"></i>NZB File Path Level Deep
                             </label>
-                            <input type="text" id="nzbsplitlevel" name="nzbsplitlevel" value="{{ $site->nzbsplitlevel ?? '' }}"
+                            <input type="text" id="nzbsplitlevel" name="nzbsplitlevel" value="{{ $site['nzbsplitlevel'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">Levels deep to store the nzb Files. <strong>If you change this you must run the misc/testing/DB/nzb-reorg script!</strong></p>
                         </div>
@@ -130,7 +131,7 @@
                             <label for="partretentionhours" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-clock mr-1"></i>Part Retention Hours
                             </label>
-                            <input type="text" id="partretentionhours" name="partretentionhours" value="{{ $site->partretentionhours ?? '' }}"
+                            <input type="text" id="partretentionhours" name="partretentionhours" value="{{ $site['partretentionhours'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of hours incomplete parts and binaries will be retained.</p>
                         </div>
@@ -139,7 +140,7 @@
                             <label for="releaseretentiondays" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-calendar-days mr-1"></i>Release Retention
                             </label>
-                            <input type="text" id="releaseretentiondays" name="releaseretentiondays" value="{{ $site->releaseretentiondays ?? '' }}"
+                            <input type="text" id="releaseretentiondays" name="releaseretentiondays" value="{{ $site['releaseretentiondays'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of days releases will be retained for use throughout site. Set to 0 to disable.</p>
                         </div>
@@ -148,7 +149,7 @@
                             <label for="miscotherretentionhours" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-hourglass mr-1"></i>Other->Misc Retention Hours
                             </label>
-                            <input type="text" id="miscotherretentionhours" name="miscotherretentionhours" value="{{ $site->miscotherretentionhours ?? '' }}"
+                            <input type="text" id="miscotherretentionhours" name="miscotherretentionhours" value="{{ $site['miscotherretentionhours'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of hours releases categorized as Misc->Other will be retained. Set to 0 to disable.</p>
                         </div>
@@ -157,7 +158,7 @@
                             <label for="mischashedretentionhours" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-hashtag mr-1"></i>Other->Hashed Retention Hours
                             </label>
-                            <input type="text" id="mischashedretentionhours" name="mischashedretentionhours" value="{{ $site->mischashedretentionhours ?? '' }}"
+                            <input type="text" id="mischashedretentionhours" name="mischashedretentionhours" value="{{ $site['mischashedretentionhours'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of hours releases categorized as Misc->Hashed will be retained. Set to 0 to disable.</p>
                         </div>
@@ -166,7 +167,7 @@
                             <label for="partsdeletechunks" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-trash mr-1"></i>Parts Delete In Chunks
                             </label>
-                            <input type="text" id="partsdeletechunks" name="partsdeletechunks" value="{{ $site->partsdeletechunks ?? '' }}"
+                            <input type="text" id="partsdeletechunks" name="partsdeletechunks" value="{{ $site['partsdeletechunks'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">Default is 0 (off), which will remove parts in one go. If backfilling or importing and parts table is large, using chunks of 5000+ will speed up removal. Normal indexing is fastest with this setting at 0.</p>
                         </div>
@@ -175,7 +176,7 @@
                             <label for="minfilestoformrelease" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-file-alt mr-1"></i>Minimum Files to Make a Release
                             </label>
-                            <input type="text" id="minfilestoformrelease" name="minfilestoformrelease" value="{{ $site->minfilestoformrelease ?? '' }}"
+                            <input type="text" id="minfilestoformrelease" name="minfilestoformrelease" value="{{ $site['minfilestoformrelease'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The minimum number of files to make a release. i.e. if set to two, then releases which only contain one file will not be created.</p>
                         </div>
@@ -184,7 +185,7 @@
                             <label for="minsizetoformrelease" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-compress mr-1"></i>Minimum File Size to Make a Release
                             </label>
-                            <input type="text" id="minsizetoformrelease" name="minsizetoformrelease" value="{{ $site->minsizetoformrelease ?? '' }}"
+                            <input type="text" id="minsizetoformrelease" name="minsizetoformrelease" value="{{ $site['minsizetoformrelease'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The minimum total size in bytes to make a release. If set to 0, then ignored.</p>
                         </div>
@@ -193,7 +194,7 @@
                             <label for="maxsizetoformrelease" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-expand mr-1"></i>Maximum File Size to Make a Release
                             </label>
-                            <input type="text" id="maxsizetoformrelease" name="maxsizetoformrelease" value="{{ $site->maxsizetoformrelease ?? '' }}"
+                            <input type="text" id="maxsizetoformrelease" name="maxsizetoformrelease" value="{{ $site['maxsizetoformrelease'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum total size in bytes to make a release. If set to 0, then ignored. Only deletes during release creation.</p>
                         </div>
@@ -202,7 +203,7 @@
                             <label for="completionpercent" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-percentage mr-1"></i>Minimum Completion Percent
                             </label>
-                            <input type="text" id="completionpercent" name="completionpercent" value="{{ $site->completionpercent ?? '' }}"
+                            <input type="text" id="completionpercent" name="completionpercent" value="{{ $site['completionpercent'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The minimum completion percent to make a release. i.e. if set to 97, then releases under 97% completion will not be created. If set to 0, then ignored.</p>
                         </div>
@@ -212,9 +213,9 @@
                                 <i class="fa fa-sync mr-1"></i>Update Grabs
                             </label>
                             <select id="grabstatus" name="grabstatus" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->grabstatus ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['grabstatus'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -225,7 +226,7 @@
                             <label for="crossposttime" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-clock mr-1"></i>Crossposted Time Check
                             </label>
-                            <input type="text" id="crossposttime" name="crossposttime" value="{{ $site->crossposttime ?? '' }}"
+                            <input type="text" id="crossposttime" name="crossposttime" value="{{ $site['crossposttime'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The time in hours to check for crossposted releases - this will delete 1 of the releases if the 2 are posted by the same person in the same time period.</p>
                         </div>
@@ -234,7 +235,7 @@
                             <label for="maxmssgs" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-envelope mr-1"></i>Max Messages
                             </label>
-                            <input type="text" id="maxmssgs" name="maxmssgs" value="{{ $site->maxmssgs ?? '' }}"
+                            <input type="text" id="maxmssgs" name="maxmssgs" value="{{ $site['maxmssgs'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum number of messages to fetch at a time from the server.</p>
                         </div>
@@ -243,7 +244,7 @@
                             <label for="max_headers_iteration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-list-ol mr-1"></i>Max Headers Iteration
                             </label>
-                            <input type="text" id="max_headers_iteration" name="max_headers_iteration" value="{{ $site->max_headers_iteration ?? '' }}"
+                            <input type="text" id="max_headers_iteration" name="max_headers_iteration" value="{{ $site['max_headers_iteration'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum number of headers that update binaries sees as the total range. This ensures that a total of no more than this is attempted to be downloaded at one time per group.</p>
                         </div>
@@ -253,21 +254,21 @@
                                 <i class="fa fa-question-circle mr-1"></i>Where to Start New Groups
                             </label>
                             <select id="newgroupscanmethod" name="newgroupscanmethod" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 mb-2">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->newgroupscanmethod ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $newgroupscan_names[$index] ?? $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['newgroupscanmethod'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $newgroupscan_names[$index] ?? $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
                             <div class="grid grid-cols-2 gap-2">
                                 <div>
                                     <label for="newgroupdaystoscan" class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Days to Scan</label>
-                                    <input type="text" id="newgroupdaystoscan" name="newgroupdaystoscan" value="{{ $site->newgroupdaystoscan ?? '' }}"
+                                    <input type="text" id="newgroupdaystoscan" name="newgroupdaystoscan" value="{{ $site['newgroupdaystoscan'] ?? '' }}"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 </div>
                                 <div>
                                     <label for="newgroupmsgstoscan" class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Posts to Scan</label>
-                                    <input type="text" id="newgroupmsgstoscan" name="newgroupmsgstoscan" value="{{ $site->newgroupmsgstoscan ?? '' }}"
+                                    <input type="text" id="newgroupmsgstoscan" name="newgroupmsgstoscan" value="{{ $site['newgroupmsgstoscan'] ?? '' }}"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 </div>
                             </div>
@@ -278,7 +279,7 @@
                             <label for="safebackfilldate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-calendar-alt mr-1"></i>Safe Backfill Date
                             </label>
-                            <input type="text" id="safebackfilldate" name="safebackfilldate" value="{{ $site->safebackfilldate ?? '' }}"
+                            <input type="text" id="safebackfilldate" name="safebackfilldate" value="{{ $site['safebackfilldate'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The target date for safe backfill. Format: YYYY-MM-DD</p>
                         </div>
@@ -288,9 +289,9 @@
                                 <i class="fa fa-power-off mr-1"></i>Auto Disable Groups During Backfill
                             </label>
                             <select id="disablebackfillgroup" name="disablebackfillgroup" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->disablebackfillgroup ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['disablebackfillgroup'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -309,9 +310,9 @@
                                 <i class="fa fa-tv mr-1"></i>Lookup TV
                             </label>
                             <select id="lookuptv" name="lookuptv" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($lookuptv_ids as $index => $lookuptvId)
-                                    <option value="{{ $lookuptvId }}" {{ ($site->lookuptv ?? '') == $lookuptvId ? 'selected' : '' }}>
-                                        {{ $lookuptv_names[$index] }}
+                                @foreach($lookuptv['ids'] as $index => $lookuptvId)
+                                    <option value="{{ $lookuptvId }}" {{ ($site['lookuptv'] ?? '') == $lookuptvId ? 'selected' : '' }}>
+                                        {{ $lookuptv['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -323,9 +324,9 @@
                                 <i class="fa fa-book mr-1"></i>Lookup Books
                             </label>
                             <select id="lookupbooks" name="lookupbooks" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($lookupbooks_ids as $index => $lookupbooksId)
-                                    <option value="{{ $lookupbooksId }}" {{ ($site->lookupbooks ?? '') == $lookupbooksId ? 'selected' : '' }}>
-                                        {{ $lookupbooks_names[$index] }}
+                                @foreach($lookupbooks['ids'] as $index => $lookupbooksId)
+                                    <option value="{{ $lookupbooksId }}" {{ ($site['lookupbooks'] ?? '') == $lookupbooksId ? 'selected' : '' }}>
+                                        {{ $lookupbooks['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -337,9 +338,9 @@
                                 <i class="fa fa-list mr-1"></i>Type of Books to Look Up
                             </label>
                             <select id="book_reqids" name="book_reqids[]" multiple class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" size="4">
-                                @foreach($book_reqids_ids as $index => $bookReqId)
-                                    <option value="{{ $bookReqId }}" {{ in_array($bookReqId, $book_reqids_selected ?? []) ? 'selected' : '' }}>
-                                        {{ $book_reqids_names[$index] }}
+                                @foreach($book_reqids['ids'] as $index => $bookReqId)
+                                    <option value="{{ $bookReqId }}" {{ in_array($bookReqId, $book_reqids['selected'] ?? []) ? 'selected' : '' }}>
+                                        {{ $book_reqids['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -351,9 +352,9 @@
                                 <i class="fa fa-film mr-1"></i>Lookup Movies
                             </label>
                             <select id="lookupimdb" name="lookupimdb" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($lookupmovies_ids as $index => $lookupmoviesId)
-                                    <option value="{{ $lookupmoviesId }}" {{ ($site->lookupimdb ?? '') == $lookupmoviesId ? 'selected' : '' }}>
-                                        {{ $lookupmovies_names[$index] }}
+                                @foreach($lookupmovies['ids'] as $index => $lookupmoviesId)
+                                    <option value="{{ $lookupmoviesId }}" {{ ($site['lookupimdb'] ?? '') == $lookupmoviesId ? 'selected' : '' }}>
+                                        {{ $lookupmovies['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -365,9 +366,9 @@
                                 <i class="fa fa-language mr-1"></i>Movie Lookup Language
                             </label>
                             <select id="lookuplanguage" name="lookuplanguage" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($lookuplanguage_iso as $index => $languageIso)
-                                    <option value="{{ $languageIso }}" {{ ($site->lookuplanguage ?? '') == $languageIso ? 'selected' : '' }}>
-                                        {{ $lookuplanguage_names[$index] }}
+                                @foreach($lookuplanguage['iso'] as $index => $languageIso)
+                                    <option value="{{ $languageIso }}" {{ ($site['lookuplanguage'] ?? '') == $languageIso ? 'selected' : '' }}>
+                                        {{ $lookuplanguage['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -379,9 +380,9 @@
                                 <i class="fa fa-dragon mr-1"></i>Lookup AniDB
                             </label>
                             <select id="lookupanidb" name="lookupanidb" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->lookupanidb ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['lookupanidb'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -393,9 +394,9 @@
                                 <i class="fa fa-music mr-1"></i>Lookup Music
                             </label>
                             <select id="lookupmusic" name="lookupmusic" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($lookupmusic_ids as $index => $lookupmusicId)
-                                    <option value="{{ $lookupmusicId }}" {{ ($site->lookupmusic ?? '') == $lookupmusicId ? 'selected' : '' }}>
-                                        {{ $lookupmusic_names[$index] }}
+                                @foreach($lookupmusic['ids'] as $index => $lookupmusicId)
+                                    <option value="{{ $lookupmusicId }}" {{ ($site['lookupmusic'] ?? '') == $lookupmusicId ? 'selected' : '' }}>
+                                        {{ $lookupmusic['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -407,9 +408,9 @@
                                 <i class="fa fa-music mr-1"></i>Save Audio Preview
                             </label>
                             <select id="saveaudiopreview" name="saveaudiopreview" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->saveaudiopreview ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['saveaudiopreview'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -421,9 +422,9 @@
                                 <i class="fa fa-gamepad mr-1"></i>Lookup Games
                             </label>
                             <select id="lookupgames" name="lookupgames" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($lookupgames_ids as $index => $lookupgamesId)
-                                    <option value="{{ $lookupgamesId }}" {{ ($site->lookupgames ?? '') == $lookupgamesId ? 'selected' : '' }}>
-                                        {{ $lookupgames_names[$index] }}
+                                @foreach($lookupgames['ids'] as $index => $lookupgamesId)
+                                    <option value="{{ $lookupgamesId }}" {{ ($site['lookupgames'] ?? '') == $lookupgamesId ? 'selected' : '' }}>
+                                        {{ $lookupgames['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -435,9 +436,9 @@
                                 <i class="fa fa-video mr-1"></i>Lookup XXX
                             </label>
                             <select id="lookupxxx" name="lookupxxx" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->lookupxxx ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['lookupxxx'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -456,9 +457,9 @@
                                 <i class="fa fa-globe mr-1"></i>Categorize Foreign
                             </label>
                             <select id="categorizeforeign" name="categorizeforeign" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->categorizeforeign ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['categorizeforeign'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -470,9 +471,9 @@
                                 <i class="fa fa-cloud-download-alt mr-1"></i>Categorize WEB-DL
                             </label>
                             <select id="catwebdl" name="catwebdl" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->catwebdl ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['catwebdl'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -491,9 +492,9 @@
                                 <i class="fa fa-user-plus mr-1"></i>Registration Status
                             </label>
                             <select id="registerstatus" name="registerstatus" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($registerstatus_ids as $index => $statusId)
-                                    <option value="{{ $statusId }}" {{ ($site->registerstatus ?? '') == $statusId ? 'selected' : '' }}>
-                                        {{ $registerstatus_names[$index] }}
+                                @foreach($registerstatus['ids'] as $index => $statusId)
+                                    <option value="{{ $statusId }}" {{ ($site['registerstatus'] ?? '') == $statusId ? 'selected' : '' }}>
+                                        {{ $registerstatus['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -504,7 +505,7 @@
                             <label for="userdownloadpurgedays" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-calendar mr-1"></i>User Downloads Purge Days
                             </label>
-                            <input type="text" id="userdownloadpurgedays" name="userdownloadpurgedays" value="{{ $site->userdownloadpurgedays ?? '' }}"
+                            <input type="text" id="userdownloadpurgedays" name="userdownloadpurgedays" value="{{ $site['userdownloadpurgedays'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of days to preserve user download history, for use when checking limits being hit. Set to zero will remove all records of what users download, but retain history of when, so that role based limits can still be applied.</p>
                         </div>
@@ -513,7 +514,7 @@
                             <label for="userhostexclusion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-shield mr-1"></i>IP Whitelist
                             </label>
-                            <input type="text" id="userhostexclusion" name="userhostexclusion" value="{{ $site->userhostexclusion ?? '' }}"
+                            <input type="text" id="userhostexclusion" name="userhostexclusion" value="{{ $site['userhostexclusion'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">A comma separated list of IP addresses which will be excluded from user limits on number of requests and downloads per IP address. Include values for google reader and other shared services which may be being used.</p>
                         </div>
@@ -526,7 +527,7 @@
                     <div class="space-y-4">
                         <div>
                             <label for="nzbpath" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">NZB Path</label>
-                            <input type="text" id="nzbpath" name="nzbpath" value="{{ $site->nzbpath ?? '' }}"
+                            <input type="text" id="nzbpath" name="nzbpath" value="{{ $site['nzbpath'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">Path where NZB files are stored</p>
                         </div>
@@ -549,9 +550,9 @@
                                 <i class="fa fa-file-archive mr-1"></i>Download Last Compressed File
                             </label>
                             <select id="end" name="end" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->end ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['end'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -563,9 +564,9 @@
                                 <i class="fa fa-lock mr-1"></i>Show Passworded Releases
                             </label>
                             <select id="showpasswordedrelease" name="showpasswordedrelease" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($passworded_ids as $index => $passwordedId)
-                                    <option value="{{ $passwordedId }}" {{ ($site->showpasswordedrelease ?? '') == $passwordedId ? 'selected' : '' }}>
-                                        {{ $passworded_names[$index] }}
+                                @foreach($passworded['ids'] as $index => $passwordedId)
+                                    <option value="{{ $passwordedId }}" {{ ($site['showpasswordedrelease'] ?? '') == $passwordedId ? 'selected' : '' }}>
+                                        {{ $passworded['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -584,7 +585,7 @@
                                 <i class="fa fa-file-archive mr-1"></i>Maximum Release Size to Post Process
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="maxsizetopostprocess" name="maxsizetopostprocess" value="{{ $site->maxsizetopostprocess ?? '' }}"
+                                <input type="text" id="maxsizetopostprocess" name="maxsizetopostprocess" value="{{ $site['maxsizetopostprocess'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">GB</span>
                             </div>
@@ -596,7 +597,7 @@
                                 <i class="fa fa-file-archive mr-1"></i>Minimum Release Size to Post Process
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="minsizetopostprocess" name="minsizetopostprocess" value="{{ $site->minsizetopostprocess ?? '' }}"
+                                <input type="text" id="minsizetopostprocess" name="minsizetopostprocess" value="{{ $site['minsizetopostprocess'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">MB</span>
                             </div>
@@ -614,7 +615,7 @@
                             <label for="maxnzbsprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-file-code mr-1"></i>Maximum NZBs Stage5
                             </label>
-                            <input type="text" id="maxnzbsprocessed" name="maxnzbsprocessed" value="{{ $site->maxnzbsprocessed ?? '' }}"
+                            <input type="text" id="maxnzbsprocessed" name="maxnzbsprocessed" value="{{ $site['maxnzbsprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of NZB files to create on stage 5 at a time in update_releases. If more are to be created it will loop stage 5 until none remain.</p>
                         </div>
@@ -624,9 +625,9 @@
                                 <i class="fa fa-toolbox mr-1"></i>Part Repair
                             </label>
                             <select id="partrepair" name="partrepair" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->partrepair ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['partrepair'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -638,9 +639,9 @@
                                 <i class="fa fa-shield-alt mr-1"></i>Part Repair for Backfill Scripts
                             </label>
                             <select id="safepartrepair" name="safepartrepair" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->safepartrepair ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['safepartrepair'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -651,7 +652,7 @@
                             <label for="maxpartrepair" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tools mr-1"></i>Maximum Repair Per Run
                             </label>
-                            <input type="text" id="maxpartrepair" name="maxpartrepair" value="{{ $site->maxpartrepair ?? '' }}"
+                            <input type="text" id="maxpartrepair" name="maxpartrepair" value="{{ $site['maxpartrepair'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of articles to attempt to repair at a time. If you notice that you are getting a lot of parts into the missed_parts table, it is possible that you USP is not keeping up with the requests. Try to reduce the threads to safe scripts or stop using safe scripts until improves.</p>
                         </div>
@@ -660,7 +661,7 @@
                             <label for="partrepairmaxtries" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-redo mr-1"></i>Maximum Repair Tries
                             </label>
-                            <input type="text" id="partrepairmaxtries" name="partrepairmaxtries" value="{{ $site->partrepairmaxtries ?? '' }}"
+                            <input type="text" id="partrepairmaxtries" name="partrepairmaxtries" value="{{ $site['partrepairmaxtries'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">Maximum amount of times to try part repair.</p>
                         </div>
@@ -670,9 +671,9 @@
                                 <i class="fa fa-image mr-1"></i>Process JPG
                             </label>
                             <select id="processjpg" name="processjpg" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->processjpg ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['processjpg'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -684,9 +685,9 @@
                                 <i class="fa fa-file-image mr-1"></i>Process Video Thumbnails
                             </label>
                             <select id="processthumbnails" name="processthumbnails" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->processthumbnails ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['processthumbnails'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -698,9 +699,9 @@
                                 <i class="fa fa-film mr-1"></i>Process Video Samples
                             </label>
                             <select id="processvideos" name="processvideos" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->processvideos ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['processvideos'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -711,7 +712,7 @@
                             <label for="segmentstodownload" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-download mr-1"></i>Number of Segments to Download
                             </label>
-                            <input type="text" id="segmentstodownload" name="segmentstodownload" value="{{ $site->segmentstodownload ?? '' }}"
+                            <input type="text" id="segmentstodownload" name="segmentstodownload" value="{{ $site['segmentstodownload'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum number of segments to download to generate the sample video file or jpg sample image. (Default 2)</p>
                         </div>
@@ -721,7 +722,7 @@
                                 <i class="fa fa-film mr-1"></i>Video Sample File Duration
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="ffmpeg_duration" name="ffmpeg_duration" value="{{ $site->ffmpeg_duration ?? '' }}"
+                                <input type="text" id="ffmpeg_duration" name="ffmpeg_duration" value="{{ $site['ffmpeg_duration'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">seconds</span>
                             </div>
@@ -733,7 +734,7 @@
                                 <i class="fa fa-layer-group mr-1"></i>Nested Archive Depth
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="maxnestedlevels" name="maxnestedlevels" value="{{ $site->maxnestedlevels ?? '' }}"
+                                <input type="text" id="maxnestedlevels" name="maxnestedlevels" value="{{ $site['maxnestedlevels'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">levels</span>
                             </div>
@@ -745,7 +746,7 @@
                                 <i class="fa fa-ban mr-1"></i>Inner File Black List Regex
                             </label>
                             <textarea id="innerfileblacklist" name="innerfileblacklist" rows="3" placeholder="Example: /setup\.exe|password\.url/i"
-                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site->innerfileblacklist ?? '' }}</textarea>
+                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">{{ $site['innerfileblacklist'] ?? '' }}</textarea>
                             <p class="mt-1 text-sm text-gray-500">You can add a regex here to set releases to potentially passworded when a file name inside a rar/zip matches this regex. <strong>You must ensure this regex is valid, a non valid regex will cause errors during processing!</strong></p>
                         </div>
                     </div>
@@ -761,9 +762,9 @@
                                 <i class="fa fa-play-circle mr-1"></i>Fetch/Display Movie Trailers
                             </label>
                             <select id="trailers_display" name="trailers_display" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->trailers_display ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['trailers_display'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -775,7 +776,7 @@
                                 <i class="fa fa-arrows-alt-h mr-1"></i>Trailers Width
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="trailers_size_x" name="trailers_size_x" value="{{ $site->trailers_size_x ?? '' }}"
+                                <input type="text" id="trailers_size_x" name="trailers_size_x" value="{{ $site['trailers_size_x'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">px</span>
                             </div>
@@ -787,7 +788,7 @@
                                 <i class="fa fa-arrows-alt-v mr-1"></i>Trailers Height
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="trailers_size_y" name="trailers_size_y" value="{{ $site->trailers_size_y ?? '' }}"
+                                <input type="text" id="trailers_size_y" name="trailers_size_y" value="{{ $site['trailers_size_y'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">px</span>
                             </div>
@@ -806,7 +807,7 @@
                                 <i class="fa fa-clock mr-1"></i>Time in Seconds to Kill Unrar/7zip/Mediainfo/FFmpeg/Avconv
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="timeoutseconds" name="timeoutseconds" value="{{ $site->timeoutseconds ?? '' }}"
+                                <input type="text" id="timeoutseconds" name="timeoutseconds" value="{{ $site['timeoutseconds'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">seconds</span>
                             </div>
@@ -817,7 +818,7 @@
                             <label for="maxaddprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-list-ol mr-1"></i>Maximum Add PP Per Run
                             </label>
-                            <input type="text" id="maxaddprocessed" name="maxaddprocessed" value="{{ $site->maxaddprocessed ?? '' }}"
+                            <input type="text" id="maxaddprocessed" name="maxaddprocessed" value="{{ $site['maxaddprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of releases to process for passwords/previews/mediainfo per run. Every release gets processed here. This uses NNTP an connection, 1 per thread. This does not query Amazon.</p>
                         </div>
@@ -826,7 +827,7 @@
                             <label for="maxpartsprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-download mr-1"></i>Maximum Add PP Parts Downloaded
                             </label>
-                            <input type="text" id="maxpartsprocessed" name="maxpartsprocessed" value="{{ $site->maxpartsprocessed ?? '' }}"
+                            <input type="text" id="maxpartsprocessed" name="maxpartsprocessed" value="{{ $site['maxpartsprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">If a part fails to download while post processing, this will retry up to the amount you set, then give up.</p>
                         </div>
@@ -835,7 +836,7 @@
                             <label for="passchkattempts" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-check-double mr-1"></i>Maximum Add PP Parts Checked
                             </label>
-                            <input type="text" id="passchkattempts" name="passchkattempts" value="{{ $site->passchkattempts ?? '' }}"
+                            <input type="text" id="passchkattempts" name="passchkattempts" value="{{ $site['passchkattempts'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">This overrides the above setting if set above 1. How many parts to check for a password before giving up. This slows down post processing massively, better to leave it 1.</p>
                         </div>
@@ -844,7 +845,7 @@
                             <label for="maxrageprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tv mr-1"></i>Maximum TVRage Per Run
                             </label>
-                            <input type="text" id="maxrageprocessed" name="maxrageprocessed" value="{{ $site->maxrageprocessed ?? '' }}"
+                            <input type="text" id="maxrageprocessed" name="maxrageprocessed" value="{{ $site['maxrageprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of TV shows to process with TVRage per run. This does not use an NNTP connection or query Amazon.</p>
                         </div>
@@ -853,7 +854,7 @@
                             <label for="maximdbprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-film mr-1"></i>Maximum Movies Per Run
                             </label>
-                            <input type="text" id="maximdbprocessed" name="maximdbprocessed" value="{{ $site->maximdbprocessed ?? '' }}"
+                            <input type="text" id="maximdbprocessed" name="maximdbprocessed" value="{{ $site['maximdbprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of movies to process with IMDB per run. This does not use an NNTP connection or query Amazon.</p>
                         </div>
@@ -862,7 +863,7 @@
                             <label for="maxanidbprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-dragon mr-1"></i>Maximum AniDB Per Run
                             </label>
-                            <input type="text" id="maxanidbprocessed" name="maxanidbprocessed" value="{{ $site->maxanidbprocessed ?? '' }}"
+                            <input type="text" id="maxanidbprocessed" name="maxanidbprocessed" value="{{ $site['maxanidbprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of anime to process with anidb per run. This does not use an NNTP connection or query Amazon.</p>
                         </div>
@@ -871,7 +872,7 @@
                             <label for="maxmusicprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-music mr-1"></i>Maximum Music Per Run
                             </label>
-                            <input type="text" id="maxmusicprocessed" name="maxmusicprocessed" value="{{ $site->maxmusicprocessed ?? '' }}"
+                            <input type="text" id="maxmusicprocessed" name="maxmusicprocessed" value="{{ $site['maxmusicprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of music to process with amazon per run. This does not use an NNTP connection.</p>
                         </div>
@@ -880,7 +881,7 @@
                             <label for="maxgamesprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-gamepad mr-1"></i>Maximum Games Per Run
                             </label>
-                            <input type="text" id="maxgamesprocessed" name="maxgamesprocessed" value="{{ $site->maxgamesprocessed ?? '' }}"
+                            <input type="text" id="maxgamesprocessed" name="maxgamesprocessed" value="{{ $site['maxgamesprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of games to process with amazon per run. This does not use an NNTP connection.</p>
                         </div>
@@ -889,7 +890,7 @@
                             <label for="maxbooksprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-book mr-1"></i>Maximum Books Per Run
                             </label>
-                            <input type="text" id="maxbooksprocessed" name="maxbooksprocessed" value="{{ $site->maxbooksprocessed ?? '' }}"
+                            <input type="text" id="maxbooksprocessed" name="maxbooksprocessed" value="{{ $site['maxbooksprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of books to process with amazon per run. This does not use an NNTP connection</p>
                         </div>
@@ -898,7 +899,7 @@
                             <label for="maxxxxprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-video mr-1"></i>Maximum XXX Per Run
                             </label>
-                            <input type="text" id="maxxxxprocessed" name="maxxxxprocessed" value="{{ $site->maxxxxprocessed ?? '' }}"
+                            <input type="text" id="maxxxxprocessed" name="maxxxxprocessed" value="{{ $site['maxxxxprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of XXX to process per run. This does not use an NNTP connection or query Amazon.</p>
                         </div>
@@ -907,7 +908,7 @@
                             <label for="fixnamesperrun" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-edit mr-1"></i>fixReleaseNames Per Run
                             </label>
-                            <input type="text" id="fixnamesperrun" name="fixnamesperrun" value="{{ $site->fixnamesperrun ?? '' }}"
+                            <input type="text" id="fixnamesperrun" name="fixnamesperrun" value="{{ $site['fixnamesperrun'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum number of releases to check per run (threaded script only).</p>
                         </div>
@@ -917,7 +918,7 @@
                                 <i class="fa fa-hourglass mr-1"></i>Amazon Sleep Time
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="amazonsleep" name="amazonsleep" value="{{ $site->amazonsleep ?? '' }}"
+                                <input type="text" id="amazonsleep" name="amazonsleep" value="{{ $site['amazonsleep'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">ms</span>
                             </div>
@@ -936,9 +937,9 @@
                                 <i class="fa fa-file-alt mr-1"></i>Lookup NFO
                             </label>
                             <select id="lookupnfo" name="lookupnfo" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->lookupnfo ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['lookupnfo'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -949,7 +950,7 @@
                             <label for="maxnfoprocessed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-file-text mr-1"></i>Maximum NFO Files Per Run
                             </label>
-                            <input type="text" id="maxnfoprocessed" name="maxnfoprocessed" value="{{ $site->maxnfoprocessed ?? '' }}"
+                            <input type="text" id="maxnfoprocessed" name="maxnfoprocessed" value="{{ $site['maxnfoprocessed'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum amount of NFO files to process per run. This uses NNTP an connection, 1 per thread. This does not query Amazon.</p>
                         </div>
@@ -959,7 +960,7 @@
                                 <i class="fa fa-upload mr-1"></i>Maximum Release Size to Process NFOs
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="maxsizetoprocessnfo" name="maxsizetoprocessnfo" value="{{ $site->maxsizetoprocessnfo ?? '' }}"
+                                <input type="text" id="maxsizetoprocessnfo" name="maxsizetoprocessnfo" value="{{ $site['maxsizetoprocessnfo'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">GB</span>
                             </div>
@@ -971,7 +972,7 @@
                                 <i class="fa fa-download mr-1"></i>Minimum Release Size to Process NFOs
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="minsizetoprocessnfo" name="minsizetoprocessnfo" value="{{ $site->minsizetoprocessnfo ?? '' }}"
+                                <input type="text" id="minsizetoprocessnfo" name="minsizetoprocessnfo" value="{{ $site['minsizetoprocessnfo'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">MB</span>
                             </div>
@@ -983,7 +984,7 @@
                                 <i class="fa fa-refresh mr-1"></i>Maximum Amount of Times to Redownload a NFO
                             </label>
                             <div class="flex gap-2">
-                                <input type="text" id="maxnforetries" name="maxnforetries" value="{{ $site->maxnforetries ?? '' }}"
+                                <input type="text" id="maxnforetries" name="maxnforetries" value="{{ $site['maxnforetries'] ?? '' }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md">times</span>
                             </div>
@@ -1001,7 +1002,7 @@
                             <label for="nntpretries" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-refresh mr-1"></i>NNTP Retry Attempts
                             </label>
-                            <input type="text" id="nntpretries" name="nntpretries" value="{{ $site->nntpretries ?? '' }}"
+                            <input type="text" id="nntpretries" name="nntpretries" value="{{ $site['nntpretries'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The maximum number of retry attempts to connect to nntp provider. On error, each retry takes approximately 5 seconds nntp returns reply. (Default 10)</p>
                         </div>
@@ -1010,7 +1011,7 @@
                             <label for="delaytime" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-clock-o mr-1"></i>Delay Time Check
                             </label>
-                            <input type="text" id="delaytime" name="delaytime" value="{{ $site->delaytime ?? '' }}"
+                            <input type="text" id="delaytime" name="delaytime" value="{{ $site['delaytime'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The time in hours to wait, since last activity, before releases without parts counts in the subject are are created.<br>Setting this below 2 hours could create incomplete releases.</p>
                         </div>
@@ -1019,7 +1020,7 @@
                             <label for="collection_timeout" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-hourglass-end mr-1"></i>Collection Timeout Check
                             </label>
-                            <input type="text" id="collection_timeout" name="collection_timeout" value="{{ $site->collection_timeout ?? '' }}"
+                            <input type="text" id="collection_timeout" name="collection_timeout" value="{{ $site['collection_timeout'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">How many hours to wait before converting a collection into a release that is considered "stuck".<br>Default value is 48 hours.</p>
                         </div>
@@ -1036,9 +1037,9 @@
                                 <i class="fa fa-bug mr-1"></i>Log Dropped Headers
                             </label>
                             <select id="showdroppedyencparts" name="showdroppedyencparts" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                                @foreach($yesno_ids as $index => $yesnoId)
-                                    <option value="{{ $yesnoId }}" {{ ($site->showdroppedyencparts ?? '') == $yesnoId ? 'selected' : '' }}>
-                                        {{ $yesno_names[$index] }}
+                                @foreach($yesno['ids'] as $index => $yesnoId)
+                                    <option value="{{ $yesnoId }}" {{ ($site['showdroppedyencparts'] ?? '') == $yesnoId ? 'selected' : '' }}>
+                                        {{ $yesno['names'][$index] }}
                                     </option>
                                 @endforeach
                             </select>
@@ -1056,7 +1057,7 @@
                             <label for="binarythreads" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tasks mr-1"></i>Update Binaries Threads
                             </label>
-                            <input type="text" id="binarythreads" name="binarythreads" value="{{ $site->binarythreads ?? '' }}"
+                            <input type="text" id="binarythreads" name="binarythreads" value="{{ $site['binarythreads'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of threads for update_binaries. If you notice that you are getting a lot of parts into the missed_parts table, it is possible that you USP is not keeping up with the requests. Try to reduce the threads. At least until the cause can be determined.</p>
                         </div>
@@ -1065,7 +1066,7 @@
                             <label for="backfillthreads" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tasks mr-1"></i>Backfill Threads
                             </label>
-                            <input type="text" id="backfillthreads" name="backfillthreads" value="{{ $site->backfillthreads ?? '' }}"
+                            <input type="text" id="backfillthreads" name="backfillthreads" value="{{ $site['backfillthreads'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of threads for backfill.</p>
                         </div>
@@ -1074,7 +1075,7 @@
                             <label for="releasethreads" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tasks mr-1"></i>Update Releases Threads
                             </label>
-                            <input type="text" id="releasethreads" name="releasethreads" value="{{ $site->releasethreads ?? '' }}"
+                            <input type="text" id="releasethreads" name="releasethreads" value="{{ $site['releasethreads'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of threads for releases update scripts.</p>
                         </div>
@@ -1083,7 +1084,7 @@
                             <label for="postthreads" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tasks mr-1"></i>Postprocessing Additional Threads
                             </label>
-                            <input type="text" id="postthreads" name="postthreads" value="{{ $site->postthreads ?? '' }}"
+                            <input type="text" id="postthreads" name="postthreads" value="{{ $site['postthreads'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of threads for additional postprocessing. This includes deep rar inspection, preview and sample creation and nfo processing.</p>
                         </div>
@@ -1092,7 +1093,7 @@
                             <label for="nfothreads" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tasks mr-1"></i>NFO Threads
                             </label>
-                            <input type="text" id="nfothreads" name="nfothreads" value="{{ $site->nfothreads ?? '' }}"
+                            <input type="text" id="nfothreads" name="nfothreads" value="{{ $site['nfothreads'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of threads for nfo postprocessing. The max is 16, if you set anything higher it will use 16.</p>
                         </div>
@@ -1101,7 +1102,7 @@
                             <label for="postthreadsnon" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tasks mr-1"></i>Postprocessing Non-Amazon Threads
                             </label>
-                            <input type="text" id="postthreadsnon" name="postthreadsnon" value="{{ $site->postthreadsnon ?? '' }}"
+                            <input type="text" id="postthreadsnon" name="postthreadsnon" value="{{ $site['postthreadsnon'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of threads for non-amazon postprocessing. This includes movies, anime and tv lookups.</p>
                         </div>
@@ -1110,7 +1111,7 @@
                             <label for="fixnamethreads" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                 <i class="fa fa-tasks mr-1"></i>fixReleaseNames Threads
                             </label>
-                            <input type="text" id="fixnamethreads" name="fixnamethreads" value="{{ $site->fixnamethreads ?? '' }}"
+                            <input type="text" id="fixnamethreads" name="fixnamethreads" value="{{ $site['fixnamethreads'] ?? '' }}"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                             <p class="mt-1 text-sm text-gray-500">The number of threads for fixReleasesNames. This includes md5, nfos, par2 and filenames.</p>
                         </div>
diff --git a/resources/views/admin/site/stats.blade.php b/resources/views/admin/site/stats.blade.php
index 671fbff16..e85402fae 100644
--- a/resources/views/admin/site/stats.blade.php
+++ b/resources/views/admin/site/stats.blade.php
@@ -2,149 +2,197 @@
 
 @section('content')
 <div class="container mx-auto px-4 py-6">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
-        <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h1 class="text-2xl font-semibold text-gray-800">
-                <i class="fa fa-chart-bar mr-2"></i>{{ $title }}
-            </h1>
-        </div>
-
-        <div class="p-6 space-y-8">
-            <!-- Top Grabbers -->
-            @if(!empty($topgrabs) && count($topgrabs) > 0)
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Top Grabbers</h2>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Grabs</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
-                                @foreach($topgrabs as $grab)
-                                    <tr>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $grab->username }}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $grab->grabs }}</td>
-                                    </tr>
-                                @endforeach
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            @endif
-
-            <!-- Top Downloads -->
-            @if(!empty($topdownloads) && count($topdownloads) > 0)
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Top Downloads</h2>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Release</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Downloads</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
-                                @foreach($topdownloads as $download)
-                                    <tr>
-                                        <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $download->searchname }}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $download->grabs }}</td>
-                                    </tr>
-                                @endforeach
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            @endif
-
-            <!-- Recently Added -->
-            @if(!empty($recent) && count($recent) > 0)
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Recently Added Releases</h2>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Releases</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
-                                @foreach($recent as $item)
-                                    <tr>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->thedate }}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->num }}</td>
-                                    </tr>
-                                @endforeach
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            @endif
-
-            <!-- Users by Month -->
-            @if(!empty($usersbymonth) && count($usersbymonth) > 0)
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">User Signups by Month</h2>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Month</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Signups</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
-                                @foreach($usersbymonth as $month)
-                                    <tr>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $month->mth }}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $month->num }}</td>
-                                    </tr>
-                                @endforeach
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            @endif
-
-            <!-- Users by Role -->
-            @if(!empty($usersbyrole) && count($usersbyrole) > 0)
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Users by Role</h2>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Count</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
-                                @foreach($usersbyrole as $role)
-                                    <tr>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $role->name }}</td>
-                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $role->num }}</td>
-                                    </tr>
-                                @endforeach
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            @endif
-
-            @if(empty($topgrabs) && empty($topdownloads) && empty($recent) && empty($usersbymonth) && empty($usersbyrole))
-                <div class="text-center py-12">
-                    <i class="fa fa-chart-bar text-gray-400 text-5xl mb-4"></i>
-                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No statistics available</h3>
-                    <p class="text-gray-500">Statistics will appear here once data is collected.</p>
-                </div>
-            @endif
+    <!-- Header -->
+    <div class="mb-8">
+        <div class="flex items-center space-x-3">
+            <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-xl shadow-md">
+                <i class="fa fa-chart-bar text-white text-xl"></i>
+            </div>
+            <div>
+                <h1 class="text-3xl font-bold text-gray-700 dark:text-white">{{ $title }}</h1>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Overview of your site's performance and activity</p>
+            </div>
         </div>
     </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Top Grabbers -->
+        @if(!empty($topgrabs) && count($topgrabs) > 0)
+            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300">
+                <div class="bg-gradient-to-r from-blue-400 to-blue-500 px-6 py-4">
+                    <div class="flex items-center space-x-3">
+                        <div class="flex items-center justify-center w-10 h-10 bg-blue-700 bg-opacity-40 rounded-lg">
+                            <i class="fa fa-trophy text-blue-100 text-lg"></i>
+                        </div>
+                        <h2 class="text-xl font-bold text-white">Top Grabbers</h2>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="space-y-3">
+                        @foreach($topgrabs as $index => $grab)
+                            <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-200 dark:border-transparent">
+                                <div class="flex items-center space-x-4">
+                                    <div class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-600 dark:bg-gray-500 text-white font-bold text-sm shadow-sm">
+                                        {{ $index + 1 }}
+                                    </div>
+                                    <div>
+                                        <p class="font-semibold text-gray-700 dark:text-gray-100">{{ $grab['username'] }}</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="px-4 py-2 bg-blue-500 text-white rounded-full text-sm font-bold shadow-md">
+                                        {{ number_format($grab['grabs']) }}
+                                    </span>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        @endif
+
+        <!-- Top Downloads -->
+        @if(!empty($topdownloads) && count($topdownloads) > 0)
+            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300">
+                <div class="bg-gradient-to-r from-purple-400 to-purple-500 px-6 py-4">
+                    <div class="flex items-center space-x-3">
+                        <div class="flex items-center justify-center w-10 h-10 bg-purple-700 bg-opacity-40 rounded-lg">
+                            <i class="fa fa-download text-purple-100 text-lg"></i>
+                        </div>
+                        <h2 class="text-xl font-bold text-white">Top Downloads</h2>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="space-y-3">
+                        @foreach($topdownloads as $index => $download)
+                            <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-200 dark:border-transparent">
+                                <div class="flex items-center space-x-4 flex-1 min-w-0">
+                                    <div class="flex items-center justify-center w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-600 text-white font-bold text-sm flex-shrink-0 shadow-sm">
+                                        {{ $index + 1 }}
+                                    </div>
+                                    <div class="min-w-0 flex-1">
+                                        <p class="font-medium text-gray-700 dark:text-gray-100 truncate" title="{{ $download['searchname'] }}">
+                                            {{ $download['searchname'] }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-2 ml-4 flex-shrink-0">
+                                    <span class="px-4 py-2 bg-purple-600 dark:bg-purple-500 text-white rounded-full text-sm font-bold shadow-md">
+                                        {{ number_format($download['grabs']) }}
+                                    </span>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        @endif
+
+        <!-- Recently Added -->
+        @if(!empty($recent) && count($recent) > 0)
+            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300">
+                <div class="bg-gradient-to-r from-green-400 to-green-500 px-6 py-4">
+                    <div class="flex items-center space-x-3">
+                        <div class="flex items-center justify-center w-10 h-10 bg-green-700 bg-opacity-40 rounded-lg">
+                            <i class="fa fa-clock text-green-100 text-lg"></i>
+                        </div>
+                        <h2 class="text-xl font-bold text-white">Recently Added</h2>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="space-y-3">
+                        @foreach($recent as $item)
+                            <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-200 dark:border-transparent">
+                                <div class="flex items-center space-x-3">
+                                    <div class="flex items-center justify-center w-8 h-8 bg-green-400 dark:bg-green-600 rounded-lg shadow-sm">
+                                        <i class="fa fa-folder text-white text-sm"></i>
+                                    </div>
+                                    <p class="font-semibold text-gray-700 dark:text-gray-100">{{ $item['category'] }}</p>
+                                </div>
+                                <span class="px-4 py-2 bg-green-600 dark:bg-green-500 text-white rounded-full text-sm font-bold shadow-md">
+                                    {{ number_format($item['count']) }}
+                                </span>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        @endif
+
+        <!-- Users by Month -->
+        @if(!empty($usersbymonth) && count($usersbymonth) > 0)
+            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300">
+                <div class="bg-gradient-to-r from-indigo-400 to-indigo-500 px-6 py-4">
+                    <div class="flex items-center space-x-3">
+                        <div class="flex items-center justify-center w-10 h-10 bg-indigo-700 bg-opacity-40 rounded-lg">
+                            <i class="fa fa-calendar text-indigo-100 text-lg"></i>
+                        </div>
+                        <h2 class="text-xl font-bold text-white">User Signups by Month</h2>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="space-y-3 max-h-96 overflow-y-auto">
+                        @foreach($usersbymonth as $month)
+                            <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-200 dark:border-transparent">
+                                <div class="flex items-center space-x-3">
+                                    <div class="flex items-center justify-center w-8 h-8 bg-indigo-400 dark:bg-indigo-600 rounded-lg shadow-sm">
+                                        <i class="fa fa-users text-white text-sm"></i>
+                                    </div>
+                                    <p class="font-semibold text-gray-700 dark:text-gray-100">{{ $month['month'] }}</p>
+                                </div>
+                                <span class="px-4 py-2 bg-indigo-600 dark:bg-indigo-500 text-white rounded-full text-sm font-bold shadow-md">
+                                    {{ number_format($month['signups']) }}
+                                </span>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        @endif
+
+        <!-- Users by Role -->
+        @if(!empty($usersbyrole) && count($usersbyrole) > 0)
+            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300">
+                <div class="bg-gradient-to-r from-pink-400 to-pink-500 px-6 py-4">
+                    <div class="flex items-center space-x-3">
+                        <div class="flex items-center justify-center w-10 h-10 bg-pink-700 bg-opacity-40 rounded-lg">
+                            <i class="fa fa-user-shield text-pink-100 text-lg"></i>
+                        </div>
+                        <h2 class="text-xl font-bold text-white">Users by Role</h2>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="space-y-3">
+                        @foreach($usersbyrole as $role)
+                            <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-200 dark:border-transparent">
+                                <div class="flex items-center space-x-3">
+                                    <div class="flex items-center justify-center w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-lg shadow-sm">
+                                        <i class="fa fa-shield-alt text-white text-sm"></i>
+                                    </div>
+                                    <p class="font-semibold text-gray-700 dark:text-gray-100 capitalize">{{ $role['role'] }}</p>
+                                </div>
+                                <span class="px-4 py-2 bg-pink-600 dark:bg-pink-500 text-white rounded-full text-sm font-bold shadow-md">
+                                    {{ number_format($role['users']) }}
+                                </span>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        @endif
+    </div>
+
+    @if(empty($topgrabs) && empty($topdownloads) && empty($recent) && empty($usersbymonth) && empty($usersbyrole))
+        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-md p-12 text-center border border-gray-300 dark:border-gray-700">
+            <div class="flex justify-center mb-6">
+                <div class="flex items-center justify-center w-24 h-24 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 rounded-full">
+                    <i class="fa fa-chart-bar text-gray-500 dark:text-gray-500 text-4xl"></i>
+                </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-100 mb-3">No statistics available</h3>
+            <p class="text-gray-600 dark:text-gray-400 text-lg">Statistics will appear here once data is collected.</p>
+        </div>
+    @endif
 </div>
 @endsection
 
diff --git a/resources/views/admin/site/tmux-edit.blade.php b/resources/views/admin/site/tmux-edit.blade.php
index ce671d86d..dd7a77c02 100644
--- a/resources/views/admin/site/tmux-edit.blade.php
+++ b/resources/views/admin/site/tmux-edit.blade.php
@@ -1,21 +1,6 @@
 @extends('layouts.admin')
 
-@push('styles')
-<style>
-/* Select color states - Light mode */
-#tmuxForm select.select-yes { background-color: #d1e7dd !important; border-color: #badbcc !important; color: #0f5132 !important; }
-#tmuxForm select.select-no { background-color: #f8d7da !important; border-color: #f5c2c7 !important; color: #842029 !important; }
-#tmuxForm select.select-other { background-color: #e2e3e5 !important; border-color: #d3d6d8 !important; color: #41464b !important; }
-#tmuxForm select:focus { box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
-
-/* Select color states - Dark mode */
-@media (prefers-color-scheme: dark) {
-    #tmuxForm select.select-yes { background-color: #1a3a2a !important; border-color: #2d5a3d !important; color: #7fc99b !important; }
-    #tmuxForm select.select-no { background-color: #3a1a1d !important; border-color: #5a2d31 !important; color: #f5a9b0 !important; }
-    #tmuxForm select.select-other { background-color: #2a2a2a !important; border-color: #3d3d3d !important; color: #b0b0b0 !important; }
-}
-</style>
-@endpush
+{{-- Styles moved to resources/css/csp-safe.css --}}
 
 @section('content')
 <div class="container mx-auto px-4 py-6">
@@ -64,7 +49,7 @@
                         <x-form.group label="Tmux Scripts Running" for="running" help="Shutdown switch. When on, scripts run; when off, all scripts are terminated.">
                             <x-select id="running" name="running" class="w-full">
                                 @foreach($yesno_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->running ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['running'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $yesno_names[$index] }}
                                     </option>
                                 @endforeach
@@ -73,13 +58,13 @@
 
                         <x-form.group label="Monitor Loop Timer" for="monitor_delay" help="Time between query refreshes. Lower = more frequent DB queries.">
                             <div class="flex gap-2">
-                                <x-input id="monitor_delay" name="monitor_delay" type="number" value="{{ $site->monitor_delay ?? 300 }}" class="flex-1" />
+                                <x-input id="monitor_delay" name="monitor_delay" type="number" value="{{ $site['monitor_delay'] ?? 300 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
 
                         <x-form.group label="Tmux Session Name" for="tmux_session" help="Session name for tmux. No spaces allowed. Can't be changed after scripts start.">
-                            <x-input id="tmux_session" name="tmux_session" type="text" value="{{ $site->tmux_session ?? 'nntmux' }}" class="w-full" />
+                            <x-input id="tmux_session" name="tmux_session" type="text" value="{{ $site['tmux_session'] ?? 'nntmux' }}" class="w-full" />
                         </x-form.group>
                     </div>
                 </div>
@@ -91,7 +76,7 @@
                         <x-form.group label="Run Sequential" for="sequential" help="Sequential runs update_binaries, backfill and update releases sequentially.">
                             <x-select id="sequential" name="sequential" class="w-full">
                                 @foreach($sequential_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->sequential ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['sequential'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $sequential_names[$index] }}
                                     </option>
                                 @endforeach
@@ -100,7 +85,7 @@
 
                         <x-form.group label="Sequential Sleep Timer" for="seq_timer">
                             <div class="flex gap-2">
-                                <x-input id="seq_timer" name="seq_timer" type="number" value="{{ $site->seq_timer ?? 60 }}" class="flex-1" />
+                                <x-input id="seq_timer" name="seq_timer" type="number" value="{{ $site['seq_timer'] ?? 60 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
@@ -118,7 +103,7 @@
                         <x-form.group label="Update Binaries" for="binaries" help="Gets from your last_record to now.">
                             <x-select id="binaries" name="binaries" class="w-full">
                                 @foreach($binaries_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->binaries ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['binaries'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $binaries_names[$index] }}
                                     </option>
                                 @endforeach
@@ -127,14 +112,14 @@
 
                         <x-form.group label="Update Binaries Sleep Timer" for="bins_timer">
                             <div class="flex gap-2">
-                                <x-input id="bins_timer" name="bins_timer" type="number" value="{{ $site->bins_timer ?? 10 }}" class="flex-1" />
+                                <x-input id="bins_timer" name="bins_timer" type="number" value="{{ $site['bins_timer'] ?? 10 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
 
                         <x-form.group label="Binaries Kill Timer" for="bins_kill_timer" help="Time allowed to run with no updates.">
                             <div class="flex gap-2">
-                                <x-input id="bins_kill_timer" name="bins_kill_timer" type="number" value="{{ $site->bins_kill_timer ?? 30 }}" class="flex-1" />
+                                <x-input id="bins_kill_timer" name="bins_kill_timer" type="number" value="{{ $site['bins_kill_timer'] ?? 30 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">minutes</span>
                             </div>
                         </x-form.group>
@@ -149,7 +134,7 @@
                             <x-form.group label="Backfill Mode" for="backfill">
                                 <x-select id="backfill" name="backfill" class="w-full">
                                     @foreach($backfill_ids as $index => $val)
-                                        <option value="{{ $val }}" {{ ($site->backfill ?? '') == $val ? 'selected' : '' }}>
+                                        <option value="{{ $val }}" {{ ($site['backfill'] ?? '') == $val ? 'selected' : '' }}>
                                             {{ $backfill_names[$index] }}
                                         </option>
                                     @endforeach
@@ -159,7 +144,7 @@
                             <x-form.group label="Backfill Order" for="backfill_order">
                                 <x-select id="backfill_order" name="backfill_order" class="w-full">
                                     @foreach($backfill_group_ids as $index => $val)
-                                        <option value="{{ $val }}" {{ ($site->backfill_order ?? '') == $val ? 'selected' : '' }}>
+                                        <option value="{{ $val }}" {{ ($site['backfill_order'] ?? '') == $val ? 'selected' : '' }}>
                                             {{ $backfill_group[$index] }}
                                         </option>
                                     @endforeach
@@ -169,7 +154,7 @@
                             <x-form.group label="Backfill Days" for="backfill_days">
                                 <x-select id="backfill_days" name="backfill_days" class="w-full">
                                     @foreach($backfill_days_ids as $index => $val)
-                                        <option value="{{ $val }}" {{ ($site->backfill_days ?? '') == $val ? 'selected' : '' }}>
+                                        <option value="{{ $val }}" {{ ($site['backfill_days'] ?? '') == $val ? 'selected' : '' }}>
                                             {{ $backfill_days[$index] }}
                                         </option>
                                     @endforeach
@@ -178,16 +163,16 @@
                         </div>
 
                         <x-form.group label="Backfill Quantity" for="backfill_qty" help="Number of headers per group per thread to download.">
-                            <x-input id="backfill_qty" name="backfill_qty" type="number" value="{{ $site->backfill_qty ?? 20000 }}" class="w-full" />
+                            <x-input id="backfill_qty" name="backfill_qty" type="number" value="{{ $site['backfill_qty'] ?? 20000 }}" class="w-full" />
                         </x-form.group>
 
                         <x-form.group label="Backfill Groups" for="backfill_groups" help="Number of groups to backfill per loop.">
-                            <x-input id="backfill_groups" name="backfill_groups" type="number" value="{{ $site->backfill_groups ?? 1 }}" class="w-full" />
+                            <x-input id="backfill_groups" name="backfill_groups" type="number" value="{{ $site['backfill_groups'] ?? 1 }}" class="w-full" />
                         </x-form.group>
 
                         <x-form.group label="Backfill Sleep Timer" for="back_timer">
                             <div class="flex gap-2">
-                                <x-input id="back_timer" name="back_timer" type="number" value="{{ $site->back_timer ?? 300 }}" class="flex-1" />
+                                <x-input id="back_timer" name="back_timer" type="number" value="{{ $site['back_timer'] ?? 300 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
@@ -195,7 +180,7 @@
                         <x-form.group label="Variable Sleep Timer" for="progressive" help="Vary backfill sleep depending on collection count.">
                             <x-select id="progressive" name="progressive" class="w-full">
                                 @foreach($yesno_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->progressive ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['progressive'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $yesno_names[$index] }}
                                     </option>
                                 @endforeach
@@ -211,7 +196,7 @@
                         <x-form.group label="Update Releases" for="releases" help="Create releases. Only turn off when you only want to post process.">
                             <x-select id="releases" name="releases" class="w-full">
                                 @foreach($releases_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->releases ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['releases'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $releases_names[$index] }}
                                     </option>
                                 @endforeach
@@ -220,7 +205,7 @@
 
                         <x-form.group label="Update Releases Sleep Timer" for="rel_timer">
                             <div class="flex gap-2">
-                                <x-input id="rel_timer" name="rel_timer" type="number" value="{{ $site->rel_timer ?? 15 }}" class="flex-1" />
+                                <x-input id="rel_timer" name="rel_timer" type="number" value="{{ $site['rel_timer'] ?? 15 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
@@ -234,7 +219,7 @@
                         <x-form.group label="Postprocess Additional" for="post" help="Deep rar inspection, preview/sample creation, NFO processing.">
                             <x-select id="post" name="post" class="w-full">
                                 @foreach($post_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->post ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['post'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $post_names[$index] }}
                                     </option>
                                 @endforeach
@@ -243,14 +228,14 @@
 
                         <x-form.group label="Postprocess Additional Sleep Timer" for="post_timer">
                             <div class="flex gap-2">
-                                <x-input id="post_timer" name="post_timer" type="number" value="{{ $site->post_timer ?? 300 }}" class="flex-1" />
+                                <x-input id="post_timer" name="post_timer" type="number" value="{{ $site['post_timer'] ?? 300 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
 
                         <x-form.group label="Postprocess Kill Timer" for="post_kill_timer" help="Time allowed with no screen updates.">
                             <div class="flex gap-2">
-                                <x-input id="post_kill_timer" name="post_kill_timer" type="number" value="{{ $site->post_kill_timer ?? 300 }}" class="flex-1" />
+                                <x-input id="post_kill_timer" name="post_kill_timer" type="number" value="{{ $site['post_kill_timer'] ?? 300 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
@@ -258,7 +243,7 @@
                         <x-form.group label="Postprocess Amazon" for="post_amazon" help="Books, music and games lookups.">
                             <x-select id="post_amazon" name="post_amazon" class="w-full">
                                 @foreach($yesno_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->post_amazon ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['post_amazon'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $yesno_names[$index] }}
                                     </option>
                                 @endforeach
@@ -267,7 +252,7 @@
 
                         <x-form.group label="Postprocess Amazon Sleep Timer" for="post_timer_amazon">
                             <div class="flex gap-2">
-                                <x-input id="post_timer_amazon" name="post_timer_amazon" type="number" value="{{ $site->post_timer_amazon ?? 300 }}" class="flex-1" />
+                                <x-input id="post_timer_amazon" name="post_timer_amazon" type="number" value="{{ $site['post_timer_amazon'] ?? 300 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
@@ -275,7 +260,7 @@
                         <x-form.group label="Postprocess Non-Amazon" for="post_non" help="Movies, anime and TV lookups.">
                             <x-select id="post_non" name="post_non" class="w-full">
                                 @foreach($yesno_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->post_non ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['post_non'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $yesno_names[$index] }}
                                     </option>
                                 @endforeach
@@ -284,7 +269,7 @@
 
                         <x-form.group label="Postprocess Non-Amazon Sleep Timer" for="post_timer_non">
                             <div class="flex gap-2">
-                                <x-input id="post_timer_non" name="post_timer_non" type="number" value="{{ $site->post_timer_non ?? 300 }}" class="flex-1" />
+                                <x-input id="post_timer_non" name="post_timer_non" type="number" value="{{ $site['post_timer_non'] ?? 300 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
@@ -298,7 +283,7 @@
                         <x-form.group label="Fix Release Names" for="fix_names" help="Fix release names using NFOs, par2 files, filenames, md5 and sha1.">
                             <x-select id="fix_names" name="fix_names" class="w-full">
                                 @foreach($yesno_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->fix_names ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['fix_names'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $yesno_names[$index] }}
                                     </option>
                                 @endforeach
@@ -307,7 +292,7 @@
 
                         <x-form.group label="Fix Release Names Sleep Timer" for="fix_timer">
                             <div class="flex gap-2">
-                                <x-input id="fix_timer" name="fix_timer" type="number" value="{{ $site->fix_timer ?? 60 }}" class="flex-1" />
+                                <x-input id="fix_timer" name="fix_timer" type="number" value="{{ $site['fix_timer'] ?? 60 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
@@ -321,7 +306,7 @@
                         <x-form.group label="Remove Crap Releases" for="fix_crap_opt" help="Remove passworded and other junk releases.">
                             <x-select id="fix_crap_opt" name="fix_crap_opt" class="w-full">
                                 @foreach($yesno_ids as $index => $val)
-                                    <option value="{{ $val }}" {{ ($site->fix_crap_opt ?? '') == $val ? 'selected' : '' }}>
+                                    <option value="{{ $val }}" {{ ($site['fix_crap_opt'] ?? '') == $val ? 'selected' : '' }}>
                                         {{ $yesno_names[$index] }}
                                     </option>
                                 @endforeach
@@ -330,7 +315,7 @@
 
                         <x-form.group label="Remove Crap Sleep Timer" for="crap_timer">
                             <div class="flex gap-2">
-                                <x-input id="crap_timer" name="crap_timer" type="number" value="{{ $site->crap_timer ?? 300 }}" class="flex-1" />
+                                <x-input id="crap_timer" name="crap_timer" type="number" value="{{ $site['crap_timer'] ?? 300 }}" class="flex-1" />
                                 <span class="px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm">seconds</span>
                             </div>
                         </x-form.group>
diff --git a/resources/views/admin/users/deleted.blade.php b/resources/views/admin/users/deleted.blade.php
index fc54661b9..2d6d8f07a 100644
--- a/resources/views/admin/users/deleted.blade.php
+++ b/resources/views/admin/users/deleted.blade.php
@@ -107,6 +107,13 @@
             </div>
         @endif
 
+        <!-- Validation Error Messages (for bulk actions) -->
+        <div id="validationError" class="mx-6 mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg hidden">
+            <p class="text-yellow-800 dark:text-yellow-300">
+                <i class="fa fa-exclamation-triangle mr-2"></i><span id="validationErrorMessage"></span>
+            </p>
+        </div>
+
         <!-- Deleted Users Table -->
         @if(count($deletedusers) > 0)
             <form method="post" action="{{ url('admin/deleted-users/bulk') }}" id="bulkActionForm">
@@ -195,18 +202,24 @@
                                     </td>
                                     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                         <div class="flex gap-2">
-                                            <a href="{{ url('admin/deleted-users/restore/' . $user->id) }}"
-                                               class="text-green-600 hover:text-green-900"
-                                               title="Restore User"
-                                               onclick="return confirm('Are you sure you want to restore user \'{{ $user->username }}\'?')">
-                                                <i class="fa fa-undo"></i>
-                                            </a>
-                                            <a href="{{ url('admin/deleted-users/permanent-delete/' . $user->id) }}"
-                                               class="text-red-600 hover:text-red-900"
-                                               title="Permanently Delete"
-                                               onclick="return confirm('Are you sure you want to PERMANENTLY delete user \'{{ $user->username }}\'? This action cannot be undone!')">
-                                                <i class="fa fa-trash-alt"></i>
-                                            </a>
+                                            <form action="{{ url('admin/deleted-users/restore/' . $user->id) }}" method="POST" class="inline-form">
+                                                @csrf
+                                                <button type="submit"
+                                                        class="text-green-600 hover:text-green-900 bg-transparent border-0 p-0 cursor-pointer"
+                                                        title="Restore User"
+                                                        data-confirm="Are you sure you want to restore user '{{ $user->username }}'?">
+                                                    <i class="fa fa-undo"></i>
+                                                </button>
+                                            </form>
+                                            <form action="{{ url('admin/deleted-users/permanent-delete/' . $user->id) }}" method="POST" class="inline-form">
+                                                @csrf
+                                                <button type="submit"
+                                                        class="text-red-600 hover:text-red-900 bg-transparent border-0 p-0 cursor-pointer"
+                                                        title="Permanently Delete"
+                                                        data-confirm="Are you sure you want to PERMANENTLY delete user '{{ $user->username }}'? This action cannot be undone!">
+                                                    <i class="fa fa-trash-alt"></i>
+                                                </button>
+                                            </form>
                                         </div>
                                     </td>
                                 </tr>
@@ -230,36 +243,6 @@
     </div>
 </div>
 
-<script>
-// Select all checkbox functionality
-document.getElementById('selectAll')?.addEventListener('change', function() {
-    const checkboxes = document.querySelectorAll('.user-checkbox');
-    checkboxes.forEach(cb => cb.checked = this.checked);
-});
-
-// Confirm bulk action
-function confirmBulkAction() {
-    const action = document.getElementById('bulkAction').value;
-    const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
-
-    if (!action) {
-        alert('Please select an action.');
-        return false;
-    }
-
-    if (checkedBoxes.length === 0) {
-        alert('Please select at least one user.');
-        return false;
-    }
-
-    if (action === 'delete') {
-        return confirm(`Are you sure you want to PERMANENTLY delete ${checkedBoxes.length} user(s)? This action cannot be undone!`);
-    } else if (action === 'restore') {
-        return confirm(`Are you sure you want to restore ${checkedBoxes.length} user(s)?`);
-    }
-
-    return true;
-}
-</script>
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 @endsection
 
diff --git a/resources/views/admin/users/edit.blade.php b/resources/views/admin/users/edit.blade.php
index 887743ca1..16518260b 100644
--- a/resources/views/admin/users/edit.blade.php
+++ b/resources/views/admin/users/edit.blade.php
@@ -4,16 +4,16 @@
 <div class="container mx-auto px-4 py-6">
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
         <!-- Header -->
-        <div class="px-6 py-4 border-b border-gray-200">
-            <h1 class="text-2xl font-semibold text-gray-800">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">
                 <i class="fa fa-user mr-2"></i>{{ $title }}
             </h1>
         </div>
 
         <!-- Error Messages -->
         @if(!empty($error))
-            <div class="mx-6 mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
-                <p class="text-red-800">
+            <div class="mx-6 mt-4 p-4 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-lg">
+                <p class="text-red-800 dark:text-red-200">
                     <i class="fa fa-exclamation-circle mr-2"></i>{{ $error }}
                 </p>
             </div>
@@ -38,7 +38,7 @@
                            name="username"
                            value="{{ is_array($user) ? ($user['username'] ?? '') : ($user->username ?? '') }}"
                            required
-                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                           class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
                 </div>
 
                 <!-- Email -->
@@ -51,7 +51,7 @@
                            name="email"
                            value="{{ is_array($user) ? ($user['email'] ?? '') : ($user->email ?? '') }}"
                            required
-                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                           class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
                 </div>
 
                 <!-- Password -->
@@ -64,9 +64,9 @@
                            name="password"
                            placeholder="{{ !empty($user['id']) ? 'Leave blank to keep current password' : '' }}"
                            @if(empty($user['id'])) required @endif
-                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                           class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 placeholder:text-gray-400 dark:placeholder:text-gray-500">
                     @if(!empty($user['id']))
-                        <p class="mt-1 text-sm text-gray-500">Leave blank to keep the current password</p>
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Leave blank to keep the current password</p>
                     @endif
                 </div>
 
@@ -78,7 +78,7 @@
                     <select id="role"
                             name="role"
                             required
-                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
                         @foreach($role_ids ?? [] as $index => $roleId)
                             <option value="{{ $roleId }}"
                                 {{ (is_array($user) ? ($user['role'] ?? '') : ($user->roles->first()->id ?? '')) == $roleId ? 'selected' : '' }}>
@@ -88,6 +88,209 @@
                     </select>
                 </div>
 
+                <!-- Role Expiry Date -->
+                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
+                    <div class="flex items-center justify-between mb-3">
+                        <label for="rolechangedate" class="text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center">
+                            <i class="fa fa-calendar-alt mr-2 text-blue-600 dark:text-blue-400"></i>
+                            Role Expiry Date
+                        </label>
+                        @if(!empty($user->rolechangedate ?? ''))
+                            @php
+                                $expiryDate = \Carbon\Carbon::parse($user->rolechangedate);
+                                $isExpired = $expiryDate->isPast();
+                                $daysUntilExpiry = $expiryDate->diffInDays(now());
+                            @endphp
+                            @if($isExpired)
+                                <span class="px-3 py-1 inline-flex items-center text-xs leading-5 font-semibold rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 animate-pulse">
+                                    <i class="fa fa-exclamation-triangle mr-1"></i> Expired
+                                </span>
+                            @elseif($daysUntilExpiry <= 7)
+                                <span class="px-3 py-1 inline-flex items-center text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
+                                    <i class="fa fa-exclamation-circle mr-1"></i> Expiring Soon
+                                </span>
+                            @else
+                                <span class="px-3 py-1 inline-flex items-center text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                    <i class="fa fa-check-circle mr-1"></i> Active
+                                </span>
+                            @endif
+                        @else
+                            <span class="px-3 py-1 inline-flex items-center text-xs leading-5 font-semibold rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300">
+                                <i class="fa fa-infinity mr-1"></i> No Expiry
+                            </span>
+                        @endif
+                    </div>
+
+                    <!-- Hidden input for form submission -->
+                    <input type="hidden" id="rolechangedate" name="rolechangedate" value="{{ is_array($user) ? ($user['rolechangedate'] ?? '') : (isset($user->rolechangedate) ? \Carbon\Carbon::parse($user->rolechangedate)->format('Y-m-d\TH:i:s') : '') }}">
+
+                    <!-- Custom DateTime Picker -->
+                    <div class="grid grid-cols-5 gap-3">
+                        <!-- Year Selector -->
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
+                                <i class="fa fa-calendar-alt mr-1"></i>Year
+                            </label>
+                            <select id="expiry_year"
+                                    class="w-full px-2 py-3 text-lg font-semibold bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-all shadow-sm hover:shadow-md hover:border-blue-400 dark:hover:border-blue-500">
+                                <option value="">--</option>
+                                @for($y = date('Y'); $y <= date('Y') + 5; $y++)
+                                    <option value="{{ $y }}">{{ $y }}</option>
+                                @endfor
+                            </select>
+                        </div>
+
+                        <!-- Month Selector -->
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
+                                <i class="fa fa-calendar mr-1"></i>Month
+                            </label>
+                            <select id="expiry_month"
+                                    class="w-full px-2 py-3 text-lg font-semibold bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-all shadow-sm hover:shadow-md hover:border-blue-400 dark:hover:border-blue-500">
+                                <option value="">--</option>
+                                <option value="01">Jan</option>
+                                <option value="02">Feb</option>
+                                <option value="03">Mar</option>
+                                <option value="04">Apr</option>
+                                <option value="05">May</option>
+                                <option value="06">Jun</option>
+                                <option value="07">Jul</option>
+                                <option value="08">Aug</option>
+                                <option value="09">Sep</option>
+                                <option value="10">Oct</option>
+                                <option value="11">Nov</option>
+                                <option value="12">Dec</option>
+                            </select>
+                        </div>
+
+                        <!-- Day Selector -->
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
+                                <i class="fa fa-calendar-day mr-1"></i>Day
+                            </label>
+                            <select id="expiry_day"
+                                    class="w-full px-2 py-3 text-lg font-semibold bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-all shadow-sm hover:shadow-md hover:border-blue-400 dark:hover:border-blue-500">
+                                <option value="">--</option>
+                                @for($d = 1; $d <= 31; $d++)
+                                    <option value="{{ sprintf('%02d', $d) }}">{{ $d }}</option>
+                                @endfor
+                            </select>
+                        </div>
+
+                        <!-- Hour Selector -->
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
+                                <i class="fa fa-clock mr-1"></i>Hour
+                            </label>
+                            <select id="expiry_hour"
+                                    class="w-full px-2 py-3 text-lg font-semibold bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-all shadow-sm hover:shadow-md hover:border-blue-400 dark:hover:border-blue-500">
+                                <option value="">--</option>
+                                @for($h = 0; $h <= 23; $h++)
+                                    <option value="{{ sprintf('%02d', $h) }}">{{ sprintf('%02d', $h) }}</option>
+                                @endfor
+                            </select>
+                        </div>
+
+                        <!-- Minute Selector -->
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
+                                <i class="fa fa-hourglass-half mr-1"></i>Min
+                            </label>
+                            <select id="expiry_minute"
+                                    class="w-full px-2 py-3 text-lg font-semibold bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-all shadow-sm hover:shadow-md hover:border-blue-400 dark:hover:border-blue-500">
+                                <option value="">--</option>
+                                @for($m = 0; $m <= 59; $m++)
+                                    <option value="{{ sprintf('%02d', $m) }}">{{ sprintf('%02d', $m) }}</option>
+                                @endfor
+                            </select>
+                        </div>
+                    </div>
+
+                    <!-- Current Selection Display -->
+                    <div id="datetime_preview" class="mt-3 p-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg hidden">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">
+                                <i class="fa fa-info-circle mr-2"></i>Selected:
+                            </span>
+                            <span id="datetime_display" class="text-base font-bold text-blue-600 dark:text-blue-400"></span>
+                        </div>
+                    </div>
+
+                    <!-- Quick Action Buttons -->
+                    <div class="mt-3 space-y-2">
+                        <div class="flex flex-wrap gap-2">
+                            <button type="button" data-expiry-action="set" data-days="1" data-hours="0" class="px-3 py-1.5 text-xs font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-clock mr-1"></i> +1 Day
+                            </button>
+                            <button type="button" data-expiry-action="set" data-days="7" data-hours="0" class="px-3 py-1.5 text-xs font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-calendar-week mr-1"></i> +1 Week
+                            </button>
+                            <button type="button" data-expiry-action="set" data-days="30" data-hours="0" class="px-3 py-1.5 text-xs font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-calendar-alt mr-1"></i> +1 Month
+                            </button>
+                            <button type="button" data-expiry-action="set" data-days="90" data-hours="0" class="px-3 py-1.5 text-xs font-medium text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-calendar mr-1"></i> +3 Months
+                            </button>
+                            <button type="button" data-expiry-action="set" data-days="365" data-hours="0" class="px-3 py-1.5 text-xs font-medium text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-900/30 border border-purple-200 dark:border-purple-800 rounded-md hover:bg-purple-100 dark:hover:bg-purple-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-calendar-check mr-1"></i> +1 Year
+                            </button>
+                        </div>
+                        <div class="flex flex-wrap gap-2">
+                            <button type="button" data-expiry-action="set" data-days="0" data-hours="1" class="px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-md hover:bg-green-100 dark:hover:bg-green-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-hourglass-start mr-1"></i> +1 Hour
+                            </button>
+                            <button type="button" data-expiry-action="set" data-days="0" data-hours="6" class="px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-md hover:bg-green-100 dark:hover:bg-green-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-hourglass-half mr-1"></i> +6 Hours
+                            </button>
+                            <button type="button" data-expiry-action="set" data-days="0" data-hours="12" class="px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-md hover:bg-green-100 dark:hover:bg-green-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-hourglass-end mr-1"></i> +12 Hours
+                            </button>
+                            <button type="button" data-expiry-action="set" data-days="0" data-hours="24" class="px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-md hover:bg-green-100 dark:hover:bg-green-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-clock mr-1"></i> +24 Hours
+                            </button>
+                            <button type="button" data-expiry-action="end-of-day" class="px-3 py-1.5 text-xs font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800 rounded-md hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-all hover:scale-105">
+                                <i class="fa fa-moon mr-1"></i> End of Today
+                            </button>
+                            <button type="button" data-expiry-action="clear" class="px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-all hover:scale-105">
+                                <i class="fa fa-times-circle mr-1"></i> Clear
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Status Information -->
+                    @if(!empty($user->rolechangedate ?? ''))
+                        <div class="mt-3 p-3 rounded-lg {{ $isExpired ? 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800' : ($daysUntilExpiry <= 7 ? 'bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800' : 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800') }}">
+                            <div class="flex items-start">
+                                <i class="fa {{ $isExpired ? 'fa-exclamation-triangle text-red-600 dark:text-red-400' : ($daysUntilExpiry <= 7 ? 'fa-clock text-yellow-600 dark:text-yellow-400' : 'fa-info-circle text-blue-600 dark:text-blue-400') }} mt-0.5 mr-2"></i>
+                                <div class="flex-1">
+                                    <p class="text-sm font-medium {{ $isExpired ? 'text-red-800 dark:text-red-200' : ($daysUntilExpiry <= 7 ? 'text-yellow-800 dark:text-yellow-200' : 'text-blue-800 dark:text-blue-200') }}">
+                                        @if($isExpired)
+                                            Role expired {{ $expiryDate->diffForHumans() }}
+                                        @else
+                                            Role expires {{ $expiryDate->diffForHumans() }}
+                                        @endif
+                                    </p>
+                                    <p class="text-xs {{ $isExpired ? 'text-red-700 dark:text-red-300' : ($daysUntilExpiry <= 7 ? 'text-yellow-700 dark:text-yellow-300' : 'text-blue-700 dark:text-blue-300') }} mt-1">
+                                        <i class="fa fa-calendar-alt mr-1"></i>{{ $expiryDate->format('F j, Y') }}
+                                        <span class="mx-2">•</span>
+                                        <i class="fa fa-clock mr-1"></i>{{ $expiryDate->format('g:i A') }}
+                                    </p>
+                                    @if($daysUntilExpiry <= 7 && !$isExpired)
+                                        <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+                                            <i class="fa fa-hourglass-half mr-1"></i>{{ $daysUntilExpiry }} day{{ $daysUntilExpiry != 1 ? 's' : '' }} and {{ $expiryDate->diffInHours(now()) % 24 }} hour{{ ($expiryDate->diffInHours(now()) % 24) != 1 ? 's' : '' }} remaining
+                                        </p>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    @else
+                        <p class="mt-3 text-xs text-gray-600 dark:text-gray-400 flex items-center">
+                            <i class="fa fa-lightbulb mr-1.5 text-yellow-500"></i>
+                            <span>Leave empty for permanent role assignment, or use quick actions above to set an expiry date and time.</span>
+                        </p>
+                    @endif
+                </div>
+
                 @if(!empty($user['id']))
                     <!-- Grabs -->
                     <div>
@@ -98,7 +301,7 @@
                                id="grabs"
                                name="grabs"
                                value="{{ is_array($user) ? ($user['grabs'] ?? 0) : ($user->grabs ?? 0) }}"
-                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                               class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
                     </div>
                 @endif
 
@@ -111,7 +314,7 @@
                            id="invites"
                            name="invites"
                            value="{{ is_array($user) ? ($user['invites'] ?? 0) : ($user->invites ?? 0) }}"
-                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                           class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">
                 </div>
 
                 <!-- Notes -->
@@ -122,7 +325,7 @@
                     <textarea id="notes"
                               name="notes"
                               rows="4"
-                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">{{ is_array($user) ? ($user['notes'] ?? '') : ($user->notes ?? '') }}</textarea>
+                              class="w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500">{{ is_array($user) ? ($user['notes'] ?? '') : ($user->notes ?? '') }}</textarea>
                 </div>
 
                 @if(!empty($user['id']))
@@ -139,7 +342,7 @@
                                        value="1"
                                        {{ (is_array($user) ? ($user['movieview'] ?? 0) : ($user->movieview ?? 0)) ? 'checked' : '' }}
                                        class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                                <label for="movieview" class="ml-2 text-sm text-gray-700">Movies</label>
+                                <label for="movieview" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Movies</label>
                             </div>
                             <div class="flex items-center">
                                 <input type="checkbox"
@@ -148,7 +351,7 @@
                                        value="1"
                                        {{ (is_array($user) ? ($user['musicview'] ?? 0) : ($user->musicview ?? 0)) ? 'checked' : '' }}
                                        class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                                <label for="musicview" class="ml-2 text-sm text-gray-700">Music</label>
+                                <label for="musicview" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Music</label>
                             </div>
                             <div class="flex items-center">
                                 <input type="checkbox"
@@ -157,7 +360,7 @@
                                        value="1"
                                        {{ (is_array($user) ? ($user['gameview'] ?? 0) : ($user->gameview ?? 0)) ? 'checked' : '' }}
                                        class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                                <label for="gameview" class="ml-2 text-sm text-gray-700">Games</label>
+                                <label for="gameview" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Games</label>
                             </div>
                             <div class="flex items-center">
                                 <input type="checkbox"
@@ -166,7 +369,7 @@
                                        value="1"
                                        {{ (is_array($user) ? ($user['consoleview'] ?? 0) : ($user->consoleview ?? 0)) ? 'checked' : '' }}
                                        class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                                <label for="consoleview" class="ml-2 text-sm text-gray-700">Console</label>
+                                <label for="consoleview" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Console</label>
                             </div>
                             <div class="flex items-center">
                                 <input type="checkbox"
@@ -175,7 +378,7 @@
                                        value="1"
                                        {{ (is_array($user) ? ($user['bookview'] ?? 0) : ($user->bookview ?? 0)) ? 'checked' : '' }}
                                        class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                                <label for="bookview" class="ml-2 text-sm text-gray-700">Books</label>
+                                <label for="bookview" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Books</label>
                             </div>
                             <div class="flex items-center">
                                 <input type="checkbox"
@@ -184,18 +387,18 @@
                                        value="1"
                                        {{ (is_array($user) ? ($user['xxxview'] ?? 0) : ($user->xxxview ?? 0)) ? 'checked' : '' }}
                                        class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
-                                <label for="xxxview" class="ml-2 text-sm text-gray-700">XXX</label>
+                                <label for="xxxview" class="ml-2 text-sm text-gray-700 dark:text-gray-300">XXX</label>
                             </div>
                         </div>
                     </div>
                 @endif
 
                 <!-- Action Buttons -->
-                <div class="flex gap-3 pt-4 border-t border-gray-200">
-                    <button type="submit" class="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700">
+                <div class="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <button type="submit" class="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800">
                         <i class="fa fa-save mr-2"></i>Save User
                     </button>
-                    <a href="{{ url('admin/user-list') }}" class="px-6 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300">
+                    <a href="{{ url('admin/user-list') }}" class="px-6 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600">
                         <i class="fa fa-times mr-2"></i>Cancel
                     </a>
                 </div>
diff --git a/resources/views/admin/users/index.blade.php b/resources/views/admin/users/index.blade.php
index cf9b89d6b..5653424b8 100644
--- a/resources/views/admin/users/index.blade.php
+++ b/resources/views/admin/users/index.blade.php
@@ -107,6 +107,7 @@
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Username</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Email</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role Expiry</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Host</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Country</th>
                             <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Verified</th>
@@ -127,6 +128,33 @@
                                         {{ $user->roles->first()->name ?? 'N/A' }}
                                     </span>
                                 </td>
+                                <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                    @if($user->rolechangedate)
+                                        @php
+                                            $expiryDate = \Carbon\Carbon::parse($user->rolechangedate);
+                                            $isExpired = $expiryDate->isPast();
+                                            $isExpiringSoon = !$isExpired && $expiryDate->diffInDays(now()) <= 7;
+                                        @endphp
+                                        <div class="flex flex-col gap-1">
+                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full w-fit
+                                                @if($isExpired) bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200
+                                                @elseif($isExpiringSoon) bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200
+                                                @else bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300
+                                                @endif">
+                                                <i class="fa fa-calendar mr-1"></i>{{ $expiryDate->format('M j, Y') }}
+                                                @if($isExpired) <i class="fa fa-exclamation-circle ml-1"></i>@endif
+                                            </span>
+                                            <span class="text-xs text-gray-500 dark:text-gray-400 flex items-center">
+                                                <i class="fa fa-clock mr-1"></i>{{ $expiryDate->format('g:i A') }}
+                                                <span class="ml-2 italic">({{ $expiryDate->diffForHumans() }})</span>
+                                            </span>
+                                        </div>
+                                    @else
+                                        <span class="text-gray-400 dark:text-gray-500 flex items-center">
+                                            <i class="fa fa-infinity mr-1"></i>Never
+                                        </span>
+                                    @endif
+                                </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{{ $user->host ?? 'N/A' }}</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                     @if(!empty($user->country_code))
@@ -173,12 +201,16 @@
                                                 <i class="fa fa-envelope"></i>
                                             </a>
                                         @endif
-                                        <a href="{{ url('admin/user-delete?id=' . $user->id) }}"
-                                           class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
-                                           title="Delete"
-                                           onclick="return confirm('Are you sure you want to delete user \'{{ $user->username }}\'?')">
-                                            <i class="fa fa-trash"></i>
-                                        </a>
+                                        <form action="{{ url('admin/user-delete') }}" method="POST" class="inline-form">
+                                            @csrf
+                                            <input type="hidden" name="id" value="{{ $user->id }}">
+                                            <button type="submit"
+                                                    class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 bg-transparent border-0 p-0 cursor-pointer"
+                                                    title="Delete"
+                                                    data-confirm="Are you sure you want to delete user '{{ $user->username }}'?">
+                                                <i class="fa fa-trash"></i>
+                                            </button>
+                                        </form>
                                     </div>
                                 </td>
                             </tr>
@@ -230,40 +262,5 @@
 
 @endsection
 
-@push('scripts')
-<script>
-let currentVerifyForm = null;
-
-function showVerifyModal(event, form) {
-    event.preventDefault();
-    currentVerifyForm = form;
-    document.getElementById('verifyUserModal').classList.remove('hidden');
-}
-
-function hideVerifyModal() {
-    document.getElementById('verifyUserModal').classList.add('hidden');
-    currentVerifyForm = null;
-}
-
-function submitVerifyForm() {
-    if (currentVerifyForm) {
-        currentVerifyForm.submit();
-    }
-}
-
-// Close modal when clicking outside
-document.getElementById('verifyUserModal')?.addEventListener('click', function(event) {
-    if (event.target === this) {
-        hideVerifyModal();
-    }
-});
-
-// Close modal with Escape key
-document.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape') {
-        hideVerifyModal();
-    }
-});
-</script>
-@endpush
+{{-- Scripts moved to resources/js/csp-safe.js --}}
 
diff --git a/resources/views/auth/2fa_verify.blade.php b/resources/views/auth/2fa_verify.blade.php
new file mode 100644
index 000000000..f454bb2ec
--- /dev/null
+++ b/resources/views/auth/2fa_verify.blade.php
@@ -0,0 +1,142 @@
+@extends('layouts.guest')
+
+@section('content')
+<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full space-y-8">
+        <!-- Logo and Title -->
+        <div class="text-center">
+            <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
+                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                    <i class="fas fa-shield-alt text-3xl text-white"></i>
+                </div>
+            </a>
+            <h2 class="mt-4 text-3xl font-extrabold text-gray-900 dark:text-white">
+                Two-Factor Authentication
+            </h2>
+            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
+                Enter the code from your authenticator app
+            </p>
+        </div>
+
+        <!-- 2FA Verification Card -->
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            <div class="px-8 py-6">
+                <!-- Session Messages -->
+                @if(session('message'))
+                    <div class="mb-4 p-4 rounded-lg {{ session('message_type') == 'success' ? 'bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700' : (session('message_type') == 'danger' ? 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700' : 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700') }}">
+                        <div class="flex items-center">
+                            <i class="fas {{ session('message_type') == 'success' ? 'fa-check-circle text-green-600 dark:text-green-400' : (session('message_type') == 'danger' ? 'fa-exclamation-circle text-red-600 dark:text-red-400' : 'fa-info-circle text-blue-600 dark:text-blue-400') }} mr-3"></i>
+                            <span class="{{ session('message_type') == 'success' ? 'text-green-800 dark:text-green-200' : (session('message_type') == 'danger' ? 'text-red-800 dark:text-red-200' : 'text-blue-800 dark:text-blue-200') }}">
+                                {{ session('message') }}
+                            </span>
+                        </div>
+                    </div>
+                @endif
+
+                @if($errors->any())
+                    <div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700">
+                        <div class="flex items-start">
+                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 mt-0.5"></i>
+                            <div class="flex-1">
+                                <p class="text-sm font-medium text-red-800 dark:text-red-200">There were some errors:</p>
+                                <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
+                                    @foreach($errors->all() as $error)
+                                        <li>{{ $error }}</li>
+                                    @endforeach
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+
+                <div class="mb-6">
+                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
+                        <div class="flex items-start">
+                            <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mr-3 mt-0.5"></i>
+                            <div class="text-sm text-blue-800 dark:text-blue-200">
+                                <p class="font-medium mb-1">Security Verification Required</p>
+                                <p>Open your authenticator app and enter the 6-digit verification code to complete your login.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 2FA Form -->
+                <form method="POST" action="{{ route('2fa.post') }}" class="space-y-6">
+                    @csrf
+
+                    <!-- Verification Code Input -->
+                    <div>
+                        <label for="one_time_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Authentication Code
+                        </label>
+                        <input
+                            type="text"
+                            name="one_time_password"
+                            id="one_time_password"
+                            maxlength="6"
+                            pattern="[0-9]{6}"
+                            inputmode="numeric"
+                            autocomplete="one-time-code"
+                            required
+                            autofocus
+                            placeholder="000000"
+                            class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-2xl tracking-widest font-mono bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+                        >
+                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 text-center">
+                            Enter the 6-digit code from your authenticator app
+                        </p>
+                    </div>
+
+                    <!-- Trust Device Checkbox -->
+                    <div class="flex items-center">
+                        <input
+                            type="checkbox"
+                            name="trust_device"
+                            id="trust_device"
+                            value="1"
+                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
+                        >
+                        <label for="trust_device" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+                            Trust this device for 30 days
+                        </label>
+                    </div>
+
+                    <!-- Submit Button -->
+                    <div>
+                        <button
+                            type="submit"
+                            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+                        >
+                            <i class="fas fa-sign-in-alt mr-2"></i>
+                            Verify and Continue
+                        </button>
+                    </div>
+                </form>
+
+                <!-- Back to Login Link -->
+                <div class="mt-6 text-center">
+                    <a href="{{ route('login') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors">
+                        <i class="fas fa-arrow-left mr-1"></i>
+                        Back to login
+                    </a>
+                </div>
+            </div>
+
+            <!-- Help Section -->
+            <div class="bg-gray-50 dark:bg-gray-900 px-8 py-4 border-t border-gray-200 dark:border-gray-700">
+                <div class="text-xs text-gray-600 dark:text-gray-400">
+                    <p class="mb-2">
+                        <i class="fas fa-question-circle mr-1"></i>
+                        <strong>Can't access your authenticator?</strong>
+                    </p>
+                    <p>
+                        If you've lost access to your authentication device, please contact your administrator for assistance.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 80c1f24c9..082fc5676 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,19 +1,19 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-file-download text-3xl text-white"></i>
                 </div>
             </a>
-            <h2 class="mt-4 text-4xl font-extrabold text-gray-900">
+            <h2 class="mt-4 text-4xl font-extrabold text-gray-900 dark:text-white">
                 {{ config('app.name') }}
             </h2>
-            <p class="mt-2 text-sm text-gray-600">
+            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                 Sign in to your account
             </p>
         </div>
@@ -23,10 +23,10 @@
             <div class="px-8 py-6">
                 <!-- Session Messages -->
                 @if(session('message'))
-                    <div class="mb-4 p-4 rounded-lg {{ session('message_type') == 'success' ? 'bg-green-50 border border-green-200' : (session('message_type') == 'danger' ? 'bg-red-50 border border-red-200' : 'bg-blue-50 border border-blue-200') }}">
+                    <div class="mb-4 p-4 rounded-lg {{ session('message_type') == 'success' ? 'bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700' : (session('message_type') == 'danger' ? 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700' : 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700') }}">
                         <div class="flex items-center">
-                            <i class="fas {{ session('message_type') == 'success' ? 'fa-check-circle text-green-600' : (session('message_type') == 'danger' ? 'fa-exclamation-circle text-red-600' : 'fa-info-circle text-blue-600') }} mr-3"></i>
-                            <span class="{{ session('message_type') == 'success' ? 'text-green-800' : (session('message_type') == 'danger' ? 'text-red-800' : 'text-blue-800') }}">
+                            <i class="fas {{ session('message_type') == 'success' ? 'fa-check-circle text-green-600 dark:text-green-400' : (session('message_type') == 'danger' ? 'fa-exclamation-circle text-red-600 dark:text-red-400' : 'fa-info-circle text-blue-600 dark:text-blue-400') }} mr-3"></i>
+                            <span class="{{ session('message_type') == 'success' ? 'text-green-800 dark:text-green-200' : (session('message_type') == 'danger' ? 'text-red-800 dark:text-red-200' : 'text-blue-800 dark:text-blue-200') }}">
                                 {{ session('message') }}
                             </span>
                         </div>
@@ -34,12 +34,12 @@
                 @endif
 
                 @if($errors->any())
-                    <div class="mb-4 p-4 rounded-lg bg-red-50 border border-red-200">
+                    <div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700">
                         <div class="flex items-start">
-                            <i class="fas fa-exclamation-circle text-red-600 mr-3 mt-0.5"></i>
+                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 mt-0.5"></i>
                             <div class="flex-1">
-                                <p class="text-sm font-medium text-red-800">There were some errors with your submission:</p>
-                                <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
+                                <p class="text-sm font-medium text-red-800 dark:text-red-200">There were some errors with your submission:</p>
+                                <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                                     @foreach($errors->all() as $error)
                                         <li>{{ $error }}</li>
                                     @endforeach
@@ -69,7 +69,7 @@
                                 value="{{ old('username') }}"
                                 required
                                 autofocus
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('username') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('username') border-red-500 @enderror"
                                 placeholder="Enter your username or email"
                             >
                         </div>
@@ -92,7 +92,7 @@
                                 type="password"
                                 name="password"
                                 required
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
                                 placeholder="Enter your password"
                             >
                         </div>
@@ -105,13 +105,13 @@
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
                             <input
-                                id="remember"
-                                name="remember"
+                                id="rememberme"
+                                name="rememberme"
                                 type="checkbox"
-                                {{ old('remember') ? 'checked' : '' }}
+                                {{ old('rememberme') ? 'checked' : '' }}
                                 class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
                             >
-                            <label for="remember" class="ml-2 block text-sm text-gray-700">
+                            <label for="rememberme" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                                 Remember me
                             </label>
                         </div>
@@ -123,12 +123,14 @@
                         @endif
                     </div>
 
-                    <!-- reCAPTCHA -->
-                    @if(config('captcha.enabled') == 1 && !empty(config('captcha.sitekey')) && !empty(config('captcha.secret')))
+                    <!-- CAPTCHA (reCAPTCHA or Turnstile) -->
+                    @if(\App\Support\CaptchaHelper::isEnabled())
                         <div>
-                            {!! NoCaptcha::display() !!}
-                            {!! NoCaptcha::renderJs() !!}
+                            {!! \App\Support\CaptchaHelper::display() !!}
                         </div>
+                        @error(\App\Support\CaptchaHelper::getResponseFieldName())
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
                     @endif
 
                     <!-- Submit Button -->
@@ -145,7 +147,7 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200">
+            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
                     <div class="flex flex-col sm:flex-row gap-3 items-center">
                         @if(Route::has('register'))
@@ -161,7 +163,7 @@
                         @endif
                     </div>
 
-                    <a href="{{ url('/') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:text-gray-100 transition">
+                    <a href="{{ url('/') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
                         <i class="fas fa-home mr-1"></i> Back to home
                     </a>
                 </div>
@@ -169,23 +171,10 @@
         </div>
 
         <!-- Additional Info -->
-        <p class="text-center text-sm text-gray-600">
+        <p class="text-center text-sm text-gray-600 dark:text-gray-400">
             &copy; {{ now()->year }} {{ config('app.name') }}. All rights reserved.
         </p>
     </div>
 </div>
 
-@push('scripts')
-<script>
-    // Auto-hide success messages after 5 seconds
-    setTimeout(function() {
-        const alerts = document.querySelectorAll('.bg-green-50, .bg-blue-50');
-        alerts.forEach(function(alert) {
-            alert.style.transition = 'opacity 0.5s ease-out';
-            alert.style.opacity = '0';
-            setTimeout(() => alert.remove(), 500);
-        });
-    }, 5000);
-</script>
-@endpush
 @endsection
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index bd67c67f2..a6cafb3e8 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -1,19 +1,19 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-file-download text-3xl text-white"></i>
                 </div>
             </a>
-            <h2 class="mt-4 text-4xl font-extrabold text-gray-900">
+            <h2 class="mt-4 text-4xl font-extrabold text-gray-900 dark:text-white">
                 Reset Password
             </h2>
-            <p class="mt-2 text-sm text-gray-600">
+            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                 Enter your email to receive a password reset link
             </p>
         </div>
@@ -23,21 +23,21 @@
             <div class="px-8 py-6">
                 <!-- Success Message -->
                 @if(session('status'))
-                    <div class="mb-4 p-4 rounded-lg bg-green-50 border border-green-200">
+                    <div class="mb-4 p-4 rounded-lg bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700">
                         <div class="flex items-center">
-                            <i class="fas fa-check-circle text-green-600 mr-3"></i>
-                            <span class="text-green-800">{{ session('status') }}</span>
+                            <i class="fas fa-check-circle text-green-600 dark:text-green-400 mr-3"></i>
+                            <span class="text-green-800 dark:text-green-200">{{ session('status') }}</span>
                         </div>
                     </div>
                 @endif
 
                 <!-- Error Messages -->
                 @if(isset($errors) && $errors->any())
-                    <div class="mb-4 p-4 rounded-lg bg-red-50 border border-red-200">
+                    <div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700">
                         <div class="flex items-start">
-                            <i class="fas fa-exclamation-circle text-red-600 mr-3 mt-0.5"></i>
+                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 mt-0.5"></i>
                             <div class="flex-1">
-                                <ul class="text-sm text-red-700 list-disc list-inside">
+                                <ul class="text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                                     @foreach($errors->all() as $error)
                                         <li>{{ $error }}</li>
                                     @endforeach
@@ -67,7 +67,7 @@
                                 value="{{ old('email') }}"
                                 required
                                 autofocus
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition {{ isset($errors) && $errors->has('email') ? 'border-red-500' : '' }}"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition {{ isset($errors) && $errors->has('email') ? 'border-red-500' : '' }}"
                                 placeholder="your@email.com"
                             >
                         </div>
@@ -76,6 +76,16 @@
                         @endif
                     </div>
 
+                    <!-- CAPTCHA (reCAPTCHA or Turnstile) -->
+                    @if(\App\Support\CaptchaHelper::isEnabled())
+                        <div class="flex justify-center">
+                            {!! \App\Support\CaptchaHelper::display() !!}
+                        </div>
+                        @error(\App\Support\CaptchaHelper::getResponseFieldName())
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400 text-center">{{ $message }}</p>
+                        @enderror
+                    @endif
+
                     <!-- Submit Button -->
                     <div>
                         <button
@@ -90,14 +100,14 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200">
+            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
                     <a href="{{ route('login') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
                         <i class="fas fa-arrow-left mr-1"></i> Back to login
                     </a>
 
                     @if(Route::has('register'))
-                        <a href="{{ route('register') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:text-gray-100 transition">
+                        <a href="{{ route('register') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
                             <i class="fas fa-user-plus mr-1"></i> Create an account
                         </a>
                     @endif
@@ -106,7 +116,7 @@
         </div>
 
         <!-- Additional Info -->
-        <p class="text-center text-sm text-gray-600">
+        <p class="text-center text-sm text-gray-600 dark:text-gray-400">
             &copy; {{ now()->year }} {{ config('app.name') }}. All rights reserved.
         </p>
     </div>
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index 107373a7d..058e83f28 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,19 +1,19 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
+<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
             <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg">
+                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                     <i class="fas fa-file-download text-3xl text-white"></i>
                 </div>
             </a>
-            <h2 class="mt-4 text-4xl font-extrabold text-gray-900">
+            <h2 class="mt-4 text-4xl font-extrabold text-gray-900 dark:text-white">
                 {{ config('app.name') }}
             </h2>
-            <p class="mt-2 text-sm text-gray-600">
+            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                 Create your account
             </p>
         </div>
@@ -21,14 +21,33 @@
         <!-- Register Card -->
         <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
             <div class="px-8 py-6">
-                <!-- Error Messages -->
-                @if($errors->any())
-                    <div class="mb-4 p-4 rounded-lg bg-red-50 border border-red-200">
+                <!-- Registration Status Error Message -->
+                @if(!empty($error) && $showregister == 0)
+                    <div class="p-6 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700">
                         <div class="flex items-start">
-                            <i class="fas fa-exclamation-circle text-red-600 mr-3 mt-0.5"></i>
+                            <i class="fas fa-info-circle text-yellow-600 dark:text-yellow-400 mr-3 mt-0.5 text-xl"></i>
                             <div class="flex-1">
-                                <p class="text-sm font-medium text-red-800">There were some errors with your submission:</p>
-                                <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
+                                <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-200 mb-2">Registration Not Available</h3>
+                                <p class="text-sm text-yellow-700 dark:text-yellow-300">{{ $error }}</p>
+                                @if(strpos($error, 'invite only') !== false)
+                                    <p class="mt-3 text-sm text-yellow-700 dark:text-yellow-300">
+                                        <i class="fas fa-envelope mr-1"></i>
+                                        You need a valid invitation link to register. Please check your email or contact an existing member.
+                                    </p>
+                                @endif
+                            </div>
+                        </div>
+                    </div>
+                @endif
+
+                <!-- Validation Error Messages -->
+                @if($errors->any())
+                    <div class="mb-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700">
+                        <div class="flex items-start">
+                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 mt-0.5"></i>
+                            <div class="flex-1">
+                                <p class="text-sm font-medium text-red-800 dark:text-red-200">There were some errors with your submission:</p>
+                                <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                                     @foreach($errors->all() as $error)
                                         <li>{{ $error }}</li>
                                     @endforeach
@@ -39,6 +58,7 @@
                 @endif
 
                 <!-- Register Form -->
+                @if($showregister == 1)
                 <form method="POST" action="{{ route('register') }}" class="space-y-5">
                     @csrf
                     <input type="hidden" name="action" value="submit">
@@ -59,7 +79,7 @@
                                 value="{{ old('username') }}"
                                 required
                                 autofocus
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('username') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('username') border-red-500 @enderror"
                                 placeholder="Choose a username"
                             >
                         </div>
@@ -83,7 +103,7 @@
                                 name="email"
                                 value="{{ old('email') }}"
                                 required
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('email') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('email') border-red-500 @enderror"
                                 placeholder="your@email.com"
                             >
                         </div>
@@ -106,14 +126,22 @@
                                 type="password"
                                 name="password"
                                 required
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
                                 placeholder="Create a strong password"
                             >
                         </div>
                         @error('password')
-                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                         @enderror
-                        <p class="mt-1 text-xs text-gray-500">Must be at least 8 characters</p>
+                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400 space-y-1">
+                            <p class="font-medium">Password requirements:</p>
+                            <ul class="list-disc list-inside pl-2 space-y-0.5">
+                                <li>At least 8 characters long</li>
+                                <li>Contains uppercase and lowercase letters</li>
+                                <li>Contains at least one number</li>
+                                <li>Contains at least one symbol</li>
+                            </ul>
+                        </div>
                     </div>
 
                     <!-- Confirm Password Field -->
@@ -130,18 +158,20 @@
                                 type="password"
                                 name="password_confirmation"
                                 required
-                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                 placeholder="Confirm your password"
                             >
                         </div>
                     </div>
 
-                    <!-- reCAPTCHA -->
-                    @if(config('captcha.enabled') == 1 && !empty(config('captcha.sitekey')) && !empty(config('captcha.secret')))
+                    <!-- CAPTCHA (reCAPTCHA or Turnstile) -->
+                    @if(\App\Support\CaptchaHelper::isEnabled())
                         <div>
-                            {!! NoCaptcha::display() !!}
-                            {!! NoCaptcha::renderJs() !!}
+                            {!! \App\Support\CaptchaHelper::display() !!}
                         </div>
+                        @error(\App\Support\CaptchaHelper::getResponseFieldName())
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
                     @endif
 
                     <!-- Terms and Conditions -->
@@ -153,7 +183,7 @@
                             required
                             class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded mt-1"
                         >
-                        <label for="terms" class="ml-2 block text-sm text-gray-700">
+                        <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                             I agree to the
                             <a href="{{ url('/terms-and-conditions') }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-500">Terms and Conditions</a>
                             and
@@ -172,16 +202,17 @@
                         </button>
                     </div>
                 </form>
+                @endif
             </div>
 
             <!-- Card Footer -->
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200">
+            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
                     <a href="{{ route('login') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
                         <i class="fas fa-sign-in-alt mr-1"></i> Already have an account? Sign in
                     </a>
 
-                    <a href="{{ url('/') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:text-gray-100 transition">
+                    <a href="{{ url('/') }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
                         <i class="fas fa-home mr-1"></i> Back to home
                     </a>
                 </div>
@@ -189,7 +220,7 @@
         </div>
 
         <!-- Additional Info -->
-        <p class="text-center text-sm text-gray-600">
+        <p class="text-center text-sm text-gray-600 dark:text-gray-400">
             &copy; {{ now()->year }} {{ config('app.name') }}. All rights reserved.
         </p>
     </div>
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index 8be1f3f6e..696a38068 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -6,7 +6,7 @@
     <div class="px-6 py-4 border-b border-gray-200">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                <li><a href="{{ url($site->home_link ?? '/') }}" class="hover:text-blue-600">Home</a></li>
+                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
                 <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
                 <li><a href="{{ url('/browse/Books') }}" class="hover:text-blue-600">Books</a></li>
                 @if(!empty($categorytitle) && $categorytitle !== 'All')
@@ -92,7 +92,7 @@
                                 <img src="{{ url('/covers/book/' . $result->cover) }}"
                                      alt="{{ $result->title ?? $result->searchname }}"
                                      class="w-full h-64 object-cover"
-                                     onerror="this.src='{{ url('/images/no-cover.png') }}'">
+                                     data-fallback-src="{{ url('/images/no-cover.png') }}">
                             @else
                                 <div class="w-full h-64 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                     <i class="fa fa-book text-4xl text-gray-400"></i>
@@ -106,7 +106,7 @@
                                 </div>
                             @endif
                             <div class="p-3">
-                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 line-clamp-2 mb-1" title="{{ $result->title ?? $result->searchname }}">
+                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 line-clamp-2 mb-1 break-words break-all" title="{{ $result->title ?? $result->searchname }}">
                                     {{ $result->title ?? $result->searchname }}
                                 </h3>
                                 @if(!empty($result->author))
diff --git a/resources/views/browse/index.blade.php b/resources/views/browse/index.blade.php
index 967409d3d..6b6b3f5db 100644
--- a/resources/views/browse/index.blade.php
+++ b/resources/views/browse/index.blade.php
@@ -7,7 +7,7 @@
         <nav class="flex" aria-label="Breadcrumb">
             <ol class="inline-flex items-center space-x-1 md:space-x-3">
                 <li class="inline-flex items-center">
-                    <a href="{{ url($site->home_link ?? '/') }}" class="text-gray-700 dark:text-gray-300 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-400 inline-flex items-center">
+                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-400 inline-flex items-center">
                         <i class="fas fa-home mr-2"></i> Home
                     </a>
                 </li>
@@ -92,7 +92,7 @@
                     <div class="flex items-center justify-end">
                         <div class="flex items-center gap-2">
                             <label class="text-sm text-gray-600 dark:text-gray-400 dark:text-gray-400">Sort by:</label>
-                            <select class="border border-gray-300 dark:border-gray-600 dark:border-gray-600 bg-white dark:bg-gray-800 dark:bg-gray-800 text-gray-900 dark:text-gray-100 dark:text-gray-100 rounded px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400" onchange="window.location.href=this.value">
+                            <select class="border border-gray-300 dark:border-gray-600 dark:border-gray-600 bg-white dark:bg-gray-800 dark:bg-gray-800 text-gray-900 dark:text-gray-100 dark:text-gray-100 rounded px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400" data-redirect-on-change>
                                 <option value="{{ $orderbyposted ?? '#' }}" {{ request('ob') == 'posted_desc' ? 'selected' : '' }}>Posted</option>
                                 <option value="{{ $orderbyname ?? '#' }}" {{ request('ob') == 'name_asc' ? 'selected' : '' }}>Name</option>
                                 <option value="{{ $orderbysize ?? '#' }}" {{ request('ob') == 'size_desc' ? 'selected' : '' }}>Size</option>
@@ -119,7 +119,7 @@
                             </th>
                             <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Name</th>
                             <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Category</th>
-                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Posted</th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Added</th>
                             <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Size</th>
                             <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Files</th>
                             <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Stats</th>
@@ -139,7 +139,7 @@
                                         @endif
                                         <div class="flex-1">
                                             <div class="flex items-center gap-2 flex-wrap">
-                                                <a href="{{ url('/details/' . $result->guid) }}" class="text-blue-600 dark:text-blue-400 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 dark:hover:text-blue-300 font-medium">{{ $result->searchname }}</a>
+                                                <a href="{{ url('/details/' . $result->guid) }}" class="text-blue-600 dark:text-blue-400 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 dark:hover:text-blue-300 font-medium break-words break-all">{{ $result->searchname }}</a>
                                                 @if(!empty($result->failed) && $result->failed > 0)
                                                     <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
                                                           title="{{ $result->failed }} user(s) reported download failure">
@@ -186,12 +186,22 @@
                                                     </button>
                                                 @endif
                                             </div>
-                                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex flex-wrap gap-2">
                                                 @if($result->group_name)
                                                     <span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 dark:bg-gray-700 text-gray-700 dark:text-gray-300 dark:text-gray-300">
                                                         <i class="fas fa-users mr-1"></i> {{ $result->group_name }}
                                                     </span>
                                                 @endif
+                                                @if(!empty($result->postdate))
+                                                    <span class="inline-flex items-center px-2 py-0.5 rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                                        <i class="fas fa-calendar mr-1"></i> Posted: {{ \Carbon\Carbon::parse($result->postdate)->format('M d, Y H:i') }}
+                                                    </span>
+                                                @endif
+                                                @if(!empty($result->fromname))
+                                                    <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono">
+                                                        <i class="fas fa-user mr-1"></i> {{ $result->fromname }}
+                                                    </span>
+                                                @endif
                                             </div>
                                         </div>
                                     </div>
@@ -202,7 +212,7 @@
                                     </span>
                                 </td>
                                 <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400 dark:text-gray-400">
-                                    {{ \Carbon\Carbon::parse($result->postdate)->diffForHumans() }}
+                                    {{ \Carbon\Carbon::parse($result->adddate)->diffForHumans() }}
                                 </td>
                                 <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400 dark:text-gray-400">
                                     {{ $result->size_formatted ?? number_format($result->size / 1073741824, 2) . ' GB' }}
@@ -227,7 +237,7 @@
                                 </td>
                                 <td class="px-3 py-4 whitespace-nowrap">
                                     <div class="flex items-center gap-1 flex-wrap">
-                                        <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb px-2 py-1 bg-green-600 dark:bg-green-700 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 dark:hover:bg-green-800 transition text-sm" title="Download NZB" onclick="showToast('Downloading NZB...', 'success')">
+                                        <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb px-2 py-1 bg-green-600 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 transition text-sm" title="Download NZB">
                                             <i class="fa fa-download"></i>
                                         </a>
                                         <a href="{{ url('/details/' . $result->guid) }}" class="px-2 py-1 bg-blue-600 dark:bg-blue-700 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800 dark:hover:bg-blue-800 transition text-sm" title="View Details">
@@ -325,518 +335,3 @@
 </div>
 @endsection
 
-@push('scripts')
-<script>
-function closePreviewModal() {
-    const modal = document.getElementById('previewModal');
-    modal.style.display = 'none';
-    modal.classList.add('hidden');
-}
-
-function showPreviewImage(guid, type = 'preview') {
-    const modal = document.getElementById('previewModal');
-    const img = document.getElementById('previewImage');
-    const error = document.getElementById('previewError');
-    const title = document.getElementById('previewTitle');
-
-    modal.style.display = 'flex';
-    modal.classList.remove('hidden');
-    title.textContent = type === 'sample' ? 'Sample Image' : 'Preview Image';
-
-    const imageUrl = '/covers/' + type + '/' + guid + '.jpg';
-    img.src = imageUrl;
-    error.classList.add('hidden');
-    img.style.display = 'block';
-
-    img.onerror = function() {
-        error.textContent = (type === 'sample' ? 'Sample' : 'Preview') + ' image not available';
-        error.classList.remove('hidden');
-        img.style.display = 'none';
-    };
-
-    img.onload = function() {
-        img.style.display = 'block';
-    };
-}
-
-function closeMediainfoModal() {
-    const modal = document.getElementById('mediainfoModal');
-    modal.style.display = 'none';
-}
-
-function closeFilelistModal() {
-    const modal = document.getElementById('filelistModal');
-    modal.style.display = 'none';
-}
-
-function formatFileSize(bytes) {
-    if (bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-}
-
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-function showFilelist(guid) {
-    let modal = document.getElementById('filelistModal');
-    if (modal && modal.parentElement !== document.body) {
-        document.body.appendChild(modal);
-    }
-
-    const content = document.getElementById('filelistContent');
-    modal.style.display = 'flex';
-    modal.style.position = 'fixed';
-    modal.style.top = '0';
-    modal.style.left = '0';
-    modal.style.right = '0';
-    modal.style.bottom = '0';
-    modal.style.zIndex = '99999';
-    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
-
-    content.innerHTML = `
-        <div class="text-center py-8">
-            <i class="fas fa-spinner fa-spin text-3xl text-green-600"></i>
-            <p class="text-gray-600 dark:text-gray-400 mt-2">Loading file list...</p>
-        </div>
-    `;
-
-    const apiUrl = '/api/release/' + guid + '/filelist';
-
-    fetch(apiUrl)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Failed to load file list');
-            }
-            return response.json();
-        })
-        .then(data => {
-            if (!data.files || data.files.length === 0) {
-                content.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-8">No files available</p>';
-                return;
-            }
-
-            let html = '<div class="space-y-4">';
-            html += `
-                <div class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-lg p-4 mb-4">
-                    <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 dark:text-gray-200 mb-2">${escapeHtml(data.release.searchname)}</h4>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 dark:text-gray-400">Total Files: ${data.total}</p>
-                </div>
-            `;
-
-            html += `
-                <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 dark:border-gray-700">
-                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                        <thead class="bg-gray-100 dark:bg-gray-800 dark:bg-gray-900">
-                            <tr>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">File Name</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 uppercase tracking-wider">Size</th>
-                            </tr>
-                        </thead>
-                        <tbody class="bg-white dark:bg-gray-800 dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-            `;
-
-            data.files.forEach((file, index) => {
-                const rowClass = index % 2 === 0 ? 'bg-white dark:bg-gray-800 dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900 dark:bg-gray-750';
-                const fileName = file.title || file.name || 'Unknown';
-                const fileSize = file.size ? formatFileSize(file.size) : 'N/A';
-
-                html += `
-                    <tr class="${rowClass} hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700">
-                        <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100 break-all">${escapeHtml(fileName)}</td>
-                        <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-400 whitespace-nowrap">${fileSize}</td>
-                    </tr>
-                `;
-            });
-
-            html += `
-                        </tbody>
-                    </table>
-                </div>
-            `;
-
-            html += '</div>';
-            content.innerHTML = html;
-        })
-        .catch(error => {
-            content.innerHTML = `
-                <div class="text-center py-8">
-                    <i class="fas fa-exclamation-circle text-3xl text-red-600"></i>
-                    <p class="text-red-600 mt-2">${error.message}</p>
-                </div>
-            `;
-        });
-}
-
-
-function showMediainfo(releaseId) {
-    let modal = document.getElementById('mediainfoModal');
-
-    // If modal doesn't have body as parent, move it there
-    if (modal && modal.parentElement !== document.body) {
-        document.body.appendChild(modal);
-    }
-
-    const content = document.getElementById('mediainfoContent');
-
-    // Show modal with loading state
-    modal.style.display = 'flex';
-    modal.style.position = 'fixed';
-    modal.style.top = '0';
-    modal.style.left = '0';
-    modal.style.right = '0';
-    modal.style.bottom = '0';
-    modal.style.zIndex = '99999';
-    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
-
-    content.innerHTML = `
-        <div class="text-center py-8">
-            <i class="fas fa-spinner fa-spin text-3xl text-blue-600"></i>
-            <p class="text-gray-600 dark:text-gray-400 mt-2">Loading media information...</p>
-        </div>
-    `;
-
-    // Fetch mediainfo data
-    const apiUrl = '/api/release/' + releaseId + '/mediainfo';
-
-    fetch(apiUrl)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Failed to load media information');
-            }
-            return response.json();
-        })
-        .then(data => {
-            if (!data.video && !data.audio && !data.subs) {
-                content.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-8">No media information available</p>';
-                return;
-            }
-
-            let html = '<div class="space-y-6">';
-
-            // Video information
-            if (data.video) {
-                html += `
-                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900 dark:to-indigo-900 rounded-lg p-4">
-                        <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 dark:text-gray-200 mb-3 flex items-center">
-                            <i class="fas fa-video mr-2 text-blue-600 dark:text-blue-400 dark:text-blue-400"></i> Video Information
-                        </h4>
-                        <dl class="grid grid-cols-2 gap-3">
-                `;
-
-                if (data.video.containerformat) {
-                    html += `
-                        <div>
-                            <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Container</dt>
-                            <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${data.video.containerformat}</dd>
-                        </div>
-                    `;
-                }
-                if (data.video.videocodec) {
-                    html += `
-                        <div>
-                            <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Codec</dt>
-                            <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${data.video.videocodec}</dd>
-                        </div>
-                    `;
-                }
-                if (data.video.videowidth && data.video.videoheight) {
-                    html += `
-                        <div>
-                            <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Resolution</dt>
-                            <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${data.video.videowidth}x${data.video.videoheight}</dd>
-                        </div>
-                    `;
-                }
-                if (data.video.videoaspect) {
-                    html += `
-                        <div>
-                            <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Aspect Ratio</dt>
-                            <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${data.video.videoaspect}</dd>
-                        </div>
-                    `;
-                }
-                if (data.video.videoframerate) {
-                    html += `
-                        <div>
-                            <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Frame Rate</dt>
-                            <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${data.video.videoframerate} fps</dd>
-                        </div>
-                    `;
-                }
-                if (data.video.videoduration) {
-                    // videoduration is in milliseconds, convert to minutes
-                    const durationMs = parseInt(data.video.videoduration);
-                    if (!isNaN(durationMs) && durationMs > 0) {
-                        const minutes = Math.round(durationMs / 1000 / 60);
-                        html += `
-                            <div>
-                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Duration</dt>
-                                <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${minutes} minutes</dd>
-                            </div>
-                        `;
-                    }
-                }
-
-                html += '</dl></div>';
-            }
-
-            // Audio information
-            if (data.audio && data.audio.length > 0) {
-                html += `
-                    <div class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-lg p-4">
-                        <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 dark:text-gray-200 mb-3 flex items-center">
-                            <i class="fas fa-volume-up mr-2 text-green-600 dark:text-green-400"></i> Audio Information
-                        </h4>
-                `;
-
-                data.audio.forEach((audio, index) => {
-                    if (index > 0) html += '<hr class="my-3 border-gray-200 dark:border-gray-700 dark:border-gray-700">';
-                    html += '<dl class="grid grid-cols-2 gap-3">';
-
-                    if (audio.audioformat) {
-                        html += `
-                            <div>
-                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Format</dt>
-                                <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${audio.audioformat}</dd>
-                            </div>
-                        `;
-                    }
-                    if (audio.audiochannels) {
-                        html += `
-                            <div>
-                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Channels</dt>
-                                <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${audio.audiochannels}</dd>
-                            </div>
-                        `;
-                    }
-                    if (audio.audiobitrate) {
-                        html += `
-                            <div>
-                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Bit Rate</dt>
-                                <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${audio.audiobitrate}</dd>
-                            </div>
-                        `;
-                    }
-                    if (audio.audiolanguage) {
-                        html += `
-                            <div>
-                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Language</dt>
-                                <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${audio.audiolanguage}</dd>
-                            </div>
-                        `;
-                    }
-                    if (audio.audiosamplerate) {
-                        html += `
-                            <div>
-                                <dt class="text-xs font-medium text-gray-600 dark:text-gray-400 dark:text-gray-400">Sample Rate</dt>
-                                <dd class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${audio.audiosamplerate}</dd>
-                            </div>
-                        `;
-                    }
-
-                    html += '</dl>';
-                });
-
-                html += '</div>';
-            }
-
-            // Subtitle information
-            if (data.subs) {
-                html += `
-                    <div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900 dark:to-pink-900 rounded-lg p-4">
-                        <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 dark:text-gray-200 mb-3 flex items-center">
-                            <i class="fas fa-closed-captioning mr-2 text-purple-600 dark:text-purple-400"></i> Subtitles
-                        </h4>
-                        <p class="text-sm text-gray-900 dark:text-gray-100 dark:text-gray-100">${data.subs}</p>
-                    </div>
-                `;
-            }
-
-            html += '</div>';
-            content.innerHTML = html;
-        })
-        .catch(error => {
-            content.innerHTML = `
-                <div class="text-center py-8">
-                    <i class="fas fa-exclamation-circle text-3xl text-red-600"></i>
-                    <p class="text-red-600 mt-2">${error.message}</p>
-                </div>
-            `;
-        });
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    // Preview and Sample badge click handlers
-    document.addEventListener('click', function(e) {
-        const previewBadge = e.target.closest('.preview-badge');
-        if (previewBadge) {
-            e.preventDefault();
-            const guid = previewBadge.dataset.guid;
-            showPreviewImage(guid, 'preview');
-        }
-
-        const sampleBadge = e.target.closest('.sample-badge');
-        if (sampleBadge) {
-            e.preventDefault();
-            const guid = sampleBadge.dataset.guid;
-            showPreviewImage(guid, 'sample');
-        }
-
-        // Mediainfo badge click handlers
-        const mediainfoBadge = e.target.closest('.mediainfo-badge');
-        if (mediainfoBadge) {
-            e.preventDefault();
-            const releaseId = mediainfoBadge.dataset.releaseId;
-            showMediainfo(releaseId);
-        }
-
-        // File list badge click handlers
-        const filelistBadge = e.target.closest('.filelist-badge');
-        if (filelistBadge) {
-            e.preventDefault();
-            const guid = filelistBadge.dataset.guid;
-            showFilelist(guid);
-        }
-    });
-
-    // Close modal on background click
-    document.getElementById('previewModal')?.addEventListener('click', function(e) {
-        if (e.target === this) {
-            closePreviewModal();
-        }
-    });
-
-    document.getElementById('mediainfoModal')?.addEventListener('click', function(e) {
-        if (e.target === this) {
-            closeMediainfoModal();
-        }
-    });
-
-    document.getElementById('filelistModal')?.addEventListener('click', function(e) {
-        if (e.target === this) {
-            closeFilelistModal();
-        }
-    });
-
-    // Close modal on ESC key
-    document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape') {
-            closePreviewModal();
-            closeMediainfoModal();
-            closeFilelistModal();
-        }
-    });
-
-    // Select all checkbox functionality
-    document.getElementById('chkSelectAll')?.addEventListener('change', function() {
-        const checkboxes = document.querySelectorAll('.chkRelease');
-        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
-    });
-    // Multi-operations download
-    document.querySelector('.nzb_multi_operations_download')?.addEventListener('click', function() {
-        const selected = Array.from(document.querySelectorAll('.chkRelease:checked')).map(cb => cb.value);
-        if (selected.length === 0) {
-            return;
-        }
-        selected.forEach(guid => {
-            window.open('/getnzb/' + guid, '_blank');
-        });
-        showToast(`Downloading ${selected.length} NZB${selected.length > 1 ? 's' : ''}...`, 'success');
-    });
-
-    // Multi-operations cart
-    document.querySelector('.nzb_multi_operations_cart')?.addEventListener('click', function() {
-        const selected = Array.from(document.querySelectorAll('.chkRelease:checked')).map(cb => cb.value);
-        if (selected.length === 0) {
-            showToast('Please select at least one release', 'error');
-            return;
-        }
-        // Add to cart via AJAX
-        fetch('/cart/add', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                'X-Requested-With': 'XMLHttpRequest'
-            },
-            body: JSON.stringify({ id: selected.join(',') })
-        }).then(response => response.json())
-          .then(data => {
-              if (data.success) {
-                  showToast(data.message || `Added ${selected.length} item${selected.length > 1 ? 's' : ''} to cart`, 'success');
-              } else {
-                  showToast('Failed to add items to cart', 'error');
-              }
-          })
-          .catch(error => {
-              showToast('An error occurred', 'error');
-          });
-    });
-
-    // Individual add to cart buttons
-    document.addEventListener('click', function(e) {
-        const cartBtn = e.target.closest('.add-to-cart');
-
-        if (cartBtn) {
-            e.preventDefault();
-
-            const guid = cartBtn.dataset.guid;
-            const iconElement = cartBtn.querySelector('.icon_cart');
-
-            if (!guid) {
-                console.error('No GUID found for cart item');
-                return;
-            }
-
-            // Prevent double-clicking
-            if (iconElement && iconElement.classList.contains('icon_cart_clicked')) {
-                return;
-            }
-
-            // Send AJAX request to add item to cart
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                    'X-Requested-With': 'XMLHttpRequest'
-                },
-                body: JSON.stringify({ id: guid })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    // Visual feedback
-                    if (iconElement) {
-                        iconElement.classList.remove('fa-shopping-basket');
-                        iconElement.classList.add('fa-check', 'icon_cart_clicked');
-
-                        // Reset icon after 2 seconds
-                        setTimeout(() => {
-                            iconElement.classList.remove('fa-check', 'icon_cart_clicked');
-                            iconElement.classList.add('fa-shopping-basket');
-                        }, 2000);
-                    }
-
-                    // Show success notification
-                    showToast('Added to cart successfully!', 'success');
-                } else {
-                    showToast('Failed to add item to cart', 'error');
-                }
-            })
-            .catch(error => {
-                console.error('Error adding to cart:', error);
-                showToast('An error occurred', 'error');
-            });
-        }
-    });
-});
-</script>
-@endpush
-
diff --git a/resources/views/browsegroup/index.blade.php b/resources/views/browsegroup/index.blade.php
index f782b348a..ed49d2dcd 100644
--- a/resources/views/browsegroup/index.blade.php
+++ b/resources/views/browsegroup/index.blade.php
@@ -3,7 +3,7 @@
     <nav aria-label="breadcrumb">
         <ol class="flex items-center space-x-2 text-sm">
             <li>
-                <a href="{{ url($site->home_link) }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:text-blue-400 transition-colors">
+                <a href="{{ url($site['home_link']) }}" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:text-blue-400 transition-colors">
                     Home
                 </a>
             </li>
@@ -19,7 +19,7 @@
     </nav>
 </div>
 
-{!! $site->adbrowse ?? '' !!}
+{!! $site['adbrowse'] ?? '' !!}
 
 <!-- Search Filter -->
 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
diff --git a/resources/views/cart/index.blade.php b/resources/views/cart/index.blade.php
index 5b5b23748..1580ec20e 100644
--- a/resources/views/cart/index.blade.php
+++ b/resources/views/cart/index.blade.php
@@ -6,7 +6,7 @@
     <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
-                <li><a href="{{ url($site->home_link ?? '/') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Home</a></li>
+                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Home</a></li>
                 <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
                 <li class="text-gray-500 dark:text-gray-400">Download Basket</li>
             </ol>
@@ -73,7 +73,7 @@
                                     </td>
                                     <td class="px-4 py-3">
                                         <a href="{{ url('/details/' . $result->release->guid) }}"
-                                           class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-semibold">
+                                           class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-semibold break-words break-all">
                                             {{ $result->release->searchname }}
                                         </a>
                                     </td>
diff --git a/resources/views/console/index.blade.php b/resources/views/console/index.blade.php
index 6d09b22ff..6295a83ef 100644
--- a/resources/views/console/index.blade.php
+++ b/resources/views/console/index.blade.php
@@ -7,7 +7,7 @@
         <nav class="flex" aria-label="Breadcrumb">
             <ol class="inline-flex items-center space-x-1 md:space-x-3">
                 <li class="inline-flex items-center">
-                    <a href="{{ url($site->home_link ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
+                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
                         <i class="fas fa-home mr-2"></i> Home
                     </a>
                 </li>
@@ -98,7 +98,7 @@
                                         <!-- External Links -->
                                         <div class="flex flex-wrap gap-1 mb-2">
                                             @if(!empty($result->url))
-                                                <a target="_blank" href="{{ $site->dereferrer_link }}{{ $result->url }}"
+                                                <a target="_blank" href="{{ $site['dereferrer_link'] }}{{ $result->url }}"
                                                    title="View Game page" class="px-2 py-1 bg-gray-600 text-white text-xs rounded hover:bg-gray-700">
                                                    <i class="fa fa-shopping-cart mr-1"></i>Amazon
                                                 </a>
@@ -184,15 +184,32 @@
 
                                             <div class="flex items-center text-gray-500 text-sm mb-3">
                                                 <i class="fa fa-clock-o mr-2"></i>
-                                                <span>Posted {{ \Carbon\Carbon::parse($result->postdate)->diffForHumans() }}</span>
+                                                <span>Added {{ \Carbon\Carbon::parse($result->adddate)->diffForHumans() }}</span>
+                                            </div>
+
+                                            <div class="flex flex-wrap gap-2 text-xs mb-3">
+                                                @if(!empty($result->group_name))
+                                                    <span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                                                        <i class="fas fa-users mr-1"></i> {{ $result->group_name }}
+                                                    </span>
+                                                @endif
+                                                @if(!empty($result->postdate))
+                                                    <span class="inline-flex items-center px-2 py-0.5 rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                                        <i class="fas fa-calendar mr-1"></i> Posted: {{ \Carbon\Carbon::parse($result->postdate)->format('M d, Y H:i') }}
+                                                    </span>
+                                                @endif
+                                                @if(!empty($result->fromname))
+                                                    <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono">
+                                                        <i class="fas fa-user mr-1"></i> {{ $result->fromname }}
+                                                    </span>
+                                                @endif
                                             </div>
 
                                             <!-- Action Buttons -->
                                             <div class="flex flex-wrap gap-2" id="guid{{ $result->guid }}">
                                                 <a class="px-3 py-1.5 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800 text-sm inline-flex items-center"
                                                    title="Download NZB"
-                                                   href="{{ url('/getnzb?id=' . $result->guid) }}"
-                                                   onclick="showToast('Downloading NZB...', 'success')">
+                                                   href="{{ url('/getnzb?id=' . $result->guid) }}">
                                                     <i class="fa fa-cloud-download mr-1"></i>
                                                     <span class="px-1.5 py-0.5 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs rounded ml-1">{{ $result->grabs }}</span>
                                                 </a>
diff --git a/resources/views/contact/index.blade.php b/resources/views/contact/index.blade.php
index 6c456e61c..f89e099d3 100644
--- a/resources/views/contact/index.blade.php
+++ b/resources/views/contact/index.blade.php
@@ -1,19 +1,5 @@
 @extends('layouts.main')
 
-@push('styles')
-<style>
-    /* Override the container constraint for contact page */
-    .contact-page-container {
-        max-width: 75% !important;
-        width: 75% !important;
-    }
-    @media (min-width: 1536px) {
-        .contact-page-container {
-            max-width: 1200px !important;
-        }
-    }
-</style>
-@endpush
 
 @section('content')
 <div class="w-full contact-page-container mx-auto">
@@ -22,7 +8,7 @@
             <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-0">Contact Us</h4>
             <nav class="mt-2" aria-label="breadcrumb">
                 <ol class="flex space-x-2 text-sm">
-                    <li><a href="{{ url($site->home_link ?? '/') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800">Home</a></li>
+                    <li><a href="{{ url($site['home_link'] ?? '/') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800">Home</a></li>
                     <li class="text-gray-500">/</li>
                     <li class="text-gray-600">Contact</li>
                 </ol>
@@ -113,11 +99,11 @@
                     @enderror
                 </div>
 
-                @if(config('captcha.enabled') == true && !empty(config('captcha.sitekey')) && !empty(config('captcha.secret')))
+                @if(\App\Support\CaptchaHelper::isEnabled())
                     <div class="mb-6 flex justify-center">
-                        {!! NoCaptcha::display() !!}
+                        {!! \App\Support\CaptchaHelper::display() !!}
                     </div>
-                    @error('g-recaptcha-response')
+                    @error(\App\Support\CaptchaHelper::getResponseFieldName())
                         <div class="text-red-500 text-center text-sm mb-6">{{ $message }}</div>
                     @enderror
                 @endif
@@ -138,9 +124,5 @@
         </div>
     </div>
 </div>
-
-@if(config('captcha.enabled') == true && !empty(config('captcha.sitekey')) && !empty(config('captcha.secret')))
-    {!! NoCaptcha::renderJs() !!}
-@endif
 @endsection
 
diff --git a/resources/views/details/index.blade.php b/resources/views/details/index.blade.php
index dc1a1dbb5..9f7ab89dc 100644
--- a/resources/views/details/index.blade.php
+++ b/resources/views/details/index.blade.php
@@ -7,7 +7,7 @@
         <nav class="text-sm text-gray-600">
             <a href="{{ url('/') }}" class="hover:text-blue-600">Home</a>
             <i class="fas fa-chevron-right mx-2 text-xs"></i>
-            <span>{{ $release->searchname }}</span>
+            <span class="break-words break-all">{{ $release->searchname }}</span>
         </nav>
     </div>
 
@@ -22,14 +22,14 @@
                         <img src="{{ getReleaseCover($release) }}"
                              alt="{{ $release->searchname }}"
                              class="w-48 h-72 object-cover rounded-lg shadow-md max-w-[192px] max-h-[288px]"
-                             style="width: 192px; height: 288px;"
-                             onerror="this.src='{{ asset('assets/images/no-cover.png') }}'">
+                             class="rounded-lg shadow-lg object-cover w-192 h-288"
+                             data-fallback-src="{{ asset('assets/images/no-cover.png') }}">
                     </div>
 
                     <!-- Title and Actions -->
                     <div class="flex-1">
                         <div class="mb-3">
-                            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">{{ $release->searchname }}</h2>
+                            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2 break-words break-all">{{ $release->searchname }}</h2>
                             @if(!empty($failed) && $failed > 0)
                                 <div class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-red-100 text-red-800 border border-red-200">
                                     <i class="fas fa-exclamation-triangle mr-2"></i>
@@ -83,8 +83,8 @@
                         @if($hasPreviewImage)
                             <!-- Preview image -->
                             <div>
-                                <div class="block cursor-pointer" onclick="openImageModal('{{ url('/covers/preview/' . $release->guid . '.jpg') }}', 'Preview Image')">
-                                    <img src="{{ url('/covers/preview/' . $release->guid . '.jpg') }}"
+                                <div class="block cursor-pointer" onclick="openImageModal('{{ url('/covers/preview/' . $release->guid . '_thumb.jpg') }}', 'Preview Image')">
+                                    <img src="{{ url('/covers/preview/' . $release->guid . '_thumb.jpg') }}"
                                          alt="Preview"
                                          class="w-full h-auto rounded-lg shadow-md hover:shadow-lg transition"
                                          loading="lazy">
@@ -96,8 +96,8 @@
                         @if($hasSampleImage)
                             <!-- Sample image -->
                             <div>
-                                <div class="block cursor-pointer" onclick="openImageModal('{{ url('/covers/sample/' . $release->guid . '.jpg') }}', 'Sample Image')">
-                                    <img src="{{ url('/covers/sample/' . $release->guid . '.jpg') }}"
+                                <div class="block cursor-pointer" onclick="openImageModal('{{ url('/covers/sample/' . $release->guid . '_thumb.jpg') }}', 'Sample Image')">
+                                    <img src="{{ url('/covers/sample/' . $release->guid . '_thumb.jpg') }}"
                                          alt="Sample"
                                          class="w-full h-auto rounded-lg shadow-md hover:shadow-lg transition"
                                          loading="lazy">
@@ -503,6 +503,53 @@
                 </div>
             @endif
 
+            <!-- Password Information -->
+            @if(isset($release->passwordstatus) && $release->passwordstatus > 0)
+                <div class="bg-gradient-to-r from-red-50 to-orange-50 dark:from-red-900 dark:to-orange-900 rounded-lg p-6 border border-red-100 dark:border-red-800">
+                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+                        <i class="fas fa-lock mr-2 text-red-600 dark:text-red-400"></i> Password Protected Release
+                    </h3>
+                    <div class="space-y-3">
+                        <div>
+                            <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Password Status</dt>
+                            <dd class="mt-1">
+                                @if($release->passwordstatus == 1)
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
+                                        <i class="fas fa-question-circle mr-1"></i> Password Unknown
+                                    </span>
+                                @elseif($release->passwordstatus == 2)
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                        <i class="fas fa-check-circle mr-1"></i> Password Available
+                                    </span>
+                                @endif
+                            </dd>
+                        </div>
+                        <div>
+                            <dt class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Password</dt>
+                            <dd class="mt-1">
+                                @if(!empty($release->password))
+                                    <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-300 dark:border-gray-700">
+                                        <code class="text-sm text-gray-900 dark:text-gray-100 font-mono break-all">{{ $release->password }}</code>
+                                    </div>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                                        <i class="fas fa-info-circle mr-1"></i>
+                                        This password is embedded in the NZB file and will be automatically recognized by NZBGet or SABnzbd.
+                                    </p>
+                                @else
+                                    <div class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-300 dark:border-gray-700">
+                                        <code class="text-sm text-gray-500 dark:text-gray-400 font-mono">None</code>
+                                    </div>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                                        <i class="fas fa-exclamation-triangle mr-1"></i>
+                                        No password information available in the database.
+                                    </p>
+                                @endif
+                            </dd>
+                        </div>
+                    </div>
+                </div>
+            @endif
+
             <!-- Video/Audio Metadata -->
             @if(!empty($reVideo) || !empty($reAudio) || !empty($reSubs))
                 <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900 dark:to-indigo-900 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
@@ -832,13 +879,27 @@
                         <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $release->totalpart ?? 0 }}</dd>
                     </div>
                     <div>
-                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Posted</dt>
-                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ \Carbon\Carbon::parse($release->postdate)->format('M d, Y H:i') }}</dd>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Added</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ \Carbon\Carbon::parse($release->adddate)->format('M d, Y H:i') }}</dd>
                     </div>
                     <div>
                         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Group</dt>
                         <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $release->group_name ?? 'Unknown' }}</dd>
                     </div>
+                    <div>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Posted</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ \Carbon\Carbon::parse($release->postdate)->format('M d, Y H:i') }}</dd>
+                    </div>
+                    @if(!empty($release->fromname))
+                        <div>
+                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Posted By</dt>
+                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 break-all">
+                                <span class="inline-flex items-center px-2 py-1 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-xs font-mono">
+                                    <i class="fas fa-user mr-1"></i>{{ $release->fromname }}
+                                </span>
+                            </dd>
+                        </div>
+                    @endif
                     <div>
                         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Grabs</dt>
                         <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $release->grabs ?? 0 }}</dd>
@@ -861,7 +922,7 @@
 @endsection
 
 <!-- Image Modal -->
-<div id="imageModal" class="fixed inset-0 bg-transparent hidden items-center justify-center p-4" style="z-index: 9999; backdrop-filter: blur(10px);">
+<div id="imageModal" class="fixed inset-0 bg-transparent hidden items-center justify-center p-4">
     <div class="relative max-w-7xl w-full h-full flex items-center justify-center">
         <button type="button" onclick="closeImageModal()" class="absolute top-4 right-4 text-white hover:text-gray-300 text-4xl font-bold z-10 bg-black bg-opacity-70 rounded-full w-12 h-12 flex items-center justify-center shadow-lg">
             <i class="fas fa-times"></i>
@@ -878,44 +939,5 @@
 
 @push('scripts')
 @include('partials.cart-script')
-
-<script>
-function openImageModal(imageUrl, title) {
-    const modal = document.getElementById('imageModal');
-    const modalImage = document.getElementById('imageModalImage');
-    const modalTitle = document.getElementById('imageModalTitle');
-
-    modalImage.src = imageUrl;
-    modalTitle.textContent = title;
-    modal.classList.remove('hidden');
-    modal.classList.add('flex');
-
-    // Prevent body scroll when modal is open
-    document.body.style.overflow = 'hidden';
-}
-
-function closeImageModal() {
-    const modal = document.getElementById('imageModal');
-    modal.classList.add('hidden');
-    modal.classList.remove('flex');
-
-    // Restore body scroll
-    document.body.style.overflow = '';
-}
-
-// Close modal when clicking outside the image
-document.getElementById('imageModal')?.addEventListener('click', function(e) {
-    if (e.target === this) {
-        closeImageModal();
-    }
-});
-
-// Close modal with Escape key
-document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape') {
-        closeImageModal();
-    }
-});
-</script>
 @endpush
 
diff --git a/resources/views/forum/master.blade.php b/resources/views/forum/master.blade.php
index 39a562447..6de05662f 100644
--- a/resources/views/forum/master.blade.php
+++ b/resources/views/forum/master.blade.php
@@ -81,10 +81,10 @@
                                 </svg>
                             </a>
                             <div class="border absolute left-0 bg-white dark:bg-gray-800 rounded-md w-44 divide-y" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="navbarDropdownMenuLink">
-                                <a class="block px-4 py-2" href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                                <a class="block px-4 py-2" href="{{ url('/logout') }}" data-logout>
                                     Log out
                                 </a>
-                                <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
+                                <form id="logout-form" action="{{ url('/logout') }}" method="POST" class="hidden">
                                     @csrf
                                 </form>
                             </div>
diff --git a/resources/views/forum/post/partials/quote.blade.php b/resources/views/forum/post/partials/quote.blade.php
index a43651123..1b63c5654 100644
--- a/resources/views/forum/post/partials/quote.blade.php
+++ b/resources/views/forum/post/partials/quote.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-white dark:bg-gray-800 rounded-md border mb-2" style="border-color: #eee;">
+<div class="bg-white dark:bg-gray-800 rounded-md border mb-2 forum-quote">
     <div class="px-4">
         <div class="flex justify-between flex-row-reverse mb-2">
             <span>
diff --git a/resources/views/games/index.blade.php b/resources/views/games/index.blade.php
index 41ba3ac9d..4560a36ae 100644
--- a/resources/views/games/index.blade.php
+++ b/resources/views/games/index.blade.php
@@ -6,7 +6,7 @@
     <div class="px-6 py-4 border-b border-gray-200">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                <li><a href="{{ url($site->home_link ?? '/') }}" class="hover:text-blue-600">Home</a></li>
+                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
                 <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
                 <li><a href="{{ url('/browse/PC') }}" class="hover:text-blue-600">PC</a></li>
                 @if(!empty($catname) && $catname !== 'All')
@@ -111,7 +111,7 @@
                                 <img src="{{ url('/covers/games/' . $result->cover) }}"
                                      alt="{{ $result->title ?? $result->searchname }}"
                                      class="w-full h-48 object-cover"
-                                     onerror="this.src='{{ url('/images/no-cover.png') }}'">
+                                     data-fallback-src="{{ url('/images/no-cover.png') }}">
                             @else
                                 <div class="w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                     <i class="fa fa-gamepad text-4xl text-gray-400"></i>
@@ -125,7 +125,7 @@
                                 </div>
                             @endif
                             <div class="p-3">
-                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 truncate" title="{{ $result->title ?? $result->searchname }}">
+                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 break-words break-all" title="{{ $result->title ?? $result->searchname }}">
                                     {{ $result->title ?? $result->searchname }}
                                 </h3>
                                 @if(!empty($result->publisher))
diff --git a/resources/views/invitations/create.blade.php b/resources/views/invitations/create.blade.php
index 57c9ede76..549439de9 100644
--- a/resources/views/invitations/create.blade.php
+++ b/resources/views/invitations/create.blade.php
@@ -6,7 +6,7 @@
     <nav class="flex" aria-label="breadcrumb">
         <ol class="inline-flex items-center space-x-1 md:space-x-3">
             <li class="inline-flex items-center">
-                <a href="{{ $site->home_link }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
+                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
             </li>
             <li>
                 <div class="flex items-center">
@@ -45,7 +45,7 @@
     <nav class="flex" aria-label="breadcrumb">
         <ol class="inline-flex items-center space-x-1 md:space-x-3">
             <li class="inline-flex items-center">
-                <a href="{{ $site->home_link }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
+                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
             </li>
             <li>
                 <div class="flex items-center">
diff --git a/resources/views/invitations/index.blade.php b/resources/views/invitations/index.blade.php
index 1f42a4e66..d030a5735 100644
--- a/resources/views/invitations/index.blade.php
+++ b/resources/views/invitations/index.blade.php
@@ -15,7 +15,7 @@
     <nav class="flex" aria-label="breadcrumb">
         <ol class="inline-flex items-center space-x-1 md:space-x-3">
             <li class="inline-flex items-center">
-                <a href="{{ $site->home_link }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
+                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
             </li>
             <li>
                 <div class="flex items-center">
@@ -208,7 +208,7 @@
                                                 @csrf
                                                 @method('DELETE')
                                                 <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-red-300 rounded text-xs font-medium text-red-700 bg-white dark:bg-gray-800 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:bg-gray-700 dark:text-red-400 dark:border-red-600 dark:hover:bg-gray-600" title="Cancel Invitation"
-                                                        onclick="return confirm('Are you sure you want to cancel this invitation?')">
+                                                        data-confirm="Are you sure you want to cancel this invitation?">
                                                     <i class="fas fa-times"></i>
                                                 </button>
                                             </form>
diff --git a/resources/views/invitations/show.blade.php b/resources/views/invitations/show.blade.php
index 50645de50..1d2ed6617 100644
--- a/resources/views/invitations/show.blade.php
+++ b/resources/views/invitations/show.blade.php
@@ -5,7 +5,7 @@
     <nav class="flex mb-6" aria-label="breadcrumb">
         <ol class="inline-flex items-center space-x-1 md:space-x-3">
             <li class="inline-flex items-center">
-                <a href="{{ $site->home_link }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
+                <a href="{{ $site['home_link'] }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 dark:text-gray-400 dark:hover:text-white">Home</a>
             </li>
             <li aria-current="page">
                 <div class="flex items-center">
@@ -19,7 +19,7 @@
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:bg-gray-800">
         <div class="bg-gray-50 dark:bg-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700 rounded-t-lg dark:bg-gray-700 dark:border-gray-600">
             <h5 class="text-lg font-semibold text-gray-900 dark:text-gray-100 dark:text-white flex items-center">
-                <i class="fa fa-envelope-open mr-2"></i>Invitation to Join {{ $site->title }}
+                <i class="fa fa-envelope-open mr-2"></i>Invitation to Join {{ $site['title'] }}
             </h5>
         </div>
         <div class="p-6">
@@ -30,7 +30,7 @@
                         <div>
                             <h6 class="font-semibold mb-2">You've been invited!</h6>
                             <p class="mb-0">
-                                <strong>{{ $preview['inviter_name'] ?? 'Someone' }}</strong> has invited you to join <strong>{{ $site->title }}</strong>.
+                                <strong>{{ $preview['inviter_name'] ?? 'Someone' }}</strong> has invited you to join <strong>{{ $site['title'] }}</strong>.
                             </p>
                         </div>
                     </div>
@@ -111,7 +111,7 @@
                                 <li>Click the "Accept Invitation" button below</li>
                                 <li>Fill out the registration form with your details</li>
                                 <li>Verify your email address when prompted</li>
-                                <li>Start exploring {{ $site->title }}!</li>
+                                <li>Start exploring {{ $site['title'] }}!</li>
                             </ol>
                         </div>
                     </div>
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 8baea800e..33334813c 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -13,35 +13,8 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('styles')
 
-    <!-- Dark Mode Script (must be inline to prevent flash) -->
-    <script>
-        // Initialize theme before page renders to prevent flash
-        (function() {
-            @auth
-                // Use user's database preference when authenticated
-                const userThemePreference = '{{ auth()->user()->theme_preference ?? 'light' }}';
-
-                if (userThemePreference === 'system') {
-                    // Use OS preference
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                        document.documentElement.classList.add('dark');
-                    }
-                } else if (userThemePreference === 'dark') {
-                    document.documentElement.classList.add('dark');
-                }
-            @else
-                // Fallback to localStorage for non-authenticated users
-                const theme = localStorage.getItem('theme') || 'light';
-                if (theme === 'system') {
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                        document.documentElement.classList.add('dark');
-                    }
-                } else if (theme === 'dark') {
-                    document.documentElement.classList.add('dark');
-                }
-            @endauth
-        })();
-    </script>
+    <!-- Dark Mode - Set via meta tag for CSP compliance -->
+    <meta name="theme-preference" content="{{ auth()->check() ? (auth()->user()->theme_preference ?? 'light') : 'light' }}">
 </head>
 <body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
     <div class="min-h-screen flex">
@@ -70,7 +43,7 @@
                             <i class="fas fa-home mr-1"></i> Back to Site
                         </a>
                         <a href="{{ route('logout') }}"
-                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
+                           data-logout
                            class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">
                             <i class="fas fa-sign-out-alt mr-1"></i> Logout
                         </a>
@@ -109,94 +82,11 @@
     <!-- Scripts -->
     @stack('scripts')
 
-    <script>
-        // Theme management with system preference support
-        (function() {
-            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-            function applyTheme(themePreference) {
-                const html = document.documentElement;
-
-                if (themePreference === 'system') {
-                    if (mediaQuery.matches) {
-                        html.classList.add('dark');
-                    } else {
-                        html.classList.remove('dark');
-                    }
-                } else if (themePreference === 'dark') {
-                    html.classList.add('dark');
-                } else {
-                    html.classList.remove('dark');
-                }
-            }
-
-            // Listen for OS theme changes
-            mediaQuery.addEventListener('change', () => {
-                @auth
-                    const userThemePreference = '{{ auth()->user()->theme_preference ?? 'light' }}';
-                    if (userThemePreference === 'system') {
-                        applyTheme('system');
-                    }
-                @else
-                    const theme = localStorage.getItem('theme') || 'light';
-                    if (theme === 'system') {
-                        applyTheme('system');
-                    }
-                @endauth
-            });
-
-            // Dark mode toggle - cycles through light -> dark -> system
-            const themeToggle = document.getElementById('theme-toggle');
-            @auth
-                let currentTheme = '{{ auth()->user()->theme_preference ?? 'light' }}';
-            @else
-                let currentTheme = localStorage.getItem('theme') || 'light';
-            @endauth
-
-            themeToggle?.addEventListener('click', function() {
-                let nextTheme;
-
-                // Cycle through: light -> dark -> system -> light
-                if (currentTheme === 'light') {
-                    nextTheme = 'dark';
-                } else if (currentTheme === 'dark') {
-                    nextTheme = 'system';
-                } else {
-                    nextTheme = 'light';
-                }
-
-                applyTheme(nextTheme);
-
-                // Update button title
-                const titles = {
-                    'light': 'Theme: Light',
-                    'dark': 'Theme: Dark',
-                    'system': 'Theme: System (Auto)'
-                };
-                this.setAttribute('title', titles[nextTheme]);
-
-                @auth
-                    // Save to backend for authenticated users
-                    fetch('{{ route('profile.update-theme') }}', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                        },
-                        body: JSON.stringify({ theme_preference: nextTheme })
-                    }).then(response => response.json())
-                      .then(data => {
-                          if (data.success) {
-                              currentTheme = nextTheme;
-                          }
-                      });
-                @else
-                    localStorage.setItem('theme', nextTheme);
-                    currentTheme = nextTheme;
-                @endauth
-            });
-        })();
-    </script>
+    <!-- Meta tags for theme management (CSP-safe) -->
+    @auth
+        <meta name="user-authenticated" content="true">
+        <meta name="update-theme-url" content="{{ route('profile.update-theme') }}">
+    @endauth
 </body>
 </html>
 
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index f4eb1bec2..61dbba1cf 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -56,8 +56,7 @@
 
                             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                 <a class="dropdown-item" href="{{ route('logout') }}"
-                                   onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
+                                   data-logout>
                                     {{ __('Logout') }}
                                 </a>
 
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 29530c4db..dc6e0aa0a 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -4,12 +4,30 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="theme-preference" content="system">
 
     <title>{{ config('app.name') }}</title>
 
     <!-- Styles -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('styles')
+
+    <!-- Captcha Scripts -->
+    @if(\App\Support\CaptchaHelper::isEnabled())
+        @if(\App\Support\CaptchaHelper::getProvider() === 'turnstile')
+            @if(function_exists('csp_nonce'))
+                <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" nonce="{{ csp_nonce() }}" async defer></script>
+            @else
+                <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+            @endif
+        @else
+            @if(function_exists('csp_nonce'))
+                <script src="https://www.google.com/recaptcha/api.js" nonce="{{ csp_nonce() }}" async defer></script>
+            @else
+                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+            @endif
+        @endif
+    @endif
 </head>
 <body class="font-sans antialiased">
     @yield('content')
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index cc13d1010..9eeffe156 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -2,10 +2,13 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ $meta_title ?? config('app.name') }}@if(isset($meta_title) && $meta_title != '' && $site->metatitle != '') - @endif{{ $site->metatitle ?? '' }}</title>
+    <title>{{ $meta_title ?? config('app.name') }}@if(isset($meta_title) && $meta_title != '' && $site['metatitle'] != '') - @endif{{ $site['metatitle'] ?? '' }}</title>
 
     <meta name="keywords" content="{{ $meta_keywords ?? '' }}">
     <meta name="description" content="{{ $meta_description ?? '' }}">
@@ -50,8 +53,8 @@
         @auth
             <aside id="sidebar" class="hidden md:flex md:flex-col w-64 bg-gray-900 dark:bg-gray-950 text-white transition-all duration-300">
                 <div class="flex items-center justify-between p-4 border-b border-gray-800 dark:border-gray-700">
-                    <a href="{{ $site->home_link ?? url('/') }}" class="flex items-center space-x-2">
-                        <i class="fas fa-file-download text-2xl text-blue-500 dark:text-blue-400" aria-hidden="true"></i>
+                    <a href="{{ $site['home_link'] ?? url('/') }}" class="flex items-center space-x-3">
+                        <img src="{{ asset('assets/images/newznab-logo.svg') }}" alt="Newznab Logo" class="w-12 h-12" aria-hidden="true">
                         <span class="text-xl font-semibold">{{ config('app.name') }}</span>
                     </a>
                 </div>
@@ -107,12 +110,12 @@
     </div>
 
     <!-- Mobile Sidebar Toggle -->
-    <button id="mobile-sidebar-toggle" class="md:hidden fixed bottom-4 right-4 z-50 bg-blue-600 dark:bg-blue-700 dark:bg-blue-700 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 dark:hover:bg-blue-800 dark:hover:bg-blue-800">
-        <i class="fas fa-bars"></i>
+    <button id="mobile-sidebar-toggle" class="md:hidden fixed bottom-20 right-4 z-50 bg-blue-600 dark:bg-blue-700 text-white p-4 rounded-full shadow-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-all touch-target" aria-label="Toggle Sidebar">
+        <i class="fas fa-bars text-lg"></i>
     </button>
 
     <!-- Theme Toggle -->
-    <button id="theme-toggle" class="fixed bottom-4 left-4 z-50 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-3 rounded-full shadow-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 flex items-center gap-2"
+    <button id="theme-toggle" class="fixed bottom-4 left-4 z-50 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-3 rounded-full shadow-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 flex items-center gap-2 touch-target"
             title="{{ ucfirst(auth()->check() ? (auth()->user()->theme_preference ?? 'light') : 'light') }} Mode">
         <i id="theme-icon" class="fas
             @if(auth()->check())
diff --git a/resources/views/movies/index.blade.php b/resources/views/movies/index.blade.php
index f571feadd..97a9a4b40 100644
--- a/resources/views/movies/index.blade.php
+++ b/resources/views/movies/index.blade.php
@@ -7,7 +7,7 @@
         <nav class="flex" aria-label="Breadcrumb">
             <ol class="inline-flex items-center space-x-1 md:space-x-3">
                 <li class="inline-flex items-center">
-                    <a href="{{ url($site->home_link ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
+                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
                         <i class="fas fa-home mr-2"></i> Home
                     </a>
                 </li>
@@ -97,18 +97,18 @@
                                 @if($guid)
                                     <a href="{{ url('/details/' . $guid) }}" class="block">
                                         @if(isset($result->cover) && $result->cover)
-                                            <img src="{{ $result->cover }}" alt="{{ $result->title }}" class="w-48 h-72 object-cover rounded" style="width: 192px; height: 288px;">
+                                            <img src="{{ $result->cover }}" alt="{{ $result->title }}" class="w-48 h-72 object-cover rounded w-192 h-288">
                                         @else
-                                            <div class="w-48 h-72 bg-gray-200 dark:bg-gray-700 flex items-center justify-center rounded" style="width: 192px; height: 288px;">
+                                            <div class="w-48 h-72 bg-gray-200 dark:bg-gray-700 flex items-center justify-center rounded w-192 h-288">
                                                 <i class="fas fa-film text-gray-400 text-3xl"></i>
                                             </div>
                                         @endif
                                     </a>
                                 @else
                                     @if(isset($result->cover) && $result->cover)
-                                        <img src="{{ $result->cover }}" alt="{{ $result->title }}" class="w-48 h-72 object-cover rounded" style="width: 192px; height: 288px;">
+                                        <img src="{{ $result->cover }}" alt="{{ $result->title }}" class="w-48 h-72 object-cover rounded w-192 h-288">
                                     @else
-                                        <div class="w-48 h-72 bg-gray-200 dark:bg-gray-700 flex items-center justify-center rounded" style="width: 192px; height: 288px;">
+                                        <div class="w-48 h-72 bg-gray-200 dark:bg-gray-700 flex items-center justify-center rounded w-192 h-288">
                                             <i class="fas fa-film text-gray-400 text-3xl"></i>
                                         </div>
                                     @endif
@@ -208,6 +208,10 @@
                                         $releaseGuids = isset($result->grp_release_guid) ? explode(',', $result->grp_release_guid) : [];
                                         $releasePostDates = isset($result->grp_release_postdate) ? explode(',', $result->grp_release_postdate) : [];
                                         $releaseAddDates = isset($result->grp_release_adddate) ? explode(',', $result->grp_release_adddate) : [];
+                                        $releaseHasPreview = isset($result->grp_haspreview) ? explode(',', $result->grp_haspreview) : [];
+                                        $releaseJpgStatus = isset($result->grp_jpgstatus) ? explode(',', $result->grp_jpgstatus) : [];
+                                        $releaseNfoStatus = isset($result->grp_nfostatus) ? explode(',', $result->grp_nfostatus) : [];
+                                        $releaseFromNames = isset($result->grp_release_fromname) ? explode(',', $result->grp_release_fromname) : [];
 
                                         // Limit to maximum 2 releases
                                         $maxReleases = 2;
@@ -217,6 +221,10 @@
                                         $releaseGuids = array_slice($releaseGuids, 0, $maxReleases);
                                         $releasePostDates = array_slice($releasePostDates, 0, $maxReleases);
                                         $releaseAddDates = array_slice($releaseAddDates, 0, $maxReleases);
+                                        $releaseHasPreview = array_slice($releaseHasPreview, 0, $maxReleases);
+                                        $releaseJpgStatus = array_slice($releaseJpgStatus, 0, $maxReleases);
+                                        $releaseNfoStatus = array_slice($releaseNfoStatus, 0, $maxReleases);
+                                        $releaseFromNames = array_slice($releaseFromNames, 0, $maxReleases);
                                     @endphp
 
                                     @if(!empty($releaseNames[0]))
@@ -236,6 +244,37 @@
                                                                     <a href="{{ url('/details/' . $releaseGuids[$index]) }}" class="text-sm text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:text-blue-400 font-medium block truncate" title="{{ $releaseName }}">
                                                                         {{ $releaseName }}
                                                                     </a>
+                                                                    <div class="flex flex-wrap items-center gap-2 mt-1">
+                                                                        @if(isset($releaseHasPreview[$index]) && $releaseHasPreview[$index] == 1)
+                                                                            <button type="button"
+                                                                                    class="preview-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800 transition cursor-pointer"
+                                                                                    data-guid="{{ $releaseGuids[$index] }}"
+                                                                                    title="View preview image">
+                                                                                <i class="fas fa-image mr-1"></i> Preview
+                                                                            </button>
+                                                                        @endif
+                                                                        @if(isset($releaseJpgStatus[$index]) && $releaseJpgStatus[$index] == 1)
+                                                                            <button type="button"
+                                                                                    class="sample-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800 transition cursor-pointer"
+                                                                                    data-guid="{{ $releaseGuids[$index] }}"
+                                                                                    title="View sample image">
+                                                                                <i class="fas fa-images mr-1"></i> Sample
+                                                                            </button>
+                                                                        @endif
+                                                                        @if(isset($releaseNfoStatus[$index]) && $releaseNfoStatus[$index] == 1)
+                                                                            <button type="button"
+                                                                                    class="nfo-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800 transition cursor-pointer"
+                                                                                    data-guid="{{ $releaseGuids[$index] }}"
+                                                                                    title="View NFO file">
+                                                                                <i class="fas fa-file-alt mr-1"></i> NFO
+                                                                            </button>
+                                                                        @endif
+                                                                        @if(isset($releaseFromNames[$index]) && !empty($releaseFromNames[$index]))
+                                                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200" title="Poster/Uploader">
+                                                                                <i class="fas fa-user mr-1"></i> {{ $releaseFromNames[$index] }}
+                                                                            </span>
+                                                                        @endif
+                                                                    </div>
                                                                     <div class="flex flex-wrap items-center gap-3 mt-1 text-xs text-gray-500">
                                                                         @if(isset($releaseSizes[$index]))
                                                                             <span>
@@ -258,7 +297,7 @@
                                                                     <a href="{{ url('/getnzb/' . $releaseGuids[$index]) }}" class="inline-flex items-center px-3 py-1 bg-green-600 dark:bg-green-700 text-white text-xs font-medium rounded hover:bg-green-700 dark:hover:bg-green-800 transition">
                                                                         <i class="fas fa-download mr-1"></i> Download
                                                                     </a>
-                                                                    <button onclick="addToCart('{{ $releaseGuids[$index] }}')" class="inline-flex items-center px-3 py-1 bg-blue-600 dark:bg-blue-700 text-white text-xs font-medium rounded hover:bg-blue-700 dark:hover:bg-blue-800 transition">
+                                                                    <button class="add-to-cart inline-flex items-center px-3 py-1 bg-blue-600 dark:bg-blue-700 text-white text-xs font-medium rounded hover:bg-blue-700 dark:hover:bg-blue-800 transition" data-guid="{{ $releaseGuids[$index] }}">
                                                                         <i class="fas fa-shopping-cart mr-1"></i> Cart
                                                                     </button>
                                                                     <a href="{{ url('/details/' . $releaseGuids[$index]) }}" class="inline-flex items-center px-3 py-1 bg-gray-600 text-white text-xs font-medium rounded hover:bg-gray-700 transition">
@@ -290,34 +329,25 @@
             <p class="text-gray-600 dark:text-gray-400 text-lg">No movies found.</p>
         </div>
     @endif
-</div>
 
-@push('scripts')
-<script>
-function addToCart(guid) {
-    fetch('{{ url("/cart/add") }}', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}',
-            'X-Requested-With': 'XMLHttpRequest'
-        },
-        body: JSON.stringify({ id: guid })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            window.showToast('Added to cart successfully!', 'success');
-        } else {
-            window.showToast('Failed to add to cart', 'error');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        window.showToast('An error occurred', 'error');
-    });
-}
-</script>
-@endpush
+    <!-- Preview/Sample Image Modal -->
+    <div id="previewModal" class="hidden fixed inset-0 bg-black bg-opacity-75 items-center justify-center p-4" style="display: none; z-index: 9999 !important;">
+        <div class="relative max-w-4xl w-full">
+            <button type="button" onclick="closePreviewModal()" class="absolute top-4 right-4 text-white hover:text-gray-300 text-3xl font-bold z-10">
+                <i class="fas fa-times"></i>
+            </button>
+            <div class="text-center mb-2">
+                <h3 id="previewTitle" class="text-white text-lg font-semibold"></h3>
+            </div>
+            <img id="previewImage" src="" alt="Preview" class="max-w-full max-h-[90vh] mx-auto rounded-lg shadow-2xl">
+            <div class="text-center mt-4">
+                <p id="previewError" class="text-red-400 hidden"></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- NFO Modal -->
+    @include('partials.nfo-modal')
+</div>
 @endsection
 
diff --git a/resources/views/movies/viewmoviefull.blade.php b/resources/views/movies/viewmoviefull.blade.php
index 7aa6f6f4e..99fc539b1 100644
--- a/resources/views/movies/viewmoviefull.blade.php
+++ b/resources/views/movies/viewmoviefull.blade.php
@@ -7,7 +7,7 @@
         <nav class="flex" aria-label="Breadcrumb">
             <ol class="inline-flex items-center space-x-1 md:space-x-3">
                 <li class="inline-flex items-center">
-                    <a href="{{ url($site->home_link ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
+                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
                         <i class="fas fa-home mr-2"></i> Home
                     </a>
                 </li>
@@ -162,23 +162,35 @@
                                             <span>
                                                 <i class="fas fa-hdd mr-1"></i>{{ number_format($release['size'] / 1073741824, 2) }} GB
                                             </span>
-                                            @if($release['postdate'])
-                                                <span>
-                                                    <i class="fas fa-calendar-alt mr-1"></i>Posted: {{ \Carbon\Carbon::parse($release['postdate'])->format('M d, Y') }}
-                                                </span>
-                                            @endif
                                             @if($release['adddate'])
                                                 <span>
                                                     <i class="fas fa-plus-circle mr-1"></i>Added: {{ \Carbon\Carbon::parse($release['adddate'])->diffForHumans() }}
                                                 </span>
                                             @endif
                                         </div>
+                                        <div class="flex flex-wrap gap-2 mt-2 text-xs">
+                                            @if(!empty($release['group_name']))
+                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                                                    <i class="fas fa-users mr-1"></i> {{ $release['group_name'] }}
+                                                </span>
+                                            @endif
+                                            @if($release['postdate'])
+                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                                    <i class="fas fa-calendar-alt mr-1"></i>Posted: {{ \Carbon\Carbon::parse($release['postdate'])->format('M d, Y H:i') }}
+                                                </span>
+                                            @endif
+                                            @if(!empty($release['fromname']))
+                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono">
+                                                    <i class="fas fa-user mr-1"></i>{{ $release['fromname'] }}
+                                                </span>
+                                            @endif
+                                        </div>
                                     </div>
                                     <div class="flex gap-2 flex-shrink-0">
                                         <a href="{{ url('/getnzb/' . $release['guid']) }}" class="inline-flex items-center px-4 py-2 bg-green-600 dark:bg-green-700 text-white text-sm font-medium rounded-lg hover:bg-green-700 dark:hover:bg-green-800 transition">
                                             <i class="fas fa-download mr-2"></i> Download
                                         </a>
-                                        <button onclick="addToCart('{{ $release['guid'] }}')" class="inline-flex items-center px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white text-sm font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition">
+                                        <button class="add-to-cart inline-flex items-center px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white text-sm font-medium rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition" data-guid="{{ $release['guid'] }}">
                                             <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
                                         </button>
                                         <a href="{{ url('/details/' . $release['guid']) }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition">
@@ -206,33 +218,5 @@
         </div>
     @endif
 </div>
-
-@push('scripts')
-<script>
-function addToCart(guid) {
-    fetch('{{ url("/cart/add") }}', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': '{{ csrf_token() }}',
-            'X-Requested-With': 'XMLHttpRequest'
-        },
-        body: JSON.stringify({ id: guid })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            window.showToast('Added to cart successfully!', 'success');
-        } else {
-            window.showToast('Failed to add to cart', 'error');
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        window.showToast('An error occurred', 'error');
-    });
-}
-</script>
-@endpush
 @endsection
 
diff --git a/resources/views/movies/viewmovietrailer.blade.php b/resources/views/movies/viewmovietrailer.blade.php
index bc84465d1..8983b544f 100644
--- a/resources/views/movies/viewmovietrailer.blade.php
+++ b/resources/views/movies/viewmovietrailer.blade.php
@@ -7,7 +7,7 @@
         <nav class="flex" aria-label="Breadcrumb">
             <ol class="inline-flex items-center space-x-1 md:space-x-3">
                 <li class="inline-flex items-center">
-                    <a href="{{ url($site->home_link ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
+                    <a href="{{ url($site['home_link'] ?? '/') }}" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:text-blue-400 inline-flex items-center">
                         <i class="fas fa-home mr-2"></i> Home
                     </a>
                 </li>
diff --git a/resources/views/music/index.blade.php b/resources/views/music/index.blade.php
index 3fa5d43b2..71dbfca9b 100644
--- a/resources/views/music/index.blade.php
+++ b/resources/views/music/index.blade.php
@@ -6,7 +6,7 @@
     <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
-                <li><a href="{{ url($site->home_link ?? '/') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Home</a></li>
+                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Home</a></li>
                 <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
                 <li><a href="{{ url('/browse/Audio') }}" class="hover:text-blue-600 dark:hover:text-blue-400">Audio</a></li>
                 @if(!empty($categorytitle) && $categorytitle !== 'All')
@@ -108,7 +108,7 @@
                                 <img src="{{ url('/covers/music/' . $result->cover) }}"
                                      alt="{{ $result->artist ?? '' }} - {{ $result->title ?? '' }}"
                                      class="w-full h-48 object-cover"
-                                     onerror="this.src='{{ url('/images/no-cover.png') }}'">
+                                     data-fallback-src="{{ url('/images/no-cover.png') }}">
                             @else
                                 <div class="w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                     <i class="fa fa-music text-4xl text-gray-400"></i>
@@ -122,7 +122,7 @@
                                 </div>
                             @endif
                             <div class="p-3">
-                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 truncate" title="{{ $result->title ?? $result->searchname }}">
+                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 break-words break-all" title="{{ $result->title ?? $result->searchname }}">
                                     {{ $result->title ?? $result->searchname }}
                                 </h3>
                                 <p class="text-xs text-gray-600 dark:text-gray-400 truncate" title="{{ $result->artist ?? '' }}">
diff --git a/resources/views/mymovies/add.blade.php b/resources/views/mymovies/add.blade.php
index a89a31073..81d7fe430 100644
--- a/resources/views/mymovies/add.blade.php
+++ b/resources/views/mymovies/add.blade.php
@@ -8,7 +8,7 @@
                 </h3>
                 <nav aria-label="breadcrumb">
                     <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site->home_link) }}" class="hover:text-white transition">Home</a></li>
+                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
                         <li><i class="fas fa-chevron-right text-xs"></i></li>
                         <li><a href="{{ url('/mymovies') }}" class="hover:text-white transition">My Movies</a></li>
                         <li><i class="fas fa-chevron-right text-xs"></i></li>
@@ -23,7 +23,7 @@
                 <div class="flex items-center gap-4 mb-4">
                     <img class="rounded-lg shadow-md w-24 h-auto"
                          src="{{ url("/covers/movies/{$imdbid}-cover.jpg") }}"
-                         onerror="this.src='{{ url('/covers/movies/no-cover.jpg') }}'"
+                         data-fallback-src="{{ url('/covers/movies/no-cover.jpg') }}"
                          alt="{{ e($movie['title'] ?? '') }}" />
 
                     <div>
@@ -86,19 +86,6 @@
         </div>
     </div>
 </div>
-
-<style>
-/* Fallback for browsers that don't support :has() pseudo-class */
-@supports not selector(:has(*)) {
-    label:has(input[type="checkbox"]:checked) {
-        background-color: #eff6ff !important;
-        border-color: #3b82f6 !important;
-        color: #1e40af !important;
-    }
-}
-</style>
-
-</style>
 <div class="card card-default shadow-sm mb-4">
     <div class="card-header bg-light">
         <div class="d-flex justify-content-between align-items-center">
@@ -106,7 +93,7 @@
             <div class="breadcrumb-wrapper">
                 <nav aria-label="breadcrumb">
                     <ol class="breadcrumb mb-0 py-0">
-                        <li class="breadcrumb-item"><a href="{{ url($site->home_link) }}">Home</a></li>
+                        <li class="breadcrumb-item"><a href="{{ url($site['home_link']) }}">Home</a></li>
                         <li class="breadcrumb-item active">My Movies</li>
                     </ol>
                 </nav>
@@ -195,7 +182,7 @@
 
                                     <div class="mt-2">
                                         <a class="badge bg-warning text-dark" target="_blank"
-                                           href="{{ $site->dereferrer_link }}http://www.imdb.com/title/tt{{ $movie['imdbid'] }}"
+                                           href="{{ $site['dereferrer_link'] }}http://www.imdb.com/title/tt{{ $movie['imdbid'] }}"
                                            data-bs-toggle="tooltip" data-bs-placement="top" title="View on IMDB">
                                             <i class="fa fa-external-link me-1"></i>IMDB
                                         </a>
diff --git a/resources/views/mymovies/index.blade.php b/resources/views/mymovies/index.blade.php
index f4028469c..856ca0f5c 100644
--- a/resources/views/mymovies/index.blade.php
+++ b/resources/views/mymovies/index.blade.php
@@ -1,37 +1,3 @@
-<style>
-    .header-gradient {
-        background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
-    }
-    .info-card-gradient {
-        background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
-    }
-    .dark .info-card-gradient {
-        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
-    }
-    .table-header-gradient {
-        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
-    }
-    .dark .table-header-gradient {
-        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
-    }
-    .movie-poster-shadow {
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    }
-    .category-badge {
-        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
-    }
-    .dark .category-badge {
-        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
-        color: #93c5fd !important;
-        border-color: #2563eb !important;
-    }
-    .empty-state-bg {
-        background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
-    }
-    .dark .empty-state-bg {
-        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
-    }
-</style>
 
 <div class="max-w-7xl mx-auto">
     <!-- Header Section -->
@@ -46,7 +12,7 @@
                 </div>
                 <nav aria-label="breadcrumb">
                     <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site->home_link) }}" class="hover:text-white transition">Home</a></li>
+                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
                         <li><i class="fas fa-chevron-right text-xs"></i></li>
                         <li class="text-white font-medium">My Movies</li>
                     </ol>
@@ -184,7 +150,7 @@
                                         </span>
                                         <a class="inline-flex items-center px-3 py-1.5 bg-yellow-400 hover:bg-yellow-500 text-gray-900 dark:text-gray-100 text-xs font-semibold rounded-full transition-colors"
                                            target="_blank"
-                                           href="{{ $site->dereferrer_link }}http://www.imdb.com/title/tt{{ $movie['imdbid'] }}"
+                                           href="{{ $site['dereferrer_link'] }}http://www.imdb.com/title/tt{{ $movie['imdbid'] }}"
                                            title="View on IMDB">
                                             <i class="fa fa-external-link mr-1"></i>IMDB
                                         </a>
@@ -233,7 +199,7 @@
                             <div class="flex gap-2">
                                 <a class="inline-flex items-center px-3 py-1.5 bg-yellow-400 hover:bg-yellow-500 text-gray-900 text-xs font-semibold rounded-full transition-colors"
                                    target="_blank"
-                                   href="{{ $site->dereferrer_link }}http://www.imdb.com/title/tt{{ $movie['imdbid'] }}">
+                                   href="{{ $site['dereferrer_link'] }}http://www.imdb.com/title/tt{{ $movie['imdbid'] }}">
                                     <i class="fa fa-external-link mr-1"></i>IMDB
                                 </a>
                                 <span class="text-xs text-gray-500 dark:text-gray-400 flex items-center">
diff --git a/resources/views/myshows/add.blade.php b/resources/views/myshows/add.blade.php
index 907087c9a..5d5f7a6e6 100644
--- a/resources/views/myshows/add.blade.php
+++ b/resources/views/myshows/add.blade.php
@@ -8,7 +8,7 @@
                 </h3>
                 <nav aria-label="breadcrumb">
                     <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site->home_link) }}" class="hover:text-white transition">Home</a></li>
+                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
                         <li><i class="fas fa-chevron-right text-xs"></i></li>
                         <li><a href="{{ url('/myshows') }}" class="hover:text-white transition">My Shows</a></li>
                         <li><i class="fas fa-chevron-right text-xs"></i></li>
@@ -23,7 +23,7 @@
                 <div class="flex items-center gap-4 mb-4">
                     <img class="rounded-lg shadow-md w-24 h-auto"
                          src="{{ url("/covers/tvshows/{$video}_thumb.jpg") }}"
-                         onerror="this.src='{{ url('/covers/tvshows/no-cover.jpg') }}'"
+                         data-fallback-src="{{ url('/covers/tvshows/no-cover.jpg') }}"
                          alt="{{ e($show['title'] ?? '') }}" />
 
                     <div>
@@ -87,14 +87,4 @@
     </div>
 </div>
 
-<style>
-/* Fallback for browsers that don't support :has() pseudo-class */
-@supports not selector(:has(*)) {
-    label:has(input[type="checkbox"]:checked) {
-        background-color: #eff6ff !important;
-        border-color: #3b82f6 !important;
-        color: #1e40af !important;
-    }
-}
-</style>
 
diff --git a/resources/views/myshows/index.blade.php b/resources/views/myshows/index.blade.php
index 6679ec487..75f980fe0 100644
--- a/resources/views/myshows/index.blade.php
+++ b/resources/views/myshows/index.blade.php
@@ -1,55 +1,3 @@
-<style>
-    .header-gradient {
-        background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
-    }
-    .info-card-gradient {
-        background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
-    }
-    .dark .info-card-gradient {
-        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
-    }
-    .table-header-gradient {
-        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
-    }
-    .dark .table-header-gradient {
-        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
-    }
-    .show-avatar {
-        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
-    }
-    .category-badge {
-        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
-    }
-    .dark .category-badge {
-        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
-        color: #93c5fd !important;
-        border-color: #2563eb !important;
-    }
-    .empty-state-bg {
-        background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
-    }
-    .dark .empty-state-bg {
-        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
-    }
-    table {
-        border-collapse: collapse;
-    }
-    table thead tr {
-        border-bottom: 2px solid #e5e7eb;
-    }
-    .dark table thead tr {
-        border-bottom-color: #4b5563;
-    }
-    table tbody tr {
-        border-bottom: 1px solid #e5e7eb;
-    }
-    .dark table tbody tr {
-        border-bottom-color: #374151;
-    }
-    table tbody tr:last-child {
-        border-bottom: none;
-    }
-</style>
 
 <div class="max-w-7xl mx-auto">
     <!-- Header Section -->
@@ -64,7 +12,7 @@
                 </div>
                 <nav aria-label="breadcrumb">
                     <ol class="flex items-center space-x-2 text-sm text-blue-100">
-                        <li><a href="{{ url($site->home_link) }}" class="hover:text-white transition">Home</a></li>
+                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
                         <li><i class="fas fa-chevron-right text-xs"></i></li>
                         <li class="text-white font-medium">My TV Shows</li>
                     </ol>
@@ -135,13 +83,13 @@
                             <th scope="col" class="px-8 py-5 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                                 Series Name
                             </th>
-                            <th scope="col" class="px-8 py-5 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider" style="width:180px">
+                            <th scope="col" class="px-8 py-5 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider col-width-180">
                                 Categories
                             </th>
-                            <th scope="col" class="px-8 py-5 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider" style="width:160px">
+                            <th scope="col" class="px-8 py-5 text-left text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider col-width-160">
                                 Added Date
                             </th>
-                            <th scope="col" class="px-8 py-5 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider" style="width:170px">
+                            <th scope="col" class="px-8 py-5 text-center text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider col-width-170">
                                 Actions
                             </th>
                         </tr>
diff --git a/resources/views/nfo/view.blade.php b/resources/views/nfo/view.blade.php
index 3f8e9fc3a..962148b37 100644
--- a/resources/views/nfo/view.blade.php
+++ b/resources/views/nfo/view.blade.php
@@ -11,7 +11,7 @@
                 <a href="{{ url('/') }}" class="hover:text-blue-600">Home</a>
                 <i class="fas fa-chevron-right mx-2 text-xs"></i>
                 @if(isset($rel))
-                    <a href="{{ url('/details/' . $rel['guid']) }}" class="hover:text-blue-600">{{ $rel['searchname'] }}</a>
+                    <a href="{{ url('/details/' . $rel['guid']) }}" class="hover:text-blue-600 break-words break-all">{{ $rel['searchname'] }}</a>
                     <i class="fas fa-chevron-right mx-2 text-xs"></i>
                 @endif
                 <span>NFO</span>
diff --git a/resources/views/partials/admin-menu.blade.php b/resources/views/partials/admin-menu.blade.php
index c8e9183d9..ba8997088 100644
--- a/resources/views/partials/admin-menu.blade.php
+++ b/resources/views/partials/admin-menu.blade.php
@@ -9,7 +9,7 @@
 
     <!-- Users -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('users-menu')">
+        <button type="button" 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" data-toggle-submenu="users-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-users"></i>
                 <span>Users</span>
@@ -33,7 +33,7 @@
 
     <!-- Content -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('content-menu')">
+        <button type="button" 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" data-toggle-submenu="content-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-file-alt"></i>
                 <span>Content</span>
@@ -56,7 +56,7 @@
 
     <!-- Releases -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('releases-menu')">
+        <button type="button" 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" data-toggle-submenu="releases-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-download"></i>
                 <span>Releases</span>
@@ -72,7 +72,7 @@
 
     <!-- Movies -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('movies-menu')">
+        <button type="button" 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" data-toggle-submenu="movies-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-film"></i>
                 <span>Movies</span>
@@ -87,7 +87,7 @@
 
     <!-- TV Shows -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('shows-menu')">
+        <button type="button" 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" data-toggle-submenu="shows-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-tv"></i>
                 <span>TV Shows</span>
@@ -101,7 +101,7 @@
 
     <!-- AniDB -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('anidb-menu')">
+        <button type="button" 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" data-toggle-submenu="anidb-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-dragon"></i>
                 <span>AniDB</span>
@@ -115,7 +115,7 @@
 
     <!-- Games -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('games-menu')">
+        <button type="button" 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" data-toggle-submenu="games-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-gamepad"></i>
                 <span>Games</span>
@@ -129,7 +129,7 @@
 
     <!-- Console -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('console-menu')">
+        <button type="button" 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" data-toggle-submenu="console-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-gamepad"></i>
                 <span>Console</span>
@@ -143,7 +143,7 @@
 
     <!-- Music -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('music-menu')">
+        <button type="button" 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" data-toggle-submenu="music-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-music"></i>
                 <span>Music</span>
@@ -157,7 +157,7 @@
 
     <!-- Books -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('books-menu')">
+        <button type="button" 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" data-toggle-submenu="books-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-book"></i>
                 <span>Books</span>
@@ -179,7 +179,7 @@
 
     <!-- Blacklist -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('blacklist-menu')">
+        <button type="button" 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" data-toggle-submenu="blacklist-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-ban"></i>
                 <span>Blacklist</span>
@@ -193,7 +193,7 @@
 
     <!-- Regexes -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('regexes-menu')">
+        <button type="button" 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" data-toggle-submenu="regexes-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-code"></i>
                 <span>Regexes</span>
@@ -209,7 +209,7 @@
 
     <!-- Groups -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('groups-menu')">
+        <button type="button" 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" data-toggle-submenu="groups-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-server"></i>
                 <span>Groups Management</span>
@@ -226,7 +226,7 @@
 
     <!-- System -->
     <div class="mb-4">
-        <button type="button" 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" onclick="toggleAdminSubmenu('system-menu')">
+        <button type="button" 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" data-toggle-submenu="system-menu">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-cog"></i>
                 <span>System</span>
@@ -241,12 +241,4 @@
     </div>
 </div>
 
-<script>
-function toggleAdminSubmenu(id) {
-    const submenu = document.getElementById(id);
-    const icon = document.getElementById(id + '-icon');
-    submenu.classList.toggle('hidden');
-    icon.classList.toggle('rotate-180');
-}
-</script>
 
diff --git a/resources/views/partials/header-menu.blade.php b/resources/views/partials/header-menu.blade.php
index 191ece475..9a1c1eeb1 100644
--- a/resources/views/partials/header-menu.blade.php
+++ b/resources/views/partials/header-menu.blade.php
@@ -17,7 +17,7 @@
                                     <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-md shadow-lg z-50" style="display: none;">
+                                <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-md 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>
@@ -35,7 +35,7 @@
                                     <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-md shadow-lg z-50" style="display: none;">
+                                <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-md 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>
                                     @else
@@ -60,7 +60,7 @@
                                     <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-md shadow-lg z-50" style="display: none;">
+                                <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-md 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>
                                     @else
@@ -101,7 +101,7 @@
                                     <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-md shadow-lg z-50" style="display: none;">
+                                <div class="dropdown-menu absolute left-0 top-full w-48 bg-gray-900 dark:bg-gray-950 rounded-md 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>
                                     @if(isset($parentcat['categories']) && count($parentcat['categories']) > 0)
                                         <div class="border-t border-gray-700 dark:border-gray-600"></div>
@@ -117,8 +117,13 @@
             </div>
 
             <!-- Right side: Search and User Menu -->
-            <div class="flex items-center space-x-4">
-                <!-- Search Form -->
+            <div class="flex items-center space-x-2 md:space-x-4">
+                <!-- Mobile Search Toggle -->
+                <button type="button" class="lg:hidden text-gray-300 hover:text-white p-2 touch-target" id="mobile-search-toggle">
+                    <i class="fa fa-search text-lg"></i>
+                </button>
+
+                <!-- Desktop Search Form -->
                 <form method="GET" action="{{ route('search') }}" class="hidden lg:flex items-center">
                     <select name="t" class="bg-gray-700 text-white text-sm rounded-l px-3 py-2 border-r border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                         <option value="-1">All</option>
@@ -137,6 +142,27 @@
                     </button>
                 </form>
 
+                <!-- Mobile Search Form (Hidden by default) -->
+                <div id="mobile-search-form" class="lg:hidden hidden absolute top-16 left-0 right-0 bg-gray-800 dark:bg-gray-950 p-4 shadow-lg z-50">
+                    <form method="GET" action="{{ route('search') }}" class="space-y-3">
+                        <select name="t" class="w-full bg-gray-700 text-white text-sm rounded px-3 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 touch-target">
+                            <option value="-1">All Categories</option>
+                            @if(isset($parentcatlist))
+                                @foreach($parentcatlist as $parentcat)
+                                    <option value="{{ $parentcat['id'] }}" {{ ($header_menu_cat ?? '') == $parentcat['id'] ? 'selected' : '' }} class="font-semibold">{{ $parentcat['title'] }}</option>
+                                    @foreach($parentcat['categories'] as $subcat)
+                                        <option value="{{ $subcat['id'] }}" {{ ($header_menu_cat ?? '') == $subcat['id'] ? 'selected' : '' }}>&nbsp;&nbsp;{{ $subcat['title'] }}</option>
+                                    @endforeach
+                                @endforeach
+                            @endif
+                        </select>
+                        <input type="search" name="search" value="{{ $header_menu_search ?? '' }}" placeholder="Search releases..." class="w-full bg-gray-700 text-white text-sm px-3 py-3 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 touch-target">
+                        <button type="submit" class="w-full bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-800 text-white px-4 py-3 rounded transition touch-target font-semibold">
+                            <i class="fa fa-search mr-2"></i>Search
+                        </button>
+                    </form>
+                </div>
+
                 <!-- User Menu -->
                 @auth
                     <div class="relative dropdown-container">
@@ -147,7 +173,7 @@
                             <span class="hidden md:block">{{ auth()->user()->username }}</span>
                             <i class="fas fa-chevron-down text-xs"></i>
                         </button>
-                        <div class="dropdown-menu absolute right-0 top-full w-56 bg-gray-900 rounded-md shadow-lg z-50" style="display: none;">
+                        <div class="dropdown-menu absolute right-0 top-full w-56 bg-gray-900 rounded-md 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">
                                 <i class="fa fa-shopping-basket fa-fw mr-2"></i>My Download Basket
                             </a>
@@ -173,7 +199,7 @@
                             <a href="{{ route('profile') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">
                                 <i class="fa fa-user fa-fw mr-2"></i>Profile
                             </a>
-                            <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" 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-gray-800 hover:text-white">
                                 <i class="fa fa-sign-out fa-fw mr-2"></i>Sign Out
                             </a>
                             <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
diff --git a/resources/views/partials/nfo-modal.blade.php b/resources/views/partials/nfo-modal.blade.php
index 041837702..79c74b038 100644
--- a/resources/views/partials/nfo-modal.blade.php
+++ b/resources/views/partials/nfo-modal.blade.php
@@ -1,8 +1,8 @@
-<!-- NFO Modal -->
+<!-- NFO Modal - CSP Safe -->
 <div id="nfoModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
     <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
         <!-- Background overlay -->
-        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeNfoModal()"></div>
+        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-75 transition-opacity" aria-hidden="true" data-close-nfo-modal></div>
 
         <!-- Modal panel -->
         <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
@@ -11,11 +11,11 @@
                     <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="modal-title">
                         <i class="fas fa-file-alt mr-2 text-yellow-600 dark:text-yellow-400"></i>NFO File
                     </h3>
-                    <button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" onclick="closeNfoModal()">
+                    <button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" data-close-nfo-modal>
                         <i class="fas fa-times text-xl"></i>
                     </button>
                 </div>
-                <div id="nfoContent" class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto font-mono text-sm whitespace-pre" style="max-height: 70vh;">
+                <div id="nfoContent" class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto font-mono text-sm whitespace-pre nfo-content">
                     <div class="flex items-center justify-center py-8">
                         <i class="fas fa-spinner fa-spin text-2xl mr-2"></i>
                         <span>Loading NFO...</span>
@@ -23,7 +23,7 @@
                 </div>
             </div>
             <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="closeNfoModal()">
+                <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" data-close-nfo-modal>
                     Close
                 </button>
             </div>
@@ -31,60 +31,5 @@
     </div>
 </div>
 
-<script>
-    function openNfoModal(guid) {
-        const modal = document.getElementById('nfoModal');
-        const content = document.getElementById('nfoContent');
-
-        // Show modal
-        modal.classList.remove('hidden');
-
-        // Reset content with loading message
-        content.innerHTML = '<div class="flex items-center justify-center py-8"><i class="fas fa-spinner fa-spin text-2xl mr-2"></i><span>Loading NFO...</span></div>';
-
-        // Fetch NFO content
-        fetch(`{{ url('/nfo') }}/${guid}?modal=1`)
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('NFO not found');
-                }
-                return response.text();
-            })
-            .then(html => {
-                // Extract the NFO content from the response
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(html, 'text/html');
-                const nfoText = doc.querySelector('pre')?.textContent || doc.body.textContent;
-                content.textContent = nfoText;
-            })
-            .catch(error => {
-                content.innerHTML = '<div class="text-red-400 text-center py-8"><i class="fas fa-exclamation-triangle mr-2"></i>Error loading NFO file</div>';
-                console.error('Error loading NFO:', error);
-            });
-    }
-
-    function closeNfoModal() {
-        const modal = document.getElementById('nfoModal');
-        modal.classList.add('hidden');
-    }
-
-    // Close modal on Escape key
-    document.addEventListener('keydown', function(event) {
-        if (event.key === 'Escape') {
-            closeNfoModal();
-        }
-    });
-
-    // Add click handlers for NFO badges
-    document.addEventListener('click', function(event) {
-        if (event.target.closest('.nfo-badge')) {
-            event.preventDefault();
-            const badge = event.target.closest('.nfo-badge');
-            const guid = badge.getAttribute('data-guid');
-            if (guid) {
-                openNfoModal(guid);
-            }
-        }
-    });
-</script>
+<!-- NFO Modal functionality moved to resources/js/csp-safe.js -->
 
diff --git a/resources/views/partials/sidebar.blade.php b/resources/views/partials/sidebar.blade.php
index d3e765e21..27411496b 100644
--- a/resources/views/partials/sidebar.blade.php
+++ b/resources/views/partials/sidebar.blade.php
@@ -105,7 +105,7 @@
 
     <!-- Sign Out -->
     @auth
-        <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('sidebar-logout-form').submit();" 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-gray-800 rounded transition mt-4">
             <i class="fa fa-sign-out-alt fa-fw mr-3"></i>
             <span>Sign Out</span>
         </a>
@@ -115,25 +115,5 @@
     @endauth
 </nav>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Sidebar toggle functionality
-    const sidebarToggles = document.querySelectorAll('.sidebar-toggle');
 
-    sidebarToggles.forEach(toggle => {
-        toggle.addEventListener('click', function() {
-            const targetId = this.getAttribute('data-target');
-            const submenu = document.getElementById(targetId);
-            const chevron = this.querySelector('.fa-chevron-down');
-
-            if (submenu) {
-                submenu.classList.toggle('hidden');
-                if (chevron) {
-                    chevron.classList.toggle('rotate-180');
-                }
-            }
-        });
-    });
-});
-</script>
 
diff --git a/resources/views/partials/toast-notifications.blade.php b/resources/views/partials/toast-notifications.blade.php
index 089291f29..3d25026c9 100644
--- a/resources/views/partials/toast-notifications.blade.php
+++ b/resources/views/partials/toast-notifications.blade.php
@@ -1,136 +1,5 @@
-{{-- Toast Notification Component --}}
+{{-- Toast Notification Component - CSP Safe --}}
+{{-- All styles moved to resources/css/csp-safe.css --}}
+{{-- All JavaScript moved to resources/js/csp-safe.js --}}
 
-<style>
-#toast-container .toast-notification {
-    position: relative;
-    width: 350px;
-    margin-bottom: 10px;
-    padding: 16px;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    display: block;
-    color: #ffffff;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.5;
-    animation: slideInRight 0.3s ease-out;
-}
-
-#toast-container .toast-notification.removing {
-    animation: slideOutRight 0.3s ease-out;
-}
-
-.toast-notification.success {
-    background-color: #10b981;
-    border-left: 4px solid #059669;
-}
-
-.toast-notification.error {
-    background-color: #ef4444;
-    border-left: 4px solid #dc2626;
-}
-
-.toast-notification.info {
-    background-color: #3b82f6;
-    border-left: 4px solid #2563eb;
-}
-
-.toast-notification .toast-icon {
-    display: inline-block;
-    margin-right: 12px;
-    font-size: 20px;
-    vertical-align: middle;
-}
-
-.toast-notification .toast-message {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 260px;
-}
-
-.toast-notification .toast-close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background: none;
-    border: none;
-    color: #ffffff;
-    font-size: 18px;
-    cursor: pointer;
-    padding: 4px 8px;
-    opacity: 0.8;
-}
-
-.toast-notification .toast-close:hover {
-    opacity: 1;
-}
-
-@keyframes slideInRight {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-@keyframes slideOutRight {
-    from {
-        transform: translateX(0);
-        opacity: 1;
-    }
-    to {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
-</style>
-
-<script>
-// Define showToast globally - immediately available
-window.showToast = function(message, type) {
-    type = type || 'success';
-
-    console.log('showToast called:', message, type);
-
-    var container = document.getElementById('toast-container');
-    if (!container) {
-        console.error('Toast container NOT found!');
-        alert(message);
-        return;
-    }
-
-    var toast = document.createElement('div');
-    toast.className = 'toast-notification ' + type;
-
-    var iconClass = type === 'success' ? 'fa-check-circle' :
-                    type === 'error' ? 'fa-exclamation-circle' :
-                    'fa-info-circle';
-
-    toast.innerHTML =
-        '<span class="toast-icon"><i class="fas ' + iconClass + '"></i></span>' +
-        '<span class="toast-message">' + message + '</span>' +
-        '<button class="toast-close" onclick="this.parentElement.remove()">×</button>';
-
-    container.appendChild(toast);
-    console.log('Toast added! Container children:', container.children.length);
-
-    // Force a reflow to ensure animation triggers
-    toast.offsetHeight;
-
-    // Auto remove after 4 seconds
-    setTimeout(function() {
-        toast.classList.add('removing');
-        setTimeout(function() {
-            if (toast.parentNode) {
-                toast.remove();
-            }
-        }, 300);
-    }, 4000);
-};
-
-console.log('Toast system loaded');
-</script>
 
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index 49e6c669f..14a15ef37 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -222,21 +222,60 @@
 
             @if($user->passwordSecurity()->exists() && $user->passwordSecurity->google2fa_enable)
                 <!-- 2FA is Enabled -->
-                <div class="bg-green-50 border-l-4 border-green-500 rounded-lg p-4">
+                <div class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 rounded-lg p-4">
                     <div class="flex items-start">
-                        <i class="fas fa-check-circle text-green-600 text-xl mr-3 mt-1"></i>
+                        <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-xl mr-3 mt-1"></i>
                         <div class="flex-1">
-                            <h4 class="text-green-800 font-semibold mb-1">Two-Factor Authentication is Active</h4>
-                            <p class="text-green-700 text-sm mb-4">Your account is protected with an additional layer of security. You'll need your authenticator app to log in.</p>
+                            <h4 class="text-green-800 dark:text-green-200 font-semibold mb-1">Two-Factor Authentication is Active</h4>
+                            <p class="text-green-700 dark:text-green-300 text-sm mb-4">Your account is protected with an additional layer of security. You'll need your authenticator app to log in.</p>
 
-                            <form method="POST" action="{{ route('profileedit.disable2fa') }}" class="inline">
-                                @csrf
-                                <button type="submit"
-                                        class="px-4 py-2 bg-red-600 dark:bg-red-700 text-white text-sm rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition"
-                                        onclick="return confirm('Are you sure you want to disable two-factor authentication? This will make your account less secure.')">
+                            <!-- Collapsible Disable Form -->
+                            <div class="space-y-3">
+                                <button id="toggle-disable-2fa-btn"
+                                        type="button"
+                                        class="px-4 py-2 bg-red-600 dark:bg-red-700 text-white text-sm rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition">
                                     <i class="fas fa-times-circle mr-2"></i>Disable 2FA
                                 </button>
-                            </form>
+
+                                <div id="disable-2fa-form-container"
+                                     style="display: none;"
+                                     class="bg-white dark:bg-gray-800 border border-red-200 dark:border-red-700 rounded-lg p-4 mt-3">
+                                    <div class="mb-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
+                                        <div class="flex items-start">
+                                            <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mr-2 mt-0.5"></i>
+                                            <div class="text-sm text-yellow-800 dark:text-yellow-200">
+                                                <strong>Warning:</strong> Disabling 2FA will make your account less secure. Please enter your password to confirm.
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <form method="POST" action="{{ route('profileedit.disable2fa') }}" class="space-y-3">
+                                        @csrf
+                                        <div>
+                                            <label for="disable_2fa_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                                Current Password
+                                            </label>
+                                            <input type="password"
+                                                   id="disable_2fa_password"
+                                                   name="current-password"
+                                                   required
+                                                   class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+                                                   placeholder="Enter your password">
+                                        </div>
+                                        <div class="flex gap-2">
+                                            <button type="submit"
+                                                    class="px-4 py-2 bg-red-600 dark:bg-red-700 text-white text-sm rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition">
+                                                <i class="fas fa-check mr-2"></i>Confirm Disable
+                                            </button>
+                                            <button id="cancel-disable-2fa-btn"
+                                                    type="button"
+                                                    class="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 text-sm rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">
+                                                <i class="fas fa-times mr-2"></i>Cancel
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -265,19 +304,19 @@
                             </p>
 
 
-                            <form method="POST" action="{{ route('enable2fa') }}" class="space-y-3">
+                            <form method="POST" action="{{ route('profileedit.enable2fa') }}" class="space-y-3">
                                 @csrf
                                 <div>
-                                    <label for="one_time_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                    <label for="verify-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                         Enter Verification Code
                                     </label>
                                     <input type="text"
-                                           id="one_time_password"
-                                           name="one_time_password"
+                                           id="verify-code"
+                                           name="verify-code"
                                            placeholder="Enter 6-digit code"
                                            maxlength="6"
                                            required
-                                           class="w-full md:w-64 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-lg tracking-widest">
+                                           class="w-full md:w-64 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-lg tracking-widest bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500">
                                 </div>
                                 <div class="flex gap-2">
                                     <button type="submit" class="px-4 py-2 bg-green-600 dark:bg-green-700 text-white text-sm rounded-lg hover:bg-green-700 dark:hover:bg-green-800 transition">
@@ -327,61 +366,4 @@
 </div>
 @endsection
 
-@push('scripts')
-<script>
-    // Theme preference instant preview
-    document.addEventListener('DOMContentLoaded', function() {
-        const themeRadios = document.querySelectorAll('input[name="theme_preference"]');
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-        function applyTheme(themeValue) {
-            const html = document.documentElement;
-
-            if (themeValue === 'system') {
-                // Use OS preference
-                if (mediaQuery.matches) {
-                    html.classList.add('dark');
-                } else {
-                    html.classList.remove('dark');
-                }
-            } else if (themeValue === 'dark') {
-                html.classList.add('dark');
-            } else {
-                html.classList.remove('dark');
-            }
-        }
-
-        themeRadios.forEach(radio => {
-            radio.addEventListener('change', function() {
-                applyTheme(this.value);
-                updateThemeSelection();
-            });
-        });
-
-        function updateThemeSelection() {
-            const selectedValue = document.querySelector('input[name="theme_preference"]:checked').value;
-            document.querySelectorAll('input[name="theme_preference"]').forEach((radio) => {
-                const label = radio.closest('label');
-                const isSelected = radio.value === selectedValue;
-
-                if (isSelected) {
-                    label.classList.remove('border-gray-300', 'dark:border-gray-600', 'bg-gray-50', 'dark:bg-gray-700');
-                    label.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
-                } else {
-                    label.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
-                    label.classList.add('border-gray-300', 'dark:border-gray-600', 'bg-gray-50', 'dark:bg-gray-700');
-                }
-            });
-        }
-
-        // Listen for OS theme changes when system mode is selected
-        mediaQuery.addEventListener('change', (e) => {
-            const selectedTheme = document.querySelector('input[name="theme_preference"]:checked').value;
-            if (selectedTheme === 'system') {
-                applyTheme('system');
-            }
-        });
-    });
-</script>
-@endpush
 
diff --git a/resources/views/profile/index.blade.php b/resources/views/profile/index.blade.php
index 56dadc030..0a1cb0e9f 100644
--- a/resources/views/profile/index.blade.php
+++ b/resources/views/profile/index.blade.php
@@ -134,7 +134,7 @@
                     </div>
 
                     <!-- UI Preferences Tab -->
-                    <div id="preferences" class="tab-content" style="display: none;">
+                    <div id="preferences" class="tab-content hidden-by-default">
                         <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-6">
                             <div class="flex items-center mb-4">
                                 <i class="fa fa-sliders-h text-blue-600 dark:text-blue-400 mr-2"></i>
@@ -205,7 +205,7 @@
                     </div>
 
                     <!-- API & Downloads Tab -->
-                    <div id="api" class="tab-content" style="display: none;">
+                    <div id="api" class="tab-content hidden-by-default">
                         <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-6">
                             <div class="flex items-center mb-4">
                                 <i class="fa fa-key text-blue-600 dark:text-blue-400 mr-2"></i>
@@ -242,7 +242,7 @@
 
                     <!-- Recent Downloads Tab -->
                     @if(($isadmin ?? false) && isset($downloadlist) && count($downloadlist) > 0)
-                        <div id="downloads" class="tab-content" style="display: none;">
+                        <div id="downloads" class="tab-content hidden-by-default">
                             <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6">
                                 <div class="flex items-center mb-4">
                                     <i class="fa fa-download text-blue-600 dark:text-blue-400 mr-2"></i>
@@ -251,7 +251,7 @@
                                 <div class="space-y-2">
                                     @foreach($downloadlist->take(20) as $download)
                                         <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700 last:border-0">
-                                            <a href="{{ url('/details/' . $download->guid) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 flex-1 truncate">
+                                            <a href="{{ url('/details/' . $download->guid) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 flex-1 break-words break-all">
                                                 {{ $download->searchname }}
                                             </a>
                                             <span class="text-sm text-gray-500 ml-4">{{ \Carbon\Carbon::parse($download->created_at)->diffForHumans() }}</span>
@@ -265,66 +265,5 @@
             </div>
     </div>
 </div>
-
-@push('styles')
-<style>
-    .tab-content {
-        display: none;
-    }
-    .tab-content:first-of-type,
-    .tab-content.active {
-        display: block;
-    }
-</style>
-@endpush
-
-@push('scripts')
-<script>
-    // Tab switching functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const tabLinks = document.querySelectorAll('.tab-link');
-        const tabContents = document.querySelectorAll('.tab-content');
-
-
-        tabLinks.forEach(link => {
-            link.addEventListener('click', function(e) {
-                e.preventDefault();
-                const targetId = this.getAttribute('href').substring(1);
-
-                // Update active states on tab links
-                tabLinks.forEach(l => {
-                    l.classList.remove('bg-blue-50', 'text-blue-700', 'font-medium');
-                    l.classList.add('text-gray-700');
-                });
-                this.classList.add('bg-blue-50', 'text-blue-700', 'font-medium');
-                this.classList.remove('text-gray-700');
-
-                // Hide all tab contents
-                tabContents.forEach(content => {
-                    content.style.display = 'none';
-                });
-
-                // Show selected tab content
-                const targetContent = document.getElementById(targetId);
-                if (targetContent) {
-                    targetContent.style.display = 'block';
-                }
-
-                // Update URL hash without scrolling
-                history.pushState(null, null, '#' + targetId);
-            });
-        });
-
-        // Handle initial hash
-        const hash = window.location.hash.substring(1);
-        if (hash && document.getElementById(hash)) {
-            const link = document.querySelector(`a[href="#${hash}"]`);
-            if (link) {
-                link.click();
-            }
-        }
-    });
-</script>
-@endpush
 @endsection
 
diff --git a/resources/views/search/index.blade.php b/resources/views/search/index.blade.php
index c0a768557..897818cec 100644
--- a/resources/views/search/index.blade.php
+++ b/resources/views/search/index.blade.php
@@ -101,14 +101,14 @@
         @endif
 
         <!-- Action Buttons -->
-        <div class="flex flex-wrap gap-2">
-            <button type="submit" class="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition inline-flex items-center">
+        <div class="flex flex-col sm:flex-row flex-wrap gap-2">
+            <button type="submit" class="px-6 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition inline-flex items-center justify-center font-semibold">
                 <i class="fas fa-search mr-2"></i> Search
             </button>
-            <a href="{{ url('/search?search_type=adv') }}" class="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition inline-flex items-center">
+            <a href="{{ url('/search?search_type=adv') }}" class="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition inline-flex items-center justify-center">
                 <i class="fas fa-sliders-h mr-2"></i> Advanced Search
             </a>
-            <a href="{{ route('search') }}" class="px-6 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-700 transition">
+            <a href="{{ route('search') }}" class="px-6 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-100 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-700 transition justify-center inline-flex">
                 Clear
             </a>
         </div>
@@ -116,44 +116,241 @@
 
     <!-- Search Results -->
     @if(isset($results) && ((is_array($results) && count($results) > 0) || (is_object($results) && $results->count() > 0)))
-        <div>
-            <div class="mb-4 flex items-center justify-between">
-                <h2 class="text-xl font-bold text-gray-800">
-                    Search Results ({{ is_object($results) ? $results->total() : count($results) }} found)
-                </h2>
-                @if(is_object($results))
-                    <div class="text-sm text-gray-600">
-                        Page {{ $results->currentPage() }} of {{ $results->lastPage() }}
+        <form id="nzb_multi_operations_form" method="get">
+            <!-- Multi-operations toolbar -->
+            <div class="mb-4 bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <small class="text-gray-600 dark:text-gray-400">With Selected:</small>
+                        <div class="flex gap-1">
+                            <button type="button" class="nzb_multi_operations_download px-3 py-1 bg-green-600 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 transition text-sm" title="Download NZBs">
+                                <i class="fa fa-cloud-download"></i>
+                            </button>
+                            <button type="button" class="nzb_multi_operations_cart px-3 py-1 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800 transition text-sm" title="Send to Download Basket">
+                                <i class="fa fa-shopping-basket"></i>
+                            </button>
+                        </div>
                     </div>
-                @endif
+                    <div class="flex items-center gap-4">
+                        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">
+                            Search Results ({{ is_object($results) ? $results->total() : count($results) }} found)
+                        </h2>
+                        @if(is_object($results))
+                            <div class="text-sm text-gray-600 dark:text-gray-400">
+                                Page {{ $results->currentPage() }} of {{ $results->lastPage() }}
+                            </div>
+                        @endif
+                    </div>
+                </div>
             </div>
 
-            <div class="space-y-3">
+            <!-- Sort Options -->
+            <div class="mb-4 bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+                <span class="block sm:inline font-medium text-gray-700 dark:text-gray-300 mb-2 sm:mb-0 sm:mr-2 text-sm">Sort by:</span>
+                <div class="flex flex-wrap items-center gap-2 text-sm">
+                    @php
+                        $currentSort = request('ob', 'posted_desc');
+                        $sortOptions = [
+                            'posted_desc' => ['label' => 'Posted Date ↓', 'icon' => 'fa-calendar'],
+                            'posted_asc' => ['label' => 'Posted Date ↑', 'icon' => 'fa-calendar'],
+                            'size_desc' => ['label' => 'Size ↓', 'icon' => 'fa-hdd'],
+                            'size_asc' => ['label' => 'Size ↑', 'icon' => 'fa-hdd'],
+                            'name_asc' => ['label' => 'Name ↑', 'icon' => 'fa-font'],
+                            'name_desc' => ['label' => 'Name ↓', 'icon' => 'fa-font'],
+                        ];
+                        $queryParams = request()->except('ob');
+                    @endphp
+                    @foreach($sortOptions as $sortKey => $sortData)
+                        <a href="{{ route('search', array_merge($queryParams, ['ob' => $sortKey])) }}"
+                           class="px-3 py-1.5 rounded {{ $currentSort === $sortKey ? 'bg-blue-600 text-white' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700' }} transition border border-gray-300 dark:border-gray-600">
+                            <i class="fas {{ $sortData['icon'] }} mr-1"></i>{{ $sortData['label'] }}
+                        </a>
+                    @endforeach
+                </div>
+            </div>
+
+            <!-- Desktop Table View (hidden on mobile) -->
+            <div class="hidden md:block overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-100 dark:bg-gray-900">
+                        <tr>
+                            <th class="px-3 py-3 text-left">
+                                <input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" id="chkSelectAll">
+                            </th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Name</th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Category</th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Added</th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Size</th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Files</th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Stats</th>
+                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        @foreach($results as $result)
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
+                                <td class="px-3 py-4 whitespace-nowrap">
+                                    <input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $result->guid }}">
+                                </td>
+                                <td class="px-3 py-4">
+                                    <div class="flex-1">
+                                        <div class="flex items-center gap-2 flex-wrap">
+                                            <a href="{{ url('/details/' . $result->guid) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium break-words break-all">{{ $result->searchname }}</a>
+                                            @if(isset($result->haspreview) && $result->haspreview == 1)
+                                                <button type="button"
+                                                        class="preview-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800 transition cursor-pointer"
+                                                        data-guid="{{ $result->guid }}"
+                                                        title="View preview image">
+                                                    <i class="fas fa-image mr-1"></i> Preview
+                                                </button>
+                                            @endif
+                                            @if(isset($result->jpgstatus) && $result->jpgstatus == 1)
+                                                <button type="button"
+                                                        class="sample-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800 transition cursor-pointer"
+                                                        data-guid="{{ $result->guid }}"
+                                                        title="View sample image">
+                                                    <i class="fas fa-images mr-1"></i> Sample
+                                                </button>
+                                            @endif
+                                            @if(isset($result->nfostatus) && $result->nfostatus == 1)
+                                                <button type="button"
+                                                        class="nfo-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800 transition cursor-pointer"
+                                                        data-guid="{{ $result->guid }}"
+                                                        title="View NFO file">
+                                                    <i class="fas fa-file-alt mr-1"></i> NFO
+                                                </button>
+                                            @endif
+                                        </div>
+                                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex flex-wrap gap-2">
+                                            @if($result->group_name)
+                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                                                    <i class="fas fa-users mr-1"></i> {{ $result->group_name }}
+                                                </span>
+                                            @endif
+                                            @if(!empty($result->postdate))
+                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                                    <i class="fas fa-calendar mr-1"></i> Posted: {{ \Carbon\Carbon::parse($result->postdate)->format('M d, Y H:i') }}
+                                                </span>
+                                            @endif
+                                            @if(!empty($result->fromname))
+                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono">
+                                                    <i class="fas fa-user mr-1"></i> {{ $result->fromname }}
+                                                </span>
+                                            @endif
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-3 py-4 whitespace-nowrap">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+                                        {{ $result->category_name ?? 'Other' }}
+                                    </span>
+                                </td>
+                                <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                                    {{ \Carbon\Carbon::parse($result->adddate)->diffForHumans() }}
+                                </td>
+                                <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                                    {{ number_format($result->size / 1073741824, 2) }} GB
+                                </td>
+                                <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                                    {{ $result->totalpart ?? 0 }}
+                                </td>
+                                <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+                                    <div class="flex items-center gap-2">
+                                        <span title="Grabs"><i class="fas fa-download text-green-600 dark:text-green-400"></i> {{ $result->grabs ?? 0 }}</span>
+                                        <span title="Comments"><i class="fas fa-comment text-blue-600 dark:text-blue-400"></i> {{ $result->comments ?? 0 }}</span>
+                                    </div>
+                                </td>
+                                <td class="px-3 py-4 whitespace-nowrap">
+                                    <div class="flex items-center gap-1 flex-wrap">
+                                        <a href="{{ url('/getnzb/' . $result->guid) }}" class="download-nzb px-2 py-1 bg-green-600 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 transition text-sm" title="Download NZB">
+                                            <i class="fa fa-download"></i>
+                                        </a>
+                                        <a href="{{ url('/details/' . $result->guid) }}" class="px-2 py-1 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800 transition text-sm" title="View Details">
+                                            <i class="fa fa-info"></i>
+                                        </a>
+                                        <a href="#" class="add-to-cart px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition text-sm" data-guid="{{ $result->guid }}" title="Add to Cart">
+                                            <i class="icon_cart fa fa-shopping-basket"></i>
+                                        </a>
+                                    </div>
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Mobile Card View (visible on mobile only) -->
+            <div class="md:hidden space-y-3">
                 @foreach($results as $result)
                     <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition">
-                        <div class="flex items-start justify-between">
+                        <div class="flex items-start gap-3">
+                            <input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700 mt-1" name="release[]" value="{{ $result->guid }}">
                             <div class="flex-1">
-                                <a href="{{ url('/details/' . $result->guid) }}" class="text-lg font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800">
-                                    {{ $result->searchname }}
-                                </a>
-                                <div class="flex flex-wrap items-center gap-3 mt-2 text-sm text-gray-600">
-                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800">
+                                <div class="flex items-center gap-2 flex-wrap mb-2">
+                                    <a href="{{ url('/details/' . $result->guid) }}" class="text-lg font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 break-words break-all">
+                                        {{ $result->searchname }}
+                                    </a>
+                                    @if(isset($result->haspreview) && $result->haspreview == 1)
+                                        <button type="button"
+                                                class="preview-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 hover:bg-purple-200 dark:hover:bg-purple-800 transition cursor-pointer"
+                                                data-guid="{{ $result->guid }}"
+                                                title="View preview image">
+                                            <i class="fas fa-image mr-1"></i> Preview
+                                        </button>
+                                    @endif
+                                    @if(isset($result->jpgstatus) && $result->jpgstatus == 1)
+                                        <button type="button"
+                                                class="sample-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800 transition cursor-pointer"
+                                                data-guid="{{ $result->guid }}"
+                                                title="View sample image">
+                                            <i class="fas fa-images mr-1"></i> Sample
+                                        </button>
+                                    @endif
+                                    @if(isset($result->nfostatus) && $result->nfostatus == 1)
+                                        <button type="button"
+                                                class="nfo-badge inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800 transition cursor-pointer"
+                                                data-guid="{{ $result->guid }}"
+                                                title="View NFO file">
+                                            <i class="fas fa-file-alt mr-1"></i> NFO
+                                        </button>
+                                    @endif
+                                </div>
+                                <div class="flex flex-wrap items-center gap-3 mt-2 text-sm text-gray-600 dark:text-gray-400">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
                                         {{ $result->category_name ?? 'Other' }}
                                     </span>
                                     <span><i class="fas fa-clock mr-1"></i>{{ \Carbon\Carbon::parse($result->postdate)->diffForHumans() }}</span>
                                     <span><i class="fas fa-hdd mr-1"></i>{{ number_format($result->size / 1073741824, 2) }} GB</span>
                                     <span><i class="fas fa-file mr-1"></i>{{ $result->totalpart ?? 0 }} files</span>
+                                    <span title="Grabs"><i class="fas fa-download text-green-600 dark:text-green-400 mr-1"></i>{{ $result->grabs ?? 0 }}</span>
+                                    <span title="Comments"><i class="fas fa-comment text-blue-600 dark:text-blue-400 mr-1"></i>{{ $result->comments ?? 0 }}</span>
                                     @if($result->group_name)
                                         <span><i class="fas fa-users mr-1"></i>{{ $result->group_name }}</span>
                                     @endif
+                                    @if(!empty($result->fromname))
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono text-xs">
+                                            <i class="fas fa-user mr-1"></i>{{ $result->fromname }}
+                                        </span>
+                                    @endif
+                                </div>
+                                <div class="mt-3 flex gap-1 flex-wrap">
+                                    <a href="{{ url('/getnzb/' . $result->guid) }}"
+                                       class="download-nzb px-2 py-1 bg-green-600 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 transition text-sm"
+                                       title="Download NZB">
+                                        <i class="fa fa-download"></i>
+                                    </a>
+                                    <a href="{{ url('/details/' . $result->guid) }}"
+                                       class="px-2 py-1 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800 transition text-sm"
+                                       title="View Details">
+                                        <i class="fa fa-info"></i>
+                                    </a>
+                                    <a href="#"
+                                       class="add-to-cart px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition text-sm"
+                                       data-guid="{{ $result->guid }}"
+                                       title="Add to Cart">
+                                        <i class="icon_cart fa fa-shopping-basket"></i>
+                                    </a>
                                 </div>
-                            </div>
-                            <div class="ml-4 flex gap-2">
-                                <a href="{{ url('/getnzb/' . $result->guid) }}"
-                                   class="px-3 py-2 bg-green-600 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 transition text-sm"
-                                   title="Download NZB">
-                                    <i class="fa fa-download"></i>
-                                </a>
                             </div>
                         </div>
                     </div>
@@ -166,7 +363,7 @@
                     {{ $results->appends(request()->query())->links() }}
                 </div>
             @endif
-        </div>
+        </form>
     @elseif(request()->has('search'))
         <div class="text-center py-12">
             <i class="fas fa-search text-6xl text-gray-300 mb-4"></i>
@@ -180,6 +377,25 @@
             <p class="text-gray-500">Enter search terms above to find releases.</p>
         </div>
     @endif
+
+    <!-- Preview/Sample Image Modal -->
+    <div id="previewModal" class="hidden fixed inset-0 bg-black bg-opacity-75 items-center justify-center p-4" style="display: none; z-index: 9999 !important;">
+        <div class="relative max-w-4xl w-full">
+            <button type="button" onclick="closePreviewModal()" class="absolute top-4 right-4 text-white hover:text-gray-300 text-3xl font-bold z-10">
+                <i class="fas fa-times"></i>
+            </button>
+            <div class="text-center mb-2">
+                <h3 id="previewTitle" class="text-white text-lg font-semibold"></h3>
+            </div>
+            <img id="previewImage" src="" alt="Preview" class="max-w-full max-h-[90vh] mx-auto rounded-lg shadow-2xl">
+            <div class="text-center mt-4">
+                <p id="previewError" class="text-red-400 hidden"></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- NFO Modal -->
+    @include('partials.nfo-modal')
 </div>
 @endsection
 
diff --git a/resources/views/series/viewseries.blade.php b/resources/views/series/viewseries.blade.php
index df5a65398..ea25fcf4b 100644
--- a/resources/views/series/viewseries.blade.php
+++ b/resources/views/series/viewseries.blade.php
@@ -6,7 +6,7 @@
     <div class="px-6 py-4 border-b border-gray-200">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                <li><a href="{{ url($site->home_link ?? '/') }}" class="hover:text-blue-600">Home</a></li>
+                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
                 <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
                 <li><a href="{{ route('series') }}" class="hover:text-blue-600">TV Series</a></li>
                 <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
@@ -140,7 +140,7 @@
                                     @if(!empty($show['tvdb']) && $show['tvdb'] > 0)
                                         <a class="px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 inline-flex items-center text-sm font-medium transition"
                                            target="_blank"
-                                           href="{{ $site->dereferrer_link }}http://thetvdb.com/?tab=series&id={{ $show['tvdb'] }}"
+                                           href="{{ $site['dereferrer_link'] }}http://thetvdb.com/?tab=series&id={{ $show['tvdb'] }}"
                                            title="View at TheTVDB">
                                             <i class="fa fa-database mr-2"></i> TheTVDB
                                         </a>
@@ -149,7 +149,7 @@
                                     @if(!empty($show['tvmaze']) && $show['tvmaze'] > 0)
                                         <a class="px-4 py-2 bg-purple-100 text-purple-800 rounded-lg hover:bg-purple-200 inline-flex items-center text-sm font-medium transition"
                                            target="_blank"
-                                           href="{{ $site->dereferrer_link }}http://tvmaze.com/shows/{{ $show['tvmaze'] }}"
+                                           href="{{ $site['dereferrer_link'] }}http://tvmaze.com/shows/{{ $show['tvmaze'] }}"
                                            title="View at TVMaze">
                                             <i class="fa fa-tv mr-2"></i> TVMaze
                                         </a>
@@ -158,7 +158,7 @@
                                     @if(!empty($show['trakt']) && $show['trakt'] > 0)
                                         <a class="px-4 py-2 bg-red-100 text-red-800 rounded-lg hover:bg-red-200 inline-flex items-center text-sm font-medium transition"
                                            target="_blank"
-                                           href="{{ $site->dereferrer_link }}http://www.trakt.tv/shows/{{ $show['trakt'] }}"
+                                           href="{{ $site['dereferrer_link'] }}http://www.trakt.tv/shows/{{ $show['trakt'] }}"
                                            title="View at TraktTv">
                                             <i class="fa fa-heart mr-2"></i> Trakt
                                         </a>
@@ -167,7 +167,7 @@
                                     @if(!empty($show['tvrage']) && $show['tvrage'] > 0)
                                         <a class="px-4 py-2 bg-orange-100 text-orange-800 rounded-lg hover:bg-orange-200 inline-flex items-center text-sm font-medium transition"
                                            target="_blank"
-                                           href="{{ $site->dereferrer_link }}http://www.tvrage.com/shows/id-{{ $show['tvrage'] }}"
+                                           href="{{ $site['dereferrer_link'] }}http://www.tvrage.com/shows/id-{{ $show['tvrage'] }}"
                                            title="View at TV Rage">
                                             <i class="fa fa-external-link-alt mr-2"></i> TV Rage
                                         </a>
@@ -176,7 +176,7 @@
                                     @if(!empty($show['imdb']) && $show['imdb'] > 0)
                                         <a class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg hover:bg-yellow-200 inline-flex items-center text-sm font-medium transition"
                                            target="_blank"
-                                           href="{{ $site->dereferrer_link }}https://www.imdb.com/title/tt{{ str_pad($show['imdb'], 7, '0', STR_PAD_LEFT) }}"
+                                           href="{{ $site['dereferrer_link'] }}https://www.imdb.com/title/tt{{ str_pad($show['imdb'], 7, '0', STR_PAD_LEFT) }}"
                                            title="View at IMDb">
                                             <i class="fa fa-film mr-2"></i> IMDb
                                         </a>
@@ -185,7 +185,7 @@
                                     @if(!empty($show['tmdb']) && $show['tmdb'] > 0)
                                         <a class="px-4 py-2 bg-cyan-100 text-cyan-800 rounded-lg hover:bg-cyan-200 inline-flex items-center text-sm font-medium transition"
                                            target="_blank"
-                                           href="{{ $site->dereferrer_link }}https://www.themoviedb.org/tv/{{ $show['tmdb'] }}"
+                                           href="{{ $site['dereferrer_link'] }}https://www.themoviedb.org/tv/{{ $show['tmdb'] }}"
                                            title="View at TMDb">
                                             <i class="fa fa-video mr-2"></i> TMDb
                                         </a>
@@ -213,8 +213,7 @@
                             @foreach($seasons as $seasonNumber => $episodes)
                                 <button type="button"
                                         class="season-tab whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm transition-colors duration-200 {{ $loop->first ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-300 hover:border-gray-300' }}"
-                                        data-season="{{ $seasonNumber }}"
-                                        onclick="switchSeason({{ $seasonNumber }})">
+                                        data-season="{{ $seasonNumber }}">
                                     Season {{ $seasonNumber }}
                                     <span class="ml-2 px-2 py-0.5 rounded-full text-xs {{ $loop->first ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 dark:bg-gray-800 text-gray-600' }}">
                                         {{ count($episodes) }}
@@ -239,7 +238,7 @@
                                                     <div class="flex-1">
                                                         <div class="flex items-center gap-2 flex-wrap">
                                                             <a href="{{ url('/details/' . $release->guid) }}"
-                                                               class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium">
+                                                               class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium break-words break-all">
                                                                 {{ $release->searchname }}
                                                             </a>
                                                             @if(!empty($release->failed) && $release->failed->count() > 0)
@@ -249,20 +248,29 @@
                                                                 </span>
                                                             @endif
                                                         </div>
-                                                        <div class="text-xs text-gray-500 mt-1">
+                                                        <div class="text-xs text-gray-500 mt-1 flex flex-wrap gap-2">
                                                             <span class="mr-3">
                                                                 <i class="fa fa-hdd-o mr-1"></i>{{ formatBytes($release->size) }}
                                                             </span>
                                                             <span>
-                                                                <i class="fa fa-clock-o mr-1"></i>{{ \Carbon\Carbon::parse($release->postdate)->diffForHumans() }}
+                                                                <i class="fa fa-clock-o mr-1"></i>Added: {{ \Carbon\Carbon::parse($release->adddate)->diffForHumans() }}
                                                             </span>
+                                                            @if(!empty($release->postdate))
+                                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                                                    <i class="fas fa-calendar mr-1"></i> Posted: {{ \Carbon\Carbon::parse($release->postdate)->format('M d, Y H:i') }}
+                                                                </span>
+                                                            @endif
+                                                            @if(!empty($release->fromname))
+                                                                <span class="inline-flex items-center px-2 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 font-mono">
+                                                                    <i class="fas fa-user mr-1"></i>{{ $release->fromname }}
+                                                                </span>
+                                                            @endif
                                                         </div>
                                                     </div>
                                                     <div class="flex gap-2">
                                                         <a href="{{ url('/getnzb?id=' . $release->guid) }}"
-                                                           class="px-3 py-1 bg-green-600 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 text-sm"
-                                                           title="Download NZB"
-                                                           onclick="showToast('Downloading NZB...', 'success')">
+                                                           class="download-nzb px-3 py-1 bg-green-600 dark:bg-green-700 text-white rounded hover:bg-green-700 dark:hover:bg-green-800 text-sm"
+                                                           title="Download NZB">
                                                             <i class="fa fa-download"></i>
                                                         </a>
                                                         <a href="{{ url('/details/' . $release->guid) }}"
diff --git a/resources/views/series/viewserieslist.blade.php b/resources/views/series/viewserieslist.blade.php
index ea48bc515..5d8d59d6d 100644
--- a/resources/views/series/viewserieslist.blade.php
+++ b/resources/views/series/viewserieslist.blade.php
@@ -10,7 +10,7 @@
             </h3>
             <nav aria-label="breadcrumb">
                 <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                    <li><a href="{{ url($site->home_link ?? '/') }}" class="hover:text-blue-600">Home</a></li>
+                    <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
                     <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
                     <li class="text-gray-500">TV Series List</li>
                 </ol>
@@ -70,10 +70,10 @@
                             <thead class="bg-gray-50">
                                 <tr>
                                     <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Name</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700" style="width:120px">Network</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700" style="width:120px">Country</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700" style="width:140px">Actions</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700" style="width:200px">External Links</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 w-120">Network</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 w-120">Country</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 w-140">Actions</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 col-width-200">External Links</th>
                                 </tr>
                             </thead>
                             <tbody class="divide-y divide-gray-200">
@@ -140,21 +140,21 @@
                                                     @if(!empty($sData['tvdb']) && $sData['tvdb'] > 0)
                                                         <a class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:bg-gray-700 text-xs"
                                                            title="View at TVDB" target="_blank"
-                                                           href="{{ $site->dereferrer_link }}http://thetvdb.com/?tab=series&id={{ $sData['tvdb'] }}">
+                                                           href="{{ $site['dereferrer_link'] }}http://thetvdb.com/?tab=series&id={{ $sData['tvdb'] }}">
                                                             TVDB
                                                         </a>
                                                     @endif
                                                     @if(!empty($sData['tvmaze']) && $sData['tvmaze'] > 0)
                                                         <a class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:bg-gray-700 text-xs"
                                                            title="View at TVMaze" target="_blank"
-                                                           href="{{ $site->dereferrer_link }}http://tvmaze.com/shows/{{ $sData['tvmaze'] }}">
+                                                           href="{{ $site['dereferrer_link'] }}http://tvmaze.com/shows/{{ $sData['tvmaze'] }}">
                                                             TVMaze
                                                         </a>
                                                     @endif
                                                     @if(!empty($sData['trakt']) && $sData['trakt'] > 0)
                                                         <a class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:bg-gray-700 text-xs"
                                                            title="View at Trakt" target="_blank"
-                                                           href="{{ $site->dereferrer_link }}http://www.trakt.tv/shows/{{ $sData['trakt'] }}">
+                                                           href="{{ $site['dereferrer_link'] }}http://www.trakt.tv/shows/{{ $sData['trakt'] }}">
                                                             Trakt
                                                         </a>
                                                     @endif
diff --git a/resources/views/xxx/index.blade.php b/resources/views/xxx/index.blade.php
index 821b48950..3c9dc9dad 100644
--- a/resources/views/xxx/index.blade.php
+++ b/resources/views/xxx/index.blade.php
@@ -6,7 +6,7 @@
     <div class="px-6 py-4 border-b border-gray-200">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                <li><a href="{{ url($site->home_link ?? '/') }}" class="hover:text-blue-600">Home</a></li>
+                <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
                 <li><i class="fas fa-chevron-right text-xs mx-2"></i></li>
                 <li><a href="{{ url('/browse/XXX') }}" class="hover:text-blue-600">XXX</a></li>
                 @if(!empty($categorytitle) && $categorytitle !== 'All')
@@ -103,7 +103,7 @@
                                 <img src="{{ url('/covers/xxx/' . $result->cover) }}"
                                      alt="{{ $result->title ?? $result->searchname }}"
                                      class="w-full h-48 object-cover"
-                                     onerror="this.src='{{ url('/images/no-cover.png') }}'">
+                                     data-fallback-src="{{ url('/images/no-cover.png') }}">
                             @else
                                 <div class="w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                     <i class="fa fa-film text-4xl text-gray-400"></i>
@@ -117,7 +117,7 @@
                                 </div>
                             @endif
                             <div class="p-3">
-                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 line-clamp-2 mb-1" title="{{ $result->title ?? $result->searchname }}">
+                                <h3 class="font-semibold text-sm text-gray-800 dark:text-gray-200 line-clamp-2 mb-1 break-words break-all" title="{{ $result->title ?? $result->searchname }}">
                                     {{ $result->title ?? $result->searchname }}
                                 </h3>
                                 @if(!empty($result->releasedate))