diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index 114424c70e9..e70323e6cf2 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -1,5 +1,5 @@
 <odoo>
-	<template id="portal_my_home_menu_invoice" name="Portal layout : invoice menu entries" inherit_id="portal.portal_breadcrumbs" priority="30">
+    <template id="portal_my_home_menu_invoice" name="Portal layout : invoice menu entries" inherit_id="portal.portal_breadcrumbs" priority="30">
         <xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
             <li t-if="page_name == 'invoice'" t-attf-class="breadcrumb-item #{'active ' if not invoice else ''}">
                 <a t-if="invoice" t-attf-href="/my/invoices?{{ keep_query() }}">Invoices</a>
@@ -14,7 +14,7 @@
 
     <template id="portal_my_home_invoice" name="Portal My Home : invoice entries" inherit_id="portal.portal_my_home" priority="30">
         <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
-			<t t-if="invoice_count" t-call="portal.portal_docs_entry">
+            <t t-if="invoice_count" t-call="portal.portal_docs_entry">
                 <t t-set="title">Invoices</t>
                 <t t-set="url" t-value="'/my/invoices'"/>
                 <t t-set="count" t-value="invoice_count"/>
@@ -24,7 +24,7 @@
 
     <template id="portal_my_invoices" name="My Invoices and Payments">
       <t t-call="portal.portal_layout">
-		<t t-set="breadcrumbs_searchbar" t-value="True"/>
+        <t t-set="breadcrumbs_searchbar" t-value="True"/>
 
         <t t-call="portal.portal_searchbar">
             <t t-set="title">Invoices</t>
@@ -34,15 +34,15 @@
         </t>
         <t t-if="invoices" t-call="portal.portal_table">
             <thead>
-				<tr class="active">
-					<th>Invoice #</th>
-					<th>Invoice Date</th>
-					<th class='d-none d-md-table-cell'>Due Date</th>
-					<th/>
-					<th class="text-right">Amount Due</th>
-				</tr>
-			</thead>
-			<tbody>
+                <tr class="active">
+                    <th>Invoice #</th>
+                    <th>Invoice Date</th>
+                    <th class='d-none d-md-table-cell'>Due Date</th>
+                    <th/>
+                    <th class="text-right">Amount Due</th>
+                </tr>
+            </thead>
+            <tbody>
                 <t t-foreach="invoices" t-as="invoice">
                     <tr>
                         <td>
@@ -67,68 +67,64 @@
                         <td class="text-right"><span t-esc="-invoice.residual if invoice.type == 'out_refund' else invoice.residual" t-options='{"widget": "monetary", "display_currency": invoice.currency_id}'/></td>
                     </tr>
                 </t>
-			</tbody>
+            </tbody>
         </t>
       </t>
     </template>
 
     <template id="portal_invoice_page" name="Invoice Portal Template" inherit_id="portal.portal_sidebar" primary="True">
         <xpath expr="//div[hasclass('o_portal_sidebar')]" position="inside">
+            <t t-set="wrapwrap_classes" t-value="'o_portal_bg_dark'"/>
+
             <div class="row mt16 o_portal_invoice_sidebar">
                 <!-- Sidebar -->
