diff --git a/app/Classes/Modules/Transactions/ControllersLogic/CreatePaymentTransactionLogic.php b/app/Classes/Modules/Transactions/ControllersLogic/CreatePaymentTransactionLogic.php
index 04de4090..ff7c89ee 100644
--- a/app/Classes/Modules/Transactions/ControllersLogic/CreatePaymentTransactionLogic.php
+++ b/app/Classes/Modules/Transactions/ControllersLogic/CreatePaymentTransactionLogic.php
@@ -83,7 +83,7 @@ class CreatePaymentTransactionLogic extends AbstractControllerLogic
             $payment_method = PaymentMethodType::PAYMENT_GATEWAY;
             $billPlzBill = $this->createsBillplzBill->execute(
                 $company_module->name, 
-                $company_module->employees()->first()->email, 
+                $company_module->employees()->first()->email ?? '', 
                 'This payment is for the invoice number . ' . $invoice_transaction->bill_no,
                 $amount,
                 $billNumber, 
diff --git a/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
index 72d56a03..a1848de5 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
@@ -3,16 +3,67 @@
         <div class="col">
             <div class="row bg-white padding-40 b-rad-lg">
                 <div class="col">
-                    <h3 class="text-center m-b-15">Outstanding: MYR <span class="text-success bold">{{ data.outstanding.toFixed(2) }}</span></h3>
-
-                    <validation-wrapper-component :validator="$v.parameters.amount">
-                        <label>Amount</label>
-                        <input class="form-control" v-model="parameters.amount" v-money="{decimal: '.',thousands: '', precision: 2}">
-                    </validation-wrapper-component>
-
-                    <div class="row m-t-15 w-100 text-center">
+                    <h3 class="text-center m-b-15">Make Payment</h3>
+                    <div class="row">
                         <div class="col">
-                            <button class="btn btn-lg btn-primary" @click="submitForm()" data-dismiss="modal">Make Payment</button>
+                            <div class="row m-b-10">
+                                <div class="col">
+                                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                                        <div class="col">
+                                            <small class="bold fs-10 text-danger">{{error}}</small>
+                                        </div>
+                                    </div>
+                                    <div class="row m-r-0 m-b-15">
+                                        <div class="col p-r-0">
+                                            <validation-wrapper-component :validator="$v.parameters.amount">
+                                                <label>Amount</label>
+                                                <input class="form-control text-black" style="cursor: not-allowed;" disabled v-model="parameters.amount" v-money="{decimal: '.',thousands: '', precision: 2}">
+                                            </validation-wrapper-component>
+                                        </div>
+                                        <div class="col-auto b-r b-t b-b b-grey">
+                                            <div class="row h-100 align-items-center">
+                                                <div class="col">
+                                                    <div class="font-heading fs-10 muted">MYR</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row p-l-15 p-r-15">
+                                                <div class="col m-r-5 text-center bg-white">
+                                                    <div class="row h-100">
+                                                        <div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Online Transfer', 'text-primary': paymentMethod.name === 'Online Transfer', 'b-grey': paymentMethod.name !== 'Online Transfer' }" @click="updatePaymentType({name: 'Online Transfer', id: 'payment_gateway'})">
+                                                            <div class="m-b-15 m-t-10 text-center">
+                                                            <img src="/images/fpx-logo-vector-01.png" alt="logo" height="25">
+                                                            </div>
+                                                            <p id="online-banking" class="no-margin bold all-caps">Online Banking</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col m-l-5 text-center bg-white">
+                                                    <div class="row h-100">
+                                                        <div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Cash Deposit', 'text-primary': paymentMethod.name === 'Cash Deposit', 'b-grey': paymentMethod.name !== 'Cash Deposit' }" @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
+                                                            <div class="m-b-5 text-center">
+                                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="86" y1="15.45313" x2="86" y2="157.24562" gradientUnits="userSpaceOnUse" id="color-1_46094_gr1"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="62.14844" x2="86" y2="87.68238" gradientUnits="userSpaceOnUse" id="color-2_46094_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></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><path d="M142.4375,26.875h-18.8125v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-64.5c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375h-18.8125c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v86c0,4.44512 3.61737,8.0625 8.0625,8.0625h40.3125v10.75h-10.75c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v2.6875h-10.75v5.375h10.75h69.875h10.75v-5.375h-10.75v-2.6875c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-10.75v-10.75h40.3125c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-86c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM123.625,96.75v-53.75h10.75v64.5h-96.75v-64.5h10.75v53.75zM107.5,91.375h-43v-48.64644c5.25675,-1.06962 9.40894,-5.22181 10.47856,-10.47856h22.04019c1.06963,5.25675 5.22181,9.40894 10.47856,10.47856v48.64644zM53.75,21.5h64.5v69.875h-5.375v-53.75h-2.6875c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-2.6875h-32.25v2.6875c0,4.44512 -3.61737,8.0625 -8.0625,8.0625h-2.6875v53.75h-5.375zM112.875,145.125c1.4835,0 2.6875,1.204 2.6875,2.6875v2.6875h-59.125v-2.6875c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h10.75h32.25zM96.75,139.75h-21.5v-10.75h21.5zM145.125,120.9375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-40.3125h-32.25h-40.3125c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-86c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h18.8125v5.375h-10.75c-2.96431,0 -5.375,2.41069 -5.375,5.375v64.5c0,2.96431 2.41069,5.375 5.375,5.375h96.75c2.96431,0 5.375,-2.41069 5.375,-5.375v-64.5c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-10.75v-5.375h18.8125c1.4835,0 2.6875,1.204 2.6875,2.6875z" fill="url(#color-1_46094_gr1)"></path><path d="M86,64.5c-5.93706,0 -10.75,4.81294 -10.75,10.75c0,5.93706 4.81294,10.75 10.75,10.75c5.93706,0 10.75,-4.81294 10.75,-10.75c0,-5.93706 -4.81294,-10.75 -10.75,-10.75z" fill="url(#color-2_46094_gr2)"></path></g></g></svg>
+                                                            </div>
+                                                            <p id="manual-transfer" class="no-margin bold">Manual Transfer</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-4 p-r-0">
+                                    <div class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="expandPayment = false">Cancel</div>
+                                </div>
+                                <div class="col-8 p-l-0">
+                                    <div class="btn btn-sm all-caps b-rad-none btn-default bg-success btn-block text-white" @click="submitForm()" :class="[{'hide': paymentMethod.name === ''}]" data-dismiss="modal">Cancel</div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -29,8 +80,15 @@
             return {
                 parameters : {
                     amount: this.data.outstanding.toFixed(2),
-                    transaction_id: this.data.id
-                }
+                    transaction_id: this.data.id,
+                    payment_method: '',
+                },
+                paymentMethod: {
+                    name: '',
+                    id: '',
+                    status: false
+                },
+                error: '',
             }
         },
         validations: {
@@ -40,8 +98,17 @@
         },
         methods:{
             submitForm(){
+                this.parameters.payment_method = this.paymentMethod.id === 'payment_gateway' ? 5 : '';
                 this.submit(this.route('api.transaction.payment.create'), 'post', this.section, true, true);
-            }
+            },
+            updatePaymentType(payment){
+                this.paymentMethod = {
+                    name: payment.name,
+                    id: payment.id,
+                    status: false,
+                }
+                this.error = '';
+            },
         },
         mixins: [formHandler]
     }