From 4a34b5cbb570f50795dfde50f849734163f2aa21 Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Wed, 4 Mar 2026 11:22:51 +0100
Subject: [PATCH] Unifiy and cleanup templates

---
 resources/css/csp-safe.css                    | 121 ++++++--
 .../views/admin/categories/index.blade.php    |   6 +-
 .../views/admin/comments/index.blade.php      |   8 +-
 resources/views/admin/groups/index.blade.php  |   2 +-
 .../views/admin/invitations/show.blade.php    |   4 +-
 .../promotions/show-statistics.blade.php      |   2 +-
 .../admin/promotions/statistics.blade.php     |   2 +-
 .../admin/release-reports/index.blade.php     |   4 +-
 resources/views/admin/roles/index.blade.php   |   2 +-
 resources/views/api/apidesc.blade.php         |   4 +-
 resources/views/api/apiv2desc.blade.php       |   4 +-
 resources/views/auth/2fa.blade.php            | 241 ++++++++-------
 resources/views/auth/2fa_verify.blade.php     |   2 +-
 resources/views/auth/google2fa.blade.php      | 112 ++++---
 .../views/auth/passwords/confirm.blade.php    | 107 ++++---
 resources/views/auth/verify.blade.php         |  64 ++--
 resources/views/cart/index.blade.php          |  43 ++-
 .../views/components/sort-dropdown.blade.php  |   4 +-
 resources/views/invitations/index.blade.php   | 177 +++++------
 resources/views/layouts/admin.blade.php       |   4 +-
 resources/views/layouts/app.blade.php         |  84 ------
 resources/views/layouts/main.blade.php        |   4 +-
 resources/views/movies/index.blade.php        |   4 +-
 resources/views/mymovies/add.blade.php        | 274 ++++++++++--------
 resources/views/mymovies/index.blade.php      |   4 +-
 resources/views/myshows/index.blade.php       |   4 +-
 resources/views/partials/admin-menu.blade.php |  56 ++--
 .../partials/confirmation-modal.blade.php     |   4 +-
 .../views/partials/header-menu.blade.php      |   4 +-
 .../views/partials/image-modal.blade.php      |   4 +-
 .../views/partials/preview-modal.blade.php    |  10 +-
 resources/views/partials/sidebar.blade.php    | 101 -------
 .../partials/toast-notifications.blade.php    |   6 +-
 resources/views/privacy-policy.blade.php      |   2 +-
 resources/views/profile/edit.blade.php        |   4 +-
 .../views/series/viewserieslist.blade.php     | 121 +++++---
 resources/views/terms.blade.php               |   2 +-
 37 files changed, 869 insertions(+), 732 deletions(-)
 delete mode 100644 resources/views/layouts/app.blade.php

diff --git a/resources/css/csp-safe.css b/resources/css/csp-safe.css
index 3e1d35070..b41accb76 100644
--- a/resources/css/csp-safe.css
+++ b/resources/css/csp-safe.css
@@ -146,6 +146,7 @@ code.api-token::-webkit-scrollbar-thumb {
 code.api-token::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 255, 0, 0.5);
 }
+
 /* Profile Page Styles */
 
 /* Tab content visibility */
@@ -153,35 +154,6 @@ code.api-token::-webkit-scrollbar-thumb:hover {
     display: none;
 }
 
-/* Progress bar animations */
-.progress-bar {
-    transition: width 0.3s ease-in-out;
-}
-
-/* Custom scrollbar for API token code blocks */
-code.api-token {
-    overflow-x: auto;
-    word-break: break-all;
-}
-
-code.api-token::-webkit-scrollbar {
-    height: 6px;
-}
-
-code.api-token::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-}
-
-code.api-token::-webkit-scrollbar-thumb {
-    background: rgba(0, 255, 0, 0.3);
-    border-radius: 3px;
-}
-
-code.api-token::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 255, 0, 0.5);
-}
-
 /* Toast Notifications */
 #toast-container {
     position: fixed;
@@ -884,3 +856,94 @@ code.api-token::-webkit-scrollbar-thumb:hover {
     margin-top: 0.5rem;
 }
 
+/* Sidebar - Useful Links Content Styling */
+.useful-link-content {
+    max-width: 100%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+
+.useful-link-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.375rem;
+    margin: 0.5rem 0;
+    display: block;
+}
+
+.useful-link-content p {
+    margin-bottom: 0.5rem;
+    line-height: 1.5;
+}
+
+.useful-link-content p:last-child {
+    margin-bottom: 0;
+}
+
+.useful-link-content a {
+    color: #60a5fa;
+    text-decoration: underline;
+}
+
+.useful-link-content a:hover {
+    color: #93c5fd;
+}
+
+.useful-link-content ul,
+.useful-link-content ol {
+    margin: 0.5rem 0;
+    padding-left: 1.5rem;
+}
+
+.useful-link-content li {
+    margin-bottom: 0.25rem;
+}
+
+.useful-link-content h1,
+.useful-link-content h2,
+.useful-link-content h3,
+.useful-link-content h4,
+.useful-link-content h5,
+.useful-link-content h6 {
+    font-weight: 600;
+    margin-top: 0.75rem;
+    margin-bottom: 0.5rem;
+    color: #e5e7eb;
+}
+
+.useful-link-content h1 { font-size: 1.25rem; }
+.useful-link-content h2 { font-size: 1.125rem; }
+.useful-link-content h3 { font-size: 1rem; }
+.useful-link-content h4,
+.useful-link-content h5,
+.useful-link-content h6 { font-size: 0.875rem; }
+
+.useful-link-content blockquote {
+    border-left: 3px solid #4b5563;
+    padding-left: 1rem;
+    margin: 0.5rem 0;
+    font-style: italic;
+    color: #9ca3af;
+}
+
+.useful-link-content code {
+    background-color: #374151;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-size: 0.875em;
+    font-family: monospace;
+}
+
+.useful-link-content pre {
+    background-color: #1f2937;
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
+}
+
+.useful-link-content pre code {
+    background-color: transparent;
+    padding: 0;
+}
+
diff --git a/resources/views/admin/categories/index.blade.php b/resources/views/admin/categories/index.blade.php
index 473a5fcc1..6a68b3e24 100644
--- a/resources/views/admin/categories/index.blade.php
+++ b/resources/views/admin/categories/index.blade.php
@@ -165,7 +165,7 @@
         <div class="mt-3">
             <div class="flex items-center justify-between mb-4">
                 <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Confirm Delete</h3>
-                <button type="button" x-on:click="close()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
+                <button type="button" @click="close()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                     <i class="fa fa-times"></i>
                 </button>
             </div>
@@ -178,10 +178,10 @@
                 </p>
             </div>
             <div class="flex gap-3 px-4 py-3">
-                <button type="button" x-on:click="close()" class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
+                <button type="button" @click="close()" class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                     Cancel
                 </button>
-                <a x-bind:href="deleteUrl()" class="flex-1 px-4 py-2 bg-red-600 dark:bg-red-700 text-white text-center rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition">
+                <a :href="deleteUrl()" class="flex-1 px-4 py-2 bg-red-600 dark:bg-red-700 text-white text-center rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition">
                     Delete
                 </a>
             </div>
diff --git a/resources/views/admin/comments/index.blade.php b/resources/views/admin/comments/index.blade.php
index 9d2f1124c..a4502becb 100644
--- a/resources/views/admin/comments/index.blade.php
+++ b/resources/views/admin/comments/index.blade.php
@@ -9,7 +9,7 @@
                 <i class="fas fa-check-circle text-green-600 dark:text-green-400 mr-3 text-xl"></i>
                 <p class="text-sm text-green-800 dark:text-green-200 font-medium">{{ session('success') }}</p>
             </div>
-            <button x-on:click="dismiss()" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">
+            <button @click="dismiss()" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">
                 <i class="fas fa-times"></i>
             </button>
         </div>
@@ -21,7 +21,7 @@
                 <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 text-xl"></i>
                 <p class="text-sm text-red-800 dark:text-red-200 font-medium">{{ session('error') }}</p>
             </div>
-            <button x-on:click="dismiss()" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200">
+            <button @click="dismiss()" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200">
                 <i class="fas fa-times"></i>
             </button>
         </div>
@@ -160,7 +160,7 @@
                     <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 mr-2"></i>
                     Confirm Deletion
                 </h3>
-                <button type="button" x-on:click="close()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                <button type="button" @click="close()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                     <i class="fas fa-times text-xl"></i>
                 </button>
             </div>
@@ -174,7 +174,7 @@
         </div>
         <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
             <button type="button"
-                    x-on:click="close()"
+                    @click="close()"
                     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 transition font-medium">
                 <i class="fas fa-times mr-2"></i>Cancel
             </button>
diff --git a/resources/views/admin/groups/index.blade.php b/resources/views/admin/groups/index.blade.php
index dfe380de2..ec63af4dc 100644
--- a/resources/views/admin/groups/index.blade.php
+++ b/resources/views/admin/groups/index.blade.php
@@ -363,7 +363,7 @@
                 This will reset the article pointers for the selected groups back to their current state.
             </p>
             <div class="max-h-32 overflow-y-auto mb-4 text-xs text-gray-500 dark:text-gray-400">
-                <template x-for="name in selectedGroupNames" x-bind:key="name">
+                <template x-for="name in selectedGroupNames" :key="name">
                     <div x-text="name"></div>
                 </template>
             </div>
diff --git a/resources/views/admin/invitations/show.blade.php b/resources/views/admin/invitations/show.blade.php
index 744c3d5da..a8509172f 100644
--- a/resources/views/admin/invitations/show.blade.php
+++ b/resources/views/admin/invitations/show.blade.php
@@ -21,7 +21,7 @@
                               x-data="confirmForm"
                               data-message="Are you sure you want to cancel this invitation?">
                             @csrf
-                            <button type="button" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700" x-on:click="submit()">
+                            <button type="button" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700" @click="submit()">
                                 <i class="fas fa-ban mr-2"></i>Cancel
                             </button>
                         </form>
@@ -183,7 +183,7 @@
                                     <div class="bg-gray-100 dark:bg-gray-800 p-2 rounded break-all font-mono text-xs">
                                         {{ url('register?invitation=' . $invitation->token) }}
                                     </div>
-                                    <button x-data="copyToClipboard()" x-on:click="copy('invitation-link-{{ $invitation->id }}')" class="mt-2 px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700">
+                                    <button x-data="copyToClipboard()" @click="copy('invitation-link-{{ $invitation->id }}')" class="mt-2 px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700">
                                         <i class="fas fa-copy mr-1"></i><span x-text="copied ? 'Copied!' : 'Copy Link'"></span>
                                     </button>
                                     <input type="hidden" id="invitation-link-{{ $invitation->id }}" value="{{ url('register?invitation=' . $invitation->token) }}" />
