diff --git a/app/Http/Controllers/Items/Items.php b/app/Http/Controllers/Items/Items.php
index e9f16cc4a..e1227a7ce 100644
--- a/app/Http/Controllers/Items/Items.php
+++ b/app/Http/Controllers/Items/Items.php
@@ -290,10 +290,16 @@ class Items extends Controller
 
         $json->sub_total = money($sub_total, $currency_code, true)->format();
 
+        $json->discount_text= trans('invoices.add_discount');
+        $json->discount_total = '';
+
         $json->tax_total = money($tax_total, $currency_code, true)->format();
 
         // Apply discount to total
         if ($discount) {
+            $json->discount_text= trans('invoices.show_discount', ['discount' => $discount]);
+            $json->discount_total = money($sub_total * ($discount / 100), $currency_code, true)->format();
+
             $sub_total = $sub_total - ($sub_total * ($discount / 100));
         }
 
diff --git a/public/css/app.css b/public/css/app.css
index 841126099..c22197cdf 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -586,7 +586,12 @@ input[type="number"] {
     width: 10%;
 }
 
-.input-group-recurring {
-    padding-left: 0;
-    padding-right: 0;
+.popover-content, .discount.box-body, .discount.box-footer {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.discount-description {
+    margin-top: 6px;
+    margin-left: -20px;
 }
diff --git a/resources/lang/en-GB/bills.php b/resources/lang/en-GB/bills.php
index 20790a8ec..eadc48ef7 100644
--- a/resources/lang/en-GB/bills.php
+++ b/resources/lang/en-GB/bills.php
@@ -18,6 +18,10 @@ return [
 
     'item_name'         => 'Item Name|Item Names',
 
+    'show_discount'     => ':discount % Discount',
+    'add_discount'      => 'Add Discount',
+    'discount_desc'     => 'of subtotal',
+
     'payment_due'       => 'Payment Due',
     'amount_due'        => 'Amount Due',
     'paid'              => 'Paid',
diff --git a/resources/lang/en-GB/invoices.php b/resources/lang/en-GB/invoices.php
index d68e508aa..c4c8b5534 100644
--- a/resources/lang/en-GB/invoices.php
+++ b/resources/lang/en-GB/invoices.php
@@ -18,6 +18,10 @@ return [
 
     'item_name'         => 'Item Name|Item Names',
 
+    'show_discount'     => ':discount % Discount',
+    'add_discount'      => 'Add Discount',
+    'discount_desc'     => 'of subtotal',
+
     'payment_due'       => 'Payment Due',
     'paid'              => 'Paid',
     'histories'         => 'Histories',
diff --git a/resources/views/expenses/bills/create.blade.php b/resources/views/expenses/bills/create.blade.php
index 462721caa..89a9879e6 100644
--- a/resources/views/expenses/bills/create.blade.php
+++ b/resources/views/expenses/bills/create.blade.php
@@ -77,12 +77,12 @@
                             <td class="text-right"><span id="sub-total">0</span></td>
                         </tr>
                         <tr>
-                            <td class="text-right" style="vertical-align: middle;" colspan="5"><strong>{{ trans('bills.discount') }}</strong></td>
+                            <td class="text-right" style="vertical-align: middle;" colspan="5">
+                                <a href="javascript:void(0)" id="discount-text" rel="popover">{{ trans('bills.add_discount') }}</a>
+                            </td>
                             <td class="text-right">
-                                <div class="input-group">
-                                    <div class="input-group-addon"><i class="fa fa-percent"></i></div>
-                                    {!! Form::number('discount', null, ['class' => 'form-control text-right']) !!}
-                                </div>
+                                <span id="discount-total"></span>
+                                {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right']) !!}
                             </td>
                         </tr>
                         <tr>
@@ -256,6 +256,58 @@
                 });
             });
 
+            $('a[rel=popover]').popover({
+                html: 'true',
+                placement: 'bottom',
+                title: '{{ trans('bills.discount') }}',
+                content: function () {
+
+                    html  = '<div class="discount box-body">';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="input-group" id="input-discount">';
+                    html += '            {!! Form::number('pre-discount', null, ['id' => 'pre-discount', 'class' => 'form-control text-right']) !!}';
+                    html += '            <div class="input-group-addon"><i class="fa fa-percent"></i></div>';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="discount-description">';
+                    html += '           {{ trans('bills.discount_desc') }}';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '</div>';
+                    html += '<div class="discount box-footer">';
+                    html += '    <div class="col-md-12">';
+                    html += '        <div class="form-group no-margin">';
+                    html += '            {!! Form::button('<span class="fa fa-save"></span> &nbsp;' . trans('general.save'), ['type' => 'button', 'id' => 'save-discount','class' => 'btn btn-success']) !!}';
+                    html += '            <a href="javascript:void(0)" id="cancel-discount" class="btn btn-default"><span class="fa fa-times-circle"></span> &nbsp;{{ trans('general.cancel') }}</a>';
+                    html += '       </div>';
+                    html += '    </div>';
+                    html += '</div>';
+
+                    return html;
+                }
+            });
+
+            $(document).on('keyup', '#pre-discount', function(e){
+                e.preventDefault();
+
+                $('#discount').val($(this).val());
+
+                totalItem();
+            });
+
+            $(document).on('click', '#save-discount', function(){
+                $('a[rel=popover]').trigger('click');
+            });
+
+            $(document).on('click', '#cancel-discount', function(){
+                $('#discount').val('');
+
+                totalItem();
+
+                $('a[rel=popover]').trigger('click');
+            });
+
             $(document).on('change', '#currency_code, #items tbody select', function(){
                 totalItem();
             });
@@ -293,7 +345,10 @@
                             $('#item-total-' + key).html(value);
                         });
 
