diff --git a/resources/assets/js/components/AkauntingModal.vue b/resources/assets/js/components/AkauntingModal.vue
index a4518d6a7..3cbe01bb0 100644
--- a/resources/assets/js/components/AkauntingModal.vue
+++ b/resources/assets/js/components/AkauntingModal.vue
@@ -1,8 +1,8 @@
 <template>
     <SlideYUpTransition :duration="animationDuration">
-        <div class="modal fade w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade items-center justify-center"
+        <div class="modal fade w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade justify-center"
             @click.self="closeModal"
-            :class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
+            :class="[modalPositionTop ? 'items-start' : 'items-center', {'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
             v-show="show"
             tabindex="-1"
             role="dialog"
@@ -103,6 +103,11 @@ export default {
             default: 800,
             description: "Modal transition duration"
         },
+        modalPositionTop: {
+            type: Boolean,
+            default: false,
+            description: "Modal Body position Class"
+        },
     },
 
     data() {
diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
index 6eee76cee..6da73b8ef 100644
--- a/resources/assets/js/components/AkauntingModalAddNew.vue
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -1,8 +1,8 @@
 <template>
     <SlideYUpTransition :duration="animationDuration">
-        <div class="modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade items-center justify-center"
+        <div class="modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade justify-center"
             @click.self="closeModal"
-            :class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
+            :class="[modalPositionTop ? 'items-start' : 'items-center', {'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
             v-show="show"
             tabindex="-1"
             role="dialog"
@@ -91,19 +91,16 @@ export default {
     props: {
         show: Boolean,
         is_component: Boolean,
-
         title: {
             type: String,
             default: '',
             description: "Modal header title"
         },
-
         message: {
             type: String,
             default: '',
             description: "Modal body message"
         },
-
         buttons: {
             type: Object,
             default: function () {
@@ -120,18 +117,21 @@ export default {
             },
             description: "Modal footer button"
         },
-
         animationDuration: {
             type: Number,
             default: 800,
             description: "Modal transition duration"
         },
-
-       modalDialogClass: {
+        modalDialogClass: {
             type: String,
             default: '',
             description: "Modal Body size Class"
         },
+        modalPositionTop: {
+            type: Boolean,
+            default: false,
+            description: "Modal Body position Class"
+        },
     },
 
     data() {
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 534b5e18c..8ef1226d6 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-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" modal-position-top :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
@@ -703,7 +703,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-lg" :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" modal-position-top :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/views/modals/documents/payment.blade.php b/resources/views/modals/documents/payment.blade.php
index 800454b91..c68487dce 100644
--- a/resources/views/modals/documents/payment.blade.php
+++ b/resources/views/modals/documents/payment.blade.php
@@ -52,7 +52,7 @@
 
         <div id="tab-other" data-tabs-content="other" x-show="active === 'other'">
             <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.textarea name="description" label="{{ trans('general.description') }}" rows="2" 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" />