diff --git a/resources/js/alpine/components/dismissible.js b/resources/js/alpine/components/dismissible.js
index 821acd0ae..ad6bdf887 100644
--- a/resources/js/alpine/components/dismissible.js
+++ b/resources/js/alpine/components/dismissible.js
@@ -86,8 +86,10 @@ Alpine.data('categoryDeleteModal', () => ({
 Alpine.data('periodFilter', (initialShowCustom) => ({
     showCustom: initialShowCustom || false,
 
-    onPeriodChange(e) {
-        if (e.target.value === 'custom') {
+    onPeriodChange() {
+        var select = this.$refs.periodForm ? this.$refs.periodForm.querySelector('select[name="period"]') : null;
+        if (!select) return;
+        if (select.value === 'custom') {
             this.showCustom = true;
         } else {
             this.showCustom = false;
diff --git a/resources/views/admin/categories/index.blade.php b/resources/views/admin/categories/index.blade.php
index 22c0b23ba..cbf2a4ac3 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" x-on:click="close()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                     <i class="fa fa-times"></i>
                 </button>
             </div>
@@ -178,7 +178,7 @@
                 </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" 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">
                     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">
diff --git a/resources/views/admin/comments/index.blade.php b/resources/views/admin/comments/index.blade.php
index 8b7a37faf..9d2f1124c 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 x-on: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 x-on: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" x-on: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"
+                    x-on: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/invitations/show.blade.php b/resources/views/admin/invitations/show.blade.php
index 2d1c242d4..744c3d5da 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" x-on:click="submit()">
                                 <i class="fas fa-ban mr-2"></i>Cancel
                             </button>
                         </form>
diff --git a/resources/views/admin/promotions/show-statistics.blade.php b/resources/views/admin/promotions/show-statistics.blade.php
index 277dcb9c4..05e34e385 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" x-on: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 01b461742..87f99e005 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" x-on: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 ecdf9e5a7..5f20947aa 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 x-on: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 x-on: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 351c3819d..76ce04875 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">
+                                           x-on:click.prevent="navigate()">
                                             <i class="fa fa-trash"></i>
                                         </a>
                                     </div>
diff --git a/resources/views/mymovies/index.blade.php b/resources/views/mymovies/index.blade.php
index bf1fd34cf..720f1a153 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">
+                                               x-on: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">
+                                   x-on: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 f58fff929..76fbb1731 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">
+                                           x-on: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">
+                                   x-on: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 e798d845c..e31143fc5 100644
--- a/resources/views/partials/admin-menu.blade.php
+++ b/resources/views/partials/admin-menu.blade.php
@@ -9,7 +9,7 @@
 
     <!-- Users -->
     <div class="mb-4" 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-users"></i>
                 <span>Users</span>
@@ -45,7 +45,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-file-alt"></i>
                 <span>Content</span>
@@ -72,7 +72,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-download"></i>
                 <span>Releases</span>
@@ -97,7 +97,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-film"></i>
                 <span>Movies</span>
@@ -116,7 +116,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-tv"></i>
                 <span>TV Shows</span>
@@ -132,7 +132,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-dragon"></i>
                 <span>AniDB</span>
@@ -148,7 +148,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-gamepad"></i>
                 <span>Games</span>
@@ -164,7 +164,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-desktop"></i>
                 <span>Console</span>
@@ -180,7 +180,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-music"></i>
                 <span>Music</span>
@@ -196,7 +196,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-book"></i>
                 <span>Books</span>
@@ -220,7 +220,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-ban"></i>
                 <span>Blacklist</span>
@@ -236,7 +236,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-code"></i>
                 <span>Regexes</span>
@@ -258,7 +258,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-server"></i>
                 <span>Groups Management</span>
@@ -283,7 +283,7 @@
 
     <!-- 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" 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">
             <div class="flex items-center space-x-3">
                 <i class="fas fa-cog"></i>
                 <span>System</span>
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index b7e249fd5..7a0e4295d 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -299,7 +299,7 @@
                             <!-- Collapsible Disable Form -->
                             <div class="space-y-3" x-data="profileEdit">
                                 <button x-show="!show2faForm"
-                                        x-on:click="toggle2fa"
+                                        x-on: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
@@ -340,7 +340,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 x-on: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