diff --git a/app/Http/Controllers/Purchases/Bills.php b/app/Http/Controllers/Purchases/Bills.php
index a5da78f73..ede836a24 100644
--- a/app/Http/Controllers/Purchases/Bills.php
+++ b/app/Http/Controllers/Purchases/Bills.php
@@ -105,7 +105,7 @@ class Bills extends Controller
 
         $items = Item::enabled()->orderBy('name')->get();
 
-        $taxes = Tax::enabled()->orderBy('name')->get()->pluck('title', 'id');
+        $taxes = Tax::enabled()->orderBy('name')->get();
 
         $categories = Category::type('expense')->enabled()->orderBy('name')->pluck('name', 'id');
 
@@ -199,7 +199,7 @@ class Bills extends Controller
 
         $items = Item::enabled()->orderBy('name')->get();
 
-        $taxes = Tax::enabled()->orderBy('name')->get()->pluck('title', 'id');
+        $taxes = Tax::enabled()->orderBy('name')->get();
 
         $categories = Category::type('expense')->enabled()->orderBy('name')->pluck('name', 'id');
 
diff --git a/app/Http/Controllers/Sales/Invoices.php b/app/Http/Controllers/Sales/Invoices.php
index be93a2f93..bbdad8975 100644
--- a/app/Http/Controllers/Sales/Invoices.php
+++ b/app/Http/Controllers/Sales/Invoices.php
@@ -109,7 +109,7 @@ class Invoices extends Controller
 
         $items = Item::enabled()->orderBy('name')->get();
 
-        $taxes = Tax::enabled()->orderBy('name')->get()->pluck('title', 'id');
+        $taxes = Tax::enabled()->orderBy('name')->get();
 
         $categories = Category::type('income')->enabled()->orderBy('name')->pluck('name', 'id');
 
@@ -205,7 +205,7 @@ class Invoices extends Controller
 
         $items = Item::enabled()->orderBy('name')->get();
 
-        $taxes = Tax::enabled()->orderBy('name')->get()->pluck('title', 'id');
+        $taxes = Tax::enabled()->orderBy('name')->get();
 
         $categories = Category::type('income')->enabled()->orderBy('name')->pluck('name', 'id');
 
diff --git a/resources/assets/js/components/AkauntingMoney.vue b/resources/assets/js/components/AkauntingMoney.vue
index 4f9d733b1..f8355f3ff 100644
--- a/resources/assets/js/components/AkauntingMoney.vue
+++ b/resources/assets/js/components/AkauntingMoney.vue
@@ -135,10 +135,10 @@ export default {
             //this.$emit('interface', this.model);
         },
         input(event) {
-            console.log(event);
             this.model = event;
-            this.$emit('change', event);
-            this.$emit('interface', event);
+
+            this.$emit('change', this.model);
+            this.$emit('interface', this.model);
         }
     },
 
@@ -157,8 +157,8 @@ export default {
             this.model = value;
         },
         model: function (model) {
-            this.$emit('change', this.model);
-            this.$emit('interface', this.model);
+            //this.$emit('change', this.model);
+            //this.$emit('interface', this.model);
         }
     },
 }
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index 9e986c2b0..b00cc374d 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -14,7 +14,7 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import NProgressAxios from './../plugins/nprogress-axios';
 
-import { Select, Option, Steps, Step, Button } from 'element-ui';
+import { Select, Option, Steps, Step, Button, Link } from 'element-ui';
 
 import Form from './../plugins/form';
 