+                        $('#discount-text').text(data.discount_text);
+
                         $('#sub-total').html(data.sub_total);
+                        $('#discount-total').html(data.discount_total);
                         $('#tax-total').html(data.tax_total);
                         $('#grand-total').html(data.grand_total);
                     }
diff --git a/resources/views/expenses/bills/edit.blade.php b/resources/views/expenses/bills/edit.blade.php
index 05d996868..84c9173f2 100644
--- a/resources/views/expenses/bills/edit.blade.php
+++ b/resources/views/expenses/bills/edit.blade.php
@@ -93,12 +93,12 @@
                                 <td class="text-right"><span id="sub-total">0</span></td>
                             </tr>
                         <tr>
-                            <td class="text-right" style="vertical-align: middle;" colspan="5"><strong>{{ trans('bills.discount') }}</strong></td>
+                            <td class="text-right" style="vertical-align: middle;" colspan="5">
+                                <a href="javascript:void(0)" id="discount-text" rel="popover">{{ trans('bills.add_discount') }}</a>
+                            </td>
                             <td class="text-right">
-                                <div class="input-group">
-                                    <div class="input-group-addon"><i class="fa fa-percent"></i></div>
-                                    {!! Form::number('discount', $bill->discount, ['class' => 'form-control text-right']) !!}
-                                </div>
+                                <span id="discount-total"></span>
+                                {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right']) !!}
                             </td>
                         </tr>
                             <tr>
@@ -289,6 +289,59 @@
                 });
             });
 
+            $('a[rel=popover]').popover({
+                html: 'true',
+                placement: 'bottom',
+                title: '{{ trans('bills.discount') }}',
+                content: function () {
+
+                    html  = '<div class="discount box-body">';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="input-group" id="input-discount">';
+                    html += '            {!! Form::number('pre-discount', null, ['id' => 'pre-discount', 'class' => 'form-control text-right']) !!}';
+                    html += '            <div class="input-group-addon"><i class="fa fa-percent"></i></div>';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="discount-description">';
+                    html += '           {{ trans('bills.discount_desc') }}';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '</div>';
+                    html += '<div class="discount box-footer">';
+                    html += '    <div class="col-md-12">';
+                    html += '        <div class="form-group no-margin">';
+                    html += '            {!! Form::button('<span class="fa fa-save"></span> &nbsp;' . trans('general.save'), ['type' => 'button', 'id' => 'save-discount','class' => 'btn btn-success']) !!}';
+                    html += '            <a href="javascript:void(0)" id="cancel-discount" class="btn btn-default"><span class="fa fa-times-circle"></span> &nbsp;{{ trans('general.cancel') }}</a>';
+                    html += '       </div>';
+                    html += '    </div>';
+                    html += '</div>';
+
+                    return html;
+                }
+            });
+
+            $(document).on('keyup', '#pre-discount', function(e){
+                e.preventDefault();
+
+                $('#discount').val($(this).val());
+
+                totalItem();
+            });
+
+            $(document).on('click', '#save-discount', function(){
+                $('a[rel=popover]').trigger('click');
+            });
+
+            $(document).on('click', '#cancel-discount', function(){
+                $('#discount').val('');
+
+                totalItem();
+
+                $('a[rel=popover]').trigger('click');
+            });
+
+
             $(document).on('change', '#currency_code, #items tbody select', function(){
                 totalItem();
             });
