diff --git a/app/Classes/Modules/Transactions/ControllersLogic/UpdatePaymentTransactionStatusLogic.php b/app/Classes/Modules/Transactions/ControllersLogic/UpdatePaymentTransactionStatusLogic.php
new file mode 100644
index 00000000..11f0a377
--- /dev/null
+++ b/app/Classes/Modules/Transactions/ControllersLogic/UpdatePaymentTransactionStatusLogic.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Classes\Modules\Transactions\ControllersLogic;
+
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Transactions\Services\FetchesTransaction;
+use App\Classes\Modules\Transactions\Services\DeletesTransaction;
+use App\Classes\Modules\Transactions\Services\UpdatesTransactionStatus;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\Modules\Documents\Services\DeletesDocument;
+use App\Models\Company;
+use App\Models\Document;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+use App\Classes\Modules\Transactions\Processors\CreateInvoiceTransactionProcessor;
+
+
+class UpdatePaymentTransactionStatusLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Updated Transaction',
+            'message' => 'You have successfully updated a transaction'
+        ];
+    }
+
+    /** @var FetchesTransaction */
+    private $fetchesTransaction;
+
+    /** @var UpdatesTransactionStatus */
+    private $updatesTransactionStatus;
+
+    /** @var DeletesDocument */
+    private $deletesDocument;
+
+    /**
+     * CreatePaymentVerificationDocumentLogic constructor.
+     * @param FetchesTransaction $fetchesTransaction
+     * @param UpdatesTransactionStatus $updatesTransactionStatus
+     * @param DeletesDocument $deletesDocument
+     */
+    public function __construct(FetchesTransaction $fetchesTransaction, UpdatesTransactionStatus $updatesTransactionStatus, DeletesDocument $deletesDocument)
+    {
+        $this->fetchesTransaction = $fetchesTransaction;
+        $this->updatesTransactionStatus = $updatesTransactionStatus;
+        $this->deletesDocument = $deletesDocument;
+    }
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $transaction = $this->fetchesTransaction->execute(['id' => $request->route('id')]);
+        $status = $request->route('status');
+
+        $this->updatesTransactionStatus->execute($transaction, $status === 'pending' ? ApprovalStatus::PENDING_VERIFICATION : ApprovalStatus::COMPLETED);
+
+        if ($status == 'pending') {
+            $document = $transaction->documents()->first();
+            if ($document) {
+                $this->deletesDocument->execute($document);
+            }
+        }
+
+        return $this->response([]);
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Transactions/UpdatePaymentTransactionStatusController.php b/app/Http/Controllers/Transactions/UpdatePaymentTransactionStatusController.php
new file mode 100644
index 00000000..047bc1dc
--- /dev/null
+++ b/app/Http/Controllers/Transactions/UpdatePaymentTransactionStatusController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Transactions;
+
+use App\Classes\Modules\Transactions\ControllersLogic\UpdatePaymentTransactionStatusLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class UpdatePaymentTransactionStatusController
+{
+    public function update(Request $request, UpdatePaymentTransactionStatusLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
index 494427cb..415655a5 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
@@ -41,6 +41,14 @@
                                         </div>
                                     </div>
                                     <bank-in-component :data="item"></bank-in-component>
+                                    <div class="row" v-if="item.status === 2">
+                                        <div class="col">
+                                            <span class="text-complete fs-10 pointer requestModal" data-type="topUpModal">Cancel this order?</span>
+                                        </div>
+                                    </div>
+                                    <modal-component styleType="fill-in" type="topUpModal">
+                                        <delete-transaction-form-component :data="item" section="section" class="text-center"></delete-transaction-form-component>
+                                    </modal-component>
                                 </div>
                             </div>
                         </div>
diff --git a/resources/assets/vue/components/bookings/forms/DeleteTransactionFormComponent.vue b/resources/assets/vue/components/bookings/forms/DeleteTransactionFormComponent.vue
new file mode 100644
index 00000000..cf618df1
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/DeleteTransactionFormComponent.vue
@@ -0,0 +1,33 @@
+<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 delete this transaction? You will not be able to recover your booking after confirming your action.</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.transaction.bill.delete', item.id), 'delete', section, true, true)">Delete</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]
+
+    }
+</script>
\ No newline at end of file
diff --git a/routes/transaction.php b/routes/transaction.php
index 17502743..578b02c2 100644
--- a/routes/transaction.php
+++ b/routes/transaction.php
@@ -10,6 +10,8 @@ Route::group(['prefix' => 'transactions', 'namespace' => 'Transactions', 'as' =>
     route::post('/supplier/{id}/bill/create', 'CreateSupplierTransactionController@create')->name('supplier.create');
     route::post('{id}/bill/verification', 'CreatePaymentProofDocumentController@verify')->name('bill.verification');
     route::post('{id}/bill/pay', 'CreatePaymentProofDocumentController@pay')->name('bill.pay');
+    Route::put('/{id}/bill/{status}', 'UpdatePaymentTransactionStatusController@update')->where('status', 'pending|complete')->name('bill.status');
+
     route::delete('{id}/bill/delete', 'DeletePaymentProofDocumentController@delete')->name('bill.delete');
 
     Route::post('booking/{id}/details/update', 'CreatePurchaseOrderTransactionController@create')->name('po.create');