diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index 693c8876c..5a9fb0548 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -15,7 +15,13 @@
             :multiple="multiple"
             :readonly="readonly"
             :collapse-tags="collapse"
+            :loading="loading"
         >
+            <div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty loading">
+                    {{ loadingText }}
+                </p>
+            </div>
 
             <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <p class="el-select-dropdown__empty">
@@ -81,7 +87,7 @@
                 </el-option>
             </el-option-group>
 
-            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
+            <el-option v-if="!loading && addNew.status && options.length != 0" class="el-select__footer" :disabled="disabled" :value="add_new">
                 <div @click="onAddItem">
                     <i class="fas fa-plus"></i>
                     <span>
@@ -245,6 +251,12 @@ export default {
             description: "Selectbox collapse status"
         },
 
+        loadingText: {
+            type: String,
+            default: 'Loading...',
+            description: "Selectbox loading message"
+        },
+
         noDataText: {
             type: String,
             default: 'No Data',
@@ -275,6 +287,7 @@ export default {
             form: {},
             sort_options: [],
             new_options: {},
+            loading: false,
         }
     },
 
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index e69466d9e..ed67ff1a8 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -18,8 +18,13 @@
             :remote-method="remoteMethod"
             :loading="loading"
         >
+            <div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty loading">
+                    {{ loadingText }}
+                </p>
+            </div>
 
-            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+            <div v-if="!loading && addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <p class="el-select-dropdown__empty">
                     {{ noMatchingDataText }}
                 </p>
@@ -36,7 +41,7 @@
                 </ul>
             </div>
 
-            <div v-else-if="addNew.status && options.length == 0" slot="empty">
+            <div v-else-if="!loading && addNew.status && options.length == 0" slot="empty">
                 <p class="el-select-dropdown__empty">
                     {{ noDataText }}
                 </p>
@@ -70,11 +75,11 @@
             <el-option-group
                 v-if="group"
                 v-for="(group_options, group_index) in sortOptions"
-                :key="group_options.key"
+                :key="group_index"
                 :label="group_options.key">
                 <el-option
                     v-for="(option, option_index) in group_options.value"
-                    :key="option.option_index"
+                    :key="option_index"
                     :disabled="disabledOptions.includes(option.key)"
                     :label="option.value"
                     :value="option.key">
@@ -83,7 +88,7 @@
                 </el-option>
             </el-option-group>
 
-            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true"  :value="add_new">
+            <el-option v-if="!loading && addNew.status && options.length != 0" class="el-select__footer" :disabled="disabled" :value="add_new">
                 <div @click="onAddItem">
                     <i class="fas fa-plus"></i>
                     <span>
@@ -114,8 +119,13 @@
             :remote-method="remoteMethod"
             :loading="loading"
         >
+            <div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty loading">
+                    {{ loadingText }}
+                </p>
+            </div>
 
-            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+            <div v-if="!loading && addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <p class="el-select-dropdown__empty">
                     {{ noMatchingDataText }}
                 </p>
@@ -132,7 +142,7 @@
                 </ul>
             </div>
 
-            <div v-else-if="addNew.status && options.length == 0" slot="empty">
+            <div v-else-if="!loading && addNew.status && options.length == 0" slot="empty">
                 <p class="el-select-dropdown__empty">
                     {{ noDataText }}
                 </p>
@@ -166,7 +176,7 @@
             <el-option-group
                 v-if="group"
                 v-for="(group_options, group_index) in sortOptions"
-                :key="group_options.key"
+                :key="group_index"
                 :label="group_options.key">
                 <el-option
                     v-for="(option, option_index) in group_options.value"
@@ -179,7 +189,7 @@
                 </el-option>
             </el-option-group>
 
-            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true"  :value="add_new">
+            <el-option v-if="!loading && addNew.status && options.length != 0" class="el-select__footer" :disabled="disabled"  :value="add_new">
                 <div @click="onAddItem">
                     <i class="fas fa-plus"></i>
                     <span>
