diff --git a/public/css/custom.css b/public/css/custom.css
index c29fc99ce..5b03ed0b6 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -1255,12 +1255,26 @@ table .align-items-center td span.badge {
 }
 
 .aka-select.aka-select--fluid {
-    max-width: 96%;
+    max-width: 100%;
     min-width: 0;
 }
 
+.product-select .item-add-new:hover {
+    background-color: #f1f3f3;
+    text-decoration: none;
+}
+
+.product-select .item-add-new button {
+    height: 54px;
+}
+
+.product-select .aka-select.aka-select--fluid {
+    margin: -54px 0 !important
+}
+
 .product-select .aka-select-menu {
-    width: 100%;
+    margin-left: 4%;
+    width: 92%;
     min-width: 0;
     padding: 0;
     top: 0;
@@ -1307,6 +1321,7 @@ table .align-items-center td span.badge {
 .product-select .aka-select.aka-select--fluid.is-open {
     position: absolute;
     display: block;
+    margin-top: -50px;
 }
 
 .item-select {
@@ -1339,4 +1354,21 @@ table .align-items-center td span.badge {
 .item-select .v-money.text-right.disabled-money {
     color: #8898aa;
 }
-/* Akaunting Item Button Finish */
\ No newline at end of file
+/* Akaunting Item Button Finish */
+
+/* Document Loading Start */
+.document-loading {
+    position: absolute;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    background: #f8f9fe;
+    z-index: 99;
+    border-radius: 0.375rem;
+}
+
+.document-loading div {
+    margin-top: 20%;
+    margin-left: 45%;
+}
+/* Document Loading Finish */
\ No newline at end of file
diff --git a/resources/assets/js/components/AkauntingItemButton.vue b/resources/assets/js/components/AkauntingItemButton.vue
index 2c1ed479d..b7632ba85 100644
--- a/resources/assets/js/components/AkauntingItemButton.vue
+++ b/resources/assets/js/components/AkauntingItemButton.vue
@@ -1,12 +1,12 @@
 <template>
     <div :id="'select-item-button-' + _uid" class="product-select">
+        <div class="item-add-new">
+            <button type="button" class="btn btn-link w-100" @click="onItemList">
+                <i class="fas fa-plus-circle"></i> &nbsp; {{ addItemText }}
+            </button>
+        </div>
+ 
         <div class="aka-select aka-select--fluid" :class="[{'is-open': show.item_list}]" tabindex="-1">
-            <div>
-                <button type="button" class="btn btn-link w-100" @click="onItemList">
-                    <i class="fas fa-plus-circle"></i> &nbsp; {{ addItemText }}
-                </button>
-            </div>
-
             <div class="aka-select-menu" v-if="show.item_list">
                 <div class="aka-select-search-container">
                     <span class="aka-prefixed-input aka-prefixed-input--fluid">
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 069f31745..bd1a6108f 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -53,6 +53,7 @@ const app = new Vue({
 
             items: [],
             taxes: [],
+            page_loaded: false,
         }
     },
 
@@ -800,5 +801,7 @@ const app = new Vue({
                 }, this);
             }, this);
         }
+
+        this.page_loaded = true;
     }
 });
diff --git a/resources/views/components/documents/form/items.blade.php b/resources/views/components/documents/form/items.blade.php
index d98fdd12e..0ad845c70 100644
--- a/resources/views/components/documents/form/items.blade.php
+++ b/resources/views/components/documents/form/items.blade.php
@@ -19,7 +19,9 @@
                 <thead class="thead-light">
                     <tr>
                         @stack('move_th_start')
-                            <th class="text-left border-top-0 border-right-0 border-bottom-0"></th>
+                            <th class="border-top-0 border-right-0 border-bottom-0" style="max-width: 40px">
+                                <div ></div>
+                            </th>
                         @stack('move_th_end')
 
                         @if (!$hideItems)
@@ -69,7 +71,9 @@
                         @stack('total_th_end')
 
                         @stack('remove_th_start')
-                            <th class="text-left border-top-0 border-right-0 border-bottom-0"></th>
+                            <th class="border-top-0 border-right-0 border-bottom-0" style="max-width: 40px">
+                                <div ></div>
+                            </th>
                         @stack('remove_th_end')
                     </tr>
                 </thead>
@@ -79,7 +83,7 @@
 
                     @stack('add_item_td_start')
                         <tr id="addItem">
-                            <td class="text-right border-bottom-0" colspan="{{ '7' }}">
+                            <td class="text-right border-bottom-0 p-0" colspan="{{ '7' }}">
                                 <x-select-item-button
                                     type="{{ $type }}"
                                     is-sale="{{ $isSalePrice }}"
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 58f856697..86859f59f 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -17,7 +17,7 @@
                 <tbody>
                     <tr>
                         @stack('move_td_start')
