diff --git a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
index ec6c0b46..535ecfdc 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
@@ -194,13 +194,12 @@
                                     <!-- <div class="row m-t-20" v-if="item.shippng_transaction.outstanding > 0"> -->
                                     <div class="row m-t-20">
                                         <div class="col">
-                                            <!-- <button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="makePayment()">Make Payment</button> -->
                                             <div class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="makePayment">Make Payment</div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                             <modal-component type="makePayment">
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="makePayment">
                                 <payment-form-component :data="item.shippng_transaction" :section="section"></payment-form-component>
                             </modal-component>
                         </div>
diff --git a/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
index ec70e31f..72d56a03 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="row" @keyup.enter="submitForm">
         <div class="col">
-            <div class="row bg-master-lightest padding-20 m-b-15">
+            <div class="row bg-white padding-40 b-rad-lg">
                 <div class="col">
-                    <p>Outstanding: MYR {{ data.outstanding.toFixed(2) }}</p>
+                    <h3 class="text-center m-b-15">Outstanding: MYR <span class="text-success bold">{{ data.outstanding.toFixed(2) }}</span></h3>
 
                     <validation-wrapper-component :validator="$v.parameters.amount">
                         <label>Amount</label>
@@ -12,7 +12,7 @@
 
                     <div class="row m-t-15 w-100 text-center">
                         <div class="col">
-                            <button class="btn btn-lg btn-primary" @click="submitForm()">Make Payment</button>
+                            <button class="btn btn-lg btn-primary" @click="submitForm()" data-dismiss="modal">Make Payment</button>
                         </div>
                     </div>
                 </div>