diff --git a/resources/assets/js/views/purchases/bills.js b/resources/assets/js/views/purchases/bills.js
index 5e524aad2..d6bf0b4be 100644
--- a/resources/assets/js/views/purchases/bills.js
+++ b/resources/assets/js/views/purchases/bills.js
@@ -336,7 +336,7 @@ const app = new Vue({
 
                 this.component = Vue.component('add-new-component', (resolve, reject) => {
                     resolve({
-                        template: '<div id="dynamic-component"><akaunting-modal-add-new :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+                        template: '<div id="dynamic-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
 
                         mixins: [
                             Global
@@ -352,6 +352,7 @@ const app = new Vue({
                         methods: {
                             onSubmit(event) {
                                 this.form = event;
+                                this.form.response = {};
 
                                 this.loading = true;
 
@@ -396,6 +397,12 @@ const app = new Vue({
                                             window.location.href = response.data.redirect;
                                         }
                                     }
+
+                                    if (response.data.error) {
+                                        this.form.loading = false;
+
+                                        this.form.response = response.data;
+                                    }
                                 })
                                 .catch(error => {
                                     this.form.loading = false;
diff --git a/resources/assets/js/views/sales/invoices.js b/resources/assets/js/views/sales/invoices.js
index 5b9e2a3fe..136b97785 100644
--- a/resources/assets/js/views/sales/invoices.js
+++ b/resources/assets/js/views/sales/invoices.js
@@ -337,7 +337,7 @@ const app = new Vue({
 
                 this.component = Vue.component('add-new-component', (resolve, reject) => {
                     resolve({
-                        template: '<div id="dynamic-component"><akaunting-modal-add-new :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+                        template: '<div id="dynamic-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
 
                         mixins: [
                             Global
@@ -353,6 +353,7 @@ const app = new Vue({
                         methods: {
                             onSubmit(event) {
                                 this.form = event;
+                                this.form.response = {};
 
                                 this.loading = true;
 
@@ -397,6 +398,12 @@ const app = new Vue({
                                             window.location.href = response.data.redirect;
                                         }
                                     }
+
+                                    if (response.data.error) {
+                                        this.form.loading = false;
+
+                                        this.form.response = response.data;
+                                    }
                                 })
                                 .catch(error => {
                                     this.form.loading = false;
diff --git a/resources/views/modals/bills/payment.blade.php b/resources/views/modals/bills/payment.blade.php
index ec524893d..771666ad2 100644
--- a/resources/views/modals/bills/payment.blade.php
+++ b/resources/views/modals/bills/payment.blade.php
@@ -7,9 +7,9 @@
     'route' => ['modals.bills.bill.transactions.store', $bill->id],
     'novalidate' => true
 ]) !!}
-    <div class="row">
-        <base-alert type="warning" v-if="typeof form.response !== 'undefined' && form.response.error" v-html="form.response.message"></base-alert>
+    <base-alert type="warning" v-if="typeof form.response !== 'undefined' && form.response.error" v-html="form.response.message"></base-alert>
 
+    <div class="row">
         {{ Form::dateGroup('paid_at', trans('general.date'), 'calendar', ['id' => 'paid_at', 'required' => 'required', 'date-format' => 'Y-m-d', 'autocomplete' => 'off'], Date::now()->toDateString()) }}
 
         {{ Form::moneyGroup('amount', trans('general.amount'), 'money-bill-alt', ['required' => 'required', 'autofocus' => 'autofocus', 'currency' => $currency, 'dynamic-currency' => 'currency'], $bill->grand_total) }}
diff --git a/resources/views/modals/invoices/payment.blade.php b/resources/views/modals/invoices/payment.blade.php
index a76c7e085..ad48752d0 100644
--- a/resources/views/modals/invoices/payment.blade.php
+++ b/resources/views/modals/invoices/payment.blade.php
@@ -7,9 +7,9 @@
     'route' => ['modals.invoices.invoice.transactions.store', $invoice->id],
     'novalidate' => true
 ]) !!}
-    <div class="row">
-        <base-alert type="warning" v-if="typeof form.response !== 'undefined' && form.response.error" v-html="form.response.message"></base-alert>
+    <base-alert type="warning" v-if="typeof form.response !== 'undefined' && form.response.error" v-html="form.response.message"></base-alert>
 
+    <div class="row">
         {{ Form::dateGroup('paid_at', trans('general.date'), 'calendar', ['id' => 'paid_at', 'required' => 'required', 'date-format' => 'Y-m-d', 'autocomplete' => 'off'], Date::now()->toDateString()) }}
 
         {{ Form::moneyGroup('amount', trans('general.amount'), 'money-bill-alt', ['required' => 'required', 'autofocus' => 'autofocus', 'currency' => $currency, 'dynamic-currency' => 'currency'], $invoice->grand_total) }}