diff --git a/src/resources/views/pages/airline/index.edge b/src/resources/views/pages/airline/index.edge
index d1b081e..6d66de2 100644
--- a/src/resources/views/pages/airline/index.edge
+++ b/src/resources/views/pages/airline/index.edge
@@ -56,10 +56,47 @@
                         <td><a href="/admin/airline/{{ airline.iataCode }}/airplanes" class="text-blue-600 hover:text-blue-800 hover:underline">{{ airline.name }}</a></td>
                         <td>{{ airline._count.Airplanes }}</td>
                         <td>
-                            {{--  <a href="{{ api }}/airlines/{{ airline.id }}/edit" class="btn btn-primary">Edit</a>  --}}
-                            <button type="button" class="shadow-md py-1 px-3 inline-flex items-center gap-x-2 text-sm 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
-                              </button>
+                            <div class="flex flex-row gap-x-2">
+                                @component('components/ui/modal', {
+                                    title: 'Edit Airline',
+                                    buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm 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',
+                                    })
+                                    @slot('header')
+                                        Edit
+                                    @end
+                                    @slot('content')
+                                    <div class="flex flex-col gap-y-2">
+                                        <h1 class="text-sm text-gray-500">Edit Airline</h1>
+                                        {{ airline.iataCode }}
+
+                                        <div class="flex flex-row gap-x-2">
+                                            {{--  <button type="button" onclick="editAirline({{ airline.iataCode }})" 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
+                                @component('components/ui/modal', {
+                                    title: 'Delete Airline',
+                                    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 Airline?</h1>
+
+                                        <div class="flex flex-row gap-x-2">
+                                            <button type="button" onclick="deleteAirline('{{ airline.iataCode }}')" 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>
                 @end
@@ -116,8 +153,38 @@
                 }
             });
         });
+    
+    
     });
 
+    function deleteAirline(iataCode) {
+        $.ajax({
+            url: '{{ api }}/api/v1/airlines/' + iataCode,
+            method: 'DELETE',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            success: function (response) {
+                showToast("success", "Success", "Airline 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