@@ -34,6 +34,7 @@ export default {
         [Steps.name]: Steps,
         [Step.name]: Step,
         [Button.name]: Button,
+        [Link.name]: Link,
     },
 
     data: function () {
diff --git a/resources/assets/js/views/purchases/bills.js b/resources/assets/js/views/purchases/bills.js
index e8a6fdb6e..0ddccef7b 100644
--- a/resources/assets/js/views/purchases/bills.js
+++ b/resources/assets/js/views/purchases/bills.js
@@ -16,10 +16,8 @@ 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, Link);
+Vue.use(DashboardPlugin);
 
 const app = new Vue({
     el: '#app',
@@ -52,6 +50,7 @@ const app = new Vue({
             items: '',
             discount: false,
             currency: null,
+            taxes: null,
         }
     },
 
@@ -81,6 +80,10 @@ const app = new Vue({
 
             this.form.items = items;
         }
+
+        if (document.getElementById('taxes').getAttribute('data-value')) {
+            this.taxes = JSON.parse(document.getElementById('taxes').getAttribute('data-value'));
+        }
     },
 
     methods:{
@@ -125,49 +128,106 @@ const app = new Vue({
             if (items.length) {
                 let index = 0;
 
+                // get all items.
                 for (index = 0; index < items.length; index++) {
+                    // get row item and set item variable.
                     let item = items[index];
 
+                    // item sub total calcute.
                     let item_sub_total = item.price * item.quantity;
-                    let item_tax_total = 0;
-                    let item_discount_total = (discount) ? item_sub_total - (item_sub_total * (discount / 100)) : 0;
 
+                    // item discount calculate.
+                    let item_discounted_total = item_sub_total;
+
+                    if (discount) {
+                        item_discounted_total = item_sub_total - (item_sub_total * (discount / 100));
+                    }
+
+                    // item tax calculate.
+                    let item_tax_total = 0;
+
+                    if (item.tax_id) {
+                        let inclusives = [];
+                        let compounds = [];
+                        let index_taxes = 0;
+                        let taxes = this.taxes;
+
+                        item.tax_id.forEach(function(item_tax_id) {
+                            for (index_taxes = 0; index_taxes < taxes.length; index_taxes++) {
+                                let tax = taxes[index_taxes];
+
+                                if (item_tax_id != tax.id) {
+                                    continue;
+                                }
+
+                                switch (tax.type) {
+                                    case 'inclusive':
+                                        inclusives.push(tax);
+                                        break;
+                                    case 'compound':
+                                        compounds.push(tax);
+                                        break;
+                                    case 'fixed':
+                                        item_tax_total += tax.rate * item.quantity;
+                                        break;
+                                    default:
+                                        let item_tax_amount = (item_discounted_total / 100) * tax.rate;
+
+                                        item_tax_total += item_tax_amount;
+                                        break;
+                                }
+                            }
+                        });
+
+                        if (inclusives.length) {
+                            let item_sub_and_tax_total = item_discounted_total + item_tax_total;
+
+                            let inclusive_total = 0;
+
+                            inclusives.forEach(function(inclusive) {
+                                inclusive_total += inclusive.rate;
+                            });
+
+                            let item_base_rate = item_sub_and_tax_total / (1 + inclusive_total / 100);
+
+                            item_tax_total = item_sub_and_tax_total - item_base_rate;
+
+                            item_sub_total = item_base_rate + discount;
+                        }
+
+                        if (compounds.length) {
+                            compounds.forEach(function(compound) {
+                                item_tax_total += ((item_discounted_total + item_tax_total) / 100) * compound.rate;
+                            });
+                        }
+                    }
+
+                    // set item total
                     items[index].total = item_sub_total;
 
-                    sub_total += items[index].total;
-                    discount_total += item_discount_total;
+                    // calculate sub, tax, discount all items.
+                    sub_total += item_sub_total;
                     tax_total += item_tax_total;
-                    grand_total += sub_total + tax_total;
                 }
             }
 
+            // set global total variable.
             this.totals.sub = sub_total;
-            this.totals.discount = discount_total;
             this.totals.tax = tax_total;
+
+            // Apply discount to total
+            if (discount) {
+                discount_total = sub_total * (discount / 100);
+
+                this.totals.discount = discount_total;
+
+                sub_total = sub_total - (sub_total * (discount / 100));
+            }
+
+            // set all item grand total.
+            grand_total = sub_total + tax_total;
+
             this.totals.total = grand_total;
-            /*
-            axios.post(url + '/common/items/total', {
-                items: this.form.items,
-                discount: this.form.discount,
-                currency_code: this.form.currency_code
-            })
-            .then(response => {
-                let items = this.form.items;
-
-                response.data.items.forEach(function(value, index) {
-                    items[index].total = value;
-                });
-
-                this.form.items = items;
-
-                this.totals.sub = response.data.sub_total;
-                this.totals.discount = response.data.discount_total;
-                this.totals.tax = response.data.tax_total;
-                this.totals.total = response.data.grand_total;
-                this.totals.discount_text = response.data.discount_text;
-            })
-            .catch(error => {
-            });*/
         },
 
         // add bill item row
@@ -227,6 +287,14 @@ const app = new Vue({
         onAddDiscount() {
             let discount = document.getElementById('pre-discount').value;
 
+            if (discount < 0) {
+                discount = 0;
+            } else if (discount > 100) {
+                discount = 100;
+            }
+
+            document.getElementById('pre-discount').value = discount;
+
             this.form.discount = discount;
             this.discount = false;
         },
diff --git a/resources/assets/js/views/sales/invoices.js b/resources/assets/js/views/sales/invoices.js
index e3a07c3bc..517aa1236 100644
--- a/resources/assets/js/views/sales/invoices.js
+++ b/resources/assets/js/views/sales/invoices.js
@@ -16,10 +16,8 @@ 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, Link);
+Vue.use(DashboardPlugin);
 
 const app = new Vue({
     el: '#app',
@@ -52,6 +50,7 @@ const app = new Vue({
             items: '',
             discount: false,
             currency: null,
+            taxes: null,
         }
     },
 
@@ -81,6 +80,10 @@ const app = new Vue({
 
             this.form.items = items;
         }
+
+        if (document.getElementById('taxes').getAttribute('data-value')) {
+            this.taxes = JSON.parse(document.getElementById('taxes').getAttribute('data-value'));
+        }
     },
 
     methods:{
@@ -125,49 +128,106 @@ const app = new Vue({
             if (items.length) {
                 let index = 0;
 
+                // get all items.
                 for (index = 0; index < items.length; index++) {
+                    // get row item and set item variable.
                     let item = items[index];
 
+                    // item sub total calcute.
                     let item_sub_total = item.price * item.quantity;
-                    let item_tax_total = 0;
-                    let item_discount_total = (discount) ? item_sub_total - (item_sub_total * (discount / 100)) : 0;
 
+                    // item discount calculate.
+                    let item_discounted_total = item_sub_total;
+
+                    if (discount) {
+                        item_discounted_total = item_sub_total - (item_sub_total * (discount / 100));
+                    }
+
+                    // item tax calculate.
+                    let item_tax_total = 0;
+
+                    if (item.tax_id) {
+                        let inclusives = [];
+                        let compounds = [];
+                        let index_taxes = 0;
+                        let taxes = this.taxes;
+
+                        item.tax_id.forEach(function(item_tax_id) {
+                            for (index_taxes = 0; index_taxes < taxes.length; index_taxes++) {
+                                let tax = taxes[index_taxes];
+
+                                if (item_tax_id != tax.id) {
+                                    continue;
+                                }
+
+                                switch (tax.type) {
+                                    case 'inclusive':
+                                        inclusives.push(tax);
+                                        break;
+                                    case 'compound':
+                                        compounds.push(tax);
+                                        break;
+                                    case 'fixed':
+                                        item_tax_total += tax.rate * item.quantity;
+                                        break;
+                                    default:
+                                        let item_tax_amount = (item_discounted_total / 100) * tax.rate;
+
+                                        item_tax_total += item_tax_amount;
+                                        break;
+                                }
+                            }
+                        });
+
+                        if (inclusives.length) {
+                            let item_sub_and_tax_total = item_discounted_total + item_tax_total;
+
+                            let inclusive_total = 0;
+
+                            inclusives.forEach(function(inclusive) {
+                                inclusive_total += inclusive.rate;
+                            });
+
+                            let item_base_rate = item_sub_and_tax_total / (1 + inclusive_total / 100);
+
+                            item_tax_total = item_sub_and_tax_total - item_base_rate;
+
+                            item_sub_total = item_base_rate + discount;
+                        }
+
+                        if (compounds.length) {
+                            compounds.forEach(function(compound) {
+                                item_tax_total += ((item_discounted_total + item_tax_total) / 100) * compound.rate;
+                            });
+                        }
+                    }
+
+                    // set item total
                     items[index].total = item_sub_total;
 
-                    sub_total += items[index].total;
-                    discount_total += item_discount_total;
+                    // calculate sub, tax, discount all items.
+                    sub_total += item_sub_total;
                     tax_total += item_tax_total;
-                    grand_total += sub_total + tax_total;
                 }
             }
 
+            // set global total variable.
             this.totals.sub = sub_total;
-            this.totals.discount = discount_total;
             this.totals.tax = tax_total;
+
+            // Apply discount to total
+            if (discount) {
+                discount_total = sub_total * (discount / 100);
+
+                this.totals.discount = discount_total;
+
+                sub_total = sub_total - (sub_total * (discount / 100));
+            }
+
+            // set all item grand total.
+            grand_total = sub_total + tax_total;
+
             this.totals.total = grand_total;
-            /*
-            axios.post(url + '/common/items/total', {
-                items: this.form.items,
-                discount: this.form.discount,
-                currency_code: this.form.currency_code
-            })
-            .then(response => {
-                let items = this.form.items;
-
-                response.data.items.forEach(function(value, index) {
-                    items[index].total = value;
-                });
-
-                this.form.items = items;
-
-                this.totals.sub = response.data.sub_total;
-                this.totals.discount = response.data.discount_total;
-                this.totals.tax = response.data.tax_total;
-                this.totals.total = response.data.grand_total;
-                this.totals.discount_text = response.data.discount_text;
-            })
-            .catch(error => {
-            });*/
         },
 
         // add invoice item row
@@ -216,7 +276,7 @@ const app = new Vue({
             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.purchase_price).toFixed(2);
+            this.form.items[index].total = (item.sale_price).toFixed(2);
         },
 
         // remove invocie item row => row_id = index
@@ -227,6 +287,14 @@ const app = new Vue({
         onAddDiscount() {
             let discount = document.getElementById('pre-discount').value;
 
+            if (discount < 0) {
+                discount = 0;
+            } else if (discount > 100) {
+                discount = 100;
+            }
+
+            document.getElementById('pre-discount').value = discount;
+
             this.form.discount = discount;
             this.discount = false;
         },
diff --git a/resources/views/purchases/bills/create.blade.php b/resources/views/purchases/bills/create.blade.php
index 22fe74f04..8dff1329a 100644
--- a/resources/views/purchases/bills/create.blade.php
+++ b/resources/views/purchases/bills/create.blade.php
@@ -80,7 +80,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="sub-total" v-html="totals.sub">0</span>
+                                                <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('sub_total_td_end')
@@ -93,7 +94,7 @@
                                                     placement="bottom"
                                                     width="300"
                                                     v-model="discount">
-                                                    <div class="card">
+                                                    <div class="card d-none" :class="[{'show' : discount}]">
                                                         <div class="discount card-body">
                                                             <div class="row align-items-center">
                                                                 <div class="col-md-6">
@@ -130,7 +131,9 @@
                                                 </el-popover>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0">
-                                                <span id="discount-total" v-html="totals.discount"></span>
+                                                {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
+                                                <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                                 {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
                                             </td>
                                         </tr>
@@ -143,7 +146,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="tax-total" v-html="totals.tax">0</span>
+                                                <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('tax_total_td_end')
@@ -155,7 +159,8 @@
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="grand-total" v-html="totals.total">0</span>
+                                                <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('grand_total_td_end')
diff --git a/resources/views/purchases/bills/edit.blade.php b/resources/views/purchases/bills/edit.blade.php
index 89156181c..1a038fca8 100644
--- a/resources/views/purchases/bills/edit.blade.php
+++ b/resources/views/purchases/bills/edit.blade.php
@@ -61,7 +61,7 @@
                                         @stack('total_th_end')
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody id="bill-item-rows">
                                     @include('purchases.bills.item')
 
                                     @stack('add_item_td_start')
@@ -81,7 +81,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="sub-total" v-html="totals.sub">0</span>
+                                                <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('sub_total_td_end')
@@ -94,7 +95,7 @@
                                                     placement="bottom"
                                                     width="300"
                                                     v-model="discount">
-                                                    <div class="card">
+                                                    <div class="card d-none" :class="[{'show' : discount}]">
                                                         <div class="discount card-body">
                                                             <div class="row align-items-center">
                                                                 <div class="col-md-6">
@@ -104,7 +105,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">
@@ -131,7 +132,9 @@
                                                 </el-popover>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0">
-                                                <span id="discount-total" v-html="totals.discount"></span>
+                                                {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
+                                                <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                                 {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
                                             </td>
                                         </tr>
@@ -144,7 +147,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="tax-total" v-html="totals.tax">0</span>
+                                                <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('tax_total_td_end')
@@ -156,7 +160,8 @@
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="grand-total" v-html="totals.total">0</span>
+                                                <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('grand_total_td_end')
diff --git a/resources/views/purchases/bills/item.blade.php b/resources/views/purchases/bills/item.blade.php
index e69ba0cd6..2e8e1baeb 100644
--- a/resources/views/purchases/bills/item.blade.php
+++ b/resources/views/purchases/bills/item.blade.php
@@ -90,7 +90,7 @@
                 :title="''"
                 :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
                 :name="'tax_id'"
-                :options="{{ json_encode($taxes) }}"
+                :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
                 :value="row.tax_id"
                 :multiple="true"
                 :add-new="{{ json_encode([
@@ -119,19 +119,28 @@
                 :no-data-text="'{{ trans('general.no_data') }}'"
                 :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
             ></akaunting-select>
+            <input id="taxes" name="taxes" type="hidden" data-value="{{ json_encode($taxes) }}" v-model="taxes">
             @stack('tax_id_input_end')
         </td>
     @stack('taxes_td_end')
 
     @stack('total_td_start')
         <td class="col-md-2 text-right total-column border-bottom-0 long-texts">
-            {{ Form::moneyGroup('total', '', '', ['required' => 'required', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right input-price d-none') }}
+            <akaunting-money :col="'d-none'"
+                :masked="true"
+                :error="{{ 'form.errors.get("total")' }}"
+                :name="'total'"
+                :currency="{{ json_encode($currency) }}"
+                :dynamic-currency="currency"
+                v-model="row.total"
+                @interface="row.total = $event"
+            ></akaunting-money>
             @stack('total_input_start')
-                <span id="item-total" v-if="row.total" v-html="row.total">0</span>
+                <span id="item-total" v-if="row.total" v-html="row.total"></span>
                 @if (empty($item) || !isset($item->total))
                     <span id="item-total" v-else>@money(0, $currency->code, true)</span>
                 @else
-                    <span id="item-total" v-else>@money($item->total, $bill->currency_code, true)</span>
+                    <span id="item-total" v-else>@money($item->total, $invoice->currency_code, true)</span>
                 @endif
             @stack('total_input_end')
         </td>
diff --git a/resources/views/sales/invoices/create.blade.php b/resources/views/sales/invoices/create.blade.php
index 0bfb367a7..3ac88b194 100644
--- a/resources/views/sales/invoices/create.blade.php
+++ b/resources/views/sales/invoices/create.blade.php
@@ -80,7 +80,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="sub-total" v-html="totals.sub">0</span>
+                                                <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('sub_total_td_end')
@@ -93,7 +94,7 @@
                                                     placement="bottom"
                                                     width="300"
                                                     v-model="discount">
-                                                    <div class="card">
+                                                    <div class="card d-none" :class="[{'show' : discount}]">
                                                         <div class="discount card-body">
                                                             <div class="row align-items-center">
                                                                 <div class="col-md-6">
@@ -130,7 +131,9 @@
                                                 </el-popover>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0">
-                                                <span id="discount-total" v-html="totals.discount"></span>
+                                                {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
+                                                <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                                 {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
                                             </td>
                                         </tr>
@@ -143,7 +146,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="tax-total" v-html="totals.tax">0</span>
+                                                <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('tax_total_td_end')
@@ -155,7 +159,8 @@
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="grand-total" v-html="totals.total">0</span>
+                                                <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('grand_total_td_end')
diff --git a/resources/views/sales/invoices/edit.blade.php b/resources/views/sales/invoices/edit.blade.php
index 95f961abc..bf60a1349 100644
--- a/resources/views/sales/invoices/edit.blade.php
+++ b/resources/views/sales/invoices/edit.blade.php
@@ -81,7 +81,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="sub-total" v-html="totals.sub">0</span>
+                                                <span id="sub-total" v-if="totals.sub" v-html="totals.sub"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('sub_total_td_end')
@@ -94,7 +95,7 @@
                                                     placement="bottom"
                                                     width="300"
                                                     v-model="discount">
-                                                    <div class="card">
+                                                    <div class="card d-none" :class="[{'show' : discount}]">
                                                         <div class="discount card-body">
                                                             <div class="row align-items-center">
                                                                 <div class="col-md-6">
@@ -104,7 +105,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">
@@ -131,7 +132,9 @@
                                                 </el-popover>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0">
-                                                <span id="discount-total" v-html="totals.discount"></span>
+                                                {{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
+                                                <span id="discount-total" v-if="totals.discount" v-html="totals.discount"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                                 {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
                                             </td>
                                         </tr>
@@ -144,7 +147,8 @@
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
                                                 {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="tax-total" v-html="totals.tax">0</span>
+                                                <span id="tax-total" v-if="totals.tax" v-html="totals.tax"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('tax_total_td_end')
@@ -156,7 +160,8 @@
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
                                                 {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
-                                                <span id="grand-total" v-html="totals.total">0</span>
+                                                <span id="grand-total" v-if="totals.total" v-html="totals.total"></span>
+                                                <span v-else>@money(0, $currency->code, true)</span>
                                             </td>
                                         </tr>
                                     @stack('grand_total_td_end')
diff --git a/resources/views/sales/invoices/item.blade.php b/resources/views/sales/invoices/item.blade.php
index 70846fb4e..a9c4c52cb 100644
--- a/resources/views/sales/invoices/item.blade.php
+++ b/resources/views/sales/invoices/item.blade.php
@@ -90,7 +90,7 @@
                 :title="''"
                 :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
                 :name="'tax_id'"
-                :options="{{ json_encode($taxes) }}"
+                :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
                 :value="row.tax_id"
                 :multiple="true"
                 :add-new="{{ json_encode([
@@ -119,15 +119,24 @@
                 :no-data-text="'{{ trans('general.no_data') }}'"
                 :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
             ></akaunting-select>
+            <input id="taxes" name="taxes" type="hidden" data-value="{{ json_encode($taxes) }}" v-model="taxes">
             @stack('tax_id_input_end')
         </td>
     @stack('taxes_td_end')
 
     @stack('total_td_start')
         <td class="col-md-2 text-right total-column border-bottom-0 long-texts">
-            {{ Form::moneyGroup('total', '', '', ['required' => 'required', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right input-price d-none') }}
+            <akaunting-money :col="'d-none'"
+                :masked="true"
+                :error="{{ 'form.errors.get("total")' }}"
+                :name="'total'"
+                :currency="{{ json_encode($currency) }}"
+                :dynamic-currency="currency"
+                v-model="row.total"
+                @interface="row.total = $event"
+            ></akaunting-money>
             @stack('total_input_start')
-                <span id="item-total" v-if="row.total" v-html="row.total">0</span>
+                <span id="item-total" v-if="row.total" v-html="row.total"></span>
                 @if (empty($item) || !isset($item->total))
                     <span id="item-total" v-else>@money(0, $currency->code, true)</span>
                 @else