diff --git a/app/Classes/Modules/Bookings/ControllersLogic/DeletePurchaseOrderPdfLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/DeletePurchaseOrderPdfLogic.php
new file mode 100644
index 00000000..a4dd30a1
--- /dev/null
+++ b/app/Classes/Modules/Bookings/ControllersLogic/DeletePurchaseOrderPdfLogic.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\ControllersLogic;
+
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Bookings\Services\FetchesBooking;
+use App\Classes\ValueObjects\Constants\DocumentType;
+use App\Classes\Modules\Documents\Standards\Rules\CanDeleteDocument;
+use App\Classes\Modules\Documents\Services\DeletesDocument;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class DeletePurchaseOrderPdfLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Purchase Order PDF Deleted',
+            'message' => 'You have successfully deleted the Purchase order PDF'
+        ];
+    }
+
+    /** @var FetchesBooking */
+    private $fetchesBooking;
+
+    /** @var DeletesDocument */
+    private $deletesDocument;
+
+    /** @var CanDeleteDocument */
+    private $canDeleteDocument;
+
+
+    /**
+     * DeletePurchaseOrderPdfLogic constructor.
+     * @param FetchesBooking $fetchesBooking
+     * @param DeletesDocument $deletesDocument
+     * @param CanDeleteDocument $canDeleteDocument
+     */
+    public function __construct(fetchesBooking $fetchesBooking, DeletesDocument $deletesDocument, CanDeleteDocument $canDeleteDocument)
+    {
+        $this->fetchesBooking = $fetchesBooking;
+        $this->deletesDocument = $deletesDocument;
+        $this->canDeleteDocument = $canDeleteDocument;
+    }
+
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\MalformedRequestException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+
+        $booking = $this->fetchesBooking->execute(['id' => $request->route('id')]);
+
+        $document = $booking->documents()->where('document_type', DocumentType::ECOMMERCE_PURCHASE_ORDER)->first();
+
+        $this->canDeleteDocument->passes();
+
+        $this->deletesDocument->execute($document);
+
+        // todo: delete purchaseOrderFor1688
+        // if(in_array($booking->company->id, [199, 510])){
+        //     $this->createPurchaseOrderFor1688OrderProcessor->execute($booking);
+        // }
+
+        return $this->response([]);
+    }
+
+}
diff --git a/app/Http/Controllers/Bookings/DeletePurchaseOrderPdfController.php b/app/Http/Controllers/Bookings/DeletePurchaseOrderPdfController.php
new file mode 100644
index 00000000..0113c0d5
--- /dev/null
+++ b/app/Http/Controllers/Bookings/DeletePurchaseOrderPdfController.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers\Bookings;
+
+use App\Classes\Modules\Bookings\ControllersLogic\DeletePurchaseOrderPdfLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class DeletePurchaseOrderPdfController
+{
+
+    public function delete(Request $request, DeletePurchaseOrderPdfLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/forms/DeletePoFormComponent.vue b/resources/assets/vue/components/bookings/forms/DeletePoFormComponent.vue
new file mode 100644
index 00000000..b8701f85
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/DeletePoFormComponent.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 the Purchase Order PDF?</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.po.pdf.delete', data.id), 'delete', 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]
+
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
index fe2826e4..073d7741 100644
--- a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
@@ -261,6 +261,15 @@
                                             </a>
                                         </div>
                                     </div>
+                                    <!-- <div class="row m-t-15" v-if="$store.getters.isAdmin && booking.service.id === 4 && booking.status == 3">-->
+                                    <div class="row m-t-15" v-if="$store.getters.isAdmin && booking.service.id === 4">
+                                        <div class="col-sm col-md-auto">
+                                            <div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal" data-type="deletePo">Delete PO</div>
+                                        </div>
+                                        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deletePo">
+                                            <delete-po-form-component :data="booking" :section="section" class="text-center"></delete-po-form-component>
+                                        </modal-component>
+                                    </div>
                                     <div class="row m-b-25" v-if="$store.getters.isAdmin && booking.service.id === 4 && booking.status !== 3">
                                         <div class="col">
                                             <div class="row" v-if="!booking.documents.ecommerce_purchase_order">
diff --git a/routes/booking.php b/routes/booking.php
index f8fe0b85..f964d23c 100644
--- a/routes/booking.php
+++ b/routes/booking.php
@@ -29,6 +29,7 @@ Route::group(['prefix' => 'booking', 'as' => 'booking.', 'namespace' => 'Booking
 
     Route::post('{id}/purchase_order/verification', 'ApprovePurchaseOrderController@approve')->name('po.approval');
     Route::post('{id}/purchase_order/pdf', 'UploadPurchaseOrderController@upload')->name('po.pdf');
+    Route::delete('{id}/purchase_order/pdf', 'DeletePurchaseOrderPdfController@delete')->name('po.pdf.delete');
 
     Route::put('{id}/updateAmount', 'UpdateBookingAmountController@update')->name('booking_amount.update');