diff --git a/resources/views/admin/promotions/show-statistics.blade.php b/resources/views/admin/promotions/show-statistics.blade.php
index 4fdb37c59..d6c6f1a08 100644
--- a/resources/views/admin/promotions/show-statistics.blade.php
+++ b/resources/views/admin/promotions/show-statistics.blade.php
@@ -63,7 +63,7 @@
         <form method="GET" action="{{ route('admin.promotions.show-statistics', $promotion->id) }}" class="flex flex-wrap gap-4 items-end" x-data="periodFilter({{ $selectedPeriod === 'custom' ? 'true' : 'false' }})" x-ref="periodForm">
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Time Period</label>
-                <select name="period" class="form-select rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" x-on:change="onPeriodChange()">
+                <select name="period" class="form-select rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" @change="onPeriodChange()">
                     <option value="7days" {{ $selectedPeriod === '7days' ? 'selected' : '' }}>Last 7 Days</option>
                     <option value="30days" {{ $selectedPeriod === '30days' ? 'selected' : '' }}>Last 30 Days</option>
                     <option value="90days" {{ $selectedPeriod === '90days' ? 'selected' : '' }}>Last 90 Days</option>
diff --git a/resources/views/admin/promotions/statistics.blade.php b/resources/views/admin/promotions/statistics.blade.php
index a7afab1a0..f9e0bee31 100644
--- a/resources/views/admin/promotions/statistics.blade.php
+++ b/resources/views/admin/promotions/statistics.blade.php
@@ -22,7 +22,7 @@
         <form method="GET" action="{{ route('admin.promotions.statistics') }}" class="flex flex-wrap gap-4 items-end" x-data="periodFilter({{ $selectedPeriod === 'custom' ? 'true' : 'false' }})" x-ref="periodForm">
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Quick Select</label>
-                <select name="period" class="form-select rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" x-on:change="onPeriodChange()">
+                <select name="period" class="form-select rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" @change="onPeriodChange()">
                     <option value="7days" {{ $selectedPeriod === '7days' ? 'selected' : '' }}>Last 7 Days</option>
                     <option value="30days" {{ $selectedPeriod === '30days' ? 'selected' : '' }}>Last 30 Days</option>
                     <option value="90days" {{ $selectedPeriod === '90days' ? 'selected' : '' }}>Last 90 Days</option>
diff --git a/resources/views/admin/release-reports/index.blade.php b/resources/views/admin/release-reports/index.blade.php
index 87591cd68..b54033c4f 100644
--- a/resources/views/admin/release-reports/index.blade.php
+++ b/resources/views/admin/release-reports/index.blade.php
@@ -9,7 +9,7 @@
                 <i class="fas fa-check-circle text-green-600 dark:text-green-400 mr-3 text-xl"></i>
                 <p class="text-sm text-green-800 dark:text-green-200 font-medium">{{ session('success') }}</p>
             </div>
-            <button x-on:click="dismiss()" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">
+            <button @click="dismiss()" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">
                 <i class="fas fa-times"></i>
             </button>
         </div>
@@ -21,7 +21,7 @@
                 <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3 text-xl"></i>
                 <p class="text-sm text-red-800 dark:text-red-200 font-medium">{{ session('error') }}</p>
             </div>
-            <button x-on:click="dismiss()" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200">
+            <button @click="dismiss()" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200">
                 <i class="fas fa-times"></i>
             </button>
         </div>
diff --git a/resources/views/admin/roles/index.blade.php b/resources/views/admin/roles/index.blade.php
index 76ce04875..e004de558 100644
--- a/resources/views/admin/roles/index.blade.php
+++ b/resources/views/admin/roles/index.blade.php
@@ -66,7 +66,7 @@
                                            x-data="confirmLink"
                                            data-url="{{ url('admin/role-delete?id=' . $role->id) }}"
                                            data-message="Are you sure you want to delete role '{{ $role->name }}'?"
-                                           x-on:click.prevent="navigate()">
+                                           @click.prevent="navigate()">
                                             <i class="fa fa-trash"></i>
                                         </a>
                                     </div>
diff --git a/resources/views/api/apidesc.blade.php b/resources/views/api/apidesc.blade.php
index 5d1cf5146..45297869f 100644
--- a/resources/views/api/apidesc.blade.php
+++ b/resources/views/api/apidesc.blade.php
@@ -18,8 +18,8 @@
                 </h4>
                 <div class="flex rounded-md shadow-sm" x-data="copyToClipboard()">
                     <input type="text" class="flex-1 rounded-l-md border-gray-300 dark:border-gray-600 font-mono text-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white" value="apikey={{ auth()->user()->api_token }}" readonly id="apikeyInput">
-                    <button class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-500" type="button" x-on:click="copy('apikeyInput')" title="Copy to clipboard" x-bind:class="copied ? 'text-green-600' : ''">
-                        <i class="fa" x-bind:class="copied ? 'fa-check' : 'fa-copy'"></i>
+                    <button class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-500" type="button" @click="copy('apikeyInput')" title="Copy to clipboard" :class="copied ? 'text-green-600' : ''">
+                        <i class="fa" :class="copied ? 'fa-check' : 'fa-copy'"></i>
                     </button>
                 </div>
             </div>
diff --git a/resources/views/api/apiv2desc.blade.php b/resources/views/api/apiv2desc.blade.php
index 4aea2190f..9e53961c8 100644
--- a/resources/views/api/apiv2desc.blade.php
+++ b/resources/views/api/apiv2desc.blade.php
@@ -19,8 +19,8 @@
                 </h4>
                 <div class="flex rounded-md shadow-sm" x-data="copyToClipboard()">
                     <input type="text" class="flex-1 rounded-l-md border-gray-300 dark:border-gray-600 font-mono text-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white" value="api_token={{ auth()->user()->api_token }}" readonly id="apikeyInput">
-                    <button class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-500" type="button" x-on:click="copy('apikeyInput')" title="Copy to clipboard" x-bind:class="copied ? 'text-green-600' : ''">
-                        <i class="fa" x-bind:class="copied ? 'fa-check' : 'fa-copy'"></i>
+                    <button class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-500" type="button" @click="copy('apikeyInput')" title="Copy to clipboard" :class="copied ? 'text-green-600' : ''">
+                        <i class="fa" :class="copied ? 'fa-check' : 'fa-copy'"></i>
                     </button>
                 </div>
             </div>
diff --git a/resources/views/auth/2fa.blade.php b/resources/views/auth/2fa.blade.php
index c9c59a332..38a83c7ff 100644
--- a/resources/views/auth/2fa.blade.php
+++ b/resources/views/auth/2fa.blade.php
@@ -1,105 +1,150 @@
-@extends('layouts.app')
+@extends('layouts.guest')
 
 @section('content')
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading"><strong>Two Factor Authentication</strong></div>
-                    <div class="panel-body">
-                        <p>Two factor authentication (2FA) strengthens access security by requiring two methods (also referred to as factors) to verify your identity. Two factor authentication protects against phishing, social engineering and password brute force attacks and secures your logins from attackers exploiting weak or stolen credentials.</p>
-                        <br/>
-                        <p>To Enable Two Factor Authentication on your Account, you need to do following steps</p>
-                        <strong>
-                            <ol>
-                                <li>Click on Generate Secret Button , To Generate a Unique secret QR code for your profile</li>
-                                <li>Verify the OTP from Google Authenticator Mobile App</li>
-                            </ol>
-                        </strong>
-                        <br/>
-
-                        @if (session('error'))
-                            <div class="alert alert-danger">
-                                {{ session('error') }}
-                            </div>
-                        @endif
-                        @if (session('success'))
-                            <div class="alert alert-success">
-                                {{ session('success') }}
-                            </div>
-                        @endif
-
-
-                        @if(!($data['user']->passwordSecurity))
-                            <form class="form-horizontal" method="POST" action="{{ route('generate2faSecret') }}">
-                                @csrf
-                                <div class="form-group">
-                                    <div class="col-md-6 col-md-offset-4">
-                                        <button type="submit" class="btn btn-primary">
-                                            Generate Secret Key to Enable 2FA
-                                        </button>
-                                    </div>
-                                </div>
-                            </form>
-                        @elseif(!$data['user']->passwordSecurity->google2fa_enable)
-                            <strong>1. Scan this barcode with your Google Authenticator App:</strong><br/>
-                            {!! $data['google2fa_url'] !!}
-                            <br/><br/>
-                            <strong>2.Enter the pin the code to Enable 2FA</strong><br/><br/>
-                            <form class="form-horizontal" method="POST" action="{{ route('enable2fa') }}">
-                                @csrf
-
-                                <div class="form-group{{ $errors->has('verify-code') ? ' has-error' : '' }}">
-                                    <label for="verify-code" class="col-md-4 control-label">Authenticator Code</label>
-
-                                    <div class="col-md-6">
-                                        <input id="verify-code" type="password" class="form-control" name="verify-code" required>
-
-                                        @if ($errors->has('verify-code'))
-                                            <span class="help-block">
-                                        <strong>{{ $errors->first('verify-code') }}</strong>
-                                    </span>
-                                        @endif
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <div class="col-md-6 col-md-offset-4">
-                                        <button type="submit" class="btn btn-primary">
-                                            Enable 2FA
-                                        </button>
-                                    </div>
-                                </div>
-                            </form>
-                        @elseif($data['user']->passwordSecurity->google2fa_enable)
-                            <div class="alert alert-success">
-                                2FA is Currently <strong>Enabled</strong> for your account.
-                            </div>
-                            <p>If you are looking to disable Two Factor Authentication. Please confirm your password and Click Disable 2FA Button.</p>
-                            <form class="form-horizontal" method="POST" action="{{ route('disable2fa') }}">
-                                <div class="form-group{{ $errors->has('current-password') ? ' has-error' : '' }}">
-                                    <label for="change-password" class="col-md-4 control-label">Current Password</label>
-
-                                    <div class="col-md-6">
-                                        <input id="current-password" type="password" class="form-control" name="current-password" required>
-
-                                        @if ($errors->has('current-password'))
-                                            <span class="help-block">
-                                        <strong>{{ $errors->first('current-password') }}</strong>
-                                    </span>
-                                        @endif
-                                    </div>
-                                </div>
-                                <div class="col-md-6 col-md-offset-5">
-
-                                    @csrf
-                                    <button type="submit" class="btn btn-primary ">Disable 2FA</button>
-                                </div>
-                            </form>
-                            @endif
-                            </form>
-                    </div>
+<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-lg w-full space-y-8">
+        <div class="text-center">
+            <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
+                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
+                    <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">
+                Strengthens access security by requiring two methods to verify your identity.
+            </p>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            <div class="px-8 py-6">
+                <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
+                    <p class="text-sm text-blue-800 dark:text-blue-200">
+                        Two factor authentication protects against phishing, social engineering and password brute force attacks by requiring a second verification step.
+                    </p>
+                </div>
+
+                @if (session('error'))
+                    <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-center">
+                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3"></i>
+                            <span class="text-red-800 dark:text-red-200">{{ session('error') }}</span>
+                        </div>
+                    </div>
+                @endif
+                @if (session('success'))
+                    <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 dark:text-green-400 mr-3"></i>
+                            <span class="text-green-800 dark:text-green-200">{{ session('success') }}</span>
+                        </div>
+                    </div>
+                @endif
+
+                @if(!($data['user']->passwordSecurity))
+                    <div class="space-y-4">
+                        <p class="text-gray-700 dark:text-gray-300 font-medium">To enable 2FA on your account:</p>
+                        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                            <li>Click the button below to generate a unique secret QR code</li>
+                            <li>Verify the OTP from your Google Authenticator app</li>
+                        </ol>
+                        <form method="POST" action="{{ route('generate2faSecret') }}">
+                            @csrf
+                            <button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition">
+                                <i class="fas fa-key mr-2"></i>
+                                Generate Secret Key to Enable 2FA
+                            </button>
+                        </form>
+                    </div>
+                @elseif(!$data['user']->passwordSecurity->google2fa_enable)
+                    <div class="space-y-6">
+                        <div>
+                            <p class="text-gray-700 dark:text-gray-300 font-medium mb-3">
+                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 text-xs font-bold mr-2">1</span>
+                                Scan this barcode with your Google Authenticator App:
+                            </p>
+                            <div class="flex justify-center p-4 bg-white rounded-lg border border-gray-200 dark:border-gray-600">
+                                {!! $data['google2fa_url'] !!}
+                            </div>
+                        </div>
+
+                        <div>
+                            <p class="text-gray-700 dark:text-gray-300 font-medium mb-3">
+                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 text-xs font-bold mr-2">2</span>
+                                Enter the pin code to enable 2FA:
+                            </p>
+                            <form method="POST" action="{{ route('enable2fa') }}" class="space-y-4">
+                                @csrf
+                                <div>
+                                    <label for="verify-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                        Authenticator Code
+                                    </label>
+                                    <div class="relative">
+                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                            <i class="fas fa-key text-gray-400"></i>
+                                        </div>
+                                        <input id="verify-code" type="password" name="verify-code" required
+                                               class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('verify-code') border-red-500 @enderror"
+                                               placeholder="Enter 6-digit code">
+                                    </div>
+                                    @error('verify-code')
+                                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                                    @enderror
+                                </div>
+                                <button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition">
+                                    <i class="fas fa-check mr-2"></i>
+                                    Enable 2FA
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                @elseif($data['user']->passwordSecurity->google2fa_enable)
+                    <div class="space-y-6">
+                        <div class="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 dark:text-green-400 mr-3 text-xl"></i>
+                                <span class="text-green-800 dark:text-green-200 font-medium">2FA is currently enabled for your account.</span>
+                            </div>
+                        </div>
+
+                        <p class="text-gray-700 dark:text-gray-300 text-sm">
+                            To disable Two Factor Authentication, confirm your password and click the button below.
+                        </p>
+
+                        <form method="POST" action="{{ route('disable2fa') }}" class="space-y-4">
+                            @csrf
+                            <div>
+                                <label for="current-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                    Current Password
+                                </label>
+                                <div class="relative">
+                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <i class="fas fa-lock text-gray-400"></i>
+                                    </div>
+                                    <input id="current-password" type="password" name="current-password" required
+                                           class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('current-password') border-red-500 @enderror"
+                                           placeholder="Enter your current password">
+                                </div>
+                                @error('current-password')
+                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                                @enderror
+                            </div>
+                            <button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition">
+                                <i class="fas fa-times mr-2"></i>
+                                Disable 2FA
+                            </button>
+                        </form>
+                    </div>
+                @endif
+            </div>
+
+            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+                <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
+                    <i class="fas fa-home mr-1"></i> Back to home
+                </a>
             </div>
         </div>
     </div>
