diff --git a/addons/account/models/account_move.py b/addons/account/models/account_move.py
index 181b2eff61e..5479949a2d4 100644
--- a/addons/account/models/account_move.py
+++ b/addons/account/models/account_move.py
@@ -1607,7 +1607,8 @@ class AccountMove(models.Model):
                     'move_id': line.move_id.id,
                     'position': move.currency_id.position,
                     'digits': [69, move.currency_id.decimal_places],
-                    'payment_date': fields.Date.to_string(line.date),
+                    'date': fields.Date.to_string(line.date),
+                    'account_payment_id': line.payment_id.id,
                 })
 
             if not payments_widget_vals['content']:
diff --git a/addons/account/static/src/css/account.css b/addons/account/static/src/css/account.css
index 486b8225bfa..84f2a2c0863 100644
--- a/addons/account/static/src/css/account.css
+++ b/addons/account/static/src/css/account.css
@@ -27,16 +27,31 @@
 .oe_invoice_outstanding_credits_debits {
     clear: both;
     float: right;
-    min-width: 350px;
-}
-
-@media (max-width: 767.98px) {
-    .oe_invoice_outstanding_credits_debits {
-        min-width: initial;
-        width: 100%;
-    }
+    min-width: 260px;
+    padding-top: 20px;
 }
 
 .oe_account_terms {
     flex: auto !important;
 }