-                <div class="col-lg-3 d-print-none">
-                    <div class="bs-sidebar mb16" id="sidebar_content">
-                        <div class="text-center pt16 o_account_portal_sidebar">
-                            <h2 class="media-heading">
-                                <strong>
-                                    <span t-if="invoice.residual > 0" t-field="invoice.residual"/>
-                                    <span t-else="1" t-field="invoice.amount_total"/>
-                                </strong>
-                            </h2>
-                            <div class="mb4" t-if="invoice.state != 'paid' and invoice.type == 'out_invoice'"><i class="fa fa-clock-o"/><span class="o_portal_sidebar_timeago ml4" t-att-datetime="invoice.date_due"/></div>
-                        </div>
-                        <div class="o_payment_button">
-                            <div class="text-center mb8 ml16 mr16 o_download_pdf">
-                                <a class="btn btn-secondary btn-block o_download_btn" t-att-href="invoice.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
-                                <a class="btn btn-secondary btn-block d-none d-lg-inline-block o_print_btn o_portal_invoice_print" t-att-href="invoice.get_portal_url(report_type='pdf')" id="print_invoice_report" title="Print"><i class="fa fa-print"/> Print</a>
-                            </div>
-                        </div>
-                        <hr t-if="invoice.user_id" class="mt0 mb0"/>
-                        <div class="pb8 ml16 mr16 container">
-                            <t t-if="invoice.user_id">
-                                <div><strong>Your Contact:</strong></div>
-                                <div class="d-flex h-100">
-                                    <div class="align-self-center">
-                                        <img class="rounded-circle mr4 float-left o_portal_contact_img" t-if="invoice.user_id.image" t-attf-src="data:image/png;base64,#{invoice.user_id.image}" alt="Contact"/>
-                                        <img class="rounded-circle mr4 float-left o_portal_contact_img" t-if="not invoice.user_id.image" src="/web/static/src/img/placeholder.png" alt="Contact"/>
+                <t t-call="portal.portal_record_sidebar">
+                    <t t-set="classes" t-value="'col-12 col-lg flex-lg-grow-0 d-print-none'"/>
+                    <t t-set="title">
+                        <h2 class="mb-0">
+                            <b t-if="invoice.residual > 0" t-field="invoice.residual"/>
+                            <b t-else="1" t-field="invoice.amount_total"/>
+                        </h2>
+                        <div class="small" t-if="invoice.state != 'paid' and invoice.type == 'out_invoice'"><i class="fa fa-clock-o"/><span class="o_portal_sidebar_timeago ml4" t-att-datetime="invoice.date_due"/></div>
+                    </t>
+
+                    <t t-set="entries">
+                        <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
+                            <li class="list-group-item o_payment_button flex-grow-1 flex-sm-grow-0">
+                                <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
+                                    <div class="btn-group  flex-grow-1 mr-1 mb-1">
+                                        <a class="btn btn-secondary btn-block o_download_btn" t-att-href="invoice.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
                                     </div>
-                                    <div class="align-self-center">
-                                        <span t-field="invoice.user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
-                                        <a data-toggle="modal" href="#" data-target="#invoice_chatter"><i class="fa fa-comment"></i> Contact us</a>
+                                    <div class="btn-group flex-grow-1 mb-1">
+                                        <a class="btn btn-secondary btn-block o_print_btn o_portal_invoice_print" t-att-href="invoice.get_portal_url(report_type='pdf')" id="print_invoice_report" title="Print"><i class="fa fa-print"/> Print</a>
+                                    </div>
+                                </div>
+                            </li>
+                            <li t-if="invoice.user_id" class="list-group-item flex-grow-1 o_portal_contact_block">
+                                <div class="small mb-1"><strong class="text-muted">Your Contact:</strong></div>
+                                <div class="row">
+                                    <div class="col flex-grow-0 pr-2">
+                                        <img t-if="invoice.user_id.image" class="rounded-circle mt-1 o_portal_contact_img" t-attf-src="data:image/png;base64,#{invoice.user_id.image}" alt="Contact"/>
+                                        <img t-else="" class="rounded-circle mt-1 o_portal_contact_img" src="/web/static/src/img/user_menu_avatar.png" alt="Contact"/>
+                                    </div>
+                                    <div class="col pl-0">
+                                        <span t-field="invoice.user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
+                                        <a data-toggle="modal" href="#" data-target="#invoice_chatter" class="small"><i class="fa fa-fw fa-comments"/><b>Send message</b></a>
                                     </div>
                                 </div>