+</div>
 @endsection
diff --git a/resources/views/auth/2fa_verify.blade.php b/resources/views/auth/2fa_verify.blade.php
index 3c44241a8..668ad687a 100644
--- a/resources/views/auth/2fa_verify.blade.php
+++ b/resources/views/auth/2fa_verify.blade.php
@@ -73,7 +73,7 @@
                         <input
                             x-data="otpInput"
                             x-model="value"
-                            x-on:input="onInput()"
+                            @input="onInput()"
                             type="text"
                             name="one_time_password"
                             id="one_time_password"
diff --git a/resources/views/auth/google2fa.blade.php b/resources/views/auth/google2fa.blade.php
index e4fd5e918..05806f651 100644
--- a/resources/views/auth/google2fa.blade.php
+++ b/resources/views/auth/google2fa.blade.php
@@ -1,44 +1,82 @@
-@extends('layouts.app')
+@extends('layouts.guest')
 
 @section('content')
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading">Two Factor Authentication</div>
-                    <div class="panel-body">
-                        <p>Two factor authentication (2FA) strengthens access security by requiring two methods (also referred to as factors) to verify your identity. Two factor authentication protects against phishing, social engineering and password brute force attacks and secures your logins from attackers exploiting weak or stolen credentials.</p>
-
-                        @if (session('error'))
-                            <div class="alert alert-danger">
-                                {{ session('error') }}
-                            </div>
-                        @endif
-                        @if (session('success'))
-                            <div class="alert alert-success">
-                                {{ session('success') }}
-                            </div>
-                        @endif
-
-                        <strong>Enter the pin from Google Authenticator Enable 2FA</strong><br/><br/>
-                        <form class="form-horizontal" action="{{ route('2faVerify') }}" method="POST">
-                            @csrf
-                            <div class="form-group{{ $errors->has('one_time_password-code') ? ' has-error' : '' }}">
-                                <label for="one_time_password" class="col-md-4 control-label">One Time Password</label>
-                                <div class="col-md-6">
-                                    <input name="one_time_password" class="form-control"  type="text"/>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <div class="col-md-6 col-md-offset-4">
-                                    <button class="btn btn-primary" type="submit">Authenticate</button>
-                                </div>
-                            </div>
-                        </form>
-
-                    </div>
+<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">
+        <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 pin from your Google Authenticator app
+            </p>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            <div class="px-8 py-6">
+                @if (session('error'))
+                    <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-center">
+                            <i class="fas fa-exclamation-circle text-red-600 dark:text-red-400 mr-3"></i>
+                            <span class="text-red-800 dark:text-red-200">{{ session('error') }}</span>
+                        </div>
+                    </div>
+                @endif
+                @if (session('success'))
+                    <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 dark:text-green-400 mr-3"></i>
+                            <span class="text-green-800 dark:text-green-200">{{ session('success') }}</span>
+                        </div>
+                    </div>
+                @endif
+
+                <form action="{{ route('2faVerify') }}" method="POST" class="space-y-6">
+                    @csrf
+                    <div>
+                        <label for="one_time_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            One Time Password
+                        </label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <i class="fas fa-key text-gray-400"></i>
+                            </div>
+                            <input
+                                id="one_time_password"
+                                name="one_time_password"
+                                type="text"
+                                required
+                                autofocus
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('one_time_password') border-red-500 @enderror"
+                                placeholder="Enter 6-digit code"
+                            >
+                        </div>
+                        @error('one_time_password')
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <button
+                        type="submit"
+                        class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
+                    >
+                        <i class="fas fa-sign-in-alt mr-2"></i>
+                        Authenticate
+                    </button>
+                </form>
+            </div>
+
+            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+                <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
+                    <i class="fas fa-home mr-1"></i> Back to home
+                </a>
             </div>
         </div>
     </div>
+</div>
 @endsection
diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php
index ca78fc1d3..7eaa8a78d 100644
--- a/resources/views/auth/passwords/confirm.blade.php
+++ b/resources/views/auth/passwords/confirm.blade.php
@@ -1,47 +1,72 @@
-@extends('layouts.app')
+@extends('layouts.guest')
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Confirm Password') }}</div>
-
-                <div class="card-body">
-                    {{ __('Please confirm your password before continuing.') }}
-
-                    <form method="POST" action="{{ route('password.confirm') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-8 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Confirm Password') }}
-                                </button>
-
-                                @if (Route::has('password.request'))
-                                    <a class="btn btn-link" href="{{ route('password.request') }}">
-                                        {{ __('Forgot Your Password?') }}
-                                    </a>
-                                @endif
-                            </div>
-                        </div>
-                    </form>
+<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">
+        <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-lock text-3xl text-white"></i>
                 </div>
+            </a>
+            <h2 class="mt-4 text-3xl font-extrabold text-gray-900 dark:text-white">
+                {{ __('Confirm Password') }}
+            </h2>
+            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
+                {{ __('Please confirm your password before continuing.') }}
+            </p>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            <div class="px-8 py-6">
+                <form method="POST" action="{{ route('password.confirm') }}" class="space-y-6">
+                    @csrf
+
+                    <div>
+                        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            {{ __('Password') }}
+                        </label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <i class="fas fa-lock text-gray-400"></i>
+                            </div>
+                            <input
+                                id="password"
+                                type="password"
+                                name="password"
+                                required
+                                autocomplete="current-password"
+                                class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition @error('password') border-red-500 @enderror"
+                                placeholder="Enter your password"
+                            >
+                        </div>
+                        @error('password')
+                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="flex items-center justify-between">
+                        <button
+                            type="submit"
+                            class="flex justify-center items-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"
+                        >
+                            <i class="fas fa-check mr-2"></i>
+                            {{ __('Confirm Password') }}
+                        </button>
+
+                        @if (Route::has('password.request'))
+                            <a class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 transition" href="{{ route('password.request') }}">
+                                {{ __('Forgot Your Password?') }}
+                            </a>
+                        @endif
+                    </div>
+                </form>
+            </div>
+
+            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+                <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
+                    <i class="fas fa-home mr-1"></i> Back to home
+                </a>
             </div>
         </div>
     </div>
diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php
index 9f8c1bc0f..b6cd67147 100644
--- a/resources/views/auth/verify.blade.php
+++ b/resources/views/auth/verify.blade.php
@@ -1,26 +1,50 @@
-@extends('layouts.app')
+@extends('layouts.guest')
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Verify Your Email Address') }}</div>
-
-                <div class="card-body">
-                    @if (session('resent'))
-                        <div class="alert alert-success" role="alert">
-                            {{ __('A fresh verification link has been sent to your email address.') }}
-                        </div>
-                    @endif
-
-                    {{ __('Before proceeding, please check your email for a verification link.') }}
-                    {{ __('If you did not receive the email') }},
-                    <form class="d-inline" method="POST" action="{{ route('verification.resend') }}">
-                        @csrf
-                        <button type="submit" class="btn btn-link p-0 m-0 align-baseline">{{ __('click here to request another') }}</button>.
-                    </form>
+<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">
+        <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-envelope-open-text text-3xl text-white"></i>
                 </div>
+            </a>
+            <h2 class="mt-4 text-3xl font-extrabold text-gray-900 dark:text-white">
+                {{ __('Verify Your Email Address') }}
+            </h2>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+            <div class="px-8 py-6">
+                @if (session('resent'))
+                    <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 dark:text-green-400 mr-3"></i>
+                            <span class="text-green-800 dark:text-green-200">
+                                {{ __('A fresh verification link has been sent to your email address.') }}
+                            </span>
+                        </div>
+                    </div>
+                @endif
+
+                <p class="text-gray-700 dark:text-gray-300 mb-4">
+                    {{ __('Before proceeding, please check your email for a verification link.') }}
+                </p>
+                <p class="text-gray-700 dark:text-gray-300">
+                    {{ __('If you did not receive the email') }},
+                    <form class="inline" method="POST" action="{{ route('verification.resend') }}">
+                        @csrf
+                        <button type="submit" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
+                            {{ __('click here to request another') }}
+                        </button>.
+                    </form>
+                </p>
+            </div>
+
+            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+                <a href="{{ url('/') }}" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition">
+                    <i class="fas fa-home mr-1"></i> Back to home
+                </a>
             </div>
         </div>
     </div>
diff --git a/resources/views/cart/index.blade.php b/resources/views/cart/index.blade.php
index 57d32f6ae..541487f6a 100644
--- a/resources/views/cart/index.blade.php
+++ b/resources/views/cart/index.blade.php
@@ -47,11 +47,12 @@
                     </div>
                 </div>
 
