diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 4f32bba7c..47d9c9047 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -585,7 +585,7 @@ const app = new Vue({
 
                 this.component = Vue.component('add-new-component', (resolve, reject) => {
                     resolve({
-                        template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-screen-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>',
+                        template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-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
diff --git a/resources/lang/en-GB/general.php b/resources/lang/en-GB/general.php
index fb3582e76..3319e2a0d 100644
--- a/resources/lang/en-GB/general.php
+++ b/resources/lang/en-GB/general.php
@@ -224,6 +224,7 @@ return [
     'copied'                => 'Copied',
     'preview_mode'          => 'Preview Mode',
     'go_back'               => 'Go back to :type',
+    'validation_error'      => 'Validation error.',
 
     'card' => [
         'cards'                 => 'Card|Cards',
diff --git a/resources/views/modals/documents/payment.blade.php b/resources/views/modals/documents/payment.blade.php
index 8e75b129f..bc8fae531 100644
--- a/resources/views/modals/documents/payment.blade.php
+++ b/resources/views/modals/documents/payment.blade.php
@@ -1,27 +1,70 @@
 <x-form id="form-transaction" :route="$route" :model="!empty($transaction) ? $transaction : false">
-    <base-alert type="warning" v-if="typeof form.response !== 'undefined' && form.response.error" v-html="form.response.message"></base-alert>
+    <div class="rounded-xl px-5 py-3 mb-5 bg-red-100" v-if="typeof form.response !== 'undefined' && form.response.error">
+        <p class="text-sm mb-0 text-red-600" v-html="form.response.message"></p>
+    </div>
 
-    <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
-        <x-form.group.date name="paid_at" label="{{ trans('general.date') }}" icon="calendar_today" value="{{ Date::now()->toDateString() }}" show-date-format="{{ company_date_format() }}" date-format="Y-m-d" autocomplete="off" />
+    <div x-data="{ active: 'general' }">
+        <div>
+            <div>
+                <ul class="grid grid-cols-6">
+                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-3"
+                        id="tab-general"
+                        data-id="tab-general"
+                        data-tabs="general"
+                        x-on:click="active = 'general'"
+                        x-bind:class="active != 'general' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
+                    >
+                        {{ trans('general.general') }}
 
-        <x-form.group.money name="amount" label="{{ trans('general.amount') }}" value="{{ $document->grand_total }}" autofocus="autofocus" :currency="$currency" dynamicCurrency="currency" />
+                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('paid_at')||form.errors.has('amount')||form.errors.has('payment_method')||form.errors.has('account_id')"> 
+                            {{ trans('general.validation_error') }}
+                        </span>
+                    </li>
 
-        <x-form.group.account change="onChangePaymentAccount" />
+                    <li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link col-span-3"
+                        id="tab-others"
+                        data-id="tab-others"
+                        data-tabs="others"
+                        x-on:click="active = 'others'"
+                        x-bind:class="active != 'others' ? '' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
+                    >
+                        {{ trans_choice('general.others', 2) }}
 
-        <x-form.group.text name="currency" label="{{ trans_choice('general.currencies', 1) }}" value="{{ $document->currency->name }}" not-required disabled />
+                        <span class="invalid-feedback block text-xs text-red whitespace-normal" v-if="form.errors.has('number')||form.errors.has('description')||form.errors.has('recurring')"> 
+                            {{ trans('general.validation_error') }}
+                        </span>
+                    </li>
+                </ul>
+            </div>
+        </div>
 
-        <x-form.group.textarea name="description" label="{{ trans('general.description') }}" rows="3" not-required />
+        <div id="tab-general" data-tabs-content="general" x-show="active === 'general'">
+            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                <x-form.group.date name="paid_at" label="{{ trans('general.date') }}" icon="calendar_today" value="{{ Date::now()->toDateString() }}" show-date-format="{{ company_date_format() }}" date-format="Y-m-d" autocomplete="off" form-group-class="col-span-6" />
 
-        <x-form.group.payment-method />
+                <x-form.group.money name="amount" label="{{ trans('general.amount') }}" value="{{ $document->grand_total }}" autofocus="autofocus" :currency="$currency" dynamicCurrency="currency" form-group-class="col-span-6" />
 
-        <x-form.group.text name="reference" label="{{ trans('general.reference') }}" not-required />
+                <x-form.group.payment-method form-group-class="col-span-6"/>
 
-        <x-form.input.hidden name="document_id" :value="$document->id" />
-        <x-form.input.hidden name="category_id" :value="$document->category->id" />
-        <x-form.input.hidden name="amount" :value="$document->grand_total" />
-        <x-form.input.hidden name="currency_code" :value="$document->currency_code" />
-        <x-form.input.hidden name="currency_rate" :value="$document->currency_rate" />
-        <x-form.input.hidden name="number" :value="$number" />
-        <x-form.input.hidden name="type" :value="config('type.document.' . $document->type . '.transaction_type')" />
+                <x-form.group.account change="onChangePaymentAccount" form-group-class="col-span-6" />
+            </div>
+        </div>
+
+        <div id="tab-others" data-tabs-content="others" x-show="active === 'others'">
+            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5">
+                <x-form.group.textarea name="description" label="{{ trans('general.description') }}" rows="3" not-required form-group-class="col-span-6" />
+
+                <x-form.group.text name="number" label="{{ trans_choice('general.numbers', 1) }}" value="{{ $number }}" form-group-class="col-span-6" />
+
+                <x-form.group.text name="reference" label="{{ trans('general.reference') }}" not-required form-group-class="col-span-6" />
+
+                <x-form.input.hidden name="document_id" :value="$document->id" />
+                <x-form.input.hidden name="category_id" :value="$document->category->id" />
+                <x-form.input.hidden name="amount" :value="$document->grand_total" />
+                <x-form.input.hidden name="currency_code" :value="$document->currency_code" />
+                <x-form.input.hidden name="currency_rate" :value="$document->currency_rate" />
+                <x-form.input.hidden name="type" :value="config('type.document.' . $document->type . '.transaction_type')" />
+            </div>
+        </div>
     </div>
 </x-form>