-                            </t>
-                            <div t-if="not invoice.user_id" class="text-center mr16">
-                                <a data-toggle="modal" href="#" data-target="#invoice_chatter"><i class="fa fa-comment"></i> Contact us</a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="text-center d-none d-md-block o_portal_brand">
-                        Powered by <a target="_blank" href="https://www.odoo.com?utm_source=db&amp;utm_medium=portal">Odoo</a>
-                    </div>
-                </div>
-                <!-- Page Content -->
-                <div id="invoice_content" class="col-lg-9 o_portal_page_content d-print-none">
-                    <div t-ignore="true" class="float-md-right css_editable_mode_hidden d-print-none">
-                        <ul class="list-inline">
-                            <li groups="sales_team.group_sale_salesman" class="list-inline-item">
-                                <a role="button" class="btn btn-info mt16 mr16" t-att-href="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (invoice._name, invoice.id, invoice.env.ref('account.action_invoice_tree1').id)"><t t-if="invoice.state == 'draft'">Edit Invoice</t><t t-else="">Leave Portal</t></a>
                             </li>
                         </ul>
-                    </div>
+                    </t>
+                </t>
+
+                <!-- Page Content -->
+                <div id="invoice_content" class="o_portal_page_content col-12 col-lg d-flex justify-content-end">
                     <t t-if="error or warning" t-call="account.portal_invoice_error"/>
                     <t t-if="success and (not error and not warning)" t-call="account.portal_invoice_success"/>
-                    <div class="o_portal_html_view">
+                    <div class="o_portal_html_view shadow">
+                        <div class="o_portal_html_loader text-center">
+                            <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-black-50"></i>
+                        </div>
                         <iframe id="invoice_html" class="mt8 mb8" width="100%" height="100%" frameborder="0" scrolling="no" t-att-src="invoice.get_portal_url(report_type='html')"/>
                     </div>
                 </div>
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index e7edeedeff8..6bada8f26aa 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -67,22 +67,20 @@
     </template>
 
     <template id="portal_invoice_page_inherit_payment" name="Payment on My Invoices" inherit_id="account.portal_invoice_page">
-        <xpath expr="//div[@id='sidebar_content']//div[hasclass('o_download_pdf')]" position="before">
+        <xpath expr="//t[@t-call='portal.portal_record_sidebar']//div[hasclass('o_download_pdf')]" position="before">
             <t t-set="tx_ids" t-value="invoice.transaction_ids.filtered(lambda tx: tx.state in ('pending', 'authorized', 'done'))"/>
             <t t-set="pending_manual_txs" t-value="tx_ids.filtered(lambda tx: tx.state == 'pending' and tx.acquirer_id.provider in ('transfer', 'manual'))"/>
-            <div class="mb8 ml16 mr16">
-                <a t-if="invoice.state == 'open' and invoice.amount_total and invoice.type == 'out_invoice' and (pending_manual_txs or not tx_ids)"
-                    class="btn btn-primary btn-block" data-toggle="modal" data-target="#pay_with">
-                    <i class="fa fa-arrow-circle-right"/> Pay Now
-                </a>
-                <a t-if="tx_ids and not pending_manual_txs and invoice.state != 'paid'"
-                    class="btn btn-warning btn-block" disabled="disabled">
-                    <i class="fa fa-check-circle"/> Pending
-                </a>
-                <a t-if="invoice.state == 'paid'"
-                    class="btn btn-success btn-block" disabled="disabled">
-                    <i class="fa fa-check-circle"/> Paid
+            <div>
+                <a href="#" t-if="invoice.state == 'open' and invoice.amount_total and invoice.type == 'out_invoice' and (pending_manual_txs or not tx_ids)"
+                    class="btn btn-success btn-block mb-2" data-toggle="modal" data-target="#pay_with">
+                    <i class="fa fa-fw fa-arrow-circle-right"/> Pay Now
                 </a>
+                <div t-if="tx_ids and not pending_manual_txs and invoice.state != 'paid'" class="alert alert-info py-1 mb-2" >
+                    <i class="fa fa-fw fa-check-circle"/> Pending
+                </div>
+                <div t-if="invoice.state == 'paid'" class="alert alert-success py-1 mb-2" >
+                    <i class="fa fa-fw fa-check-circle"/> Paid
+                </div>
             </div>
         </xpath>
         <xpath expr="//div[@id='invoice_content']//div[hasclass('o_portal_html_view')]" position="before">