diff --git a/src/resources/views/components/ui/city-card.edge b/src/resources/views/components/ui/city-card.edge
index b1f0b37..dfc74cb 100644
--- a/src/resources/views/components/ui/city-card.edge
+++ b/src/resources/views/components/ui/city-card.edge
@@ -3,14 +3,8 @@
         class="w-full h-32 object-cover rounded-t-lg">
     <div class="mt-2">
         <div class="flex flex-row w-full justify-between">
-            <h3 class="text-lg font-semibold">{{ name }}</h3>
+            <h3 class="text-lg font-semibold">{{ name }} <span class="text-sm text-gray-500">({{ cityCode }})</span></h3>
             {{{ await $slots.main() }}}
-            {{-- <a href="{{ edit }}">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                    <path fill="#1800ca"
-                        d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1m-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71m10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z" />
-                </svg>
-            </a> --}}
         </div>
         <p class="text-gray-600">{{ country }} ({{ countryCode }})</p>
         <p class="text-sm text-gray-500">
diff --git a/src/resources/views/pages/airport/index.edge b/src/resources/views/pages/airport/index.edge
index 4a4a22f..5e23f45 100644
--- a/src/resources/views/pages/airport/index.edge
+++ b/src/resources/views/pages/airport/index.edge
@@ -45,7 +45,7 @@
                     <select id="city" name="city" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                         <option value="" selected>Choose a City</option>
                         @each(city in cities)
-                            <option value="{{ city.id }}">{{ city.name }}</option>
+                            <option value="{{ city.code }}">{{ city.name }}</option>
                         @end
                     </select>
                 </div>
@@ -94,5 +94,51 @@
     </div>
 </div>
 
+<script>
+    // const api = "{{ api }}/api/v1/airports"
+    // console.log({api})
+
+    $(document).ready(function () {
+    $('#airportForm').on('submit', function (e) {
+        e.preventDefault(); // Mencegah reload halaman saat submit
+
+        // Ambil data dari form
+        const formData = {
+            iataCode: $('#iataCode').val(),
+            name: $('#name').val(),
+            latitude: parseFloat($('#latitude').val()), // Konversi ke float
+            longitude: parseFloat($('#longitude').val()), // Konversi ke float
+            type: $('#type').val(),
+            cityId: $('#city').val(),
+        };
+
+        $.ajax({
+            url: '{{ api }}/api/v1/airports',
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(formData),
+            success: function (response) {
+                showToast("success", "Success", "Airport created successfully!");
+                window.location.reload();
+            },
+            error: function (xhr) {
+                // Tampilkan pesan error jika terjadi kesalahan
+                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
diff --git a/src/resources/views/pages/city/index.edge b/src/resources/views/pages/city/index.edge
index d686e32..5fa9b29 100644
--- a/src/resources/views/pages/city/index.edge
+++ b/src/resources/views/pages/city/index.edge
@@ -64,6 +64,7 @@
                 @component('components/ui/city-card', {
                 imageUrl: city.imageUrl,
                 name: city.name,
+                cityCode: city.code,
                 country: city.country,
                 countryCode: city.countryCode,
                 continent: city.continent,
@@ -117,10 +118,6 @@
         });
     });
 </script>
-</script>
     
-
-
-
 @endslot
 @end
\ No newline at end of file