diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
index 411b9163..7f0d7e7d 100644
--- a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
@@ -89,7 +89,7 @@ class CreateBookingRefundLogic extends AbstractControllerLogic
         }
 
         $refund = $this->calculatesBookingRefundAmount->execute($booking, $booking->fix_currency_id, $transaction->bill_no);
-        dd($refund);
+        // dd($refund);
 
         if($refund + $request->input('amount') > $transaction->original_amount) throw new MalformedRequestException('Your refund must not be greater than '. $transaction->original_amount .'.');
 
diff --git a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
index af7eab83..ab0bb5c4 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
@@ -176,9 +176,9 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row m-t-10 hide">
+                    <div class="row m-t-10">
                         <div class="col">
-                            <button class="btn btn-xs all-caps b-rad-none btn-success btn-block requestModal" data-type="transferSummary">Request Refund</button>
+                            <button class="btn btn-xs all-caps b-rad-none bg-master-lighter btn-block no-border 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>
@@ -294,7 +294,7 @@
                 expandPaymentDetails: false,
                 expandRefund: false,
                 refundMethod: {
-                    name: 'Fully Refund',
+                    name: 'Partially Refund',
                     status: false
                 },
                 amount: (Math.round(1000 * 100) / 100).toFixed(2),
diff --git a/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
index 9a810def..34d97d3b 100644
--- a/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
@@ -10,7 +10,7 @@
                     </div>
                 </div>
             </div>
-            <div class="row p-b-20 b-b b-dashed b-grey m-b-20">
+            <div class="row">
                 <div class="col">
                     <div class="row">
                         <div class="col">
@@ -23,61 +23,22 @@
                                                     <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'})">
+                                                            <div class="row p-l-15">
+                                                                <div class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey" :class="[{'bg-complete': refundMethod.name === 'Partially Refund'}, {'text-white': refundMethod.name === 'Partially Refund'}]" @click="updateRefundType({name: 'Partially Refund'})">
                                                                     Partially Refund
                                                                 </div>
+                                                                <div class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey" :class="[{'bg-complete': refundMethod.name === 'Fully Refund'}, {'text-white': refundMethod.name === 'Fully Refund'}]" @click="updateRefundType({name: 'Fully Refund'})">
+                                                                    Fully Refund
+                                                                </div>
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Partially Refund'">
+                                                    <!-- {{data}} -->
+                                                    <div class="row m-r-0 m-b-10">
                                                         <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">
+                                                                <input class="form-control" name="amount" v-model="refundAmount" :disabled="refundMethod.name == 'Fully Refund'">
                                                             </validation-wrapper-component>
                                                         </div>
                                                         <div class="col-auto b-r b-t b-b b-grey">
@@ -90,61 +51,6 @@
                                                     </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>
@@ -153,95 +59,11 @@
                     </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>
@@ -251,86 +73,46 @@
 
 <script>
     import FormHandler from '../../../general/mixins/formHandler';
-    // import ConfirmBookingComponent from "../forms/confirmBookingComponent";
     import ModalFormHandler from '../../../general/mixins/modalFormHandler';
-    import { required } from "vuelidate/lib/validators";
+    import { required, maxValue } 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,
+                refundAmount: this.data.booking.amount,
                 refundMethod: {
-                    name: 'Fully Refund',
+                    name: 'Partially Refund',
                     status: false
                 },
+                refundMaxValue: this.data.booking.amount
             }
         },
-        validations: {
-            parameters: {
-                bankAccount: { required },
-                refundAmount: { required },
+        validations() {
+            return {
+                parameters: {
+                    refundAmount: {
+                        // required,
+                        // maxValue: maxValue(this.refundMaxValue)
+                    },
+                }
             }
         },
-        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)
+                this.submit(this.route('api.booking.refund.create', this.data.booking.id, this.data.id), 'post', this.section, true, true)
             },
             updateRefundType(refund){
                 this.refundMethod = {
                     name: refund.name,
                     status: !this.refundMethod.status
                 }
+                this.refundAmount = this.refundMaxValue; 
             },
-            successHandler(response){
-                window.location.href = this.route('booking.details', response.payload.data.marking)
-
-            }
+            // successHandler(response){
+            //     window.location.href = this.route('booking.details', response.payload.data.marking)
+            // }
         },
         mixins: [FormHandler, ModalFormHandler]
     }
diff --git a/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue b/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue
index 3c5f6bb0..d85e38a4 100644
--- a/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue
+++ b/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue
@@ -1,9 +1,10 @@
 <template>
     <div v-if="validator.$error" class="text-danger fs-10">
-        <small class="bold" v-for="(object, param) in validator.$params" v-if="!validator[param]">
-            {{errorMessages[param]}}
-            <span v-if="object.type === 'minLength'">{{object.min}} characters</span>
-            <span v-if="object.type === 'sameAs'">{{object.eq}} field</span>
+        <small class="bold" v-for="(object, param) in validator.$params">
+            <span class="btn-block" v-if="object.type === 'required'">{{errorMessages[param]}}</span>
+            <span class="btn-block" v-if="object.type === 'minLength'">{{errorMessages[param]}} {{object.min}} characters</span>
+            <span class="btn-block" v-if="object.type === 'sameAs'">{{errorMessages[param]}} {{object.eq}} field</span>
+            <span class="btn-block" v-if="object.type === 'maxValue'">{{errorMessages[param]}} {{object.max}}</span>
         </small>
     </div>
 </template>
@@ -21,7 +22,8 @@
                     required: 'this field is required',
                     email: 'enter a valid email address',
                     minLength: 'this field must have at least',
-                    sameAs: 'this field must match the'
+                    sameAs: 'this field must match the',
+                    maxValue: 'this value must not exceeds'
                 },
             }
         },