-                <div class="overflow-x-auto">
+                <!-- Desktop Table -->
+                <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-50 dark:bg-gray-700">
                             <tr>
-                                <th class="px-4 py-3 text-left" style="width: 30px">
+                                <th class="px-4 py-3 text-left w-8">
                                     <label class="inline-flex items-center cursor-pointer">
                                         <input id="check-all" type="checkbox" class="form-checkbox h-4 w-4 text-primary-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-primary-500 dark:focus:ring-primary-600 focus:ring-2" x-model="allChecked" @change="toggleAll()">
                                     </label>
@@ -112,6 +113,44 @@
                     </table>
                 </div>
 
+                <!-- Mobile Cards -->
+                <div class="md:hidden divide-y divide-gray-200 dark:divide-gray-700">
+                    @foreach($results as $result)
+                        @continue(!$result->release)
+                        <div id="m-guid{{ $result->release->guid }}" class="p-4 space-y-3">
+                            <div class="flex items-start gap-3">
+                                <input type="checkbox"
+                                       name="table_records"
+                                       class="cart-checkbox form-checkbox h-4 w-4 mt-1 text-primary-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-primary-500 dark:focus:ring-primary-600 focus:ring-2 cursor-pointer shrink-0"
+                                       value="{{ $result->release->guid }}"
+                                       @change="onCheckboxChange()">
+                                <a href="{{ url('/details/' . $result->release->guid) }}"
+                                   class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-semibold text-sm break-all flex-1">
+                                    {{ $result->release->searchname }}
+                                </a>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-xs text-gray-500 dark:text-gray-400">
+                                    <i class="fa fa-clock-o mr-1"></i>{{ \Carbon\Carbon::parse($result->created_at)->diffForHumans() }}
+                                </span>
+                                <div class="flex gap-2">
+                                    <a href="{{ url('/getnzb?id=' . $result->release->guid) }}" class="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded text-sm" title="Download NZB">
+                                        <i class="fa fa-cloud-download"></i>
+                                    </a>
+                                    <a href="{{ url('/details/' . $result->release->guid) }}" class="px-2 py-1 bg-primary-600 dark:bg-primary-700 text-white rounded text-sm" title="View details">
+                                        <i class="fa fa-info-circle"></i>
+                                    </a>
+                                    <button type="button" class="cart-delete-link px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded text-sm" title="Delete"
+                                            data-delete-url="{{ url('/cart/delete/' . $result->release->guid) }}"
+                                            data-release-name="{{ Str::limit($result->release->searchname, 50) }}">
+                                        <i class="fa fa-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+
                 <div class="px-4 py-3 surface-panel-alt border-t flex justify-between items-center">
                     <span class="text-gray-600 dark:text-gray-400">Found {{ count($results) }} items in your basket</span>
                     <div class="flex items-center gap-2">
diff --git a/resources/views/components/sort-dropdown.blade.php b/resources/views/components/sort-dropdown.blade.php
index b000f438f..b76763d36 100644
--- a/resources/views/components/sort-dropdown.blade.php
+++ b/resources/views/components/sort-dropdown.blade.php
@@ -1,12 +1,12 @@
 <div class="relative inline-block" x-data="sortDropdown" @click.outside="close()">
     <button
         type="button"
-        x-on:click="toggle"
+        @click="toggle"
         class="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition shadow-sm"
     >
         <i class="fas {{ $currentIcon }} text-gray-500 dark:text-gray-300"></i>
         <span>Sort: {{ $currentLabel }}</span>
-        <i class="fas fa-chevron-down text-xs text-gray-400 dark:text-gray-300 transition-transform" x-bind:class="chevronClass()"></i>
+        <i class="fas fa-chevron-down text-xs text-gray-400 dark:text-gray-300 transition-transform" :class="chevronClass()"></i>
     </button>
 
     <div x-show="open"
diff --git a/resources/views/invitations/index.blade.php b/resources/views/invitations/index.blade.php
index 5548d868b..057ee2cc6 100644
--- a/resources/views/invitations/index.blade.php
+++ b/resources/views/invitations/index.blade.php
@@ -102,119 +102,75 @@
                 </nav>
             </div>
 
-            <!-- Invitations Table -->
+            <!-- Invitations Table / Cards -->
             @forelse($invitations as $invitation)
                 @if($loop->first)
-                <div class="overflow-x-auto">
+                <!-- Desktop Table -->
+                <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-50 dark:bg-gray-900 dark:bg-gray-700">
+                        <thead class="bg-gray-50 dark:bg-gray-900">
                             <tr>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">
-                                    <i class="fa fa-envelope mr-1"></i>Email
-                                </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">
-                                    <i class="fa fa-info-circle mr-1"></i>Status
-                                </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">
-                                    <i class="fa fa-calendar mr-1"></i>Sent Date
-                                </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">
-                                    <i class="fa fa-clock-o mr-1"></i>Expires
-                                </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">
-                                    <i class="fa fa-user mr-1"></i>Used By
-                                </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">
-                                    <i class="fa fa-check mr-1"></i>Used Date
-                                </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">
-                                    <i class="fa fa-cogs mr-1"></i>Actions
-                                </th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Email</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Status</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Sent</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Expires</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Used By</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Used Date</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Actions</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
+                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                 @endif
-                            <tr class="hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-700">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <i class="fa fa-envelope text-gray-400 mr-2"></i>
-                                        <span class="text-sm text-gray-900 dark:text-gray-100">{{ $invitation['email'] }}</span>
-                                    </div>
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                                <td class="px-4 py-3 whitespace-nowrap">
+                                    <span class="text-sm text-gray-900 dark:text-gray-100"><i class="fa fa-envelope text-gray-400 mr-1"></i>{{ $invitation['email'] }}</span>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
+                                <td class="px-4 py-3 whitespace-nowrap">
                                     @if($invitation['used_at'])
-                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
-                                            <i class="fa fa-check mr-1"></i>Accepted
-                                        </span>
+                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"><i class="fa fa-check mr-1"></i>Accepted</span>
                                     @elseif($invitation['expires_at'] < time())
-                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
-                                            <i class="fa fa-times mr-1"></i>Expired
-                                        </span>
+                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"><i class="fa fa-times mr-1"></i>Expired</span>
                                     @elseif(!$invitation['is_active'])
-                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 dark:bg-gray-700 dark:text-gray-300">
-                                            <i class="fa fa-ban mr-1"></i>Cancelled
-                                        </span>
+                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"><i class="fa fa-ban mr-1"></i>Cancelled</span>
                                     @else
-                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
-                                            <i class="fa fa-clock-o mr-1"></i>Pending
-                                        </span>
+                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"><i class="fa fa-clock-o mr-1"></i>Pending</span>
                                     @endif
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <i class="fa fa-calendar text-gray-400 mr-2"></i>
-                                        <span class="text-sm text-gray-900 dark:text-gray-100">{{ date('M j, Y', $invitation['created_at']) }}</span>
-                                        <small class="text-xs text-gray-500 ml-1 dark:text-gray-400">{{ date('H:i', $invitation['created_at']) }}</small>
-                                    </div>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{ date('M j, Y', $invitation['created_at']) }} <small class="text-xs text-gray-500 dark:text-gray-400">{{ date('H:i', $invitation['created_at']) }}</small>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <i class="fa fa-clock-o text-gray-400 mr-2"></i>
-                                        <span class="text-sm text-gray-900 dark:text-gray-100">{{ date('M j, Y', $invitation['expires_at']) }}</span>
-                                        <small class="text-xs text-gray-500 ml-1 dark:text-gray-400">{{ date('H:i', $invitation['expires_at']) }}</small>
-                                    </div>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{ date('M j, Y', $invitation['expires_at']) }} <small class="text-xs text-gray-500 dark:text-gray-400">{{ date('H:i', $invitation['expires_at']) }}</small>
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                     @if(isset($invitation['used_by_user']))
-                                        <div class="flex items-center">
-                                            <i class="fa fa-user text-gray-400 mr-2"></i>
-                                            <span class="text-sm text-gray-900 dark:text-gray-100">{{ $invitation['used_by_user']['username'] ?? $invitation['used_by_user']['email'] }}</span>
-                                        </div>
+                                        <i class="fa fa-user text-gray-400 mr-1"></i>{{ $invitation['used_by_user']['username'] ?? $invitation['used_by_user']['email'] }}
                                     @else
-                                        <span class="text-gray-500 dark:text-gray-400">-</span>
+                                        <span class="text-gray-400">-</span>
                                     @endif
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                     @if($invitation['used_at'])
-                                        <div class="flex items-center">
-                                            <i class="fa fa-check text-gray-400 mr-2"></i>
-                                            <span class="text-sm text-gray-900 dark:text-gray-100">{{ date('M j, Y', $invitation['used_at']) }}</span>
-                                            <small class="text-xs text-gray-500 ml-1 dark:text-gray-400">{{ date('H:i', $invitation['used_at']) }}</small>
-                                        </div>
+                                        {{ date('M j, Y', $invitation['used_at']) }} <small class="text-xs text-gray-500 dark:text-gray-400">{{ date('H:i', $invitation['used_at']) }}</small>
                                     @else
-                                        <span class="text-gray-500 dark:text-gray-400">-</span>
+                                        <span class="text-gray-400">-</span>
                                     @endif
                                 </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">
                                     @if(!$invitation['used_at'] && $invitation['expires_at'] > time() && $invitation['is_active'])
                                         <div class="flex items-center space-x-2">
                                             <form method="POST" action="{{ url('/invitations/' . $invitation['id'] . '/resend') }}" class="inline">
                                                 @csrf
-                                                <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-blue-300 rounded text-xs font-medium text-blue-700 bg-white dark:bg-gray-800 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-blue-400 dark:border-blue-600 dark:hover:bg-gray-600" title="Resend Invitation">
-                                                    <i class="fas fa-paper-plane"></i>
-                                                </button>
+                                                <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-blue-300 rounded text-xs font-medium text-blue-700 bg-white hover:bg-blue-50 dark:bg-gray-700 dark:text-blue-400 dark:border-blue-600 dark:hover:bg-gray-600" title="Resend"><i class="fas fa-paper-plane"></i></button>
                                             </form>
                                             <form method="POST" action="{{ url('/invitations/' . $invitation['id']) }}" class="inline">
                                                 @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"
-                                                        data-confirm="Are you sure you want to cancel this invitation?">
-                                                    <i class="fas fa-times"></i>
-                                                </button>
+                                                <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 hover:bg-red-50 dark:bg-gray-700 dark:text-red-400 dark:border-red-600 dark:hover:bg-gray-600" title="Cancel" data-confirm="Are you sure you want to cancel this invitation?"><i class="fas fa-times"></i></button>
                                             </form>
                                         </div>
                                     @else
-                                        <span class="text-gray-500 dark:text-gray-400">-</span>
+                                        <span class="text-gray-400">-</span>
                                     @endif
                                 </td>
                             </tr>
@@ -222,23 +178,74 @@
                         </tbody>
                     </table>
                 </div>
