diff --git a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
index af43a8b7..5b43ce54 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
@@ -16,11 +16,17 @@
                                     </div>
                                 </div>
                                 <div class="col-auto p-l-0">
-                                    <div class="font-heading fs-8 muted all-caps">{{ item.type === 6 ? 'Refund' : 'Payment' }} Amount</div>
+                                    <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                     <div class="font-heading fs-10 bold">
                                         {{item.currency.short_code}} {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                     </div>
                                 </div>
+                                <div class="col-auto p-l-0" v-if="totalRefunds !== 0">
+                                    <div class="font-heading fs-8 muted all-caps">Refunded Amount</div>
+                                    <div class="font-heading fs-10 bold text-danger">
+                                        {{item.original_currency.short_code}} {{(Math.round((totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
+                                    </div>
+                                </div>
                             </div>
                             <div class="row">
                                 <div class="col">
@@ -57,7 +63,15 @@
                                 <div class="col-auto p-l-0">
                                     <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                     <div class="font-heading fs-10 bold">
-                                        {{item.transaction_bill.original_currency.short_code}} {{(Math.round((item.transaction_bill.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
+                                        {{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
+                                    </div>
+                                </div>
+                                <div class="row align-items-end m-b-10 bold text-danger" v-if="totalRefunds !== 0">
+                                    <div class="col">
+                                        <div class="font-heading all-caps fs-10">Refunded Amount</div>
+                                    </div>
+                                    <div class="col-auto text-right">
+                                        <div class="font-heading fs-12">{{item.original_currency.short_code}} {{(Math.round((totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                     </div>
                                 </div>
                                 <div class="col-auto" v-if="$store.getters.isAdmin">
@@ -104,6 +118,22 @@
                             <div class="font-heading fs-10">{{item.original_currency.short_code}} {{(item.original_amount).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                         </div>
                     </div>
+                    <div class="row align-items-end m-b-10 bold text-danger" v-if="totalRequestedRefund != 0">
+                        <div class="col">
+                            <div class="font-heading all-caps fs-10">Requested Refund Amount</div>
+                        </div>
+                        <div class="col-auto text-right">
+                            <div class="font-heading fs-10">{{item.original_currency.short_code}} {{(Math.round((totalRequestedRefund + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
+                        </div>
+                    </div>
+                    <div class="row align-items-end m-b-10 bold text-danger" v-if="totalRefunds != 0">
+                        <div class="col">
+                            <div class="font-heading all-caps fs-10">Refunded Amount</div>
+                        </div>
+                        <div class="col-auto text-right">
+                            <div class="font-heading fs-12">{{item.original_currency.short_code}} {{(Math.round((totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
+                        </div>
+                    </div>
                     <div class="row align-items-end bold m-b-10 text-primary">
                         <div class="col">
                             <div class="font-heading all-caps fs-10">Rate</div>
@@ -179,11 +209,11 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row m-t-10" v-show="item.type !== 6">
+                    <div class="row m-t-10" v-show="[2, 3].includes(item.status) && totalRequestedRefund < data.booking.amount">
                         <div class="col">
                             <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>
+                                <refund-confirmation-component :data="data" :section="section" :totalRefunds="totalRequestedRefund + totalRefunds"></refund-confirmation-component>
                             </modal-component>
                         </div>
                     </div>
@@ -207,6 +237,22 @@
                 section: 'bookingDetailSection',
             }
         },
+        computed: {
+            totalRequestedRefund() {
+                var TotalRequestedRefund = 0;
+                this.data.transaction_refunds.forEach(function(refunds) {
+                    TotalRequestedRefund += refunds.status === 1 ? refunds.original_amount : 0;
+                });
+                return TotalRequestedRefund;
+            },
+            totalRefunds() {
+                var TotalRequestedRefund = 0;
+                this.data.transaction_refunds.forEach(function(refunds) {
+                    TotalRequestedRefund += refunds.status === 2 ? refunds.original_amount : 0;
+                });
+                return TotalRequestedRefund;
+            }
+        },
         methods: {
             clickExpand(){
                 this.expandPaymentDetails = !this.expandPaymentDetails;
diff --git a/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
index a2d3b277..de2cd48f 100644
--- a/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/RefundConfirmationComponent.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="row zig-zag-top">
+    <div class="row zig-zag-top">
         <div class="col bg-white padding-25">
             <div class="row p-b-10">
                 <div class="col">
@@ -35,9 +35,9 @@
                                                     </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">
+                                                            <validation-wrapper-component :validator="$v.refundAmount">
                                                                 <label>Amount</label>
-                                                                <input class="form-control" name="amount" v-model="refundAmount" :disabled="refundMethod.name == 'Fully Refund'">
+                                                                <input class="form-control" name="amount" v-model="refundAmount" :disabled="refundMethod.name == 'Fully Refund'" v-money="moneyV2">
                                                             </validation-wrapper-component>
                                                         </div>
                                                         <div class="col-auto b-r b-t b-b b-grey">
@@ -75,31 +75,33 @@
     import ModalFormHandler from '../../../general/mixins/modalFormHandler';
     import { required, maxValue } from "vuelidate/lib/validators";
     export default {
+        props: {
+            totalRefunds:{
+                type: Number,
+                default: 0,
+            }
+        },
         data(){
             return {
-                parameters: {
-                    refundAmount: this.data.booking.amount,
-                },
-                refundAmount: this.data.booking.amount,
+                refundAmount: (Math.round((this.data.booking.amount - this.totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2),
                 refundMethod: {
                     name: 'Partially Refund',
                     status: false
                 },
-                refundMaxValue: this.data.booking.amount
+                refundMaxValue: (Math.round((this.data.booking.amount - this.totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2),
             }
         },
         validations() {
             return {
-                parameters: {
-                    refundAmount: {
-                        // required,
-                        // maxValue: maxValue(this.refundMaxValue)
-                    },
+                refundAmount: {
+                    // required,
+                    maxValue: maxValue(this.refundMaxValue)
                 }
             }
         },
         methods: {
             submitForm(){
+                this.parameters.amount = this.refundAmount;
                 this.submit(this.route('api.booking.refund.create', this.data.booking.id, this.data.id), 'post', this.section, true, true)
             },
             updateRefundType(refund){
@@ -107,11 +109,8 @@
                     name: refund.name,
                     status: !this.refundMethod.status
                 }
-                this.refundAmount = this.refundMaxValue; 
+                this.refundMethod.name === 'Fully Refund' ? this.refundAmount = this.refundMaxValue : '';
             },
-            // successHandler(response){
-            //     window.location.href = this.route('booking.details', response.payload.data.marking)
-            // }
         },
         mixins: [FormHandler, ModalFormHandler]
     }
diff --git a/resources/assets/vue/general/mixins/formHandler.js b/resources/assets/vue/general/mixins/formHandler.js
index 3e7c0daa..d3b640b6 100644
--- a/resources/assets/vue/general/mixins/formHandler.js
+++ b/resources/assets/vue/general/mixins/formHandler.js
@@ -28,6 +28,7 @@ export default {
             isLoading: false,
             error: '',
             money: {decimal: '.',thousands: ',', precision: 2},
+            moneyV2: {decimal: '.',thousands: '', precision: 2},
             productPrice: {decimal: '.',thousands: ',', precision: 3},
             exchangeRate: {decimal: '.', thousands: '', precision: 5},
             percentage: {decimal: '.', thousands: '', precision: 2, suffix: '%'},