From df8535fbd40e1e5c09dbe616a3332c76c23525c8 Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Mon, 9 Oct 2023 11:55:47 +0200
Subject: [PATCH] [REF] portal, *: portal redesign

*: base, account, account_payment, auth_top_portal, hr_timesheet, loyalty,
   mrp_subcontracting, payment, project, purchase, sale, sale_stock,
   sale_timesheet, website_crm_partner_assign, website_sale,
   website_slides

Portal general redesign. Increase visual consistencies with the backend
[1] and adapt to the new default website design [2].

[1] https://github.com/odoo/odoo/pull/116641
[2] https://github.com/odoo/odoo/pull/120302

task-3046004

Part-of: odoo/odoo#138077
---
 addons/account/controllers/portal.py          |  18 +-
 addons/account/static/src/img/Bill.svg        |  13 ++
 .../views/account_portal_templates.xml        |  90 +++++---
 .../views/account_portal_templates.xml        |  22 +-
 .../static/tests/totp_portal.js               |   4 +-
 addons/auth_totp_portal/views/templates.xml   |   4 +-
 addons/hr_timesheet/static/img/timesheet.svg  |  13 ++
 .../views/hr_timesheet_portal_templates.xml   |  11 +-
 .../views/project_task_portal_templates.xml   |  17 +-
 addons/loyalty/static/img/portal-loyalty.svg  |  14 ++
 .../static/src/img/manufacturing.svg          |  16 ++
 .../views/subcontracting_portal_templates.xml |  13 +-
 addons/payment/static/img/payment-methods.svg |  11 +
 addons/payment/views/portal_templates.xml     |  28 ++-
 .../static/src/img/portal-addresses.svg       |   6 +
 .../static/src/img/portal-connection.svg      |  13 ++
 addons/portal/static/src/js/portal.js         |   2 +-
 .../static/src/scss/bootstrap_overridden.scss |   2 +
 addons/portal/static/src/scss/portal.scss     |  80 ++-----
 .../portal/static/src/xml/portal_chatter.xml  |  56 ++---
 addons/portal/views/portal_templates.xml      | 204 +++++++++++-------
 addons/project/static/src/img/folder.svg      |  13 ++
 addons/project/static/src/img/tasks.svg       |  22 ++
 ...oject_portal_project_project_templates.xml |  19 +-
 .../project_portal_project_task_templates.xml | 126 ++++++-----
 addons/purchase/static/src/img/calculator.svg |  19 ++
 addons/purchase/static/src/img/rfq.svg        |   9 +
 .../static/src/js/purchase_portal_sidebar.js  |   4 +-
 addons/purchase/views/portal_templates.xml    |  95 ++++----
 addons/sale/static/src/img/bag.svg            |   9 +
 addons/sale/static/src/img/quotation.svg      |  19 ++
 .../sale/static/src/js/sale_portal_sidebar.js |   4 +-
 addons/sale/views/sale_portal_templates.xml   | 158 +++++++-------
 .../views/sale_stock_portal_template.xml      |  20 +-
 .../views/sale_timesheet_portal_templates.xml |  12 +-
 .../static/src/img/leads.svg                  |  10 +
 .../static/src/img/quotation.svg              |  19 ++
 .../website_crm_partner_assign_templates.xml  | 178 ++++++++-------
 .../tests/tours/website_sale_complete_flow.js |   6 +-
 addons/website_sale/views/templates.xml       |   6 +-
 .../tests/tours/slides_course_reviews.js      |   2 +-
 .../base/views/ir_qweb_widget_templates.xml   |  22 +-
 42 files changed, 847 insertions(+), 562 deletions(-)
 create mode 100644 addons/account/static/src/img/Bill.svg
 create mode 100644 addons/hr_timesheet/static/img/timesheet.svg
 create mode 100644 addons/loyalty/static/img/portal-loyalty.svg
 create mode 100644 addons/mrp_subcontracting/static/src/img/manufacturing.svg
 create mode 100644 addons/payment/static/img/payment-methods.svg
 create mode 100644 addons/portal/static/src/img/portal-addresses.svg
 create mode 100644 addons/portal/static/src/img/portal-connection.svg
 create mode 100644 addons/project/static/src/img/folder.svg
 create mode 100644 addons/project/static/src/img/tasks.svg
 create mode 100644 addons/purchase/static/src/img/calculator.svg
 create mode 100644 addons/purchase/static/src/img/rfq.svg
 create mode 100644 addons/sale/static/src/img/bag.svg
 create mode 100644 addons/sale/static/src/img/quotation.svg
 create mode 100644 addons/website_crm_partner_assign/static/src/img/leads.svg
 create mode 100644 addons/website_crm_partner_assign/static/src/img/quotation.svg

diff --git a/addons/account/controllers/portal.py b/addons/account/controllers/portal.py
index 4779f84ce27..0cc3bd44cb2 100644
--- a/addons/account/controllers/portal.py
+++ b/addons/account/controllers/portal.py
@@ -16,9 +16,13 @@ class PortalAccount(CustomerPortal):
     def _prepare_home_portal_values(self, counters):
         values = super()._prepare_home_portal_values(counters)
         if 'invoice_count' in counters:
-            invoice_count = request.env['account.move'].search_count(self._get_invoices_domain()) \
+            invoice_count = request.env['account.move'].search_count(self._get_invoices_domain('in'), limit=1) \
                 if request.env['account.move'].check_access_rights('read', raise_exception=False) else 0
             values['invoice_count'] = invoice_count
+        if 'bill_count' in counters:
+            bill_count = request.env['account.move'].search_count(self._get_invoices_domain('out'), limit=1) \
+                if request.env['account.move'].check_access_rights('read', raise_exception=False) else 0
+            values['bill_count'] = bill_count
         return values
 
     # ------------------------------------------------------------
@@ -32,8 +36,12 @@ class PortalAccount(CustomerPortal):
         }
         return self._get_page_view_values(invoice, access_token, values, 'my_invoices_history', False, **kwargs)
 
-    def _get_invoices_domain(self):
-        return [('state', 'not in', ('cancel', 'draft')), ('move_type', 'in', ('out_invoice', 'out_refund', 'in_invoice', 'in_refund', 'out_receipt', 'in_receipt'))]
+    def _get_invoices_domain(self, m_type=None):
+        if m_type in ['in', 'out']:
+            move_type = [m_type+move for move in ('_invoice', '_refund', '_receipt')]
+        else:
+            move_type = ('out_invoice', 'out_refund', 'in_invoice', 'in_refund', 'out_receipt', 'in_receipt')
+        return [('state', 'not in', ('cancel', 'draft')), ('move_type', 'in', move_type)]
 
     def _get_account_searchbar_sortings(self):
         return {
@@ -46,8 +54,8 @@ class PortalAccount(CustomerPortal):
     def _get_account_searchbar_filters(self):
         return {
             'all': {'label': _('All'), 'domain': []},
-            'invoices': {'label': _('Invoices'), 'domain': [('move_type', 'in', ('out_invoice', 'out_refund'))]},
-            'bills': {'label': _('Bills'), 'domain': [('move_type', 'in', ('in_invoice', 'in_refund'))]},
+            'invoices': {'label': _('Invoices'), 'domain': [('move_type', 'in', ('out_invoice', 'out_refund', 'out_receipt'))]},
+            'bills': {'label': _('Bills'), 'domain': [('move_type', 'in', ('in_invoice', 'in_refund', 'in_receipt'))]},
         }
 
     @http.route(['/my/invoices', '/my/invoices/page/<int:page>'], type='http', auth="user", website=True)
diff --git a/addons/account/static/src/img/Bill.svg b/addons/account/static/src/img/Bill.svg
new file mode 100644
index 00000000000..51d1968db63
--- /dev/null
+++ b/addons/account/static/src/img/Bill.svg
@@ -0,0 +1,13 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.0418 14.8189L36.6375 10.6104L34.0749 10.1881C32.413 9.91371 30.7361 10.5834 29.7204 11.9271L26.1265 16.6818L12.884 35.5724L13.9862 36.2129L13.9901 37.5853L27.2922 39.7809L29.8548 40.2032C31.5167 40.4776 33.1936 39.8078 34.2093 38.4642L37.8032 33.7094L51.0457 16.1912L51.0418 14.8189Z" fill="#FBDBD0"/>
+<path d="M14.0604 62.3678L13.9901 37.5853H13.9901L13.9862 36.2128L12.884 35.5724L12.8879 36.9447H12.8879L12.9582 61.7273L14.0604 62.3678Z" fill="#FBDBD0"/>
+<path d="M30.5939 40.4924C30.3348 40.4924 30.0737 40.471 29.8176 40.4286L17.3202 38.3665C17.2098 38.3484 17.1288 38.2529 17.1288 38.1411V18.152C17.1288 18.0728 17.1699 17.9991 17.2373 17.9576L44.3426 1.21249C44.3793 1.18973 44.421 1.17834 44.4627 1.17834C44.5011 1.17834 44.5395 1.18794 44.5741 1.20737C44.6464 1.24778 44.6913 1.3241 44.6913 1.40692V24.6036C44.6913 24.6509 44.6766 24.6969 44.6493 24.7355L41.4031 29.3259L34.3918 38.6018C33.4971 39.7855 32.0771 40.4924 30.5939 40.4924Z" fill="white"/>
+<path d="M44.4627 1.40697V24.6034L41.2166 29.1939L37.8032 33.7093L34.2093 38.464C33.3444 39.6083 32.0002 40.2638 30.5939 40.2638C30.3488 40.2638 30.1015 40.2438 29.8548 40.2031L27.2922 39.7809L21.1462 38.7664L17.3573 38.141V18.1521L44.4627 1.40697ZM44.4627 0.949829C44.3793 0.949829 44.2959 0.972595 44.2224 1.01801L17.117 17.7631C16.9822 17.8465 16.9001 17.9936 16.9001 18.1521V38.141C16.9001 38.3648 17.0621 38.5557 17.2828 38.592L21.0717 39.2174L27.2177 40.2319L29.7805 40.6541C30.0487 40.6984 30.3224 40.7209 30.5939 40.7209C32.1484 40.7209 33.6363 39.9803 34.5739 38.7397L38.1679 33.985L41.5812 29.4696C41.5841 29.4657 41.587 29.4618 41.5898 29.4579L44.8359 24.8673C44.8905 24.7901 44.9198 24.6979 44.9198 24.6034V1.40697C44.9198 1.24123 44.83 1.08843 44.6853 1.00775C44.616 0.969029 44.5393 0.949829 44.4627 0.949829Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.3963 17.4998C35.3964 17.4998 35.3965 17.4999 35.2973 17.7043L35.3965 17.4999C35.5101 17.555 35.5574 17.6918 35.5023 17.8053C35.4472 17.9187 35.3109 17.9661 35.1974 17.9114C35.1974 17.9114 35.1974 17.9114 35.1974 17.9114C35.1974 17.9114 35.1973 17.9113 35.1972 17.9113C35.1972 17.9113 35.1972 17.9113 35.1972 17.9113C35.1972 17.9112 35.1969 17.9111 35.1968 17.9111L35.1959 17.9107C35.1941 17.9098 35.1908 17.9083 35.1861 17.9062C35.1767 17.9021 35.1616 17.8956 35.141 17.8874C35.0997 17.871 35.0367 17.8478 34.9537 17.8228C34.7878 17.7728 34.5429 17.7157 34.235 17.6909C33.6209 17.6414 32.751 17.7198 31.7474 18.2467C30.7281 18.7817 29.4505 19.7833 28.5951 20.9402C27.7344 22.1043 27.348 23.3544 27.9454 24.4431C28.2954 25.0809 28.8051 25.3231 29.4274 25.3727C30.0712 25.4239 30.8164 25.2671 31.6077 25.0997L31.6157 25.0981C32.3858 24.9352 33.2007 24.7628 33.9261 24.8245C34.6752 24.8883 35.3436 25.2029 35.7889 26.0072C36.2881 26.9086 36.2692 27.8633 35.9021 28.7506C35.5375 29.6319 34.8303 30.4479 33.9445 31.1063C32.1784 32.4191 29.6296 33.1565 27.4674 32.4845C27.3469 32.447 27.2795 32.3189 27.317 32.1984C27.3545 32.0778 27.4826 32.0105 27.6031 32.0479C29.5883 32.6649 31.9873 31.9915 33.6718 30.7395C34.5112 30.1155 35.1549 29.3607 35.4797 28.5758C35.8019 27.7971 35.8109 26.9905 35.389 26.2286C35.0305 25.5812 34.5135 25.3333 33.8873 25.28C33.24 25.225 32.4929 25.3798 31.7023 25.547L31.6682 25.5542C30.9064 25.7154 30.1039 25.8851 29.3911 25.8284C28.6462 25.769 27.9824 25.4608 27.5447 24.6631C26.8159 23.3352 27.3317 21.88 28.2275 20.6684C29.1288 19.4495 30.4623 18.405 31.5349 17.8419C32.6232 17.2706 33.581 17.1796 34.2717 17.2353C34.6162 17.263 34.893 17.3271 35.0856 17.3851C35.182 17.4142 35.2574 17.4417 35.3098 17.4626C35.3361 17.473 35.3566 17.4818 35.3711 17.4882C35.3784 17.4914 35.3841 17.494 35.3884 17.496L35.3936 17.4985L35.3954 17.4993L35.396 17.4996L35.3963 17.4998Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.6193 15.9626C31.7455 15.9626 31.8478 16.065 31.8478 16.1912V33.967C31.8478 34.0932 31.7455 34.1956 31.6193 34.1956C31.493 34.1956 31.3907 34.0932 31.3907 33.967V16.1912C31.3907 16.065 31.493 15.9626 31.6193 15.9626Z" fill="#374874"/>
+<path d="M51.1155 41.1262L51.0457 16.1912L37.8176 33.6978L37.8032 33.6901L34.2093 38.3118C33.1937 39.6555 31.5167 40.3252 29.8548 40.0508L27.2922 39.6285V39.5555L13.9901 37.3598L14.0604 62.5931L51.1155 41.1262Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.4062 39.4304C27.5156 39.4934 27.5533 39.6331 27.4903 39.7425L14.4837 62.3295C14.4208 62.4389 14.281 62.4765 14.1716 62.4135C14.0622 62.3505 14.0246 62.2108 14.0876 62.1014L27.0941 39.5144C27.1571 39.405 27.2969 39.3674 27.4062 39.4304Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.6031 33.5795C37.6642 33.469 37.8032 33.4289 37.9137 33.49L51.2265 40.8467C51.3369 40.9078 51.377 41.0468 51.316 41.1573C51.2549 41.2678 51.1158 41.3079 51.0054 41.2468L37.6926 33.8901C37.5821 33.8291 37.5421 33.69 37.6031 33.5795Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.1834 15.6126C51.2841 15.6887 51.3041 15.8321 51.228 15.9328L34.3916 38.2057C33.3248 39.6172 31.5633 40.3207 29.8176 40.0324C29.8176 40.0324 29.8177 40.0325 29.8176 40.0324L13.9529 37.4146C13.8283 37.394 13.744 37.2764 13.7646 37.1518C13.7851 37.0273 13.9028 36.943 14.0273 36.9635L29.892 39.5814C31.47 39.842 33.0625 39.206 34.0269 37.9301L50.8633 15.6572C50.9394 15.5565 51.0827 15.5365 51.1834 15.6126Z" fill="#374874"/>
+<path d="M44.4627 1.40696V12.8966L51.0418 14.8187L51.1159 40.9737L14.0603 62.3678L12.9582 61.7273L12.884 35.5724L17.3573 29.1912V18.1521L44.4627 1.40696ZM44.4627 0.492676C44.2958 0.492676 44.1291 0.538321 43.9821 0.629179L16.8767 17.3743C16.6071 17.5408 16.443 17.8351 16.443 18.1521V28.9027L12.1354 35.0476C12.027 35.2021 11.9692 35.3863 11.9697 35.5749L12.0439 61.7298C12.0448 62.0546 12.218 62.3546 12.4988 62.5178L13.601 63.1583C13.743 63.2408 13.9017 63.2821 14.0604 63.2821C14.2182 63.2821 14.376 63.2412 14.5175 63.1595L51.5731 41.7655C51.8567 41.6017 52.0311 41.2987 52.0302 40.9711L51.956 14.8161C51.9549 14.4109 51.6871 14.0547 51.2981 13.9411L45.377 12.2112V1.40696C45.377 1.07549 45.1975 0.76991 44.908 0.608401C44.7694 0.531167 44.6159 0.492676 44.4627 0.492676Z" fill="#374874"/>
+</svg>
diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index 51e7c70c7f5..18d680dd7bd 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -13,13 +13,28 @@
     </template>
 
     <template id="portal_my_home_invoice" name="Show Invoices &amp; Bills" inherit_id="portal.portal_my_home" customize_show="True" priority="30">
-        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+            <t t-set="portal_client_category_enable" t-value="True"/>
+            <t t-set="portal_vendor_category_enable" t-value="True"/>
+        </xpath>
+        <div id="portal_client_category" position="inside">
             <t t-call="portal.portal_docs_entry">
-                <t t-set="title">Invoices &amp; Bills</t>
-                <t t-set="url" t-value="'/my/invoices'"/>
+                <t t-set="icon" t-value="'/account/static/src/img/Bill.svg'"/>
+                <t t-set="title">Your Invoices</t>
+                <t t-set="url" t-value="'/my/invoices?filterby=invoices'"/>
+                <t t-set="text">Follow, download or pay your invoices</t>
                 <t t-set="placeholder_count" t-value="'invoice_count'"/>
             </t>
-        </xpath>
+        </div>
+        <div id="portal_vendor_category" position="inside">
+            <t t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/account/static/src/img/Bill.svg'"/>
+                <t t-set="title">Our Invoices</t>
+                <t t-set="url" t-value="'/my/invoices?filterby=bills'"/>
+                <t t-set="text">Follow, download or pay our invoices</t>
+                <t t-set="placeholder_count" t-value="'bill_count'"/>
+            </t>
+        </div>
     </template>
 
     <template id="portal_my_invoices" name="My Invoices and Payments">
@@ -30,7 +45,7 @@
             <t t-set="title">Invoices</t>
         </t>
         <t t-if="not invoices">
-            <p>There are currently no invoices and payments for your account.</p>
+            <p class="alert alert-warning">There are currently no invoices and payments for your account.</p>
         </t>
         <t t-if="invoices" t-call="portal.portal_table">
             <thead>
@@ -38,7 +53,7 @@
                     <th>Invoice #</th>
                     <th>Invoice Date</th>
                     <th class='d-none d-md-table-cell'>Due Date</th>
-                    <th class="text-center">Status</th>
+                    <th>Status</th>
                     <th class="text-end">Amount Due</th>
                 </tr>
             </thead>
@@ -53,7 +68,7 @@
                         </td>
                         <td><span t-field="invoice.invoice_date"/></td>
                         <td class='d-none d-md-table-cell'><span t-field="invoice.invoice_date_due"/></td>
-                        <td class="text-center" name="invoice_status">
+                        <td name="invoice_status">
                             <t t-if="invoice.state == 'posted'" name="invoice_status_posted">
                                 <span t-if="invoice.payment_state in ('paid', 'in_payment')"
                                       class="badge rounded-pill text-bg-success">
@@ -96,52 +111,57 @@
             <div class="row mt16 o_portal_invoice_sidebar">
                 <!-- Sidebar -->
                 <t t-call="portal.portal_record_sidebar">
-                    <t t-set="classes" t-value="'col-lg-auto d-print-none'"/>
+                    <t t-set="classes" t-value="'col-lg-3 col-xl-4 d-print-none me-lg-auto'"/>
                     <t t-set="title">
                         <h2 class="mb-0">
-                            <b t-if="invoice.amount_residual > 0" t-field="invoice.amount_residual"/>
-                            <b t-else="1" t-field="invoice.amount_total"/>
+                            <span t-if="invoice.amount_residual > 0" t-field="invoice.amount_residual"/>
+                            <span t-else="1" t-field="invoice.amount_total"/>
                         </h2>
                         <div class="small" t-if="invoice.payment_state not in ('paid', 'in_payment') and invoice.move_type == 'out_invoice'"><i class="fa fa-clock-o"/><span class="o_portal_sidebar_timeago ml4" t-att-datetime="invoice.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 flex-grow-1">
-                                <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
-                                    <div class="btn-group  flex-grow-1 me-1 mb-1">
+                        <div class="d-flex flex-wrap align-items-end align-items-lg-center gap-4 mt-3">
+                            <div class="flex-basis-100 flex-basis-sm-50 flex-basis-lg-100 order-1 order-lg-0">
+                                <div class="o_download_pdf btn-toolbar flex-sm-nowrap gap-1">
+                                    <div class="btn-group flex-grow-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="btn-group flex-grow-1 mb-1">
+                                    <div class="btn-group flex-grow-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" target="_blank"><i class="fa fa-print"/> Print</a>
                                     </div>
                                 </div>
-                            </li>
-                            <li t-if="invoice.invoice_user_id" class="list-group-item flex-grow-1">
-                                <div class="small mb-1"><strong class="text-muted">
-                                    <t t-if="invoice.move_type == 'out_invoice'">
-                                        Salesperson
-                                    </t>
-                                    <t t-if="invoice.move_type == 'in_invoice'">
-                                        Purchase Representative
-                                    </t>
-                                </strong></div>
-                                <div class="row">
-                                    <div class="col flex-grow-0 pe-2">
-                                        <img class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(invoice.invoice_user_id.avatar_1024)" alt="Contact"/>
-                                    </div>
-                                    <div class="col ps-0">
-                                        <span t-field="invoice.invoice_user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
-                                        <a href="#discussion" class="small"><i class="fa fa-fw fa-comments"/><b>Send message</b></a>
+                            </div>
+                            <div t-if="invoice.invoice_user_id" class="flex-grow-1">
+                                <h6>
+                                    <small class="text-muted">
+                                        <t t-if="invoice.move_type == 'out_invoice'">
+                                            Salesperson
+                                        </t>
+                                        <t t-if="invoice.move_type == 'in_invoice'">
+                                            Purchase Representative
+                                        </t>
+                                    </small>
+                                </h6>
+                                <div class="o_portal_contact_details d-flex flex-column gap-2">
+                                    <div class="d-flex justify-content-start align-items-center gap-2">
+                                        <img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(invoice.invoice_user_id.avatar_1024)" alt="Contact"/>
+                                        <div>
+                                            <h6 class="mb-0" t-out="invoice.invoice_user_id.name"/>
+                                            <a href="#discussion" class="d-flex align-items-center gap-2 small fw-bold">
+                                            Send message
+                                            </a>
+                                        </div>
                                     </div>
+                                    <div t-field="invoice.invoice_user_id" t-options='{"widget": "contact", "fields": ["city", "phone"]}'/>
                                 </div>
-                            </li>
-                        </ul>
+                            </div>
+                        </div>
                     </t>
                 </t>
 
                 <!-- Page Content -->
-                <div id="invoice_content" class="col-12 col-lg">
+                <div id="invoice_content" class="o_portal_content col-12 col-lg-9 col-xl-8">
                     <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"/>
 
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index 7e4bf8cf7b3..3099f43a928 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -60,24 +60,26 @@
     </template>
 
     <template id="portal_invoice_page_inherit_payment" name="Payment on My Invoices" inherit_id="account.portal_invoice_page">
-        <xpath expr="//t[@t-call='portal.portal_record_sidebar']//div[hasclass('o_download_pdf')]" position="before">
+        <xpath expr="//t[@t-call='portal.portal_record_sidebar']//h2[1]" position="after">
             <t t-set="pending_txs" t-value="invoice.transaction_ids.filtered(lambda tx: tx.state in ('pending', 'authorized') and tx.provider_code not in ('none', 'custom'))"/>
             <div class="d-grid">
-                <div t-if="invoice.payment_state in ('paid', 'in_payment')" class="alert alert-success py-1 mb-2" >
+                <div t-if="invoice.payment_state in ('paid', 'in_payment')" class="position-sm-absolute position-lg-relative me-auto me-lg-0 top-0 end-0 rounded text-bg-success fs-6 fw-normal badge" >
                     <i class="fa fa-fw fa-check-circle"/> Paid
                 </div>
-                <a t-elif="invoice._has_to_be_paid()"
-                   href="#"
-                   class="btn btn-primary mb-2"
-                   data-bs-toggle="modal"
-                   data-bs-target="#pay_with">
-                    <i class="fa fa-fw fa-arrow-circle-right"/> Pay Now
-                </a>
-                <div t-elif="pending_txs" class="alert alert-info py-1 mb-2" >
+                <div t-elif="pending_txs" class="position-sm-absolute position-lg-relative me-auto me-lg-0 top-0 end-0 rounded text-bg-info fw-normal fs-6 badge" >
                     <i class="fa fa-fw fa-check-circle"/> Pending
                 </div>
             </div>
         </xpath>
+        <xpath expr="//t[@t-call='portal.portal_record_sidebar']//div[hasclass('o_download_pdf')]" position="before">
+            <a t-if="invoice._has_to_be_paid()"
+                href="#"
+                class="btn btn-primary d-block mb-2"
+                data-bs-toggle="modal"
+                data-bs-target="#pay_with">
+                <i class="fa fa-fw fa-arrow-circle-right"/> Pay Now
+            </a>
+        </xpath>
         <xpath expr="//div[@id='invoice_content']//div[hasclass('o_portal_html_view')]" position="before">
             <div t-if="invoice.get_portal_last_transaction() and invoice.amount_total and not success and not error" class="o_account_payment_tx_status" t-att-data-invoice-id="invoice.id">
                 <t t-call="payment.transaction_status">
diff --git a/addons/auth_totp_portal/static/tests/totp_portal.js b/addons/auth_totp_portal/static/tests/totp_portal.js
index 461b3be027a..91c3bd03405 100644
--- a/addons/auth_totp_portal/static/tests/totp_portal.js
+++ b/addons/auth_totp_portal/static/tests/totp_portal.js
@@ -73,7 +73,7 @@ registry.category("web_tour.tours").add('totportal_login_enabled', {
     }
 }, {
     content: "check we're logged in",
-    trigger: "h3:contains(Documents)",
+    trigger: "h3:contains(My account)",
     run: () => {}
 }, {
     content: "go back to security",
@@ -117,6 +117,6 @@ registry.category("web_tour.tours").add('totportal_login_disabled', {
     trigger: 'button:contains("Log in")',
 }, {
     content: "check we're logged in",
-    trigger: "h3:contains(Documents)",
+    trigger: "h3:contains(My account)",
     run: () => {}
 }]});
diff --git a/addons/auth_totp_portal/views/templates.xml b/addons/auth_totp_portal/views/templates.xml
index c7df5981326..1a849d7b01b 100644
--- a/addons/auth_totp_portal/views/templates.xml
+++ b/addons/auth_totp_portal/views/templates.xml
@@ -11,12 +11,12 @@
                 <t t-esc="env.ref('auth_totp.view_totp_wizard').sudo().get_combined_arch()"/>
             </div>
             <section>
-                <h3>
+                <h4>
                     Two-factor authentication
                     <a href="https://www.odoo.com/documentation/master/applications/general/auth/2fa.html" target="_blank">
                         <i title="Documentation" class="fa fa-fw o_button_icon fa-info-circle"></i>
                     </a>
-                </h3>
+                </h4>
                 <t t-if="not user_id.totp_enabled">
                     <div class="alert alert-secondary" role="status">
                         <i class="fa fa-warning"/>
diff --git a/addons/hr_timesheet/static/img/timesheet.svg b/addons/hr_timesheet/static/img/timesheet.svg
new file mode 100644
index 00000000000..7054999f0ff
--- /dev/null
+++ b/addons/hr_timesheet/static/img/timesheet.svg
@@ -0,0 +1,13 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.376 45.5317C17.1026 33.5076 23.9747 21.4504 33.1645 13.7722C38.4136 9.4823 45.6679 6.72472 52.2221 10.3616C51.9341 10.1907 43.9663 5.15163 43.9745 5.2212C42.6941 4.60548 41.2935 4.26875 39.8761 4.17736C31.2311 3.84811 24.2539 10.041 19.251 16.5016C15.3733 21.5634 12.3934 27.347 10.6655 33.4905C8.28743 41.465 8.5365 52.7762 15.5077 56.6752C15.5075 56.6753 24.089 61.0976 24.089 61.0976C19.9257 58.925 15.8798 52.1542 16.376 45.5317Z" fill="#FBDBD0"/>
+<path d="M36.8403 11.2289C25.5026 17.8293 16.3392 33.833 16.3762 46.9724C16.4131 60.1091 25.6363 65.4088 36.974 58.8084C48.3144 52.2066 57.4776 36.2028 57.4407 23.0662C57.4037 9.9268 48.1806 4.62689 36.8403 11.2289ZM36.809 55.0952C27.2055 60.6649 19.3665 56.1774 19.3352 45.0923C19.3039 34.0038 27.092 20.4531 36.6956 14.8834C46.3021 9.31192 54.1411 13.7993 54.1724 24.888C54.2037 35.9732 46.4155 49.5239 36.809 55.0952Z" fill="white"/>
+<path d="M36.809 55.0952C27.2055 60.6649 19.3665 56.1774 19.3352 45.0923C19.3039 34.0038 27.092 20.4531 36.6956 14.8834C46.3021 9.31192 54.1411 13.7993 54.1724 24.888C54.2037 35.9732 46.4155 49.5239 36.809 55.0952Z" fill="white"/>
+<path d="M48.2282 13.2289C50.3568 15.6328 51.9008 19.8191 51.9135 24.0517C51.9476 35.3917 43.4906 49.2021 33.026 54.8997C29.727 56.6958 26.2628 56.199 23.4779 55.7818C27.781 58.7178 31.8169 57.9904 36.809 55.0952C46.4156 49.5239 54.2037 35.9732 54.1724 24.888C54.1565 19.253 52.658 15.3425 48.2282 13.2289Z" fill="#C1DBF6"/>
+<path d="M40.7406 35.8751L46.1874 38.6438L45.0732 40.4964L39.8762 37.7142L40.7406 35.8751Z" fill="#374874"/>
+<path d="M35.1716 32.7948L31.8221 23.0592L32.8727 22.3906L36.2633 31.6678L35.1716 32.7948Z" fill="#374874"/>
+<path d="M34.8618 37.2808C34.972 35.4566 36.0146 33.5669 37.4087 32.4021C38.205 31.7514 39.3785 31.1622 40.3728 31.7139C40.3291 31.688 39.0694 30.9524 39.0706 30.9629C38.8764 30.8695 38.6639 30.8184 38.4489 30.8046C37.1374 30.7546 35.9306 31.8146 35.1716 32.7948C34.5833 33.5626 34.1313 34.4401 33.8691 35.3721C33.5084 36.5818 33.5462 38.2978 34.6037 38.8893C34.6037 38.8893 35.799 39.5839 35.799 39.5839C35.1674 39.2543 34.7865 38.2854 34.8618 37.2808Z" fill="#374874"/>
+<path d="M39.522 31.9525C40.3559 31.9525 40.8557 32.6377 40.8589 33.7854C40.8642 35.6538 39.4945 38.0257 37.8678 38.9648C37.4252 39.2204 36.9888 39.3555 36.6058 39.3555C35.7496 39.3555 35.2364 38.6846 35.2333 37.5609C35.228 35.6912 36.6342 33.2972 38.3039 32.3331C38.7352 32.0841 39.1564 31.9525 39.522 31.9525ZM39.522 31.4954C39.0861 31.4954 38.5947 31.6375 38.0754 31.9373C36.2942 32.9656 34.7703 35.5155 34.7761 37.5623C34.7802 38.9998 35.538 39.8126 36.6058 39.8126C37.0583 39.8126 37.5663 39.6667 38.0964 39.3607C39.8776 38.3324 41.3219 35.8308 41.3161 33.784C41.312 32.3339 40.5811 31.4954 39.522 31.4954Z" fill="#374874"/>
+<path d="M38.0805 33.7538C37.1711 34.2788 36.4336 35.5561 36.4366 36.6012C36.4396 37.6461 37.1818 38.0692 38.0913 37.5441C39.0007 37.019 39.7382 35.7418 39.7352 34.6967C39.7322 33.6516 38.99 33.2287 38.0805 33.7538Z" fill="#374874"/>
+<path d="M39.2165 4.16477C39.4349 4.16477 39.6556 4.16903 39.8762 4.17739C41.2935 4.2688 42.6941 4.60551 43.9745 5.22137C43.9745 5.22091 43.9748 5.22071 43.9755 5.22071C44.0484 5.22071 48.222 7.84772 50.6054 9.34727C54.7836 11.2764 57.421 16.0536 57.4407 23.0662C57.4776 36.2029 48.3144 52.2066 36.974 58.8084C33.6668 60.7338 30.5403 61.6451 27.7689 61.6451C26.3434 61.6451 25.0119 61.4039 23.7981 60.9357C23.895 60.9913 23.9919 61.0471 24.089 61.0977C24.0877 61.0971 23.9331 61.0175 23.6716 60.8826C23.1017 60.6536 22.5592 60.3733 22.0449 60.0443C19.5068 58.7363 15.5076 56.6753 15.5077 56.6753C8.53651 52.7763 8.28744 41.4651 10.6655 33.4906C12.3934 27.3472 15.3733 21.5634 19.251 16.5017C24.1262 10.2059 30.8751 4.1642 39.2165 4.16477ZM39.2152 3.25049C32.0094 3.25049 25.0493 7.52057 18.5281 15.9419C14.5215 21.1719 11.5 27.1508 9.78746 33.2357C8.46776 37.6646 8.06266 42.5881 8.67615 46.7447C9.42938 51.8483 11.6374 55.5582 15.0614 57.4733L15.0654 57.4661C15.1426 57.5157 15.214 57.5525 15.2656 57.5791L15.7534 57.8305L17.4057 58.6821L21.589 60.8379C22.129 61.1803 22.7008 61.4749 23.29 61.7145L23.6583 61.9043L23.6695 61.9101C23.8036 61.9792 23.9468 62.012 24.088 62.012C24.0938 62.012 24.0996 62.012 24.1053 62.0119C25.2531 62.3754 26.4823 62.5593 27.7689 62.5593C30.8074 62.5593 34.0592 61.5631 37.4339 59.5986C43.055 56.3263 48.3229 50.7305 52.2672 43.8423C56.2112 36.9543 58.3732 29.5751 58.3549 23.0637C58.335 15.9992 55.6712 10.711 51.0434 8.54272L50.9002 8.45266C49.6953 7.69451 48.1026 6.6925 46.8023 5.88C45.2748 4.92553 44.6738 4.54999 44.3685 4.40221L44.3708 4.39753C43.0224 3.74887 41.53 3.36795 39.935 3.26505C39.9269 3.2645 39.9189 3.26416 39.9109 3.26381C39.6806 3.25499 39.447 3.25053 39.2165 3.25053L39.2152 3.25049Z" fill="#374874"/>
+<path d="M44.4976 12.4896C50.21 12.489 54.1502 17.0316 54.1723 24.888C54.2036 35.9732 46.4155 49.5239 36.809 55.0952C34.0095 56.7188 31.3597 57.4879 29.0098 57.4879C23.2984 57.4879 19.3573 52.946 19.3351 45.0923C19.3039 34.0038 27.0919 20.453 36.6955 14.8834C39.4959 13.2593 42.1472 12.4899 44.4976 12.4896ZM44.4988 12.0325V12.4896L44.4985 12.0325C41.9771 12.0327 39.275 12.8589 36.4662 14.4879C26.7364 20.1308 18.8463 33.8604 18.878 45.0936C18.889 48.9926 19.8589 52.2528 21.6827 54.5217C23.4831 56.7612 26.0167 57.945 29.0098 57.945C31.5291 57.945 34.2303 57.1192 37.0383 55.4906C46.7698 49.8469 54.6612 36.118 54.6295 24.8866C54.6185 20.9867 53.6488 17.7259 51.8254 15.4567C50.0252 13.2165 47.4917 12.0325 44.4988 12.0325Z" fill="#374874"/>
+</svg>
diff --git a/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml b/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml
index 8a6376776c7..3880c691f6c 100644
--- a/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml
+++ b/addons/hr_timesheet/views/hr_timesheet_portal_templates.xml
@@ -9,13 +9,18 @@
     </template>
 
     <template id="portal_my_home_timesheet" name="Show Timesheets" customize_show="True"  inherit_id="portal.portal_my_home" priority="45">