-
-                @if(isset($pagination_links))
-                    <div class="mt-4">
-                        {!! $pagination_links !!}
-                    </div>
-                @endif
                 @endif
             @empty
                 <div class="bg-blue-50 border border-blue-200 text-blue-800 rounded-lg p-6 text-center dark:bg-blue-900 dark:border-blue-700 dark:text-blue-300">
                     <i class="fa fa-info-circle text-4xl mb-3"></i>
                     <h5 class="text-lg font-semibold mb-2">No Invitations Found</h5>
                     <p class="mb-4">You haven't sent any invitations yet.</p>
-                    <a href="{{ url('/invitations/create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    <a href="{{ url('/invitations/create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800">
                         <i class="fas fa-plus mr-1"></i> Send Your First Invitation
                     </a>
                 </div>
             @endforelse
+
+            @if(count($invitations ?? []) > 0)
+            <!-- Mobile Cards -->
+            <div class="md:hidden divide-y divide-gray-200 dark:divide-gray-700">
+                @foreach($invitations as $invitation)
+                    <div class="p-4 space-y-3">
+                        <div class="flex items-start justify-between gap-2">
+                            <div class="min-w-0">
+                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                                    <i class="fa fa-envelope text-gray-400 mr-1"></i>{{ $invitation['email'] }}
+                                </div>
+                                <div class="mt-1">
+                                    @if($invitation['used_at'])
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"><i class="fa fa-check mr-1"></i>Accepted</span>
+                                    @elseif($invitation['expires_at'] < time())
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"><i class="fa fa-times mr-1"></i>Expired</span>
+                                    @elseif(!$invitation['is_active'])
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"><i class="fa fa-ban mr-1"></i>Cancelled</span>
+                                    @else
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"><i class="fa fa-clock-o mr-1"></i>Pending</span>
+                                    @endif
+                                </div>
+                            </div>
+                            @if(!$invitation['used_at'] && $invitation['expires_at'] > time() && $invitation['is_active'])
+                                <div class="flex gap-1 shrink-0">
+                                    <form method="POST" action="{{ url('/invitations/' . $invitation['id'] . '/resend') }}" class="inline">
+                                        @csrf
+                                        <button type="submit" class="px-2 py-1 border border-blue-300 rounded text-xs text-blue-700 bg-white dark:bg-gray-700 dark:text-blue-400 dark:border-blue-600" title="Resend"><i class="fas fa-paper-plane"></i></button>
+                                    </form>
+                                    <form method="POST" action="{{ url('/invitations/' . $invitation['id']) }}" class="inline">
+                                        @csrf
+                                        @method('DELETE')
+                                        <button type="submit" class="px-2 py-1 border border-red-300 rounded text-xs text-red-700 bg-white dark:bg-gray-700 dark:text-red-400 dark:border-red-600" title="Cancel"><i class="fas fa-times"></i></button>
+                                    </form>
+                                </div>
+                            @endif
+                        </div>
+                        <div class="grid grid-cols-2 gap-2 text-xs text-gray-600 dark:text-gray-400">
+                            <div><span class="font-medium">Sent:</span> {{ date('M j, Y', $invitation['created_at']) }}</div>
+                            <div><span class="font-medium">Expires:</span> {{ date('M j, Y', $invitation['expires_at']) }}</div>
+                            @if(isset($invitation['used_by_user']))
+                                <div><span class="font-medium">Used by:</span> {{ $invitation['used_by_user']['username'] ?? $invitation['used_by_user']['email'] }}</div>
+                            @endif
+                            @if($invitation['used_at'])
+                                <div><span class="font-medium">Used:</span> {{ date('M j, Y', $invitation['used_at']) }}</div>
+                            @endif
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+            @endif
+
+            @if(isset($pagination_links))
+                <div class="mt-4">
+                    {!! $pagination_links !!}
+                </div>
+            @endif
         </div>
     </div>
 </div>
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 89e19dfc8..3b6d812d9 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -2,7 +2,7 @@
 <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="csrf-token" content="{{ csrf_token() }}">
 
     {{-- Apply dark mode BEFORE any CSS loads to prevent white flash --}}
@@ -136,7 +136,7 @@
              'warning' => session('warning'),
              'info' => session('info')
          ]) }}"
-         style="display: none;">
+         class="hidden">
     </div>
 
     <!-- Meta tags for theme management (CSP-safe) -->
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
deleted file mode 100644
index 55f8bc8e3..000000000
--- a/resources/views/layouts/app.blade.php
+++ /dev/null
@@ -1,84 +0,0 @@
-<!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- CSRF Token -->
-    <meta name="csrf-token" content="{{ csrf_token() }}">
-
-    {{-- Apply dark mode BEFORE any CSS loads to prevent white flash --}}
-    @include('partials.theme-init')
-
-    <title>{{ config('app.name', 'Laravel') }}</title>
-
-    <!-- Fonts -->
-    <link rel="dns-prefetch" href="//fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
-
-    <!-- Styles -->
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
-</head>
-<body>
-<div id="app" class="h-screen overflow-y-auto" data-scroll-container>
-    <nav class="navbar navbar-expand-md navbar-light bg-white dark:bg-gray-800 shadow-sm">
-        <div class="container">
-            <a class="navbar-brand" href="{{ url('/') }}">
-                {{ config('app.name', 'Laravel') }}
-            </a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <!-- Left Side Of Navbar -->
-                <ul class="navbar-nav mr-auto">
-
-                </ul>
-
-                <!-- Right Side Of Navbar -->
-                <ul class="navbar-nav ml-auto">
-                    <!-- Authentication Links -->
-                    @guest
-                        @if (Route::has('login'))
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
-                            </li>
-                        @endif
-
-                        @if (Route::has('register'))
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
-                            </li>
-                        @endif
-                    @else
-                        <li class="nav-item dropdown">
-                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
-                                {{ Auth::user()->name }}
-                            </a>
-
-                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                                <a class="dropdown-item" href="{{ route('logout') }}"
-                                   data-logout>
-                                    {{ __('Logout') }}
-                                </a>
-
-                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
-                                    @csrf
-                                </form>
-                            </div>
-                        </li>
-                    @endguest
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-    <main class="py-4">
-        @yield('content')
-    </main>
-</div>
-
-@include('partials.back-to-top')
-</body>
-</html>
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index 20b7a99b5..e759597ea 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -126,7 +126,7 @@
          data-color-scheme="{{ $colorScheme }}"
          data-authenticated="{{ auth()->check() ? 'true' : 'false' }}"
          data-update-url="{{ route('profile.update-theme') }}"
-         style="display: none;">
+         class="hidden">
     </div>
 
     <!-- Flash Messages Data (moved to csp-safe.js) -->
@@ -137,7 +137,7 @@
              'warning' => session('warning'),
              'info' => session('info')
          ]) }}"
-         style="display: none;">
+         class="hidden">
     </div>
 </body>
 </html>
diff --git a/resources/views/movies/index.blade.php b/resources/views/movies/index.blade.php
index e7ea14132..2131cd659 100644
--- a/resources/views/movies/index.blade.php
+++ b/resources/views/movies/index.blade.php
@@ -48,7 +48,7 @@
                         @click="toggleLayout()"
                         class="inline-flex items-center px-4 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-700 dark:hover:bg-gray-600 transition shadow-md focus:outline-none focus:ring-2 focus:ring-gray-500"
                         title="Toggle layout">
-                    <i class="mr-2" x-bind:class="layoutIcon"></i>
+                    <i class="mr-2" :class="layoutIcon"></i>
                     <span x-text="layoutLabel"></span>
                 </button>
 
@@ -144,7 +144,7 @@
             {{-- Movies Grid --}}
             <div id="moviesGrid"
                  class="movies-grid"
-                 x-bind:data-layout="layout">
+                 :data-layout="layout">
                 @foreach($results as $result)
                     @include('movies.partials.movie-card', ['result' => $result, 'site' => $site])
                 @endforeach
diff --git a/resources/views/mymovies/add.blade.php b/resources/views/mymovies/add.blade.php
index 46a6a3790..4e0aa5649 100644
--- a/resources/views/mymovies/add.blade.php
+++ b/resources/views/mymovies/add.blade.php
@@ -86,143 +86,179 @@
         </div>
     </div>
 </div>
-<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">
-            <h3 class="mb-0"><i class="fa fa-film me-2 text-primary"></i>My Movies</h3>
-            <div class="breadcrumb-wrapper">
+<div class="max-w-4xl mx-auto">
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
+        <div class="bg-linear-to-r from-blue-600 to-blue-700 px-6 py-4">
+            <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+                <h3 class="text-xl font-bold text-white flex items-center">
+                    <i class="fa fa-film mr-2"></i>My Movies
+                </h3>
                 <nav aria-label="breadcrumb">
-                    <ol class="breadcrumb mb-0 py-0">
-                        <li class="breadcrumb-item"><a href="{{ url($site['home_link']) }}">Home</a></li>
-                        <li class="breadcrumb-item active">My Movies</li>
+                    <ol class="flex items-center space-x-2 text-sm text-blue-100">
+                        <li><a href="{{ url($site['home_link']) }}" class="hover:text-white transition">Home</a></li>
+                        <li><i class="fas fa-chevron-right text-xs"></i></li>
+                        <li class="text-white font-medium">My Movies</li>
                     </ol>
                 </nav>
             </div>
         </div>
-    </div>
 
-    <div class="card-body">
-        <div class="alert alert-info mb-4">
-            <i class="fa fa-info-circle me-2"></i>
-            Using 'My Movies' you can search for movies, and add them to a wishlist. If the movie becomes available it will be added to an
-            <strong><a href="{{ url("/rss/mymovies?dl=1&i={$userdata->id}&api_token={$userdata->api_token}") }}" class="alert-link">
-                <i class="fa fa-rss me-1"></i>RSS Feed
-            </a></strong>
-            you can use to automatically download. You can
-            <strong><a href="{{ route('mymovies') }}" class="alert-link">
-                <i class="fa fa-list me-1"></i>Manage Your Movie List
-            </a></strong>
-            to remove old items.
-        </div>
+        <div class="p-6">
+            <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
+                <div class="flex items-start">
+                    <i class="fa fa-info-circle text-blue-600 dark:text-blue-400 mt-0.5 mr-3"></i>
+                    <p class="text-sm text-blue-800 dark:text-blue-200">
+                        Using 'My Movies' you can search for movies and add them to a wishlist. If the movie becomes available it will be added to an
+                        <a href="{{ url("/rss/mymovies?dl=1&i={$userdata->id}&api_token={$userdata->api_token}") }}" class="font-semibold underline hover:text-blue-600 dark:hover:text-blue-300">
+                            <i class="fa fa-rss mr-1"></i>RSS Feed
+                        </a>
+                        you can use to automatically download. You can
+                        <a href="{{ route('mymovies') }}" class="font-semibold underline hover:text-blue-600 dark:hover:text-blue-300">
+                            <i class="fa fa-list mr-1"></i>Manage Your Movie List
+                        </a>
+                        to remove old items.
+                    </p>
+                </div>
+            </div>
 
-        <div class="d-flex justify-content-between align-items-center mb-3">
-            <a href="{{ url("/rss/mymovies?dl=1&i={$userdata->id}&api_token={$userdata->api_token}") }}" class="btn btn-outline-secondary">
-                <i class="fa fa-rss me-2"></i>RSS Feed
-            </a>
-        </div>
+            <div class="flex justify-between items-center mb-4">
+                <a href="{{ url("/rss/mymovies?dl=1&i={$userdata->id}&api_token={$userdata->api_token}") }}" class="btn btn-secondary btn-sm">
+                    <i class="fa fa-rss mr-2"></i>RSS Feed
+                </a>
+            </div>
 
