diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CreatePerformaInvoiceTransactionLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CreatePerformaInvoiceTransactionLogic.php
new file mode 100644
index 00000000..ab3bf220
--- /dev/null
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CreatePerformaInvoiceTransactionLogic.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Classes\Modules\Bookings\ControllersLogic;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Bookings\Services\FetchesBooking;
+use App\Classes\Modules\Bookings\Standards\Rules\CanFetchBooking;
+use App\Classes\Modules\Bookings\Services\UpdatesBookingStatus;
+use App\Classes\Modules\Transactions\Services\DeletesTransaction;
+use App\Classes\Modules\Documents\Services\DeletesDocument;
+use App\Classes\Modules\Transactions\Processors\CreatePerformaInvoiceTransactionProcessor;
+
+use App\Http\Resources\BookingResource;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use App\Classes\ValueObjects\Constants\ApprovalStatus;
+use App\Classes\ValueObjects\Constants\TransactionType;
+
+class CreatePerformaInvoiceTransactionLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Create Perfoma Invoice Transaction',
+            'message' => 'You have successfully create performa invoice transaction'
+        ];
+    }
+
+    /** @var CanFetchBooking */
+    private $canFetchBooking;
+
+    /** @var FetchesBooking */
+    private $fetchesBooking;
+
+    /** @var CreatePerformaInvoiceTransactionProcessor */
+    private $CreatePerformaInvoiceTransactionProcessor;
+
+    /**
+     * FetchBookingLogic constructor.
+     * @param CanFetchBooking $canFetchBooking
+     * @param FetchesBooking $fetchesBooking
+     * @param CreatePerformaInvoiceTransactionProcessor $CreatePerformaInvoiceTransactionProcessor
+     */
+    public function __construct(
+        CanFetchBooking $canFetchBooking, 
+        FetchesBooking $fetchesBooking,
+        CreatePerformaInvoiceTransactionProcessor $CreatePerformaInvoiceTransactionProcessor
+    )
+    {
+        $this->canFetchBooking = $canFetchBooking;
+        $this->fetchesBooking = $fetchesBooking;
+        $this->CreatePerformaInvoiceTransactionProcessor = $CreatePerformaInvoiceTransactionProcessor;
+    }
+
+
+    /**
+     * @param Request $request
+     * @return JsonResponse
+     * @throws \App\Classes\Exceptions\AccessForbiddenException
+     * @throws \App\Classes\Exceptions\RequestValidationException
+     */
+    public function logic(Request $request) : JsonResponse
+    {
+        $this->canFetchBooking->passes();
+
+        $booking = $this->fetchesBooking->execute(['id' => $request->route('id')]);
+
+        $this->CreatePerformaInvoiceTransactionProcessor->execute($booking);
+
+        return $this->resourceResponse(new BookingResource($booking));
+    }
+
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Bookings/CreatePerformaInvoiceTransaction.php b/app/Http/Controllers/Bookings/CreatePerformaInvoiceTransaction.php
new file mode 100644
index 00000000..40c6d8db
--- /dev/null
+++ b/app/Http/Controllers/Bookings/CreatePerformaInvoiceTransaction.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers\Bookings;
+
+use App\Classes\Modules\Bookings\ControllersLogic\CreatePerformaInvoiceTransactionLogic;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class CreatePerformaInvoiceTransaction
+{
+    /**
+     * @param Request $request
+     * @param CreatePerformaInvoiceTransactionLogic $logic
+     * @return JsonResponse
+     */
+    public function create(Request $request, CreatePerformaInvoiceTransactionLogic $logic): JsonResponse {
+        return $logic->execute($request);
+    }
+
+}
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
index e63a6f9e..1f344962 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -120,8 +120,25 @@
                 </div>
             </div>
             <div class="row" v-if="submitted && data.status !== 3">
-                <div class="col-7">
+                <div class="col-12 col-md-7">
                     <button class="btn btn-xs btn-success b-rad-none" v-if="$store.getters.isAdmin && data.purchase_order.status === 1" @click="submit(route('api.booking.po.approval', data.id), 'post', section, true, true)">Approve Purchase Order</button>
+                    <div class="row">
+                        <div class="col-12 col-lg-6">
+                            <document-file-viewer-component :file="data.documents.performa_invoice.files[0]" v-if="data.documents.performa_invoice">
+                                <template slot="button">
+                                    <div class="bg-master-lightest text-center padding-20 pointer b-grey">
+                                        <div class="m-b-10">
+                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                    width="45" height="45"
+                                                    viewBox="0 0 172 172"
+                                                    style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
+                                        </div>
+                                        <p class="no-margin fs-12">Invoice</p>
+                                    </div>
+                                </template>
+                            </document-file-viewer-component>
+                        </div>
+                    </div>
                 </div>
                 <div class="col" v-if="submitted">
                     <div class="alert alert-success padding-15" role="alert">
@@ -131,7 +148,8 @@
                                 <div class="font-heading fs-10">If you would like to still edit your Purchase Order you can do that by clicking on the edit button below, but your purchase order verification request will be reset.</div>
                             </div>
                         </div>
-                        <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lightest" @click="submitted = false">Edit Purchase Order</button>
+                        <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lightest w-100" @click="submitted = false">Edit Purchase Order</button>
+                        <button class="btn btn-xs all-caps b-rad-none btn-success w-100 m-t-5" v-if="!data.documents.performa_invoice" @click="submit(route('api.booking.performa.create', data.id), 'post', section, true, true)">Generate Perfoma Invoice</button>
                     </div>
                 </div>
             </div>
diff --git a/routes/booking.php b/routes/booking.php
index 1c436d40..fe3a08df 100644
--- a/routes/booking.php
+++ b/routes/booking.php
@@ -30,4 +30,5 @@ Route::group(['prefix' => 'booking', 'as' => 'booking.', 'namespace' => 'Booking
 
     Route::post('/merge', 'MergeBookingController@merge')->name('merge');
 
+    Route::post('{id}/performa/create', 'CreatePerformaInvoiceTransaction@create')->name('performa.create');
 });
\ No newline at end of file