diff --git a/resources/views/appointment.blade.php b/resources/views/appointment.blade.php
index a23570f..c0fae13 100644
--- a/resources/views/appointment.blade.php
+++ b/resources/views/appointment.blade.php
@@ -61,28 +61,29 @@
                     </div>
                     <div class="modal-body">
                         <!-- Form with the fields name, email, phone, and notes -->
-                        <form>
+                        <form id ="appointment-form">
+                        <input type="hidden" name="appointment_id" id="appointment_id">
                         <div class="form-group mb-2">
                             <label for="name">Name</label>
-                            <input type="text" class="form-control mt-1" id="name" required>
+                            <input type="text" class="form-control mt-1" id="name" name="name" required>
                         </div>
                         <div class="form-group mb-2">
                             <label for="email">Email</label>
-                            <input type="email" class="form-control mt-1" id="email" required>
+                            <input type="email" class="form-control mt-1" id="email" name="email" required>
                         </div>
                         <div class="form-group mb-2">
                             <label for="phone">Phone</label>
-                            <input type="tel" class="form-control mt-1" id="phone" required>
+                            <input type="tel" class="form-control mt-1" id="phone" name="phone" required>
                         </div>
                         <div class="form-group mb-2">
                             <label for="notes">Notes</label>
-                            <textarea class="form-control mt-1" id="notes"></textarea>
+                            <textarea class="form-control mt-1" id="notes" name="notes"></textarea>
                         </div>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <button type="button" class="btn btn-primary">Book Appointment</button>
+                        <button type="button" onclick = "submitAppointment(event)" class="btn btn-primary">Book Appointment</button>
                     </div>
                 </div>
             </div>
@@ -92,7 +93,7 @@
 
 
 <!-- Modal -->
-<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
+<!-- <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -102,8 +103,7 @@
         </button>
       </div>
       <div class="modal-body">
-        <!-- Form with the fields name, email, phone, and notes -->
-        <form id = "appointment-form">
+        <form id = "appointment-form" onsubmit="submitAppointment(event)">
           <input type="hidden" name="appointment_id" id="appointment_id">
           <div class="form-group">
             <label for="name">Name</label>
@@ -125,11 +125,11 @@
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" onclick = "submitAppointment(event) " class="btn btn-primary">Book Appointment</button>
+        <button type="submit" class="btn btn-primary">Book Appointment</button>
       </div>
     </div>
   </div>
-</div>
+</div> -->
 
 
 
@@ -218,9 +218,11 @@
                 e.preventDefault();
                 var appointmentId = $(this).data("appointment-id");
                 
-                $("#modal").attr("id", "modal-" + appointmentId);
+                // $("#modal").attr("id", "modal-" + appointmentId);
                 $('#appointment-form input[name="appointment_id"]').val(appointmentId);
-                $("#modal-" + appointmentId).modal("show");
+                // $("#modal-" + appointmentId).modal("show");
+                $("#modal").modal("show");
+
 
                 // showAppointmentForm(appointmentId);
             });
@@ -235,7 +237,7 @@
     function showAppointmentForm(appointmentId){
 
              // $("#appointmentModal").modal();
-            //show Appointment booking form
+            // show Appointment booking form
            // Reset the form
           // $('#appointment-form')[0].reset();
 
@@ -250,15 +252,16 @@
     function submitAppointment(event){
         event.preventDefault();
         $.ajax({
-        url: "/appointment_submit",
-        type: "post",
-        data: $("form").serialize(),
-        success: function(response) {
-            console.log(response.appointment_detail);
-        // Handle the success response
-        // e.g. close the modal, show a success message, etc.
-        }
-    });
+            url: "/appointment_submit",
+            type: "post",
+            data: $("form").serialize(),
+            success: function(response) {
+                $("#modal").modal("hide");
+                alert('Appointment successfuuly booked');
+            // Handle the success response
+            // e.g. close the modal, show a success message, etc.
+            }
+        });
        
     }