diff --git a/resources/assets/js/components/AkauntingModal.vue b/resources/assets/js/components/AkauntingModal.vue
index 9caf432a6..362392c61 100644
--- a/resources/assets/js/components/AkauntingModal.vue
+++ b/resources/assets/js/components/AkauntingModal.vue
@@ -1,42 +1,45 @@
 <template>
     <SlideYUpTransition :duration="animationDuration">
-    <div class="modal fade"
-         @click.self="closeModal"
-         :class="[{'show d-block': show}, {'d-none': !show}]"
-         v-show="show"
-         tabindex="-1"
-         role="dialog"
-         :aria-hidden="!show">
-        <div class="modal-dialog">
-            <slot name="modal-content">
-            <div class="modal-content">
-                <div class="card-header pb-2">
-                    <slot name="card-header">
-                        <h4 class="float-left"> {{ title }} </h4>
-                        <button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
-                    </slot>
-                </div>
-                <slot name="modal-body">
-                    <div class="modal-body" v-html="message">
+        <div class="modal fade"
+            @click.self="closeModal"
+            :class="[{'show d-block': show}, {'d-none': !show}]"
+            v-show="show"
+            tabindex="-1"
+            role="dialog"
+            :aria-hidden="!show">
+            <div class="modal-dialog" :class="modalDialogClass">
+                <slot name="modal-content">
+                    <div class="modal-content">
+                        <div class="card-header pb-2">
+                            <slot name="card-header">
+                                <h4 class="float-left"> {{ title }} </h4>
+
+                                <button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
+                            </slot>
+                        </div>
+
+                        <slot name="modal-body">
+                            <div class="modal-body" v-html="message">
+                            </div>
+                        </slot>
+
+                        <div class="card-footer border-top-0 pt-0">
+                            <slot name="card-footer">
+                                <div class="float-right">
+                                    <button type="button" class="btn btn-outline-secondary" @click="onCancel">
+                                    {{ button_cancel }}
+                                    </button>
+
+                                    <button :disabled="form.loading" type="button" class="btn btn-danger button-submit" @click="onConfirm">
+                                        <div class="aka-loader"></div><span>{{ button_delete }}</span>
+                                    </button>
+                                </div>
+                            </slot>
+                        </div>
                     </div>
                 </slot>
-                <div class="card-footer border-top-0 pt-0">
-                    <slot name="card-footer">
-                        <div class="float-right">
-                            <button type="button" class="btn btn-outline-secondary" @click="onCancel">
-                               {{ button_cancel }}
-                            </button>
-
-                            <button :disabled="form.loading" type="button" class="btn btn-danger button-submit" @click="onConfirm">
-                                <div class="aka-loader"></div><span>{{ button_delete }}</span>
-                            </button>
-                        </div>
-                    </slot>
-                </div>
             </div>
-            </slot>
         </div>
-    </div>
     </SlideYUpTransition>
 </template>
 
@@ -60,6 +63,11 @@ export default {
 
     props: {
         show: Boolean,
+        modalDialogClass: {
+            type: String,
+            default: '',
+            description: "Modal Body size Class"
+        },
         title: {
             type: String,
             default: '',
@@ -145,4 +153,8 @@ export default {
     .modal.show {
         background-color: rgba(0, 0, 0, 0.3);
     }
+
+    .modal-md {
+        max-width: 650px;
+    }
 </style>
diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
index 24cce235f..f8315de5c 100644
--- a/resources/assets/js/components/AkauntingModalAddNew.vue
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -1,46 +1,48 @@
 <template>
     <SlideYUpTransition :duration="animationDuration">
-    <div class="modal modal-add-new fade"
-         @click.self="closeModal"
-         :class="[{'show d-block': show}, {'d-none': !show}]"
-         v-show="show"
-         tabindex="-1"
-         role="dialog"
-         :aria-hidden="!show">
-        <div class="modal-dialog" :class="modalDialogClass">
-            <slot name="modal-content">
-            <div class="modal-content">
-                <div class="card-header pb-2">
-                    <slot name="card-header">
-                        <h4 class="float-left"> {{ title }} </h4>
-                        <button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
-                    </slot>
-                </div>
-                <slot name="modal-body">
-                    <div class="modal-body pb-0" v-if="!is_component" v-html="message">
-                    </div>
-                    <div class="modal-body pb-0" v-else>
-                        <form id="form-create" method="POST" action="#"/>
-                        <component v-bind:is="component"></component>
+        <div class="modal modal-add-new fade"
+            @click.self="closeModal"
+            :class="[{'show d-block': show}, {'d-none': !show}]"
+            v-show="show"
+            tabindex="-1"
+            role="dialog"
+            :aria-hidden="!show">
+            <div class="modal-dialog" :class="modalDialogClass">
+                <slot name="modal-content">
+                    <div class="modal-content">
+                        <div class="card-header pb-2">
+                            <slot name="card-header">
+                                <h4 class="float-left"> {{ title }} </h4>
+                                <button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
+                            </slot>
+                        </div>
+
+                        <slot name="modal-body">
+                            <div class="modal-body pb-0" v-if="!is_component" v-html="message">
+                            </div>
+                            <div class="modal-body pb-0" v-else>
+                                <form id="form-create" method="POST" action="#"/>
+                                <component v-bind:is="component"></component>
+                            </div>
+                        </slot>
+
+                        <div class="card-footer border-top-0 pt-0">
+                            <slot name="card-footer">
+                                <div class="float-right">
+                                    <button type="button" class="btn btn-outline-secondary" :class="buttons.cancel.class" @click="onCancel">
+                                        {{ buttons.cancel.text }}
+                                    </button>
+
+                                    <button :disabled="form.loading" type="button" class="btn button-submit" :class="buttons.confirm.class" @click="onSubmit">
+                                        <div class="aka-loader"></div><span>{{ buttons.confirm.text }}</span>
+                                    </button>
+                                </div>
+                            </slot>
+                        </div>
                     </div>
                 </slot>
-                <div class="card-footer border-top-0 pt-0">
-                    <slot name="card-footer">
-                        <div class="float-right">
-                            <button type="button" class="btn btn-outline-secondary" :class="buttons.cancel.class" @click="onCancel">
-                                {{ buttons.cancel.text }}
-                            </button>
-
-                            <button :disabled="form.loading" type="button" class="btn button-submit" :class="buttons.confirm.class" @click="onSubmit">
-                                <div class="aka-loader"></div><span>{{ buttons.confirm.text }}</span>
-                            </button>
-                        </div>
-                    </slot>
-                </div>
             </div>
-            </slot>
         </div>
-    </div>
     </SlideYUpTransition>
 </template>
 
@@ -262,4 +264,8 @@ export default {
     .modal.show {
         background-color: rgba(0, 0, 0, 0.3);
     }
+
+    .modal-md {
+        max-width: 650px;
+    }
 </style>
diff --git a/resources/views/modules/item/show.blade.php b/resources/views/modules/item/show.blade.php
index 224c0bd9e..252a043bf 100644
--- a/resources/views/modules/item/show.blade.php
+++ b/resources/views/modules/item/show.blade.php
@@ -248,7 +248,7 @@
     </div>
 
     @if ($module->purchase_faq)
-        <akaunting-modal :show="faq">
+        <akaunting-modal :show="faq" modal-dialog-class="modal-md">
             <template #modal-content>
                 {!! $module->purchase_faq !!}
             </template>