-        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+            <t t-set="portal_service_category_enable" t-value="True"/>
+        </xpath>
+        <div id="portal_service_category" position="inside">
             <t t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/hr_timesheet/static/img/timesheet.svg'"/>
                 <t t-set="title">Timesheets</t>
                 <t t-set="url" t-value="'/my/timesheets'"/>
+                <t t-set="text">Review all timesheets related to your projects</t>
                 <t t-set="placeholder_count" t-value="'timesheet_count'"/>
             </t>
-        </xpath>
+        </div>
     </template>
 
     <template id="portal_my_timesheets" name="My Timesheets">
@@ -26,7 +31,7 @@
                 <t t-set="title">Timesheets</t>
             </t>
             <t t-if="not grouped_timesheets">
-                <div class="alert alert-warning mt8" role="alert">
+                <div class="alert alert-warning" role="alert">
                     There are no timesheets.
                 </div>
             </t>
diff --git a/addons/hr_timesheet/views/project_task_portal_templates.xml b/addons/hr_timesheet/views/project_task_portal_templates.xml
index 0163ae07425..ea912e2b1bf 100644
--- a/addons/hr_timesheet/views/project_task_portal_templates.xml
+++ b/addons/hr_timesheet/views/project_task_portal_templates.xml
@@ -2,23 +2,22 @@
 <odoo>
 
     <template id="portal_my_task" inherit_id="project.portal_my_task" name="Portal: My Task with Timesheets">
-        <xpath expr="//li[@id='task-nav']" position="before">
-            <li t-if="timesheets and allow_timesheets" class="list-group-item d-grid flex-grow-1" id='nav-report'>
-                <div class="o_download_pdf d-flex gap-1 align-items-center">
-                    <a class="btn btn-secondary flex-fill o_print_btn o_project_timesheet_print" t-att-href="task.get_portal_url(report_type='pdf')" href="#" title="View Details" target="_blank"><i class="fa fa-print"/> View Details</a>
+        <xpath expr="//div[@id='task-nav']" position="before">
+            <div t-if="timesheets and allow_timesheets" class="d-grid flex-grow-1" id='nav-report'>
+                <div class="o_download_pdf">
+                    <a class="btn btn-secondary o_print_btn o_project_timesheet_print d-block" t-att-href="task.get_portal_url(report_type='pdf')" href="#" title="View Details" target="_blank"><i class="fa fa-print"/> View Details</a>
                 </div>
-            </li>
+            </div>
         </xpath>
         <xpath expr="//li[@id='nav-header']" position="after">
-            <li t-if="timesheets and allow_timesheets" class="nav-item">
-                <a class="nav-link ps-3" href="#task_timesheets">
+            <div t-if="timesheets and allow_timesheets" class="nav-item">
+                <a class="nav-link p-0" href="#task_timesheets">
                     Timesheets
                 </a>
-            </li>
+            </div>
         </xpath>
         <xpath expr="//div[@id='card_body']" position="inside">
             <div class="container" t-if="timesheets and allow_timesheets">
-                <hr class="mt-4 mb-4"/>
                 <h5 id="task_timesheets" class="mt-2 mb-2" data-anchor="true">Timesheets</h5>
                 <t t-call="hr_timesheet.portal_timesheet_table"/>
             </div>
diff --git a/addons/loyalty/static/img/portal-loyalty.svg b/addons/loyalty/static/img/portal-loyalty.svg
new file mode 100644
index 00000000000..1e6312f746e
--- /dev/null
+++ b/addons/loyalty/static/img/portal-loyalty.svg
@@ -0,0 +1,14 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.1574 46.4595L42.8079 44.513L36.2025 37.3103L39.552 39.2568L46.1574 46.4595Z" fill="#FBDBD0"/>
+<path d="M46.1575 46.6881C46.0945 46.6881 46.0329 46.662 45.989 46.614L39.3836 39.4113C39.3031 39.3234 39.3037 39.1883 39.385 39.1011C42.4569 35.804 45.0001 31.7863 46.7403 27.4821C46.7696 27.4093 46.8343 27.3569 46.9115 27.3428C46.9249 27.3404 46.9385 27.3392 46.9521 27.3392C47.0155 27.3392 47.0769 27.3656 47.1207 27.4133L54.3577 35.3033C54.4093 35.3596 54.4294 35.4379 54.4113 35.512C54.3932 35.5861 54.3392 35.6464 54.2673 35.6725L47.6041 38.0993L46.3836 46.4924C46.3709 46.5799 46.3091 46.6519 46.2249 46.6781C46.2026 46.6848 46.18 46.6881 46.1575 46.6881Z" fill="white"/>
+<path d="M46.9521 27.5679L54.1892 35.4577L47.3975 37.9313L46.1574 46.4595L39.552 39.2568C42.6392 35.9434 45.2241 31.8423 46.9521 27.5679ZM46.9521 27.1107C46.9251 27.1107 46.8978 27.1131 46.8707 27.118C46.7163 27.146 46.5871 27.2511 46.5283 27.3965C44.8234 31.6137 42.227 35.7151 39.2175 38.9452C39.0549 39.1197 39.0538 39.39 39.2151 39.5658L45.8205 46.7685C45.9084 46.8644 46.0313 46.9166 46.1574 46.9166C46.2023 46.9166 46.2477 46.9101 46.292 46.8964C46.4607 46.8444 46.5843 46.7 46.6098 46.5253L47.8106 38.2673L54.3457 35.8872C54.4891 35.835 54.5971 35.7146 54.6333 35.5662C54.6695 35.4179 54.6293 35.2613 54.5261 35.1487L47.289 27.2588C47.2016 27.1636 47.079 27.1107 46.9521 27.1107Z" fill="#374874"/>
+<path d="M21.228 60.8524L17.8786 58.9059L16.5942 51.8352L19.9437 53.7817L21.228 60.8524Z" fill="#FBDBD0"/>
+<path d="M13.1603 59.1457L9.81079 57.1993L16.476 42.1309L19.8254 44.0774L13.1603 59.1457Z" fill="#FBDBD0"/>
+<path d="M21.2009 61.0794C21.1011 61.0676 21.021 60.9919 21.0029 60.8932L19.7869 54.197L13.3018 59.3249C13.2603 59.3578 13.2103 59.3743 13.1601 59.3743C13.1107 59.3743 13.0614 59.3584 13.0201 59.3265C12.9371 59.262 12.9085 59.1493 12.9511 59.0533L19.6163 43.985C19.6473 43.9144 19.7121 43.8645 19.7882 43.8519C19.8005 43.8497 19.813 43.8488 19.8253 43.8488C19.8886 43.8488 19.95 43.8751 19.9936 43.9227C21.502 45.5658 23.5525 46.4341 25.9235 46.4341C26.4424 46.4341 26.9815 46.3923 27.5257 46.3098C27.5373 46.308 27.5487 46.3071 27.5601 46.3071C27.6306 46.3071 27.698 46.3399 27.7418 46.3968C27.7925 46.4631 27.803 46.5517 27.769 46.6281L21.4369 60.9448C21.4 61.0283 21.3177 61.081 21.2279 61.081C21.219 61.081 21.2101 61.0805 21.2009 61.0794Z" fill="white"/>
+<path d="M19.8253 44.0774C21.3733 45.7635 23.4719 46.6626 25.9234 46.6626C26.4533 46.6626 26.9992 46.6207 27.5601 46.5356L21.228 60.8525L19.9437 53.7818L13.1602 59.1458L19.8253 44.0774ZM19.8253 43.6203C19.8007 43.6203 19.7758 43.6223 19.7511 43.6263C19.5989 43.6514 19.4696 43.7515 19.4072 43.8925L12.7421 58.9608C12.6571 59.153 12.7141 59.3785 12.8802 59.5071C12.9626 59.571 13.0614 59.6029 13.1602 59.6029C13.2604 59.6029 13.3606 59.57 13.4437 59.5043L19.6299 54.6126L20.7782 60.9341C20.8141 61.1317 20.9746 61.2827 21.174 61.3064C21.1921 61.3085 21.2103 61.3096 21.2282 61.3096C21.4074 61.3096 21.5722 61.2042 21.6461 61.0374L27.9781 46.7204C28.0456 46.5678 28.0246 46.3905 27.9233 46.258C27.836 46.1438 27.7012 46.0784 27.5601 46.0784C27.5373 46.0784 27.5144 46.0801 27.4915 46.0836C26.9584 46.1644 26.4309 46.2055 25.9234 46.2055C23.6182 46.2055 21.626 45.3626 20.1621 43.7682C20.0747 43.6732 19.9522 43.6203 19.8253 43.6203Z" fill="#374874"/>
+<path d="M41.2172 4.23825C38.279 2.53078 34.2101 2.77128 29.7196 5.36388C20.7944 10.5168 13.5843 23.0069 13.6134 33.2609C13.6244 37.1606 14.6804 40.1751 16.476 42.1309C17.0262 42.7302 17.6459 43.2301 18.3264 43.6255L21.6758 45.572C20.9954 45.1766 20.3757 44.6767 19.8254 44.0774C18.0298 42.1216 16.9739 39.1071 16.9628 35.2074C16.9338 24.9533 24.1438 12.4633 33.069 7.31037C37.5596 4.71773 41.6285 4.4772 44.5667 6.18474L41.2172 4.23825Z" fill="#FBDBD0"/>
+<path d="M25.9231 46.8912C23.4208 46.891 21.2541 45.9716 19.657 44.2321C17.7556 42.1609 16.7449 39.0406 16.7342 35.208C16.705 24.8966 23.9815 12.293 32.9547 7.11242C35.5371 5.62156 38.0148 4.86554 40.319 4.86554C43.032 4.86554 45.3269 5.93406 46.9554 7.95528C48.6159 10.0164 49.499 12.9876 49.509 16.5481C49.5188 19.9946 48.7079 23.8345 47.1639 27.6535C45.4032 32.0089 42.8289 36.0751 39.7193 39.4126C37.688 41.593 35.5244 43.3531 33.2885 44.6439C31.3338 45.7725 29.4179 46.4847 27.5945 46.7613C27.0273 46.8475 26.4648 46.8912 25.9231 46.8912Z" fill="white"/>
+<path d="M40.3189 5.09411C45.6134 5.09411 49.2598 9.28819 49.2804 16.5487C49.2905 20.0866 48.4384 23.8912 46.9521 27.5678C45.2241 31.8422 42.6391 35.9434 39.552 39.2568C37.5971 41.355 35.4406 43.1374 33.1742 44.4458C31.2011 45.585 29.31 46.27 27.5601 46.5355C26.9994 46.6206 26.4531 46.6626 25.9234 46.6626C23.4718 46.6626 21.3735 45.7635 19.8253 44.0773C18.0297 42.1216 16.9738 39.1071 16.9627 35.2073C16.9337 24.9533 24.1438 12.4633 33.0689 7.31033C35.674 5.80627 38.1361 5.09411 40.3189 5.09411ZM40.3189 4.63696C37.974 4.63696 35.4579 5.4032 32.8403 6.91447C28.4555 9.44606 24.3436 13.7798 21.2621 19.1174C18.1805 24.455 16.4913 30.1697 16.5056 35.2086C16.5166 39.0994 17.5481 42.273 19.4886 44.3865C21.1302 46.1746 23.3554 47.1197 25.9234 47.1197C26.4767 47.1197 27.0504 47.0752 27.6286 46.9875C29.4807 46.7065 31.4234 45.9846 33.4028 44.8418C35.658 43.5397 37.8394 41.7655 39.8864 39.5684C43.0149 36.2106 45.6048 32.1201 47.3759 27.7392C48.9308 23.893 49.7474 20.0229 49.7375 16.5475C49.7273 12.9345 48.8268 9.91376 47.1333 7.81193C45.4599 5.73486 43.1035 4.63696 40.3189 4.63696Z" fill="#374874"/>
+<path d="M33.0825 12.0887C39.7092 8.26271 45.1004 11.335 45.122 18.9496C45.1436 26.5661 39.7874 35.8415 33.1607 39.6675C26.5324 43.4943 21.1428 40.423 21.1212 32.8065C21.0996 25.1919 26.4542 15.9156 33.0825 12.0887ZM39.8434 32.5422L38.5402 24.7193L43.9376 15.5282L36.4516 18.6L33.0843 12.7407L29.7597 22.4636L22.2823 28.031L27.7125 30.9706L26.4594 40.2694L33.14 32.3631L39.8434 32.5422Z" fill="#C1DBF6"/>
+<path d="M36.9695 3.14758C38.5496 3.14763 39.9833 3.52119 41.2172 4.23821L44.5666 6.18475C44.558 6.17972 44.5492 6.17527 44.5405 6.17031C47.4563 7.84982 49.266 11.4397 49.2804 16.5488C49.2905 20.0867 48.4384 23.8913 46.9521 27.5679L54.1892 35.4576L47.3975 37.9312L46.1574 46.4595L42.8079 44.5131L38.7492 40.0873C37.0124 41.8262 35.1348 43.3139 33.1742 44.4459C31.2011 45.585 29.31 46.27 27.5601 46.5355L21.2281 60.8524L17.8786 58.9059L17.3241 55.8532L13.1602 59.1457L9.81075 57.1992L16.4759 42.1308C14.6803 40.1751 13.6244 37.1606 13.6133 33.2608C13.5843 23.0068 20.7943 10.5168 29.7195 5.36386C32.3244 3.85991 34.7868 3.14742 36.9695 3.14758ZM36.9696 2.23328C34.5436 2.23312 31.9506 3.02 29.2624 4.57207C24.8091 7.14315 20.6378 11.5364 17.5168 16.9423C14.3955 22.3487 12.6846 28.145 12.6991 33.2634C12.7097 36.9994 13.6435 40.1037 15.4063 42.2889L8.97464 56.8294C8.78609 57.2557 8.94842 57.7555 9.35141 57.9898L12.7009 59.9363C12.8436 60.0192 13.0022 60.06 13.1601 60.06C13.3617 60.06 13.5622 59.9935 13.7273 59.8629L16.6967 57.5149L16.9791 59.0693C17.0269 59.3327 17.1878 59.5619 17.4193 59.6965L20.7687 61.6429C20.9097 61.7249 21.0684 61.7667 21.2281 61.7667C21.323 61.7667 21.4183 61.7519 21.5105 61.722C21.7577 61.6417 21.9591 61.46 22.0643 61.2222L28.1981 47.3536C29.9541 47.0174 31.7793 46.3069 33.6314 45.2376C35.3715 44.233 37.077 42.9441 38.7118 41.3992L42.1341 45.131C42.1965 45.199 42.2688 45.2572 42.3486 45.3036L45.698 47.2501C45.8397 47.3324 45.9984 47.3738 46.1574 47.3738C46.2932 47.3738 46.4292 47.3436 46.555 47.2828C46.8285 47.1508 47.0185 46.8916 47.0622 46.5911L48.2237 38.6034L54.5021 36.3167C54.7891 36.2122 55.0049 35.9713 55.0774 35.6747C55.1499 35.3779 55.0694 35.0647 54.863 34.8396L48.0128 27.3717C49.4511 23.6489 50.2043 19.9177 50.1948 16.5462C50.1798 11.2815 48.3446 7.32297 45.0258 5.39474L45.026 5.39424L41.6766 3.4477C40.2901 2.64201 38.7064 2.23334 36.9696 2.23328Z" fill="#374874"/>
+</svg>
diff --git a/addons/mrp_subcontracting/static/src/img/manufacturing.svg b/addons/mrp_subcontracting/static/src/img/manufacturing.svg
new file mode 100644
index 00000000000..3666d1aa884
--- /dev/null
+++ b/addons/mrp_subcontracting/static/src/img/manufacturing.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.3871 19.5678C56.3008 19.5031 52.5034 17.4931 52.5034 17.4931L53.539 14.6235C54.0137 13.2858 53.9058 11.9696 53.237 11.4734L49.9574 8.99214C49.8927 8.94898 38.932 2.64876 38.932 2.64876C38.2847 2.3467 37.3569 2.7998 36.6449 3.7923L35.5877 5.2379L31.553 2.90768L31.4882 2.8861C31.1214 2.67033 30.6683 2.69191 30.1505 2.99399L25.4901 5.66944C24.5623 6.20885 23.7424 7.52498 23.5051 8.86272L22.7067 13.6742C22.4263 13.9763 22.1458 14.2999 21.8653 14.6235L18.9957 13.9547C18.1974 13.7605 17.1617 14.5372 16.5144 15.7886L13.2133 22.0673C12.5444 23.3403 12.4365 24.7643 12.9112 25.5626L14.6589 28.3891C14.5294 28.8206 14.4215 29.2521 14.3137 29.7052L11.0557 32.6396C10.1063 33.5674 9.54535 34.8404 9.5022 36.1565V42.3704C9.5022 43.2551 9.82583 43.8808 10.3652 44.075L13.9685 46.1463L12.9328 49.0159C12.4366 50.3536 12.566 51.6482 13.2133 52.166L27.3241 60.8828C27.993 61.379 29.007 60.9475 29.8054 59.8471L30.8194 58.4447L35.0484 60.8828L35.0915 60.8396C35.4799 60.9691 35.9114 60.9044 36.2566 60.667L40.9171 57.97C41.8449 57.4306 42.6648 56.1144 42.8805 54.7767L43.6788 49.9868C43.9593 49.6848 44.2398 49.3611 44.5203 49.0375L47.3899 49.7063C48.1882 49.9005 49.2239 49.1238 49.8712 47.8724L53.1507 41.5937C53.8196 40.3208 53.9275 38.8967 53.4528 38.0984L51.7267 35.2935C51.8562 34.862 51.964 34.4089 52.0719 33.9774L55.3299 31.043C56.2792 30.1152 56.8402 28.8422 56.8834 27.5261V21.1429C56.9697 20.3877 56.7539 19.8483 56.3871 19.5678Z" fill="#C1DBF6"/>
+<path d="M23.8275 7.08959L23.9277 6.89606C24.2771 6.22083 24.7773 5.68223 25.4146 5.29539L30.0791 2.59585C30.3478 2.42465 30.6749 2.32776 30.9919 2.32776C31.2158 2.32776 31.4459 2.38602 31.6233 2.48735L42.2857 8.6479L42.1179 9.0735C42.0121 9.03823 41.9056 9.02038 41.8016 9.02038C41.5704 9.02038 41.3304 9.09203 41.1257 9.22193L36.4567 11.9027C35.9132 12.2525 35.4556 12.7594 35.1436 13.363L35.0333 13.5759L23.8275 7.08959Z" fill="#FBDBD0"/>
+<path d="M30.9919 2.5563C31.1645 2.5563 31.3587 2.59943 31.5098 2.68574L42.19 8.85653C42.0605 8.8134 41.931 8.7918 41.8016 8.7918C41.5211 8.7918 41.2406 8.87813 41.0033 9.02917L36.3428 11.7046C35.7387 12.093 35.264 12.6324 34.9404 13.2581L24.1307 7.00099C24.4544 6.3753 24.9291 5.85747 25.5332 5.49066L30.1936 2.79365C30.431 2.64261 30.7115 2.5563 30.9919 2.5563ZM30.992 2.09918C30.6351 2.09918 30.2679 2.20686 29.9569 2.4025L25.3042 5.095C24.6316 5.50325 24.0883 6.088 23.7247 6.79098L23.5244 7.17822L23.9017 7.39665L34.7114 13.6537L35.1262 13.8939L35.3464 13.4681C35.6384 12.9036 36.0651 12.429 36.5807 12.0952L41.2309 9.42563L41.2399 9.42044L41.2487 9.41486C41.4168 9.30789 41.6132 9.24896 41.8016 9.24896C41.8823 9.24896 41.9621 9.26247 42.0455 9.29027C42.0455 9.29027 42.5783 9.3195 43.0355 9.42563C42.9212 8.86235 42.4187 8.46074 42.4187 8.46074L31.7385 2.28995C31.5256 2.16833 31.2542 2.09918 30.992 2.09918Z" fill="#374874"/>
+<path d="M12.5497 25.7742L12.5191 25.7226C11.9928 24.8374 12.1117 23.3429 12.8152 22.0041L16.1163 15.7041C16.7582 14.4891 17.7182 13.7045 18.5626 13.7045C18.6656 13.7045 18.7721 13.7045 18.8719 13.7376L18.894 13.7449L31.6926 21.128L29.537 20.407C29.5077 20.3971 29.4294 20.3971 29.3723 20.3971C28.6954 20.3971 27.8752 21.1018 27.3312 22.1507L24.0513 28.4302C23.433 29.6072 23.3029 30.9822 23.7418 31.7005L24.2071 32.4621L12.5497 25.7742Z" fill="#FBDBD0"/>
+<path d="M18.5627 13.9331C18.649 13.9331 18.7353 13.9331 18.8 13.9547L29.6097 20.1902C29.5449 20.1686 29.4586 20.1686 29.3723 20.1686C28.6172 20.1686 27.7325 20.8806 27.1284 22.0457L23.8488 28.3244C23.1799 29.5974 23.0721 31.043 23.5468 31.8197L12.7155 25.6058C12.2409 24.8074 12.3487 23.3834 13.0176 22.1104L16.3187 15.8102C16.9229 14.6666 17.8075 13.9331 18.5627 13.9331ZM18.5627 13.476C17.6203 13.476 16.6056 14.2886 15.9145 15.5967L12.6127 21.8983C11.8738 23.3045 11.7572 24.8885 12.3226 25.8394L12.3839 25.9426L12.4881 26.0023L23.3193 32.2162L24.8677 33.1046L23.9368 31.5813C23.5436 30.9378 23.6797 29.6291 24.2535 28.537L27.5336 22.2573C28.1183 21.1299 28.8782 20.6257 29.3723 20.6257C29.4058 20.6257 29.455 20.6257 29.4777 20.6281L33.7613 22.0573L29.8381 19.7942L19.0284 13.5587L18.9884 13.5356L18.9445 13.521C18.8095 13.476 18.6726 13.476 18.5627 13.476Z" fill="#374874"/>
+<path d="M10.0667 44.3034C9.44462 44.059 9.07385 43.3465 9.07385 42.392V36.1996C9.11984 34.9978 9.53266 33.8845 10.2679 32.9711L10.3906 32.8186L21.6003 39.2849L21.434 39.4927C20.7841 40.305 20.4034 41.3454 20.362 42.4224L20.3623 48.6275C20.3623 49.2925 20.5644 49.817 20.903 50.0309L20.6858 50.2857L10.0667 44.3034Z" fill="#FBDBD0"/>
+<path d="M10.4459 33.1143L21.2555 39.3498C20.5651 40.2128 20.1767 41.2916 20.1336 42.4136V48.6275C20.1336 49.3827 20.3429 49.8376 20.3429 49.8376L10.1654 44.0965C9.64757 43.9023 9.30236 43.2766 9.30236 42.392V36.1996C9.34551 35.0777 9.73388 33.9989 10.4459 33.1143ZM10.3352 32.5226L10.0898 32.8276C9.32359 33.7795 8.89335 34.9395 8.84556 36.182L8.84521 36.1909V42.392C8.84521 43.4362 9.26352 44.224 9.96661 44.5096L20.8 50.4L21.025 49.8376C20.7571 49.6685 20.5907 49.2048 20.5907 48.6275V42.4226C20.632 41.3972 20.9947 40.4077 21.6125 39.6353L21.945 39.2198L21.484 38.9538L10.6743 32.7183L10.3352 32.5226Z" fill="#374874"/>
+<path d="M12.9882 52.4559C12.5874 52.1563 12.3484 51.6378 12.2982 50.9842L12.265 50.5521L23.5762 57.0864L23.5851 57.207C23.6242 57.7333 23.7942 58.1237 24.077 58.3358L27.3573 60.8175L27.0991 61.1942L12.9882 52.4559Z" fill="#FBDBD0"/>
+<path d="M12.526 50.9669L23.3572 57.224C23.4004 57.8065 23.5946 58.2597 23.9398 58.5185L27.2193 60.9998L13.1085 52.2615C12.7633 52.0026 12.5691 51.5279 12.526 50.9669ZM12.0037 50.1372L12.0702 51.002C12.1256 51.722 12.3969 52.2992 12.8342 52.6272L12.8505 52.6394L12.8679 52.6501L26.9787 61.3885L27.4952 60.6353L24.2156 58.154C23.9256 57.9365 23.8368 57.51 23.8131 57.1903L23.7953 56.9492L23.5859 56.8282L12.7547 50.5711L12.0037 50.1372Z" fill="#374874"/>
+<path d="M28.0144 61.2152C27.7562 61.2152 27.5224 61.1431 27.2997 60.9947L24.0313 58.5213C23.3268 57.9882 23.1931 56.6789 23.6987 55.2635L25.4325 50.4791L25.1104 49.6737L21.9612 50.4554C21.8529 50.4726 21.7372 50.4918 21.6063 50.4918C20.8139 50.4918 20.2814 49.7427 20.2814 48.6276V42.4137C20.3229 41.0439 20.9021 39.7338 21.8705 38.8262L25.1117 35.9135L25.4334 34.6519L23.7212 31.8724C23.2247 31.0581 23.3456 29.5468 24.0095 28.2793L27.2892 22.0006C27.8889 20.8613 28.8221 20.0952 29.611 20.0952C29.6973 20.0952 29.7951 20.1148 29.8896 20.1338L32.6911 20.7889L33.4721 19.9039L34.2596 15.1356C34.5114 13.7519 35.344 12.4057 36.2839 11.8657L40.9451 9.1684C41.2386 9.00054 41.5192 8.91862 41.8016 8.91862C42.4321 8.91862 42.8935 9.37219 43.0672 10.1633L43.8393 13.9559L44.5553 13.9184L47.4027 9.96728C47.9725 9.16147 48.6933 8.68134 49.3317 8.68134C49.594 8.68134 49.821 8.75834 50.0069 8.91014L53.2931 11.397C53.9924 11.9407 54.127 13.2505 53.6259 14.6546L51.8884 19.4492L51.9321 19.5369C51.9502 19.5733 51.9672 19.6282 51.9922 19.703C52.0228 19.7948 52.0616 19.9117 52.1174 20.0566L52.19 20.2446L55.3629 19.4626C55.4748 19.4263 55.5821 19.4262 55.7181 19.4262C56.5107 19.4262 57.0431 20.1753 57.0431 21.2905V27.5046C57.0016 28.8742 56.4223 30.1843 55.454 31.0921L52.2141 34.0035L52.1965 34.0684C52.1358 34.2912 51.9822 34.8816 51.9139 35.1774L51.8929 35.2687L53.6032 38.0457C54.0998 38.8599 53.9788 40.3713 53.315 41.6387L50.0565 47.918C49.457 49.057 48.5239 49.8231 47.7351 49.8231C47.6498 49.8231 47.5558 49.8041 47.4565 49.7843L44.6549 49.1292L43.8739 50.0144L43.0864 54.7827C42.8614 56.1325 42.0101 57.5077 41.0621 58.0524L36.3791 60.7713C36.1154 60.9336 35.8132 61.0211 35.5228 61.0211C34.8922 61.0211 34.4311 60.5675 34.2574 59.7765L33.4873 55.9939H32.7735L29.9433 59.9294C29.3735 60.7352 28.6528 61.2152 28.0144 61.2152Z" fill="white"/>
+<path d="M49.3317 8.90985C49.5429 8.90985 49.7164 8.96779 49.8621 9.08699L49.8688 9.09252L49.8758 9.09776L53.1505 11.5753C53.7644 12.0528 53.8714 13.2874 53.4113 14.5756L51.7068 19.2792L51.6393 19.4624L51.7271 19.6381C51.7361 19.6574 51.758 19.7233 51.7757 19.7763C51.8056 19.8659 51.8464 19.9885 51.9041 20.1385L52.0488 20.5147L52.4401 20.4182L55.4176 19.6846L55.4355 19.6802L55.4529 19.6744C55.5119 19.6547 55.5985 19.6547 55.7182 19.6547C56.3842 19.6547 56.8146 20.2968 56.8146 21.2905V27.4975C56.7729 28.8112 56.2203 30.0602 55.3048 30.9187L52.1115 33.7883L52.0114 33.8782L51.976 34.008C51.9143 34.2343 51.7592 34.8306 51.6911 35.1259L51.6489 35.3087L51.7473 35.4685L53.4076 38.1637C53.8656 38.9149 53.7415 40.3317 53.1117 41.5341L49.8549 47.8104C49.2933 48.8774 48.4414 49.5943 47.735 49.5943C47.6741 49.5943 47.5937 49.5786 47.5084 49.5615L44.84 48.9375L44.5739 48.8753L44.3931 49.0802L43.7459 49.8138L43.659 49.9122L43.6376 50.0418L42.861 54.7447C42.6462 56.033 41.8418 57.3407 40.9463 57.8552L36.2643 60.5738L36.2592 60.5767L36.2542 60.5797C36.0346 60.7149 35.768 60.7924 35.5229 60.7924C34.8195 60.7924 34.568 60.1252 34.4821 59.7344L33.7485 56.1311L33.674 55.7651H32.6563L32.5195 55.9554L29.7556 59.7989C29.2296 60.5426 28.5787 60.9866 28.0144 60.9866C27.8067 60.9866 27.6177 60.9292 27.437 60.8114L24.1692 58.339C23.5447 57.8664 23.4421 56.6614 23.9132 55.3424L25.6177 50.6388L25.6771 50.475L25.6123 50.3133L25.3966 49.7738L25.2486 49.404L24.862 49.5L21.9234 50.2293C21.8119 50.2478 21.7139 50.2632 21.6063 50.2632C20.9403 50.2632 20.5099 49.6212 20.5099 48.6275V42.4205C20.5515 41.1069 21.1042 39.8578 22.0197 38.9993L25.213 36.1297L25.3162 36.037L25.3504 35.9026L25.6309 34.8022L25.6787 34.6145L25.5771 34.4495L23.9169 31.7543C23.4588 31.0031 23.583 29.5863 24.2123 28.385L27.4912 22.1076C28.0528 21.0405 28.9047 20.3236 29.611 20.3236C29.672 20.3236 29.7523 20.3394 29.8376 20.3564L32.506 20.9805L32.7721 21.0427L32.9529 20.8378L33.6002 20.1042L33.687 20.0057L33.7084 19.8762L34.4839 15.1799C34.7211 13.8752 35.5261 12.5647 36.3992 12.0632L41.0574 9.36738C41.3168 9.2192 41.5602 9.14713 41.8016 9.14713C42.505 9.14713 42.7565 9.81431 42.8424 10.2052L43.576 13.8085L43.6545 14.1945L44.048 14.1738L44.4579 14.1522L44.6766 14.1406L44.8047 13.9629L47.5904 10.0975C48.1164 9.3538 48.7674 8.90985 49.3317 8.90985ZM49.3316 8.45266C48.6196 8.45266 47.8429 8.94891 47.2172 9.83355L44.4338 13.6957L44.0239 13.7173L43.2903 10.114C43.0961 9.22939 42.5567 8.68999 41.8015 8.68999C41.4563 8.68999 41.1327 8.79787 40.8306 8.97049L36.1702 11.6675C35.1561 12.2501 34.293 13.6741 34.0341 15.0981L33.2574 19.8017L32.6101 20.5353L29.9346 19.9096C29.8267 19.888 29.7189 19.8664 29.611 19.8664C28.7264 19.8664 27.7339 20.6648 27.0866 21.8946L23.807 28.1733C23.095 29.5326 22.9871 31.1076 23.5265 31.9922L25.1879 34.6893L24.9074 35.7896L21.7141 38.6593C20.6784 39.6302 20.0959 40.9895 20.0527 42.4135V48.6274C20.0527 49.8789 20.6784 50.7203 21.6062 50.7203C21.7573 50.7203 21.8867 50.6988 22.0162 50.6772L24.9721 49.9436L25.1879 50.483L23.4833 55.1866C22.9439 56.6969 23.095 58.0994 23.8933 58.7035L27.1728 61.1848C27.4318 61.3574 27.7123 61.4437 28.0143 61.4437C28.7263 61.4437 29.5031 60.9474 30.1288 60.0628L32.8905 56.2223H33.3005L34.0341 59.8255C34.2283 60.7101 34.7676 61.2495 35.5228 61.2495C35.868 61.2495 36.2133 61.1416 36.4937 60.969L41.1758 58.2504C42.1899 57.6679 43.0745 56.2439 43.3118 54.8198L44.0886 50.1162L44.7359 49.3826L47.4113 50.0083C47.5192 50.0299 47.6271 50.0515 47.735 50.0515C48.6196 50.0515 49.6121 49.2531 50.2594 48.0233L53.5174 41.7447C54.2294 40.3853 54.3372 38.8103 53.7979 37.9257L52.1365 35.2287C52.2012 34.9482 52.3522 34.3656 52.417 34.1283L55.6102 31.2586C56.6459 30.2877 57.2285 28.9284 57.2716 27.5044V21.2905C57.2716 20.0391 56.6459 19.1976 55.7181 19.1976C55.5671 19.1976 55.4376 19.1976 55.3082 19.2407L52.3307 19.9743C52.2228 19.6938 52.1796 19.5212 52.1365 19.4349L53.841 14.7313C54.3804 13.221 54.2078 11.8185 53.431 11.2144L50.1515 8.73314C49.9141 8.53895 49.6337 8.45266 49.3316 8.45266Z" fill="#374874"/>
+<path d="M44.1519 31.8657C44.1519 35.8041 41.7486 40.3937 38.8025 42.0993C35.8565 43.8049 33.4531 41.9908 33.4531 38.0524C33.4531 34.114 35.8565 29.5243 38.8025 27.8187C41.7486 26.1131 44.1519 27.9273 44.1519 31.8657Z" fill="#FBDBD0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4441 27.908C41.5687 27.2462 40.3352 27.1954 38.917 28.0165C37.4929 28.841 36.1818 30.3758 35.2255 32.2042C34.2703 34.0306 33.6816 36.1264 33.6816 38.0523C33.6816 39.9835 34.2712 41.3374 35.1608 42.01C36.0362 42.6717 37.2697 42.7225 38.6879 41.9015C40.112 41.077 41.4231 39.5422 42.3794 37.7138C43.3346 35.8874 43.9233 33.7916 43.9233 31.8656C43.9233 29.9345 43.3337 28.5806 42.4441 27.908ZM42.7198 27.5433C43.7683 28.3361 44.3804 29.8584 44.3804 31.8656C44.3804 33.8781 43.7674 36.0463 42.7845 37.9257C41.8025 39.8031 40.439 41.416 38.917 42.2971C37.3891 43.1816 35.948 43.1782 34.8851 42.3747C33.8366 41.5819 33.2245 40.0596 33.2245 38.0523C33.2245 36.0398 33.8375 33.8717 34.8205 31.9923C35.8024 30.1149 37.1659 28.502 38.6879 27.6209C40.2158 26.7364 41.6569 26.7398 42.7198 27.5433Z" fill="#374874"/>
+<path d="M38.5004 2.55629C38.6532 2.55629 38.7986 2.58649 38.9319 2.64873C38.9319 2.64873 49.0943 8.25851 49.3316 8.45273L53.4311 11.2145C54.2079 11.8186 54.3805 13.221 53.8411 14.7314L52.7822 17.6533C53.3375 17.9721 55.6331 19.1976 55.7182 19.1976C56.646 19.1976 57.2717 20.0391 57.2717 21.2905V27.5045C57.2285 28.9285 56.646 30.2878 55.6103 31.2587L52.417 34.1283C52.3523 34.3657 52.2012 34.9482 52.1365 35.2287L53.7979 37.9257C54.3373 38.8103 54.2294 40.3854 53.5174 41.7447L50.2594 48.0234C49.6121 49.2532 48.6196 50.0515 47.735 50.0515C47.6271 50.0515 47.5192 50.0299 47.4113 50.0084L44.7359 49.3827L44.0886 50.1163L43.3119 54.8199C43.0745 56.2439 42.1899 57.6679 41.1758 58.2505L36.4938 60.9691C36.2133 61.1416 35.8681 61.2495 35.5229 61.2495C34.9552 61.2495 34.5096 60.9445 34.2408 60.4173L31.1538 58.6375L30.1289 60.0628C29.5031 60.9475 28.7264 61.4437 28.0144 61.4437C27.7123 61.4437 27.4318 61.3574 27.1729 61.1849L25.6161 60.007L13.1085 52.2614C12.7633 52.0025 12.5691 51.5278 12.526 50.9669C12.526 50.9669 12.662 49.7454 12.9327 49.0159L13.9249 46.2666L10.1654 44.0965C9.64756 43.9023 9.30235 43.2766 9.30235 42.3919V36.1996C9.3455 35.0777 9.73387 33.9988 10.4459 33.1142L14.3135 29.7052C14.4214 29.2521 14.5293 28.8206 14.6588 28.389L12.7155 25.6057C12.2409 24.8074 12.3487 23.3834 13.0176 22.1103L16.3187 15.8101C16.9229 14.6666 17.8075 13.933 18.5626 13.933C18.5811 13.933 18.5986 13.9339 18.6168 13.9341C18.618 13.934 18.6195 13.9339 18.6213 13.9339C18.8068 13.934 21.8652 14.6234 21.8652 14.6234C22.1457 14.2998 22.4262 13.9762 22.7066 13.674L23.505 8.8626C23.6187 8.22164 24.1307 7.00091 24.1307 7.00091C24.4543 6.37522 24.929 5.85734 25.5331 5.49058L30.1936 2.79353C30.4309 2.64249 30.7114 2.55622 30.9919 2.55622C31.1645 2.55622 31.3587 2.59935 31.5097 2.68566L35.6884 5.09997L36.6449 3.79218C37.2101 3.00418 37.9114 2.55629 38.5004 2.55629ZM38.5004 1.64189C37.5864 1.64189 36.6393 2.2314 35.902 3.25924L35.435 3.89764L31.9671 1.89398C31.6813 1.73067 31.3363 1.64191 30.9919 1.64191C30.5464 1.64191 30.1075 1.76934 29.721 2.01067L25.0752 4.69919L25.0669 4.70402L25.0587 4.70902C24.3226 5.1559 23.7209 5.80317 23.3186 6.58082L23.3018 6.61341L23.2876 6.64726C23.2311 6.7818 22.7325 7.98255 22.6047 8.70287L21.8491 13.2568C21.7433 13.3738 21.638 13.4927 21.5335 13.6118C18.8882 13.0197 18.7292 13.0197 18.6217 13.0196H18.6186C18.5965 13.019 18.5798 13.0187 18.5626 13.0187C17.4503 13.0187 16.2808 13.9246 15.5103 15.383L12.2077 21.686C11.398 23.2271 11.286 24.9905 11.9297 26.0729L11.9467 26.1016L11.9659 26.129L13.6603 28.556C13.5996 28.7791 13.5442 28.9979 13.4923 29.2102L9.84134 32.4283L9.78269 32.48L9.73366 32.5409C8.90539 33.57 8.44034 34.8229 8.38875 36.1644L8.38806 36.182V42.3919C8.38806 43.5965 8.9125 44.5555 9.76303 44.9199L12.8052 46.6759L12.0727 48.7054C11.7745 49.5092 11.6325 50.7291 11.6173 50.8656L11.6078 50.9511L11.6144 51.0369C11.68 51.8901 12.0158 52.5847 12.56 52.9928L12.5926 53.0172L12.6272 53.0387L25.0985 60.7618L26.6213 61.9139L26.6431 61.9304L26.6659 61.9456C27.0765 62.2192 27.5302 62.358 28.0144 62.358C29.0382 62.358 30.081 61.7138 30.8753 60.5907L31.4134 59.8424C32.1581 60.2718 34.174 61.4518 34.6299 61.7545C35.2986 62.1985 36.2875 62.1649 36.9618 61.7545L41.635 59.0411C42.8905 58.3198 43.9283 56.6829 44.2137 54.9701L44.9479 50.5242L45.0599 50.3973L47.2032 50.8985L47.2176 50.9019L47.2324 50.9049C47.368 50.9319 47.5367 50.9657 47.735 50.9657C48.9742 50.9657 50.2515 50.0014 51.0685 48.4491L54.3289 42.1657C55.1921 40.5179 55.293 38.6214 54.5785 37.4496L53.1153 35.0744C53.1527 34.926 53.194 34.7656 53.2305 34.6264L56.2214 31.9386L56.2286 31.9322L56.2356 31.9256C57.4239 30.8116 58.1347 29.2102 58.1855 27.5321L58.1859 27.5182V21.2904C58.1859 19.6057 57.2229 18.9235 55.9265 18.2919C55.5773 18.1218 54.6126 17.6119 53.9079 17.2302L54.7006 15.0428C55.3802 13.1399 55.1017 11.3554 53.9924 10.4926L53.9678 10.4735L53.9419 10.4561L49.8425 7.69435L49.8415 7.69579C49.5726 7.52132 48.1828 6.71087 39.3738 1.84818L39.3466 1.83318L39.3186 1.82006C39.0652 1.70182 38.7899 1.64189 38.5004 1.64189Z" fill="#374874"/>
+</svg>
diff --git a/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml b/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml
index 74f477440f3..83fa27e4438 100644
--- a/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml
+++ b/addons/mrp_subcontracting/views/subcontracting_portal_templates.xml
@@ -2,13 +2,18 @@
 <odoo>
 
     <template id="portal_my_home_productions" name="Productions" customize_show="True" inherit_id="portal.portal_my_home" priority="20">