@@ -326,7 +379,10 @@
                             $('#item-total-' + key).html(value);
                         });
 
+                        $('#discount-text').text(data.discount_text);
+
                         $('#sub-total').html(data.sub_total);
+                        $('#discount-total').html(data.discount_total);
                         $('#tax-total').html(data.tax_total);
                         $('#grand-total').html(data.grand_total);
                     }
diff --git a/resources/views/incomes/invoices/create.blade.php b/resources/views/incomes/invoices/create.blade.php
index a4b1ccbe5..72744e372 100644
--- a/resources/views/incomes/invoices/create.blade.php
+++ b/resources/views/incomes/invoices/create.blade.php
@@ -77,12 +77,12 @@
                             <td class="text-right"><span id="sub-total">0</span></td>
                         </tr>
                         <tr>
-                            <td class="text-right" style="vertical-align: middle;" colspan="5"><strong>{{ trans('invoices.discount') }}</strong></td>
+                            <td class="text-right" style="vertical-align: middle;" colspan="5">
+                                <a href="javascript:void(0)" id="discount-text" rel="popover">{{ trans('invoices.add_discount') }}</a>
+                            </td>
                             <td class="text-right">
-                                <div class="input-group">
-                                    <div class="input-group-addon"><i class="fa fa-percent"></i></div>
-                                    {!! Form::number('discount', null, ['class' => 'form-control text-right']) !!}
-                                </div>
+                                <span id="discount-total"></span>
+                                {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right']) !!}
                             </td>
                         </tr>
                         <tr>
@@ -257,10 +257,58 @@
                 });
             });
 
-            $(document).on('change', '#currency_code, #items tbody select', function(){
+            $('a[rel=popover]').popover({
+                html: 'true',
+                placement: 'bottom',
+                title: '{{ trans('invoices.discount') }}',
+                content: function () {
+
+                    html  = '<div class="discount box-body">';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="input-group" id="input-discount">';
+                    html += '            {!! Form::number('pre-discount', null, ['id' => 'pre-discount', 'class' => 'form-control text-right']) !!}';
+                    html += '            <div class="input-group-addon"><i class="fa fa-percent"></i></div>';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="discount-description">';
+                    html += '           {{ trans('invoices.discount_desc') }}';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '</div>';
+                    html += '<div class="discount box-footer">';
+                    html += '    <div class="col-md-12">';
+                    html += '        <div class="form-group no-margin">';
+                    html += '            {!! Form::button('<span class="fa fa-save"></span> &nbsp;' . trans('general.save'), ['type' => 'button', 'id' => 'save-discount','class' => 'btn btn-success']) !!}';
+                    html += '            <a href="javascript:void(0)" id="cancel-discount" class="btn btn-default"><span class="fa fa-times-circle"></span> &nbsp;{{ trans('general.cancel') }}</a>';
+                    html += '       </div>';
+                    html += '    </div>';
+                    html += '</div>';
+
+                    return html;
+                }
+            });
+
+            $(document).on('keyup', '#pre-discount', function(e){
+                e.preventDefault();
+
+                $('#discount').val($(this).val());
+
                 totalItem();
             });
 
+            $(document).on('click', '#save-discount', function(){
+                $('a[rel=popover]').trigger('click');
+            });
+
+            $(document).on('click', '#cancel-discount', function(){
+                $('#discount').val('');
+
+                totalItem();
+
+                $('a[rel=popover]').trigger('click');
+            });
+
             $(document).on('keyup', '#items tbody .form-control', function(){
                 totalItem();
             });
@@ -294,7 +342,10 @@
                             $('#item-total-' + key).html(value);
                         });
 
