diff --git a/app/Http/Controllers/Sales/Invoices.php b/app/Http/Controllers/Sales/Invoices.php
index 3c5f9f46f..bae2fb4a6 100644
--- a/app/Http/Controllers/Sales/Invoices.php
+++ b/app/Http/Controllers/Sales/Invoices.php
@@ -93,7 +93,7 @@ class Invoices extends Controller
 
         $currency = Currency::where('code', setting('default.currency'))->first();
 
-        $items = Item::enabled()->orderBy('name')->pluck('name', 'id');
+        $items = Item::enabled()->orderBy('name')->get();
 
         $taxes = Tax::enabled()->orderBy('name')->get()->pluck('title', 'id');
 
@@ -189,7 +189,7 @@ class Invoices extends Controller
 
         $currency = Currency::where('code', $invoice->currency_code)->first();
 
-        $items = Item::enabled()->orderBy('name')->pluck('name', 'id');
+        $items = Item::enabled()->orderBy('name')->get();
 
         $taxes = Tax::enabled()->orderBy('name')->get()->pluck('title', 'id');
 
diff --git a/public/css/element.css b/public/css/element.css
index 96a4ce2b5..c470e578b 100644
--- a/public/css/element.css
+++ b/public/css/element.css
@@ -2596,6 +2596,14 @@
     padding-right: 35px
 }
 
+.el-select.pl-20 .el-input .el-input__inner {
+    padding-left: 20px !important;
+}
+
+.el-select.mr-40 .el-input .el-input__inner {
+    margin-right: 40px !important;
+}
+
 .select-tax .el-select .el-select__tags {
     width: unset !important;
     max-width: unset !important;
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index 65cd977ac..a0d50d63f 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -284,6 +284,7 @@
     </base-input>
 
     <el-select v-else
+        :class="'pl-20 mr-40'"
         v-model="real_model"
         @input="change"
         filterable
@@ -292,7 +293,13 @@
         :placeholder="placeholder"
         :remote-method="remoteMethod"
         :loading="loading">
-            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+            <div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty loading">
+                    {{ loadingText }}
+                </p>
+            </div>
+
+            <div v-else-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <p class="el-select-dropdown__empty">
                     {{ noMatchingDataText }}
                 </p>
@@ -330,10 +337,10 @@
                 </span>
             </template>
 
-            <el-option v-if="!group" v-for="(label, value) in selectOptions"
-               :key="value"
-               :label="label"
-               :value="value">
+            <el-option v-if="!group" v-for="option in selectOptions"
+               :key="option.id"
+               :label="option.name"
+               :value="option.id">
             </el-option>
 
             <el-option-group
@@ -349,7 +356,7 @@
                 </el-option>
             </el-option-group>
 
-            <el-option v-if="addNew.status && selectOptions.length != 0" class="el-select__footer" :value="add_new">
+            <el-option v-if="!loading && addNew.status && selectOptions != null && selectOptions.length != 0" class="el-select__footer" :value="add_new">
                 <div @click="onAddItem">
                     <i class="fas fa-plus"></i>
                     <span>
@@ -464,6 +471,11 @@ export default {
             description: "Selectbox collapse status"
         },
 
+        loadingText: {
+            type: String,
+            default: 'Loading...',
+            description: "Selectbox loading message"
+        },
         noDataText: {
             type: String,
             default: 'No Data',
@@ -474,6 +486,10 @@ export default {
             default: 'No Matchign Data',
             description: "Selectbox search option not found item message"
         },
+
+        remoteAction: null,
+        remoteType: 'invoice',
+        currecnyCode: 'USD',
     },
 
     data() {
@@ -499,6 +515,7 @@ export default {
         remoteMethod(query) {
             if (query !== '') {
                 this.loading = true;
+
                 /*
                 this.list = [];
                 this.selectOptions = this.options;
@@ -513,12 +530,15 @@ export default {
 
                 this.selectOptions = this.list;
                 */
+               if (!this.remoteAction) {
+                   this.remoteAction = url + '/common/items/autocomplete';
+               }
 
-                axios.get(url + '/common/items/autocomplete', {
+                axios.get(this.remoteAction, {
                     params: {
-                        type: 'email',
+                        type: this.remoteType,
                         query: query,
-                        currency_code: 'USD',
+                        currency_code: this.currencyCode,
                     }
                 })
                 .then(response => {
@@ -539,9 +559,15 @@ export default {
         change() {
             this.$emit('change', this.real_model);
             this.$emit('interface', this.real_model);
-            this.$emit('label', this.selectOptions[this.real_model]);
 
-            alert(this.selectOptions[this.real_model]);
+            this.selectOptions.forEach(item => {
+                if (item.id == this.real_model) {
+                    this.$emit('label', item.name);
+                    this.$emit('option', item);
+
+                    return;
+                }
+            });
         },
 
         onAddItem() {
@@ -649,6 +675,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/assets/js/views/sales/invoices.js b/resources/assets/js/views/sales/invoices.js
index 48f5a9ba3..e84e4a601 100644
--- a/resources/assets/js/views/sales/invoices.js
+++ b/resources/assets/js/views/sales/invoices.js
@@ -179,9 +179,8 @@ const app = new Vue({
             this.form.items[index].name = item.name;
             this.form.items[index].price = (item.purchase_price).toFixed(2);
             this.form.items[index].quantity = 1;
+            this.form.items[index].tax_id = [item.tax_id.toString()];
             this.form.items[index].total = item.total;
-
-            this.form.items[index].show = false;
         },
 
         onDeleteItem(index) {
diff --git a/resources/views/partials/form/select_remote_group.blade.php b/resources/views/partials/form/select_remote_group.blade.php
index 8e5032538..f87188c74 100644
--- a/resources/views/partials/form/select_remote_group.blade.php
+++ b/resources/views/partials/form/select_remote_group.blade.php
@@ -38,6 +38,7 @@
     :form-error="form.errors.get('{{ $name }}')"
     @endif
 
+    :loading-text="'{{ trans('general.loading') }}'"
     :no-data-text="'{{ trans('general.no_data') }}'"
     :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
 ></akaunting-select-remote>
diff --git a/resources/views/sales/invoices/item.blade.php b/resources/views/sales/invoices/item.blade.php
index e92a9d67c..2010fae3d 100644
--- a/resources/views/sales/invoices/item.blade.php
+++ b/resources/views/sales/invoices/item.blade.php
@@ -43,15 +43,20 @@
                 ])}}"
                 @interface="row.item_id = $event"
                 @label="row.name = $event"
+                @option="onSelectItem($event, index)"
+                :remote-action="'{{ route('items.autocomplete') }}'"
+                :remote-type="'invoice'"
+                :currency-code="form.currency_code"
                 :form-error="form.errors.get('name')"
+                :loading-text="'{{ trans('general.loading') }}'"
                 :no-data-text="'{{ trans('general.no_data') }}'"
                 :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
             ></akaunting-select-remote>
             <input type="hidden"
-                       data-item="name"
-                       v-model="row.name"
-                       @input="onCalculateTotal"
-                       name="item[][name]">
+                data-item="name"
+                v-model="row.name"
+                @input="onCalculateTotal"
+                name="item[][name]">
             {!! $errors->first('item.name', '<p class="help-block">:message</p>') !!}
             @stack('name_input_end')
         </td>