diff --git a/public/css/custom.css b/public/css/custom.css
index 403c62325..1ef605f5c 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -436,6 +436,11 @@ button:focus
 .btn-delete{
     width: 73.10px;
 }
+
+.btn-confirm
+{
+    width: 86px;
+}
 /*--------Akaunting Loader Finish--------*/
 
 
@@ -677,12 +682,25 @@ table .align-items-center td span.badge {
 }
 /*--------Empty Page Image Finish--------*/
 
+
+/*--------Text Pre Nowrap--------*/
 .text-pre-nowrap
 {
     white-space: pre-wrap !important;
 }
+/*--------Text Pre Nowrap Finish--------*/
 
 
+/*--------Modal Dialog Resizing--------*/
+@media (min-width: 576px)
+{
+    .modal-payment .modal-dialog
+    {
+      max-width: 559px !important;
+    }
+}
+/*--------Modal Dialog Resizing Finish--------*/
+
 
 /*----------------RESPONSIVE START LINE----------------*/
 /*--------Xs Breakpoint--------*/
diff --git a/resources/assets/js/views/purchases/bills.js b/resources/assets/js/views/purchases/bills.js
index d05cc7a01..a1e1f3d3e 100644
--- a/resources/assets/js/views/purchases/bills.js
+++ b/resources/assets/js/views/purchases/bills.js
@@ -213,6 +213,10 @@ const app = new Vue({
             this.transaction_form.submit();
 
             this.payment.errors = this.transaction_form.errors;
+
+            this.form.loading = true;
+
+            this.$emit("confirm");
         },
 
         closePayment() {
diff --git a/resources/assets/js/views/sales/invoices.js b/resources/assets/js/views/sales/invoices.js
index 63e5ed0c2..657a5d10b 100644
--- a/resources/assets/js/views/sales/invoices.js
+++ b/resources/assets/js/views/sales/invoices.js
@@ -213,6 +213,10 @@ const app = new Vue({
             this.transaction_form.submit();
 
             this.payment.errors = this.transaction_form.errors;
+
+            this.form.loading = true;
+
+            this.$emit("confirm");
         },
 
         closePayment() {
diff --git a/resources/views/purchases/bills/show.blade.php b/resources/views/purchases/bills/show.blade.php
index 9044cb92d..927d6be53 100644
--- a/resources/views/purchases/bills/show.blade.php
+++ b/resources/views/purchases/bills/show.blade.php
@@ -604,13 +604,15 @@
 
         <template #card-footer>
             <div class="float-right">
-                <button type="button" class="btn btn-outline-secondary" @click="closePayment">
-                    <span>{{ trans('general.cancel') }}</span>
+                <button type="button" class="btn btn-icon btn-outline-secondary header-button-top" @click="closePayment">
+                    <span class="btn-inner--icon"><i class="fas fa-times"></i></span>
+                    <span class="btn-inner--text">{{ trans('general.cancel') }}</span>
                 </button>
 
-                <button type="button" class="btn btn-success button-submit" @click="addPayment">
-                    <div class="aka-loader d-none"></div>
-                    <span>{{ trans('general.confirm') }}</span>
+                <button :disabled="form.loading" type="button" class="btn btn-icon btn-success button-submit header-button-top" @click="addPayment">
+                    <div v-if="form.loading" class="aka-loader-frame btn-confirm"><div class="aka-loader"></div></div>
+                    <span v-if="!form.loading" class="btn-inner--icon"><i class="fas fa-check"></i></span>
+                    <span v-if="!form.loading" class="btn-inner--text">{{ trans('general.confirm') }}</span>
                 </button>
             </div>
         </template>
diff --git a/resources/views/sales/invoices/show.blade.php b/resources/views/sales/invoices/show.blade.php
index edb7bfbd5..f36db98c3 100644
--- a/resources/views/sales/invoices/show.blade.php
+++ b/resources/views/sales/invoices/show.blade.php
@@ -649,6 +649,7 @@
 
 @push('content_content_end')
     <akaunting-modal
+        class="modal-payment"
         :show="payment.modal"
         @cancel="payment.modal = false"
         :title="'{{ trans('general.title.new', ['type' => trans_choice('general.payments', 1)]) }}'"
@@ -661,17 +662,20 @@
 
         <template #card-footer>
             <div class="float-right">
-                <button type="button" class="btn btn-outline-secondary" @click="closePayment">
-                    <span>{{ trans('general.cancel') }}</span>
+                <button type="button" class="btn btn-icon btn-outline-secondary header-button-top" @click="closePayment">
+                    <span class="btn-inner--icon"><i class="fas fa-times"></i></span>
+                    <span class="btn-inner--text">{{ trans('general.cancel') }}</span>
                 </button>
 
-                <a href="{{ url('apps/categories/payment-method') }}" class="btn btn-white">
-                    <span class="fa fa-money"></span> &nbsp;{{ trans('invoices.accept_payments') }}
+                <a href="{{ url('apps/categories/payment-method') }}" class="btn btn-icon btn-white header-button-top long-texts">
+                    <span class="btn-inner--icon"><i class="fas fa-credit-card"></i></span>
+                    <span class="btn-inner--text">{{ trans('invoices.accept_payments') }}</span>
                 </a>
 
-                <button type="button" class="btn btn-success button-submit" @click="addPayment">
-                    <div class="aka-loader d-none"></div>
-                    <span>{{ trans('general.confirm') }}</span>
+                <button :disabled="form.loading" type="button" class="btn btn-icon btn-success button-submit header-button-top" @click="addPayment">
+                    <div v-if="form.loading" class="aka-loader-frame btn-confirm"><div class="aka-loader"></div></div>
+                    <span v-if="!form.loading" class="btn-inner--icon"><i class="fas fa-check"></i></span>
+                    <span v-if="!form.loading" class="btn-inner--text">{{ trans('general.confirm') }}</span>
                 </button>
             </div>
         </template>