-        @if(count($movies ?? []) > 0)
-            <div class="table-responsive">
-                <table class="table table-striped table-hover">
-                    <thead class="table-light">
-                        <tr>
-                            <th style="width:140px">Cover</th>
-                            <th>Information</th>
-                            <th>Category</th>
-                            <th>Added</th>
-                            <th class="text-end">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @foreach($movies as $movie)
-                            <tr>
-                                <td>
-                                    <div class="text-center">
-                                        <img class="img-fluid rounded shadow-sm" style="max-width:120px"
+            @if(count($movies ?? []) > 0)
+                <!-- Desktop Table -->
+                <div class="hidden md:block overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+                    <table class="w-full text-sm">
+                        <thead>
+                            <tr class="text-left text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wider">
+                                <th class="px-4 py-3 w-36">Cover</th>
+                                <th class="px-4 py-3">Information</th>
+                                <th class="px-4 py-3">Category</th>
+                                <th class="px-4 py-3">Added</th>
+                                <th class="px-4 py-3 text-right">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                            @foreach($movies as $movie)
+                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
+                                    <td class="px-4 py-3">
+                                        <img class="rounded-lg shadow-sm max-w-[120px]"
                                              src="{{ url('/covers/movies/' . (($movie['cover'] ?? 0) == 1 ? $movie['imdbid'] . '-cover.jpg' : 'no-cover.jpg')) }}"
                                              alt="{{ e($movie['title'] ?? '') }}"/>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="mb-2">
-                                        <h5 class="mb-1">
-                                            <a href="{{ url("/Movies?imdb={$movie['imdbid']}") }}" class="text-decoration-none" data-bs-toggle="tooltip" data-bs-placement="top" title="View movie details">
+                                    </td>
+                                    <td class="px-4 py-3">
+                                        <div class="mb-2">
+                                            <a href="{{ url("/Movies?imdb={$movie['imdbid']}") }}" class="text-gray-900 dark:text-gray-100 font-semibold hover:text-blue-600 dark:hover:text-blue-400 transition" title="View movie details">
                                                 {{ e($movie['title'] ?? '') }} ({{ $movie['year'] ?? '' }})
                                             </a>
-                                        </h5>
-
-                                        @if(!empty($movie['tagline']))
-                                            <div class="fst-italic text-muted mb-2">{{ e($movie['tagline']) }}</div>
+                                            @if(!empty($movie['tagline']))
+                                                <div class="italic text-gray-500 dark:text-gray-400 text-xs mt-1">{{ e($movie['tagline']) }}</div>
+                                            @endif
+                                        </div>
+                                        @if(!empty($movie['plot']))
+                                            <p class="text-gray-600 dark:text-gray-300 text-sm mb-2">{{ e($movie['plot']) }}</p>
                                         @endif
-                                    </div>
-
-                                    @if(!empty($movie['plot']))
-                                        <p class="mb-2">{{ e($movie['plot']) }}</p>
-                                    @endif
-
-                                    <div class="d-flex flex-wrap gap-3 mt-2">
-                                        @if(!empty($movie['genre']))
-                                            <div>
-                                                <span class="fw-bold text-secondary"><i class="fa fa-tag me-1"></i>Genre:</span> {{ e($movie['genre']) }}
-                                            </div>
-                                        @endif
-
-                                        @if(!empty($movie['director']))
-                                            <div>
-                                                <span class="fw-bold text-secondary"><i class="fa fa-video-camera me-1"></i>Director:</span> {{ e($movie['director']) }}
-                                            </div>
-                                        @endif
-
+                                        <div class="flex flex-wrap gap-3 text-xs text-gray-600 dark:text-gray-400 mt-2">
+                                            @if(!empty($movie['genre']))
+                                                <span><span class="font-semibold"><i class="fa fa-tag mr-1"></i>Genre:</span> {{ e($movie['genre']) }}</span>
+                                            @endif
+                                            @if(!empty($movie['director']))
+                                                <span><span class="font-semibold"><i class="fa fa-video mr-1"></i>Director:</span> {{ e($movie['director']) }}</span>
+                                            @endif
+                                        </div>
                                         @if(!empty($movie['actors']))
-                                            <div class="w-100 mt-1">
-                                                <span class="fw-bold text-secondary"><i class="fa fa-users me-1"></i>Starring:</span> {{ e($movie['actors']) }}
+                                            <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                                                <span class="font-semibold"><i class="fa fa-users mr-1"></i>Starring:</span> {{ e($movie['actors']) }}
                                             </div>
                                         @endif
-                                    </div>
-
-                                    <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'] }}"
-                                           data-bs-toggle="tooltip" data-bs-placement="top" title="View on IMDB">
-                                            <i class="fa fa-external-link me-1"></i>IMDB
-                                        </a>
-                                    </div>
-                                </td>
-                                <td>
-                                    <span class="badge bg-secondary rounded-pill">
-                                        <i class="fa fa-folder-open me-1"></i>{{ !empty($movie['categoryNames']) ? e($movie['categoryNames']) : 'All' }}
-                                    </span>
-                                </td>
-                                <td>
-                                    <div class="d-flex align-items-center" title="Added on {{ $movie['created_at'] ?? '' }}">
-                                        <i class="fa fa-calendar text-muted me-2"></i>
+                                        <div class="mt-2">
+                                            <a class="inline-flex items-center px-2 py-1 text-xs font-medium rounded bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200" target="_blank"
+                                               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>
+                                        </div>
+                                    </td>
+                                    <td class="px-4 py-3">
+                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                                            <i class="fa fa-folder-open mr-1"></i>{{ !empty($movie['categoryNames']) ? e($movie['categoryNames']) : 'All' }}
+                                        </span>
+                                    </td>
+                                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs whitespace-nowrap" title="Added on {{ $movie['created_at'] ?? '' }}">
+                                        <i class="fa fa-calendar mr-1"></i>
                                         {{ isset($movie['created_at']) ? date('M d, Y', strtotime($movie['created_at'])) : '' }}
+                                    </td>
+                                    <td class="px-4 py-3 text-right">
+                                        <div class="flex items-center justify-end gap-2">
+                                            <a class="btn btn-warning btn-sm" href="{{ url("/mymovies?id=edit&imdb={$movie['imdbid']}") }}" title="Edit Categories">
+                                                <i class="fa fa-edit"></i>
+                                            </a>
+                                            <a class="btn btn-danger btn-sm" href="{{ url("/mymovies?id=delete&imdb={$movie['imdbid']}") }}" title="Remove from My Movies">
+                                                <i class="fa fa-trash"></i>
+                                            </a>
+                                        </div>
+                                    </td>
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+
+                <!-- Mobile Cards -->
+                <div class="md:hidden space-y-4">
+                    @foreach($movies as $movie)
+                        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                            <div class="flex gap-3">
+                                <img class="rounded-lg shadow-sm w-20 h-auto shrink-0"
+                                     src="{{ url('/covers/movies/' . (($movie['cover'] ?? 0) == 1 ? $movie['imdbid'] . '-cover.jpg' : 'no-cover.jpg')) }}"
+                                     alt="{{ e($movie['title'] ?? '') }}"/>
+                                <div class="min-w-0 flex-1">
+                                    <a href="{{ url("/Movies?imdb={$movie['imdbid']}") }}" class="text-gray-900 dark:text-gray-100 font-semibold hover:text-blue-600 dark:hover:text-blue-400 transition text-sm">
+                                        {{ e($movie['title'] ?? '') }} ({{ $movie['year'] ?? '' }})
+                                    </a>
+                                    @if(!empty($movie['tagline']))
+                                        <div class="italic text-gray-500 dark:text-gray-400 text-xs mt-0.5">{{ e($movie['tagline']) }}</div>
+                                    @endif
+                                    <div class="flex flex-wrap gap-2 mt-2">
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+                                            <i class="fa fa-folder-open mr-1"></i>{{ !empty($movie['categoryNames']) ? e($movie['categoryNames']) : 'All' }}
+                                        </span>
+                                        <span class="text-xs text-gray-500 dark:text-gray-400">
+                                            <i class="fa fa-calendar mr-1"></i>{{ isset($movie['created_at']) ? date('M d, Y', strtotime($movie['created_at'])) : '' }}
+                                        </span>
                                     </div>
-                                </td>
-                                <td class="text-end">
-                                    <div class="btn-group">
-                                        <a class="btn btn-sm btn-warning mymovies"
-                                           href="{{ url("/mymovies?id=edit&imdb={$movie['imdbid']}") }}" rel="edit"
-                                           name="movies{{ $movie['imdbid'] }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Categories">
-                                            <i class="fa fa-edit"></i>
-                                        </a>
-                                        <a class="btn btn-sm btn-danger mymovies"
-                                           href="{{ url("/mymovies?id=delete&imdb={$movie['imdbid']}") }}" rel="remove"
-                                           name="movies{{ $movie['imdbid'] }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove from My Movies">
-                                            <i class="fa fa-trash"></i>
-                                        </a>
-                                    </div>
-                                </td>
-                            </tr>
-                        @endforeach
-                    </tbody>
-                </table>
-            </div>
-        @else
-            <div class="alert alert-info">
-                <i class="fa fa-info-circle me-2"></i>No movies bookmarked yet. Add movies from movie pages.
-            </div>
-        @endif
+                                </div>
+                            </div>
+                            @if(!empty($movie['plot']))
+                                <p class="text-gray-600 dark:text-gray-300 text-xs mt-3">{{ e($movie['plot']) }}</p>
+                            @endif
+                            <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+                                <a class="inline-flex items-center px-2 py-1 text-xs font-medium rounded bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200" target="_blank"
+                                   href="{{ $site['dereferrer_link'] }}http://www.imdb.com/title/tt{{ $movie['imdbid'] }}">
+                                    <i class="fa fa-external-link mr-1"></i>IMDB
+                                </a>
+                                <div class="flex gap-2">
+                                    <a class="btn btn-warning btn-sm" href="{{ url("/mymovies?id=edit&imdb={$movie['imdbid']}") }}" title="Edit">
+                                        <i class="fa fa-edit"></i>
+                                    </a>
+                                    <a class="btn btn-danger btn-sm" href="{{ url("/mymovies?id=delete&imdb={$movie['imdbid']}") }}" title="Remove">
+                                        <i class="fa fa-trash"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+            @else
+                <div class="p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
+                    <div class="flex items-center">
+                        <i class="fa fa-info-circle text-blue-600 dark:text-blue-400 mr-3"></i>
+                        <span class="text-blue-800 dark:text-blue-200 text-sm">No movies bookmarked yet. Add movies from movie pages.</span>
+                    </div>
+                </div>
+            @endif
+        </div>
     </div>
 </div>
 
diff --git a/resources/views/mymovies/index.blade.php b/resources/views/mymovies/index.blade.php
index 05fa474ac..de472dde6 100644
--- a/resources/views/mymovies/index.blade.php
+++ b/resources/views/mymovies/index.blade.php
@@ -115,7 +115,7 @@
                                                data-message="Are you sure you want to remove this movie from your watchlist?"
                                                data-confirm-text="Remove"
                                                data-type="danger"