-                            <td class="pb-4 align-middle" colspan="1" style="color: #8898aa;">
+                            <td class="pb-3 align-middle border-bottom-0" colspan="1" style="color: #8898aa;">
                                 <div draggable="true">
                                     <i class="fas fa-grip-vertical"></i>
                                 </div>
@@ -28,19 +28,19 @@
                             @if (!$hideItems || (!$hideName && !$hideDescription))
                                 @stack('name_td_start')
                                     @if (!$hideName)
-                                        <td class="pb-4 align-middle" colspan="1">
+                                        <td class="pb-3 align-middle border-bottom-0" colspan="1">
                                             <span class="aka-text aka-text--body" tabindex="0" v-html="row.name"></span>
                                         </td>
                                     @endif
                                 @stack('name_td_end')
 
                                 @stack('description_td_start')
-                                    @if (!$hideDescription)
-                                        <td class="pb-4" colspan="1">
+                                    @if (!$hideDescription) 
+                                        <td class="pb-3 border-bottom-0" colspan="1">
                                             <textarea 
                                                 class="form-control"
                                                 placeholder="Enter item description"
-                                                style="height: 38px;"
+                                                style="height: 46px; overflow: hidden;"
                                                 :name="'items.' + index + '.description'"
                                                 v-model="row.description"
                                                 data-item="description"
@@ -54,7 +54,7 @@
 
                         @stack('quantity_td_start')
                             @if (!$hideQuantity)
-                            <td colspan="1" class="pb-4" style="padding-right: 5px; padding-left: 5px;">
+                            <td colspan="1" class="pb-3 border-bottom-0" style="padding-right: 5px; padding-left: 5px;">
                                 <div>
                                     @stack('quantity_input_start')
                                     <input type="text"
@@ -79,7 +79,7 @@
 
                         @stack('price_td_start')
                             @if (!$hidePrice)
-                                <td colspan="1" class="pb-4" style="padding-right: 5px; padding-left: 5px;">
+                                <td colspan="1" class="pb-3 border-bottom-0" style="padding-right: 5px; padding-left: 5px;">
                                     <div>
                                         @stack('price_input_start')
                                             {{ Form::moneyGroup('price', '', '', ['required' => 'required', 'row-input' => 'true', 'v-model' => 'row.price', 'v-error' => 'form.errors.get(\'items.\' + index + \'.price\')', 'v-error-message' => 'form.errors.get(\'items.\' + index + \'.price\')' , 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; form.errors.clear(\'items.\' + index + \'.price\'); onCalculateTotal'], 0.00, 'text-right input-price p-0') }}
@@ -92,7 +92,7 @@
                         @if (!$hideDiscount)
                             @if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
                                 @stack('discount_td_start')
-                                    <td colspan="1" class="pb-4"
+                                    <td colspan="1" class="pb-3 border-bottom-0"
                                         :class="[{'has-error': form.errors.has('items.' + index + '.discount') }]">
                                         @stack('discount_input_start')
                                         <div class="input-group input-group-merge">
@@ -127,7 +127,7 @@
 
                         @stack('total_td_start')
                             @if (!$hideAmount)
-                                <td colspan="1" class="text-right long-texts pb-4">
+                                <td colspan="1" class="text-right long-texts pb-3 border-bottom-0">
                                     <div>
                                         {{ Form::moneyGroup('total', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
                                     </div>
@@ -136,7 +136,7 @@
                         @stack('total_td_end')
 
                         @stack('delete_td_start')
-                            <td colspan="1" class="pb-4 align-middle">
+                            <td colspan="1" class="pb-3 align-middle border-bottom-0">
                                 <div>
                                     <button type="button" @click="onDeleteItem(index)" class="btn btn-link btn-delete p-0">
                                         <i class="far fa-trash-alt"></i>
@@ -147,11 +147,11 @@
                     </tr>
 
                     <tr>
-                        <td colspan="3">
+                        <td class="border-top-0" colspan="3">
                             @stack('item_custom_fields')
                         </td>
 
-                        <td colspan="4" class="p-0">
+                        <td class="border-top-0 p-0" colspan="4">
                             <table class="w-100">
                                 <colgroup>
                                     <col style="width: 100px;">
diff --git a/resources/views/components/documents/form/main.blade.php b/resources/views/components/documents/form/main.blade.php
index 867ddd220..d48a89b02 100644
--- a/resources/views/components/documents/form/main.blade.php
+++ b/resources/views/components/documents/form/main.blade.php
@@ -1,4 +1,8 @@
 <div class="card">
+    <div class="document-loading" v-if="!page_loaded">
+        <div><i class="fas fa-spinner fa-pulse fa-7x"></i></div>
+    </div>
+
     <div class="card-body">
         <x-documents.form.metadata
             type="{{ $type }}"