diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CancelBookingLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CancelBookingLogic.php
new file mode 100644
index 00000000..29692a89
--- /dev/null
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CancelBookingLogic.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\ControllersLogic;
+
+use App\Classes\Exceptions\MalformedRequestException;
+use App\Classes\Modules\Bookings\Services\CancelsBooking;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Http\Resources\BookingResource;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+
+use App\Classes\Modules\Bookings\Services\FetchesBooking;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class CancelBookingLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Cancel Booking',
+            'message' => 'You have successfully canceled the Booking'
+        ];
+    }
+
+
+    /** @var FetchesBooking */
+    private $fetchesBooking;
+
+    /** @var CancelsBooking */
+    private $cancelsBooking;
+
+    /**
+     * CancelBookingLogic constructor.
+     * @param FetchesBooking $fetchesBooking
+     * @param CancelsBooking $cancelsBooking
+     */
+    public function __construct(FetchesBooking $fetchesBooking, CancelsBooking $cancelsBooking)
+    {
+        $this->fetchesBooking = $fetchesBooking;
+        $this->cancelsBooking = $cancelsBooking;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws MalformedRequestException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $booking = $this->fetchesBooking->execute(['id' => $request->route('id')]);
+
+        $bookingActivePayments = $booking->transactions()->where('type', '=', TransactionType::PAYMENT)->where('status', '!=', ApprovalStatus::PENDING_SUBMISSION)->get();
+
+        if(count($bookingActivePayments)){
+            throw new MalformedRequestException('You can\'t cancel an order with active payments');
+        }
+
+        $this->cancelsBooking->execute($booking);
+
+        return $this->resourceResponse(new BookingResource($booking));
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/ControllersLogic/RestoreBookingLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/RestoreBookingLogic.php
new file mode 100644
index 00000000..2ad8fa26
--- /dev/null
+++ b/app/Classes/Modules/Bookings/ControllersLogic/RestoreBookingLogic.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\ControllersLogic;
+
+use App\Classes\Modules\Bookings\Services\CancelsBooking;
+use App\Classes\Modules\Bookings\Services\RestoresBooking;
+use App\Http\Resources\BookingResource;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+
+use App\Classes\Modules\Bookings\Services\FetchesBooking;
+
+use App\Classes\Modules\Bookings\Standards\Rules\CanDeleteBooking;
+use App\Classes\Modules\Bookings\Services\DeletesBooking;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class RestoreBookingLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Restore Booking',
+            'message' => 'You have successfully restored the Booking'
+        ];
+    }
+
+    /** @var CanDeleteBooking */
+    private $canDeleteBooking;
+
+    /** @var FetchesBooking */
+    private $fetchesBooking;
+
+    /** @var RestoresBooking */
+    private $restoresBooking;
+
+    /**
+     * RestoreBookingLogic constructor.
+     * @param CanDeleteBooking $canDeleteBooking
+     * @param FetchesBooking $fetchesBooking
+     * @param RestoresBooking $restoresBooking
+     */
+    public function __construct(CanDeleteBooking $canDeleteBooking, FetchesBooking $fetchesBooking, RestoresBooking $restoresBooking)
+    {
+        $this->canDeleteBooking = $canDeleteBooking;
+        $this->fetchesBooking = $fetchesBooking;
+        $this->restoresBooking = $restoresBooking;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $booking = $this->fetchesBooking->execute(['id' => $request->route('id')]);
+
+        $this->restoresBooking->execute($booking);
+
+        return $this->resourceResponse(new BookingResource($booking));
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/Services/CancelsBooking.php b/app/Classes/Modules/Bookings/Services/CancelsBooking.php
new file mode 100644
index 00000000..dd9b12f3
--- /dev/null
+++ b/app/Classes/Modules/Bookings/Services/CancelsBooking.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\Services;
+
+use App\Classes\General\Eloquent\AbstractDeleteRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Models\Booking;
+
+class CancelsBooking extends AbstractUpdateRecord
+{
+
+    /**
+     * @param Booking $model
+     * @return mixed
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(Booking $model) {
+
+        $model->status = ApprovalStatus::SUSPENDED;
+
+        return $this->handler($model);
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/Services/RestoresBooking.php b/app/Classes/Modules/Bookings/Services/RestoresBooking.php
new file mode 100644
index 00000000..9efef208
--- /dev/null
+++ b/app/Classes/Modules/Bookings/Services/RestoresBooking.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\Services;
+
+use App\Classes\General\Eloquent\AbstractDeleteRecord;
+use App\Classes\General\Eloquent\AbstractUpdateRecord;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Models\Booking;
+
+class RestoresBooking extends AbstractUpdateRecord
+{
+
+    /**
+     * @param Booking $model
+     * @return mixed
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function execute(Booking $model) {
+
+        $model->status = ApprovalStatus::APPROVED;
+
+        return $this->handler($model);
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/Standards/Rules/CanDeleteBooking.php b/app/Classes/Modules/Bookings/Standards/Rules/CanDeleteBooking.php
index 1b5acee4..dfd307bc 100644
--- a/app/Classes/Modules/Bookings/Standards/Rules/CanDeleteBooking.php
+++ b/app/Classes/Modules/Bookings/Standards/Rules/CanDeleteBooking.php
@@ -34,7 +34,7 @@ class CanDeleteBooking extends AbstractRule
 
 
     /**
-     * @param BookingObject $object
+     * @param $object
      * @return bool
      */
     protected function criteria($object): bool
diff --git a/app/Http/Controllers/Bookings/CancelBookingController.php b/app/Http/Controllers/Bookings/CancelBookingController.php
new file mode 100644
index 00000000..f31a80a1
--- /dev/null
+++ b/app/Http/Controllers/Bookings/CancelBookingController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Bookings;
+
+use App\Classes\Modules\Bookings\ControllersLogic\CancelBookingLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class CancelBookingController
+{
+    /**
+     * @param Request $request
+     * @param CancelBookingLogic $logic
+     * @return JsonResponse
+     */
+    public function cancel(Request $request, CancelBookingLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Bookings/RestoreBookingController.php b/app/Http/Controllers/Bookings/RestoreBookingController.php
new file mode 100644
index 00000000..5b4aa809
--- /dev/null
+++ b/app/Http/Controllers/Bookings/RestoreBookingController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers\Bookings;
+
+use App\Classes\Modules\Bookings\ControllersLogic\RestoreBookingLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class RestoreBookingController
+{
+    /**
+     * @param Request $request
+     * @param RestoreBookingLogic $logic
+     * @return JsonResponse
+     */
+    public function restore(Request $request, RestoreBookingLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/elements/BookingComponent.vue b/resources/assets/vue/components/bookings/elements/BookingComponent.vue
index febce6ba..509e9840 100644
--- a/resources/assets/vue/components/bookings/elements/BookingComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingComponent.vue
@@ -52,17 +52,26 @@
                 Pending...
             </div>
         </div>
-        <div class="col-2 p-r-5">
+        <div class="col-2 p-r-5 parentContainer">
             <div class="row align-items-center">
                 <div class="col-auto ml-auto">
-                    <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal hide" data-type="deleteBank">
-                        <i class="fa fa-times fa-fw"></i>
-                    </button>
+                    <div class="btn btn-xs btn-default b-rad-none requestModal" v-if="item.status !== 5 && item.paid_amount === 0 && item.floating_amount === 0 && $store.getters.isAdmin" data-type="cancelBooking">
+                        <i class="fa fa-fw fa-times text-danger"></i>
+                    </div>
+                    <div class="btn btn-xs btn-default b-rad-none requestModal" v-if="item.status === 5 && item.paid_amount === 0 && item.floating_amount === 0 && $store.getters.isAdmin" data-type="restoreBooking">
+                        <i class="fa fa-fw fa-history text-success"></i>
+                    </div>
                     <a class="btn btn-xs btn-info b-rad-none" :href="route('booking.details', item.marking)">
                         <i class="fa fa-angle-right fa-fw"></i>
                     </a>
                 </div>
             </div>
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="cancelBooking">
+                <cancel-booking-form-component :data="item" section="oderList" class="text-center"></cancel-booking-form-component>
+            </modal-component>
+            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="restoreBooking">
+                <restore-booking-form-component :data="item" section="oderList" class="text-center"></restore-booking-form-component>
+            </modal-component>
         </div>
     </div>
 </template>
@@ -70,6 +79,11 @@
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
     export default {
+        data(){
+            return {
+                expanded: false
+            }
+        },
         mixins: [componentHandler]
     }
 </script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/forms/CancelBookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/CancelBookingFormComponent.vue
new file mode 100644
index 00000000..b32275f1
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/CancelBookingFormComponent.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to cancel this order?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.booking.cancel', item.id), 'put', section, true, true)">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, ModalFormHandler],
+        methods: {
+            successHandler(){
+                this.closeModal();
+                this.$store.dispatch('reloadList', {'name': 'customerTransferListSection'});
+                this.$store.dispatch('reloadList', {'name': 'transferSection'});
+            }
+        }
+
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/forms/RestoreBookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/RestoreBookingFormComponent.vue
new file mode 100644
index 00000000..3cd2227d
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/RestoreBookingFormComponent.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to restore this order?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.booking.restore', item.id), 'put', section, true, true)">Restore</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, modalFormHandler],
+        methods: {
+            successHandler(){
+                this.closeModal();
+                this.$store.dispatch('reloadList', {'name': 'customerTransferListSection'});
+                this.$store.dispatch('reloadList', {'name': 'transferSection'});
+            }
+        }
+
+    }
+</script>
\ No newline at end of file
diff --git a/routes/booking.php b/routes/booking.php
index 03f9bb3f..5fc970c4 100644
--- a/routes/booking.php
+++ b/routes/booking.php
@@ -7,6 +7,8 @@ Route::group(['prefix' => 'booking', 'as' => 'booking.', 'namespace' => 'Booking
     Route::get('/list', 'ListBookingsController@list')->name('list');
     Route::post('/create', 'CreateBookingController@create')->name('create');
     Route::put('/update/{id}', 'UpdateBookingController@update')->name('update');
+    Route::put('/cancel/{id}', 'CancelBookingController@cancel')->name('cancel');
+    Route::put('/restore/{id}', 'RestoreBookingController@restore')->name('restore');
     Route::delete('/delete/{id}', 'DeleteBookingController@delete')->name('delete');
 
     Route::group(['prefix' => '{id}/payment', 'as' => 'payment.'], function () {