-                                               x-on:click.prevent="navigate()">
+                                               @click.prevent="navigate()">
                                                 <i class="fa fa-trash mr-1.5"></i>Delete
                                             </a>
                                         </div>
@@ -228,7 +228,7 @@
                                    data-message="Are you sure you want to remove this movie from your watchlist?"
                                    data-confirm-text="Remove"
                                    data-type="danger"
-                                   x-on:click.prevent="navigate()">
+                                   @click.prevent="navigate()">
                                     <i class="fa fa-trash"></i>
                                 </a>
                             </div>
diff --git a/resources/views/myshows/index.blade.php b/resources/views/myshows/index.blade.php
index 551d08464..8ec8185ab 100644
--- a/resources/views/myshows/index.blade.php
+++ b/resources/views/myshows/index.blade.php
@@ -150,7 +150,7 @@
                                            data-message="Are you sure you want to remove this show from your list?"
                                            data-confirm-text="Remove"
                                            data-type="danger"
-                                           x-on:click.prevent="navigate()">
+                                           @click.prevent="navigate()">
                                             <i class="fa fa-trash mr-1.5"></i>
                                             <span class="hidden xl:inline">Delete</span>
                                         </a>
@@ -210,7 +210,7 @@
                                    data-message="Are you sure you want to remove this show from your list?"
                                    data-confirm-text="Remove"
                                    data-type="danger"
-                                   x-on:click.prevent="navigate()">
+                                   @click.prevent="navigate()">
                                     <i class="fa fa-trash"></i>
                                 </a>
                             </div>
diff --git a/resources/views/partials/admin-menu.blade.php b/resources/views/partials/admin-menu.blade.php
index b27ad964f..537b93405 100644
--- a/resources/views/partials/admin-menu.blade.php
+++ b/resources/views/partials/admin-menu.blade.php
@@ -9,12 +9,12 @@
 
     <!-- Users -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-users"></i>
                 <span>Users</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/user-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -45,12 +45,12 @@
 
     <!-- Content -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-file-alt"></i>
                 <span>Content</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/content-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -72,12 +72,12 @@
 
     <!-- Releases -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-download"></i>
                 <span>Releases</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/release-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -97,12 +97,12 @@
 
     <!-- Movies -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-film"></i>
                 <span>Movies</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/movie-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -116,12 +116,12 @@
 
     <!-- TV Shows -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-tv"></i>
                 <span>TV Shows</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/show-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -132,12 +132,12 @@
 
     <!-- AniDB -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-dragon"></i>
                 <span>AniDB</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/anidb-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -148,12 +148,12 @@
 
     <!-- Games -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-gamepad"></i>
                 <span>Games</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/game-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -164,12 +164,12 @@
 
     <!-- Console -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-desktop"></i>
                 <span>Console</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/console-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -180,12 +180,12 @@
 
     <!-- Music -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-music"></i>
                 <span>Music</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/music-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -196,12 +196,12 @@
 
     <!-- Books -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-book"></i>
                 <span>Books</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/book-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -220,12 +220,12 @@
 
     <!-- Blacklist -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-ban"></i>
                 <span>Blacklist</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/binaryblacklist-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -236,12 +236,12 @@
 
     <!-- Regexes -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-code"></i>
                 <span>Regexes</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/category_regexes-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -258,12 +258,12 @@
 
     <!-- Groups -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-server"></i>
                 <span>Groups Management</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/group-list') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
@@ -283,12 +283,12 @@
 
     <!-- System -->
     <div class="mb-4" x-data="adminSubmenu">
-        <button type="button" x-on:click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
+        <button type="button" @click="toggle()" class="flex items-center justify-between w-full text-left text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 py-2 px-3 rounded transition">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-cog"></i>
                 <span>System</span>
             </div>
-            <i class="fas fa-chevron-down text-sm transform transition-transform" x-bind:class="open ? 'rotate-180' : ''"></i>
+            <i class="fas fa-chevron-down text-sm transform transition-transform" :class="open ? 'rotate-180' : ''"></i>
         </button>
         <div x-show="open" x-cloak class="mt-2 ml-6 space-y-1">
             <a href="{{ url('/admin/site-edit') }}" class="block py-2 px-3 text-gray-400 dark:text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-800 dark:hover:bg-gray-800 rounded transition">
diff --git a/resources/views/partials/confirmation-modal.blade.php b/resources/views/partials/confirmation-modal.blade.php
index 4802e5b8d..299b24a7e 100644
--- a/resources/views/partials/confirmation-modal.blade.php
+++ b/resources/views/partials/confirmation-modal.blade.php
@@ -20,7 +20,7 @@
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
             <div class="flex items-center justify-between">
                 <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-                    <i class="fas mr-2" x-bind:class="iconClass()"></i>
+                    <i class="fas mr-2" :class="iconClass()"></i>
                     <span x-text="title">Confirm Action</span>
                 </h3>
                 <button type="button" @click="cancel()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
@@ -44,7 +44,7 @@
             </button>
             <button type="button"
                     @click="confirm()"
-                    x-bind:class="confirmBtnClass()">
+                    :class="confirmBtnClass()">
                 <i class="fas fa-check mr-2"></i><span x-text="confirmText">Confirm</span>
             </button>
         </div>
diff --git a/resources/views/partials/header-menu.blade.php b/resources/views/partials/header-menu.blade.php
index de6846716..a96b2178f 100644
--- a/resources/views/partials/header-menu.blade.php
+++ b/resources/views/partials/header-menu.blade.php
@@ -30,7 +30,7 @@
                                                     <span>{{ $subcat['title'] }}</span>
                                                     <i class="fas fa-chevron-right text-xs"></i>
                                                 </a>
-                                                <div class="submenu absolute left-full top-0 w-40 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50 ml-0.5" style="display: none;">
+                                                <div class="submenu absolute left-full top-0 w-40 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50 ml-0.5 hidden">
                                                     <a href="{{ url('/browse/TV/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">All Foreign</a>
                                                     <div class="border-t border-gray-700 dark:border-gray-600"></div>
                                                     <a href="{{ route('search', ['search' => 'German|Deutsch|DE|GER', 't' => App\Models\Category::TV_FOREIGN]) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">German</a>
@@ -81,7 +81,7 @@
                                                         <i class="fas fa-chevron-right text-xs"></i>
                                                     </a>
                                                 @endif
-                                                <div class="submenu absolute left-full top-0 w-40 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50 ml-0.5" style="display: none;">
+                                                <div class="submenu absolute left-full top-0 w-40 bg-gray-900 dark:bg-gray-950 rounded-xl shadow-lg z-50 ml-0.5 hidden">
                                                     @if(auth()->check() && auth()->user()->movieview == "1")
                                                         <a href="{{ url('/' . $parentcat['title'] . '/' . $subcat['title']) }}" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-white dark:hover:text-white">All Foreign</a>
                                                     @else
diff --git a/resources/views/partials/image-modal.blade.php b/resources/views/partials/image-modal.blade.php
index c9272fe82..88f619fc0 100644
--- a/resources/views/partials/image-modal.blade.php
+++ b/resources/views/partials/image-modal.blade.php
@@ -40,8 +40,8 @@
 
                 <!-- Image -->
                 <div class="flex justify-center">
-                    <img x-bind:src="imageUrl"
-                         x-bind:alt="imageTitle"
+                    <img :src="imageUrl"
+                         :alt="imageTitle"
                          class="max-w-full max-h-[85vh] rounded-lg shadow-lg">
                 </div>
             </div>
diff --git a/resources/views/partials/preview-modal.blade.php b/resources/views/partials/preview-modal.blade.php
index 6a6661b93..2c6d85b5c 100644
--- a/resources/views/partials/preview-modal.blade.php
+++ b/resources/views/partials/preview-modal.blade.php
@@ -52,18 +52,18 @@
 
                 <!-- Image -->
                 <div x-show="imageLoaded && !imageError" class="flex justify-center">
-                    <img x-bind:src="imageUrl"
-                         x-bind:alt="title"
+                    <img :src="imageUrl"
+                         :alt="title"
                          x-on:error="onImageError()"
-                         x-on:load="onImageLoad()"
+                         @load="onImageLoad()"
                          class="max-w-full max-h-[80vh] rounded-lg shadow-lg">
                 </div>
 
                 <!-- Hidden image for preloading -->
                 <img x-show="false"
-                     x-bind:src="imageUrl"
+                     :src="imageUrl"
                      x-on:error="onImageError()"
-                     x-on:load="onImageLoad()">
+                     @load="onImageLoad()">
             </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"
diff --git a/resources/views/partials/sidebar.blade.php b/resources/views/partials/sidebar.blade.php
index 80b064903..c0b39c402 100644
--- a/resources/views/partials/sidebar.blade.php
+++ b/resources/views/partials/sidebar.blade.php
@@ -204,104 +204,3 @@
     @endauth
 </nav>
 
-@push('styles')
-<style>
-    /* Useful Links Content Styling */
-    .useful-link-content {
-        max-width: 100%;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-    }
-
-    /* Scale images to fit sidebar */
-    .useful-link-content img {
-        max-width: 100%;
-        height: auto;
-        border-radius: 0.375rem;
-        margin: 0.5rem 0;
-        display: block;
-    }
-
-    /* Style paragraphs in useful links */
-    .useful-link-content p {
-        margin-bottom: 0.5rem;
-        line-height: 1.5;
-    }
-
-    .useful-link-content p:last-child {
-        margin-bottom: 0;
-    }
-
-    /* Style links within useful links content */
-    .useful-link-content a {
-        color: #60a5fa;
-        text-decoration: underline;
-    }
-
-    .useful-link-content a:hover {
-        color: #93c5fd;
-    }
-
-    /* Style lists in useful links */
-    .useful-link-content ul,
-    .useful-link-content ol {
-        margin: 0.5rem 0;
-        padding-left: 1.5rem;
-    }
-
-    .useful-link-content li {
-        margin-bottom: 0.25rem;
-    }
-
-    /* Style headings in useful links */
-    .useful-link-content h1,
-    .useful-link-content h2,
-    .useful-link-content h3,
-    .useful-link-content h4,
-    .useful-link-content h5,
-    .useful-link-content h6 {
-        font-weight: 600;
-        margin-top: 0.75rem;
-        margin-bottom: 0.5rem;
-        color: #e5e7eb;
-    }
-
-    .useful-link-content h1 { font-size: 1.25rem; }
-    .useful-link-content h2 { font-size: 1.125rem; }
-    .useful-link-content h3 { font-size: 1rem; }
-    .useful-link-content h4,
-    .useful-link-content h5,
-    .useful-link-content h6 { font-size: 0.875rem; }
-
-    /* Style blockquotes */
-    .useful-link-content blockquote {
-        border-left: 3px solid #4b5563;
-        padding-left: 1rem;
-        margin: 0.5rem 0;
-        font-style: italic;
-        color: #9ca3af;
-    }
-
-    /* Style code blocks */
-    .useful-link-content code {
-        background-color: #374151;
-        padding: 0.125rem 0.25rem;
-        border-radius: 0.25rem;
-        font-size: 0.875em;
-        font-family: monospace;
-    }
-
-    .useful-link-content pre {
-        background-color: #1f2937;
-        padding: 0.75rem;
-        border-radius: 0.375rem;
-        overflow-x: auto;
-        margin: 0.5rem 0;
-    }
-
-    .useful-link-content pre code {
-        background-color: transparent;
-        padding: 0;
-    }
-</style>
-@endpush
diff --git a/resources/views/partials/toast-notifications.blade.php b/resources/views/partials/toast-notifications.blade.php
index 7d1d847b7..26a70756d 100644
--- a/resources/views/partials/toast-notifications.blade.php
+++ b/resources/views/partials/toast-notifications.blade.php
@@ -7,9 +7,9 @@
      class="fixed top-4 right-4 z-9999 flex flex-col gap-2 pointer-events-none"
      aria-live="polite"
      aria-atomic="true">
