diff --git a/app/views/crm/home/_booking.html.erb b/app/views/crm/home/_booking.html.erb
index 7075d685..13702bf6 100644
--- a/app/views/crm/home/_booking.html.erb
+++ b/app/views/crm/home/_booking.html.erb
@@ -1,11 +1,12 @@
+
 <!--- Booking Items -->
 <div class="card-columns" style="padding-top:10px">
 
   <% @i = 0 %>
   <% @booking.each do |booking| %>
     <% if booking.booking_status == "new" %>
-    <div class="card booking_click" data-ref="<%= api_booking_path booking.id%>" id="booking_block">
-      <div class="card-block" id="card-block"  style="width:100%;">
+    <div class="card">
+      <div class="card-block booking_click" data-ref="<%= api_booking_path booking.id%>" id="card-block booking_block"  style="width:100%;">
         <h4 class="card-title">
            <%= @i += 1 %> . <%= booking.dining_facility.name %>
            - <%= booking.id %>
@@ -20,10 +21,10 @@
       <div class="card-footer">
         <div class="row">
           <div class="col-md-6">
-          <button id="assign" data-booking-ref="<%= booking.id%>" data-type="complete" class="btn assign btn-primary btn-sm btn-block">ASSIGN</button>
+          <button id="assign" data-id="<%= booking.id %>" data-type="complete" class="btn assign btn-primary btn-sm btn-block">ASSIGN</button>
         </div>
          <div class="col-md-6">
-          <button id="cancel" data-booking-ref="<%= booking.id%>" data-type="cancel" class="btn btn-danger cancel btn-sm btn-block">CANCLE</button>
+          <button id="cancel" data-id="<%= booking.id %>" data-type="cancel" class="btn btn-danger cancel btn-sm btn-block">CANCLE</button>
         </div>
         </div>
       </div>
@@ -42,16 +43,16 @@ $(function(){
     }); 
 
     $('.assign').click(function(e){
-      var booking_id = $('#assign').attr('data-booking-ref');
-      alert(booking_id);
-      var type = $('#assign').attr('data-type');
+      var booking_id = $(this).attr("data-id")
+      var type       = $(this).attr("data-type")
+
       update_booking(booking_id,type)
     });
 
     $('.cancel').click(function(e){
-      var booking_id = $('#cancel').attr('data-booking-ref');
-      alert(booking_id);
-      var type = $('#cancel').attr('data-type');
+      var booking_id = $(this).attr("data-id")
+      var type       = $(this).attr("data-type")
+
       update_booking(booking_id,type)
     });
 
@@ -95,9 +96,15 @@ function update_booking(booking_id,type) {
           type: "POST",         
           url: "crm/update_booking/" ,
           data: {booking_id:booking_id,type:type},
-        //  dataType: "json",
+          dataType: "json",
           success: function(data) {
-            
+            if(data.status == true && data.type == "cancel")
+            { 
+              alert('Booking has canceled!');
+            }else{
+              alert('Booking has completed!');
+            }
+            location.reload();
           }  
   });
 }