-        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+            <t t-set="portal_vendor_category_enable" t-value="True"/>
+        </xpath>
+        <div id="portal_vendor_category" position="inside">
             <t t-call="portal.portal_docs_entry">
-                <t t-set="title">Productions</t>
+                <t t-set="icon" t-value="'/mrp_subcontracting/static/src/img/manufacturing.svg'"/>
+                <t t-set="title">Manufacturing Orders</t>
+                <t t-set="text">Follow manufacturing orders you have to fulfill</t>
                 <t t-set="url" t-value="'/my/productions'"/>
                 <t t-set="placeholder_count" t-value="'production_count'"/>
             </t>
-        </xpath>
+        </div>
     </template>
 
     <template id="portal_my_home_menu_production" name="Portal layout : production menu entries" inherit_id="portal.portal_breadcrumbs" priority="25">
@@ -28,7 +33,7 @@
             </t>
 
             <t t-if="not pickings">
-                <p>There are currently no productions for your account.</p>
+                <p class="alert alert-warning">There are currently no productions for your account.</p>
             </t>
 
             <t t-if="pickings" t-call="portal.portal_table">
diff --git a/addons/payment/static/img/payment-methods.svg b/addons/payment/static/img/payment-methods.svg
new file mode 100644
index 00000000000..bc15e6d1fec
--- /dev/null
+++ b/addons/payment/static/img/payment-methods.svg
@@ -0,0 +1,11 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.8288 2.55638C52.0805 2.55638 52.3323 2.62152 52.5578 2.7518L54.158 3.67631C54.6084 3.93658 54.886 4.41727 54.8862 4.93752L54.897 36.072C54.8971 36.592 54.6203 37.0726 54.1704 37.3333L12.9021 61.2475C12.6762 61.3784 12.4238 61.4438 12.1715 61.4438C11.9198 61.4438 11.668 61.3787 11.4425 61.2484L9.84226 60.3238C9.39179 60.0635 9.11424 59.5828 9.11405 59.0626L9.10311 27.9344C9.10292 27.4145 9.37975 26.9339 9.82955 26.6732L51.0981 2.75283C51.3241 2.62186 51.5764 2.55638 51.8288 2.55638ZM51.8288 1.64209C51.4117 1.64209 51.0005 1.75263 50.6396 1.96179L9.37106 25.8822C8.64155 26.3051 8.18855 27.0916 8.18884 27.9348L8.19979 59.063C8.20009 59.9068 8.65419 60.6933 9.38489 61.1154L10.9851 62.04C11.3453 62.2481 11.7555 62.3581 12.1715 62.3581C12.5885 62.3581 12.9997 62.2476 13.3605 62.0385L54.6288 38.1244C55.3585 37.7016 55.8116 36.915 55.8113 36.0717L55.8005 4.93722C55.8002 4.09334 55.3461 3.30684 54.6154 2.88465L53.0152 1.96015C52.655 1.75206 52.2448 1.64209 51.8288 1.64209Z" fill="#374874"/>
+<path d="M54.8858 4.09686L51.8276 2.32996L9.10278 27.0945L12.161 28.8614L54.8858 4.09686Z" fill="white"/>
+<path d="M12.1725 61.6702L9.11433 59.9033L9.10278 27.0945L12.161 28.8614L12.1725 61.6702Z" fill="#FBDBD0"/>
+<path d="M12.1726 61.6702L54.8972 36.9121L54.8857 4.10339L12.161 28.8614L12.1726 61.6702Z" fill="white"/>
+<path d="M54.891 20.5496L12.1666 45.2097V34.0217L54.891 9.36157V20.5496Z" fill="#374874"/>
+<path d="M49.0564 35.9273L31.7461 45.8722C31.213 46.1777 30.5331 45.9932 30.2276 45.4601C30.1309 45.2913 30.0801 45.1002 30.0803 44.9057V42.6122C30.0816 41.8655 30.4807 41.1762 31.1276 40.8034L49.1186 30.4856C49.5803 30.2213 50.169 30.3814 50.4333 30.8431C50.5167 30.9888 50.5605 31.1537 50.5606 31.3216V33.3323C50.5595 34.4041 49.9859 35.3936 49.0564 35.9273Z" fill="#C1DBF6"/>
+<path d="M18.2645 50.7359C18.1862 49.5732 18.4754 48.4154 19.0912 47.4261C18.4364 47.0959 17.6638 47.0959 17.009 47.4261C15.309 48.1906 14.0815 50.478 14.2648 52.5322C14.4482 54.5864 15.9772 55.64 17.6834 54.8661C18.4872 54.4703 19.1548 53.8438 19.6009 53.0667C18.8768 52.6969 18.3671 51.8764 18.2645 50.7359Z" fill="#FBDBD0"/>
+<path d="M24.4211 47.9699C24.2377 45.9157 22.7087 44.8621 21.0025 45.6391C20.1986 46.0345 19.5302 46.6597 19.0819 47.4354C19.7998 47.8207 20.325 48.6443 20.412 49.7755C20.4899 50.9372 20.2007 52.0939 19.5854 53.0822C20.24 53.4129 21.0129 53.4129 21.6676 53.0822C23.3769 52.3115 24.6044 50.0273 24.4211 47.9699Z" fill="#C1DBF6"/>
+<path d="M20.4214 49.7756C20.3188 48.6444 19.7998 47.8208 19.0912 47.4354C18.4774 48.4221 18.1882 49.5764 18.2646 50.7359C18.3671 51.8671 18.8861 52.6876 19.5947 53.0729C20.2081 52.0872 20.4972 50.9341 20.4214 49.7756Z" fill="#374874"/>
+</svg>
diff --git a/addons/payment/views/portal_templates.xml b/addons/payment/views/portal_templates.xml
index 5ec2abd14da..3db33042f23 100644
--- a/addons/payment/views/portal_templates.xml
+++ b/addons/payment/views/portal_templates.xml
@@ -2,18 +2,20 @@
 <odoo>
 
     <!-- Integration of a conditional "Manage payment methods" link in /my -->
-    <template id="payment.pay_meth_link" inherit_id="portal.portal_layout">
-        <xpath expr="//div[hasclass('o_portal_my_details')]" position="inside">
+    <!-- This template is no more used and should be removed once portal is merged. -->
+    <template id="payment.pay_meth_link" inherit_id="portal.side_content">
+          <!--<xpath expr="//div[hasclass('o_portal_my_details')]" position="inside">
             <t t-set="partner" t-value="request.env.user.partner_id"/>
             <t t-set="providers_allowing_tokenization"
                t-value="request.env['payment.provider'].sudo()._get_compatible_providers(request.env.company.id, partner.id, 0., force_tokenization=True, is_validation=True)"/>
             <t t-set="existing_tokens" t-value="partner.payment_token_ids + partner.commercial_partner_id.sudo().payment_token_ids"/>
-            <!-- Only show the link if a token can be created or if one already exists -->
+             Only show the link if a token can be created or if one already exists
             <div t-if="providers_allowing_tokenization or existing_tokens"
                  class='manage_payment_method mt16'>
                 <a href="/my/payment_method">Manage payment methods</a>
             </div>
         </xpath>
+        -->
     </template>
 
     <!-- Display of /payment/pay -->
@@ -323,4 +325,24 @@
         </div>
     </template>
 
+    <!-- "Manage payment methods" card on /my -->
+    <template id="portal_my_home_payment" name="Show Payment Method" customize_show="True" inherit_id="portal.portal_my_home" priority="60">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+            <t t-set="portal_client_category_enable" t-value="True"/>
+        </xpath>
+        <div id="portal_client_category" position="inside">
+            <t t-set="partner" t-value="request.env.user.partner_id"/>
+            <t t-set="providers_allowing_tokenization"
+               t-value="request.env['payment.provider'].sudo()._get_compatible_providers(request.env.company.id, partner.id, 0., force_tokenization=True, is_validation=True)"/>
+            <t t-set="existing_tokens" t-value="partner.payment_token_ids + partner.commercial_partner_id.sudo().payment_token_ids"/>
+            <t t-if="providers_allowing_tokenization or existing_tokens" t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/payment/static/img/payment-methods.svg'"/>
+                <t t-set="title">Payment methods</t>
+                <t t-set="text">Manage your payment methods</t>
+                <t t-set="url" t-value="'/my/payment_method'"/>
+                <t t-set="config_card" t-value="True"/>
+            </t>
+        </div>
+    </template>
+
 </odoo>
diff --git a/addons/portal/static/src/img/portal-addresses.svg b/addons/portal/static/src/img/portal-addresses.svg
new file mode 100644
index 00000000000..ed9e4b78c4e
--- /dev/null
+++ b/addons/portal/static/src/img/portal-addresses.svg
@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.7366 3.2766C39.6798 1.50012 35.4465 1.75104 30.7766 4.44716C21.4986 9.80391 14.0014 22.7894 14.0317 33.4603C14.0619 44.1214 30.0964 58.0101 30.9403 58.9143L35.984 61.8578L47.7803 6.22019L42.7366 3.2766Z" fill="#FBDBD0"/>
+<path d="M35.8202 7.3908C26.5422 12.7475 19.045 25.733 19.0753 36.4039C19.1054 47.065 35.14 60.9538 35.984 61.8579C36.8204 59.9835 52.7133 27.6616 52.6831 17.0005C52.6655 10.8105 50.116 6.76586 46.1671 5.50602C43.3085 4.594 39.7163 5.14141 35.8202 7.3908Z" fill="white"/>
+<path d="M47.1275 25.7108C44.1739 34.1529 36.8024 41.3561 30.6627 41.7993C24.5231 42.2427 21.9404 35.7584 24.894 27.3162C27.8476 18.8742 35.2191 11.671 41.3587 11.2277C47.4984 10.7844 50.0811 17.2687 47.1275 25.7108Z" fill="#C1DBF6" stroke="#374874" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M38.3178 2.14219C39.9616 2.14219 41.4529 2.53069 42.7366 3.27668L47.7803 6.22032L47.7798 6.22256C50.796 7.97579 52.668 11.7008 52.6831 17.0005C52.7132 27.6615 36.8204 59.9836 35.984 61.8579L30.9403 58.9143C30.0964 58.0101 14.0619 44.1214 14.0317 33.4603C14.0014 22.7895 21.4986 9.80404 30.7765 4.44724C33.4855 2.88329 36.0471 2.14219 38.3178 2.14219ZM38.3179 1.22793C35.8006 1.22793 33.1095 2.04466 30.3194 3.65538C25.6949 6.32546 21.363 10.8885 18.1217 16.5039C14.8796 22.1209 13.1023 28.1437 13.1174 33.4629C13.1296 37.7625 15.5482 42.9875 20.3062 48.993C24.0297 53.6928 28.1483 57.5443 29.6988 58.9942C29.9636 59.2418 30.2136 59.4757 30.2719 59.5381C30.3326 59.6032 30.4026 59.6591 30.4795 59.7039L35.5231 62.6476C35.6644 62.73 35.8237 62.7722 35.984 62.7722C36.0782 62.7722 36.1726 62.7577 36.2641 62.7282C36.5113 62.6487 36.7131 62.4678 36.8189 62.2305C36.8929 62.0648 37.1126 61.6026 37.4167 60.9629C48.0204 38.6569 53.6156 23.4541 53.5974 16.9979C53.5819 11.569 51.6999 7.4768 48.2959 5.4653C48.2782 5.45325 48.2599 5.44164 48.2412 5.43069L43.1975 2.48706C41.7593 1.65124 40.118 1.22793 38.3179 1.22793Z" fill="#374874"/>
+</svg>
diff --git a/addons/portal/static/src/img/portal-connection.svg b/addons/portal/static/src/img/portal-connection.svg
new file mode 100644
index 00000000000..bb57b3f8409
--- /dev/null
+++ b/addons/portal/static/src/img/portal-connection.svg
@@ -0,0 +1,13 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.6091 58.1611C38.9578 58.1611 43.2937 56.3324 43.2937 54.0766C43.2937 51.8207 38.9578 49.992 33.6091 49.992C28.2605 49.992 23.9246 51.8207 23.9246 54.0766C23.9246 56.3324 28.2605 58.1611 33.6091 58.1611Z" fill="#C1DBF6"/>
+<path d="M45.7715 21.9257C44.6789 18.3486 42.3429 15.4983 39.1612 13.9006C39.0151 13.8271 38.8539 13.7887 38.6903 13.7886C38.3191 13.7866 37.9732 13.9768 37.7761 14.2914C37.5063 14.7272 37.6408 15.2992 38.0766 15.569C38.1036 15.5857 38.1315 15.601 38.1601 15.6149C40.9029 16.9589 42.9235 19.4046 43.8743 22.504C44.6369 25.0794 44.644 27.8196 43.8949 30.3989C43.1675 33.0055 41.7722 35.377 39.8469 37.2789C39.4809 37.6267 39.4662 38.2054 39.814 38.5714C39.8158 38.5733 39.8177 38.5753 39.8195 38.5772L39.8995 38.6617C40.0772 38.851 40.3256 38.9578 40.5852 38.9566C40.8282 38.958 41.0618 38.8626 41.2343 38.6914C45.7441 34.248 47.5246 27.6674 45.7715 21.9257Z" fill="#C1DBF6"/>
+<path d="M27.2754 40.7326C26.8674 40.6043 26.4674 40.4517 26.0777 40.2754C23.2046 38.9611 21.0811 36.4697 20.1028 33.2606C18.7314 28.776 19.8537 23.5783 23.0286 19.6949C23.3567 19.3111 23.3116 18.7339 22.9278 18.4058C22.8655 18.3526 22.7964 18.308 22.7223 18.2731C22.5729 18.1996 22.4087 18.1613 22.2423 18.1611C21.9152 18.1599 21.6054 18.308 21.4011 18.5634C17.8903 22.9406 16.6674 28.7943 18.2011 33.8389C19.344 37.5966 21.8583 40.5223 25.2457 42.0674C25.747 42.2958 26.2623 42.492 26.7886 42.6549C26.8774 42.6822 26.9699 42.6961 27.0628 42.696C27.4779 42.6944 27.8424 42.4201 27.9588 42.0217C28.1199 41.4776 27.8162 40.9046 27.2754 40.7326Z" fill="#C1DBF6"/>
+<path d="M53.3463 18.392C51.6549 12.856 48.0252 8.44458 43.1223 5.97372C42.9463 5.8857 42.7523 5.83955 42.5555 5.83887C42.113 5.84104 41.7024 6.06961 41.4675 6.44458C41.1546 6.94275 41.3048 7.60022 41.803 7.91308C41.8356 7.93359 41.8694 7.95231 41.904 7.96915C46.3178 10.136 49.5886 14.0812 51.1132 19.0732C52.3395 23.2079 52.3522 27.6079 51.1498 31.7497C49.9818 35.9289 47.7426 39.7305 44.6538 42.7783C44.2364 43.1841 44.2221 43.8498 44.6218 44.2732L44.7475 44.408C44.9516 44.6231 45.2349 44.7453 45.5315 44.7463C45.8122 44.7479 46.0819 44.6377 46.2812 44.44C49.6643 41.1012 52.1177 36.9374 53.3989 32.36C54.7178 27.6469 54.7041 22.8194 53.3463 18.392Z" fill="#C1DBF6"/>
+<path d="M24.4411 48.3188C23.7823 48.1091 23.1366 47.8603 22.5074 47.5737C17.872 45.4525 14.448 41.4365 12.8754 36.2663C10.6766 29.0685 12.4731 20.7234 17.5657 14.5017C17.9416 14.0475 17.8782 13.3747 17.424 12.9988C17.3608 12.9465 17.2918 12.9016 17.2183 12.8651C17.037 12.7755 16.8377 12.7286 16.6354 12.728C16.2393 12.7268 15.8641 12.906 15.616 13.2148C10.1486 20.0171 8.24686 29.112 10.64 36.9474C12.4183 42.7645 16.288 47.2903 21.5383 49.6925C22.3124 50.0484 23.1088 50.3538 23.9223 50.6068C24.0244 50.6387 24.1307 50.6549 24.2377 50.6548C24.7161 50.6529 25.1363 50.3368 25.2709 49.8777C25.4699 49.2183 25.0993 48.522 24.4411 48.3188Z" fill="#C1DBF6"/>
+<path d="M32.6058 52.7509C32.6058 52.5589 33.0972 32.1269 33.1498 30.0103H32.5326C32.5326 30.0103 31.9863 52.728 31.9863 52.9315C31.9863 53.3086 32.7109 53.6172 33.6023 53.6172C34.0131 53.6255 34.4212 53.5476 34.8 53.3886C34.6066 53.4205 34.4109 53.4365 34.2149 53.4366C33.3303 53.4343 32.6058 53.128 32.6058 52.7509Z" fill="#C1DBF6"/>
+<path d="M35.2251 52.9315C35.2251 52.728 34.6789 30.0103 34.6789 30.0103H33.1497C33.0971 32.1269 32.6057 52.5589 32.6057 52.7509C32.6057 53.128 33.3303 53.4366 34.2217 53.4366C34.4216 53.4371 34.6211 53.4211 34.8183 53.3886C35.0651 53.2652 35.2251 53.1075 35.2251 52.9315Z" fill="white"/>
+<path d="M34.6789 30.0103C34.6789 30.0103 35.2252 52.728 35.2252 52.9314C35.2252 53.1074 35.0652 53.2652 34.8183 53.3886C34.8091 53.3901 34.7998 53.3905 34.7906 53.392C34.4325 53.5408 34.0488 53.6177 33.6613 53.6177C33.6417 53.6177 33.622 53.6175 33.6023 53.6171C32.7109 53.6171 31.9863 53.3086 31.9863 52.9314C31.9863 52.728 32.5326 30.0103 32.5326 30.0103H34.6789ZM35.5715 29.096H31.64L31.6186 29.9883C31.5273 33.7837 31.072 52.7273 31.072 52.9314C31.072 53.8716 32.1082 54.5288 33.5932 54.5314C33.6159 54.5318 33.6386 54.5321 33.6613 54.5321C34.1317 54.5321 34.5921 54.4473 35.0313 54.2801L35.1035 54.2682L35.2272 54.2064C36.0209 53.8095 36.1394 53.2372 36.1394 52.9315C36.1394 52.7274 35.6842 33.7838 35.5929 29.9883L35.5715 29.096Z" fill="#374874"/>
+<path d="M33.6023 21.4343C36.4853 21.4353 38.8222 23.7722 38.8232 26.6553C38.8243 29.5398 36.4868 31.879 33.6023 31.88C33.2678 31.8795 32.9341 31.8474 32.6057 31.784C30.5122 31.3794 28.8752 29.7424 28.4706 27.649C27.9235 24.8181 29.7749 22.0797 32.6057 21.5326C32.9339 21.4673 33.2677 21.4344 33.6023 21.4343ZM33.6026 20.52H33.602C33.2085 20.5201 32.8133 20.5591 32.4273 20.6359C29.1109 21.2768 26.931 24.5012 27.573 27.8225C28.0511 30.2962 29.9584 32.2036 32.4322 32.6817C32.8166 32.7559 33.2097 32.7938 33.6009 32.7943C36.9866 32.7931 39.7387 30.039 39.7375 26.655C39.7363 23.2734 36.9842 20.5213 33.6026 20.52Z" fill="#374874"/>
+<path d="M33.6137 31.9221C36.5214 31.9221 38.8786 29.565 38.8786 26.6572C38.8786 23.7495 36.5214 21.3923 33.6137 21.3923C30.7059 21.3923 28.3488 23.7495 28.3488 26.6572C28.3488 29.565 30.7059 31.9221 33.6137 31.9221Z" fill="white"/>
+<path d="M33.6023 21.4343C33.2677 21.4344 32.9339 21.4673 32.6057 21.5326C35.4366 22.0797 37.2879 24.8181 36.7408 27.6489C36.3361 29.7424 34.6991 31.3794 32.6057 31.784C32.9341 31.8474 33.2678 31.8795 33.6023 31.88C36.4868 31.879 38.8243 29.5398 38.8233 26.6552C38.8222 23.7722 36.4853 21.4353 33.6023 21.4343Z" fill="#FBDBD0"/>
+</svg>
diff --git a/addons/portal/static/src/js/portal.js b/addons/portal/static/src/js/portal.js
index bec36fb9bd3..eabc7783bcb 100644
--- a/addons/portal/static/src/js/portal.js
+++ b/addons/portal/static/src/js/portal.js
@@ -99,7 +99,7 @@ export const PortalHomeCounters = publicWidget.Widget.extend({
                 documentsCounterEl.textContent = documentsCountersData[counterName];
                 // The element is hidden by default, only show it if its counter is > 0 or if it's in the list of counters always shown
                 if (documentsCountersData[counterName] !== 0 || countersAlwaysDisplayed.includes(counterName)) {
-                    documentsCounterEl.parentElement.classList.remove('d-none');
+                    documentsCounterEl.closest('.o_portal_index_card').classList.remove('d-none');
                 }
             });
             return documentsCountersData;
diff --git a/addons/portal/static/src/scss/bootstrap_overridden.scss b/addons/portal/static/src/scss/bootstrap_overridden.scss
index 58fd9f65fb0..890cc922c64 100644
--- a/addons/portal/static/src/scss/bootstrap_overridden.scss
+++ b/addons/portal/static/src/scss/bootstrap_overridden.scss
@@ -14,6 +14,8 @@ $gray-900: #212529 !default;
 
 $gray-300: #dee2e6 !default;
 
+$light: #eeeeee !default;
+
 // Body
 //
 // Settings for the `<body>` element.
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 244536fca5d..4d4c5695616 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -13,10 +13,10 @@ $o-portal-mobile-toolbar-border: $border-color;
 $o-portal-mobile-toolbar-bg: $gray-200;
 
 // Portal Tables
-$o-portal-table-th-pt: map-get($spacers, 2) !default; // bts4 pt-2
-$o-portal-table-th-pb: map-get($spacers, 2) !default; // bts4 pb-2
-$o-portal-table-td-pt: map-get($spacers, 1) !default; // bts4 pt-1
-$o-portal-table-td-pb: map-get($spacers, 1) !default; // bts4 pb-1
+$o-portal-table-th-pt: map-get($spacers, 1) !default;
+$o-portal-table-th-pb: map-get($spacers, 1) !default;
+$o-portal-table-td-pt: map-get($spacers, 2) !default;
+$o-portal-table-td-pb: map-get($spacers, 2) !default;
 
 // Portal custom bg color
 $o-portal-bg-color: desaturate($gray-200, 100%);
@@ -241,15 +241,6 @@ img, .media_iframe_video, .o_image {
     background-color: #149F2C;
 }
 