-    <template x-for="toast in items()" x-bind:key="toast.id">
+    <template x-for="toast in items()" :key="toast.id">
         <div class="pointer-events-auto max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300"
-             x-bind:class="toast.removing ? 'opacity-0 translate-x-full' : 'opacity-100 translate-x-0'"
+             :class="toast.removing ? 'opacity-0 translate-x-full' : 'opacity-100 translate-x-0'"
              x-transition:enter="transition ease-out duration-300"
              x-transition:enter-start="opacity-0 translate-x-full"
              x-transition:enter-end="opacity-100 translate-x-0"
@@ -19,7 +19,7 @@
             <div class="p-4 flex items-start gap-3">
                 <div class="shrink-0">
                     <i class="fas"
-                       x-bind:class="[
+                       :class="[
                            iconFor(toast.type),
                            toast.type === 'success' ? 'text-green-500' : '',
                            toast.type === 'error' ? 'text-red-500' : '',
diff --git a/resources/views/privacy-policy.blade.php b/resources/views/privacy-policy.blade.php
index 468158ac5..c150d907b 100644
--- a/resources/views/privacy-policy.blade.php
+++ b/resources/views/privacy-policy.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.app')
+@extends('layouts.guest')
 
 @section('content')
 <div class="container mx-auto px-4 py-6">
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index e54554105..9b139a1ce 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -331,7 +331,7 @@
                             <!-- Collapsible Disable Form -->
                             <div class="space-y-3" x-data="profileEdit">
                                 <button x-show="!show2faForm"
-                                        x-on:click="toggle2fa()"
+                                        @click="toggle2fa()"
                                         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
@@ -372,7 +372,7 @@
                                                     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 x-on:click="cancel2fa()"
+                                            <button @click="cancel2fa()"
                                                     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
diff --git a/resources/views/series/viewserieslist.blade.php b/resources/views/series/viewserieslist.blade.php
index 176733972..d82aed9b1 100644
--- a/resources/views/series/viewserieslist.blade.php
+++ b/resources/views/series/viewserieslist.blade.php
@@ -61,29 +61,29 @@
 
         <!-- Series list -->
         @if(count($serieslist) > 0)
-            <div class="overflow-x-auto">
-                @foreach($serieslist as $sletter => $series)
-                    <div class="mb-6">
-                        <div class="surface-panel-alt px-4 py-2 rounded-t-lg border border-b-0">
-                            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 flex items-center">
-                                <i class="fa fa-bookmark mr-2 text-primary-600 dark:text-primary-400"></i>{{ $sletter }}
-                            </h4>
-                        </div>
+            @foreach($serieslist as $sletter => $series)
+                <div class="mb-6">
+                    <div class="surface-panel-alt px-4 py-2 rounded-t-lg border border-b-0">
+                        <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 flex items-center">
+                            <i class="fa fa-bookmark mr-2 text-primary-600 dark:text-primary-400"></i>{{ $sletter }}
+                        </h4>
+                    </div>
+
+                    <!-- Desktop Table -->
+                    <div class="hidden md:block overflow-x-auto">
                         <table class="min-w-full border border-gray-200 dark:border-gray-700">
                             <thead>
                                 <tr>
                                     <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">Name</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 w-120">Network</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 w-120">Country</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 w-140">Actions</th>
-                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 col-width-200">External Links</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 w-28">Network</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 w-28">Country</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 w-32">Actions</th>
+                                    <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-200 w-48">External Links</th>
                                 </tr>
                             </thead>
                             <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                 @foreach($series as $s)
-                                    @php
-                                        $sData = is_object($s) ? get_object_vars($s) : $s;
-                                    @endphp
+                                    @php $sData = is_object($s) ? get_object_vars($s) : $s; @endphp
                                     <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                         <td class="px-4 py-3">
                                             <div class="mb-1">
@@ -113,20 +113,17 @@
                                             @if(!empty($sData['userseriesid']))
                                                 <div class="flex justify-center gap-1">
                                                     <a href="{{ url('/myshows?action=edit&id=' . $sData['id'] . '&from=' . urlencode(request()->fullUrl())) }}"
-                                                       class="px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-sm"
-                                                       title="Edit this show">
+                                                       class="px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-sm" title="Edit this show">
                                                         <i class="fa fa-edit"></i>
                                                     </a>
                                                     <a href="{{ url('/myshows?action=delete&id=' . $sData['id'] . '&from=' . urlencode(request()->fullUrl())) }}"
-                                                       class="px-2 py-1 bg-red-600 dark:bg-red-700 text-white rounded hover:bg-red-700 dark:hover:bg-red-800 text-sm"
-                                                       title="Remove from My Shows">
+                                                       class="px-2 py-1 bg-red-600 dark:bg-red-700 text-white rounded hover:bg-red-700 dark:hover:bg-red-800 text-sm" title="Remove from My Shows">
                                                         <i class="fa fa-trash"></i>
                                                     </a>
                                                 </div>
                                             @else
                                                 <a href="{{ url('/myshows?action=add&id=' . $sData['id'] . '&from=' . urlencode(request()->fullUrl())) }}"
-                                                   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 inline-flex items-center"
-                                                   title="Add to My Shows">
+                                                   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 inline-flex items-center" title="Add to My Shows">
                                                     <i class="fa fa-plus mr-1"></i>Add
                                                 </a>
                                             @endif
@@ -134,32 +131,21 @@
                                         <td class="px-4 py-3">
                                             <div class="flex justify-center gap-2">
                                                 <a class="px-2 py-1 bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded hover:bg-primary-200 dark:hover:bg-primary-800 text-sm"
-                                                   title="View series details"
-                                                   href="{{ url('/series/' . $sData['id']) }}">
+                                                   title="View series details" href="{{ url('/series/' . $sData['id']) }}">
                                                     <i class="fa fa-tv"></i>
                                                 </a>
-
                                                 @if($sData['id'] > 0)
                                                     @if(!empty($sData['tvdb']) && $sData['tvdb'] > 0)
                                                         <a class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-xs"
-                                                           title="View at TVDB" target="_blank"
-                                                           href="{{ $site['dereferrer_link'] }}http://thetvdb.com/?tab=series&id={{ $sData['tvdb'] }}">
-                                                            TVDB
-                                                        </a>
+                                                           title="View at TVDB" target="_blank" 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-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-xs"
-                                                           title="View at TVMaze" target="_blank"
-                                                           href="{{ $site['dereferrer_link'] }}http://tvmaze.com/shows/{{ $sData['tvmaze'] }}">
-                                                            TVMaze
-                                                        </a>
+                                                           title="View at TVMaze" target="_blank" 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-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-xs"
-                                                           title="View at Trakt" target="_blank"
-                                                           href="{{ $site['dereferrer_link'] }}http://www.trakt.tv/shows/{{ $sData['trakt'] }}">
-                                                            Trakt
-                                                        </a>
+                                                           title="View at Trakt" target="_blank" href="{{ $site['dereferrer_link'] }}http://www.trakt.tv/shows/{{ $sData['trakt'] }}">Trakt</a>
                                                     @endif
                                                 @endif
                                             </div>
@@ -169,8 +155,67 @@
                             </tbody>
                         </table>
                     </div>
-                @endforeach
-            </div>
+
+                    <!-- Mobile Cards -->
+                    <div class="md:hidden border border-gray-200 dark:border-gray-700 rounded-b-lg divide-y divide-gray-200 dark:divide-gray-700">
+                        @foreach($series as $s)
+                            @php $sData = is_object($s) ? get_object_vars($s) : $s; @endphp
+                            <div class="p-4 space-y-2">
+                                <div class="flex items-start justify-between gap-2">
+                                    <div class="min-w-0 flex-1">
+                                        <a class="font-semibold text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 text-sm"
+                                           href="{{ url('/series/' . $sData['id']) }}">
+                                            {{ $sData['title'] ?? '' }}
+                                        </a>
+                                        <div class="flex flex-wrap gap-1.5 mt-1">
+                                            @if(!empty($sData['publisher']))
+                                                <span class="px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded">{{ $sData['publisher'] }}</span>
+                                            @endif
+                                            @if(!empty($sData['countries_id']))
+                                                <span class="px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded">{{ $sData['countries_id'] }}</span>
+                                            @endif
+                                        </div>
+                                    </div>
+                                    @if(!empty($sData['userseriesid']))
+                                        <div class="flex gap-1 shrink-0">
+                                            <a href="{{ url('/myshows?action=edit&id=' . $sData['id'] . '&from=' . urlencode(request()->fullUrl())) }}"
+                                               class="px-2 py-1 bg-yellow-500 text-white rounded text-xs" title="Edit"><i class="fa fa-edit"></i></a>
+                                            <a href="{{ url('/myshows?action=delete&id=' . $sData['id'] . '&from=' . urlencode(request()->fullUrl())) }}"
+                                               class="px-2 py-1 bg-red-600 text-white rounded text-xs" title="Remove"><i class="fa fa-trash"></i></a>
+                                        </div>
+                                    @else
+                                        <a href="{{ url('/myshows?action=add&id=' . $sData['id'] . '&from=' . urlencode(request()->fullUrl())) }}"
+                                           class="px-2 py-1 bg-green-600 text-white rounded text-xs shrink-0" title="Add to My Shows">
+                                            <i class="fa fa-plus mr-1"></i>Add
+                                        </a>
+                                    @endif
+                                </div>
+                                @if(!empty($sData['prevdate']))
+                                    <span class="inline-block px-2 py-0.5 text-xs bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200 rounded">
+                                        <i class="fa fa-calendar mr-1"></i>Last: {{ $sData['previnfo'] ?? '' }} aired {{ \Carbon\Carbon::parse($sData['prevdate'])->format('M d, Y') }}
+                                    </span>
+                                @endif
+                                @if($sData['id'] > 0)
+                                    <div class="flex flex-wrap gap-1.5">
+                                        @if(!empty($sData['tvdb']) && $sData['tvdb'] > 0)
+                                            <a class="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded text-xs" target="_blank"
+                                               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-0.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded text-xs" target="_blank"
+                                               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-0.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded text-xs" target="_blank"
+                                               href="{{ $site['dereferrer_link'] }}http://www.trakt.tv/shows/{{ $sData['trakt'] }}">Trakt</a>
+                                        @endif
+                                    </div>
+                                @endif
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            @endforeach
         @else
             <div class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 text-yellow-800 dark:text-yellow-200">
                 <i class="fa fa-info-circle mr-2"></i>
diff --git a/resources/views/terms.blade.php b/resources/views/terms.blade.php
index d2bf96d0b..d10e22201 100644
--- a/resources/views/terms.blade.php
+++ b/resources/views/terms.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.app')
+@extends('layouts.guest')
 
 @section('content')
     <div class="container mx-auto px-4 py-6">