+                        $('#discount-text').text(data.discount_text);
+
                         $('#sub-total').html(data.sub_total);
+                        $('#discount-total').html(data.discount_total);
                         $('#tax-total').html(data.tax_total);
                         $('#grand-total').html(data.grand_total);
                     }
diff --git a/resources/views/incomes/invoices/edit.blade.php b/resources/views/incomes/invoices/edit.blade.php
index 98fb6f761..e2edbc93c 100644
--- a/resources/views/incomes/invoices/edit.blade.php
+++ b/resources/views/incomes/invoices/edit.blade.php
@@ -92,12 +92,12 @@
                                 <td class="text-right"><span id="sub-total">0</span></td>
                             </tr>
                             <tr>
-                                <td class="text-right" style="vertical-align: middle;" colspan="5"><strong>{{ trans('invoices.discount') }}</strong></td>
+                                <td class="text-right" style="vertical-align: middle;" colspan="5">
+                                    <a href="javascript:void(0)" id="discount-text" rel="popover">{{ trans('invoices.add_discount') }}</a>
+                                </td>
                                 <td class="text-right">
-                                    <div class="input-group">
-                                        <div class="input-group-addon"><i class="fa fa-percent"></i></div>
-                                        {!! Form::number('discount', $invoice->discount, ['class' => 'form-control text-right']) !!}
-                                    </div>
+                                    <span id="discount-total"></span>
+                                    {!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right']) !!}
                                 </td>
                             </tr>
                             <tr>
@@ -288,6 +288,58 @@
                 });
             });
 
+            $('a[rel=popover]').popover({
+                html: 'true',
+                placement: 'bottom',
+                title: '{{ trans('invoices.discount') }}',
+                content: function () {
+
+                    html  = '<div class="discount box-body">';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="input-group" id="input-discount">';
+                    html += '            {!! Form::number('pre-discount', null, ['id' => 'pre-discount', 'class' => 'form-control text-right']) !!}';
+                    html += '            <div class="input-group-addon"><i class="fa fa-percent"></i></div>';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '    <div class="col-md-6">';
+                    html += '        <div class="discount-description">';
+                    html += '           {{ trans('invoices.discount_desc') }}';
+                    html += '        </div>';
+                    html += '    </div>';
+                    html += '</div>';
+                    html += '<div class="discount box-footer">';
+                    html += '    <div class="col-md-12">';
+                    html += '        <div class="form-group no-margin">';
+                    html += '            {!! Form::button('<span class="fa fa-save"></span> &nbsp;' . trans('general.save'), ['type' => 'button', 'id' => 'save-discount','class' => 'btn btn-success']) !!}';
+                    html += '            <a href="javascript:void(0)" id="cancel-discount" class="btn btn-default"><span class="fa fa-times-circle"></span> &nbsp;{{ trans('general.cancel') }}</a>';
+                    html += '       </div>';
+                    html += '    </div>';
+                    html += '</div>';
+
+                    return html;
+                }
+            });
+
+            $(document).on('keyup', '#pre-discount', function(e){
+                e.preventDefault();
+
+                $('#discount').val($(this).val());
+
+                totalItem();
+            });
+
+            $(document).on('click', '#save-discount', function(){
+                $('a[rel=popover]').trigger('click');
+            });
+
+            $(document).on('click', '#cancel-discount', function(){
+                $('#discount').val('');
+
+                totalItem();
+
+                $('a[rel=popover]').trigger('click');
+            });
+
             $(document).on('change', '#currency_code, #items tbody select', function(){
                 totalItem();
             });
@@ -325,7 +377,10 @@
                             $('#item-total-' + key).html(value);
                         });
 
+                        $('#discount-text').text(data.discount_text);
+
                         $('#sub-total').html(data.sub_total);
+                        $('#discount-total').html(data.discount_total);
                         $('#tax-total').html(data.tax_total);
                         $('#grand-total').html(data.grand_total);
                     }