diff --git a/app/Http/Controllers/Purchases/Bills.php b/app/Http/Controllers/Purchases/Bills.php
index a4934f08c..3def477d5 100644
--- a/app/Http/Controllers/Purchases/Bills.php
+++ b/app/Http/Controllers/Purchases/Bills.php
@@ -90,7 +90,7 @@ class Bills 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');
 
@@ -184,7 +184,7 @@ class Bills extends Controller
 
         $currency = Currency::where('code', $bill->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');
 
@@ -225,7 +225,7 @@ class Bills extends Controller
     /**
      * Remove the specified resource from storage.
      *
-     * @param  $id
+     * @param  $bill
      *
      * @return Response
      */
diff --git a/resources/assets/js/views/purchases/bills.js b/resources/assets/js/views/purchases/bills.js
index 168f9eedb..d05cc7a01 100644
--- a/resources/assets/js/views/purchases/bills.js
+++ b/resources/assets/js/views/purchases/bills.js
@@ -16,8 +16,10 @@ import Form from './../../plugins/form';
 import Error from './../../plugins/error';
 import BulkAction from './../../plugins/bulk-action';
 
+import { Link } from 'element-ui';
+
 // plugin setup
-Vue.use(DashboardPlugin);
+Vue.use(DashboardPlugin, Link);
 
 const app = new Vue({
     el: '#app',
@@ -179,9 +181,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/purchases/bills/create.blade.php b/resources/views/purchases/bills/create.blade.php
index 2fd60e832..db45e9773 100644
--- a/resources/views/purchases/bills/create.blade.php
+++ b/resources/views/purchases/bills/create.blade.php
@@ -32,7 +32,7 @@
                     <div class="col-md-12 mb-4">
                         {!! Form::label('items', trans_choice('general.items', 2), ['class' => 'form-control-label']) !!}
                         <div class="table-responsive">
-                            <table class="table table-bordered"  id="items">
+                            <table class="table table-bordered" id="items">
                                 <thead class="thead-light">
                                     <tr class="row">
                                         @stack('actions_th_start')
@@ -99,7 +99,7 @@
                                                                                 <i class="fa fa-percent"></i>
                                                                             </span>
                                                                         </div>
-                                                                        {!! Form::number('pre_discount', null, ['id' => 'pre-discount', 'class' => 'form-control text-right']) !!}
+                                                                        {!! Form::number('pre_discount', null, ['id' => 'pre-discount', 'class' => 'form-control']) !!}
                                                                     </div>
                                                                 </div>
                                                                 <div class="col-md-6">
@@ -109,18 +109,18 @@
                                                                 </div>
                                                             </div>
                                                         </div>
-                                                            <div class="discount card-footer">
-                                                                <div class="row text-center">
-                                                                    <div class="col-md-12">
-                                                                        <a href="javascript:void(0)" @click="discount = false"  class="btn btn-icon btn-outline-secondary">
-                                                                            <span class="btn-inner--icon"><i class="fas fa-times"></i></span>
-                                                                            <span class="btn-inner--text">{{ trans('general.cancel') }}</span>
-                                                                        </a>
-                                                                        {!! Form::button('<span class="fa fa-save"></span> &nbsp;' . trans('general.save'), ['type' => 'button', 'id' => 'save-discount', '@click' => 'onAddDiscount', 'class' => 'btn btn-success']) !!}
-                                                                    </div>
+                                                        <div class="discount card-footer">
+                                                            <div class="row text-center">
+                                                                <div class="col-md-12">
+                                                                    <a href="javascript:void(0)" @click="discount = false"  class="btn btn-icon btn-outline-secondary">
+                                                                        <span class="btn-inner--icon"><i class="fas fa-times"></i></span>
+                                                                        <span class="btn-inner--text">{{ trans('general.cancel') }}</span>
+                                                                    </a>
+                                                                    {!! Form::button('<span class="fa fa-save"></span> &nbsp;' . trans('general.save'), ['type' => 'button', 'id' => 'save-discount', '@click' => 'onAddDiscount', 'class' => 'btn btn-success']) !!}
                                                                 </div>
                                                             </div>
                                                         </div>
+                                                    </div>
                                                     <el-link class="cursor-pointer text-info" slot="reference" type="primary" v-if="!totals.discount_text">{{ trans('invoices.add_discount') }}</el-link>
                                                     <el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
                                                 </el-popover>
diff --git a/resources/views/purchases/bills/edit.blade.php b/resources/views/purchases/bills/edit.blade.php
index e50e86bc9..965833b8c 100644
--- a/resources/views/purchases/bills/edit.blade.php
+++ b/resources/views/purchases/bills/edit.blade.php
@@ -113,7 +113,7 @@
                                                         <div class="discount card-footer">
                                                             <div class="row text-center">
                                                                 <div class="col-md-12">
-                                                                    <a href="javascript:void(0)" @click="discount = false"  class="btn btn-icon btn-outline-secondary">
+                                                                    <a href="javascript:void(0)" @click="discount = false" class="btn btn-icon btn-outline-secondary">
                                                                         <span class="btn-inner--icon"><i class="fas fa-times"></i></span>
                                                                         <span class="btn-inner--text">{{ trans('general.cancel') }}</span>
                                                                     </a>
@@ -191,7 +191,7 @@
 
 @push('scripts_start')
     <script type="text/javascript">
-        var bill_items = {!! json_encode($bill->items()->select(['item_id', 'name', 'quantity', 'price', 'total', 'tax'])->get()) !!};
+        var bill_items = {!! json_encode($bill->items()->get()) !!};
     </script>
 
     <script src="{{ asset('public/js/purchases/bills.js?v=' . version('short')) }}"></script>
diff --git a/resources/views/purchases/bills/item.blade.php b/resources/views/purchases/bills/item.blade.php
index eeafd4cdf..0595e1bde 100644
--- a/resources/views/purchases/bills/item.blade.php
+++ b/resources/views/purchases/bills/item.blade.php
@@ -16,39 +16,36 @@
     @stack('name_td_start')
         <td class="col-md-3 border-right-0 border-bottom-0">
             @stack('name_input_start')
-                <input class="form-control"
-                       data-item="name"
-                       required="required"
-                       name="items[][name]"
-                       v-model="row.name"
-                       @input="onGetItem($event, index)"
-                       type="text"
-                       autocomplete="off">
-                <div class="dropdown-menu item-show dropdown-menu-center" ref="menu" :class="[{show: row.show}]">
-                    <div class="list-group list-group-flush">
-                        <a class="list-group-item list-group-item-action" v-for="(item, item_index) in items" @click="onSelectItem(item, index)">
-                            <div class="row align-items-center">
-                                <div class="col ml--2">
-                                    <div class="d-flex justify-content-between align-items-center">
-                                        <div>
-                                            <div class="name" v-text="item.name"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-                <input name="items[][show]"
-                       value="false"
-                       v-model="row.show"
-                       data-item="show"
-                       type="hidden">
-                <input name="items[][item_id]"
-                       v-model="row.item_id"
-                       data-item="item_id"
-                       type="hidden">
-                {!! $errors->first('item.name', '<p class="help-block">:message</p>') !!}
+            <akaunting-select-remote
+                :form-classes="[{'has-error': form.errors.get('name') }]"
+                :placeholder="'{{ trans('general.type_item_name') }}'"
+                :name="'item_id'"
+                :options="{{ json_encode($items) }}"
+                :value="'{{ old('item_id', '') }}'"
+                :add-new="{{ json_encode([
+                    'status' => true,
+                    'text' => trans('general.form.add_new', ['field' => '']),
+                    'path' => route('modals.items.store'),
+                    'type' => 'inline',
+                    'field' => 'name',
+                ])}}"
+                @interface="row.item_id = $event"
+                @label="row.name = $event"
+                @option="onSelectItem($event, index)"
+                :remote-action="'{{ route('items.autocomplete') }}'"
+                :remote-type="'bill'"
+                :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]">
+            {!! $errors->first('item.name', '<p class="help-block">:message</p>') !!}
             @stack('name_input_end')
         </td>
     @stack('name_td_end')