+
+@media (max-width: 991.98px) {
+    /* The purpose is to put the narration below the totals in the tab 'Invoice Lines'
+    instead of above for the mobile view */
+    .o_form_view .oe_invoice_lines_tab {
+        display: flex;
+        flex-direction: column-reverse;
+    }
+
+    .o_form_view .oe_invoice_lines_tab .oe_invoice_outstanding_credits_debits {
+        min-width: initial;
+        width: 50%;
+    }
+}
+
+@media (max-width: 767.98px) {
+    .o_form_view .oe_invoice_lines_tab .oe_invoice_outstanding_credits_debits {
+        min-width: initial;
+        width: 100%;
+    }
+}
diff --git a/addons/account/static/src/js/account_payment_field.js b/addons/account/static/src/js/account_payment_field.js
index fa56d1a1858..8fe3a9bc568 100644
--- a/addons/account/static/src/js/account_payment_field.js
+++ b/addons/account/static/src/js/account_payment_field.js
@@ -12,6 +12,7 @@ var _t = core._t;
 var ShowPaymentLineWidget = AbstractField.extend({
     events: _.extend({
         'click .outstanding_credit_assign': '_onOutstandingCreditAssign',
+        'click .open_account_move': '_onOpenPaymentOrMove',
     }, AbstractField.prototype.events),
     supportedFieldTypes: ['char'],
 
@@ -36,6 +37,7 @@ var ShowPaymentLineWidget = AbstractField.extend({
      * @override
      */
     _render: function() {
+        this.viewAlreadyOpened = false;
         var self = this;
         var info = JSON.parse(this.value);
         if (!info) {
@@ -62,7 +64,7 @@ var ShowPaymentLineWidget = AbstractField.extend({
                     var $content = $(QWeb.render('PaymentPopOver', content));
                     var unreconcile_button = $content.filter('.js_unreconcile_payment').on('click', self._onRemoveMoveReconcile.bind(self));
 
-                    $content.filter('.js_open_payment').on('click', self._onOpenPayment.bind(self));
+                    $content.filter('.js_open_payment').on('click', self._onOpenPaymentOrMove.bind(self));
                     return $content;
                 },
                 html: true,
@@ -85,23 +87,26 @@ var ShowPaymentLineWidget = AbstractField.extend({
      * @override
      * @param {MouseEvent} event
      */
-    _onOpenPayment: function (event) {
+    _onOpenPaymentOrMove: function (event) {
         var paymentId = parseInt($(event.target).attr('payment-id'));
         var moveId = parseInt($(event.target).attr('move-id'));
-        var res_model;
+        var resModel;
         var id;
         if (paymentId !== undefined && !isNaN(paymentId)){
-            res_model = "account.payment";
+            resModel = "account.payment";
             id = paymentId;
         } else if (moveId !== undefined && !isNaN(moveId)){
-            res_model = "account.move";
+            resModel = "account.move";
             id = moveId;
         }
         //Open form view of account.move with id = move_id
-        if (res_model && id) {
+        //viewAlreadyopened is a flag to prevent the user from clicking on another account.move/account.payment
+        //while the first one he clicked on is loading
+        if (!this.viewAlreadyOpened && resModel && id) {
+            this.viewAlreadyOpened = true;
             this.do_action({
                 type: 'ir.actions.act_window',
-                res_model: res_model,
+                res_model: resModel,
                 res_id: id,
                 views: [[false, 'form']],
                 target: 'current'
diff --git a/addons/account/static/src/xml/account_payment.xml b/addons/account/static/src/xml/account_payment.xml
index c752f838123..01670e5b25d 100644
--- a/addons/account/static/src/xml/account_payment.xml
+++ b/addons/account/static/src/xml/account_payment.xml
@@ -6,7 +6,7 @@
         <div>
             <t t-if="outstanding">
                 <div>
-                    <strong class="float-left" id="outstanding"><t t-esc="title"></t></strong>
+                    <strong class="float-left" id="outstanding" t-esc="title"/>
                 </div>
             </t>
             <table style="width:100%;">
@@ -14,15 +14,28 @@
                     <tr>
                     <t t-if="outstanding">
                         <td>
-                            <a title="assign to invoice" role="button" class="oe_form_field btn btn-link outstanding_credit_assign" t-att-data-id="line.id" style="margin-right: 10px;" href="#" data-toggle="tooltip">Add</a>
+                            <a title="assign to invoice"
+                               role="button"
+                               class="oe_form_field btn btn-secondary outstanding_credit_assign"
+                               t-att-data-id="line.id"
+                               style="margin-right: 0px; padding-left: 5px; padding-right: 5px;"
+                               href="#"
+                               data-toggle="tooltip">Add</a>
                         </td>
-                        <td style="max-width: 30em;">
-                            <div class="oe_form_field" style="margin-right: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;" t-att-title="line.date" data-toggle="tooltip"><t t-esc="line.journal_name"></t></div>
+                        <td style="max-width: 11em;">
+                            <a t-att-title="line.date"
+                               role="button"
+                               class="oe_form_field btn btn-link open_account_move"
+                               t-att-move-id="line.move_id"
+                               style="margin-right: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 0px; width:100%; text-align:left;"
+                               data-toggle="tooltip"
+                               t-att-payment-id="account_payment_id"
+                               t-esc="line.journal_name"/>
                         </td>
                     </t>
                     <t t-if="!outstanding">
                         <td>
-                           <a role="button" tabindex="0" class="js_payment_info fa fa-info-circle" t-att-index="line.index" style="margin-right:5px;" aria-label="Info" title="Payment Info" data-toggle="tooltip"></a>
+                           <a role="button" tabindex="0" class="js_payment_info fa fa-info-circle" t-att-index="line.index" style="margin-right:5px;" aria-label="Info" title="Journal Entry Info" data-toggle="tooltip"></a>
                         </td>
                         <td>
                             <i class="o_field_widget text-right o_payment_label">Paid on <t t-esc="line.date"></t></i>
@@ -73,7 +86,7 @@
                     <td><t t-esc="date"/></td>
                 </tr>
                 <tr>
-                    <td><strong>Payment Journal: </strong></td>
+                    <td><strong>Journal: </strong></td>
                     <td><t t-esc="journal_name"/><span t-if="payment_method_name"> (<t t-esc="payment_method_name"/>)</span></td>
                 </tr>
             </table>
diff --git a/addons/account/views/account_move_views.xml b/addons/account/views/account_move_views.xml
index 52c398aa599..97a1a9da2b8 100644
--- a/addons/account/views/account_move_views.xml
+++ b/addons/account/views/account_move_views.xml
@@ -653,14 +653,24 @@
                     </div>
                     <div groups="account.group_account_invoice,account.group_account_readonly"
                          class="alert alert-info mb-0" role="alert"
-                         attrs="{'invisible': ['|', '|', ('move_type', 'not in', ('out_invoice', 'out_refund')), ('invoice_has_outstanding', '=', False), ('payment_state', 'not in', ('not_paid', 'partial'))]}">
-                        You have <bold><a class="alert-link" href="#outstanding" role="button">outstanding payments</a></bold> for this customer. You can allocate them to mark this invoice as paid.
+                         attrs="{'invisible': ['|', '|', ('move_type', '!=', 'out_invoice'), ('invoice_has_outstanding', '=', False), ('payment_state', 'not in', ('not_paid', 'partial'))]}">
+                        You have <bold><a class="alert-link" href="#outstanding" role="button">outstanding credits</a></bold> for this customer. You can allocate them to mark this invoice as paid.
                     </div>
                     <div groups="account.group_account_invoice,account.group_account_readonly"
                          class="alert alert-info mb-0" role="alert"
-                         attrs="{'invisible': ['|', '|', ('move_type', 'not in', ('in_invoice', 'in_refund')), ('invoice_has_outstanding', '=', False), ('payment_state', 'not in', ('not_paid', 'partial'))]}">
+                         attrs="{'invisible': ['|', '|', ('move_type', '!=', 'in_invoice'), ('invoice_has_outstanding', '=', False), ('payment_state', 'not in', ('not_paid', 'partial'))]}">
                         You have <bold><a class="alert-link" href="#outstanding" role="button">outstanding debits</a></bold> for this vendor. You can allocate them to mark this bill as paid.
                     </div>
+                    <div groups="account.group_account_invoice,account.group_account_readonly"
+                         class="alert alert-info mb-0" role="alert"
+                         attrs="{'invisible': ['|', '|', ('move_type', '!=', 'out_refund'), ('invoice_has_outstanding', '=', False), ('payment_state', 'not in', ('not_paid', 'partial'))]}">
+                        You have <bold><a class="alert-link" href="#outstanding" role="button">outstanding debits</a></bold> for this customer. You can allocate them to mark this credit note as paid.
+                    </div>
+                    <div groups="account.group_account_invoice,account.group_account_readonly"
+                         class="alert alert-info mb-0" role="alert"
+                         attrs="{'invisible': ['|', '|', ('move_type', '!=', 'in_refund'), ('invoice_has_outstanding', '=', False), ('payment_state', 'not in', ('not_paid', 'partial'))]}">
+                        You have <bold><a class="alert-link" href="#outstanding" role="button">outstanding credits</a></bold> for this vendor. You can allocate them to mark this credit note as paid.
+                    </div>
                     <div class="alert alert-info mb-0" role="alert"
                          attrs="{'invisible': ['|', ('state', '!=', 'draft'), ('auto_post', '=', False)]}">
                         This move is configured to be posted automatically at the accounting date: <field name="date" readonly="1"/>.
@@ -1030,24 +1040,26 @@
                                         </sheet>
                                     </form>
                                 </field>
-                                <group col="4">
-                                    <group colspan="3">
+                                <group col="12" class="oe_invoice_lines_tab">
+                                    <group colspan="8">
                                         <field name="narration" placeholder="Terms and Conditions" class="oe_inline" nolabel="1"/>
                                     </group>
                                     <!-- Totals (only invoices / receipts) -->
-                                    <group class="oe_subtotal_footer oe_right"
-                                        attrs="{'invisible': ['|', ('move_type', 'not in', ('out_invoice', 'out_refund', 'in_invoice', 'in_refund', 'out_receipt', 'in_receipt')),
-                                                                   ('payment_state' ,'=', 'invoicing_legacy')]}">
+                                    <group colspan="4">
+                                        <group class="oe_subtotal_footer oe_right"
+                                            attrs="{'invisible': ['|', ('move_type', 'not in', ('out_invoice', 'out_refund', 'in_invoice', 'in_refund', 'out_receipt', 'in_receipt')),
+                                                                       ('payment_state' ,'=', 'invoicing_legacy')]}">
 
-                                        <field name="tax_totals_json" widget="account-tax-totals-field" nolabel="1" colspan="2"/>
+                                            <field name="tax_totals_json" widget="account-tax-totals-field" nolabel="1" colspan="2"/>
 
-                                        <field name="invoice_payments_widget" colspan="2" nolabel="1" widget="payment"/>
-                                        <field name="amount_residual" class="oe_subtotal_footer_separator" attrs="{'invisible': [('state', '=', 'draft')]}"/>
+                                            <field name="invoice_payments_widget" colspan="2" nolabel="1" widget="payment"/>
+                                            <field name="amount_residual" class="oe_subtotal_footer_separator" attrs="{'invisible': [('state', '=', 'draft')]}"/>
+                                        </group>
+                                        <field name="invoice_outstanding_credits_debits_widget"
+                                            class="oe_invoice_outstanding_credits_debits"
+                                            colspan="2" nolabel="1" widget="payment"
+                                            attrs="{'invisible': ['|', ('state', '!=', 'posted'), ('move_type', 'in', ('out_receipt', 'in_receipt'))]}"/>
                                     </group>
-                                    <field name="invoice_outstanding_credits_debits_widget"
-                                        class="oe_invoice_outstanding_credits_debits"
-                                        colspan="2" nolabel="1" widget="payment"
-                                        attrs="{'invisible': ['|', ('state', '!=', 'posted'), ('move_type', 'in', ('out_receipt', 'in_receipt'))]}"/>
                                 </group>
                             </page>
                             <page id="aml_tab" string="Journal Items" groups="account.group_account_readonly">