diff --git a/resources/views/filament/tenant/pages/kanban.blade.php b/resources/views/filament/tenant/pages/kanban.blade.php
index b52d363..a62849e 100644
--- a/resources/views/filament/tenant/pages/kanban.blade.php
+++ b/resources/views/filament/tenant/pages/kanban.blade.php
@@ -1,26 +1,34 @@
 <x-filament-panels::page>
     @php $columns = $this->getColumns(); @endphp
 
-    <div class="overflow-x-auto pb-4">
+    <div class="overflow-x-auto pb-4" x-data="{ dragId: null }">
         <div class="flex gap-3 min-w-max" id="kanban-board">
             @foreach ($columns as $status => $col)
-                <div class="w-72 flex-shrink-0 bg-gray-50 dark:bg-gray-800 rounded-lg p-3"
-                     data-status="{{ $status }}"
-                     ondragover="event.preventDefault(); this.classList.add('ring-2','ring-primary-500')"
-                     ondragleave="this.classList.remove('ring-2','ring-primary-500')"
-                     ondrop="event.preventDefault(); this.classList.remove('ring-2','ring-primary-500');
-                            const id = event.dataTransfer.getData('cardId');
-                            $wire.moveCard(parseInt(id), '{{ $status }}')">
+                <div
+                    class="w-72 flex-shrink-0 bg-gray-50 dark:bg-gray-800 rounded-lg p-3 transition"
+                    :class="{ 'ring-2 ring-primary-500': false }"
+                    @dragover.prevent="$el.classList.add('ring-2','ring-primary-500')"
+                    @dragleave="$el.classList.remove('ring-2','ring-primary-500')"
+                    @drop.prevent="
+                        $el.classList.remove('ring-2','ring-primary-500');
+                        if (dragId) {
+                            $wire.moveCard(parseInt(dragId), '{{ $status }}');
+                            dragId = null;
+                        }
+                    "
+                >
                     <div class="flex items-center justify-between mb-3">
                         <h3 class="font-semibold text-sm">{{ $col['label'] }}</h3>
                         <span class="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded-full">{{ $col['count'] }}</span>
                     </div>
                     <div class="space-y-2 min-h-[100px]">
                         @forelse ($col['cards'] as $wo)
-                            <div class="bg-white dark:bg-gray-900 rounded-md p-3 border border-gray-200 dark:border-gray-700 cursor-move hover:shadow-md transition"
-                                 draggable="true"
-                                 ondragstart="event.dataTransfer.setData('cardId', '{{ $wo->id }}'); this.classList.add('opacity-50')"
-                                 ondragend="this.classList.remove('opacity-50')">
+                            <div
+                                class="bg-white dark:bg-gray-900 rounded-md p-3 border border-gray-200 dark:border-gray-700 cursor-move hover:shadow-md transition"
+                                draggable="true"
+                                @dragstart="dragId = '{{ $wo->id }}'; $el.classList.add('opacity-50')"
+                                @dragend="$el.classList.remove('opacity-50')"
+                            >
                                 <div class="text-xs font-mono text-gray-500">{{ $wo->number }}</div>
                                 <div class="text-sm font-semibold mt-1 truncate">{{ $wo->client?->name ?? '—' }}</div>
                                 <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 truncate">