@@ -818,25 +828,55 @@ export default {
             if (!this.multiple) {
                 this.selected = selected.toString();
             } else {
-                let is_string = false;
-                let pre_value = [];
+                if (Array.isArray(this.selected) && !this.selected.length) {
+                    this.selected = selected;
+                } else {
+                    let is_string = false;
+                    let pre_value = [];
 
-                selected.forEach(item => {
-                    if (typeof item != 'string') {
-                        is_string = true;
-                        pre_value.push(item.toString());
+                    selected.forEach(item => {
+                        if (typeof item != 'string') {
+                            is_string = true;
+                            pre_value.push(item.toString());
+                        }
+                    });
+
+                    if (is_string) {
+                        this.selected = pre_value;
                     }
-                });
-
-                if (is_string) {
-                    this.selected = pre_value;
                 }
             }
         },
 
         value: function (selected) {
             if (!this.multiple) {
-                this.selected = selected;
+                this.selected = selected.toString();
+            } else {
+                if (Array.isArray(this.selected) && !this.selected.length) {
+                    this.selected = selected;
+                } else {
+                    let is_string = false;
+                    let pre_value = [];
+
+                    selected.forEach(item => {
+                        if (typeof item != 'string') {
+                            is_string = true;
+                            pre_value.push(item.toString());
+                        }
+                    });
+
+                    if (is_string) {
+                        this.selected = pre_value;
+                    }
+                }
+            }
+
+            this.change();
+        },
+
+        model: function (selected) {
+            if (!this.multiple) {
+                this.selected = selected.toString();
             } else {
                 let is_string = false;
                 let pre_value = [];
@@ -855,12 +895,6 @@ export default {
 
             this.change();
         },
-
-        model: function (selected) {
-            this.selected = selected;
-
-            this.change();
-        },
     },
 }
 </script>
@@ -874,6 +908,10 @@ export default {
         padding: 10px 0 0 !important;
     }
 
+    .el-select-dropdown__empty.loading {
+        padding: 10px 0 !important;
+    }
+
     .el-select__footer {
         text-align: center;
         border-top: 1px solid #dee2e6;
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index e90b56aa7..2b0be6ab3 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -27,16 +27,16 @@
                 @if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
                     @stack('item_discount_td_start')
                         <tr id="tr-subtotal">
-                            <td class="border-top-0 pb-0"></td>
-                            <td class="text-right border-top-0 border-right-0 border-bottom-0 align-middle pb-0">
+                            <td class="border-top-0 pt-0 pb-0"></td>
+                            <td class="text-right border-top-0 border-right-0 border-bottom-0 align-middle pt-0 pb-0">
                                 <strong>{{ trans('invoices.item_discount') }}</strong>
                             </td>
-                            <td class="text-right border-top-0 border-bottom-0 long-texts pb-0">
+                            <td class="text-right border-top-0 border-bottom-0 long-texts pt-0 pb-0">
                                 <div>
                                     {{ Form::moneyGroup('item_discount', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.item_discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
                                 </div>
                             </td>
-                            <td class="border-top-0 pb-0"></td>
+                            <td class="border-top-0 pt-0 pb-0"></td>
                         </tr>
                     @stack('item_discount_td_end')
                 @endif
@@ -44,8 +44,8 @@
                 @if (in_array(setting('localisation.discount_location', 'total'), ['total', 'both']))
                     @stack('add_discount_td_start')
                         <tr id="tr-discount">
-                            <td class="border-top-0 pb-0"></td>
-                            <td class="text-right border-top-0 border-right-0 border-bottom-0 align-middle pb-0">
+                            <td class="border-top-0 pt-0 pb-0"></td>
+                            <td class="text-right border-top-0 border-right-0 border-bottom-0 align-middle pt-0 pb-0">
                                 <el-popover
                                     popper-class="p-0 h-0"
                                     placement="bottom"
@@ -86,13 +86,13 @@
                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                 </el-popover>
                             </td>
-                            <td class="text-right border-top-0  border-bottom-0 pb-0">
+                            <td class="text-right border-top-0  border-bottom-0 pt-0 pb-0">
                                 <div>
                                     {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
                                 </div>
                                 {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
                             </td>
-                            <td class="border-top-0 pb-0"></td>
+                            <td class="border-top-0 pt-0 pb-0"></td>
                         </tr>
                     @stack('add_discount_td_end')
                 @endif
@@ -100,8 +100,8 @@
                 @stack('tax_total_td_start')
                     <tr v-for="(tax, tax_index) in totals.taxes"
                     :index="tax_index">
-                        <td class="border-top-0 pb-0"></td>
-                        <td class="text-right border-top-0  border-right-0 border-bottom-0 align-middle pb-0">
+                        <td class="border-top-0 pt-0 pb-0"></td>
+                        <td class="text-right border-top-0  border-right-0 border-bottom-0 align-middle pt-0 pb-0">
                             <strong v-html="tax.name"></strong>
                         </td>
                         <td class="text-right border-top-0 border-bottom-0 long-texts pb-0">
@@ -109,30 +109,30 @@
                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'tax.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
                             </div>
                         </td>
-                        <td class="border-top-0 pb-0"></td>
+                        <td class="border-top-0 pt-0 pb-0"></td>
                     </tr>
                 @stack('tax_total_td_end')
 
                 @stack('grand_total_td_start')
                     <tr id="tr-total">
-                        <td class="border-top-0 pb-0"></td>
-                        <td class="text-right border-top-0 border-right-0 align-middle pb-0">
+                        <td class="border-top-0 pt-0 pb-0"></td>
+                        <td class="text-right border-top-0 border-right-0 align-middle pt-0 pb-0">
                             <strong class="document-total-span">{{ trans('invoices.total') }}</strong>
                             {{ Form::selectGroup('currency_code', '', 'exchange-alt', $currencies, setting('default.currency'), ['required' => 'required', 'model' => 'form.currency_code', 'change' => 'onChangeCurrency'], 'document-total-currency') }}
                         </td>
-                        <td class="text-right border-top-0 long-texts pb-0">
+                        <td class="text-right border-top-0 long-texts pt-0 pb-0">
                             <div>
                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
                             </div>
                         </td>
-                        <td class="border-top-0"></td>
+                        <td class="border-top-0 pt-0 pb-0"></td>
                     </tr>
                     @stack('grand_total_td_end')
 
                     @stack('currency_conversion_td_start')
                         <tr id="tr-currency-conversion" class="d-none" :class="[{'d-table-row': (('{{ setting('default.currency') }}' != form.currency_code) && totals.total)}]">
-                            <td class="border-top-0 pb-0"></td>
-                            <td class="text-right border-top-0 border-right-0 align-middle pb-0" colspan="2">
+                            <td class="border-top-0 pt-0 pb-0"></td>
+                            <td class="text-right border-top-0 border-right-0 align-middle pt-0 pb-0" colspan="2">
                                 <akaunting-currency-conversion 
                                     currency-conversion-text="{{ trans('currencies.conversion') }}"
                                     :price="(totals.total / form.currency_rate).toFixed(2)"
@@ -140,7 +140,7 @@
                                     :currency-rate="form.currency_rate"
                                 ></akaunting-currency-conversion>
                             </td>
-                            <td class="border-top-0"></td>
+                            <td class="border-top-0 pt-0 pb-0"></td>
                         </tr>
                         @stack('currency_conversion_td_end')
                 </tbody>
diff --git a/resources/views/partials/form/file_group.blade.php b/resources/views/partials/form/file_group.blade.php
index dd8f65470..82871ff93 100644
--- a/resources/views/partials/form/file_group.blade.php
+++ b/resources/views/partials/form/file_group.blade.php
@@ -7,7 +7,7 @@
             {!! Form::label($name, $text, ['class' => 'form-control-label'])!!}
         @endif
 
-        <div class="custom-file">
+        <div class="input-group input-group-merge">
             <dropzone-file-upload 
                 @if (!empty($attributes['options']))
                 options={{ json_encode($attributes['options']) }}