diff --git a/resources/js/alpine/components/search-autocomplete.js b/resources/js/alpine/components/search-autocomplete.js
index 89bcab50a..50982b362 100644
--- a/resources/js/alpine/components/search-autocomplete.js
+++ b/resources/js/alpine/components/search-autocomplete.js
@@ -84,11 +84,12 @@ Alpine.data('sortDropdown', () => ({
     open: false,
 
     toggle() { this.open = !this.open; },
-    close() { this.open = false; }
+    close() { this.open = false; },
+    chevronClass() { return this.open ? 'rotate-180' : ''; }
 }));
 
 /**
- * Document-level delegation for search autocomplete and sort dropdowns
+ * Document-level delegation for search autocomplete
  * without x-data attributes.
  */
 (function() {
@@ -161,31 +162,4 @@ Alpine.data('sortDropdown', () => ({
         var formId = el.getAttribute('data-autocomplete-form');
         if (el.id && ddId) initAutocomplete(el.id, ddId, formId, 'autocomplete-suggestion', 10);
     });
-
-    // Sort dropdowns delegation
-    document.querySelectorAll('.sort-dropdown').forEach(function(dd) {
-        if (dd.closest('[x-data]')) return;
-        var toggle = dd.querySelector('.sort-dropdown-toggle');
-        var menu = dd.querySelector('.sort-dropdown-menu');
-        var chevron = dd.querySelector('.sort-dropdown-chevron');
-        if (!toggle || !menu) return;
-        if (toggle.hasAttribute('data-sort-initialized')) return;
-        toggle.setAttribute('data-sort-initialized', 'true');
-        toggle.addEventListener('click', function(ev) {
-            ev.preventDefault(); ev.stopPropagation();
-            var isOpen = !menu.classList.contains('hidden');
-            document.querySelectorAll('.sort-dropdown-menu').forEach(function(m) { m.classList.add('hidden'); });
-            document.querySelectorAll('.sort-dropdown-chevron').forEach(function(c) { c.classList.remove('rotate-180'); });
-            if (!isOpen) { menu.classList.remove('hidden'); if (chevron) chevron.classList.add('rotate-180'); }
-        });
-    });
-    if (!window._sortDropdownOutsideListenerAdded) {
-        window._sortDropdownOutsideListenerAdded = true;
-        document.addEventListener('click', function(ev) {
-            if (!ev.target.closest('.sort-dropdown')) {
-                document.querySelectorAll('.sort-dropdown-menu').forEach(function(m) { m.classList.add('hidden'); });
-                document.querySelectorAll('.sort-dropdown-chevron').forEach(function(c) { c.classList.remove('rotate-180'); });
-            }
-        });
-    }
 })();
diff --git a/resources/views/components/sort-dropdown.blade.php b/resources/views/components/sort-dropdown.blade.php
index 8f8d86210..b000f438f 100644
--- a/resources/views/components/sort-dropdown.blade.php
+++ b/resources/views/components/sort-dropdown.blade.php
@@ -1,14 +1,23 @@
-<div class="relative inline-block sort-dropdown">
+<div class="relative inline-block" x-data="sortDropdown" @click.outside="close()">
     <button
         type="button"
-        class="sort-dropdown-toggle 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"
+        x-on: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 sort-dropdown-chevron"></i>
+        <i class="fas fa-chevron-down text-xs text-gray-400 dark:text-gray-300 transition-transform" x-bind:class="chevronClass()"></i>
     </button>
 
-    <div class="sort-dropdown-menu hidden absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-600 focus:outline-none">
+    <div x-show="open"
+         x-cloak
+         x-transition:enter="transition ease-out duration-100"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-75"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95"
+         class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-600 focus:outline-none">
         <div class="py-1 max-h-80 overflow-y-auto">
             @foreach($sortOptions as $sortKey => $sortData)
                 <a