diff --git a/app/Classes/Modules/Billplzs/Services/CreatesBillplzBill.php b/app/Classes/Modules/Billplzs/Services/CreatesBillplzBill.php
index 7cf4bdef..607b45fa 100644
--- a/app/Classes/Modules/Billplzs/Services/CreatesBillplzBill.php
+++ b/app/Classes/Modules/Billplzs/Services/CreatesBillplzBill.php
@@ -3,6 +3,7 @@
 namespace App\Classes\Modules\Billplzs\Services;
 
 use Illuminate\Support\Facades\Http;
+use App\Classes\Exceptions\MalformedRequestException;
 
 class CreatesBillplzBill
 {
@@ -12,7 +13,7 @@ class CreatesBillplzBill
      */
     public function execute(string $name, string $email, string $description, float $amount, string $billNumber,  ?string $bankCode = null) {
         try{
-            $response = Http::withBasicAuth(config('billplz.api_key').':', '')->post(config('billplz.base_url').'/api/v3/bills', [
+            $response = Http::withBasicAuth(config('billplz.api_key').':', '')->withOptions(["verify"=>false])->post(config('billplz.base_url').'/api/v3/bills', [
                 'collection_id' => config('billplz.collection_id'),
                 'name' => $name,
                 'email' => $email,
@@ -36,7 +37,7 @@ class CreatesBillplzBill
                 return null;
             }
         }catch(\Exception $exception){
-            throw new MalformedRequestException('Unable to get correct response from billplz server');
+            throw new MalformedRequestException('Unable to get correct response from billplz server' . $exception->getMessage());
         }
     }
 }
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
index 0fc448b2..411b9163 100644
--- a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
@@ -97,7 +97,7 @@ class CreateBookingRefundLogic extends AbstractControllerLogic
         $transactionRefundCalculationObject->init();
 
         $object = new TransactionObject($billNumber, TransactionType::REFUND, 1, $booking->company->id,
-            $request->input('bank_id'), $transactionRefundCalculationObject->getConversionObject()->getPaymentMethod(),
+            $request->input('bank_id'),$transactionRefundCalculationObject->getConversionObject()->getPaymentMethod(),
             $transactionRefundCalculationObject->getRefundTotalAmount(), $transactionRefundCalculationObject->getAmount(), 1,
             $transactionRefundCalculationObject->getConversionObject()->getCurrencyId(), $transactionRefundCalculationObject->getTransaction()->currency_rate,
             $transactionRefundCalculationObject->getRefundTax(), $transactionRefundCalculationObject->getRefundServiceCharge(), null, ApprovalStatus::PENDING_VERIFICATION, [], $transaction->bill_no);
diff --git a/app/Classes/ValueObjects/Constants/PaymentMethodType.php b/app/Classes/ValueObjects/Constants/PaymentMethodType.php
index 4efec990..848cf3cd 100644
--- a/app/Classes/ValueObjects/Constants/PaymentMethodType.php
+++ b/app/Classes/ValueObjects/Constants/PaymentMethodType.php
@@ -19,7 +19,7 @@ final class PaymentMethodType {
         'cheque' => self::CHEQUE,
         'ba' => self::BA,
         'wallet' => self::WALLET,
-        'payment gateway' => self::PAYMENT_GATEWAY,
+        'payment_gateway' => self::PAYMENT_GATEWAY,
     ];
 
     public const PAYMENT_METHODS_ID = [
@@ -27,7 +27,7 @@ final class PaymentMethodType {
         self::CHEQUE => 'cheque',
         self::BA => 'ba',
         self::WALLET => 'wallet',
-        self::PAYMENT_GATEWAY => 'payment gateway'
+        self::PAYMENT_GATEWAY => 'payment_gateway'
     ];
 
 }
diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
index df1a5685..9d30af54 100644
--- a/app/Http/Resources/TransactionResource.php
+++ b/app/Http/Resources/TransactionResource.php
@@ -22,6 +22,8 @@ class TransactionResource extends JsonResource
             'booking' => new BookingResource($this->booking),
             'type' => (int) $this->type,
             'bill_no' => $this->bill_no,
+            'payment_reference' => $this->payment_reference,
+            'payment_method' => $this->payment_method,
             'recipient_bank_account' => new BankResource($this->when((int) $this->type === TransactionType::BILL,$this->booking->bank)),
             'amount' => (double) $this->amount,
             'original_amount' => (double) $this->original_amount,
diff --git a/resources/assets/vue/components/accounts/forms/TopUpAccountComponent.vue b/resources/assets/vue/components/accounts/forms/TopUpAccountComponent.vue
new file mode 100644
index 00000000..af8a43b7
--- /dev/null
+++ b/resources/assets/vue/components/accounts/forms/TopUpAccountComponent.vue
@@ -0,0 +1,196 @@
+<template>
+    <div class="row h-100 parentContainer">
+        <div class="col">
+            <div class="col-auto p-l-0 p-r-10">
+                <div class="btn btn-xs btn-primary p-t-0 p-b-0 text-primary-lighter requestModal" style="background-color: rgba(255, 255, 255, 0.2);" data-type="topUpModal">
+                    <i class="fa fa-plus fs-14 m-t-5"></i>
+                </div>
+            </div>
+            <modal-component styleType="fill-in" type="topUpModal">
+                <div class="row zig-zag-top">
+                    <div class="col bg-white padding-25">
+
+
+                        <div class="row m-b-20">
+                            <div class="col">
+                                <div class="row">
+                                    <div class="col-8">
+                                        <div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="paymentMethod.status = !paymentMethod.status">
+                                            <div class="row">
+                                                <div class="col p-t-10 p-b-10">
+                                                    {{paymentMethod.name}}
+                                                </div>
+                                                <div class="col-auto bg-complete-light">
+                                                    <div class="row h-100 align-items-center">
+                                                        <div class="col">
+                                                            <i class="fa" :class="[{'fa-angle-down': !paymentMethod.status}, {'fa-angle-up': paymentMethod.status}]"></i>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="relative w-100">
+                                            <div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !paymentMethod.status}]" style="top: 100%; right: 0; z-index: 1;">
+                                                <div class="row text-left no-margin bg-white">
+                                                    <div class="col no-padding">
+                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Bank Transfer'}, {'text-white': paymentMethod.name === 'Bank Transfer'}, {'hover-complete': paymentMethod.name !== 'Bank Transfer'}]" @click="updatePaymentType({name: 'Bank Transfer', id: 'cash'})">
+                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                <div class="row align-items-center justify-content-center">
+                                                                    <div class="col">
+                                                                        <div class="font-heading fs-10">Bank Transfer</div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]"  @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
+                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                <div class="row align-items-center justify-content-center">
+                                                                    <div class="col">
+                                                                        <div class="font-heading fs-10">Cash Deposit</div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cheque'}, {'text-white': paymentMethod.name === 'Cheque'}, {'hover-complete': paymentMethod.name !== 'Cheque'}]" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
+                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                <div class="row align-items-center justify-content-center">
+                                                                    <div class="col">
+                                                                        <div class="font-heading fs-10">Cheque</div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Banker\'s Acceptance'}, {'text-white': paymentMethod.name === 'Banker\'s Acceptance'}, {'hover-complete': paymentMethod.name !== 'Banker\'s Acceptance'}]" @click="updatePaymentType({name: 'Banker\'s Acceptance', id: 'ba'})">
+                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                <div class="row align-items-center justify-content-center">
+                                                                    <div class="col">
+                                                                        <div class="font-heading fs-10">Banker's Acceptance</div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Online Transfer'}, {'text-white': paymentMethod.name === 'Online Transfer'}, {'hover-complete': paymentMethod.name !== 'Online Transfer'}]" @click="updatePaymentType({name: 'Online Transfer', id: 'ot'})">
+                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                <div class="row align-items-center justify-content-center">
+                                                                    <div class="col">
+                                                                        <div class="font-heading fs-10">Online Transfer</div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="row m-r-0">
+                                    <div class="col p-r-0">
+                                        <validation-wrapper-component :validator="$v.amount">
+                                            <label>Amount</label>
+                                            <input class="form-control" name="amount" v-model.lazy="amount">
+                                            <!-- <input class="form-control" name="amount" v-model.lazy="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">{{this.data.fixed_currency.short_code}}</div> -->
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="row" v-if="paymentMethod.name == 'Online Transfer'">
+                                    <div class="col">
+
+                                        <div class="row m-t-10">
+                                            <div class="col">
+                                                <div class="row">
+                                                    <div class="col-8">
+                                                        <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Maybank'}]" @click="selectOnlinePaymentBank({bankName: 'Maybank', id: 'maybank'})">
+                                                            <img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_maybank.png" alt="">
+                                                            Maybank2u
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="row m-t-10">
+                                            <div class="col">
+                                                <div class="row">
+                                                    <div class="col-8">
+                                                        <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Cimb'}]" @click="selectOnlinePaymentBank({bankName: 'Cimb', id: 'cimb'})">
+                                                            <img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_cimb.png" alt="">
+                                                            Cimb
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-4 p-r-0">
+                                <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" data-dismiss="modal">Cancel</button>
+                            </div>
+                            <div class="col p-l-0">
+                                <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" v-if="!(paymentMethod.name === 'Online Transfer' && onlinePayment.status === false)" @click="submitForm()">Confirm</button>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </modal-component>
+        </div>
+    </div>
+
+</template>
+<script>
+    import { required } from "vuelidate/lib/validators";
+    export default {
+        data(){
+            return {
+                loading: false,
+                // amount: (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2),
+                amount: (Math.round(1000 * 100) / 100).toFixed(2),
+                paymentMethod: {
+                    name: 'Bank Transfer',
+                    id: 'cash',
+                    status: false
+                },
+                onlinePayment: {    
+                    bankName: '',
+                    id: '',
+                    status: false
+                },
+            }
+        },
+        validations () {
+            return {
+                amount: { required }
+            }
+        },
+        methods:{
+            updatePaymentType(payment){
+                this.paymentMethod = {
+                    name: payment.name,
+                    id: payment.id,
+                    status: false,
+                }
+            },
+            selectOnlinePaymentBank(bankName){
+                this.onlinePayment = {
+                    bankName: bankName.bankName,
+                    id: bankName.id,
+                    status: true,
+                }
+            },
+        }
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
index 3abccf8b..d619921d 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
@@ -118,12 +118,16 @@
                     </div>
                     <div class="row m-t-10">
                         <div class="col">
-                            <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="requestRefund()">Request Refund</button>
+                            <button class="btn btn-xs all-caps b-rad-none btn-success btn-block requestModal" data-type="transferSummary">Request Refund</button>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
+                                <refund-confirmation-component :data="data" :section="section"></refund-confirmation-component>
+                            </modal-component>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="row" v-show="expandRefund">
+            <!-- <div class="row" v-show="expandRefund"> -->
+            <div class="row" v-show="false">
                 <div class="col bg-white padding-15">
                     <div class="row m-b-10">
                         <div class="col-8">
@@ -172,7 +176,7 @@
                     </div>
                     <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Fully Refund'">
                         <div class="col p-r-0">
-                            <validation-wrapper-component :validator="amount" v-if="refundMethod.name == 'Fully Refund'">
+                            <validation-wrapper-component :validator="parameters.amount" v-if="refundMethod.name == 'Fully Refund'">
                                 <label>Amount</label>
                                 <input class="form-control disabled" name="amount" v-model.lazy="amount" disabled>
                             </validation-wrapper-component>
@@ -187,7 +191,7 @@
                     </div>
                     <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Partially Refund'">
                         <div class="col p-r-0">
-                            <validation-wrapper-component :validator="amount">
+                            <validation-wrapper-component :validator="parameters.amount">
                                 <label>Amount</label>
                                 <input class="form-control" name="amount">
                             </validation-wrapper-component>
@@ -234,6 +238,12 @@
                     status: false
                 },
                 amount: (Math.round(1000 * 100) / 100).toFixed(2),
