diff --git a/public/css/custom.css b/public/css/custom.css
index bf90d118f..0d23a4b30 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -1631,4 +1631,74 @@ table .align-items-center td span.badge {
 .form-group .el-select .el-select__tags > span {
     display: contents !important;
 }
-/* Select Tag Fixed Content Finish */
\ No newline at end of file
+/* Select Tag Fixed Content Finish */
+
+/* Line item */
+.line-item-link-container {
+    height: 25px;
+}
+
+.line-item-link {
+    display: flex;
+    padding-bottom: 10px;
+    top: -12px;
+}
+
+.line-item-area {
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+}
+
+.line-item-content {
+    position: relative;
+    width: 100%;
+    max-width: 242px;
+}
+
+.line-item-content .form-group {
+    position: relative;
+}
+
+.line-item-content .badge {
+    position: absolute !important;
+    bottom: 12px;
+    right: 0;
+}
+
+.line-item-content-right {
+    display: flex;
+    align-items: center;
+}
+
+.line-item-content-right-price  {
+    padding-right: 1.5rem;
+}
+
+.line-item-content-right-delete {
+    width:40px;
+    padding-right: 1.5rem;
+    /* padding-left: 5px !important; */
+}
+
+.line-item-text {
+    width: 54px;
+    text-align: right;
+}
+
+@media (max-width: 1500px) {
+  @media not all and (min-resolution:.001dpcm) { @media {
+
+    .line-item-content {
+        max-width:223px;
+    }
+}}
+}
+
+@media only screen and (max-width: 600px) {
+    .line-item-content {
+        max-width: 133px;
+    }
+}
+
+/* Line item */
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 7b9c7ecde..0b2e3fc85 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -128,205 +128,181 @@
                             </td>
                         @stack('delete_td_end')
                     </tr>
-
                     <tr>
                         <td class="border-top-0" colspan="3">
                             @stack('item_custom_fields')
                         </td>
-
                         <td class="border-top-0 p-0" colspan="4">
-                            <table class="w-100">
-                                <tbody>
-
-                                    @if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
-                                    <tr v-if="!row.add_tax || !row.add_discount">
-                                        <td class="text-left border-0 p-0" style="display: block;">
-                                            <div>
-                                                <button type="button" class="btn btn-link btn-sm p-0" @click="onAddLineDiscount(index)" v-if="!row.add_discount">
-                                                    {{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
-                                                </button>
+                            @if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
+                            <div v-if="!row.add_tax || !row.add_discount" class="line-item-link-container position-relative">
+                            <div v-if="!row.add_tax || !row.add_discount" class="line-item-link position-absolute">
+                                <div class="text-left border-0 p-0 mr-5">
+                                    <div>
+                                        <button type="button" class="btn btn-link btn-sm p-0" @click="onAddLineDiscount(index)" v-if="!row.add_discount">
+                                            {{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="text-right border-0 p-0 pr-4">
+                                    <div style="float:left;">
+                                        <button type="button" class="btn btn-link btn-sm p-0" @click="onAddTax(index)" v-if="!row.add_tax">
+                                            {{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            </div>
+                            <div v-if="row.add_discount" class="line-item-area pb-3">
+                                <div class="line-item-content">
+                                    <div class="long-texts line-item-text" style="float: left; margin-top: 15px; position: absolute; left: -65px;">
+                                        {{ trans('invoices.discount') }}
+                                    </div>
+                                            @stack('discount_input_start')
+                                    <div class="form-group mb-0 w-100" style="display: inline-block; position: relative;">
+                                        <div class="input-group input-group-merge mb-0 select-tax">
+                                            <div class="input-group-prepend">
+                                                <span class="input-group-text" id="input-discount">
+                                                    <i class="fa fa-percent"></i>
+                                                </span>
                                             </div>
-                                        </td>
+                                            <input type="number"
+                                                max="100"
+                                                min="0"
+                                                class="form-control text-center"
+                                                :name="'items.' + index + '.discount'"
+                                                autocomplete="off"
+                                                required="required"
+                                                data-item="discount"
+                                                v-model="row.discount"
+                                                @input="onCalculateTotal"
+                                                @change="form.errors.clear('items.' + index + '.discount')">
 
-                                        <td class="text-right border-0 p-0 pr-4" style="display: block;">
-                                            <div style="float:left;">
-                                                <button type="button" class="btn btn-link btn-sm p-0" @click="onAddTax(index)" v-if="!row.add_tax">
-                                                    {{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
-                                                </button>
+                                            <div class="invalid-feedback d-block"
+                                                v-if="form.errors.has('items.' + index + '.discount')"
+                                                v-html="form.errors.get('items.' + index + '.discount')">
                                             </div>
-                                        </td>
-
-                                        <td class="text-right total-column border-0 long-texts">
-                                        </td>
-
-                                        <td class="w-1 border-0">
-                                        </td>
-                                    </tr>
-
-                                    <tr v-if="row.add_discount">
-                                        <td colspan="2" class="pl-0 pb-0 border-0" :class="{'pb-2' : !row.add_tax}" style="width:42%;">
-                                            <div>
-                                                <div style="float: left; margin-top: 15px; margin-left: -65px;">
-                                                    {{ trans('invoices.discount') }}
-                                                </div>
-
-                                                @stack('discount_input_start')
-                                                <div class="form-group mb-0 w-100" style="display: inline-block; position: relative;">
-                                                    <div class="input-group input-group-merge mb-0 select-tax">
-                                                        <div class="input-group-prepend">
-                                                            <span class="input-group-text" id="input-discount">
-                                                                <i class="fa fa-percent"></i>
-                                                            </span>
-                                                        </div>
-                                                        <input type="number"
-                                                            max="100"
-                                                            min="0"
-                                                            class="form-control text-center"
-                                                            :name="'items.' + index + '.discount'"
-                                                            autocomplete="off"
-                                                            required="required"
-                                                            data-item="discount"
-                                                            v-model="row.discount"
-                                                            @input="onCalculateTotal"
-                                                            @change="form.errors.clear('items.' + index + '.discount')">
-
-                                                        <div class="invalid-feedback d-block"
-                                                            v-if="form.errors.has('items.' + index + '.discount')"
-                                                            v-html="form.errors.get('items.' + index + '.discount')">
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                @stack('discount_input_end')
                                             </div>
-                                        </td>
+                                        </div>
+                                            @stack('discount_input_end')
+                                    </div>
+                                        <div class="line-item-content-right">
+                                    <div class="line-item-content-right-price long-texts text-right">
+                                        {{ Form::moneyGroup('discount_amount', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.discount_amount', 'data-item' => 'discount_amount', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
+                                    </div>
+                                    <div class="line-item-content-right-delete pl-2">
+                                        <button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0">
+                                            <i class="far fa-trash-alt"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            @endif
+                            <div class="line-item-area pb-3" v-for="(row_tax, row_tax_index) in row.tax_ids"
+                            :index="row_tax_index">
+                                <div class="line-item-content">
+                                    <div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
+                                        {{ trans_choice('general.taxes', 1) }}
+                                    </div>
 
-                                        <td class="border-0 pb-0 text-right long-texts" :class="{'pb-2' : !row.add_tax}" style="width:231px;">
-                                            <div>
-                                                {{ Form::moneyGroup('discount_amount', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.discount_amount', 'data-item' => 'discount_amount', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
+                                    @stack('taxes_input_start')
+                                    <akaunting-select
+                                        class="mb-0 select-tax"
+                                        :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
+                                        :icon="''"
+                                        :title="''"
+                                        :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
+                                        :name="'items.' + index + '.taxes.' + row_tax_index"
+                                        :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
+                                        :disabled-options="form.items[index].tax_ids"
+                                        :value="row_tax.id"
+                                        @interface="row_tax.id = $event"
+                                        @change="onCalculateTotal()"
+                                        @new="taxes.push($event)"
+                                        :form-error="form.errors.get('items.' + index + '.taxes')"
+                                        :no-data-text="'{{ trans('general.no_data') }}'"
+                                        :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+                                    ></akaunting-select>
+                                    @stack('taxes_input_end')
+                                </div>
+                            
+                                <div class="line-item-content-right">
+                                    <div class="line-item-content-right-price long-texts text-right">
+                                        {{ Form::moneyGroup('tax', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row_tax.price', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
+                                    </div>
+                                    <div class="line-item-content-right-delete pl-2">
+                                        <button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0">
+                                            <i class="far fa-trash-alt"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="row.add_tax" class="line-item-area pb-3" :class="{'pt-2' : row.add_discount}">
+                                <div class="line-item-content">
+                                    <div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
+                                        {{ trans_choice('general.taxes', 1) }} 
+                                    </div>
+
+                                    @stack('taxes_input_start')
+                                    <akaunting-select
+                                        class="mb-0 select-tax"
+                                        style="margin-left: 1px; margin-right: -2px;"
+                                        :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
+                                        :icon="''"
+                                        :title="''"
+                                        :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
+                                        :name="'items.' + index + '.taxes.999'"
+                                        :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
+                                        :disabled-options="form.items[index].tax_ids"
+                                        :value="tax_id"
+                                        :add-new="{{ json_encode([
+                                            'status' => true,
+                                            'text' => trans('general.add_new'),
+                                            'path' => route('modals.taxes.create'),
+                                            'type' => 'modal',
+                                            'field' => [
+                                                'key' => 'id',
+                                                'value' => 'title'
+                                            ],
+                                            'new_text' => trans('modules.new'),
+                                            'buttons' => [
+                                                'cancel' => [
+                                                    'text' => trans('general.cancel'),
+                                                    'class' => 'btn-outline-secondary'
+                                                ],
+                                                'confirm' => [
+                                                    'text' => trans('general.save'),
+                                                    'class' => 'btn-success'
+                                                ]
+                                            ]
+                                        ])}}"
+                                        @interface="tax_id = $event"
+                                        @visible-change="onSelectedTax(index)"
+                                        @new="taxes.push($event)"
+                                        :form-error="form.errors.get('items.' + index + '.taxes')"
+                                        :no-data-text="'{{ trans('general.no_data') }}'"
+                                        :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+                                    ></akaunting-select>
+                                    @stack('taxes_input_end')
+                                </div>
+                                <div class="line-item-content-right">
+                                    <div class="line-item-content-right-price long-texts text-right">
+                                        <div>
+                                            <div class="required disabled text-right input-price disabled-money">
+                                            <input data-v-27d909ce="" type="tel" class="v-money form-control" name="discount_amount" placeholder="" disabled="disabled" value="__">
                                             </div>
-                                        </td>
-
-                                        <td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" :class="{'pb-2' : !row.add_tax}">
-                                            <button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0">
-                                                <i class="far fa-trash-alt"></i>
-                                            </button>
-                                        </td>
-                                    </tr>
-                                    @endif
-
-                                    <tr v-for="(row_tax, row_tax_index) in row.tax_ids"
-                                    :index="row_tax_index">
-                                        <td colspan="2" class="pl-0 pb-0 border-0" :class="{'pb-2' : !row.add_tax}" style="width:42%;">
-                                            <div style="position: relative;">
-                                                <div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;">
-                                                    {{ trans_choice('general.taxes', 1) }}
-                                                </div>
-
-                                                @stack('taxes_input_start')
-                                                <akaunting-select
-                                                    class="mb-0 select-tax"
-                                                    :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
-                                                    :icon="''"
-                                                    :title="''"
-                                                    :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
-                                                    :name="'items.' + index + '.taxes.' + row_tax_index"
-                                                    :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
-                                                    :disabled-options="form.items[index].tax_ids"
-                                                    :value="row_tax.id"
-                                                    @interface="row_tax.id = $event"
-                                                    @change="onCalculateTotal()"
-                                                    @new="taxes.push($event)"
-                                                    :form-error="form.errors.get('items.' + index + '.taxes')"
-                                                    :no-data-text="'{{ trans('general.no_data') }}'"
-                                                    :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
-                                                ></akaunting-select>
-                                                @stack('taxes_input_end')
-                                            </div>
-                                        </td>
-
-                                        <td :class="{'pb-2' : !row.add_tax}" class="border-0 pb-0 text-right long-texts" style="width:231px;">
-                                            <div>
-                                                {{ Form::moneyGroup('tax', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row_tax.price', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
-                                            </div>
-                                        </td>
-
-                                        <td class="pb-3 pl-2 align-bottom border-0" :class="{'pb-2' : !row.add_tax}" style="max-width: 40px;" >
-                                            <button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0">
-                                                <i class="far fa-trash-alt"></i>
-                                            </button>
-                                        </td>
-                                    </tr>
-
-                                    <tr v-if="row.add_tax">
-                                        <td colspan="2" class="pl-0 border-0" style="width: 42%;">
-                                            <div style="position: relative;">
-                                                <div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;" style="width:231px;">
-                                                    {{ trans_choice('general.taxes', 1) }}
-                                                </div>
-
-                                                @stack('taxes_input_start')
-                                                <akaunting-select
-                                                    class="mb-0 select-tax"
-                                                    style="margin-left: 1px; margin-right: -2px;"
-                                                    :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
-                                                    :icon="''"
-                                                    :title="''"
-                                                    :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
-                                                    :name="'items.' + index + '.taxes.999'"
-                                                    :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
-                                                    :disabled-options="form.items[index].tax_ids"
-                                                    :value="tax_id"
-                                                    :add-new="{{ json_encode([
-                                                        'status' => true,
-                                                        'text' => trans('general.add_new'),
-                                                        'path' => route('modals.taxes.create'),
-                                                        'type' => 'modal',
-                                                        'field' => [
-                                                            'key' => 'id',
-                                                            'value' => 'title'
-                                                        ],
-                                                        'new_text' => trans('modules.new'),
-                                                        'buttons' => [
-                                                            'cancel' => [
-                                                                'text' => trans('general.cancel'),
-                                                                'class' => 'btn-outline-secondary'
-                                                            ],
-                                                            'confirm' => [
-                                                                'text' => trans('general.save'),
-                                                                'class' => 'btn-success'
-                                                            ]
-                                                        ]
-                                                    ])}}"
-                                                    @interface="tax_id = $event"
-                                                    @visible-change="onSelectedTax(index)"
-                                                    @new="taxes.push($event)"
-                                                    :form-error="form.errors.get('items.' + index + '.taxes')"
-                                                    :no-data-text="'{{ trans('general.no_data') }}'"
-                                                    :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
-                                                ></akaunting-select>
-                                                @stack('taxes_input_end')
-                                            </div>
-                                        </td>
-
-                                        <td class="border-0 text-right long-texts align-middle;" style="width:231px;">
-                                            <div>
-                                                __
-                                            </div>
-                                        </td>
-
-                                        <td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" >
-                                            @if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
-                                                <button type="button" @click="onDeleteTax(index, 999)" class="btn btn-link btn-delete p-0">
-                                                    <i class="far fa-trash-alt"></i>
-                                                </button>
-                                            @endif
-                                        </td>
-                                    </tr>
-
-                                </tbody>
-                            </table>
+                                        </div>
+                                    </div>
+                                    <div class="line-item-content-right-delete pl-2">
+                                        @if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
+                                        <button type="button" @click="onDeleteTax(index, 999)" class="btn btn-link btn-delete p-0">
+                                            <i class="far fa-trash-alt"></i>
+                                        </button>
+                                        @endif
+                                    </div>
+                                </div>
+                            </div>
                         </td>
-                    <tr>
+                    </tr>
                 </tbody>
             </table>
         </td>
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index ebeaf2849..90abf3fc4 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -6,7 +6,7 @@
                     <col class="document-total-50">
                     <col class="document-total-30">
                     <col class="document-total-25">
-                    <col class="document-total-40-px">
+                    <col class="document-total-50-px">
                 </colgroup>
                 <tbody id="invoice-total-rows" class="table-padding-05">
                     @stack('sub_total_td_start')
@@ -20,7 +20,7 @@
                                 {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
                             </div>
                         </td>
-                        <td class="border-bottom-0 pb-0" style="max-width: 40px"></td>
+                        <td class="border-bottom-0 pb-0" style="max-width: 50px"></td>
                     </tr>
                     @stack('sub_total_td_end')
 
@@ -36,7 +36,7 @@
                                     {{ 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 pt-0 pb-0" style="max-width: 40px"></td>
+                            <td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
                         </tr>
                     @stack('item_discount_td_end')
                 @endif
@@ -92,7 +92,7 @@
                                 </div>
                                 {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
                             </td>
-                            <td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
+                            <td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
                         </tr>
                     @stack('add_discount_td_end')
                 @endif
@@ -109,7 +109,7 @@
                                 {{ 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 pt-0 pb-0" style="max-width: 40px"></td>
+                        <td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
                     </tr>
                 @stack('tax_total_td_end')
 
@@ -126,7 +126,7 @@
                                 {{ 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 pt-0 pb-0" style="max-width: 40px"></td>
+                        <td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
                     </tr>
                     @stack('grand_total_td_end')
 
@@ -141,7 +141,7 @@
                                     :currency-rate="form.currency_rate"
                                 ></akaunting-currency-conversion>
                             </td>
-                            <td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
+                            <td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
                         </tr>
                         @stack('currency_conversion_td_end')
                 </tbody>