diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 7a44da9a..35a3f1e8 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -34,6 +34,7 @@ class BookingController extends Controller
                                     })
                                     ->orderby('updated_at','desc')
                                     ->paginate(10);
+                                
 
 
 
@@ -734,10 +735,10 @@ class BookingController extends Controller
         {
             return response()->json(['message'=>'Access denied'],403);
         }
-
+        
         $booking->is_cancel = true;
         $booking->save();
-
+       
         return response()->json(['message'=>'Success'],200);
     }
 
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 70cb0171..1106764d 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -307,7 +307,7 @@
                 <div slot="reference" class="name-wrapper">
                   <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
                 </div>
-              </el-popover>
+              </el-popover>       
             </template>
           </el-table-column>
           <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
@@ -315,11 +315,18 @@
           <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
                            label="" width="180" filter-placement="bottom-end">
             <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> View Status </el-button>
+            
+             
             <!-- <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
               <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
             </template> -->
           </el-table-column>
+<el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { cancelBooking(scope.row.id) }"> Cancel Booking </el-button>
+            </el-table-column>
+          
           
         </el-table>
         <div align="right">
@@ -527,6 +534,7 @@ export default {
     this.getBooking();
     this.initBooking();
     this.getRate();
+    this.cancelBooking();
     this.getBookingTableComplete();
   },
   methods: {
@@ -567,6 +575,13 @@ export default {
         $this.makePagination(response.data)
       })
     },
+    cancelBooking(id){
+      console.log(id)
+      let $this = this
+      axios.post("api/booking/"+id+"/cancel").then(response => {
+        this.getBooking();
+      })
+    },
     getBookingTableComplete(){
       let $this = this
       axios.get(this.completeBookingurl).then(response => {
diff --git a/routes/api.php b/routes/api.php
index 46836995..cb0e904d 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -34,15 +34,14 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::delete('booking/{book_id}', 'BookingController@delete');
 	Route::post('booking/', 'BookingController@store');
 	Route::post('booking/calculation', 'BookingController@calculation');
-	Route::post('booking/{book_id}/cancel', 'BookingController@cancel');
+	Route::post('booking/{id}/cancel', 'BookingController@cancel');
 	Route::post('booking/{id}/upload-user-bankslip', 'BookingController@uploadbankslip');
     Route::post('booking/{id}/upload-po', 'BookingController@uploadPurchaseOrder');
     Route::post('booking/{id}/confirm-po', 'BookingController@confirmPurchaseOrder');
 	Route::patch('booking/{id}/bankslip-amount', 'BookingController@updateBankSlipAmount');
 	Route::post('booking/{book_id}/reject-bank-slip','BookingController@rejectBankSlip');
 	Route::post('booking/{book_id}/approve-bank-slip','BookingController@approveBankSlip');
-    Route::post('booking/{book_id}/cancel', 'BookingController@cancel');
-	Route::get('booking/', 'BookingController@index'); 
+    Route::get('booking/', 'BookingController@index'); 
 	Route::get('user-complete-booking', 'BookingController@userComplete');
 
 	Route::get('user', 'UserController@show');