diff --git a/src/resources/views/pages/flight/index.edge b/src/resources/views/pages/flight/index.edge
index 578d53b..4853a2b 100644
--- a/src/resources/views/pages/flight/index.edge
+++ b/src/resources/views/pages/flight/index.edge
@@ -70,9 +70,27 @@
                                 <a href="/admin/flight/{{ data.id }}" class="shadow-md py-1 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg border border-transparent bg-green-300 text-green-800 hover:bg-green-400 focus:outline-none focus:bg-green-200 disabled:opacity-50 disabled:pointer-events-none">
                                     Detail
                                 </a>
-                                <a href="#" class="shadow-md py-1 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg border border-transparent bg-yellow-300 text-yellow-800 hover:bg-yellow-400 focus:outline-none focus:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none">
-                                    Edit
-                                </a>
+
+                                @component('components/ui/modal', {
+                                    title: 'Delete Flight',
+                                    buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none',
+                                    })
+                                    @slot('header')
+                                        Delete
+                                    @end
+                                    @slot('content')
+                                    <div class="flex flex-col gap-y-2">
+                                        <h1 class="text-sm text-gray-500">Are you sure you want to delete this flight?</h1>
+
+                                        <div class="flex flex-row gap-x-2">
+                                            <button type="button" onclick="deleteFlight({{ data.id }})" class="shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none text-center w-full justify-center">Delete</button>
+                                            <button type="button" @click="modalOpen=false" class="shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-300 text-blue-800 hover:bg-blue-400 focus:outline-none focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none text-center w-full justify-center">Cancel</button>
+                                        </div>
+                                    </div>
+                                    
+                                    @end
+                                @end
+                            
                             </div>
                         </td>
                     </tr>
@@ -87,6 +105,39 @@
     </div>
 </div>
 
+<script>
+    const token = '{{ token }}'
+
+    function deleteFlight(id) {
+        $.ajax({
+            url: '{{ api }}/api/v1/flights/' + id,
+            method: 'DELETE',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            success: function (response) {
+                showToast("success", "Success", "Flight deleted successfully!");
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            },
+            error: function (xhr) {
+                if (xhr.responseJSON && xhr.responseJSON.errors) {
+                    const errors = xhr.responseJSON.errors;
+                    let errorMessages = '';
+                    errors.forEach(error => {
+                        errorMessages += `${error.field}: ${error.message}\n`;
+                    });
+                    showToast("error", "Error", errorMessages);
+                } else {
+                    showToast("error", "Error", "An error occurred. Please try again.");
+                }
+            },
+        });
+    }
+
+</script>
+
 
 @endslot
 @end
\ No newline at end of file