+                parameters: {
+                    amount: (Math.round(1000 * 100) / 100).toFixed(2),
+                    bank_id: 1
+                },
+                expanded: false,
+                section: 'bookingDetailSection',
             }
         },
         computed: {
@@ -242,6 +252,9 @@
           }
         },
         methods: {
+            submitForm(){
+                this.submit(this.route('api.booking.refund.create', this.data.booking.id, this.data.id), 'post', this.section, true, true);
+            },
             requestRefund(){
                 this.expandRefund = !this.expandRefund;
                 this.expandPaymentDetails = !this.expandPaymentDetails;
diff --git a/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
new file mode 100644
index 00000000..9a810def
--- /dev/null
+++ b/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
@@ -0,0 +1,337 @@
+<template>
+ <div class="row zig-zag-top">
+        <div class="col bg-white padding-25">
+            <div class="row p-b-10">
+                <div class="col">
+                    <div class="row m-b-5">
+                        <div class="col">
+                            <div class="font-heading all-caps bold fs-10">Request Refund</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row p-b-20 b-b b-dashed b-grey m-b-20">
+                <div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <div class="row m-b-10">
+                                <div class="col">
+                                    <div class="row parentContainer">
+                                        <div class="col">
+                                            <div class="row" >
+                                                <div class="col-7 p-r-0">
+                                                    <div class="row m-b-10">
+                                                        <div class="col">
+                                                            <div class="font-heading all-caps fs-10 m-b-5">Refund Type: </div>
+                                                            <!-- <div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="refundMethod.status = !refundMethod.status">
+                                                                <div class="row">
+                                                                    <div class="col p-t-10 p-b-10">
+                                                                        {{refundMethod.name}}
+                                                                    </div>
+                                                                    <div class="col-auto bg-complete-light">
+                                                                        <div class="row h-100 align-items-center">
+                                                                            <div class="col">
+                                                                                <i class="fa" :class="[{'fa-angle-down': !refundMethod.status}, {'fa-angle-up': refundMethod.status}]"></i>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div> -->
+                                                            <!-- <div class="relative w-100">
+                                                                <div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !refundMethod.status}]" style="top: 100%; right: 0; z-index: 1;">
+                                                                    <div class="row text-left no-margin bg-white">
+                                                                        <div class="col no-padding">
+                                                                            <div class="row no-margin" :class="[{'bg-complete-light': refundMethod.name === 'Fully Refund'}, {'text-white': refundMethod.name === 'Fully Refund'}, {'hover-complete': refundMethod.name !== 'Fully Refund'}]" @click="updateRefundType({name: 'Fully Refund'})">
+                                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                                    <div class="row align-items-center justify-content-center">
+                                                                                        <div class="col">
+                                                                                            <div class="font-heading fs-10">Fully Refund</div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                            <div class="row no-margin" :class="[{'bg-complete-light': refundMethod.name === 'Partially Refund'}, {'text-white': refundMethod.name === 'Partially Refund'}, {'hover-complete': refundMethod.name !== 'Partially Refund'}]" @click="updateRefundType({name: 'Partially Refund'})">
+                                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                                                    <div class="row align-items-center justify-content-center">
+                                                                                        <div class="col">
+                                                                                            <div class="font-heading fs-10">Partially Refund</div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div> -->
+                                                            <div class="row">
+                                                                <div class="col-auto b-a m-l-15 padding-5 p-l-10 p-r-10 rounded b-grey pointer" :class="[{'b-complete': refundMethod.name === 'Fully Refund'}]" @click="updateRefundType({name: 'Fully Refund'})">
+                                                                    Fully Refund
+                                                                </div>
+                                                                <div class="col-auto b-a m-l-10 padding-5 p-l-10 p-r-10 rounded b-grey pointer" :class="[{'b-complete': refundMethod.name === 'Partially Refund'}]" @click="updateRefundType({name: 'Partially Refund'})">
+                                                                    Partially Refund
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Partially Refund'">
+                                                        <div class="col p-r-0">
+                                                            <validation-wrapper-component :validator="$v.parameters.refundAmount">
+                                                                <label>Amount</label>
+                                                                <input class="form-control disabled" name="amount" v-model="data.booking.amount">
+                                                            </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">{{data.booking.fixed_currency.short_code}}</div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row" v-show="!createBank">
+                                                <div class="col-7 p-r-0">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="form-group no-margin form-group-default">
+                                                                <label>Account No.</label>
+                                                                <input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="relative w-100">
+                                                                <div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !dropdownStatus}]" style="top: 100%; right: 0; z-index: 1;">
+                                                                    <div class="row text-left no-margin bg-white">
+                                                                        <div class="col no-padding">
+                                                                            <div class="row no-margin" v-for="bank in data.booking.company.personal_banks.accounts" v-bind:key="bank.id" >
+                                                                                <!-- <div class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)"> -->
+                                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" @click="selectBank(bank)">
+                                                                                    <div class="row align-items-center justify-content-center">
+                                                                                        <div class="col">
+                                                                                            <div class="row">
+                                                                                                <div class="col">
+                                                                                                    <div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                            <div class="row">
+                                                                                                <div class="col">
+                                                                                                    <div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-auto p-l-0" v-show="!createBank && account_no && !Object.keys(parameters.bankAccount).length">
+                                                    <button class="btn btn-sm h-100 btn-primary b-rad-none all-caps" @click="createBank = !createBank; dropdownStatus = false">
+                                                        <i class="fa fa-plus m-r-5"></i>
+                                                        Create New
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <div class="row" v-show="createBank">
+                                                <div class="col">
+                                                    <!-- <bank-account-form-component section="customerProfileSection" :company_id="data.booking.company.id" :data="{account_no: account_no, company_id: data.booking.company.id, country_id: 1, account_type: 1}" :type='1'></bank-account-form-component> -->
+                                                    <bank-account-form-component section="customerProfileSection" :company_id="data.booking.company.id" :data="{account_no: account_no, company_id: data.booking.company.id, country_id: 1, account_type: 1}" :type='2'></bank-account-form-component>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-b-20" v-show="createBank">
+                <div class="col">
+                    <div class="row align-items-end no-margin">
+                        <div class="col">
+                            <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
+                                <div class="col">
+                                    <div class="font-heading fs-10 all-caps">Amount you are Transferring</div>
+                                </div>
+                                <div class="col-1 no-padding text-center">
+                                    <!-- <div class="font-heading fs-10 bold">{{this.parameters.type === 0 ? 'MYR': parameters.serviceType.selectedCurrency.short_code}}</div> -->
+                                    <div class="font-heading fs-10 bold">short_code</div>
+                                </div>
+                                <div class="col-3 text-right">
+                                    <!-- <div class="font-heading fs-10 bold">{{(Math.round((parseFloat(this.parameters.amount.replace(",", ""))+ Number.EPSILON) * 100) / 100).toFixed(2)}}</div> -->
+                                    <div class="font-heading fs-10 bold">amount</div>
+                                </div>
+                            </div>
+                            <div class="row align-items-end  p-t-10 p-b-10">
+                                <div class="col">
+                                    <div class="font-heading fs-10 all-caps text-primary">Exchange Rate</div>
+                                </div>
+                                <div class="col-1 no-padding text-center">
+                                    <div class="font-heading fs-10"></div>
+                                </div>
+                                <div class="col-3 text-right">
+                                    <!-- <div class="font-heading fs-10 text-primary bold">{{(Math.round((this.parameters.calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5)}}</div> -->
+                                    <div class="font-heading fs-10 text-primary bold">rate</div>
+                                </div>
+                            </div>
+                            <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
+                                <div class="col">
+                                    <div class="font-heading fs-10 all-caps">Money Transfer Fee</div>
+                                </div>
+                                <div class="col-1 no-padding text-center">
+                                    <div class="font-heading fs-10">MYR</div>
+                                </div>
+                                <div class="col-3 text-right">
+                                    <!-- <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div> -->
+                                    <div class="font-heading fs-10">amount</div>
+                                </div>
+                            </div>
+                            <div class="row align-items-end p-t-10 p-b-10">
+                                <div class="col text-right">
+                                    <div class="font-heading fs-10 all-caps">Sub-Total</div>
+                                </div>
+                                <div class="col-1 no-padding text-center">
+                                    <div class="font-heading fs-10">MYR</div>
+                                </div>
+                                <div class="col-3 text-right">
+                                    <!-- <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.sub_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div> -->
+                                    <div class="font-heading fs-10">Sub-Total</div>
+                                </div>
+                            </div>
+                            <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
+                                <div class="col text-right">
+                                    <div class="font-heading fs-10 all-caps">Tax</div>
+                                </div>
+                                <div class="col-1 no-padding text-center">
+                                    <!-- <div class="font-heading fs-10">{{Math.round((this.parameters.calculation.tax + Number.EPSILON) * 100) / 100}}%</div> -->
+                                    <div class="font-heading fs-10">some%</div>
+                                </div>
+                                <div class="col-3 text-right">
+                                    <!-- <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.tax_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div> -->
+                                    <div class="font-heading fs-10">some tax</div>
+                                </div>
+                            </div>
+                            <div class="row align-items-end p-t-10 p-b-10">
+                                <div class="col text-right">
+                                    <div class="font-heading all-caps bold">Amount you are Paying</div>
+                                </div>
+                                <div class="col-1 no-padding text-center">
+                                    <div class="font-heading bold">MYR</div>
+                                </div>
+                                <div class="col-3 text-right">
+                                    <!-- <div class="font-heading text-success bold">{{(Math.round((this.parameters.calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div> -->
+                                    <div class="font-heading text-success bold">payming amount</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- <confirm-booking-component :section="section" :data="data" v-if="parameters.bankAccount"></confirm-booking-component> -->
+            <div class="row">
+                <div class="col-auto">
+                    <button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
+                </div>
+                <div class="col text-right">
+                    <!-- <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button> -->
+                    <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" @click="submitForm()">Confirm & Proceed</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import FormHandler from '../../../general/mixins/formHandler';
+    // import ConfirmBookingComponent from "../forms/confirmBookingComponent";
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    import { required } from "vuelidate/lib/validators";
+    export default {
+        // components: {ConfirmBookingComponent},
+        data(){
+            return {
+                createBank: false,
+                recipientBanks: [],
+                dropdownStatus: false,
+                account_no: '',
+                parameters: {
+                    bankAccount: '',
+                    refundAmount: this.data.booking.amount,
+                    bank_id: '',
+                },
+                expandRefund: false,
+                refundMethod: {
+                    name: 'Fully Refund',
+                    status: false
+                },
+            }
+        },
+        validations: {
+            parameters: {
+                bankAccount: { required },
+                refundAmount: { required },
+            }
+        },
+        computed: {
+          formDisabled(){
+              return !!Object.keys(this.parameters.bankAccount).length;
+          }
+        },
+        created(){
+            this.recipientBanks = this.data.recipientBanks;
+        },
+        methods: {
+            AccountNumber(bank){
+                return bank.account_no.startsWith(this.account_no)
+            },
+            updateBank(bank){
+                this.selectBank(bank);
+                this.recipientBanks.push(bank);
+                this.parameters.bankAccount = bank;
+            },
+            selectBank(bank){
+                console.log(bank);
+                this.account_no = bank.account_no;
+                this.createBank = true;
+                this.parameters.bankAccount = bank;
+                this.dropdownStatus = false;
+            },
+            clearAccount(){
+                this.createBank = false;
+                this.account_no = '';
+                this.parameters.bankAccount = {};
+            },
+            submitForm(){
+                // this.parameters = {
+                //     company_id: this.data.company.id,
+                //     type: this.data.type,
+                //     fix_amount: this.data.amount,
+                //     service_id: this.data.serviceType.id,
+                //     transferable_bank_id: this.data.bankAccount.id,
+                //     convertible_currency_id: this.data.serviceType.selectedCurrency.id,
+                // };
+
+                this.submit(route('api.booking.create'), 'post', this.section, true, true)
+            },
+            updateRefundType(refund){
+                this.refundMethod = {
+                    name: refund.name,
+                    status: !this.refundMethod.status
+                }
+            },
+            successHandler(response){
+                window.location.href = this.route('booking.details', response.payload.data.marking)
+
+            }
+        },
+        mixins: [FormHandler, ModalFormHandler]
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index 9efbe54c..05e20926 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -169,7 +169,7 @@
                                                                     </div>
                                                                 </div>
                                                             </div>
-                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Online Transfer'}, {'text-white': paymentMethod.name === 'Online Transfer'}, {'hover-complete': paymentMethod.name !== 'Online Transfer'}]" @click="updatePaymentType({name: 'Online Transfer', id: 'ot'})">
+                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Online Transfer'}, {'text-white': paymentMethod.name === 'Online Transfer'}, {'hover-complete': paymentMethod.name !== 'Online Transfer'}]" @click="updatePaymentType({name: 'Online Transfer', id: 'payment_gateway'})">
                                                                 <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                     <div class="row align-items-center justify-content-center">
                                                                         <div class="col">
@@ -207,7 +207,7 @@
                                                 <div class="col">
                                                     <div class="row">
                                                         <div class="col-8">
-                                                            <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Maybank'}]" @click="selectOnlinePaymentBank({bankName: 'Maybank', id: 'maybank'})">
+                                                            <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Malayan Banking Berhad'}]" @click="selectOnlinePaymentBank({bankName: 'Malayan Banking Berhad', id: 'MBBEMYKL'})">
                                                                 <img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_maybank.png" alt="">
                                                                 Maybank2u
                                                             </div>
@@ -220,7 +220,7 @@
                                                 <div class="col">
                                                     <div class="row">
                                                         <div class="col-8">
-                                                            <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Cimb'}]" @click="selectOnlinePaymentBank({bankName: 'Cimb', id: 'cimb'})">
+                                                            <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'CIMB Bank Berhad'}]" @click="selectOnlinePaymentBank({bankName: 'CIMB Bank Berhad', id: 'CIBBMYKL'})">
                                                                 <img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_cimb.png" alt="">
                                                                 Cimb
                                                             </div>
diff --git a/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue b/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
index 86be8e1a..ad0fe0c0 100644
--- a/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/ConfirmQuotationFormComponent.vue
@@ -98,10 +98,14 @@
             submitForm(){
                 this.submit(route('api.booking.payment.create', this.id), 'post', this.section, false, false);
             },
-            successHandler(){
+            successHandler(response){
                 this.$emit('cancelQuotation');
                 this.updateList();
                 this.closeModal();
+
+                if (response.payload.data.payment_method === 5) {
+                    window.location.href = 'https://www.billplz.com/bills/' + response.payload.data.payment_reference + '?auto_submit=true';
+                }
             }
         }
     }
diff --git a/resources/assets/vue/components/settings/elements/CurrenciesListComponent.vue b/resources/assets/vue/components/settings/elements/CurrenciesListComponent.vue
index 3554a8f2..b7792264 100644
--- a/resources/assets/vue/components/settings/elements/CurrenciesListComponent.vue
+++ b/resources/assets/vue/components/settings/elements/CurrenciesListComponent.vue
@@ -75,9 +75,11 @@
                                     </div>
                                     <div class="row">
                                         <div class="col-4 p-l-5 p-r-5 m-b-10" v-for="(rate, method) in item.rates">
-                                            <validation-wrapper-component :validator="$v.parameters.currencies.$each[index].rates.$each[method].selling.value" :class="[{'hint-text': rate.payment_method === 'wallet' || rate.payment_method === 'payment gateway'}]">
+                                            <!-- <validation-wrapper-component :validator="$v.parameters.currencies.$each[index].rates.$each[method].selling.value" :class="[{'hint-text': rate.payment_method === 'wallet' || rate.payment_method === 'payment gateway'}]"> -->
+                                            <validation-wrapper-component :validator="$v.parameters.currencies.$each[index].rates.$each[method].selling.value" :class="[{'hint-text': rate.payment_method === 'wallet'}]">
                                                 <label class="all-caps">{{rate.payment_method}}</label>
-                                                <input type="text" class="form-control" v-model.lazy="rate.selling.value" v-money="exchangeRate" :disabled="!item.active || rate.payment_method === 'wallet' || rate.payment_method === 'payment gateway'">
+                                                <!-- <input type="text" class="form-control" v-model.lazy="rate.selling.value" v-money="exchangeRate" :disabled="!item.active || rate.payment_method === 'wallet' || rate.payment_method === 'payment gateway'"> -->
+                                                <input type="text" class="form-control" v-model.lazy="rate.selling.value" v-money="exchangeRate" :disabled="!item.active || rate.payment_method === 'wallet'">
                                             </validation-wrapper-component>
                                         </div>
                                     </div>
@@ -202,7 +204,7 @@
                             }
                         },
                         {
-                            payment_method: 'payment gateway',
+                            payment_method: 'payment_gateway',
                             selling: {
                                 type: 'rate',
                                 value: 0
diff --git a/resources/views/pages/dashboards/account_admin.blade.php b/resources/views/pages/dashboards/account_admin.blade.php
index e8256f8f..51ce8ebe 100644
--- a/resources/views/pages/dashboards/account_admin.blade.php
+++ b/resources/views/pages/dashboards/account_admin.blade.php
@@ -1,7 +1,7 @@
 <div class="row d-none" :class="[{'d-flex': $store.getters.isDestinationAccountAdmin}]" v-if="$store.getters.isDestinationAccountAdmin">
     <div class="col">
         <div class="row">
-            <div class="col-5 bg-white padding-25">
+            <div class="col col-md-5 bg-white padding-25">
                 <list-component ref="paymentProofList" section="paymentProofSection" :endpoint="route('api.transaction.list')" :options="{status: 2, type: 3, issuer_not: 2}">
                     <template slot="list" slot-scope="{data}">
                         <payment-proof-component :data="data" class="m-b-15 m-r-0"></payment-proof-component>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index be1cb89d..552f738b 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -64,6 +64,14 @@
                             </div>
                             <div class="col-auto m-r-20 d-none d-md-inline">
                                 <div class="row align-items-center p-t-5 p-b-5 b-a b-thick" style="border-color: #ffffff3d">
+                                    <div class="col-auto">
+                                        <div class="fs-12 text-primary-lighter">MYR 0.00</div>
+                                    </div>
+                                    <top-up-account-component></top-up-account-component>
+                                </div>
+                            </div>
+                            <div class="col-auto m-r-20 d-none d-md-inline">
+                                <div class="row align-items-center p-t-5 p-b-5 b-a b-thick d-inline-flex h-100" style="border-color: #ffffff3d">
                                     <div class="col-auto">
                                         <div class="fs-12 text-primary-lighter">Hi, <span v-text="$store.getters.getUserName.split(' ').slice(0,2).join(' ')"></span>!</div>
                                     </div>