-// Portal specific
-// ===  Page custom bg ===
-// To be applied to all portal pages if bg-color is white (default).
-@if ($o-portal-use-default-colors) {
-    #wrapwrap.o_portal {
-        @include o-bg-color($o-portal-bg-color, $with-extras: false);
-    }
-}
-
 .o_portal {
     .breadcrumb {
         @extend %o-portal-breadcrumbs;
@@ -271,10 +262,6 @@ img, .media_iframe_video, .o_image {
             padding-right: 0;
             @extend %o-portal-breadcrumbs;
         }
-
-        @if ($o-portal-use-default-colors) {
-            background-color: white!important;
-        }
     }
 
     .o_portal_my_doc_table {
@@ -291,10 +278,6 @@ img, .media_iframe_video, .o_image {
 
         }
 
-        tr:last-child td {
-            padding-bottom: $o-portal-table-td-pb * 1.5;
-        }
-
         td, th {
             vertical-align: middle;
             white-space: nowrap;
@@ -341,20 +324,13 @@ img, .media_iframe_video, .o_image {
         }
 
         .fa {
-            @include o-position-absolute(0, $left: 0);
             line-height: $line-height-base;
+            color: $o-gray-500;
 
-            + span, + div, + a {
+            + span, + div {
                 display: block;
-                // FontAwesome '.fa-fw' fixed-with + margin
-                padding-left: 1.28571429em + 0.5em;
             }
         }
-
-        span[itemprop="email"] {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
     }
 }
 
@@ -364,32 +340,7 @@ img, .media_iframe_video, .o_image {
     background-repeat: no-repeat;
 }
 
-.o_portal_contact_img {
-    width: 2.3em;
-    height: 2.3em;
-    object-fit: cover;
-}
-
 .o_portal_sidebar {
-    #sidebar_content.card {
-        border-left: 0;
-        border-bottom: 0;
-
-        > div.card-body {
-            border-left: $border-width solid $border-color;
-        }
-
-        > ul > li {
-            border-left: $border-width solid $border-color;
-            margin-bottom: -1px;
-        }
-
-        > div.card-footer {
-            border-left: $border-width solid $border-color;
-            border-bottom: $border-width solid $border-color;
-        }
-    }
-
     .o_portal_html_view {
         overflow: hidden;
         background: white;
@@ -413,10 +364,8 @@ img, .media_iframe_video, .o_image {
 .o_portal_chatter {
     padding: 10px;
 
-    .o_portal_chatter_avatar {
-        width: 45px;
-        height: 45px;
-        margin-right: 1rem;
+    .o_portal_chatter_avatar{
+        --Avatar-size: 45px;
     }
 
     .o_portal_chatter_header {
@@ -473,25 +422,24 @@ img, .media_iframe_video, .o_image {
     }
 
     .o_portal_message_internal_off {
-        .btn-danger {
+        .o_portal_chatter_visibility_on {
             display: none;
         }
     }
 
     .o_portal_message_internal_on {
-        .btn-success {
+        .o_portal_chatter_visibility_off {
             display: none;
         }
     }
 }
 
 .o_portal_security_body {
-    margin-right: auto;
-    margin-left: auto;
-
-    max-width: map-get($container-max-widths, sm);
     section {
-        margin-top: map-get($spacers, 4);
+        margin-top: map-get($spacers, 5);
+        border-top: $border-width solid $border-color;
+        padding-top: map-get($spacers, 4);
+
         form.oe_reset_password_form {
             max-width: initial;
             margin: initial;
diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml
index 2d558ab50cf..e27c10f324e 100644
--- a/addons/portal/static/src/xml/portal_chatter.xml
+++ b/addons/portal/static/src/xml/portal_chatter.xml
@@ -32,20 +32,24 @@
                     Oops! Something went wrong. Try to reload the page and log in.
                 </div>
                 <div class="d-flex">
-                    <img alt="Avatar" class="o_portal_chatter_avatar o_object_fit_cover align-self-start" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/avatar_128"
+                    <img alt="Avatar" class="o_avatar o_portal_chatter_avatar align-self-start me-3 rounded" t-attf-src="/web/image/res.partner/#{widget.options['partner_id']}/avatar_128"
                          t-if="!widget.options['is_user_public'] or !widget.options['token']"/>
                     <div class="flex-grow-1">
                         <div class="o_portal_chatter_composer_input">
-                            <div class="o_portal_chatter_composer_body mb32">
-                                <textarea rows="4" name="message" class="form-control" placeholder="Write a message..."></textarea>
-                                <div class="o_portal_chatter_attachments mt-3"/>
-                                <div class="mt8">
-                                    <button t-attf-data-action="/mail/chatter_post" class="o_portal_chatter_composer_btn btn btn-primary" type="submit">Send</button>
-                                    <button class="o_portal_chatter_attachment_btn btn btn-secondary" type="button" title="Add attachment">
-                                        <i class="fa fa-paperclip"/>
-                                    </button>
+                            <div class="o_portal_chatter_composer_body d-flex flex-nowrap align-items-start flex-grow-1 mb-4">
+                                <div class="d-flex flex-column flex-grow-1 border rounded-3">
+                                    <div class="position-relative flex-grow-1">
+                                        <textarea rows="4" name="message" class="form-control border-0 rounded-3 shadow-none" placeholder="Write a message..." style="resize:none;"/>
+                                    </div>
+                                    <div class="d-flex flex-row align-self-end p-2">
+                                        <div class="d-flex px-1">
+                                            <button class="o_portal_chatter_attachment_btn btn fa fa-paperclip border-0" type="button" title="Add attachment"/>
+                                        </div>
+                                        <button t-attf-data-action="/mail/chatter_post" class="o_portal_chatter_composer_btn btn btn-primary o-last rounded-3" type="submit">Send</button>
+                                    </div>
                                 </div>
                             </div>
+                            <div class="o_portal_chatter_attachments mt-3"/>
                         </div>
                         <div class="d-none">
                             <input type="file" class="o_portal_chatter_file_input" multiple="multiple"/>
@@ -57,15 +61,15 @@
     </t>
 
     <t t-name="portal.Chatter.Attachments">
-        <div t-if="attachments.length" class="row">
-            <div t-foreach="attachments" t-as="attachment" t-key="attachment_index" class="col-lg-2 col-md-3 col-sm-6">
-                <div class="o_portal_chatter_attachment mb-2 position-relative text-center" t-att-data-id="attachment.id">
+        <div t-if="attachments.length" class="d-flex flex-grow-1 flex-wrap gap-1">
+            <div t-foreach="attachments" t-as="attachment" t-key="attachment_index" class="bg-light p-2 rounded">
+                <div class="o_portal_chatter_attachment position-relative text-center" t-att-data-id="attachment.id">
                     <button t-if="showDelete and attachment.state == 'pending'" class="o_portal_chatter_attachment_delete btn btn-sm btn-outline-danger" title="Delete">
                         <i class="fa fa-times"/>
                     </button>
-                    <a t-attf-href="/web/content/#{attachment.id}?download=true&amp;access_token=#{attachment.access_token}" target="_blank">
+                    <a t-attf-href="/web/content/#{attachment.id}?download=true&amp;access_token=#{attachment.access_token}" target="_blank" class="d-flex flex-row">
                         <div class='oe_attachment_embedded o_image' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype"/>
-                        <div class='o_portal_chatter_attachment_name'><t t-esc='attachment.name'/></div>
+                        <div class='o_portal_chatter_attachment_name align-self-center'><t t-esc='attachment.name'/></div>
                     </a>
                 </div>
             </div>
@@ -79,8 +83,8 @@
     <t t-name="portal.chatter_messages">
         <div class="o_portal_chatter_messages">
             <t t-foreach="widget.get('messages') || []" t-as="message" t-key="message_index">
-                <div class="d-flex o_portal_chatter_message" t-att-id="'message-' + message.id">
-                    <img class="o_portal_chatter_avatar" t-att-src="message.author_avatar_url" alt="avatar"/>
+                <div class="d-flex o_portal_chatter_message mb-4" t-att-id="'message-' + message.id">
+                    <img class="o_avatar o_portal_chatter_avatar rounded me-3" t-att-src="message.author_avatar_url" alt="avatar"/>
                     <div class="flex-grow-1">
                         <t t-call="portal.chatter_internal_toggle" t-if="widget.options['is_user_employee']"/>
 
@@ -104,15 +108,19 @@
     <!-- Chatter: internal toggle widget -->
     <t t-name="portal.chatter_internal_toggle">
         <div t-if="message.is_message_subtype_note" class="float-end">
-            <button class="btn btn-secondary" title="Internal notes are only displayed to internal users." disabled="true">Internal Note</button>
+            <span class="badge rounded-pill px-3 py-2 text-bg-light" title="Internal notes are only displayed to internal users.">Internal Note</span>
         </div>
-        <div t-else="" t-attf-class="float-end o_portal_chatter_js_is_internal #{message.is_internal and 'o_portal_message_internal_on' or 'o_portal_message_internal_off'}"
+        <div t-else="" t-attf-class="float-end o_portal_chatter_js_is_internal d-flex #{message.is_internal and 'o_portal_message_internal_on' or 'o_portal_message_internal_off'}"
                 t-att-data-message-id="message.id"
                 t-att-data-is-internal="message.is_internal">
-            <button class="btn btn-danger"
-                title="Currently restricted to internal employees, click to make it available to everyone viewing this document.">Employees Only</button>
-            <button class="btn btn-success"
-                title="Currently available to everyone viewing this document, click to restrict to internal employees.">Visible</button>
+            <div class="form-check form-switch o_portal_chatter_visibility_on" title="Currently restricted to internal employees, click to make it available to everyone viewing this document.">
+                <input class="form-check-input" type="checkbox" role="switch"/>
+                <label class="form-check-label small">Public</label>
+            </div>
+            <div class="form-check form-switch o_portal_chatter_visibility_off" title="Currently available to everyone viewing this document, click to restrict to internal employees.">
+                <input class="form-check-input" type="checkbox" role="switch" checked="true"/>
+                <label class="form-check-label small">Public</label>
+            </div>
         </div>
     </t>
 
@@ -140,13 +148,11 @@
         <t t-set="two_columns" t-value="widget.options['two_columns']"/>
         <div t-attf-class="o_portal_chatter p-0 #{two_columns and 'row' or ''}">
             <div t-attf-class="#{two_columns and 'col-lg-5' or ''}">
-                <div class="o_portal_chatter_header">
+                <div class="o_portal_chatter_header pb-2 text-muted">
                     <t t-call="portal.chatter_message_count"/>
                 </div>
-                <hr t-if="widget.options['allow_composer']"/>
                 <div class="o_portal_chatter_composer"/>
             </div>
-            <hr t-if="!two_columns"/>
             <div t-attf-class="#{two_columns and 'offset-lg-1 col-lg-6' or ''}">
                 <t t-call="portal.chatter_messages"/>
                 <div class="o_portal_chatter_footer">
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 7538f35a18d..5fa045c322a 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -29,8 +29,8 @@
             </t>
         </xpath>
         <xpath expr="//div[@id='wrapwrap']/main/t[@t-out='0']" position="before">
-            <div t-if="o_portal_fullwidth_alert" class="alert alert-info alert-dismissible rounded-0 fade show d-print-none css_editable_mode_hidden">
-                <div class="container">
+            <div t-if="o_portal_fullwidth_alert" class="container mt-3">
+                <div class="alert alert-info alert-dismissible fade show d-print-none css_editable_mode_hidden">
                     <t t-out="o_portal_fullwidth_alert"/>
                 </div>
             </div>
@@ -137,7 +137,7 @@
     </template>
 
     <template id="portal_breadcrumbs" name="Portal Breadcrumbs">
-        <ol t-if="page_name != 'home'" class="o_portal_submenu breadcrumb mb-0 py-2 flex-grow-1">
+        <ol t-if="page_name != 'home'" class="o_portal_submenu breadcrumb mb-0 flex-grow-1 px-0">
             <li class="breadcrumb-item ms-1"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
             <li t-if="page_name == 'my_details'" class="breadcrumb-item">Details</li>
         </ol>
@@ -147,7 +147,7 @@
         <div t-ignore="true" class="text-center">
             <t t-if="custom_html" t-out="custom_html"/>
             <t t-else="">This is a preview of the customer portal.</t>
-            <a t-att-href="backend_url"><i class="oi oi-arrow-right me-1"/>Back to edit mode</a>
+            <a t-att-href="backend_url" class="alert-link"><i class="oi oi-arrow-right me-1"/>Back to edit mode</a>
         </div>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </template>
@@ -157,36 +157,34 @@
             <t t-set="is_portal" t-value="True"/>
 
             <div t-if="not no_breadcrumbs and not my_details and not breadcrumbs_searchbar" class="o_portal container mt-3">
-                <div class="row align-items-center bg-white g-0 border rounded">
-                    <div class="col-10">
-                        <t t-call="portal.portal_breadcrumbs"></t>
-                    </div>
-                    <div t-if="prev_record or next_record" class="col-2 flex-grow-0 text-center">
-                        <t t-call='portal.record_pager'/>
-                    </div>
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <t t-call="portal.portal_breadcrumbs"/>
+                    <t t-if="prev_record or next_record" t-call='portal.record_pager'/>
                 </div>
             </div>
             <div id="wrap" class='o_portal_wrap'>
-                <div class="container mb64">
+                <div class="container pt-3 pb-5">
                     <t t-if="my_details">
-                        <div class="row justify-content-between mt-4">
-                            <div t-attf-class="col-12 col-md col-lg-6">
+                        <div class="wrapper col-12 d-flex flex-wrap justify-content-between align-items-center">
+                            <h3 class="my-3">My account</h3>
+                            <button class="btn py-0 d-flex align-items-center gap-2 d-lg-none ms-auto"
+                            data-bs-toggle="offcanvas"
+                            data-bs-target="#accountOffCanvas">
+                                <img class="o_avatar rounded"
+                                t-att-src="image_data_uri(user_id.partner_id.avatar_1024)" alt="Contact"/>
+                            </button>
+                        </div>
+                        <div class="row justify-content-between">
+                            <div t-attf-class="o_portal_content col-12 col-lg-8">
                                 <t t-out="0"/>
                             </div>
-                            <div id="o_my_sidebar" class="pt-3 pt-lg-0 col-12 col-md col-lg-4 col-xl-3 o_my_sidebar">
-                                <div class="o_my_contact" t-if="sales_user">
-                                    <t t-call="portal.portal_contact"/>
-                                </div>
-                                <div class="o_portal_my_details">
-                                    <h4>Details <a role="button" href="/my/account" class="btn btn-sm btn-link"><i class="fa fa-pencil"/> Edit</a></h4>
-                                    <hr class="mt-1 mb-0"/>
-                                    <div t-field="user_id.partner_id" t-options='{"widget": "contact", "fields": ["email", "phone", "address", "name"]}'/>
-                                </div>
-                                <div class="o_portal_my_security mt-3">
-                                    <h4>Account Security </h4>
-                                    <hr class="mt-1 mb-1"/>
-                                    <a href="/my/security"><i class="fa fa-pencil mx-1"/>Edit Security Settings</a>
-                                </div>
+                            <div class="d-none d-lg-flex justify-content-end col-lg-4">
+                                <t t-call="portal.side_content"/>
+                            </div>
+                            <div class="offcanvas offcanvas-start d-lg-none" id="accountOffCanvas">
+                                <t t-call="portal.side_content">
+                                    <t t-set="isOffcanvas" t-value="true"/>
+                                </t>
                             </div>
                         </div>
                     </t>
@@ -222,10 +220,29 @@
             <t t-set="my_details" t-value="True"/>
             <div class="o_portal_my_home">
                 <div class="oe_structure" id="oe_structure_portal_my_home_1"/>
-                <h3>Documents</h3>
-                <div class="o_portal_docs list-group">
+                <div class="o_portal_docs row g-2">
                     <div class="o_portal_doc_spinner spinner-border text-o-color-2 align-self-center mt-5"/>
                     <p class="o_portal_no_doc_message d-none">No Documents to display</p>
+                    <div t-if="portal_alert_category_enable" class="o_portal_category row g-2 mt-3" id="portal_alert_category"/>
+                    <div t-if="portal_client_category_enable" class="o_portal_category row g-2 mt-3" id="portal_client_category"/>
+                    <div t-if="portal_service_category_enable" class="o_portal_category row g-2 mt-3" id="portal_service_category"/>
+                    <div t-if="portal_vendor_category_enable" class="o_portal_category row g-2 mt-3" id="portal_vendor_category"/>
+                    <div class="o_portal_category row g-2 mt-3" id="portal_common_category">
+                        <t t-call="portal.portal_docs_entry">
+                            <t t-set="icon" t-value="'/portal/static/src/img/portal-addresses.svg'"/>
+                            <t t-set="title">Addresses</t>
+                            <t t-set="text">Add, remove or modify your addresses</t>
+                            <t t-set="url" t-value="'/my/account'"/>
+                            <t t-set="config_card" t-value="True"/>
+                        </t>
+                        <t t-call="portal.portal_docs_entry">
+                            <t t-set="icon" t-value="'/portal/static/src/img/portal-connection.svg'"/>
+                            <t t-set="title">Connection &amp; Security</t>
+                            <t t-set="text">Configure your connection parameters</t>
+                            <t t-set="url" t-value="'/my/security'"/>
+                            <t t-set="config_card" t-value="True"/>
+                        </t>
+                    </div>
                 </div>
             </div>
             <div class="oe_structure" id="oe_structure_portal_my_home_2"/>
@@ -233,38 +250,44 @@
     </template>
 
     <template id="portal_docs_entry" name="My Portal Docs Entry">
-        <a t-att-href="url" t-att-title="title" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between d-none">
-            <t t-esc="title"/>
-            <t t-if='count'>
-                <span class="badge text-bg-secondary rounded-pill" t-esc="count"/>
-            </t>
-            <t t-elif="placeholder_count">
-                <span class="badge text-bg-secondary rounded-pill" t-att-data-placeholder_count="placeholder_count">
-                    <i class="fa fa-spin fa-circle-o-notch"></i>
-                </span>
-            </t>
-        </a>
+        <div t-att-class="'o_portal_index_card ' +  ('' if config_card else 'd-none ') + ('col-12 order-0' if show_count else 'col-md-6 order-2')">
+            <a t-att-href="url" t-att-title="title" t-attf-class="d-flex justify-content-start gap-2 gap-md-3 align-items-center py-3 pe-2 px-md-3 h-100 rounded text-decoration-none text-reset #{bg_color if bg_color else 'text-bg-light'}">
+                <div t-if="icon" class="o_portal_icon align-self-start">
+                    <img t-attf-src="#{icon}"/>
+                </div>
+                <div>
+                    <h5 t-attf-class="mt-0 mb-1 #{'d-flex gap-2' if placeholder_count or count else ''}">
+                        <t t-out="count"/>
+                        <span t-if="placeholder_count" t-att-class="'' if show_count else 'd-none'" t-att-data-placeholder_count="placeholder_count"/>
+                        <span t-out="title"/>
+                    </h5>
+                    <p class="m-0 text-600">
+                        <t t-out="text"/>
+                    </p>
+                </div>
+            </a>
+        </div>
     </template>
 
     <template id="portal_table" name="My Portal Table">
-        <div t-attf-class="table-responsive border rounded border-top-0 #{classes if classes else ''}">
-            <table class="table rounded mb-0 bg-white o_portal_my_doc_table">
+        <div t-attf-class="table-responsive border-0 #{classes if classes else ''}">
+            <table class="o_list_table position-relative table table-sm o_list_table_ungrouped table-striped o_portal_my_doc_table mb-0">
                 <t t-out="0"/>
             </table>
         </div>
-        <div t-if="pager" class="o_portal_pager d-flex justify-content-center">
+        <div t-if="pager" class="o_portal_pager d-flex justify-content-center mt-3">
             <t t-call="portal.pager"/>
         </div>
     </template>
 
     <template id="portal_record_sidebar" name="My Portal Record Sidebar">
         <div t-attf-class="#{classes}">
-            <div class="card bg-white mb-4 sticky-top" id="sidebar_content">
-                <div t-if="title" class="card-body text-center pb-2 pt-3">
+            <div class="o_portal_sidebar_content sticky-lg-top d-lg-inline-block mb-4 mb-lg-0 p-3 p-lg-0" id="sidebar_content">
+                <div t-if="title" class="position-relative d-flex align-items-center justify-content-md-center justify-content-lg-between flex-wrap gap-2">
                     <t t-out="title"/>
                 </div>
                 <t t-if="entries" t-out="entries"/>
-                <div class="card-footer small text-center text-muted border-top-0 pt-1 pb-1 d-none d-lg-block">
+                <div class="d-none d-lg-block mt-5 small text-center text-muted">
                     Powered by <a target="_blank" href="http://www.odoo.com?utm_source=db&amp;utm_medium=portal" title="odoo"><img src="/web/static/img/logo.png" alt="Odoo Logo" height="15"/></a>
                 </div>
             </div>
@@ -293,7 +316,7 @@
         :param classes : navbar classes
     -->
     <template id="portal_searchbar" name="Portal Search Bar">
-        <nav t-attf-class="navbar navbar-light navbar-expand-lg border py-0 mb-2 o_portal_navbar {{classes if classes else ''}} {{'mt-3 rounded' if breadcrumbs_searchbar else 'border-top-0' }}">
+        <nav t-attf-class="navbar navbar-expand-lg flex-wrap mb-4 p-0 o_portal_navbar {{classes if classes else ''}}">
             <!--  Navbar breadcrumb or title  -->
             <t t-if="breadcrumbs_searchbar">
                 <t t-call="portal.portal_breadcrumbs"/>
@@ -302,19 +325,19 @@
 
             <!--  Collapse button -->
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#o_portal_navbar_content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle filters">
-                <span class="navbar-toggler-icon small"/>
+                <span class="fa fa-fw fa-bars"/>
             </button>
 
             <!--  Collapsable content  -->
-            <div class="collapse navbar-collapse" id="o_portal_navbar_content">
-                <div class="nav flex-column flex-lg-row ms-auto p-0 mb-3 mb-lg-0 mt-1 mt-lg-0">
+            <div class="collapse navbar-collapse flex-wrap-reverse justify-content-end gap-3" id="o_portal_navbar_content">
+                <div class="nav flex-column flex-sm-row gap-2 ms-auto p-0 mb-3 mb-lg-0 mt-1 mt-lg-0">
                     <div t-if="searchbar_sortings">
                         <span class="small me-1 navbar-text">Sort By:</span>
                         <div class="btn-group">
-                            <button id="portal_searchbar_sortby" data-bs-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                            <button id="portal_searchbar_sortby" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle">
                                 <t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
                             </button>
-                            <div class="dropdown-menu" aria-labelledby="portal_searchbar_sortby">
+                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="portal_searchbar_sortby">
                                 <t t-foreach="searchbar_sortings" t-as="option">
                                     <a t-att-href="request.httprequest.path + '?' + keep_query('*', sortby=option)"
                                        t-attf-class="dropdown-item#{sortby == option and ' active' or ''}">
@@ -327,10 +350,10 @@
                     <div t-if="searchbar_filters" class="ms-lg-2">
                         <span class="small me-1 navbar-text">Filter By:</span>
                         <div class="btn-group">
-                            <button id="portal_searchbar_filters" data-bs-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                            <button id="portal_searchbar_filters" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle">
                                 <t t-esc="searchbar_filters.get(filterby,searchbar_filters.get('all')).get('label', 'All')"/>
                             </button>
-                            <div class="dropdown-menu" aria-labelledby="portal_searchbar_filters">
+                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="portal_searchbar_filters">
                                 <t t-foreach="searchbar_filters" t-as="option">
                                     <a t-att-href="default_url + '?' + keep_query('*', filterby=option)"
                                        t-attf-class="dropdown-item#{filterby == option and ' active' or ''}">
@@ -343,10 +366,10 @@
                     <div t-if="searchbar_groupby" class="ms-lg-2">
                         <span class="small me-1 navbar-text">Group By:</span>
                         <div class="btn-group">
-                            <button id="portal_searchbar_groupby" data-bs-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
+                            <button id="portal_searchbar_groupby" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle">
                                 <t t-esc="searchbar_groupby[groupby].get('label', 'None')"/>
                             </button>
-                            <div class="dropdown-menu" aria-labelledby="portal_searchbar_groupby">
+                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="portal_searchbar_groupby">
                                 <t t-foreach="searchbar_groupby" t-as="option">
                                     <a t-att-href="default_url + '?' + keep_query('*', groupby=option)"
                                        t-attf-class="dropdown-item#{groupby == option and ' active' or ''}">
@@ -358,10 +381,10 @@
                     </div>
                     <t t-out="0"/>
                 </div>
-                <form t-if="searchbar_inputs" class="o_portal_search_panel ms-lg-4 col-xl-4 col-md-5">
-                    <div class="input-group input-group-sm w-100">
-                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"/>
-                        <div class="dropdown-menu" role="menu">
+                <form t-if="searchbar_inputs" class="o_portal_search_panel col-md-5 col-xl-4 ms-lg-2">
+                    <div class="input-group w-100">
+                        <button type="button" class="btn btn-secondary border-end dropdown-toggle" data-bs-toggle="dropdown"/>
+                        <div class="dropdown-menu dropdown-menu-end" role="menu">
                             <t t-foreach='searchbar_inputs' t-as='input'>
                                 <a t-att-href="'#' + input_value['input']"
                                     t-attf-class="dropdown-item#{search_in == input_value['input'] and ' active' or ''}">
@@ -369,9 +392,9 @@
                                 </a>
                             </t>
                         </div>
-                        <input type="text" class="form-control form-control-sm" placeholder="Search" t-att-value='search' name="search"/>
+                        <input type="text" class="form-control" placeholder="Search" t-att-value='search' name="search"/>
                         <button class="btn btn-secondary o_wait_lazy_js" type="submit">
-                            <span class="fa fa-search"/>
+                            <span class="oi oi-search"/>
                         </button>
                     </div>
                 </form>
@@ -380,7 +403,7 @@
     </template>
 
     <template id="portal_record_layout" name="Portal single record layout">
-        <div t-attf-class="card mt-0 border-top-0 rounded-0 rounded-bottom #{classes if classes else ''}">
+        <div t-attf-class="card mt-0 rounded #{classes if classes else ''}">
             <div t-if="card_header" t-attf-class="card-header #{header_classes if header_classes else ''}">
                 <t t-out="card_header"/>
             </div>
@@ -500,10 +523,12 @@
                             <t t-call="portal.portal_my_details_fields"/>
                             <input type="hidden" name="redirect" t-att-value="redirect"/>
                         </div>
-                        <div class="clearfix">
-                            <button type="submit" class="btn btn-primary float-end mb32 ">
-                                Confirm
-                                <span class="fa fa-long-arrow-right" />
+                        <div class="clearfix text-end mb-5">
+                            <a href="/my/" class="btn btn-secondary me-2">
+                                Discard
+                            </a>
+                            <button type="submit" class="btn btn-primary float-end">
+                                Save
                             </button>
                         </div>
                     </div>
@@ -513,14 +538,18 @@
     </template>
 
     <template id="portal_my_security">
-        <t t-call="portal.portal_layout"><div class="o_portal_security_body">
+        <t t-call="portal.portal_layout"><div class="o_portal_security_body w-md-75 w-lg-50 pb-5">
             <t t-set="additional_title">Security</t>
             <t t-set="no_breadcrumbs" t-value="1"/>
             <div class="alert alert-danger" role="alert" t-if="get_error(errors)">
                 <t t-esc="errors"/>
             </div>
+            <div class="d-flex gap-2 my-3">
+                <a href="/my/" title="Go Back" class="btn btn-light px-2"><i class="oi oi-chevron-left"/></a>
+                <h3 class="my-0">Connection &amp; Security</h3>
+            </div>
             <section name="portal_change_password">
-                <h3>Change Password</h3>
+                <h4>Change Password</h4>
                 <t t-set="path">password</t>
                 <div class="alert alert-success" role="alert" t-if="success and success.get('password')">
                     Password Updated!
@@ -562,19 +591,19 @@
                 </form>
             </section>
             <section name="portal_revoke_all_devices_popup">
-            <h3>Revoke All Sessions</h3>
+            <h4>Revoke All Sessions</h4>
                 <t t-set="path"/>
                     <button type="button" class="btn btn-secondary" id="portal_revoke_all_sessions_popup">
                         Log out from all devices
                     </button>
             </section>
             <section t-if="debug and allow_api_keys">
-                <h3>
+                <h4>
                 Developer API Keys
                     <a href="https://www.odoo.com/documentation/master/developer/misc/api/external_api.html#api-keys" target="_blank">
                         <i title="Documentation" class="fa fa-fw o_button_icon fa-info-circle"></i>
                     </a>
-                </h3>
+                </h4>
                 <div>
                     <table class="table o_main_table">
                         <thead>
@@ -604,7 +633,7 @@
                 </div>
             </section>
             <section name="portal_deactivate_account" groups="base.group_portal">
-                <h3>Delete Account</h3>
+                <h4>Delete Account</h4>
                 <t t-set="deactivate_error" t-value="get_error(errors, 'deactivate')"/>
                 <button class="btn btn-secondary" data-bs-toggle="modal"
                     data-bs-target="#portal_deactivate_account_modal">
@@ -674,8 +703,8 @@
     <template id="record_pager" name="Portal Record Pager">
         <t t-if='prev_record or next_record'>
             <div class="record_pager btn-group" role="group">
-                <a role="button" t-att-class="'btn btn-link %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="oi oi-chevron-left" role="img" aria-label="Previous" title="Previous"></i></a>
-                <a role="button" t-att-class="'btn btn-link %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="oi oi-chevron-right" role="img" aria-label="Next" title="Next"></i></a>
+                <a role="button" t-att-class="'btn btn-light %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="oi oi-chevron-left" role="img" aria-label="Previous" title="Previous"></i></a>
+                <a role="button" t-att-class="'btn btn-light %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="oi oi-chevron-right" role="img" aria-label="Next" title="Next"></i></a>
             </div>
         </t>
     </template>
@@ -769,4 +798,27 @@
             </body>
         </t>
     </template>
+
+    <template id="side_content">
+        <div t-if="isOffcanvas" class="offcanvas-header justify-content-end">
+            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"/>
+        </div>
+        <div t-attf-class="{{'offcanvas-body' if isOffcanvas else 'mt-3'}}">
+            <div class="d-flex justify-content-start align-items-center gap-3 mb-4">
+                <img class="o_portal_contact_img rounded o_object_fit_cover" t-att-src="image_data_uri(user_id.partner_id.avatar_1024)" alt="Contact" width="50"/>
+                <div class="d-flex flex-column justify-content-center">
+                    <h5 class="mb-0" t-out="user_id.name"/>
+                    <p class="mb-0 text-muted" t-out="user_id.company_name"/>
+                </div>
+            </div>
+            <div class="o_portal_my_details">
+                <div t-field="user_id.partner_id" t-options='{"widget": "contact", "fields": ["email", "phone", "address"]}'/>
+            </div>
+            <a role="button" href="/my/account" class="btn btn-link p-0 mt-3"><i class="fa fa-pencil"/> Edit information</a>
+            <hr t-if="sales_user"/>
+            <div class="o_my_contact" t-if="sales_user">
+                <t t-call="portal.portal_contact"/>
+            </div>
+        </div>
+    </template>
 </odoo>
diff --git a/addons/project/static/src/img/folder.svg b/addons/project/static/src/img/folder.svg
new file mode 100644
index 00000000000..e25122ed530
--- /dev/null
+++ b/addons/project/static/src/img/folder.svg
@@ -0,0 +1,13 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.5125 11.4113L27.7457 8.71763C27.1893 8.28739 26.4241 8.24848 25.827 8.62007L5.13932 20.5438C4.48071 20.9576 4.19072 21.7682 4.43744 22.5058L18.4411 60.5643C18.5986 61.0023 19.1694 61.9233 19.6074 61.7658C19.6564 61.7482 19.7037 61.7261 19.7486 61.6997L59.5116 38.6814C60.1816 38.2923 60.4578 37.4658 60.1566 36.752L47.0757 5.88032C46.7147 5.02549 45.7291 4.62519 44.8742 4.9862C44.835 5.00275 44.7965 5.02078 44.7587 5.04025L34.3227 11.5712C33.7399 11.8763 33.0328 11.8138 32.5125 11.4113Z" fill="#FBDBD0"/>
+<path d="M3.40499 22.1807L18.0382 60.8153L17.959 59.2562L4.43747 22.514C4.34574 22.2361 4.32707 21.9394 4.38327 21.6522L3.35349 21.2999C3.29203 21.5929 3.30981 21.8969 3.40499 22.1807Z" fill="#C1DBF6"/>
+<path d="M26.9895 8.37342C26.4303 7.9467 25.6642 7.91425 25.0709 8.29212L4.10676 20.2159C3.71826 20.4593 3.44612 20.8509 3.35339 21.2998L4.38318 21.644C4.47273 21.1887 4.74631 20.7906 5.13924 20.5438L25.8269 8.62003C26.1857 8.3971 26.6154 8.31774 27.0302 8.39781L26.9895 8.37342Z" fill="white"/>
+<path d="M43.7642 4.99963L33.5667 11.2325C33.2289 11.4099 32.8403 11.4654 32.4664 11.3897L32.5125 11.4168C33.0328 11.8193 33.7399 11.8818 34.3227 11.5767L44.7587 5.04029C45.1904 4.81487 45.6987 4.78818 46.1516 4.96713C46.1516 4.96713 44.7885 4.44409 43.7642 4.99963Z" fill="white"/>
+<path d="M46.4362 10.7474L45.3902 16.7391C45.3128 17.0273 45.1287 17.2753 44.8753 17.4328L18.8599 32.5109C18.5202 32.7272 18.3155 33.1028 18.3179 33.5055L18.8599 61.3989C18.8647 61.6608 19.081 61.8691 19.3428 61.8643C19.4237 61.8628 19.5027 61.8406 19.5726 61.8L60.1404 38.3129C60.4772 38.1185 60.6839 37.7587 60.6824 37.3699V3.82893C60.6826 3.18089 60.1574 2.65536 59.5094 2.65515C59.2888 2.65508 59.0726 2.71721 58.8857 2.83437L46.962 10.0537C46.7037 10.2083 46.5153 10.4569 46.4362 10.7474Z" fill="white"/>
+<path d="M43.9565 16.9044L17.9085 31.931C17.7906 32.0026 17.686 32.0944 17.5996 32.202L18.5725 32.7657L18.6375 32.6871C18.7061 32.6153 18.7835 32.5525 18.8679 32.5001L44.8833 17.422C45.0062 17.3459 45.1137 17.2476 45.2004 17.132L44.2736 16.6117C44.1867 16.7279 44.0793 16.8271 43.9565 16.9044Z" fill="white"/>
+<path d="M45.5148 10.0672L44.4688 16.2106C44.4283 16.3597 44.3592 16.4996 44.2655 16.6225L45.1923 17.1428C45.2798 17.0236 45.345 16.8896 45.3847 16.7471L46.4307 10.7555C46.4505 10.6836 46.4768 10.6138 46.5093 10.5468C46.5643 10.435 46.6365 10.3326 46.7234 10.2433L45.7207 9.64709C45.6253 9.77233 45.5554 9.91505 45.5148 10.0672Z" fill="#C1DBF6"/>
+<path d="M57.0781 2.38721C57.0613 2.39425 57.045 2.40239 57.0293 2.4116L46.0296 9.37615C45.9114 9.44737 45.8067 9.53914 45.7207 9.64714L46.7315 10.2244C46.7987 10.1558 46.8732 10.0949 46.9537 10.0428L54.9074 5.22993L58.8829 2.82351C59.4283 2.48309 60.1461 2.64504 60.4926 3.18664C59.975 2.40076 58.4222 1.76392 57.0781 2.38721Z" fill="white"/>
+<path d="M17.3559 32.9283L18.0095 60.8153C18.0095 61.0132 19.1119 62.0576 19.5265 61.8163C19.5265 61.8163 19.5237 61.7906 19.4181 61.8054C19.0089 61.838 18.8409 61.3854 18.8328 60.9925L18.3152 33.4947C18.3161 33.2954 18.3674 33.0997 18.4642 32.9256C18.4953 32.869 18.5316 32.8155 18.5726 32.7657L17.5998 32.202C17.4401 32.4103 17.3542 32.6658 17.3559 32.9283Z" fill="#C1DBF6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.8461 19.7264C52.0683 19.8463 52.1512 20.1236 52.0312 20.3458L39.1085 44.282C39.0509 44.3887 38.9533 44.4682 38.8371 44.5029C38.7209 44.5376 38.5957 44.5247 38.489 44.4671L33.1549 41.5857C32.9327 41.4657 32.8499 41.1883 32.9699 40.9662C33.0899 40.7441 33.3673 40.6613 33.5894 40.7813L38.5212 43.4453L51.2267 19.9114C51.3466 19.6893 51.624 19.6064 51.8461 19.7264Z" fill="#374874"/>
+<path d="M58.2392 2.13562C59.2166 2.13567 60.1207 2.6225 60.4923 3.18609C60.4896 3.18209 60.4862 3.17901 60.4834 3.17501C60.609 3.36189 60.6824 3.5868 60.6823 3.82888V37.3699C60.6839 37.7586 60.4771 38.1185 60.1404 38.3129C60.1404 38.3129 19.4236 61.8628 19.3428 61.8643H19.3423C19.2174 61.8643 18.0094 60.9114 18.0094 60.8153L3.40501 22.1806C3.30981 21.8969 3.29205 21.5929 3.35352 21.2999C3.44625 20.851 3.71839 20.4593 4.10689 20.2159L25.071 8.29219C25.3467 8.11661 25.6597 8.02961 25.972 8.02963C26.3316 8.02963 26.6903 8.14509 26.9896 8.3735L27.0285 8.39686C27.2842 8.44511 27.5307 8.55135 27.7457 8.71768L32.4761 11.3908C32.5824 11.4116 32.6899 11.422 32.797 11.422C33.0635 11.422 33.3278 11.3579 33.5667 11.2325L43.7642 4.99965C44.0909 4.82248 44.5835 4.68003 45.1017 4.68006C45.8459 4.68008 46.6428 4.97389 47.0757 5.88035L48.0224 8.11448C48.0224 8.11448 56.3587 2.84095 57.0781 2.38721C57.4579 2.21112 57.8542 2.13562 58.2392 2.13562ZM58.2392 1.22134C57.695 1.22131 57.175 1.3345 56.6935 1.55777L56.6401 1.5825L56.5904 1.61388C56.0181 1.97482 50.6262 5.38545 48.4439 6.76593L47.9176 5.52367L47.9096 5.50481L47.9007 5.48634C47.3785 4.39299 46.3584 3.76586 45.1018 3.76577C44.4788 3.76572 43.8324 3.92252 43.3283 4.19594L43.3075 4.20721L43.2873 4.21955L33.1204 10.4337C33.0203 10.4822 32.9089 10.5077 32.797 10.5077C32.7883 10.5077 32.7796 10.5076 32.7709 10.5073L28.2464 7.95046C27.9935 7.76636 27.7056 7.62854 27.4016 7.5454C26.9798 7.26705 26.4785 7.11535 25.972 7.11532C25.4865 7.11532 25.0131 7.25085 24.6013 7.50751L3.65487 19.4212L3.63793 19.4308L3.62143 19.4411C3.0246 19.8151 2.60058 20.4252 2.45813 21.115C2.36396 21.5639 2.39144 22.0339 2.5382 22.4714L2.54369 22.4877L2.54979 22.5039L17.1263 61.0648C17.2203 61.4152 17.528 61.6723 18.0632 62.094C18.8065 62.6796 19.0345 62.7785 19.3423 62.7785H19.3508L19.3598 62.7784C19.6004 62.7739 19.6254 62.7596 20.2671 62.3938C20.5704 62.2209 21.0128 61.9673 21.5744 61.6446C22.6958 61.0004 24.2934 60.0801 26.2082 58.9757C30.037 56.7676 35.1344 53.8236 40.2293 50.8797C50.4188 44.9919 60.5981 39.1044 60.5981 39.1044C61.2166 38.7473 61.5995 38.0811 61.5966 37.3662V3.82888C61.5967 3.42636 61.4821 3.03656 61.2647 2.69907L61.2657 2.69841L61.2567 2.68422L61.251 2.6759C60.6729 1.80561 59.4638 1.22143 58.2392 1.22134Z" fill="#374874"/>
+</svg>
diff --git a/addons/project/static/src/img/tasks.svg b/addons/project/static/src/img/tasks.svg
new file mode 100644
index 00000000000..d43aeaacdf1
--- /dev/null
+++ b/addons/project/static/src/img/tasks.svg
@@ -0,0 +1,22 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4073 61.7256L17.3805 60.5477C17.1171 60.3946 16.9537 60.0693 16.9524 59.6071L18.9792 60.7849C18.9805 61.2472 19.1439 61.5725 19.4073 61.7256Z" fill="#FBDBD0"/>
+<path d="M46.3291 1.72739L48.3559 2.90524C48.0893 2.75029 47.7202 2.77217 47.3134 3.00702L45.2866 1.82917C45.6934 1.59432 46.0625 1.57246 46.3291 1.72739Z" fill="#FBDBD0"/>
+<path d="M18.9792 60.7849L16.9524 59.6071L16.8399 19.9392L18.8666 21.1171L18.9792 60.7849Z" fill="#FBDBD0"/>
+<path d="M20.3289 18.5865L18.3021 17.4087L45.2866 1.82917L47.3134 3.00702L20.3289 18.5865Z" fill="#FBDBD0"/>
+<path d="M47.3134 3.00702C48.1213 2.5406 48.7807 2.91429 48.7833 3.84469L48.8958 43.5126C48.8984 44.443 48.2433 45.5777 47.4354 46.0442L20.4509 61.6237C19.6412 62.0912 18.9818 61.7153 18.9792 60.7849L18.8666 21.1171C18.864 20.1867 19.5192 19.054 20.3289 18.5865L47.3134 3.00702Z" fill="white"/>
+<path d="M18.8666 21.1171L16.8399 19.9392C16.8372 19.0088 17.4924 17.8762 18.3021 17.4087L20.3289 18.5865C19.5192 19.054 18.864 20.1867 18.8666 21.1171Z" fill="#FBDBD0"/>
+<path d="M36.3632 5.83742L34.3364 4.65957C34.7715 4.40832 35.1659 4.38505 35.4507 4.55056L37.4775 5.72841C37.1927 5.5629 36.7983 5.58617 36.3632 5.83742Z" fill="#C1DBF6"/>
+<path d="M29.687 13.4999L27.6602 12.3221L27.6545 10.3199L29.6814 11.4977L29.687 13.4999Z" fill="#C1DBF6"/>
+<path d="M31.2424 8.79392L29.2156 7.61607L34.3364 4.65957L36.3632 5.83742L31.2424 8.79392Z" fill="#C1DBF6"/>
+<path d="M29.6814 11.4977L27.6545 10.3199C27.6517 9.32618 28.3508 8.11533 29.2156 7.61607L31.2424 8.79392C30.3776 9.29321 29.6785 10.5041 29.6814 11.4977Z" fill="#C1DBF6"/>
+<path d="M36.3631 5.83743C37.2279 5.33814 37.9315 5.73914 37.9343 6.73284L37.94 8.73501L38.9774 8.13608C39.8385 7.63892 40.5403 8.03885 40.5431 9.02838L40.5474 10.5528C40.5479 10.7191 40.4594 10.8729 40.3154 10.9561L27.7929 18.1859C27.484 18.3642 27.0978 18.142 27.0968 17.7853L27.094 16.7932C27.0912 15.8037 27.7884 14.596 28.6496 14.0988L29.6869 13.4999L29.6813 11.4977C29.6785 10.504 30.3775 9.29318 31.2423 8.79391L36.3631 5.83743Z" fill="#C1DBF6"/>
+<path d="M45.951 1.62559C46.0851 1.62559 46.2039 1.65594 46.3011 1.71332C46.3011 1.71332 48.3529 2.90383 48.353 2.90383C48.6175 3.05594 48.782 3.38106 48.7833 3.84456L48.8433 25.0004L48.8958 24.6125L52.895 18.7457C52.895 18.7457 52.9862 18.7477 53.1284 18.7611L53.1295 18.7594C53.1295 18.7594 53.2675 18.3456 54.0125 18.2489C54.0682 18.2418 54.1199 18.2384 54.1679 18.2384C54.3157 18.2384 54.4288 18.2699 54.5156 18.317L55.0473 17.4625C55.0473 17.4625 55.2359 17.4086 55.483 17.4086C55.7037 17.4086 55.9711 17.4516 56.1924 17.6143C56.7571 18.0295 56.6615 18.4974 56.6615 18.4974L55.4805 20.1077C55.6295 20.3841 55.6267 20.5668 55.6267 20.5668L48.8575 30.0141L48.8958 43.5125C48.8985 44.4429 48.2433 45.5777 47.4354 46.0441L20.4509 61.6236C20.215 61.7599 19.9921 61.8241 19.7943 61.8241C19.6486 61.8241 19.5166 61.7892 19.4033 61.7222C19.403 61.7222 17.3804 60.5477 17.3804 60.5477C17.117 60.3946 16.9536 60.0692 16.9523 59.6071L16.8399 19.9391C16.8372 19.0087 17.4924 17.8761 18.3021 17.4086L27.6593 12.0063L27.6545 10.3199C27.6517 9.32614 28.3508 8.11533 29.2155 7.6161L34.3363 4.65962C34.5887 4.51386 34.8273 4.44479 35.0388 4.44479C35.192 4.44479 35.331 4.48106 35.4506 4.5506L37.4774 5.72838C37.4767 5.72792 37.4758 5.72772 37.475 5.72726C37.6248 5.81363 37.7434 5.95338 37.823 6.13821L45.2866 1.82916C45.5278 1.68998 45.7556 1.62548 45.951 1.62559ZM45.9511 0.711304C45.5869 0.71119 45.1991 0.824035 44.8295 1.03732L38.0028 4.97862C37.9904 4.97069 37.978 4.96278 37.9653 4.95519C37.9559 4.94927 37.9465 4.94346 37.9368 4.93789L35.91 3.7601C35.6517 3.61 35.3504 3.53064 35.0389 3.53053C34.6569 3.53053 34.2666 3.64404 33.879 3.86792L28.7584 6.82429C27.6041 7.49069 26.7364 8.9946 26.7402 10.3225L26.7435 11.4793L17.8449 16.6168C16.7471 17.2507 15.922 18.6801 15.9255 19.9417L16.038 59.6097C16.0402 60.3832 16.362 61.0132 16.9209 61.3381L17.9326 61.9256C18.4528 62.2278 18.752 62.4015 18.943 62.5014L18.9382 62.5094C19.1918 62.6593 19.4879 62.7385 19.7943 62.7385C20.1621 62.7385 20.5368 62.6298 20.9081 62.4154L47.8925 46.836C48.9893 46.2028 49.8136 44.7728 49.8101 43.51L49.7726 30.3067L56.3699 21.0993C56.4784 20.9479 56.538 20.7668 56.5408 20.5806C56.5418 20.519 56.5373 20.4065 56.5051 20.2567L57.3987 19.0381C57.4767 18.9317 57.5308 18.8097 57.5572 18.6804C57.6553 18.2002 57.4986 17.4399 56.7339 16.8778C56.3928 16.627 55.9602 16.4944 55.483 16.4944C55.1259 16.4944 54.8482 16.5686 54.7961 16.5835C54.578 16.6457 54.3908 16.7869 54.2709 16.9796L54.0545 17.3274C54.0021 17.3303 53.9488 17.3354 53.8952 17.3423C53.3139 17.4176 52.9317 17.6321 52.6837 17.8561C52.4646 17.9082 52.2694 18.0401 52.1394 18.2308L49.7483 21.7386L49.6975 3.84205C49.6954 3.0666 49.372 2.43624 48.8105 2.11236C48.7637 2.08522 46.7598 0.922504 46.7598 0.922504C46.5281 0.785567 46.2463 0.711304 45.9511 0.711304Z" fill="#374874"/>
+<path d="M55.0474 17.4626C55.0474 17.4626 55.7234 17.2694 56.1925 17.6144C56.7572 18.0296 56.6616 18.4974 56.6616 18.4974L55.2957 20.3599L53.8884 19.3252L55.0474 17.4626Z" fill="white"/>
+<path d="M37.8288 40.8481L52.8949 18.7457C52.8949 18.7457 53.3762 18.7524 53.9082 18.9064C54.1838 18.9861 54.4731 19.1054 54.7161 19.2838C55.6391 19.9614 55.6267 20.5669 55.6267 20.5669L40.4778 42.5038L37.8288 43.9938L37.3735 43.6489L37.8288 40.8481Z" fill="#C1DBF6"/>
+<path d="M50.2599 24.9606L54.799 18.7457C54.799 18.7457 54.7576 18.1525 54.0126 18.249C53.2676 18.3456 53.1296 18.7595 53.1296 18.7595L49.0733 24.4851C49.0733 24.4851 48.5353 25.2567 50.2599 24.9606Z" fill="white"/>
+<path d="M37.4151 43.4211L37.2359 44.2192C37.2184 44.2974 37.3051 44.3571 37.3719 44.3127L38.029 43.8764C38.029 43.8764 37.8873 43.636 37.8152 43.5798C37.7303 43.5137 37.4151 43.4211 37.4151 43.4211Z" fill="#ECECEC"/>
+<path d="M33.5678 20.2363C33.7408 20.1365 33.9139 20.1156 34.042 20.1983C34.2881 20.3569 34.2763 20.8357 34.0159 21.2682L26.7734 33.302C26.6488 33.5097 26.4894 33.669 26.3298 33.7611C26.1635 33.8571 25.9971 33.88 25.87 33.8084L23.4514 32.4301C23.198 32.284 23.1967 31.8129 23.4484 31.3754C23.5749 31.157 23.7407 30.9886 23.9067 30.8928C24.0727 30.7969 24.2389 30.7736 24.3663 30.8454L24.5389 30.9439L26.3385 31.9709L31.7319 23.0094L33.1255 20.6938C33.2496 20.4871 33.4087 20.3282 33.5678 20.2363Z" fill="#374874"/>
+<path d="M34.9714 16.5324C35.1509 16.4288 35.2973 16.5106 35.2979 16.7168L35.3387 31.0812C35.3392 31.2857 35.1938 31.5377 35.0143 31.6413L22.5149 38.8578C22.3354 38.9614 22.1905 38.8772 22.1899 38.6727L22.1492 24.3082C22.1486 24.102 22.2926 23.8525 22.4721 23.7489L34.9714 16.5324ZM35.0132 31.2691L34.9725 16.9047L22.4731 24.1212L22.5139 38.4856L35.0132 31.2691Z" fill="#374874"/>
+<path d="M35.3679 33.4351C35.5474 33.3314 35.6923 33.4141 35.6929 33.6203L35.7337 47.9846C35.7342 48.1893 35.5903 48.4403 35.4108 48.544L22.91 55.7613C22.7319 55.8641 22.5855 55.7807 22.5849 55.5761L22.5442 41.2118C22.5436 41.0055 22.6891 40.7552 22.8671 40.6525L35.3679 33.4351ZM35.4097 48.1717L35.369 33.8074L22.8682 41.0247L22.9089 55.389L35.4097 48.1717Z" fill="#374874"/>
+<path d="M33.9633 37.1396C34.1361 37.0398 34.3088 37.0192 34.4369 37.1018C34.683 37.2604 34.6712 37.7392 34.4108 38.1717L27.1683 50.2055C27.0437 50.4131 26.8843 50.5724 26.7247 50.6645C26.5584 50.7605 26.392 50.7835 26.2649 50.712L23.8477 49.3327C23.5929 49.1876 23.5916 48.7163 23.8447 48.278C23.9705 48.0601 24.1363 47.8917 24.3023 47.7959C24.4684 47.7 24.6345 47.6767 24.7612 47.7488L24.9338 47.8474L26.7334 48.8745L32.1268 39.9128L33.5204 37.5974C33.6452 37.3901 33.8043 37.2314 33.9633 37.1396Z" fill="#374874"/>
+</svg>
diff --git a/addons/project/views/project_portal_project_project_templates.xml b/addons/project/views/project_portal_project_project_templates.xml
index 1c69edb85ec..672b3664d3f 100644
--- a/addons/project/views/project_portal_project_project_templates.xml
+++ b/addons/project/views/project_portal_project_project_templates.xml
@@ -19,32 +19,39 @@
             <li t-if="page_name == 'project_subtasks' and task and project" class="breadcrumb-item active">
                 <a t-attf-href="/my/projects/{{ project.id }}/task/{{ task.id }}?{{ keep_query() }}"><t t-esc="task.name"/></a>
             </li>
-            <li t-elif="task" class="breadcrumb-item active text-truncate">
+            <li t-elif="task" class="breadcrumb-item active text-break">
                 <span t-field="task.name"/>
             </li>
             <li t-if="page_name == 'project_subtasks' or (task and subtask and project)" t-attf-class="breadcrumb-item text-truncate #{'active ' if not subtask else ''}">
                 <a t-if="subtask" t-attf-href="/my/tasks/{{ task.id }}/subtasks?{{ keep_query() }}">Sub-tasks</a>
                 <t t-else="">Sub-tasks</t>
             </li>
-            <li t-if="subtask" class="breadcrumb-item active text-truncate">
+            <li t-if="subtask" class="breadcrumb-item active text-break">
                 <span t-field="subtask.name"/>
             </li>
         </xpath>
     </template>
 
     <template id="portal_my_home" name="Show Projects / Tasks" customize_show="True" inherit_id="portal.portal_my_home" priority="40">
-        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+            <t t-set="portal_service_category_enable" t-value="True"/>
+        </xpath>
+        <div id="portal_service_category" position="inside">
             <t t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/project/static/src/img/folder.svg'"/>
                 <t t-set="title">Projects</t>
                 <t t-set="url" t-value="'/my/projects'"/>
+                <t t-set="text">Follow the evolution of your projects</t>
                 <t t-set="placeholder_count" t-value="'project_count'"/>
             </t>
             <t t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/project/static/src/img/tasks.svg'"/>
                 <t t-set="title">Tasks</t>
                 <t t-set="url" t-value="'/my/tasks'"/>
+                <t t-set="text">Follow and comments tasks of your projects</t>
                 <t t-set="placeholder_count" t-value="'task_count'"/>
             </t>
-        </xpath>
+        </div>
     </template>
 
     <template id="portal_my_projects" name="My Projects">
@@ -55,7 +62,7 @@
                 <t t-set="title">Projects</t>
             </t>
             <t t-if="not projects">
-                <div class="alert alert-warning mt8" role="alert">
+                <div class="alert alert-warning" role="alert">
                     There are no projects.
                 </div>
             </t>
@@ -88,7 +95,7 @@
                 <t t-set="title">Tasks</t>
             </t>
             <t t-if="not grouped_tasks">
-                <div class="alert alert-warning mt8" role="alert">
+                <div class="alert alert-warning" role="alert">
                     There are no tasks.
                 </div>
             </t>
diff --git a/addons/project/views/project_portal_project_task_templates.xml b/addons/project/views/project_portal_project_task_templates.xml
index b10d0f170fa..4dc89ba9b69 100644
--- a/addons/project/views/project_portal_project_task_templates.xml
+++ b/addons/project/views/project_portal_project_task_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <template id="portal_my_tasks_priority_widget_template" name="Priority Widget Template">
-        <span t-attf-class="o_priority_star fa fa-star#{'' if task.priority == '1' else '-o'}" t-attf-title="Priority: {{'Important' if task.priority == '1' else 'Normal'}}"/>
+        <span t-attf-class="o_priority_star fa fa-star#{'' if task.priority == '1' else '-o'} #{classes if classes else ''}" t-attf-title="Priority: {{'Important' if task.priority == '1' else 'Normal'}}"/>
     </template>
 
     <template id="portal_my_tasks_state_widget_template" name="Status Widget Template">
@@ -75,8 +75,7 @@
                                 </td>
                                 <td>
                                     <t t-set="assignees" t-value="task.sudo().user_ids"/>
-                                    <div t-if="assignees" class="row flex-nowrap ps-3">
-                                        <img class="rounded-circle o_portal_contact_img me-2" t-attf-src="#{image_data_uri(assignees[:1].avatar_1024)}" alt="User" style="width: 20px; height: 20px;"/>
+                                    <div t-if="assignees" class="row flex-nowrap">
                                         <span t-out="'%s%s' % (assignees[:1].name, ' + %s others' % len(assignees[1:]) if len(assignees.user_ids) > 1 else '')" t-att-title="'\n'.join(assignees[1:].mapped('name'))"/>
                                     </div>
                                 </td>
@@ -85,7 +84,7 @@
                                         <span t-esc="task.milestone_id.name" />
                                     </t>
                                 </td>
-                                <td t-if="groupby != 'status'" align="right">
+                                <td t-if="groupby != 'status'" align="right" class="align-middle">
                                     <t t-call="project.portal_my_tasks_state_widget_template">
                                         <t t-set="path" t-value="'tasks'"/>
                                     </t>
@@ -93,8 +92,8 @@
                                 <td t-if="groupby != 'project'">
                                     <span title="Current project of the task" t-esc="task.project_id.name" />
                                 </td>
-                                <td t-if="groupby != 'stage'" class="text-end">
-                                    <span t-attf-class="badge #{'text-bg-primary' if task.stage_id.fold else 'text-bg-light'} o_text_overflow" t-attf-title="#{task.stage_id.name}" t-esc="task.stage_id.name"/>
+                                <td t-if="groupby != 'stage'" class="text-end lh-1">
+                                    <span t-attf-class="badge #{'text-bg-success' if task.stage_id.fold else 'text-bg-primary'} fw-normal o_text_overflow" t-attf-title="#{task.stage_id.name}" t-esc="task.stage_id.name"/>
                                 </td>
                             </tr>
                         </t>
@@ -112,7 +111,7 @@
                 <t t-set="title">Tasks</t>
             </t>
             <t t-if="not grouped_tasks">
-                <div class="alert alert-warning mt8" role="alert">
+                <div class="alert alert-warning" role="alert">
                     There are no tasks.
                 </div>
             </t>
@@ -153,96 +152,92 @@
 
             <div class="row mt16 o_project_portal_sidebar">
                 <t t-call="portal.portal_record_sidebar">
-                    <t t-set="classes" t-value="'col-lg-3 d-print-none'"/>
+                    <t t-set="classes" t-value="'col-lg-3 col-xl-4 d-print-none'"/>
 
                     <t t-set="entries">
-                        <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
-                            <li id="task-nav" class="list-group-item ps-0 flex-grow-1 d-flex align-items-center" t-ignore="true" role="complementary">
+                        <div class="d-flex flex-wrap flex-column gap-4">
+                            <div id="task-nav" class="d-flex align-items-center flex-grow-1 p-0" t-ignore="true" role="complementary">
                                 <ul class="nav flex-column">
                                     <li class="nav-item" id="nav-header">
-                                        <a class="nav-link ps-3" href="#card_header" style="max-width: 200px;">
+                                        <a class="nav-link p-0" href="#card_header">
                                             Task
                                         </a>
                                     </li>
                                     <li class="nav-item" id="nav-chat">
-                                        <a class="nav-link ps-3" href="#task_chat">
+                                        <a class="nav-link p-0" href="#task_chat">
                                             History
                                         </a>
                                     </li>
                                 </ul>
-                            </li>
-                            <li id="task-links" t-if="task_link_section" class="list-group-item ps-0 flex-grow-1 d-flex align-items-center" t-ignore="true" role="complementary">
+                            </div>
+                            <div id="task-links" t-if="task_link_section" class="d-flex align-items-center flex-grow-1 ps-0" t-ignore="true" role="complementary">
                                 <ul class="nav flex-column">
                                     <t t-foreach="task_link_section" t-as="task_link">
                                         <li class="nav-item">
-                                            <a class="nav-link ps-3" t-att-href="task_link['access_url']">
+                                            <a class="nav-link p-0" t-att-href="task_link['access_url']">
                                                 <t t-out="task_link['title']"/>
                                             </a>
                                         </li>
                                     </t>
                                 </ul>
-                            </li>
+                            </div>
 
-                            <li t-if="task.user_ids or task.partner_id" class="list-group-item flex-grow-1">
-                                <div class="col-12 col-md-12 pb-2" t-if="task.user_ids">
-                                    <strong>Assignees</strong>
+                            <div t-if="task.user_ids or task.partner_id" class="d-flex flex-column gap-4">
+                                <div class="col-12" t-if="task.user_ids">
+                                    <h6 class="flex-basis-100"><small class="text-muted">Assignees</small></h6>
                                     <t t-foreach="task.user_ids" t-as="user">
-                                        <div class="d-flex mb-3 flex-nowrap">
-                                            <img class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(user.avatar_1024)" alt="Contact"/>
-                                            <div class="ms-2">
-                                                <div t-esc="user" t-options='{"widget": "contact", "fields": ["name"]}'/>
-                                                <a t-attf-href="tel:{{user.phone}}" t-if="user.phone"><div t-esc="user" t-options='{"widget": "contact", "fields": ["phone"]}'/></a>
-                                                <a t-if="user.email" class="text-break" t-attf-href="mailto:{{user.email}}">
-                                                    <div t-out="user" t-options='{"widget": "contact", "fields": ["email"]}'/>
-                                                </a>
+                                        <div t-attf-class="o_portal_contact_details d-flex flex-column gap-2 {{ 'mb-3' if len(task.user_ids) > 1 else '' }}">
+                                            <div class="d-flex justify-content-start align-items-center gap-2">
+                                                <img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(user.avatar_1024)"/>
+                                                <h6 class="mb-0" t-field="user.name"></h6>
                                             </div>
+                                            <div t-out="user" t-options='{"widget": "contact", "fields": ["email", "phone"]}'/>
                                         </div>
                                     </t>
                                 </div>
-                                <div class="col-12 col-md-12 pb-2" t-if="task.partner_id">
-                                    <strong>Customer</strong>
-                                    <div class="d-flex flex-nowrap">
-                                        <img class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(task.partner_id.avatar_1024)" alt="Contact"/>
-                                        <div class="ms-2">
-                                            <div t-field="task.partner_id" t-options='{"widget": "contact", "fields": ["name"]}'/>
-                                            <a t-attf-href="tel:{{task.partner_id.phone}}" t-if="task.partner_id.phone"><div t-field="task.partner_id" t-options='{"widget": "contact", "fields": ["phone"]}'/></a>
-                                            <a t-if="task.partner_id.email" class="text-break" t-attf-href="mailto:{{task.partner_id.email}}">
-                                                <div t-field="task.partner_id" t-options='{"widget": "contact", "fields": ["email"]}'/>
-                                            </a>
+                                <div class="col-12 d-flex flex-column" t-if="task.partner_id">
+                                    <h6><small class="text-muted">Customer</small></h6>
+                                    <t t-if="task.partner_id">
+                                        <div class="o_portal_contact_details d-flex flex-column gap-2">
+                                            <div class="d-flex justify-content-start align-items-center gap-2">
+                                                <img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(task.partner_id.avatar_512)"/>
+                                                <h6 class="mb-0" t-out="task.partner_id.name"></h6>
+                                            </div>
+                                            <div t-field="task.partner_id" t-options='{"widget": "contact", "fields": ["email", "phone"]}'/>
                                         </div>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </t>
-                </t>
-                <div id="task_content" class="col-lg-9 justify-content-end">
-                    <div id="card" class="card">
-                        <div id="card_header" class="card-header bg-white" data-anchor="true">
-                            <div class="row g-0">
-                                <div class="col-12">
-                                    <h5 class="d-flex mb-1 mb-md-0 row">
-                                        <div class="col-9">
-                                            <t t-call="project.portal_my_tasks_priority_widget_template"/>
-                                            <span t-field="task.name" class="text-truncate"/>
-                                            <small class="text-muted d-none d-md-inline"> (#<span t-field="task.id"/>)</small>
-                                        </div>
-                                        <div class="col-3 text-end">
-                                            <small class="text-end">Stage:</small>
-                                            <span t-field="task.stage_id.name" class=" badge rounded-pill text-bg-info" title="Current stage of this task"/>
-                                        </div>
-                                    </h5>
+                                    </t>
                                 </div>
                             </div>
                         </div>
-                        <div id="card_body" class="card-body">
+                    </t>
+                </t>
+                <div id="task_content" class="o_portal_content col-12 col-lg-9 col-xl-8">
+                    <div id="card">
+                        <div id="card_header" data-anchor="true">
+                            <div class="row justify-content-between align-items-end mb-3">
+                                <div class="col-12 col-md-9">
+                                    <div class="d-flex align-items-center gap-2">
+                                        <t t-call="project.portal_my_tasks_priority_widget_template">
+                                            <t t-set="classes">fs-4</t>
+                                        </t>
+                                        <h3 t-field="task.name" class="text-truncate my-0"/>
+                                        <small class="text-muted d-none d-md-inline align-self-end">(#<span t-field="task.id"/>)</small>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <small class="text-end">Stage:</small>
+                                    <span t-field="task.stage_id.name" class=" badge rounded-pill text-bg-info" title="Current stage of this task"/>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="card_body">
                             <div class="float-end">
                                 <t t-call="project.portal_my_tasks_state_widget_template">
                                     <t t-set="path" t-value="'task'"/>
                                 </t>
                             </div>
                             <div class="row mb-4 container">
-                                <div class="col-12 col-md-6">
+                                <div class="col-12 col-md-6 flex-grow-1">
                                     <div t-if="project_accessible"><strong>Project:</strong> <a t-attf-href="/my/projects/#{task.project_id.id}" t-field="task.project_id"/></div>
                                     <div t-else=""><strong>Project:</strong> <a t-field="task.project_id"/></div>
                                     <div t-if="task.date_deadline"><strong>Deadline:</strong> <span t-field="task.date_deadline" t-options='{"widget": "datetime"}'/></div>
@@ -252,14 +247,14 @@
                                     <t t-call="project.portal_my_task_allocated_hours_template"/>
                                     </div>
                                 </div>
-                                <div class="col-12 col-md-6" name="portal_my_task_second_column"></div>
+                                <div class="col-12 col-md-6 d-empty-none" name="portal_my_task_second_column"></div>
                             </div>
 
                             <div class="row" t-if="task.description or task.attachment_ids">
                                 <div t-if="not is_html_empty(task.description)" t-attf-class="col-12 col-lg-7 mb-4 mb-md-0 {{'col-lg-7' if task.attachment_ids else 'col-lg-12'}}">
                                     <hr class="mb-1"/>
                                     <div class="d-flex my-2">
-                                        <strong>Description</strong>
+                                        <h5>Description</h5>
                                     </div>
                                     <div class="py-1 px-2 bg-100 small" t-field="task.description"/>
                                 </div>
@@ -281,8 +276,9 @@
                         </div>
                     </div>
 
-                    <div class="mt32" id="task_chat" data-anchor="true">
-                        <h4><strong>Message and communication history</strong></h4>
+                    <hr/>
+                    <div id="task_chat" data-anchor="true">
+                        <h4>Message and communication history</h4>
                         <t t-call="portal.message_thread">
                             <t t-set="token" t-value="task.access_token"/>
                         </t>
diff --git a/addons/purchase/static/src/img/calculator.svg b/addons/purchase/static/src/img/calculator.svg
new file mode 100644
index 00000000000..6354b449951
--- /dev/null
+++ b/addons/purchase/static/src/img/calculator.svg
@@ -0,0 +1,19 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5901 20.9763V55.6806C15.5901 59.2894 15.3694 58.7419 18.3453 60.3903C19.3255 60.9319 19.7052 61.188 20.2056 61.4412C20.6282 61.6371 21.0912 61.7299 21.5567 61.712C19.9642 61.503 19.7111 60.5875 19.7111 60.5875V23.4989C19.7111 22.0978 19.7111 21.1176 20.3969 20.2375L16.4614 17.9062C15.8887 18.8275 15.5867 19.8914 15.5901 20.9763Z" fill="#FBDBD0"/>
+<path d="M44.1896 2.73225C42.7502 1.90217 41.9554 2.25246 39.6153 3.59472C31.7413 8.10716 20.8856 14.3651 19.3049 15.2747C18.1531 15.8969 17.1763 16.7988 16.4644 17.8974L20.3881 20.2198C20.8143 19.7122 21.3351 19.2923 21.9217 18.9836L45.523 5.4168C46.9948 4.56613 48.022 4.79278 48.337 6.00551C48.337 4.63088 45.8644 3.69774 44.1896 2.73225Z" fill="white"/>
+<path d="M45.1904 48.3924C44.4251 48.8339 29.2158 57.6057 22.5899 61.3881C21.3477 62.0975 19.5669 61.4912 19.5669 60.5433V23.4341C19.5669 21.356 19.5669 20.1962 21.7922 18.9276L45.4877 5.30487C47.2833 4.27168 48.4136 4.82508 48.4136 6.80903V43.0146C48.4136 46.1818 46.1736 47.8243 45.1904 48.3924Z" fill="white"/>
+<path d="M45.9057 21.2854L36.6718 26.7397C36.4694 26.8587 36.3451 27.076 36.3451 27.3108V36.3239C36.3416 36.4279 36.4232 36.515 36.5272 36.5184C36.5671 36.5197 36.6064 36.5083 36.6394 36.4858L45.3494 31.3199C45.7872 31.0616 46.0567 30.5919 46.0588 30.0836V21.3737C46.0607 21.3184 46.0174 21.2721 45.9622 21.2702C45.9423 21.2695 45.9226 21.2748 45.9057 21.2854Z" fill="#C1DBF6"/>
+<path d="M33.5428 28.2763L24.3089 33.7307C24.1065 33.8482 23.982 34.0647 23.9822 34.2988V43.306C23.9787 43.41 24.0602 43.4971 24.1642 43.5005C24.2042 43.5018 24.2435 43.4904 24.2765 43.4679L32.9982 38.3167C33.4374 38.0569 33.707 37.5848 33.7076 37.0745V28.3763C33.7226 28.3231 33.6916 28.2679 33.6384 28.2529C33.6047 28.2434 33.5684 28.2523 33.5428 28.2763Z" fill="#C1DBF6"/>
+<path d="M45.9057 34.0809L36.6718 39.5353C36.4694 39.6529 36.3449 39.8693 36.3451 40.1034V49.1106C36.3416 49.2146 36.4232 49.3017 36.5272 49.3051C36.5671 49.3064 36.6064 49.295 36.6394 49.2725L45.3611 44.1213C45.8003 43.8615 46.0699 43.3894 46.0705 42.8792V34.1663C46.0757 34.1113 46.0354 34.0624 45.9803 34.0572C45.9533 34.0546 45.9263 34.0632 45.9057 34.0809Z" fill="#C1DBF6"/>
+<path d="M33.5428 41.0689L24.3089 46.5232C24.1065 46.6422 23.9822 46.8595 23.9822 47.0943V56.1015C23.9787 56.2055 24.0602 56.2926 24.1642 56.296C24.2042 56.2973 24.2435 56.2859 24.2765 56.2634L32.9982 51.1122C33.4342 50.848 33.6992 50.374 33.6959 49.8641V41.1513C33.6917 41.0945 33.6424 41.0519 33.5856 41.056C33.5706 41.0571 33.5559 41.0615 33.5428 41.0689Z" fill="#C1DBF6"/>
+<path d="M41.8759 12.9581L40.2894 13.8912C40.2163 13.9326 40.1713 14.0103 40.1716 14.0943V16.7435C40.1711 16.8735 40.2762 16.9794 40.4062 16.9799C40.449 16.98 40.4911 16.9685 40.5278 16.9466L42.1144 16.0135C42.1874 15.972 42.2324 15.8944 42.2321 15.8104V13.1612C42.2326 13.0311 42.1276 12.9253 41.9975 12.9248C41.9547 12.9246 41.9127 12.9361 41.8759 12.9581ZM41.5404 15.8311L40.7781 16.2961C40.7427 16.3197 40.6574 16.3226 40.6574 16.249V14.3769C40.6574 14.3034 40.7251 14.268 40.7751 14.2386L41.508 13.7882C41.5905 13.7441 41.667 13.7558 41.667 13.8383V15.6397C41.667 15.7339 41.6788 15.7604 41.5404 15.8311Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.8467 33.3942C28.973 33.3942 29.0753 33.4965 29.0753 33.6227V38.6925C29.0753 38.8188 28.973 38.9211 28.8467 38.9211C28.7205 38.9211 28.6181 38.8188 28.6181 38.6925V33.6227C28.6181 33.4965 28.7205 33.3942 28.8467 33.3942Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8348 35.2242C30.8949 35.3351 30.8537 35.4739 30.7427 35.534L27.0325 37.5453C26.9215 37.6054 26.7828 37.5642 26.7226 37.4532C26.6625 37.3423 26.7037 37.2035 26.8146 37.1434L30.5249 35.1321C30.6359 35.072 30.7746 35.1132 30.8348 35.2242Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2921 48.1447C27.3615 48.0393 27.5033 48.0101 27.6087 48.0795L30.3205 49.8647C30.4259 49.9341 30.4551 50.0759 30.3857 50.1813C30.3163 50.2867 30.1745 50.3159 30.0691 50.2465L27.3574 48.4613C27.2519 48.3919 27.2227 48.2501 27.2921 48.1447Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.6547 46.1501C30.7649 46.2116 30.8044 46.3509 30.7428 46.4611L27.6727 51.9596C27.6111 52.0698 27.4719 52.1093 27.3617 52.0477C27.2515 51.9862 27.212 51.8469 27.2735 51.7367L30.3437 46.2382C30.4052 46.128 30.5445 46.0885 30.6547 46.1501Z" fill="#374874"/>
+<path d="M40.6867 40.2152C40.7089 39.7601 40.9432 39.3417 41.3196 39.0849C41.667 38.8789 41.9495 39.0496 41.9495 39.4647C41.9262 39.9195 41.6936 40.338 41.3196 40.5979C40.9693 40.7922 40.6867 40.6215 40.6867 40.2035V40.2152ZM41.9377 43.2324C41.9135 43.6862 41.6811 44.1034 41.3078 44.3627C40.9575 44.5687 40.675 44.398 40.675 43.9829C40.6953 43.5273 40.93 43.1081 41.3078 42.8526C41.6669 42.6437 41.9377 42.8144 41.9377 43.2324Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.7104 40.2872C43.775 40.3957 43.7394 40.536 43.631 40.6006L39.2156 43.2292C39.1072 43.2937 38.9669 43.2581 38.9023 43.1497C38.8377 43.0412 38.8733 42.9009 38.9818 42.8364L43.3971 40.2078C43.5056 40.1432 43.6459 40.1788 43.7104 40.2872Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.7104 27.5647C43.775 27.6732 43.7394 27.8134 43.631 27.878L39.2156 30.5066C39.1072 30.5712 38.9669 30.5356 38.9023 30.4271C38.8377 30.3186 38.8733 30.1784 38.9818 30.1138L43.3971 27.4852C43.5056 27.4206 43.6459 27.4562 43.7104 27.5647Z" fill="#374874"/>
+<path d="M42.7756 2.28587C43.2317 2.28587 43.6684 2.43167 44.1895 2.73224C45.8644 3.69771 48.337 4.63085 48.337 6.00546C48.3331 5.9903 48.3277 5.97716 48.3235 5.96232C48.3809 6.20797 48.4135 6.48765 48.4135 6.80907V43.0146C48.4135 46.1819 46.1735 47.8243 45.1903 48.3924C44.425 48.834 29.2158 57.6057 22.5899 61.3882C22.2348 61.5909 21.8361 61.6832 21.4471 61.6937C21.4841 61.6996 21.5182 61.7069 21.5567 61.7119C21.5189 61.7134 21.4812 61.7141 21.4434 61.7141C21.0163 61.7141 20.5939 61.6212 20.2056 61.4412C19.7052 61.188 19.3254 60.9319 18.3452 60.3903C15.3693 58.742 15.5901 59.2894 15.5901 55.6806V20.9763C15.5867 19.8915 15.8886 18.8275 16.4614 17.9062L16.4643 17.8973C17.1763 16.7988 18.153 15.8969 19.3048 15.2747C20.8855 14.3651 31.7413 8.10715 39.6153 3.59469C41.1081 2.73842 41.972 2.28584 42.7756 2.28587ZM42.7756 1.37158C41.7078 1.37154 40.7062 1.91494 39.1604 2.80159C32.6208 6.54934 24.0517 11.4854 20.3925 13.5931L18.8589 14.4764C17.5809 15.1693 16.4877 16.1801 15.6971 17.4001L15.6336 17.498L15.6266 17.519C15.0004 18.5647 14.672 19.7586 14.6758 20.9791V55.6806C14.6758 55.9304 14.6747 56.1601 14.6737 56.3719C14.6672 57.7864 14.6639 58.4964 15.0132 59.1456C15.3827 59.8324 16.0172 60.173 17.0685 60.7372C17.3135 60.8687 17.59 61.0172 17.9022 61.1901C18.3541 61.4398 18.6806 61.6303 18.9429 61.7834C19.2558 61.9661 19.503 62.1103 19.7927 62.257L19.8068 62.2641L19.821 62.2706C20.3259 62.5047 20.8869 62.6284 21.4434 62.6284C21.4929 62.6284 21.5423 62.6274 21.5918 62.6255L21.5929 62.6024C22.1164 62.5707 22.6155 62.4264 23.0432 62.1821C29.8225 58.312 45.4919 49.2739 45.6471 49.1844C46.7542 48.5447 49.3277 46.6636 49.3277 43.0146V6.80904C49.3277 6.49842 49.3015 6.20214 49.2497 5.92582C49.1929 4.32884 47.4271 3.4082 45.7186 2.51736C45.3356 2.31771 44.9738 2.12909 44.646 1.94013C43.9643 1.54696 43.3874 1.3716 42.7756 1.37158Z" fill="#374874"/>
+<path d="M44.5869 10.5179V15.3512C44.5865 15.4858 44.5148 15.6101 44.3985 15.6779L23.3934 27.8406V22.8366C23.3931 22.8073 44.5869 10.5179 44.5869 10.5179ZM44.5869 10.0607C44.5077 10.0607 44.4285 10.0813 44.3576 10.1224C44.3576 10.1224 39.0591 13.1948 33.7605 16.2709C31.1112 17.809 28.4618 19.348 26.4749 20.5043C25.4811 21.0826 24.6529 21.5652 24.0733 21.9042C23.7828 22.074 23.5546 22.2079 23.399 22.2997C23.0694 22.4943 22.933 22.5748 22.9363 22.8423L22.9363 27.8406C22.9363 28.004 23.0235 28.155 23.1651 28.2367C23.2358 28.2774 23.3146 28.2978 23.3934 28.2978C23.4725 28.2978 23.5517 28.2773 23.6225 28.2362L44.6276 16.0735C44.884 15.9239 45.0431 15.648 45.0441 15.3527V10.5178C45.0441 10.3544 44.9568 10.2033 44.8151 10.1217C44.7445 10.081 44.6657 10.0607 44.5869 10.0607Z" fill="#374874"/>
+</svg>
diff --git a/addons/purchase/static/src/img/rfq.svg b/addons/purchase/static/src/img/rfq.svg
new file mode 100644
index 00000000000..5c1dcf350be
--- /dev/null
+++ b/addons/purchase/static/src/img/rfq.svg
@@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3095 17.3993L22.0328 51.6869C22.0328 51.6869 21.8805 60.315 29.4658 62.0791L30.178 60.0212L33.6656 59.5619L34.4012 57.47L37.9639 57.0515L38.6927 54.9867L42.2732 54.4366L42.912 52.4792L46.4268 51.9162L47.2035 49.905L50.3861 49.5137C50.3861 49.5137 44.5997 49.9724 43.8764 44.5353C43.1531 39.0982 43.8764 12.9918 43.8764 12.9918C43.8764 12.9918 43.684 2.78861 34.7389 1.92065L15.3412 11.8767C15.3412 11.8767 21.3095 11.6206 21.3095 17.3993Z" fill="white"/>
+<path d="M13.6426 16.8207C13.6426 16.8207 13.064 11.3236 17.1144 11.4683C21.1649 11.6129 21.3096 17.3993 21.3096 17.3993L13.6179 21.4496L13.6426 16.8207Z" fill="#FBDBD0"/>
+<path d="M34.739 1.92076C43.684 2.78873 43.8764 12.9918 43.8764 12.9918C43.8764 12.9918 43.1531 39.0983 43.8764 44.5354C44.4953 49.1877 48.8209 49.5233 50.0569 49.5233C50.2654 49.5233 50.3861 49.5137 50.3861 49.5137L47.2036 49.9051L46.4269 51.9162L42.912 52.4793L42.2733 54.4367L38.6928 54.9868L37.9639 57.0516L34.4012 57.4701L33.6657 59.562L30.1781 60.0213L29.4658 62.0792C21.8805 60.3151 22.0328 51.687 22.0328 51.687L21.3095 17.3993L13.6178 21.4497L13.6425 16.8207C13.6425 16.8207 13.2557 13.1286 15.3467 11.8767C15.3455 11.8767 15.3413 11.8768 15.3413 11.8768L15.4025 11.8454C15.4688 11.8078 15.537 11.7723 15.6083 11.7397L34.739 1.92076ZM50.3861 49.5137H50.3873H50.3861ZM34.739 1.00647C34.5942 1.00647 34.451 1.04085 34.3215 1.10736L15.2077 10.9176C15.1284 10.9546 15.0501 10.9947 14.9695 11.04L14.9244 11.0631C14.8808 11.0854 14.8397 11.1108 14.8011 11.139C12.4487 12.6286 12.6827 16.3406 12.728 16.8608L12.7035 21.4448C12.7018 21.766 12.8687 22.0645 13.1432 22.2312C13.2887 22.3195 13.4531 22.364 13.6178 22.364C13.7639 22.364 13.9102 22.3291 14.0438 22.2587L20.4266 18.8976L21.1184 51.6915C21.1162 51.9413 21.1256 54.131 22.0509 56.5484C23.3553 59.956 25.8477 62.1765 29.2587 62.9698C29.3281 62.9859 29.3977 62.9937 29.4663 62.9937C29.8481 62.9937 30.2 62.7532 30.3298 62.3783L30.8573 60.854L33.785 60.4685C34.1266 60.4235 34.4139 60.1903 34.5282 59.8653L35.0744 58.3116L38.0705 57.9597C38.4169 57.919 38.7099 57.6848 38.826 57.356L39.3727 55.8073L42.412 55.3404C42.7529 55.288 43.0354 55.0483 43.1424 54.7204L43.6079 53.2938L46.5714 52.8191C46.8927 52.7676 47.1625 52.5492 47.2797 52.2457L47.859 50.7457L50.4857 50.4227C50.9439 50.373 51.3009 49.985 51.3009 49.5138C51.3009 49.0293 50.9246 48.6328 50.4481 48.6015C50.4279 48.6001 50.4075 48.5994 50.387 48.5994C50.3755 48.5994 50.364 48.5997 50.3524 48.6001C50.3384 48.6006 50.3245 48.6014 50.3107 48.6025C50.2928 48.6037 50.2013 48.609 50.0568 48.609C48.6388 48.609 45.2863 48.2004 44.7827 44.4148C44.0772 39.1117 44.7831 13.2775 44.7903 13.0172C44.7907 13.003 44.7908 12.9888 44.7905 12.9746C44.7884 12.863 44.7249 10.2091 43.4994 7.41458C41.8326 3.61397 38.8338 1.39952 34.8272 1.01079C34.7978 1.00789 34.7684 1.00647 34.739 1.00647Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.7046 18.6847C39.7654 18.7953 39.7249 18.9343 39.6143 18.995L26.333 26.2861C26.2223 26.3469 26.0834 26.3064 26.0226 26.1958C25.9619 26.0851 26.0023 25.9461 26.113 25.8854L39.3943 18.5943C39.5049 18.5335 39.6439 18.574 39.7046 18.6847Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.7046 25.9873C39.7654 26.0979 39.7249 26.2369 39.6143 26.2976L26.333 33.5887C26.2223 33.6495 26.0834 33.609 26.0226 33.4984C25.9619 33.3877 26.0023 33.2488 26.113 33.188L39.3943 25.8969C39.5049 25.8362 39.6439 25.8766 39.7046 25.9873Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.7046 33.2899C39.7654 33.4005 39.7249 33.5395 39.6143 33.6002L26.333 40.8913C26.2223 40.9521 26.0834 40.9116 26.0226 40.801C25.9619 40.6903 26.0023 40.5514 26.113 40.4906L39.3943 33.1995C39.5049 33.1388 39.6439 33.1792 39.7046 33.2899Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.7046 40.5925C39.7654 40.7032 39.7249 40.8421 39.6143 40.9029L26.333 48.194C26.2223 48.2547 26.0834 48.2143 26.0226 48.1036C25.9619 47.9929 26.0023 47.854 26.113 47.7932L39.3943 40.5021C39.5049 40.4414 39.6439 40.4818 39.7046 40.5925Z" fill="#374874"/>
+</svg>
diff --git a/addons/purchase/static/src/js/purchase_portal_sidebar.js b/addons/purchase/static/src/js/purchase_portal_sidebar.js
index 30ae299a09c..7e536923988 100644
--- a/addons/purchase/static/src/js/purchase_portal_sidebar.js
+++ b/addons/purchase/static/src/js/purchase_portal_sidebar.js
@@ -75,7 +75,7 @@ publicWidget.registry.PurchasePortalSidebar = PortalSidebar.extend({
                         lastLI = $("<li class='nav-item'>")
                             .append(
                                 $(
-                                    '<a class="nav-link" style="max-width: 200px;" href="#' +
+                                    '<a class="nav-link p-0" style="max-width: 200px;" href="#' +
                                         id +
                                         '"/>'
                                 ).text(text)
@@ -96,7 +96,7 @@ publicWidget.registry.PurchasePortalSidebar = PortalSidebar.extend({
                             $("<li class='nav-item'>")
                                 .append(
                                     $(
-                                        '<a class="nav-link" style="max-width: 200px;" href="#' +
+                                        '<a class="nav-link p-0" style="max-width: 200px;" href="#' +
                                             id +
                                             '"/>'
                                     ).text(text)
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index 60fed15ae92..bd2a9168085 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -18,18 +18,25 @@
   </template>
 
   <template id="portal_my_home_purchase" name="Show Requests for Quotation / Purchase Orders" customize_show="True" inherit_id="portal.portal_my_home" priority="25">
-    <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
-        <t t-call="portal.portal_docs_entry">
-            <t t-set="title">Requests for Quotation</t>
-            <t t-set="url" t-value="'/my/rfq'"/>
-            <t t-set="placeholder_count" t-value="'rfq_count'"/>
-        </t>
-        <t t-call="portal.portal_docs_entry">
-            <t t-set="title">Purchase Orders</t>
-            <t t-set="url" t-value="'/my/purchase'"/>
-            <t t-set="placeholder_count" t-value="'purchase_count'"/>
-        </t>
-    </xpath>
+    <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+          <t t-set="portal_vendor_category_enable" t-value="True"/>
+      </xpath>
+      <div id="portal_vendor_category" position="inside">
+          <t t-call="portal.portal_docs_entry">
+              <t t-set="icon" t-value="'/purchase/static/src/img/rfq.svg'"/>
+              <t t-set="text">Follow your Requests for Quotation</t>
+              <t t-set="title">Requests for Quotation</t>
+              <t t-set="url" t-value="'/my/rfq'"/>
+              <t t-set="placeholder_count" t-value="'rfq_count'"/>
+          </t>
+          <t t-call="portal.portal_docs_entry">
+              <t t-set="icon" t-value="'/purchase/static/src/img/calculator.svg'"/>
+              <t t-set="text">Follow orders you have to fulfill</t>
+              <t t-set="title">Our Orders</t>
+              <t t-set="url" t-value="'/my/purchase'"/>
+              <t t-set="placeholder_count" t-value="'purchase_count'"/>
+          </t>
+      </div>
   </template>
 
   <template id="portal_my_purchase_rfqs" name="My Requests For Quotation">
@@ -40,7 +47,7 @@
               <t t-set="title" >Requests For Quotation</t>
           </t>
           <t t-if="not rfqs">
-              <p>There are currently no requests for quotation for your account.</p>
+              <p class="alert alert-warning">There are currently no requests for quotation for your account.</p>
           </t>
           <t t-if="rfqs" t-call="portal.portal_table">
               <thead>
@@ -77,7 +84,7 @@
               <t t-set="title">Purchase Orders</t>
           </t>
           <t t-if="not orders">
-              <p>There are currently no purchase orders for your account.</p>
+              <p class="alert alert-warning">There are currently no purchase orders for your account.</p>
           </t>
           <t t-if="orders" t-call="portal.portal_table">
               <thead>
@@ -130,43 +137,44 @@
           <div class="row mt16 o_portal_purchase_sidebar">
               <!-- Sidebar -->
               <t t-call="portal.portal_record_sidebar">
-                  <t t-set="classes" t-value="'col-lg-auto d-print-none'"/>
+                  <t t-set="classes" t-value="'col-lg-3 col-xl-4 d-print-none'"/>
 
                   <t t-set="title">
-                      <h2 class="mb-0"><b t-field="order.amount_total" data-id="total_amount"/> </h2>
+                      <h2 t-field="order.amount_total" data-id="total_amount"/>
                   </t>
                   <t t-set="entries">
-                      <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
-                          <li class="list-group-item flex-grow-1">
+                      <div class="d-flex flex-column gap-4">
+                          <div class="flex-grow-1 order-md-last order-lg-first">
                               <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
                                   <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="order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="View Details" target="_blank"><i class="fa fa-print"/> View Details</a>
                                   </div>
                               </div>
-                          </li>
+                          </div>
 
-                          <li class="navspy list-group-item ps-0 flex-grow-1" t-ignore="true" role="complementary">
+                          <div class="navspy flex-grow-1 ps-0" t-ignore="true" role="complementary">
                               <ul class="nav flex-column bs-sidenav"></ul>
-                          </li>
+                          </div>
 
-                          <li t-if="order.user_id" class="list-group-item flex-grow-1">
-                              <div class="small mb-1"><strong class="text-muted">Purchase Representative</strong></div>
-                              <div class="row flex-nowrap">
-                                  <div class="col flex-grow-0 pe-2">
-                                      <img class="rounded-circle mr4 float-start o_portal_contact_img" t-att-src="image_data_uri(order.user_id.avatar_1024)" alt="Contact"/>
-                                  </div>
-                                  <div class="col ps-0" style="min-width: 150px">
-                                      <span t-field="order.user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
-                                      <a href="#discussion" class="small"><i class="fa fa-comment"></i> Send message</a>
-                                  </div>
-                              </div>
-                          </li>
-                      </ul>
+                          <div t-if="order.user_id">
+                              <h6><small class="text-muted">Purchase Representative</small></h6>
+                              <div class="o_portal_contact_details d-flex flex-column gap-2">
+                                <div class="d-flex justify-content-start align-items-center gap-2">
+                                    <img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(order.user_id.avatar_1024)" alt="Contact"/>
+                                    <div>
+                                        <h6 class="mb-0" t-out="order.user_id.name"/>
+                                        <a href="#discussion" class="small fw-bold">Send message</a>
+                                    </div>
+                                </div>
+                                <div t-field="order.user_id" t-options='{"widget": "contact", "fields": ["phone"], "no_marker": False}'/>
+                            </div>
+                          </div>
+                      </div>
                   </t>
               </t>
 
               <!-- Page content -->
-              <div id="quote_content" class="col-12 col-lg justify-content-end">
+              <div id="quote_content" class="o_portal_content col-12 col-lg-9 col-xl-8">
 
                   <!-- status messages -->
                   <div t-if="order.state == 'cancel'" class="alert alert-danger alert-dismissable d-print-none" role="alert">
@@ -175,13 +183,14 @@
                   </div>
 
                   <!-- main content -->
-                  <div t-attf-class="card #{'pb-5' if report_type == 'html' else ''}" id="portal_purchase_content">
+                  <div id="portal_purchase_content">
                       <div t-call="purchase.purchase_order_portal_content"/>
                   </div>
 
                   <!-- chatter -->
-                  <div id="purchase_order_communication" class="mt-4">
-                      <h2>History</h2>
+                  <hr/>
+                  <div id="purchase_order_communication">
+                      <h4>History</h4>
                       <t t-call="portal.message_thread"/>
                   </div>
               </div><!-- // #quote_content -->
@@ -191,7 +200,7 @@
 
   <template id="purchase_order_portal_content" name="Purchase Order Portal Content">
       <!-- Intro -->
-      <div id="introduction" t-attf-class="pb-2 pt-3 #{'card-header bg-white' if report_type == 'html' else ''}">
+      <div id="introduction" class="mt-5 mt-lg-0 pb-2 pt-0">
         <h2 class="my-0">
           <t t-if="order.state in ['draft', 'sent']">Request for Quotation</t>
           <t t-else="1">
@@ -201,7 +210,7 @@
         </h2>
       </div>
 
-      <div t-attf-class="#{'card-body' if report_type == 'html' else ''}">
+      <div>
           <!-- Informations -->
           <div id="informations">
               <div class="row" id="po_date">
@@ -240,8 +249,8 @@
                                       </a>
                                       <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
                                   </div>
-                                  <span t-if="i.payment_state in ('paid', 'in_payment')" class="small badge text-bg-success"><i class="fa fa-fw fa-check"/> <b>Paid</b></span>
-                                  <span t-else="" class="small badge text-bg-info"><i class="fa fa-fw fa-clock-o"/> <b>Waiting Payment</b></span>
+                                  <span t-if="i.payment_state in ('paid', 'in_payment')" class="badge text-bg-success small"><i class="fa fa-fw fa-check"/>Paid</span>
+                                  <span t-else="" class="small badge text-bg-primary"><i class="fa fa-fw fa-clock-o"/>Waiting Payment</span>
                               </div>
                           </t>
                       </ul>
@@ -376,7 +385,7 @@
 
   <template id="portal_my_purchase_order_update_date" name="Portal: My Purchase Order Update Dates" inherit_id="purchase.portal_my_purchase_order" primary="True">
     <xpath expr="////div[@id='portal_purchase_content']" position="replace">
-      <div t-attf-class="card #{'pb-5' if report_type == 'html' else ''}" id="portal_purchase_content">
+      <div id="portal_purchase_content">
         <t t-set="update_dates" t-value="True"/>
         <div t-call="purchase.purchase_order_portal_content"/>
       </div>
diff --git a/addons/sale/static/src/img/bag.svg b/addons/sale/static/src/img/bag.svg
new file mode 100644
index 00000000000..148d08a2266
--- /dev/null
+++ b/addons/sale/static/src/img/bag.svg
@@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2233 2.70896C27.6214 1.90182 28.931 1.79727 29.9196 2.35586L29.921 2.35668C30.906 2.92274 31.4769 4.09983 31.4815 5.7074L31.4967 11.0667C31.4971 11.1929 31.395 11.2955 31.2688 11.2959C31.1425 11.2962 31.0399 11.1942 31.0396 11.068L31.0244 5.7087C31.0201 4.2002 30.4888 3.21066 29.694 2.75345C28.8949 2.30233 27.7656 2.34642 26.4519 3.10486C25.1387 3.86303 23.9468 5.16282 23.0753 6.67008C22.204 8.18154 21.6785 9.85639 21.6809 11.3659C21.6809 11.3659 21.6809 11.366 21.6809 11.3659L21.6961 16.725C21.6965 16.8513 21.5944 16.9539 21.4682 16.9543C21.3419 16.9546 21.2393 16.8526 21.239 16.7263L21.2238 11.3668C21.2211 9.75775 21.7785 8.00421 22.6794 6.44156L22.6796 6.44132C23.5805 4.88301 24.8244 3.51663 26.2233 2.70896Z" fill="#374874"/>
+<path d="M37.7926 2.67932L42.0505 38.2168L11.6401 55.7743L15.6829 15.4444L37.7926 2.67932Z" fill="#C1DBF6"/>
+<path d="M21.9496 61.7654L11.6401 55.7743L15.6829 15.4443H24.8303L25.9924 21.4355L21.9496 61.7654Z" fill="#FBDBD0"/>
+<path d="M48.1021 32.7335L37.7926 26.7423V2.67932L39.2776 6.88008L48.1021 8.67052V32.7335Z" fill="#FBDBD0"/>
+<path d="M48.1021 8.67053L52.36 44.208L21.9496 61.7655L25.9924 21.4356L48.1021 8.67053Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.9149 8.14731C38.3129 7.34017 39.6226 7.23562 40.6111 7.79422L40.6126 7.79503C41.5976 8.36109 42.1685 9.53818 42.173 11.1458L42.1882 16.505C42.1886 16.6313 42.0865 16.7339 41.9603 16.7342C41.8341 16.7346 41.7314 16.6326 41.7311 16.5063L41.7159 11.1471C41.7116 9.63855 41.1804 8.64901 40.3855 8.19181C39.5864 7.74068 38.4571 7.78477 37.1434 8.54321C35.8303 9.30138 34.6383 10.6012 33.7669 12.1084C32.8955 13.6199 32.37 15.2947 32.3724 16.8043C32.3724 16.8042 32.3724 16.8043 32.3724 16.8043L32.3876 22.1634C32.388 22.2896 32.2859 22.3923 32.1597 22.3926C32.0335 22.393 31.9309 22.2909 31.9305 22.1647L31.9153 16.8052C31.9127 15.1961 32.47 13.4426 33.3709 11.8799L33.3711 11.8797C34.272 10.3214 35.516 8.95498 36.9149 8.14731Z" fill="#374874"/>
+<path d="M37.7926 2.6793L39.2776 6.88008L48.1021 8.67048L52.36 44.208L21.9496 61.7654L11.6401 55.7742L15.6829 15.4443L37.7926 2.6793ZM37.7927 1.76501C37.634 1.76501 37.4761 1.80632 37.3355 1.88751L15.2258 14.6525C14.971 14.7996 14.8025 15.0604 14.7732 15.3531L10.7304 55.683C10.6946 56.0398 10.8707 56.3846 11.1807 56.5647L21.4902 62.5559C21.6322 62.6384 21.7909 62.6797 21.9496 62.6797C22.1075 62.6797 22.2653 62.6388 22.4068 62.5572L52.8172 44.9998C53.134 44.8168 53.3113 44.4626 53.2678 44.0992L49.0099 8.56172C48.963 8.1702 48.6704 7.85285 48.2839 7.77445L39.967 6.08707L38.6546 2.37457C38.5641 2.11839 38.3642 1.91576 38.1093 1.82161C38.0068 1.78378 37.8995 1.76501 37.7927 1.76501Z" fill="#374874"/>
+</svg>
diff --git a/addons/sale/static/src/img/quotation.svg b/addons/sale/static/src/img/quotation.svg
new file mode 100644
index 00000000000..9cca8d06e22
--- /dev/null
+++ b/addons/sale/static/src/img/quotation.svg
@@ -0,0 +1,19 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.2304 3.28046C49.0383 2.81404 49.6978 3.18771 49.7004 4.11811L49.8128 43.786C49.8155 44.7164 49.1603 45.8512 48.3525 46.3176L21.368 61.8971C20.5583 62.3646 19.8988 61.9888 19.8962 61.0584L19.7837 21.3905C19.7811 20.4601 20.4362 19.3275 21.2459 18.86L48.2304 3.28046Z" fill="white"/>
+<path d="M47.7615 6.3496L47.8677 43.7991L21.831 58.7543L21.7331 21.3906L47.7615 6.3496ZM47.7615 5.89246C47.6825 5.89246 47.6036 5.91289 47.5328 5.95385L21.5044 20.9948C21.3627 21.0766 21.2756 21.2281 21.276 21.3918L21.3739 58.7555C21.3743 58.9185 21.4614 59.0688 21.6025 59.1503C21.6732 59.191 21.7521 59.2114 21.831 59.2114C21.9096 59.2114 21.9882 59.1912 22.0587 59.1507L48.0954 44.1956C48.2377 44.1138 48.3253 43.962 48.3249 43.7978L48.2187 6.3483C48.2182 6.18523 48.1309 6.03467 47.9895 5.95332C47.9189 5.91282 47.8402 5.89246 47.7615 5.89246Z" fill="#374874"/>
+<path d="M20.3243 61.999L18.2975 60.8211C18.0342 60.668 17.8707 60.3427 17.8694 59.8805L19.8962 61.0584C19.8975 61.5206 20.0609 61.8459 20.3243 61.999Z" fill="#FBDBD0"/>
+<path d="M47.2462 2.00083L49.2731 3.17868C49.0065 3.02373 48.6373 3.0456 48.2305 3.28046L46.2037 2.10261C46.6105 1.86775 46.9796 1.8459 47.2462 2.00083Z" fill="#FBDBD0"/>
+<path d="M19.8962 61.0584L17.8694 59.8805L17.757 20.2127L19.7838 21.3905L19.8962 61.0584Z" fill="#FBDBD0"/>
+<path d="M21.246 18.86L19.2192 17.6821L46.2037 2.10261L48.2305 3.28046L21.246 18.86Z" fill="#FBDBD0"/>
+<path d="M19.7838 21.3905L17.757 20.2127C17.7543 19.2823 18.4095 18.1496 19.2192 17.6821L21.246 18.86C20.4363 19.3274 19.7811 20.4601 19.7838 21.3905Z" fill="#FBDBD0"/>
+<path d="M37.2801 6.11085L35.2533 4.933C35.6885 4.68176 36.0829 4.65849 36.3677 4.824L38.3945 6.00185C38.1097 5.83634 37.7153 5.85961 37.2801 6.11085Z" fill="#C1DBF6"/>
+<path d="M30.604 13.7733L28.5772 12.5955L28.5715 10.5933L30.5983 11.7712L30.604 13.7733Z" fill="#C1DBF6"/>
+<path d="M32.1594 9.06731L30.1326 7.88946L35.2533 4.933L37.2801 6.11085L32.1594 9.06731Z" fill="#C1DBF6"/>
+<path d="M30.5983 11.7712L28.5715 10.5933C28.5687 9.59961 29.2678 8.38873 30.1326 7.88946L32.1594 9.06731C31.2946 9.5666 30.5955 10.7775 30.5983 11.7712Z" fill="#C1DBF6"/>
+<path d="M37.2802 6.11087C38.145 5.61158 38.8486 6.01258 38.8515 7.00627L38.8571 9.00844L39.8945 8.40952C40.7556 7.91235 41.4574 8.31228 41.4602 9.30182L41.4646 10.8263C41.465 10.9925 41.3765 11.1464 41.2325 11.2295L28.71 18.4593C28.4012 18.6377 28.0149 18.4154 28.0139 18.0588L28.0111 17.0667C28.0083 16.0771 28.7056 14.8695 29.5667 14.3723L30.6041 13.7734L30.5984 11.7712C30.5956 10.7775 31.2947 9.56662 32.1594 9.06735L37.2802 6.11087Z" fill="#C1DBF6"/>
+<path d="M46.8679 1.899C47.0022 1.899 47.121 1.92947 47.2182 1.98684C47.2182 1.98684 49.27 3.17736 49.2701 3.17736C49.5346 3.32947 49.6991 3.65459 49.7004 4.11809L49.8129 43.786C49.8156 44.7164 49.1604 45.8511 48.3525 46.3177L21.368 61.8971C21.1321 62.0333 20.9091 62.0977 20.7113 62.0977C20.5657 62.0977 20.4337 62.0628 20.3203 61.9958L18.2975 60.8212C18.0341 60.6681 17.8707 60.3428 17.8694 59.8806L17.7569 20.2126C17.7543 19.2823 18.4095 18.1497 19.2192 17.6822L28.5764 12.2797L28.5716 10.5935C28.5688 9.59969 29.2679 8.38876 30.1327 7.88954L35.2534 4.93306C35.5058 4.7873 35.7444 4.71832 35.956 4.71832C36.1092 4.71832 36.2481 4.75459 36.3678 4.82401L38.3943 6.00179C38.3936 6.00134 38.3928 6.00113 38.3921 6.00079C38.542 6.08705 38.6605 6.2268 38.7401 6.41174L46.2037 2.10259C46.4448 1.96342 46.6726 1.899 46.8679 1.899ZM38.3943 6.00179L38.3946 6.00193L38.3943 6.00179ZM46.868 0.984741C46.5039 0.984741 46.1161 1.09747 45.7466 1.31075L38.9199 5.25217C38.907 5.2438 38.8939 5.23564 38.8807 5.22762C38.8718 5.22204 38.8628 5.21658 38.8537 5.21132L36.8272 4.03354C36.5687 3.88344 36.2675 3.80408 35.9561 3.80408C35.5741 3.80408 35.1839 3.91747 34.7963 4.14124L29.6755 7.09784C28.5212 7.76412 27.6536 9.26803 27.6573 10.5961L27.6606 11.7527L18.762 16.8905C17.6642 17.5243 16.8391 18.9536 16.8427 20.2152L16.9551 59.8832C16.9573 60.6568 17.2791 61.2868 17.838 61.6117C17.8384 61.6119 19.7688 62.7328 19.8572 62.7841C20.1103 62.9332 20.4057 63.012 20.7113 63.012C21.0791 63.012 21.4537 62.9033 21.8251 62.689L48.8096 47.1095C49.9064 46.4762 50.7308 45.0462 50.7272 43.7834L50.6147 4.11555C50.6125 3.34033 50.2895 2.7102 49.7283 2.3862C49.7052 2.37281 47.677 1.19603 47.677 1.19603C47.4452 1.0591 47.1634 0.984741 46.868 0.984741Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9177 24.3392C39.9178 24.3392 39.9179 24.3393 39.8187 24.5437L39.9179 24.3393C40.0315 24.3944 40.0788 24.5312 40.0237 24.6447C39.9686 24.7581 39.8322 24.8055 39.7187 24.7507C39.7186 24.7506 39.7184 24.7506 39.7182 24.7505L39.8181 24.5449C39.7182 24.7505 39.7181 24.7504 39.7182 24.7505L39.7165 24.7497C39.7142 24.7486 39.7102 24.7468 39.7045 24.7442C39.693 24.7392 39.6749 24.7314 39.6503 24.7216C39.6011 24.7021 39.5263 24.6746 39.4282 24.6451C39.2319 24.5859 38.9429 24.5185 38.5798 24.4893C37.8552 24.4309 36.8305 24.5237 35.6499 25.1434C34.4535 25.7715 32.9548 26.9463 31.9507 28.3042C30.9413 29.6695 30.4785 31.1486 31.1882 32.4419C31.6049 33.2012 32.2139 33.49 32.9519 33.5488C33.7115 33.6093 34.5889 33.4243 35.5125 33.229L35.5183 33.2277C36.4214 33.0367 37.3696 32.8362 38.2121 32.9079C39.0777 32.9815 39.8464 33.3438 40.3598 34.2709C40.9369 35.3131 40.9157 36.4169 40.4902 37.4453C40.0672 38.4676 39.2457 39.4166 38.2138 40.1836C36.1556 41.7135 33.1879 42.5703 30.6747 41.7892C30.5541 41.7518 30.4868 41.6237 30.5242 41.5031C30.5617 41.3826 30.6898 41.3152 30.8104 41.3527C33.1467 42.0788 35.9645 41.2859 37.9411 39.8168C38.9265 39.0843 39.6847 38.1964 40.0678 37.2706C40.4483 36.3508 40.4597 35.3951 39.9599 34.4924C39.5333 33.7221 38.9159 33.4265 38.1734 33.3634C37.4096 33.2984 36.53 33.481 35.607 33.6762L35.5703 33.684C34.6772 33.8729 33.7435 34.0704 32.9156 34.0045C32.055 33.9359 31.2919 33.5811 30.7874 32.6619C29.9465 31.1294 30.5386 29.4452 31.5832 28.0324C32.6331 26.6124 34.1877 25.3947 35.4374 24.7387C36.7027 24.0744 37.8153 23.9691 38.6165 24.0336C39.0162 24.0658 39.3372 24.1402 39.5601 24.2074C39.6716 24.241 39.7588 24.2728 39.8192 24.2968C39.8494 24.3088 39.8729 24.3189 39.8894 24.3262C39.8977 24.3299 39.9042 24.3328 39.909 24.3351L39.9148 24.3378L39.9167 24.3387L39.9174 24.339L39.9177 24.3392Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.5181 22.5457C35.6443 22.5457 35.7466 22.648 35.7466 22.7742V43.5597C35.7466 43.6859 35.6443 43.7883 35.5181 43.7883C35.3918 43.7883 35.2895 43.6859 35.2895 43.5597V22.7742C35.2895 22.648 35.3918 22.5457 35.5181 22.5457Z" fill="#374874"/>
+<path d="M49.5169 33.14C53.8497 30.6384 57.3723 32.6475 57.3864 37.6246C57.4005 42.6017 53.9008 48.6651 49.568 51.1667C45.2366 53.6674 41.714 51.6599 41.6999 46.6812C41.6857 41.7025 45.1855 35.6407 49.5169 33.14Z" fill="#374874"/>
+<path d="M54.0353 35.226L54.7045 35.6559L47.1187 48.2591L44.3662 46.6905L45.0513 45.5022L47.1348 46.6911L54.0353 35.226Z" fill="white"/>
+</svg>
diff --git a/addons/sale/static/src/js/sale_portal_sidebar.js b/addons/sale/static/src/js/sale_portal_sidebar.js
index 4241e5a9636..d9d4b3e10e1 100644
--- a/addons/sale/static/src/js/sale_portal_sidebar.js
+++ b/addons/sale/static/src/js/sale_portal_sidebar.js
@@ -73,7 +73,7 @@ publicWidget.registry.SalePortalSidebar = PortalSidebar.extend({
                     if (!text) {
                         break;
                     }
-                    lastLI = $("<li class='nav-item'>").append($('<a class="nav-link" style="max-width: 200px;" href="#' + id + '"/>').text(text)).appendTo($bsSidenav);
+                    lastLI = $("<li class='nav-item'>").append($('<a class="nav-link p-0" href="#' + id + '"/>').text(text)).appendTo($bsSidenav);
                     lastUL = false;
                     break;
                 case "h3":
@@ -86,7 +86,7 @@ publicWidget.registry.SalePortalSidebar = PortalSidebar.extend({
                         if (!lastUL) {
                             lastUL = $("<ul class='nav flex-column'>").appendTo(lastLI);
                         }
-                        $("<li class='nav-item'>").append($('<a class="nav-link" style="max-width: 200px;" href="#' + id + '"/>').text(text)).appendTo(lastUL);
+                        $("<li class='nav-item'>").append($('<a class="nav-link p-0" href="#' + id + '"/>').text(text)).appendTo(lastUL);
                     }
                     break;
             }
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 84b1da3ba4f..32a0a7ccd40 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -19,18 +19,28 @@
     </template>
 
     <template id="portal_my_home_sale" name="Show Quotations / Sales Orders" customize_show="True" inherit_id="portal.portal_my_home" priority="20">
-        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+            <t t-set="portal_client_category_enable" t-value="True"/>
+            <t t-set="portal_alert_category_enable" t-value="True"/>
+        </xpath>
+        <div id="portal_alert_category" position="inside">
             <t t-call="portal.portal_docs_entry">
-                <t t-set="title">Quotations</t>
-                <t t-set="url" t-value="'/my/quotes'"/>
+                <t t-set="bg_color" t-value="'alert alert-primary'"/>
                 <t t-set="placeholder_count" t-value="'quotation_count'"/>
+                <t t-set="title">Quotations to review</t>
+                <t t-set="url" t-value="'/my/quotes'"/>
+                <t t-set="show_count" t-value="True"/>
             </t>
+        </div>
+        <div id="portal_client_category" position="inside">
             <t t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/sale/static/src/img/bag.svg'"/>
                 <t t-set="title">Sales Orders</t>
                 <t t-set="url" t-value="'/my/orders'"/>
+                <t t-set="text">Follow, view or pay your orders</t>
                 <t t-set="placeholder_count" t-value="'order_count'"/>
             </t>
-        </xpath>
+        </div>
     </template>
 
     <template id="portal_my_quotations" name="My Quotations">
@@ -40,6 +50,9 @@
             <t t-call="portal.portal_searchbar">
                 <t t-set="title">Quotations</t>
             </t>
+            <div t-if="not quotations" class="alert alert-warning" role="alert">
+                There are currently no quotations for your account.
+            </div>
             <t t-if="quotations" t-call="portal.portal_table">
                 <thead>
                     <tr class="active">
@@ -56,9 +69,9 @@
                         <td class="text-end"><span t-field="quotation.date_order"/></td>
                         <td class="text-end"><span t-field="quotation.validity_date"/></td>
                         <td class="text-center">
-                            <span t-if="quotation.state == 'cancel'" class="badge rounded-pill text-bg-secondary">
+                            <span t-if="quotation.state == 'cancel'" class="badge rounded-pill text-bg-danger">
                                 <i class="fa fa-fw fa-remove"/> Cancelled</span>
-                            <span t-if="quotation.is_expired" class="badge rounded-pill text-bg-secondary">
+                            <span t-if="quotation.is_expired" class="badge rounded-pill text-bg-danger">
                                 <i class="fa fa-fw fa-clock-o"/> Expired</span>
                         </td>
                         <td class="text-end">
@@ -67,7 +80,6 @@
                     </tr>
                 </t>
             </t>
-            <p t-else="">There are currently no quotations for your account.</p>
         </t>
     </template>
 
@@ -76,8 +88,11 @@
             <t t-set="breadcrumbs_searchbar" t-value="True"/>
 
             <t t-call="portal.portal_searchbar">
-                <t t-set="title">Sales Orders</t>
+                <t t-set="title">Your Orders</t>
             </t>
+            <div t-if="not orders" class="alert alert-warning" role="alert">
+                There are currently no sales orders for your account.
+            </div>
             <t t-if="orders" t-call="portal.portal_table">
                 <thead>
                     <tr class="active">
@@ -118,40 +133,38 @@
                 <t t-call="portal.portal_back_in_edit_mode"/>
             </t>
 
-            <div class="row mt16 o_portal_sale_sidebar">
+            <div class="row mt-3 o_portal_sale_sidebar">
                 <!-- Sidebar -->
                 <t t-call="portal.portal_record_sidebar">
-                    <t t-set="classes" t-value="'col-lg-auto d-print-none'"/>
+                    <t t-set="classes" t-value="'d-print-none col-lg-3 col-xl-4'"/>
 
                     <t t-set="title">
-                        <h2 class="mb-0"><b t-field="sale_order.amount_total" data-id="total_amount"/> </h2>
+                        <h2 t-field="sale_order.amount_total" data-id="total_amount"/>
                     </t>
                     <t t-set="entries">
-                        <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
-                            <li class="list-group-item d-grid align-content-start">
-                                <a t-if="sale_order._has_to_be_signed()" role="button" class="btn btn-primary mb8" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#">
+                        <div class="d-flex flex-column gap-4">
+                            <div class="d-flex flex-column gap-1 order-md-last order-lg-first">
+                                <a t-if="sale_order._has_to_be_signed()" role="button" class="btn btn-primary d-block" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#">
                                     <i class="fa fa-check"/><t t-if="sale_order._has_to_be_paid()"> Sign &amp; Pay</t><t t-else=""> Accept &amp; Sign</t>
                                 </a>
-                                <a t-elif="sale_order._has_to_be_paid()" role="button" id="o_sale_portal_paynow" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#" t-att-class="'mb8 %s' % ('btn btn-light' if sale_order.transaction_ids else 'btn btn-primary')" >
+                                <a t-elif="sale_order._has_to_be_paid()" role="button" id="o_sale_portal_paynow" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#" t-att-class="'d-block %s' % ('btn btn-light' if sale_order.transaction_ids else 'btn btn-primary')" >
                                     <i class="fa fa-check"/> <t t-if="not sale_order.signature">Accept &amp; Pay</t><t t-else="">Pay Now</t>
                                 </a>
-                                <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
-                                    <div class="btn-group flex-grow-1 mb-1">
-                                        <a class="btn btn-secondary o_print_btn o_portal_invoice_print" t-att-href="sale_order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="View Details" target="_blank"><i class="fa fa-print"/> View Details</a>
-                                    </div>
+                                <div class="o_download_pdf">
+                                    <a class="btn btn-secondary o_print_btn o_portal_invoice_print d-block" t-att-href="sale_order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="View Details" target="_blank"><i class="fa fa-print"/> View Details</a>
                                 </div>
-                            </li>
+                            </div>
 
-                            <li class="navspy list-group-item ps-0 flex-grow-1" t-ignore="true" role="complementary">
+                            <div class="navspy flex-grow-1 ps-0" t-ignore="true" role="complementary">
                                 <ul class="nav flex-column bs-sidenav"></ul>
-                            </li>
+                            </div>
 
                             <t t-if="not sale_order.is_expired and sale_order.state in ['draft', 'sent']">
-                                <li t-if="sale_order.validity_date" class="list-group-item">
-                                    <small><b class="text-muted">This offer expires on</b></small>
+                                <div t-if="sale_order.validity_date">
+                                    <small><b>This offer expires on</b></small>
                                     <div t-field="sale_order.validity_date"></div>
-                                </li>
-                                <li t-if="sale_order.amount_undiscounted - sale_order.amount_untaxed &gt; 0.01" class="list-group-item flex-grow-1">
+                                </div>
+                                <div t-if="sale_order.amount_undiscounted - sale_order.amount_untaxed &gt; 0.01" class="list-group-item flex-grow-1">
                                     <small><b class="text-muted">Your advantage</b></small>
                                     <small>
                                         <b t-field="sale_order.amount_undiscounted"
@@ -167,34 +180,29 @@
                                         <h4 t-field="sale_order.amount_untaxed" class="text-success mb-0" data-id="total_untaxed"/>
                                         <small>(<span t-field="sale_order.amount_total" data-id="total_amount"/> Incl. tax)</small>
                                     </t>
-                                </li>
+                                </div>
                             </t>
 
-                            <li t-if="sale_order.user_id" class="list-group-item flex-grow-1">
-                                <div class="small mb-1">
-                                    <strong class="text-muted">Salesperson</strong>
-                                </div>
-                                <div class="row flex-nowrap">
-                                    <div class="col flex-grow-0 pe-2">
-                                        <img class="rounded-circle mr4 float-start o_portal_contact_img"
-                                            t-att-src="image_data_uri(sale_order.user_id.avatar_1024)"
-                                            alt="Contact"/>
-                                    </div>
-                                    <div class="col ps-0" style="min-width: 150px">
-                                        <span t-field="sale_order.user_id"
-                                            t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
-                                        <a href="#discussion" class="small">
-                                            <i class="fa fa-comment"></i> Send message
-                                        </a>
+                            <div t-if="sale_order.user_id">
+                                <h6><small class="text-muted">Your contact</small></h6>
+                                <div class="o_portal_contact_details d-flex flex-column gap-2">
+                                    <div class="d-flex justify-content-start align-items-center gap-2">
+                                        <img class="o_avatar o_portal_contact_img rounded" t-att-src="image_data_uri(sale_order.user_id.avatar_1024)" alt="Contact"/>
+                                        <div>
+                                            <h6 class="mb-0" t-out="sale_order.user_id.name"/>
+                                            <a href="#discussion" class="d-flex align-items-center gap-2 small fw-bold">
+                                            Send message
+                                            </a>
+                                        </div>
                                     </div>
                                 </div>
-                            </li>
-                        </ul>
+                            </div>
+                        </div>
                     </t>
                 </t>
 
                 <!-- Page content -->
-                <div id="quote_content" class="col-12 col-lg justify-content-end">
+                <div id="quote_content" class="col-12 col-lg-9 col-xl-8 mt-5 mt-lg-0">
 
                     <!-- modal relative to the actions sign and pay -->
                     <div role="dialog" class="modal fade" id="modalaccept">
@@ -362,12 +370,12 @@
                     </div>
 
                     <!-- main content -->
-                    <div t-attf-class="card #{'pb-5' if report_type == 'html' else ''}" id="portal_sale_content">
+                    <div t-attf-class="#{'pb-5' if report_type == 'html' else ''}" id="portal_sale_content">
                         <div t-call="#{sale_order._get_name_portal_content_view()}"/>
                     </div>
 
                     <!-- bottom actions -->
-                    <div t-if="sale_order._has_to_be_signed() or sale_order._has_to_be_paid()" class="row justify-content-center text-center d-print-none pt-1 pb-4">
+                    <div t-if="sale_order._has_to_be_signed() or sale_order._has_to_be_paid()" class="d-flex justify-content-center gap-1 d-print-none">
 
                         <t t-if="sale_order._has_to_be_signed()">
                             <div class="col-sm-auto mt8">
@@ -388,8 +396,9 @@
                     </div>
 
                     <!-- chatter -->
-                    <div id="sale_order_communication" class="mt-4">
-                        <h2>History</h2>
+                    <hr/>
+                    <div id="sale_order_communication">
+                        <h4>History</h4>
                         <t t-call="portal.message_thread"/>
                     </div>
                 </div><!-- // #quote_content -->
@@ -404,14 +413,14 @@
     -->
     <template id="sale_order_portal_content" name="Sales Order Portal Content">
         <!-- Intro -->
-        <div id="introduction" t-attf-class="pb-2 pt-3 #{'card-header bg-white' if report_type == 'html' else ''}">
+        <div id="introduction" t-attf-class="#{'border-bottom-0 pt-0 pb-3 bg-white' if report_type == 'html' else ''}">
           <h2 class="my-0">
                 <t t-out="sale_order.type_name"/>
                 <em t-out="sale_order.name"/>
             </h2>
         </div>
 
-        <div t-attf-class="#{'card-body' if report_type == 'html' else ''}">
+        <div>
             <!-- Informations -->
             <div id="informations">
                 <div t-if="sale_order.get_portal_last_transaction() and not invoices and sale_order.state in ('sent', 'sale') and portal_confirmation == 'pay' and not success and not error" t-att-data-order-id="sale_order.id">
@@ -468,27 +477,27 @@
                 <div t-if="invoices" class="row">
                     <div class="col">
                         <strong class="d-block mb-1">Invoices</strong>
-                        <ul class="list-group mb-4">
+                        <ul class="list-group mb-4 d-flex gap-3">
                             <t t-foreach="invoices" t-as="i">
                                 <t t-set="report_url" t-value="i.get_portal_url(report_type='pdf', download=True)"/>
                                 <t t-set="authorized_tx_ids" t-value="i.authorized_transaction_ids"/>
-                                <div class="d-flex flex-wrap align-items-center justify-content-between">
+                                <li class="d-flex flex-column align-items-start">
                                     <div>
                                         <a t-att-href="report_url">
                                             <span t-out="i.name"/>
                                         </a>
-                                        <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
+                                        <span t-if="i.payment_state in ('paid', 'in_payment')" class="badge text-bg-success small orders_label_text_align">
+                                            <i class="fa fa-fw fa-check"/> <b>Paid</b>
+                                        </span>
+                                        <span t-elif="authorized_tx_ids" class="badge text-bg-success small orders_label_text_align">
+                                            <i class="fa fa-fw fa-check"/> <b>Authorized</b>
+                                        </span>
+                                        <span t-else="" class="badge text-bg-primary small orders_label_text_align fw-normal">
+                                            <i class="fa fa-fw fa-clock-o"/>Waiting Payment
+                                        </span>
                                     </div>
-                                    <span t-if="i.payment_state in ('paid', 'in_payment')" class="small badge text-bg-success orders_label_text_align">
-                                        <i class="fa fa-fw fa-check"/> <b>Paid</b>
-                                    </span>
-                                    <span t-elif="authorized_tx_ids" class="small badge text-bg-success orders_label_text_align">
-                                        <i class="fa fa-fw fa-check"/> <b>Authorized</b>
-                                    </span>
-                                    <span t-else="" class="small badge text-bg-info orders_label_text_align">
-                                        <i class="fa fa-fw fa-clock-o"/> <b>Waiting Payment</b>
-                                    </span>
-                                </div>
+                                    <div class="d-lg-inline-block small">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
+                                </li>
                             </t>
                         </ul>
                     </div>
@@ -498,20 +507,18 @@
             <section id="details" style="page-break-inside: auto;" class="mt32">
                 <t t-if="product_documents">
                     <h3 id="details">Documents</h3>
-                    <hr class="mt-0 mb-1"/>
-
-                    <div class="row">
+                    <div class="d-flex flex-grow-1 flex-wrap gap-1 mb32">
                         <t t-foreach="product_documents" t-as="document_sudo">
-                            <div class="col-lg-2 col-md-3 col-sm-6">
-                                <div class="mb-2 position-relative text-center">
+                            <div class="bg-light p-2 rounded">
+                                <div class="position-relative text-center">
                                     <t t-set="attachment_sudo" t-value="document_sudo.ir_attachment_id"/>
                                     <t t-set="target" t-value="attachment_sudo.type == 'url' and '_blank' or '_self'"/>
-                                    <a t-att-href="sale_order.get_portal_url('/document/' + str(document_sudo.id))" t-att-target="target">
+                                    <a t-att-href="sale_order.get_portal_url('/document/' + str(document_sudo.id))" t-att-target="target" class="d-flex flex-row">
                                         <div class="o_image"
                                                 t-att-title="attachment_sudo.name"
                                                 t-att-data-mimetype="attachment_sudo.mimetype"
                                                 t-attf-data-src="/web/image/#{attachment_sudo.id}/100x80?access_token=#{attachment_sudo.access_token}"/>
-                                        <div class="o_portal_product_document" t-out="attachment_sudo.name"/>
+                                        <div class="o_portal_product_document align-self-center" t-out="attachment_sudo.name"/>
                                     </a>
                                 </div>
                             </div>
@@ -612,10 +619,8 @@
                     </table>
                 </div>
 
-                <div id="total" class="row" name="total" style="page-break-inside: avoid;">
-                    <div class="col-xs-7 col-md-5 ms-auto">
-                        <t t-call="sale.sale_order_portal_content_totals_table"/>
-                    </div>
+                <div id="total" name="total" style="page-break-inside: avoid;">
+                    <t t-call="sale.sale_order_portal_content_totals_table"/>
                 </div>
             </section>
 
@@ -631,7 +636,6 @@
 
             <section t-if="not is_html_empty(sale_order.note)" id="terms" class="mt-5">
                 <h3 class="">Terms &amp; Conditions</h3>
-                <hr class="mt-0 mb-1"/>
                 <t t-if="sale_order.terms_type == 'html'">
                     <!-- Note is plain text. This ensures a clickable link  -->
                     <t t-set="tc_url" t-value="'%s/terms' % (sale_order.get_base_url())"/>
diff --git a/addons/sale_stock/views/sale_stock_portal_template.xml b/addons/sale_stock/views/sale_stock_portal_template.xml
index f11384ef70e..419f5f61604 100644
--- a/addons/sale_stock/views/sale_stock_portal_template.xml
+++ b/addons/sale_stock/views/sale_stock_portal_template.xml
@@ -6,7 +6,7 @@
         inherit_id="sale.sale_order_portal_content">
         <xpath expr="//div[@id='so_date']" position="after">
             <div t-if="sale_order.incoterm" class="row">
-                <div class="mb-3 col-6 ms-auto">
+                <div class="mb-3 col-6">
                     <div class="col-auto mw-100 mb-2" t-if="sale_order.incoterm" name="invoice_incoterm_id">
                         <strong>Incoterm:</strong>
                         <p t-if="sale_order.incoterm_location">
@@ -29,20 +29,20 @@
                         <t t-set="delivery_report_url"
                            t-value="'/my/picking/pdf/%s?%s' % (picking.id, keep_query())"/>
                         <div name="delivery_order"
-                            class="d-flex flex-wrap align-items-center justify-content-between">
+                            class="d-flex flex-wrap align-items-center">
                             <div name="delivery_details">
                                 <a t-att-href="delivery_report_url">
                                     <span t-esc="picking.name"/>
                                 </a>
-                                <div class="small d-lg-inline-block ms-3">
+                                <div class="small d-lg-inline-block ms-3" t-if="picking.date_done or picking.scheduled_date">
                                     Date:
                                     <span class="text-muted"
-                                        t-field="picking.date_done"
-                                        t-options="{'date_only': True}"/>
+                                          t-field="picking.date_done"
+                                          t-options="{'date_only': True}"/>
                                     <span t-if="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
-                                        class="text-muted"
-                                        t-field="picking.scheduled_date"
-                                        t-options="{'date_only': True}"/>
+                                          class="text-muted"
+                                          t-field="picking.scheduled_date"
+                                          t-options="{'date_only': True}"/>
                                 </div>
                             </div>
                             <div t-if="picking.state == 'done'">
@@ -56,11 +56,11 @@
                             </div>
                             <span t-elif="picking.state == 'cancel'"
                                 class="small badge text-bg-danger orders_label_text_align">
-                                <i class="fa fa-fw fa-times"/> <b>Cancelled</b>
+                                <i class="fa fa-fw fa-times"/>Cancelled
                             </span>
                             <span t-elif="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
                                 class="small badge text-bg-info orders_label_text_align">
-                                <i class="fa fa-fw fa-clock-o"/> <b>Preparation</b>
+                                <i class="fa fa-fw fa-clock-o"/>Preparation
                             </span>
                         </div>
                     </t>
diff --git a/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml b/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml
index 58f97479c6c..4f9d855d02e 100644
--- a/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml
+++ b/addons/sale_timesheet/views/sale_timesheet_portal_templates.xml
@@ -2,12 +2,12 @@
 <odoo>
 
     <template id="sale_order_portal_content_inherit" inherit_id="sale.sale_order_portal_template">
-        <xpath expr="//li[.//a[@id='print_invoice_report']]" position="after">
-            <li t-if="sale_order.timesheet_count > 0 and sale_order.state == 'sale'" class="list-group-item flex-grow-1">
+        <xpath expr="//div//h2[@data-id='total_amount']" position="after">
+            <div t-if="sale_order.timesheet_count > 0 and sale_order.state == 'sale'" class="flex-grow-1 w-100 mb-2">
                 <div class="btn-toolbar flex-sm-nowrap justify-content-center">
                     <a class="btn btn-primary w-100" t-att-href="'/my/timesheets?search_in=so&amp;search=%s' % sale_order.name">View Timesheets</a>
                 </div>
-            </li>
+            </div>
         </xpath>
     </template>
 
@@ -90,14 +90,14 @@
     </template>
 
     <template id="portal_invoice_page_inherit" inherit_id="account.portal_invoice_page">
-        <xpath expr="//t[@t-set='entries']/ul/li[.//a[@id='print_invoice_report']]" position="after">
-            <li class="list-group-item flex-grow-1">
+        <xpath expr="//t[@t-set='entries']/div/div/div[hasclass('o_download_pdf')]" position="inside">
+            <li t-if="invoice.timesheet_count > 0" class="list-group-item flex-grow-1 border-0">
                 <div class="btn-toolbar flex-sm-nowrap justify-content-center">
                     <div class="btn-group mb-1">
                         <t t-set="search_value" t-value="invoice.name"/>
                         <t t-if="invoice.state == 'draft'" t-set="search_value" t-value="invoice.id"/>
                         <a t-if="invoice.move_type == 'out_invoice' and invoice.state in ('draft', 'posted') and invoice.timesheet_count > 0"
-                        target="_blank" t-att-href="'/my/timesheets?search_in=invoice&amp;search=%s' % search_value">View Timesheets</a>
+                           target="_blank" t-att-href="'/my/timesheets?search_in=invoice&amp;search=%s' % search_value">View Timesheets</a>
                     </div>
                 </div>
             </li>
diff --git a/addons/website_crm_partner_assign/static/src/img/leads.svg b/addons/website_crm_partner_assign/static/src/img/leads.svg
new file mode 100644
index 00000000000..f3de077a103
--- /dev/null
+++ b/addons/website_crm_partner_assign/static/src/img/leads.svg
@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.0478 12.9588C40.1693 8.21713 27.1254 8.08518 18.9135 12.664C12.0258 16.5048 10.725 22.4396 15.1335 27.0518C20.5263 32.6935 25.9189 38.3351 31.3117 43.9769C30.8403 43.4837 30.9793 42.849 31.716 42.4383C32.5941 41.9485 33.9891 41.9627 34.8317 42.4698C35.5147 42.8809 35.625 43.4897 35.1745 43.9664C40.5342 38.2952 45.8938 32.6245 51.2535 26.9534C55.4662 22.4958 54.4345 16.8027 48.0478 12.9588Z" fill="#FBDBD0"/>
+<path d="M47.4442 29.8355C39.2324 34.4144 26.1885 34.2825 18.31 29.5406C17.0396 28.7761 15.9811 27.9384 15.1335 27.0517C20.4397 32.6029 25.7457 38.1539 31.0518 43.7051C31.1612 46.2939 31.2705 48.8825 31.3799 51.4714C31.391 51.7342 31.5651 51.9952 31.9041 52.1994C32.625 52.6332 33.8183 52.6452 34.5696 52.2263C34.945 52.017 35.1391 51.7396 35.1492 51.4604C35.2439 48.871 35.3386 46.2821 35.4332 43.6927C40.7067 38.1127 45.9801 32.5333 51.2535 26.9533C50.2694 27.9946 48.9992 28.9683 47.4442 29.8355Z" fill="#C1DBF6"/>
+<path d="M48.0478 12.9588C55.9263 17.7005 55.6561 25.2564 47.4442 29.8354C39.2323 34.4144 26.1885 34.2824 18.3099 29.5407C10.4314 24.7989 10.7016 17.243 18.9135 12.6641C27.1254 8.0851 40.1692 8.21705 48.0478 12.9588ZM46.5026 13.8204C39.4428 9.5714 27.7544 9.45319 20.3959 13.5563C13.0375 17.6594 12.7953 24.4301 19.8551 28.6791C26.9149 32.9281 38.6033 33.0463 45.9618 28.9432C53.3202 24.8401 53.5624 18.0694 46.5026 13.8204Z" fill="white"/>
+<path d="M26.413 17.2737C23.5893 17.2737 21.2922 14.9763 21.2922 12.1527C21.2922 9.32902 23.5893 7.03192 26.413 7.03192C29.2366 7.03192 31.5337 9.32902 31.5337 12.1527C31.5337 14.9763 29.2366 17.2737 26.413 17.2737Z" fill="white"/>
+<path d="M26.413 7.26049C29.115 7.26049 31.3053 9.45089 31.3053 12.1528C31.3053 14.8547 29.115 17.0451 26.413 17.0451C23.7111 17.0451 21.5207 14.8547 21.5207 12.1528C21.5207 9.45089 23.7111 7.26049 26.413 7.26049ZM26.413 6.80334C23.4633 6.80334 21.0636 9.20312 21.0636 12.1528C21.0636 15.1025 23.4633 17.5022 26.413 17.5022C29.3627 17.5022 31.7624 15.1025 31.7624 12.1528C31.7624 9.20312 29.3627 6.80334 26.413 6.80334Z" fill="#374874"/>
+<path d="M39.6005 28.0411C36.7768 28.0411 34.4795 25.744 34.4795 22.9204C34.4795 20.0967 36.7768 17.7994 39.6005 17.7994C42.4241 17.7994 44.7212 20.0967 44.7212 22.9204C44.7212 25.744 42.4241 28.0411 39.6005 28.0411Z" fill="white"/>
+<path d="M39.6004 18.028C42.3023 18.028 44.4927 20.2183 44.4927 22.9203C44.4927 25.6223 42.3023 27.8125 39.6004 27.8125C36.8985 27.8125 34.7081 25.6222 34.7081 22.9203C34.7081 20.2184 36.8985 18.028 39.6004 18.028ZM39.6004 17.5709C36.6507 17.5709 34.251 19.9706 34.251 22.9203C34.251 25.87 36.6507 28.2696 39.6004 28.2696C42.5501 28.2696 44.9498 25.87 44.9498 22.9203C44.9498 19.9706 42.5501 17.5709 39.6004 17.5709Z" fill="#374874"/>
+<path d="M26.413 7.26052C28.1044 7.26052 29.5951 8.1191 30.4737 9.42401C31.3942 9.35213 32.3206 9.3162 33.2471 9.3162C38.64 9.3162 44.0193 10.5342 48.0478 12.9588C48.0496 12.9598 48.0512 12.9609 48.053 12.9621C48.277 13.097 48.4928 13.2347 48.7036 13.3741C48.7715 13.4189 48.8366 13.4647 48.9031 13.51C49.0469 13.6079 49.1883 13.7067 49.3257 13.8066C49.3976 13.8588 49.4682 13.9114 49.5383 13.9641C49.6693 14.0627 49.7967 14.1623 49.9216 14.2626C49.9844 14.3131 50.0481 14.3633 50.1094 14.4143C50.2584 14.538 50.4021 14.6631 50.542 14.7893C50.5719 14.8162 50.6038 14.8427 50.6333 14.8698C50.8002 15.0231 50.9597 15.1783 51.1133 15.3349C51.1573 15.3799 51.1984 15.4254 51.2413 15.4706C51.3495 15.5843 51.4552 15.6986 51.5564 15.8139C51.6064 15.8707 51.6547 15.9281 51.7031 15.9855C51.7939 16.0932 51.8817 16.2015 51.9665 16.3103C52.011 16.3675 52.0558 16.4245 52.0987 16.482C52.1899 16.6042 52.2763 16.7273 52.3601 16.8509C52.389 16.8935 52.42 16.9357 52.4481 16.9785C52.5566 17.1442 52.6587 17.3108 52.7539 17.4785C52.7756 17.5167 52.7944 17.5554 52.8154 17.5937C52.8872 17.7245 52.9559 17.8559 53.0197 17.9879C53.048 18.0465 53.0742 18.1055 53.101 18.1643C53.1532 18.2791 53.2027 18.3943 53.2489 18.5098C53.2733 18.5707 53.2974 18.6319 53.3201 18.6931C53.3654 18.8152 53.4065 18.9375 53.4451 19.0601C53.4614 19.1117 53.4794 19.1632 53.4944 19.2147C53.5449 19.3879 53.5899 19.5614 53.6271 19.7354C53.6314 19.7557 53.634 19.776 53.6381 19.7963C53.6698 19.9504 53.6962 20.105 53.7174 20.2597C53.7252 20.3169 53.7305 20.3741 53.7369 20.4313C53.7504 20.5512 53.7613 20.6712 53.7685 20.7913C53.7723 20.8538 53.7752 20.9163 53.7773 20.979C53.7813 21.0993 53.7815 21.2196 53.7793 21.3401C53.7782 21.3969 53.7783 21.4538 53.7759 21.5106C53.769 21.6694 53.757 21.828 53.7392 21.9866C53.7374 22.0032 53.7369 22.0197 53.735 22.0363C53.7141 22.2111 53.6854 22.3856 53.6513 22.56C53.6411 22.6124 53.628 22.6646 53.6166 22.717C53.5896 22.8402 53.5603 22.9631 53.5268 23.0859C53.51 23.1474 53.4919 23.2087 53.4734 23.2701C53.4381 23.3874 53.3996 23.5044 53.3582 23.6211C53.3376 23.6796 53.3175 23.738 53.2953 23.7962C53.2434 23.9326 53.1865 24.0684 53.1262 24.2038C53.1103 24.2396 53.0964 24.2758 53.0799 24.3116C53.0011 24.482 52.9155 24.6516 52.8236 24.8202C52.8 24.8633 52.7736 24.906 52.7493 24.9491C52.6779 25.0749 52.6038 25.2003 52.5251 25.3251C52.4887 25.3827 52.4506 25.4399 52.4126 25.4973C52.3384 25.6095 52.2613 25.721 52.181 25.8321C52.1397 25.8894 52.0984 25.9465 52.0554 26.0036C51.9649 26.1235 51.8699 26.2426 51.7723 26.3612C51.7363 26.4049 51.7022 26.4491 51.6652 26.4926C51.5336 26.6475 51.3973 26.8013 51.2535 26.9535C45.9801 32.5332 40.7067 38.1127 35.4333 43.6927C35.3386 46.2821 35.2439 48.8711 35.1493 51.4605C35.1391 51.7396 34.9451 52.0171 34.5696 52.2263C34.2025 52.431 33.73 52.5328 33.2584 52.5328C32.765 52.5328 32.2728 52.4213 31.9042 52.1994C31.5651 51.9953 31.391 51.7343 31.3799 51.4714C31.2706 48.8825 31.1612 46.294 31.0519 43.7051C25.7458 38.1539 20.4397 32.6029 15.1336 27.0519C14.843 26.7479 14.5789 26.4378 14.3379 26.1233C14.2978 26.0709 14.2608 26.018 14.222 25.9652C14.1381 25.8514 14.0561 25.7371 13.9786 25.6219C13.9368 25.5597 13.897 25.4974 13.8571 25.435C13.7876 25.3264 13.7208 25.2172 13.657 25.1077C13.62 25.0443 13.5833 24.981 13.5483 24.9173C13.4853 24.8029 13.4265 24.6878 13.3696 24.5725C13.3413 24.5149 13.3113 24.4576 13.2845 24.3999C13.2147 24.2499 13.1506 24.0993 13.0911 23.9482C13.0823 23.9257 13.0716 23.9033 13.063 23.8809C12.9964 23.707 12.9376 23.5322 12.8846 23.357C12.8689 23.3051 12.8565 23.2528 12.842 23.2008C12.8074 23.0769 12.7749 22.9529 12.7471 22.8286C12.7327 22.7639 12.7205 22.6993 12.7079 22.6346C12.6857 22.5208 12.666 22.4067 12.6495 22.2925C12.6398 22.2259 12.6308 22.1594 12.6231 22.0927C12.6096 21.9762 12.5999 21.8597 12.5923 21.7431C12.5883 21.681 12.5831 21.6191 12.5807 21.5571C12.5753 21.4178 12.5754 21.2783 12.5784 21.1391C12.5793 21.101 12.5777 21.0631 12.5792 21.025C12.5859 20.848 12.5998 20.671 12.62 20.4942C12.6254 20.4473 12.6341 20.4008 12.6404 20.354C12.658 20.2236 12.6778 20.0934 12.7027 19.9635C12.7149 19.8998 12.7297 19.8365 12.7437 19.7729C12.7688 19.6587 12.7961 19.5446 12.8269 19.4308C12.8449 19.3643 12.8639 19.2978 12.8839 19.2312C12.918 19.1176 12.9557 19.0042 12.9955 18.8911C13.0176 18.8283 13.0389 18.7656 13.0627 18.703C13.1117 18.5745 13.1657 18.4466 13.222 18.3189C13.2421 18.2734 13.2598 18.2278 13.2808 18.1824C13.3605 18.0103 13.4466 17.8389 13.5397 17.6687C13.5599 17.6318 13.5831 17.5953 13.6039 17.5585C13.6792 17.4251 13.7576 17.2923 13.8413 17.1601C13.8787 17.1011 13.9189 17.0426 13.958 16.9838C14.0312 16.8737 14.1064 16.7639 14.1855 16.6548C14.2309 16.5922 14.2776 16.53 14.3249 16.4676C14.4059 16.3611 14.49 16.2552 14.5765 16.1497C14.6257 16.0899 14.6744 16.03 14.7254 15.9705C14.8235 15.856 14.9264 15.7426 15.0312 15.6295C15.0754 15.5818 15.1175 15.5338 15.1629 15.4862C15.3153 15.3272 15.4735 15.1696 15.6393 15.0138C15.6618 14.9927 15.6864 14.9721 15.7092 14.9509C15.8542 14.8167 16.0037 14.6836 16.1587 14.5521C16.2187 14.5012 16.2816 14.4512 16.3431 14.4007C16.4665 14.2995 16.5917 14.1988 16.7211 14.0993C16.7932 14.0438 16.867 13.989 16.941 13.9341C17.0687 13.8394 17.1993 13.7456 17.3326 13.6526C17.4088 13.5996 17.4848 13.5465 17.5628 13.4939C17.7088 13.3956 17.8593 13.2988 18.0117 13.2028C18.081 13.1589 18.1485 13.1146 18.2191 13.0713C18.4444 12.9333 18.6749 12.7972 18.9136 12.664C19.7556 12.1945 20.6507 11.7774 21.5835 11.4068C21.9436 9.0599 23.9654 7.26052 26.413 7.26052ZM26.413 6.3463C23.7077 6.3463 21.4189 8.16682 20.7839 10.7457C19.9606 11.091 19.1836 11.4667 18.4683 11.8655C18.236 11.9951 17.9984 12.1345 17.7417 12.2916C17.6901 12.3232 17.6403 12.355 17.5904 12.3871L17.5229 12.4301C17.3396 12.5457 17.1897 12.643 17.0521 12.7356C16.9778 12.7857 16.9055 12.8361 16.8333 12.8863L16.8103 12.9022C16.6691 13.0008 16.5313 13.0998 16.3966 13.1996C16.318 13.2579 16.24 13.3159 16.1638 13.3744C16.0392 13.4704 15.9119 13.5719 15.7631 13.6941L15.7056 13.7408C15.6589 13.7788 15.6123 13.8166 15.5672 13.855C15.4078 13.9903 15.2466 14.1332 15.088 14.2802L15.0703 14.296C15.0512 14.3128 15.0323 14.3297 15.0142 14.3466C14.8416 14.5088 14.6746 14.6743 14.5028 14.8537C14.4681 14.89 14.436 14.9251 14.404 14.9605L14.36 15.0087C14.2295 15.1494 14.1247 15.2663 14.031 15.3757C13.9846 15.4298 13.9397 15.4845 13.8948 15.5392L13.8701 15.5693C13.7713 15.6897 13.6821 15.8024 13.597 15.9144C13.5452 15.9827 13.4946 16.0502 13.4453 16.1182C13.3671 16.226 13.2859 16.3435 13.1968 16.4773L13.1634 16.5272C13.1314 16.575 13.0995 16.6227 13.0691 16.6706C12.9836 16.8055 12.8982 16.9488 12.8078 17.1089L12.7905 17.1383C12.7723 17.1689 12.7542 17.1994 12.7374 17.2302C12.637 17.4137 12.5406 17.605 12.4511 17.7983C12.4341 17.8351 12.4183 17.8722 12.4028 17.9093L12.3854 17.9503C12.314 18.1122 12.2576 18.248 12.2083 18.3775C12.1869 18.4338 12.1673 18.4895 12.1478 18.5455L12.1331 18.5876C12.0852 18.7235 12.0444 18.8479 12.0083 18.9679C11.9858 19.0429 11.9646 19.1173 11.9444 19.1917C11.9117 19.3127 11.8811 19.4384 11.8507 19.5766L11.841 19.6204C11.8283 19.6774 11.8158 19.7343 11.8048 19.7914C11.7793 19.9241 11.7569 20.0641 11.7343 20.2317L11.7283 20.2713C11.7221 20.311 11.7162 20.3507 11.7117 20.3904C11.6886 20.592 11.6731 20.7939 11.6656 20.9901C11.6643 21.025 11.6642 21.0595 11.6644 21.0941V21.1194C11.6606 21.2922 11.6615 21.4469 11.6671 21.5922C11.6692 21.6459 11.6728 21.6995 11.6766 21.7532L11.68 21.8026C11.6894 21.9469 11.7008 22.0763 11.7149 22.1978C11.7236 22.2731 11.7338 22.3482 11.7446 22.4235C11.7625 22.5467 11.7847 22.6766 11.8106 22.8096L11.816 22.8377C11.8283 22.901 11.8407 22.9644 11.8548 23.0278C11.8829 23.1535 11.9167 23.2864 11.9613 23.4465L11.9742 23.4945C11.9854 23.5372 11.9968 23.5798 12.0097 23.6223C12.072 23.8283 12.1373 24.02 12.2091 24.2077C12.2187 24.2325 12.2286 24.2562 12.2388 24.2797C12.3078 24.4545 12.3802 24.6236 12.4555 24.7854C12.4773 24.8323 12.5005 24.8788 12.5239 24.9252L12.5497 24.9769C12.6218 25.123 12.6846 25.2442 12.7476 25.3585C12.7858 25.428 12.8262 25.4979 12.8669 25.5679C12.9373 25.6885 13.0113 25.8095 13.0872 25.9282C13.132 25.9982 13.1749 26.0651 13.2197 26.1318C13.2963 26.2457 13.3809 26.365 13.4862 26.5078L13.5216 26.5565C13.5512 26.5975 13.5808 26.6384 13.612 26.6791C13.8787 27.0271 14.1681 27.365 14.4727 27.6836L30.153 44.0879L30.2323 45.965L30.4665 51.5101C30.4911 52.0911 30.8432 52.6279 31.4327 52.9827C31.9303 53.2823 32.5787 53.4471 33.2585 53.4471C33.9028 53.4471 34.5266 53.2972 35.0149 53.0249C35.6585 52.6662 36.0406 52.1082 36.063 51.494L36.2379 46.7103L36.3344 44.0704L46.566 33.2444L51.9181 27.5815C52.0642 27.4269 52.2095 27.2643 52.3622 27.0844C52.3897 27.0521 52.4164 27.0191 52.4429 26.9859L52.4782 26.9423C52.5933 26.8025 52.6938 26.6756 52.7853 26.5542C52.8321 26.4922 52.8766 26.4307 52.9211 26.3691C53.01 26.246 53.095 26.1231 53.1752 26.0018L53.1902 25.9792C53.2268 25.9239 53.2633 25.8686 53.2983 25.8132C53.3785 25.6861 53.459 25.551 53.5446 25.4001L53.5689 25.3584C53.5885 25.3251 53.6079 25.2917 53.6261 25.2583C53.7289 25.0696 53.8243 24.8804 53.9099 24.695C53.924 24.6647 53.9369 24.6341 53.9497 24.6036L53.9615 24.5758C54.0331 24.4147 54.0947 24.2663 54.1498 24.1216C54.1699 24.069 54.1888 24.0154 54.2077 23.9617L54.2204 23.9257C54.2674 23.7928 54.3108 23.6606 54.3491 23.5334C54.3698 23.4643 54.3901 23.3956 54.4089 23.3267C54.4439 23.1983 54.477 23.0626 54.5099 22.9119L54.5205 22.8648C54.5305 22.8217 54.5402 22.7786 54.5487 22.7355C54.5898 22.525 54.6206 22.3317 54.6429 22.1444C54.6455 22.1222 54.6475 22.1001 54.6491 22.0779C54.6681 21.906 54.6817 21.7281 54.6894 21.5501C54.6915 21.5017 54.6922 21.4532 54.6928 21.4049L54.6935 21.3571C54.6962 21.2115 54.6954 21.0779 54.6912 20.9487C54.6888 20.8778 54.6855 20.807 54.6812 20.7364C54.6735 20.6071 54.6618 20.474 54.6456 20.3293L54.6405 20.2823C54.6353 20.2333 54.63 20.1846 54.6233 20.1356C54.5994 19.9613 54.5693 19.7853 54.5339 19.6126C54.5308 19.5927 54.5265 19.5688 54.5214 19.5448C54.4814 19.3575 54.4326 19.1661 54.3723 18.959C54.3599 18.9166 54.3463 18.8746 54.3326 18.8328L54.3172 18.7852C54.2704 18.6364 54.2246 18.5022 54.1774 18.375C54.1519 18.3063 54.1249 18.2379 54.0976 18.1697C54.0479 18.0453 53.9925 17.9158 53.9334 17.7858L53.9166 17.7489C53.8925 17.6956 53.8683 17.6426 53.8427 17.5896C53.7765 17.4524 53.7025 17.3097 53.617 17.1538L53.5997 17.1211C53.5832 17.0895 53.5665 17.0579 53.5487 17.0265C53.4458 16.8453 53.3327 16.6603 53.2129 16.4775C53.1915 16.4447 53.1683 16.4113 53.1449 16.378L53.1168 16.3376C53.0166 16.1898 52.9232 16.0581 52.8315 15.9352C52.7911 15.881 52.7491 15.827 52.707 15.7729L52.688 15.7486C52.5942 15.6284 52.4982 15.5099 52.402 15.3959C52.3497 15.3339 52.297 15.2715 52.2425 15.2095C52.1431 15.0963 52.032 14.9752 51.904 14.8406L51.8612 14.7949C51.8301 14.7615 51.799 14.7283 51.7665 14.6951C51.5963 14.5215 51.4233 14.354 51.252 14.1966C51.2291 14.1755 51.2053 14.1547 51.1813 14.134L51.1534 14.1095C50.9978 13.969 50.847 13.8383 50.6936 13.7109C50.6437 13.6695 50.5917 13.6277 50.5396 13.5862L50.494 13.5497C50.355 13.438 50.2222 13.3345 50.0885 13.2339C50.0138 13.1777 49.9393 13.1223 49.8635 13.0671C49.7264 12.9675 49.5806 12.8651 49.4176 12.7543L49.3546 12.711C49.3058 12.6774 49.257 12.6438 49.2068 12.6108C48.9692 12.4536 48.748 12.3135 48.5319 12.1832C48.5278 12.1806 48.5235 12.178 48.5193 12.1755C44.4762 9.74212 39.0524 8.40193 33.2471 8.40193C32.4684 8.40193 31.6837 8.42705 30.9076 8.47661C29.8092 7.13364 28.166 6.3463 26.413 6.3463Z" fill="#374874"/>
+</svg>
diff --git a/addons/website_crm_partner_assign/static/src/img/quotation.svg b/addons/website_crm_partner_assign/static/src/img/quotation.svg
new file mode 100644
index 00000000000..9cca8d06e22
--- /dev/null
+++ b/addons/website_crm_partner_assign/static/src/img/quotation.svg
@@ -0,0 +1,19 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.2304 3.28046C49.0383 2.81404 49.6978 3.18771 49.7004 4.11811L49.8128 43.786C49.8155 44.7164 49.1603 45.8512 48.3525 46.3176L21.368 61.8971C20.5583 62.3646 19.8988 61.9888 19.8962 61.0584L19.7837 21.3905C19.7811 20.4601 20.4362 19.3275 21.2459 18.86L48.2304 3.28046Z" fill="white"/>
+<path d="M47.7615 6.3496L47.8677 43.7991L21.831 58.7543L21.7331 21.3906L47.7615 6.3496ZM47.7615 5.89246C47.6825 5.89246 47.6036 5.91289 47.5328 5.95385L21.5044 20.9948C21.3627 21.0766 21.2756 21.2281 21.276 21.3918L21.3739 58.7555C21.3743 58.9185 21.4614 59.0688 21.6025 59.1503C21.6732 59.191 21.7521 59.2114 21.831 59.2114C21.9096 59.2114 21.9882 59.1912 22.0587 59.1507L48.0954 44.1956C48.2377 44.1138 48.3253 43.962 48.3249 43.7978L48.2187 6.3483C48.2182 6.18523 48.1309 6.03467 47.9895 5.95332C47.9189 5.91282 47.8402 5.89246 47.7615 5.89246Z" fill="#374874"/>
+<path d="M20.3243 61.999L18.2975 60.8211C18.0342 60.668 17.8707 60.3427 17.8694 59.8805L19.8962 61.0584C19.8975 61.5206 20.0609 61.8459 20.3243 61.999Z" fill="#FBDBD0"/>
+<path d="M47.2462 2.00083L49.2731 3.17868C49.0065 3.02373 48.6373 3.0456 48.2305 3.28046L46.2037 2.10261C46.6105 1.86775 46.9796 1.8459 47.2462 2.00083Z" fill="#FBDBD0"/>
+<path d="M19.8962 61.0584L17.8694 59.8805L17.757 20.2127L19.7838 21.3905L19.8962 61.0584Z" fill="#FBDBD0"/>
+<path d="M21.246 18.86L19.2192 17.6821L46.2037 2.10261L48.2305 3.28046L21.246 18.86Z" fill="#FBDBD0"/>
+<path d="M19.7838 21.3905L17.757 20.2127C17.7543 19.2823 18.4095 18.1496 19.2192 17.6821L21.246 18.86C20.4363 19.3274 19.7811 20.4601 19.7838 21.3905Z" fill="#FBDBD0"/>
+<path d="M37.2801 6.11085L35.2533 4.933C35.6885 4.68176 36.0829 4.65849 36.3677 4.824L38.3945 6.00185C38.1097 5.83634 37.7153 5.85961 37.2801 6.11085Z" fill="#C1DBF6"/>
+<path d="M30.604 13.7733L28.5772 12.5955L28.5715 10.5933L30.5983 11.7712L30.604 13.7733Z" fill="#C1DBF6"/>
+<path d="M32.1594 9.06731L30.1326 7.88946L35.2533 4.933L37.2801 6.11085L32.1594 9.06731Z" fill="#C1DBF6"/>
+<path d="M30.5983 11.7712L28.5715 10.5933C28.5687 9.59961 29.2678 8.38873 30.1326 7.88946L32.1594 9.06731C31.2946 9.5666 30.5955 10.7775 30.5983 11.7712Z" fill="#C1DBF6"/>
+<path d="M37.2802 6.11087C38.145 5.61158 38.8486 6.01258 38.8515 7.00627L38.8571 9.00844L39.8945 8.40952C40.7556 7.91235 41.4574 8.31228 41.4602 9.30182L41.4646 10.8263C41.465 10.9925 41.3765 11.1464 41.2325 11.2295L28.71 18.4593C28.4012 18.6377 28.0149 18.4154 28.0139 18.0588L28.0111 17.0667C28.0083 16.0771 28.7056 14.8695 29.5667 14.3723L30.6041 13.7734L30.5984 11.7712C30.5956 10.7775 31.2947 9.56662 32.1594 9.06735L37.2802 6.11087Z" fill="#C1DBF6"/>
+<path d="M46.8679 1.899C47.0022 1.899 47.121 1.92947 47.2182 1.98684C47.2182 1.98684 49.27 3.17736 49.2701 3.17736C49.5346 3.32947 49.6991 3.65459 49.7004 4.11809L49.8129 43.786C49.8156 44.7164 49.1604 45.8511 48.3525 46.3177L21.368 61.8971C21.1321 62.0333 20.9091 62.0977 20.7113 62.0977C20.5657 62.0977 20.4337 62.0628 20.3203 61.9958L18.2975 60.8212C18.0341 60.6681 17.8707 60.3428 17.8694 59.8806L17.7569 20.2126C17.7543 19.2823 18.4095 18.1497 19.2192 17.6822L28.5764 12.2797L28.5716 10.5935C28.5688 9.59969 29.2679 8.38876 30.1327 7.88954L35.2534 4.93306C35.5058 4.7873 35.7444 4.71832 35.956 4.71832C36.1092 4.71832 36.2481 4.75459 36.3678 4.82401L38.3943 6.00179C38.3936 6.00134 38.3928 6.00113 38.3921 6.00079C38.542 6.08705 38.6605 6.2268 38.7401 6.41174L46.2037 2.10259C46.4448 1.96342 46.6726 1.899 46.8679 1.899ZM38.3943 6.00179L38.3946 6.00193L38.3943 6.00179ZM46.868 0.984741C46.5039 0.984741 46.1161 1.09747 45.7466 1.31075L38.9199 5.25217C38.907 5.2438 38.8939 5.23564 38.8807 5.22762C38.8718 5.22204 38.8628 5.21658 38.8537 5.21132L36.8272 4.03354C36.5687 3.88344 36.2675 3.80408 35.9561 3.80408C35.5741 3.80408 35.1839 3.91747 34.7963 4.14124L29.6755 7.09784C28.5212 7.76412 27.6536 9.26803 27.6573 10.5961L27.6606 11.7527L18.762 16.8905C17.6642 17.5243 16.8391 18.9536 16.8427 20.2152L16.9551 59.8832C16.9573 60.6568 17.2791 61.2868 17.838 61.6117C17.8384 61.6119 19.7688 62.7328 19.8572 62.7841C20.1103 62.9332 20.4057 63.012 20.7113 63.012C21.0791 63.012 21.4537 62.9033 21.8251 62.689L48.8096 47.1095C49.9064 46.4762 50.7308 45.0462 50.7272 43.7834L50.6147 4.11555C50.6125 3.34033 50.2895 2.7102 49.7283 2.3862C49.7052 2.37281 47.677 1.19603 47.677 1.19603C47.4452 1.0591 47.1634 0.984741 46.868 0.984741Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9177 24.3392C39.9178 24.3392 39.9179 24.3393 39.8187 24.5437L39.9179 24.3393C40.0315 24.3944 40.0788 24.5312 40.0237 24.6447C39.9686 24.7581 39.8322 24.8055 39.7187 24.7507C39.7186 24.7506 39.7184 24.7506 39.7182 24.7505L39.8181 24.5449C39.7182 24.7505 39.7181 24.7504 39.7182 24.7505L39.7165 24.7497C39.7142 24.7486 39.7102 24.7468 39.7045 24.7442C39.693 24.7392 39.6749 24.7314 39.6503 24.7216C39.6011 24.7021 39.5263 24.6746 39.4282 24.6451C39.2319 24.5859 38.9429 24.5185 38.5798 24.4893C37.8552 24.4309 36.8305 24.5237 35.6499 25.1434C34.4535 25.7715 32.9548 26.9463 31.9507 28.3042C30.9413 29.6695 30.4785 31.1486 31.1882 32.4419C31.6049 33.2012 32.2139 33.49 32.9519 33.5488C33.7115 33.6093 34.5889 33.4243 35.5125 33.229L35.5183 33.2277C36.4214 33.0367 37.3696 32.8362 38.2121 32.9079C39.0777 32.9815 39.8464 33.3438 40.3598 34.2709C40.9369 35.3131 40.9157 36.4169 40.4902 37.4453C40.0672 38.4676 39.2457 39.4166 38.2138 40.1836C36.1556 41.7135 33.1879 42.5703 30.6747 41.7892C30.5541 41.7518 30.4868 41.6237 30.5242 41.5031C30.5617 41.3826 30.6898 41.3152 30.8104 41.3527C33.1467 42.0788 35.9645 41.2859 37.9411 39.8168C38.9265 39.0843 39.6847 38.1964 40.0678 37.2706C40.4483 36.3508 40.4597 35.3951 39.9599 34.4924C39.5333 33.7221 38.9159 33.4265 38.1734 33.3634C37.4096 33.2984 36.53 33.481 35.607 33.6762L35.5703 33.684C34.6772 33.8729 33.7435 34.0704 32.9156 34.0045C32.055 33.9359 31.2919 33.5811 30.7874 32.6619C29.9465 31.1294 30.5386 29.4452 31.5832 28.0324C32.6331 26.6124 34.1877 25.3947 35.4374 24.7387C36.7027 24.0744 37.8153 23.9691 38.6165 24.0336C39.0162 24.0658 39.3372 24.1402 39.5601 24.2074C39.6716 24.241 39.7588 24.2728 39.8192 24.2968C39.8494 24.3088 39.8729 24.3189 39.8894 24.3262C39.8977 24.3299 39.9042 24.3328 39.909 24.3351L39.9148 24.3378L39.9167 24.3387L39.9174 24.339L39.9177 24.3392Z" fill="#374874"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.5181 22.5457C35.6443 22.5457 35.7466 22.648 35.7466 22.7742V43.5597C35.7466 43.6859 35.6443 43.7883 35.5181 43.7883C35.3918 43.7883 35.2895 43.6859 35.2895 43.5597V22.7742C35.2895 22.648 35.3918 22.5457 35.5181 22.5457Z" fill="#374874"/>
+<path d="M49.5169 33.14C53.8497 30.6384 57.3723 32.6475 57.3864 37.6246C57.4005 42.6017 53.9008 48.6651 49.568 51.1667C45.2366 53.6674 41.714 51.6599 41.6999 46.6812C41.6857 41.7025 45.1855 35.6407 49.5169 33.14Z" fill="#374874"/>
+<path d="M54.0353 35.226L54.7045 35.6559L47.1187 48.2591L44.3662 46.6905L45.0513 45.5022L47.1348 46.6911L54.0353 35.226Z" fill="white"/>
+</svg>
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 63947253c77..64c86da7e4d 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -286,18 +286,25 @@
     </template>
 
     <template id="portal_my_home_lead" name="Show Leads / Opps" inherit_id="portal.portal_my_home" priority="15">
-        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
+            <t t-set="portal_vendor_category_enable" t-value="True"/>
+        </xpath>
+        <div id="portal_vendor_category" position="inside">
             <t t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/website_crm_partner_assign/static/src/img/leads.svg'"/>
+                <t t-set="text">Follow and convert your leads</t>
                 <t t-set="title">Leads</t>
                 <t t-set="url" t-value="'/my/leads'"/>
                 <t t-set="placeholder_count" t-value="'lead_count'"/>
             </t>
             <t t-call="portal.portal_docs_entry">
+                <t t-set="icon" t-value="'/website_crm_partner_assign/static/src/img/quotation.svg'"/>
+                <t t-set="text">Follow and convert your opportunities</t>
                 <t t-set="title">Opportunities</t>
                 <t t-set="url" t-value="'/my/opportunities'"/>
                 <t t-set="placeholder_count" t-value="'opp_count'"/>
             </t>
-        </xpath>
+        </div>
     </template>
 
     <template id="portal_my_leads" name="My Leads">
@@ -307,7 +314,7 @@
             <t t-call="portal.portal_searchbar">
                 <t t-set="title">Leads</t>
             </t>
-            <div t-if="not leads" class="alert alert-warning mt8" role="alert">
+            <div t-if="not leads" class="alert alert-warning" role="alert">
                 There are no leads.
             </div>
             <t t-if="leads" t-call="portal.portal_table">
@@ -342,8 +349,8 @@
             <t t-call="portal.portal_searchbar">
                 <t t-set="title">Opportunities</t>
 
-                <div class="ms-lg-4" t-if="request.env.user.partner_id.grade_id or request.env.user.commercial_partner_id.grade_id">
-                    <button class="btn btn-success btn-sm" name='new_opp' data-bs-toggle="modal" data-bs-target=".modal_new_opp" title="Add an opportunity" aria-label="Add an opportunity">
+                <div t-if="request.env.user.partner_id.grade_id or request.env.user.commercial_partner_id.grade_id">
+                    <button class="btn btn-primary" name='new_opp' data-bs-toggle="modal" data-bs-target=".modal_new_opp" title="Add an opportunity" aria-label="Add an opportunity">
                         Create Opportunity
                     </button>
                 </div>
@@ -379,7 +386,7 @@
                 </div>
             </div>
             <t t-if="not opportunities">
-                <div class="alert alert-warning mt8" role="alert">
+                <div class="alert alert-warning" role="alert">
                     There are no opportunities.
                 </div>
             </t>
@@ -421,26 +428,24 @@
 
     <template id="portal_my_lead" name="My Lead">
         <t t-call="portal.portal_layout">
-            <div class="card">
-                <div class="card-header">
-                    <div class="row">
-                        <div class="col-lg-12">
-                            <span class="float-end" title="Rating" role="img" t-attf-aria-label="Rating: #{lead.priority} on 3">
-                                <t t-foreach="range(1, 4)" t-as="i">
-                                    <span t-attf-class="fa fa-lg fa-star#{'' if i &lt;= int(lead.priority) else '-o'}"/>
-                                </t>
-                            </span>
-                            <h4>
-                                Lead - <span t-field="lead.name"/>
-                            </h4>
-                        </div>
+            <div class="card border-0">
+                <div class="card-header bg-view">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <h4>
+                            Lead - <span t-field="lead.name"/>
+                        </h4>
+                        <span title="Rating" role="img" t-attf-aria-label="Rating: #{lead.priority} on 3">
+                            <t t-foreach="range(1, 4)" t-as="i">
+                                <span t-attf-class="fa fa-lg fa-star#{'' if i &lt;= int(lead.priority) else '-o'}"/>
+                            </t>
+                        </span>
                     </div>
                 </div>
                 <div class="card-body">
                     <div class="row">
                         <div class="col-lg-6">
                             <div class="row" t-if="lead.partner_name or lead.email_from or lead.partner_id">
-                                <label class="col-4">Customer</label>
+                                <label class="col-4 fw-bold">Customer</label>
                                 <address class="col-8">
                                     <div>
                                         <span t-if="lead.partner_name" itemprop="name" t-field="lead.partner_name" />
@@ -458,7 +463,7 @@
                                 </address>
                             </div>
                             <div class="row" t-if="lead.street or lead.street2 or lead.city or lead.state_id or lead.country_id">
-                                <label class="col-4">Address</label>
+                                <label class="col-4 fw-bold">Address</label>
                                 <address class="col-8">
                                     <div t-if="lead.street"><span t-field="lead.street"/></div>
                                     <div t-if="lead.street2"><span t-field="lead.street2"/></div>
@@ -471,21 +476,21 @@
                                 </address>
                             </div>
                             <div class="row" t-if="lead.user_id">
-                                <label class="col-4">Salesperson</label>
+                                <label class="col-4 fw-bold">Salesperson</label>
                                 <span class="col-8" t-field="lead.user_id" />
                             </div>
                             <div class="row" t-if="lead.team_id">
-                                <label class="col-4">Sales Team</label>
+                                <label class="col-4 fw-bold">Sales Team</label>
                                 <span class="col-8" t-field="lead.team_id" />
                             </div>
                         </div>
                         <div class="col-lg-6">
                             <div class="row" t-if="lead.date_deadline">
-                                <label class="col-4">Expected Closing</label>
+                                <label class="col-4 fw-bold">Expected Closing</label>
                                 <span class="col-8" t-field="lead.date_deadline" />
                             </div>
                             <div class="row" groups="!base.group_portal" t-if="lead.tag_ids">
-                                <label class="col-4">Tags</label>
+                                <label class="col-4 fw-bold">Tags</label>
                                 <span class="col-8">
                                     <t t-foreach="lead.tag_ids" t-as="tag">
                                         <span class="badge text-bg-info" t-esc="tag.name" />
@@ -493,22 +498,22 @@
                                 </span>
                             </div>
                             <div class="row mt16" t-if="lead.partner_assigned_id">
-                                <label class="col-4">Assigned Partner</label>
+                                <label class="col-4 fw-bold">Assigned Partner</label>
                                 <address class="col-8" t-field="lead.partner_assigned_id" t-options='{"widget": "contact", "fields": ["name", "email", "phone"], "no_marker": True}'/>
                             </div>
                             <div class="row mt16" t-if="lead.campaign_id">
-                                <label class="col-4">Campaign</label>
+                                <label class="col-4 fw-bold">Campaign</label>
                                 <span class="col-8" t-field="lead.campaign_id" />
                             </div>
                             <div class="row" t-if="lead.medium_id">
-                                <label class="col-4">Medium</label>
+                                <label class="col-4 fw-bold">Medium</label>
                                 <span class="col-8" t-field="lead.medium_id" />
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class='mt8'>
+            <div class='d-flex justify-content-center gap-2'>
                 <a role="button" href="#" class="btn btn-primary btn" data-bs-toggle="modal" data-bs-target=".modal_partner_assign_interested"><i class="fa fa-file-text-o"/> I'm interested</a>
                 <a role="button" href="#" class="btn btn-primary btn" data-bs-toggle="modal" data-bs-target=".modal_partner_assign_desinterested"><i class="fa fa-fw fa-times"/> I'm not interested</a>
                 <div class="modal fade modal_partner_assign_interested" role="form">
@@ -574,11 +579,10 @@
                     </div>
                 </div>
             </div>
-            <div class="row mt32">
-                <div class="col-lg-12">
-                    <h4><strong>Message and communication history</strong></h4>
-                </div>
-                <div class="col-lg-10 offset-lg-1 mt16">
+            <hr/>
+            <div>
+                <h4>Message and communication history</h4>
+                <div>
                     <t t-call="portal.message_thread">
                         <t t-set="object" t-value="lead"/>
                     </t>
@@ -591,22 +595,19 @@
         <t t-call="portal.portal_layout">
             <t t-call="portal.portal_record_layout">
                 <t t-set="card_header">
-                    <div class="row g-0">
-                        <div class="col-md">
-                            <h5 class="mb-2 mb-md-0">
-                                <small class="text-muted">Opportunity - </small>
-                                <span t-field="opportunity.name"/>
-                            </h5>
-                        </div>
-                        <div class="col-md text-md-end">
-                            <div class="d-inline-block">
-                                <small class="me-2 mt-1 float-start"><b>Stage:</b></small>
-                                <div t-foreach="stages[::-1]" t-as="stage" class="float-start">
-                                    <i t-if="not stage_first" class="oi oi-chevron-right ms-2 me-1 small" style="opacity: 0.5"/>
-                                    <button type="button" t-att-data="stage.id" t-att-opp="opportunity.id" t-attf-class="btn btn-sm px-2 opp-stage-button #{'btn-secondary' if opportunity.stage_id.name != stage.name else 'btn-primary disabled'}">
-                                        <span t-field="stage.name"/>
-                                    </button>
-                                </div>
+                    <div class="d-flex justify-content-between flex-wrap">
+                        <h4 class="mb-2 mb-md-0">
+                            Opportunity - 
+                            <span t-field="opportunity.name"/>
+                        </h4>
+                        <!-- todo: replace by design system wizard -->
+                        <div class="d-flex justify-content-between align-items-center gap-2">
+                            <p class="mb-0 fw-bold">Stage:</p>
+                            <div t-foreach="stages[::-1]" t-as="stage" class="d-flex justify-content-between align-items-center gap-2">
+                                <i t-if="not stage_first" class="oi oi-chevron-right small" style="opacity: 0.5"/>
+                                <button type="button" t-att-data="stage.id" t-att-opp="opportunity.id" t-attf-class="btn btn-sm px-2 opp-stage-button #{'btn-secondary' if opportunity.stage_id.name != stage.name else 'btn-primary disabled'}">
+                                    <span t-field="stage.name"/>
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -616,10 +617,11 @@
                     <div class="row">
                         <div class="col-lg-5 mb-4 mb-lg-0">
                             <div class="border-bottom d-flex justify-content-between py-2 mb-3 align-items-center">
-                                <h5 class="mb-0">
-                                    <span t-if="opportunity.company_currency" class="text-nowrap" t-esc="opportunity.expected_revenue" t-options="{'widget': 'monetary', 'display_currency': opportunity.company_currency}"/>
-                                    <span t-else="" class="text-nowrap" t-esc="opportunity.expected_revenue"/>
-                                    <span> at </span>
+                                <h5 class="d-flex align-items-center justify-content-between gap-2 mb-0 ">
+                                    <span>
+                                        <t t-if="opportunity.company_currency" t-out="opportunity.expected_revenue"
+                                           t-options="{'widget': 'monetary', 'display_currency': opportunity.company_currency}"/>
+                                        <t t-else="" t-out="opportunity.expected_revenue"/> at  </span>
                                     <span class="badge text-bg-info rounded-pill"><span t-field="opportunity.probability"/>%</span>
                                 </h5>
                                 <button type="button" data-bs-toggle="modal" data-bs-target=".modal_edit_opp" class="btn btn-link btn-sm"><i class="fa fa-pencil me-1"/>Edit</button>
@@ -663,42 +665,36 @@
                             <div class="row mb-3" t-if="opportunity.partner_name or opportunity.email_from or opportunity.contact_name">
                                 <strong class="col-12 col-sm-3">Customer</strong>
                                 <div class="col">
-                                    <div t-if="opportunity.partner_name or opportunity.contact_name">
-                                        <span class="fa fa-user fa-fw" role="img" aria-label="User" title="User"/>
-                                        <strong class="fst-italic" t-if="opportunity.partner_name" itemprop="name" t-field="opportunity.partner_name" />
-                                        <strong class="fst-italic" t-else="" itemprop="name" t-field="opportunity.contact_name" />
+                                    <div class="d-flex justify-content-start align-items-center gap-2 mb-2" t-if="opportunity.partner_name or opportunity.contact_name">
+                                        <img t-if="opportunity.partner_id.avatar_1024" class="o_avatar o_portal_contact_img rounded"
+                                             t-att-src="image_data_uri(opportunity.partner_id.avatar_512)"
+                                        alt="Contact" width="50"/>
+                                        <div class="d-flex flex-column justify-content-center">
+                                            <h5 class="mb-0" t-if="opportunity.partner_name" t-out="opportunity.partner_name"/>
+                                            <p class="mb-0 text-muted" t-else="" t-out="opportunity.contact_name"/>
+                                        </div>
                                     </div>
-                                    <div t-if="opportunity.phone">
-                                        <span class="fa fa-phone fa-fw" role="img" aria-label="Phone" title="Phone"/>
-                                        <span itemprop="telephone" t-field="opportunity.phone"/>
-                                    </div>
-                                    <div t-if="opportunity.mobile">
-                                        <span class="fa fa-mobile fa-fw" role="img" aria-label="Mobile" title="Mobile"/>
-                                        <span itemprop="mobile" t-field="opportunity.mobile"/>
-                                    </div>
-                                    <div t-if="opportunity.email_from">
-                                        <span class="fa fa-envelope fa-fw" role="img" aria-label="Email" title="Email"/>
-                                        <span itemprop="email" t-field="opportunity.email_from"/>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <strong class="col-12 col-sm-3">Address</strong>
-                                <address t-if="opportunity.street or opportunity.street2 or opportunity.city or opportunity.zip or opportunity.state_id or opportunity.country_id"
-                                    class="col d-flex align-items-baseline mb-0">
-                                    <span class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
                                     <div>
-                                        <div t-if="opportunity.street"><span t-field="opportunity.street"/></div>
-                                        <span t-else="" class="text-muted"> - </span>
-                                        <div t-if="opportunity.street2"><span t-field="opportunity.street2"/></div>
-                                        <div t-if="opportunity.city or opportunity.zip">
-                                            <span t-field="opportunity.city"/> <span t-field="opportunity.zip"/>
-                                        </div>
-                                        <div t-if="opportunity.state_id or opportunity.country_id">
-                                            <span t-field="opportunity.state_id"/> <span t-field="opportunity.country_id"/>
-                                        </div>
+                                        <div t-field="opportunity.partner_id" t-options='{"widget": "contact", "fields": ["email", "phone", "mobile"]}'/>
                                     </div>
-                                </address>
+                                 <address t-if="opportunity.street or opportunity.street2 or opportunity.city or opportunity.zip or opportunity.state_id or opportunity.country_id"
+                                    class="col d-flex align-items-baseline mb-0 mt-2">
+                                        <div class="d-flex flex-nowrap gap-3">
+                                            <div class="fa fa-map-marker fa-fw text-muted"></div>
+                                            <div>
+                                                <div t-if="opportunity.street"><span t-field="opportunity.street"/></div>
+                                                <span t-else="" class="text-muted"> - </span>
+                                                <div t-if="opportunity.street2"><span t-field="opportunity.street2"/></div>
+                                                <div t-if="opportunity.city or opportunity.zip">
+                                                    <span t-field="opportunity.city"/> <span t-field="opportunity.zip"/>
+                                                </div>
+                                                <div t-if="opportunity.state_id or opportunity.country_id">
+                                                    <span t-field="opportunity.state_id"/> <span t-field="opportunity.country_id"/>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </address>
+                                </div>
                             </div>
                         </div>
 
@@ -892,9 +888,11 @@
                 </t>
             </t>
 
-            <div class="mt32">
-                <h4><strong>Message and communication history</strong></h4>
-                <div class="mt16">
+            <hr/>
+
+            <div>
+                <h4>Message and communication history</h4>
+                <div>
                     <t t-call="portal.message_thread">
                         <t t-set="object" t-value="opportunity"/>
                     </t>
diff --git a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
index 8c796b5f4c7..fd5b1863e1a 100644
--- a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
+++ b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
@@ -142,7 +142,7 @@
     },
     {
         content: "See Quotations",
-        trigger: '.o_portal_docs a:contains("Quotations")',
+        trigger: '.o_portal_docs a:contains("Quotations to review")',
     },
     // Sign in as admin change config auth_signup -> b2b, sale_show_tax -> total and Logout
     {
@@ -276,10 +276,6 @@
         extra_trigger: 'header#top li.dropdown .js_usermenu.show',
         trigger: 'header#top .dropdown-menu a[href="/my/home"]:visible',
     },
-    {
-        content: "See Quotations",
-        trigger: '.o_portal_docs a:contains("Quotations") .badge:containsExact(2)',
-    },
 
     // enable extra step on website checkout and check extra step on checkout process
     {
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 77a4419cdef..4b74f13eba4 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -2649,13 +2649,13 @@
     </template>
 
     <template id="sale_order_re_order_btn" inherit_id="sale.sale_order_portal_template" name="Sale Order Order Again">
-        <xpath expr="//t[@t-set='entries']/ul/li" position="after">
-            <li t-if="request.website.enabled_portal_reorder_button and sale_order.with_user(request.env.user).sudo()._is_reorder_allowed()" class="list-group-item flex-grow-1">
+        <xpath expr="//t[@t-set='entries']/div/div" position="after">
+            <div t-if="request.website.enabled_portal_reorder_button and sale_order.with_user(request.env.user).sudo()._is_reorder_allowed()" class="list-group-item flex-grow-1">
                 <button class="btn btn-primary w-100 o_wsale_reorder_button" t-att-data-sale-order-id="sale_order.id">
                     <i class="fa fa-rotate-right me-1"/>
                     Order Again
                 </button>
-            </li>
+            </div>
         </xpath>
     </template>
 </odoo>
diff --git a/addons/website_slides/static/tests/tours/slides_course_reviews.js b/addons/website_slides/static/tests/tours/slides_course_reviews.js
index 78fe687fa03..c705c651814 100644
--- a/addons/website_slides/static/tests/tours/slides_course_reviews.js
+++ b/addons/website_slides/static/tests/tours/slides_course_reviews.js
@@ -32,7 +32,7 @@ registry.category('web_tour.tours').add('course_reviews', {
 }, {
     trigger: 'a[id="review-tab"]',
 }, {
-    trigger: 'button:contains("Visible")',
+    trigger: 'label:contains("Public")',
 }, {
     trigger: 'span:contains("Edit Review")',
     // If it fails here, it means the system is allowing you to add another review.
diff --git a/odoo/addons/base/views/ir_qweb_widget_templates.xml b/odoo/addons/base/views/ir_qweb_widget_templates.xml
index f8253db4f5e..3a52426b1b9 100644
--- a/odoo/addons/base/views/ir_qweb_widget_templates.xml
+++ b/odoo/addons/base/views/ir_qweb_widget_templates.xml
@@ -22,12 +22,12 @@
         <t t-if="object.country_id.name_position != 'after'">
             <t t-call="base.contact_name"/>
         </t>
-        <div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
-            <div t-if="address and 'address' in fields" class="d-flex align-items-baseline">
+        <div class="d-flex flex-column gap-2" itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
+            <div t-if="address and 'address' in fields" t-attf-class="d-flex align-items-baseline gap-1">
                 <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
-                <span class="w-100 d-block" itemprop="streetAddress" t-esc="address"/>
+                <span class="d-block w-100 lh-sm" itemprop="streetAddress" t-esc="address"/>
             </div>
-            <div t-if="city and 'city' in fields" class="d-flex align-items-baseline">
+            <div t-if="city and 'city' in fields" t-attf-class="d-flex align-items-baseline gap-1">
                 <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
                 <span>
                     <div>
@@ -36,17 +36,17 @@
                     </div>
                 </span>
             </div>
-            <div t-if="country_id and 'country_id' in fields" class="d-flex align-items-baseline">
-                <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
-                <span itemprop="addressCountry" t-esc="country_id"/>
+            <div class="d-flex align-items-center gap-1" t-if="phone and 'phone' in fields">
+                <i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-phone fa-fw' role="img" aria-label="Phone" title="Phone"/> <span class="o_force_ltr" itemprop="telephone" t-esc="phone"/>
             </div>
-            <div t-if="phone and 'phone' in fields"><i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-phone fa-fw' role="img" aria-label="Phone" title="Phone"/> <span class="o_force_ltr" itemprop="telephone" t-esc="phone"/></div>
-            <div t-if="mobile and 'mobile' in fields"><i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-mobile fa-fw' role="img" aria-label="Mobile" title="Mobile"/> <span class="o_force_ltr" itemprop="telephone" t-esc="mobile"/></div>
-            <div t-if="website and 'website' in fields">
+            <div class="d-flex align-items-center gap-1" t-if="mobile and 'mobile' in fields">
+                <i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-mobile fa-fw' role="img" aria-label="Mobile" title="Mobile"/> <span class="o_force_ltr" itemprop="telephone" t-esc="mobile"/>
+            </div>
+            <div class="d-flex align-items-center gap-1" t-if="website and 'website' in fields">
                 <i t-if="not options.get('no_marker')" class='fa fa-globe fa-fw' role="img" aria-label="Website" title="Website"/>
                 <a t-att-href="website and '%s%s' % ('http://' if '://' not in website else '',website)"><span itemprop="website" t-esc="website"/></a>
             </div>
-            <div t-if="email and 'email' in fields"><i t-if="not options.get('no_marker')" class='fa fa-envelope fa-fw' role="img" aria-label="Email" title="Email"/> <span itemprop="email" t-esc="email"/></div>
+            <div class="d-flex align-items-center gap-1" t-if="email and 'email' in fields"><i t-if="not options.get('no_marker')" class='fa fa-envelope fa-fw' role="img" aria-label="Email" title="Email"/> <span class="text-break" itemprop="email" t-esc="email"/></div>
         </div>
         <div t-if="vat and 'vat' in fields"><span t-esc="vat_label"/>: <span itemprop="vatID" t-esc="vat"/></div>
         <t t-if="object.country_id and object.country_id.name_position == 'after'">