@@ -73,8 +70,8 @@
         <td class="col-md-2 border-right-0 border-bottom-0">
             @stack('price_input_start')
                 <input class="form-control text-right input-price"
-                       required="required"
                        autocomplete="off"
+                       required="required"
                        data-item="price"
                        v-model.lazy="row.price"
                        v-money="money"
@@ -98,7 +95,9 @@
                     'data-item' => 'tax_id',
                     'v-model' => 'row.tax_id',
                     'change' => 'onCalculateTotal',
-                    'class' => 'form-control'
+                    'class' => 'form-control',
+                    'collapse' => 'false',
+                    'path' => route('modals.taxes.create')
                 ], 'mb-0 select-tax') }}
             @stack('tax_id_input_end')
         </td>
diff --git a/resources/views/sales/invoices/edit.blade.php b/resources/views/sales/invoices/edit.blade.php
index ec537c2cd..b75d6c891 100644
--- a/resources/views/sales/invoices/edit.blade.php
+++ b/resources/views/sales/invoices/edit.blade.php
@@ -193,7 +193,7 @@
 
 @push('scripts_start')
     <script type="text/javascript">
-        var invoice_items = {!! json_encode($invoice->items()->select(['item_id', 'name', 'quantity', 'price', 'total', 'tax'])->get()) !!};
+        var invoice_items = {!! json_encode($invoice->items()->get()) !!};
     </script>
 
     <script src="{{ asset('public/js/sales/invoices.js?v=' . version('short')) }}"></script>