diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 93fdd881539..272c9da75f9 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -345,32 +345,6 @@ img, .media_iframe_video, .o_image {
         }
     }
 
-    address {
-        span[itemprop="name"] {
-            margin-bottom: 0.3em;
-        }
-
-        div[itemprop="address"] > div {
-            position: relative;
-
-            span[itemprop="streetAddress"] {
-                line-height: 1.2;
-                margin-bottom: 0.3em;
-            }
-
-            .fa {
-                @include o-position-absolute(0, $left: 0);
-                line-height: $line-height-base;
-
-                + span, + div {
-                    display: block;
-                    // FontAwesome '.fa-fw' fixed-with + margin
-                    padding-left: 1.28571429em + 0.5em;
-                }
-            }
-        }
-    }
-
     .o_my_sidebar div[itemprop="address"] > div {
         margin-top: 0.5em;
     }
@@ -391,6 +365,37 @@ img, .media_iframe_video, .o_image {
     }
 }
 
+.o_portal_address {
+    span[itemprop="name"] {
+        margin-bottom: 0.3em;
+    }
+
+    div[itemprop="address"] > div {
+        position: relative;
+
+        span[itemprop="streetAddress"] {
+            line-height: 1.2;
+            margin-bottom: 0.3em;
+        }
+
+        .fa {
+            @include o-position-absolute(0, $left: 0);
+            line-height: $line-height-base;
+
+            + span, + div, + a {
+                display: block;
+                // FontAwesome '.fa-fw' fixed-with + margin
+                padding-left: 1.28571429em + 0.5em;
+            }
+        }
+
+        span[itemprop="email"] {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
 .oe_attachments .o_image_small {
     height: 40px;
     width: 50px;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 3d9852356f0..cb967aea28c 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1611,6 +1611,16 @@ input[value*="data-oe-translation-initial-sha"] {
     }
 }
 
+// Offcanvas menu for in page filters (e.g. product list)
+.o_website_offcanvas .accordion-button {
+    // Since this nav is visible on mobile only, remove all visual
+    // effects related to keyboard/mouse navigation.
+    &, &:focus, &:hover {
+        box-shadow: none;
+        z-index: 0;
+    }
+}
+
 //------------------------------------------------------------------------------
 // Website Animate
 //------------------------------------------------------------------------------
diff --git a/addons/website_crm_partner_assign/static/src/scss/crm_partner_assign.scss b/addons/website_crm_partner_assign/static/src/scss/crm_partner_assign.scss
new file mode 100644
index 00000000000..c4084c6f4d5
--- /dev/null
+++ b/addons/website_crm_partner_assign/static/src/scss/crm_partner_assign.scss
@@ -0,0 +1,6 @@
+.o_wcrm_short_description {
+    max-height: 100px;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+}
diff --git a/addons/website_crm_partner_assign/views/snippets.xml b/addons/website_crm_partner_assign/views/snippets.xml
index 13d2a843e91..23a88939627 100644
--- a/addons/website_crm_partner_assign/views/snippets.xml
+++ b/addons/website_crm_partner_assign/views/snippets.xml
@@ -8,8 +8,14 @@
                          data-customize-website-views="website_crm_partner_assign.portal_my_home_lead"
                          data-no-preview="true"
                          data-reload="/"/>
-            <we-checkbox string="World Map"
-                         data-customize-website-views="website_crm_partner_assign.ref_country"
+            <t t-if="google_maps_api_key">
+                <we-checkbox string="World Map"
+                            data-customize-website-views="website_crm_partner_assign.ref_country"
+                            data-no-preview="true"
+                            data-reload="/"/>
+            </t>
+            <we-checkbox string="Address"
+                         data-customize-website-views="website_crm_partner_assign.o_wcrm_partner_address"
                          data-no-preview="true"
                          data-reload="/"/>
         </div>
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 59170185356..ae42241bf3c 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
@@ -7,10 +7,8 @@
         <t t-set="additional_title">Resellers</t>
         <div id="wrap">
             <div class="oe_structure" id="oe_structure_website_crm_partner_assign_layout_1"/>
-            <div class="container mt16">
-                <div class="row">
-                    <t t-out="0" />
-                </div>
+            <div class="container my-4">
+                <t t-out="0" />
             </div>
             <div class="oe_structure" id="oe_structure_website_crm_partner_assign_layout_2"/>
         </div>
@@ -19,98 +17,169 @@
 
 <template id="index" name="Find Resellers">
     <t t-call="website_crm_partner_assign.layout">
-        <div class="col-lg-12">
-            <h1 class="text-center">
-                Looking For a Local Store?
-            </h1><h2 class="text-center text-muted">
-                Contact a reseller
-            </h2>
-        </div>
-
-        <div class="col-lg-3 mb32" id="partner_left">
-
-            <ul id="reseller_grades" class="nav nav-pills flex-column mt16">
-                <li class="nav-header nav-item"><h3>Filter by Level</h3></li>
-                <t t-foreach="grades" t-as="grade">
-                    <li class="nav-item">
+        <div class="o_wcrm_filters_top d-flex d-print-none align-items-center justify-content-end flex-wrap gap-2 w-100">
+            <h4 class="my-0 me-auto pe-sm-4">
+                Find a reseller <t t-foreach="countries" t-as="country"><span t-if="country['active'] and country['country_id'][0] != 0 and country['country_id']">in <t t-out="country['country_id'][1]"/></span></t>
+            </h4>
+            <div class="dropdown d-none d-lg-block">
+                <a role="button" href="#" data-bs-toggle="dropdown" t-attf-class="dropdown-toggle btn btn-light #{'d-none' if not partners else ''}" aria-expanded="true" aria-label="Open categories dropdown">
+                    <t t-foreach="grades" t-as="grade">
+                        <span t-if="grade['active']" t-out="grade['grade_id'][1]"/>
+                    </t>
+                </a>
+                <div class="dropdown-menu">
+                    <t t-foreach="grades" t-as="grade">
                         <a t-attf-href="/partners#{ grade['grade_id'][0] and '/grade/%s' % grade['grade_id'][0] or '' }#{ current_country and '/country/%s' % slug(current_country) or '' }#{ '?' + (search_path or '') + '&amp;' + keep_query('country_all') }"
-                           t-attf-class="nav-link#{grade['active'] and ' active' or ''}">
-                            <span class="badge rounded-pill float-end" t-esc="grade['grade_id_count'] or ''"/>
-                            <t t-esc="grade['grade_id'][1]"/>
-                        </a>
-                    </li>
-                </t>
-            </ul>
-
-            <ul id="reseller_countries" class="nav nav-pills flex-column mt16">
-                <li class="nav-header nav-item"><h3>Filter by Country</h3></li>
-                <t t-foreach="countries" t-as="country">
-                    <li t-if="country['country_id']" class="nav-item">
+                        class="dropdown-item" t-out="grade['grade_id'][1]"/>
+                    </t>
+                </div>
+            </div>
+            <div class="dropdown d-none d-lg-block">
+                <a role="button" href="#" data-bs-toggle="dropdown" t-attf-class="dropdown-toggle btn btn-light #{'d-none' if not partners else ''}" aria-expanded="true" aria-label="Open countries dropdown">
+                    <t t-foreach="countries" t-as="country">
+                        <span t-if="partners and country['active']" t-out="country['country_id'][1]"/>
+                    </t>
+                </a>
+                <div class="dropdown-menu">
+                    <t t-foreach="countries" t-as="country" t-if="country['country_id']">
                         <a t-attf-href="/partners#{ current_grade and '/grade/%s' % slug(current_grade) or ''}#{country['country_id'][0] and '/country/%s' % country['country_id'][0] or '' }#{ '?' + (search_path or '') + (country['country_id'][0] == 0 and '&amp;country_all=True' or '')}"
-                           t-attf-class="nav-link#{country['active'] and ' active' or ''}">
-                            <span class="badge rounded-pill float-end" t-esc="country['country_id_count'] or ''"/>
-                            <t t-esc="country['country_id'][1]"/>
-                        </a>
-                    </li>
-                </t>
-            </ul>
-
-        </div>
-
-        <div class="col-lg-8 offset-lg-1" id="ref_content">
-            <div class="d-flex p-2">
-                <t t-call="website.pager"/>
-                <form action="" method="get" class="ms-auto">
-                    <div class="mb-3">
-                        <input t-if="country_all" type="hidden" name="country_all" value="True" />
-                        <input type="text" name="search" class="search-query form-control" placeholder="Search" t-att-value="searches.get('search', '')"/>
+                        class="dropdown-item" t-out="country['country_id'][1]"/>
+                    </t>
+                </div>
+            </div>
+            <div class="o_wcrm_search d-flex w-100 w-lg-auto">
+                <form class="flex-grow-1" action="" method="get">
+                    <input t-if="country_all" type="hidden" name="country_all" value="True" />
+                    <div class="input-group" role="search">
+                        <input type="text" name="search" class="search-query form-control border-0 bg-light" placeholder="Search" t-att-value="searches.get('search', '')"/>
+                        <button type="submit" aria-label="Search" title="Search" class="oe_search_button btn btn-light">
+                            <i class="oi oi-search"/>
+                        </button>
                     </div>
                 </form>
+                <button class="btn btn-light position-relative ms-2 d-lg-none"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#o_wcrm_offcanvas">
+                    <i class="fa fa-sliders"/>
+                </button>
             </div>
-            <div>
-                <p t-if="not partners">No result found</p>
-                <t t-foreach="partners" t-as="partner">
-                    <t t-if="last_grade != partner.grade_id.id">
-                        <h3 class="text-center mt-4">
-                            <span t-field="partner.grade_id"/>
-                            <t t-call="website.publish_management">
-                                <t t-set="object" t-value="partner.grade_id"/>
-                                <t t-set="publish_edit" t-value="True"/>
-                            </t>
-                        </h3>
-                        <t t-set="last_grade" t-value="partner.grade_id.id"/>
-                    </t>
-                    <div class="d-flex mt-3">
-                        <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}"
-                           t-field="partner.avatar_128"
-                           class="me-3 text-center o_width_128"
-                           t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
-                        ></a>
-                        <div class="flex-grow-1 o_partner_body" style="min-height: 64px;">
-                            <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}">
-                                <span t-field="partner.display_name"/>
-                            </a>
-                            <div t-field="partner.website_short_description"/>
-                            <t t-if="any(p.website_published for p in partner.implemented_partner_ids)">
-                                <small><a t-attf-href="/partners/#{slug(partner)}#right_column">
-                                    <t t-esc="partner.implemented_partner_count"/> reference(s)
-                                </a></small>
-                            </t>
+        </div>
+        <!-- Off canvas filters on mobile-->
+        <div id="o_wcrm_offcanvas" class="o_website_offcanvas offcanvas offcanvas-end d-lg-none p-0 overflow-visible">
+            <div class="offcanvas-header">
+                <h5 class="offcanvas-title">Filters</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
+            </div>
+            <div class="offcanvas-body p-0">
+                <div class="accordion accordion-flush">
+                    <div class="accordion-item">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button collapsed"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target=".o_wcrm_offcanvas_grade"
+                                aria-expanded="false"
+                                aria-controls="o_wcrm_offcanvas_grade">
+                                Filter by category
+                            </button>
+                        </h2>
+                        <div class="o_wcrm_offcanvas_grade accordion-collapse collapse">
+                            <div class="accordion-body pt-0">
+                                <ul class="list-group list-group-flush">
+                                    <t t-foreach="grades" t-as="grade">
+                                        <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pb-0 border-0">
+                                            <a t-attf-href="/partners#{ grade['grade_id'][0] and '/grade/%s' % grade['grade_id'][0] or '' }#{ current_country and '/country/%s' % slug(current_country) or '' }#{ '?' + (search_path or '') + '&amp;' + keep_query('country_all') }"
+                                            class="text-reset" aria-label="See categories filters">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="radio" t-attf-name="#{grade['grade_id'][1]}" t-att-checked="bool(grade['active'])"/>
+                                                    <label class="form-check-label" t-attf-for="#{grade['grade_id'][1]}" t-out="grade['grade_id'][1]"/>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </t>
+                                </ul>
+                            </div>
                         </div>
                     </div>
-                </t>
+                    <div class="accordion-item">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button border-top collapsed"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target=".o_wcrm_offcanvas_country"
+                                aria-expanded="false"
+                                aria-controls="o_wcrm_offcanvas_country">
+                                Filter by country
+                            </button>
+                        </h2>
+                        <div class="o_wcrm_offcanvas_country accordion-collapse collapse">
+                            <div class="accordion-body pt-0">
+                                <ul class="list-group list-group-flush">
+                                    <t t-foreach="countries" t-as="country">
+                                        <li t-if="country['country_id']" class="list-group-item d-flex justify-content-between align-items-center ps-0 pb-0 border-0">
+                                            <a t-attf-href="/partners#{ current_grade and '/grade/%s' % slug(current_grade) or ''}#{country['country_id'][0] and '/country/%s' % country['country_id'][0] or '' }#{ '?' + (search_path or '') + (country['country_id'][0] == 0 and '&amp;country_all=True' or '')}"
+                                            class="text-reset" aria-label="See countries filters">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="radio" t-attf-name="#{country['country_id'][1]}" t-att-checked="bool(country['active'])"/>
+                                                    <label class="form-check-label" t-attf-for="#{country['country_id'][1]}" t-out="country['country_id'][1]"/>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </t>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class='navbar'>
+        </div>
+        <div class="row mb-4">
+            <div class="my-5 py-5 text-center" t-if="not partners">
+                <h5>No results found for "<span t-out="searches.get('search', '')"/>"</h5>
+                <a href="/partners">See all resellers</a>
+            </div>
+            <t t-set="last_grade" t-value="None"/>
+            <t t-foreach="partners" t-as="partner">
+                <t t-if="last_grade != partner.grade_id.id">
+                    <h5 class="mt-4 mb-2 col-12">
+                        <span t-field="partner.grade_id"/> Resellers
+                        <t t-call="website.publish_management">
+                            <t t-set="object" t-value="partner.grade_id"/>
+                            <t t-set="publish_edit" t-value="True"/>
+                        </t>
+                    </h5>
+                    <t t-set="last_grade" t-value="partner.grade_id.id"/>
+                </t>
+                <div class="col-md-4 col-xl-3 col-12 mb-4">
+                    <div class="card h-100 text-decoration-none">
+                        <a class="text-decoration-none" t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}" aria-label="Go to reseller">
+                            <div t-field="partner.image_1920"
+                                class="card-img-top border-bottom"
+                                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img img-fluid h-100 w-100 mw-100", "style": "max-height: 208px; min-height: 208px; object-fit: cover"}'
+                                />
+                            <div class="card-body">
+                                <h5 class="card-title m-0" t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}" t-field="partner.display_name"/>
+                                <small id="o_wcrm_partners_address"/>
+                                <small class="o_wcrm_short_description text-muted overflow-hidden" t-field="partner.website_short_description"/>
+                                <small t-if="not partner.website_short_description" class="css_editable_mode_hidden text-muted fst-italic" groups="website.group_website_restricted_editor">
+                                    Edit to add a short description
+                                </small>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </t>
+            <div class="navbar">
                 <t t-call="website.pager">
-                   <t t-set="classname" t-valuef="float-start"/>
+                   <t t-set="classname" t-valuef="mx-auto"/>
                 </t>
             </div>
         </div>
     </t>
 </template>
 
-<template id="ref_country" inherit_id="website_crm_partner_assign.index" name="Left World Map">
-    <xpath expr="//ul[@id='reseller_countries']" position="after">
+<template id="ref_country" inherit_id="website_crm_partner_assign.index" name="World Map">
+    <xpath expr="//div[hasclass('o_wcrm_search')]" position="inside">
         <t t-if="google_maps_api_key">
             <!-- modal for large map -->
             <div role="dialog" class="modal fade partner_map_modal" tabindex="-1">
@@ -118,54 +187,71 @@
                 <div class="modal-content">
                     <header class="modal-header">
                         <h4 class="modal-title">World Map</h4>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
                     </header>
-                    <iframe t-attf-src="/google_map/?width=898&amp;height=485&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/partners/"
-                    style="width:898px; height:485px; border:0; padding:0; margin:0;"></iframe>
+                    <iframe t-attf-src="/google_map/?height=485&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/partners/"
+                    style="height:485px;"/>
                 </div>
               </div>
             </div>
             <!-- modal end -->
-            <h3>World Map<button class="btn btn-link" data-bs-toggle="modal" data-bs-target=".partner_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
-            <ul class="nav">
-                <iframe t-attf-src="/google_map?width=260&amp;height=240&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/partners/"
-                    style="width:260px; height:240px; border:0; padding:0; margin:0;" scrolling="no"></iframe>
-            </ul>
+            <div class="btn-group ms-2">
+                <button class="btn btn-light border-primary active">
+                    <i class="fa fa-th-large"/>
+                </button>
+                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target=".partner_map_modal">
+                    <i class="fa fa-map-marker" role="img" aria-label="Open map" title="Open map"/>
+                </button>
+            </div>
         </t>
     </xpath>
 </template>
 
+<template id="o_wcrm_partner_address" inherit_id="website_crm_partner_assign.index" name="Address">
+    <xpath expr="//small[@id='o_wcrm_partners_address']" position="inside">
+        <div t-field="partner.self" 
+            t-options="{
+                'widget': 'contact',
+                'fields': ['country_id']
+            }"
+            class="py-2"
+        />
+    </xpath>
+</template>
+
 <template id="partner" name="Partner Detail">
     <t t-call="website_crm_partner_assign.layout">
-        <div class="col-lg-5">
-            <ol t-if="not edit_page" class="breadcrumb">
-                <li class="breadcrumb-item"><a t-attf-href="/partners#{current_grade and '/grade/%s' % slug(current_grade)}#{current_country and '/country/%s' % slug(current_country)}">Our Partners</a></li>
-                <li class="breadcrumb-item active"><span t-field="partner.display_name"/></li>
-            </ol>
+        <div t-if="not edit_page" class="mb-3">
+            <a t-attf-href="/partners#{current_grade and '/grade/%s' % slug(current_grade)}#{current_country and '/country/%s' % slug(current_country)}" aria-label="Back to resellers list"><i class="fa fa-chevron-left me-2"/>Back to resellers</a>
         </div>
         <t t-call="website_partner.partner_detail">
             <t t-set="right_column">
-                <div id="right_column" class="mb16"><t t-call="website_crm_partner_assign.references_block"/></div>
+                <div id="right_column"><t t-call="website_crm_partner_assign.references_block"/></div>
             </t>
         </t>
     </t>
 </template>
 
 <template id="grade_in_detail" inherit_id="website_partner.partner_detail">
-  <xpath expr="//*[@id='partner_name']" position="after">
-    <h3 class="col-lg-12 text-center text-muted" t-if="partner.grade_id and partner.grade_id.website_published">
-      <span t-field="partner.grade_id"/></h3>
-  </xpath>
+    <xpath expr="//*[@id='partner_name']" position="before">
+        <span class="col-lg-12 text-muted" t-if="partner.grade_id and partner.grade_id.website_published">
+            <span t-field="partner.grade_id"/>
+        </span>
+    </xpath>
 </template>
 
 <template id="references_block" name="Partner References Block">
     <t t-if="any(p.website_published for p in partner.implemented_partner_ids)">
-        <h3 id="references">References</h3>
-        <div t-foreach="partner.implemented_partner_ids" t-if="reference.website_published" t-as="reference" class="d-flex mt-3">
-            <span t-field="reference.avatar_128" class="d-block me-3 text-center o_width_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'/>
-            <div class="flex-grow-1" style="min-height: 64px;">
-                <span t-field="reference.self"/>
-                <div t-field='reference.website_short_description'/>
+        <h4 id="references">References</h4>
+        <div t-foreach="partner.implemented_partner_ids" t-if="reference.website_published" t-as="reference" class="card mt-3 border-0">
+            <div class="row">
+                <div class="col-md-2">
+                    <span t-field="reference.avatar_128" class="d-flex justify-content-center h-100" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img-fluid rounded"}'/>
+                </div>
+                <div class="card-body col-md-10">
+                    <span t-field="reference.self"/>
+                    <div t-field='reference.website_short_description'/>
+                </div>
             </div>
         </div>
     </t>
diff --git a/addons/website_customer/models/res_partner.py b/addons/website_customer/models/res_partner.py
index 24592b3965b..61a5556fc19 100644
--- a/addons/website_customer/models/res_partner.py
+++ b/addons/website_customer/models/res_partner.py
@@ -22,12 +22,12 @@ class Tags(models.Model):
 
     @api.model
     def get_selection_class(self):
-        classname = ['default', 'primary', 'success', 'warning', 'danger']
+        classname = ['light', 'primary', 'success', 'warning', 'danger']
         return [(x, str.title(x)) for x in classname]
 
     name = fields.Char('Category Name', required=True, translate=True)
     partner_ids = fields.Many2many('res.partner', 'res_partner_res_partner_tag_rel', 'tag_id', 'partner_id', string='Partners')
-    classname = fields.Selection('get_selection_class', 'Class', default='default', help="Bootstrap class to customize the color", required=True)
+    classname = fields.Selection('get_selection_class', 'Class', default='light', help="Bootstrap class to customize the color", required=True)
     active = fields.Boolean('Active', default=True)
 
     def _default_is_published(self):
diff --git a/addons/website_customer/views/snippets.xml b/addons/website_customer/views/snippets.xml
index c21fd8955e6..a524999ab69 100644
--- a/addons/website_customer/views/snippets.xml
+++ b/addons/website_customer/views/snippets.xml
@@ -3,7 +3,7 @@
 
 <template id="snippet_options" inherit_id="website.snippet_options" name="Customer Snippet Options">
     <xpath expr="." position="inside">
-        <div data-selector="main:has(#ref_left_column)" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="References Page">
+        <div data-selector=".o_wcrm_filters_top" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="References Page">
             <we-checkbox string="Countries Filter"
                          data-customize-website-views="website_customer.opt_country_list"
                          data-no-preview="true"
@@ -16,10 +16,12 @@
                          data-customize-website-views="website_customer.opt_tag_list"
                          data-no-preview="true"
                          data-reload="/"/>
-            <we-checkbox string="Show Map"
-                         data-customize-website-views="website_customer.opt_country"
-                         data-no-preview="true"
-                         data-reload="/"/>
+            <t t-if="google_maps_api_key">
+                <we-checkbox string="Show Map"
+                            data-customize-website-views="website_customer.opt_country"
+                            data-no-preview="true"
+                            data-reload="/"/>
+            </t>
         </div>
     </xpath>
 </template>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index ee5310d7e46..4dc17b59071 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -4,66 +4,163 @@
 <template id="index" name="Our References">
     <t t-call="website.layout">
         <div id="wrap">
-            <div class="oe_structure">
-                <section>
-                    <h1 class="text-center">
-                        Our References
-                    </h1><h2 class="text-center text-muted">
-                        Trusted by millions worldwide
-                    </h2>
-                </section>
-            </div>
-            <div class="container">
-                <div class="row">
-                    <div class="col-lg-3 mb32" id="ref_left_column">
+            <div class="container my-4"> 
+                <div class="o_wcrm_filters_top d-flex d-print-none align-items-center justify-content-end flex-wrap gap-2 w-100">
+                    <h4 class="my-0 me-auto pe-sm-4">Our references</h4>
+                    <div class="o_wcrm_search d-flex w-100 w-lg-auto">
+                        <form action="" method="get" class="flex-grow-1">
+                            <div class="input-group" role="search">
+                                <input type="text" name="search" class="search-query form-control border-0 bg-light" placeholder="Search" t-att-value="post.get('search', '')"/>                           
+                                <button type="submit" aria-label="Search" title="Search" class="oe_search_button btn btn-light">
+                                    <i class="oi oi-search"/>
+                                </button>
+                            </div>
+                        </form>
+                        <button class="btn btn-light position-relative ms-2 d-lg-none"
+                            data-bs-toggle="offcanvas"
+                            data-bs-target="#o_wc_offcanvas">
+                            <i class="fa fa-sliders"/>
+                        </button>
                     </div>
-                    <div class="col-lg-8 offset-lg-1" id="ref_content">
-                        <div class='d-flex m-2'>
-                            <t t-call="website.pager">
-                               <t t-set="classname" t-value="'float-start'"/>
-                            </t>
-                            <form action="" method="get" class="navbar-search ms-auto pagination">
-                                <div class="mb-3">
-                                    <input type="text" name="search" class="search-query form-control"
-                                        placeholder="Search" t-att-value="post.get('search', '')"/>
+                </div>
+                <!-- Off canvas filters on mobile-->
+                <div id="o_wc_offcanvas" class="o_website_offcanvas offcanvas offcanvas-end d-lg-none p-0 overflow-visible">
+                    <div class="offcanvas-header">
+                        <h5 class="offcanvas-title">Filters</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
+                    </div>
+                    <div class="offcanvas-body p-0">
+                        <div class="accordion accordion-flush">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button border-top collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        data-bs-target=".o_wc_offcanvas_industry"
+                                        aria-expanded="false"
+                                        aria-controls="wc_offcanvas_industry">
+                                        Filter by Industry
+                                    </button>
+                                </h2>
+                                <div class="o_wc_offcanvas_industry accordion-collapse collapse">
+                                    <div class="accordion-body pt-0">
+                                        <ul class="list-group list-group-flush">
+                                            <t t-foreach="industries" t-as="industry_dict">
+                                                <t t-if="industry_dict['industry_id']">
+                                                    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pb-0 border-0">
+                                                        <a t-attf-href="/customers/#{ industry_dict['industry_id'][0] and 'industry/%s/' % slug(industry_dict['industry_id']) or '' }#{ current_country_id and 'country/%s' % current_country_id or '' }#{ search_path }" 
+                                                            class="text-reset" aria-label="See industries filters">
+                                                            <div class="form-check">
+                                                                <input class="form-check-input" type="radio" t-attf-name="#{industry_dict['industry_id'][1]}" t-att-checked="industry_dict['industry_id'][0] == current_industry_id and true or false"/>
+                                                                <label class="form-check-label" t-attf-for="#{industry_dict['industry_id'][1]}" t-out="industry_dict['industry_id'][1]"/>
+                                                            </div>
+                                                        </a>
+                                                    </li>
+                                                </t>
+                                            </t>
+                                        </ul>
+                                    </div>
                                 </div>
-                            </form>
+                            </div>
+                            <div class="accordion-item">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button border-top collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        data-bs-target=".o_wc_offcanvas_country"
+                                        aria-expanded="false"
+                                        aria-controls="offcanvas_country">
+                                        Filter by Country
+                                    </button>
+                                </h2>
+                                <div class="o_wc_offcanvas_country accordion-collapse collapse">
+                                    <div class="accordion-body pt-0">
+                                        <ul class="list-group list-group-flush ">
+                                            <t t-foreach="countries" t-as="country_dict">
+                                                <t t-if="country_dict['country_id']">
+                                                    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pb-0 border-0">
+                                                        <a t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ country_dict['country_id'][0] and 'country/%s' % slug(country_dict['country_id']) or '' }#{ search_path }"
+                                                            class="text-reset" aria-label="See countries filters">
+                                                            <div class="form-check">
+                                                                <input class="form-check-input" type="radio" t-attf-name="{country_dict['country_id'][1]}" t-att-checked="country_dict['country_id'][0] == current_country_id and true or false"/>
+                                                                <label class="form-check-label" t-attf-for="{country_dict['country_id'][1]}" t-out="country_dict['country_id'][1]"/>
+                                                            </div>
+                                                        </a>
+                                                    </li>
+                                                </t>
+                                            </t>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="accordion-item" t-if="len(tags)">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button border-top collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        data-bs-target=".o_wc_offcanvas_tags"
+                                        aria-expanded="false"
+                                        aria-controls="o_wc_offcanvas_tags">
+                                        Filter by Tags
+                                    </button>
+                                </h2>
+                                <div class="o_wc_offcanvas_tags accordion-collapse collapse">
+                                    <div class="accordion-body">
+                                        <div class="d-flex flex-wrap align-items-center gap-1 mb-4" t-if="len(tags)">
+                                            <a class="me-2" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
+                                                <span class="fa fa-1x fa-tags"/> All </a>
+                                            <t t-foreach="tags" t-as="o_tag">
+                                                <a t-attf-class="bg-#{o_tag.classname} badge" t-out="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
+                                                t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-
-                        <div>
-
-                    <p t-if="not partners">No result found</p>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    <div class="my-5 py-5 text-center" t-if="not partners">
+                        <h5>No results found for "<span t-out="post.get('search', '')"/>"</h5>
+                        <a href="/customers">See all customers</a>
+                    </div>
                     <t t-foreach="partners" t-as="partner">
-                        <div class="d-flex mt-3">
-                            <a t-attf-href="/customers/#{slug(partner)}"
-                               t-field="partner.avatar_128"
-                               class="d-block me-3 text-center o_width_128"
-                               t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
-                            ></a>
-                            <div class="flex-grow-1" style="min-height: 64px;">
-                                <a t-attf-href="/customers/#{slug(partner)}">
-                                    <span t-field="partner.display_name"/>
+                        <div class="col-md-4 col-xl-3 col-12 mb-4">
+                            <div class="card h-100 text-decoration-none">
+                                <a class="text-decoration-none" t-attf-href="/customers/#{slug(partner)}" aria-label="Go to customer">
+                                    <div t-field="partner.avatar_1920"
+                                        class="card-img-top border-bottom"
+                                        t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img img-fluid h-100 w-100 mw-100 object-fit-cover", "style": "max-height: 208px; object-fit: cover"}'
+                                    />
+                                    <div class="card-body">
+                                        <h5 class="card-title" t-field="partner.display_name"/>
+                                        <small class="o_wcrm_short_description text-muted overflow-hidden" t-field="partner.website_short_description"/>
+                                        <small t-if="not partner.website_short_description" class="css_editable_mode_hidden text-muted fst-italic" groups="website.group_website_restricted_editor">
+                                            Enter a short description
+                                        </small>
+                                        <t t-if="partner.industry_id">
+                                            <a class="badge mt-3 text-bg-secondary" t-attf-href="/customers/#{ 'industry/%s/' % slug(partner.industry_id) }#{ current_country_id and 'country/%s' % slug(current_country) or '' }" t-out="partner.industry_id.name"/>
+                                        </t>
+                                    </div>
                                 </a>
-                                <t t-if="partner.industry_id">
-                                    <a class="badge text-bg-secondary" t-attf-href="/customers/#{ 'industry/%s/' % slug(partner.industry_id) }#{ current_country_id and 'country/%s' % slug(current_country) or '' }" t-esc="partner.industry_id.name"/>
-                                </t>
-                                <div t-field="partner.website_short_description"/>
                             </div>
                         </div>
                     </t>
-                        </div>
-                    </div>
-
+                </div>
+                <div class="navbar">
+                    <t t-call="website.pager">
+                        <t t-set="classname" t-value="'mx-auto'"/>
+                    </t>
                 </div>
             </div>
-            <div class="oe_structure"/>
         </div>
     </t>
 </template>
 
-<!-- Option: left column: World Map -->
+<!-- Option: top filters: World Map -->
 <template id="opt_country" inherit_id="website_customer.index" name="Show Map">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
+    <xpath expr="//div[hasclass('o_wcrm_search')]" position="inside">
         <t t-if="google_maps_api_key">
             <!-- modal for large map -->
             <div role="dialog" class="modal fade customer_map_modal" tabindex="-1">
@@ -71,74 +168,80 @@
                 <div class="modal-content">
                     <header class="modal-header">
                         <h4 class="modal-title">World Map</h4>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
                     </header>
                     <iframe t-attf-src="/google_map/?width=898&amp;height=485&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/customers/"
-                    style="width:898px; height:485px; border:0; padding:0; margin:0;"></iframe>
+                    style="height:485px;"/>
                 </div>
               </div>
             </div>
             <!-- modal end -->
-            <h3>World Map<button class="btn btn-link" data-bs-toggle="modal" data-bs-target=".customer_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
-            <ul class="nav">
-                <iframe t-attf-src="/google_map?width=260&amp;height=240&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/customers/"
-                    style="width:260px; height:240px; border:0; padding:0; margin:0;" scrolling="no"></iframe>
-            </ul>
+            <div class="btn-group ms-2">
+                <button class="btn btn-light border-primary active">
+                    <i class="fa fa-th-large"/>
+                </button>
+                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target=".customer_map_modal">
+                    <i class="fa fa-map-marker" role="img" aria-label="Open map" title="Open map"/>
+                </button>
+            </div>
         </t>
     </xpath>
 </template>
 
 <template id="opt_industry_list" inherit_id="website_customer.index" name="Filter on Industry" priority="20">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
-        <h3>References by Industries</h3>
-        <ul class="nav nav-pills flex-column mt16 mb32">
-            <t t-foreach="industries" t-as="industry_dict">
-                <t t-if="industry_dict['industry_id']">
-                    <li class="nav-item">
-                        <a t-attf-href="/customers/#{ industry_dict['industry_id'][0] and 'industry/%s/' % slug(industry_dict['industry_id']) or '' }#{ current_country_id and 'country/%s' % current_country_id or '' }#{ search_path }"
-                           t-attf-class="nav-link#{industry_dict['industry_id'][0] == current_industry_id and ' active' or ''}">
-                            <span class="badge rounded-pill float-end" t-esc="industry_dict['industry_id_count'] or '0'"/>
-                            <t t-esc="industry_dict['industry_id'][1]"/>
-                        </a>
-                    </li>
+    <xpath expr="//div[hasclass('o_wcrm_search')]" position="before">
+        <div class="dropdown d-none d-lg-block">
+            <a role="button" href="#" data-bs-toggle="dropdown" t-attf-class="dropdown-toggle btn btn-light" aria-expanded="true" aria-label="Open industries dropdown">
+                <t t-foreach="industries" t-as="industry_dict">
+                    <label class="cursor-pointer" t-if="industry_dict['industry_id'] and industry_dict['industry_id'][0] == current_industry_id and true or false" t-out="industry_dict['industry_id'][1]"/>
                 </t>
-            </t>
-        </ul>
+            </a>
+            <div class="dropdown-menu">
+                <t t-foreach="industries" t-as="industry_dict">
+                    <t t-if="industry_dict['industry_id']">
+                        <a t-attf-href="/customers/#{ industry_dict['industry_id'][0] and 'industry/%s/' % slug(industry_dict['industry_id']) or '' }#{ current_country_id and 'country/%s' % current_country_id or '' }#{ search_path }"
+                        class="dropdown-item" t-out="industry_dict['industry_id'][1]"/>
+                    </t>
+                </t>
+            </div>
+        </div>
     </xpath>
 </template>
 
 <template id="opt_country_list" inherit_id="website_customer.index" name="Filter on Countries" priority="30">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
-        <h3>References by Country</h3>
-        <ul class="nav nav-pills flex-column mt16 mb32">
-            <t t-foreach="countries" t-as="country_dict">
-                <t t-if="country_dict['country_id']">
-                    <li class="nav-item">
-                        <a t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ country_dict['country_id'][0] and 'country/%s' % slug(country_dict['country_id']) or '' }#{ search_path }"
-                           t-attf-class="nav-link#{country_dict['country_id'][0] == current_country_id and ' active' or ''}">
-                            <span class="badge rounded-pill float-end" t-esc="country_dict['country_id_count'] or '0'"/>
-                            <t t-esc="country_dict['country_id'][1]"/>
-                        </a>
-                    </li>
+    <xpath expr="//div[hasclass('o_wcrm_search')]" position="before">
+        <div class="dropdown d-none d-lg-block">
+            <a role="button" href="#" data-bs-toggle="dropdown" t-attf-class="dropdown-toggle btn btn-light" aria-expanded="true" aria-label="Open countries dropdown">
+                <t t-foreach="countries" t-as="country_dict">
+                    <label class="cursor-pointer" t-if="country_dict['country_id'] and current_country_id == country_dict['country_id'][0]">
+                        <t t-out="country_dict['country_id'][1]"/>
+                    </label>
                 </t>
-            </t>
-        </ul>
+            </a>
+            <div class="dropdown-menu">
+                <t t-foreach="countries" t-as="country_dict">
+                    <t t-if="country_dict['country_id']">
+                        <a t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ country_dict['country_id'][0] and 'country/%s' % slug(country_dict['country_id']) or '' }#{ search_path }"
+                        class="dropdown-item" t-out="country_dict['country_id'][1]"/>
+                    </t>
+                </t>
+            </div>
+        </div>
     </xpath>
 </template>
 
 
 <template id="opt_tag_list" inherit_id="website_customer.index" name="Filter on Tags" priority="40">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
-
-        <h3 t-if="len(tags)">References by Tag</h3>
-        <ul class="nav nav-pills flex-column mt16 mb32" t-if="len(tags)">
-            <li class="nav-item"><a class="nav-link mr8" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
-                <span class="fa fa-1x fa-tags"/> All </a></li>
-            <li t-foreach="tags" t-as="o_tag" class="nav-item">
-                <a t-attf-class="nav-link badge bg-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
-                    t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
-            </li>
-        </ul>
+    <xpath expr="//div[hasclass('o_wcrm_filters_top')]" position="after">
+        <div class="d-flex align-items-center gap-2 my-4" t-if="len(tags)">
+            <a class="badge text-bg-light" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
+                <span class="fa fa-1x fa-tags"/> All 
+            </a>
+            <t t-foreach="tags" t-as="o_tag">
+                <a t-attf-class="text-bg-#{o_tag.classname} badge" t-out="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
+                t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
+            </t>
+        </div>
     </xpath>
 </template>
 
@@ -146,18 +249,12 @@
   <t t-call="website.layout">
     <div id="wrap">
         <div class="oe_structure" id="oe_structure_website_customer_details_1"/>
-        <div class="container mt16">
+        <div class="container my-4">
             <div class="row">
-                <div class="col-lg-5">
-                    <ol t-if="not edit_page" class="breadcrumb">
-                        <li class="breadcrumb-item"><a href="/customers">Our References</a></li>
-                        <li class="breadcrumb-item active"><span t-field="partner.display_name"/></li>
-                    </ol>
+                <div class="mb-3" t-if="not edit_page">
+                    <a t-attf-href="/customers" aria-label="Back to references list"><i class="fa fa-chevron-left me-2"/>Back to references</a>
                 </div>
                 <t t-call="website_partner.partner_detail">
-                    <t t-set="left_column">
-                        <div id="left_column"><t t-call="website_customer.implemented_by_block"/></div>
-                    </t>
                     <t t-set="right_column">
                         <div id="right_column"><t t-call="website_customer.references_block"/></div>
                     </t>
@@ -177,38 +274,31 @@
 </template>
 
 <template id="partner_detail" inherit_id="website_partner.partner_detail" name="Partner Details">
-    <xpath expr="//address" position="inside">
+    <xpath expr="//div[hasclass('o_wcrm_contact_details')]" position="inside">
         <t t-if="partner.industry_id">
-            <span class="badge text-bg-secondary"><t t-esc="partner.industry_id.name"/></span>
+            <span class="badge text-bg-secondary"><t t-out="partner.industry_id.name"/></span>
         </t>
     </xpath>
 </template>
 
 <template id="implemented_by_block" name="Partner Implemented By Block">
         <t t-if="partner.assigned_partner_id and partner.assigned_partner_id.website_published">
-            <div class="card">
-                <div class="card-header">
-                    <h4>Implemented By</h4>
+            <div class="d-flex align-items-center">
+                <div>
+                    <a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}"
+                    t-field="partner.assigned_partner_id.avatar_128"
+                    class="d-block me-2 p-1 border rounded-circle shadow-sm"
+                    style="width: 42px; height: 42px"
+                    t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img-fluid h-100 w-100 rounded-circle"}'
+                    />
                 </div>
-                <div class="card-body text-center">
-        <h4>
-            <a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}">
-              <span t-field="partner.assigned_partner_id"/>
-              <span class="small"> (<t t-esc="len([p for p in partner.assigned_partner_id.implemented_partner_ids if p.website_published])"/> reference(s))</span>
-            </a>
-        </h4>
-        <div><a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}"
-                t-field="partner.assigned_partner_id.avatar_128"
-                class="d-block"
-                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
-             />
-        </div>
-        <address class="text-start">
-             <div t-field="partner.assigned_partner_id" t-options='{
-                 "widget": "contact",
-                 "fields": ["address", "website", "phone", "email"]
-             }'/>
-        </address>
+                <div>
+                    <span class="small text-muted">Implemented by</span>
+                    <div>
+                        <a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}">
+                            <span t-field="partner.assigned_partner_id"/>
+                        </a>
+                    </div>
                 </div>
             </div>
         </t>
@@ -217,21 +307,25 @@
 <template id="references_block" name="Partner References Block">
         <t t-if="any(p.website_published for p in partner.implemented_partner_ids)">
             <h3 id="references">References</h3>
-            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="d-flex mt-3">
-              <t t-if="reference.website_published">
-                <a t-attf-href="/customers/#{slug(reference)}">
-                    <span t-field="reference.avatar_128" class="d-block me-3 text-center o_width_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'/>
-                </a>
-                <div class="flex-grow-1" style="min-height: 64px;">
-                    <a t-attf-href="/customers/#{slug(reference)}">
-                        <span t-field="reference.self"/>
-                    </a>
-                    <t t-if="reference.industry_id">
-                        <span class="badge text-bg-secondary"><t t-esc="reference.industry_id.name"/></span>
-                    </t>
-                    <div t-field='reference.website_short_description'/>
-                </div>
-              </t>
+            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="card mt-3 border-0">
+                <t t-if="reference.website_published">
+                    <div class="row">
+                        <div class="col-md-2">
+                            <span t-field="reference.avatar_128" 
+                                class="d-flex justify-content-center justify-content-center h-100" 
+                                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img-fluid rounded"}'/>
+                        </div>
+                        <div class="card-body col-md-10">
+                            <a t-attf-href="/customers/#{slug(reference)}">
+                                <span t-field="reference.self"/>
+                            </a>
+                            <t t-if="reference.industry_id">
+                                <span class="badge ms-1 text-bg-secondary"><t t-out="reference.industry_id.name"/></span>
+                            </t>
+                            <div t-field='reference.website_short_description'/>
+                        </div>
+                    </div>
+                </t>
             </div>
         </t>
 </template>
@@ -240,7 +334,7 @@
     <xpath expr="//div/span" position="replace">
         <a t-attf-href="/customers/#{slug(reference)}">$0</a>
     </xpath>
-    <xpath expr="//div[hasclass('flex-grow-1')]/span" position="replace">
+    <xpath expr="//div[hasclass('card-body')]/span" position="replace">
         <a t-attf-href="/customers/#{slug(reference)}">$0</a>
     </xpath>
 </template>
diff --git a/addons/website_partner/views/website_partner_templates.xml b/addons/website_partner/views/website_partner_templates.xml
index 2dec095396b..913b0c73e6e 100644
--- a/addons/website_partner/views/website_partner_templates.xml
+++ b/addons/website_partner/views/website_partner_templates.xml
@@ -15,26 +15,28 @@
 </template>
 
 <template id="partner_detail" name="Partner Details">
-    <h1 class="col-lg-12 text-center" id="partner_name" t-field="partner.display_name"/>
-    <div class="col-lg-4">
-        <div t-field="partner.avatar_1920" t-options='{"widget": "image", "preview_image": "avatar_512", "class": "d-block mx-auto mb16"}'/>
-        <address>
-             <div t-field="partner.self" t-options='{
-                 "widget": "contact",
-                 "fields": ["address", "website", "phone", "email"]
-             }'/>
-        </address>
-        <t t-out="left_column or ''"/>
-    </div>
-    <div class="col-lg-8 mt32">
-        <t t-if="partner">
-            <div t-field="partner.website_description"/>
-            <t groups="website.group_website_restricted_editor">
-                <h2 class="css_non_editable_mode_hidden o_not_editable">Short Description for List View</h2>
-                <div class="css_non_editable_mode_hidden" t-field="partner.website_short_description"/>
+    <div class="row">
+        <div class="col-lg-3 col-md-4">
+            <div t-field="partner.avatar_1920" t-options='{"widget": "image", "preview_image": "avatar_1920", "style": "object-fit: cover", "class": "w-100 mb-2 rounded-3 border"}'/>
+            <div class="o_wcrm_contact_details">
+                <div t-field="partner.self" t-options='{
+                    "widget": "contact",
+                    "fields": ["address", "website", "phone", "email"]
+                }'/>
+                <t t-out="left_column or ''"/>
+            </div>
+        </div>
+        <div class="col-lg-9 col-md-8">
+            <div class="d-flex align-items-center flex-wrap mb-4">
+                <div class="flex-grow-1">
+                    <h1 id="partner_name" t-field="partner.display_name"/>
+                </div>
+            </div>
+            <t t-if="partner">
+                <div t-field="partner.website_description" class="mb-5"/>
             </t>
-        </t>
-        <t t-out="right_column or ''"/>
+            <t t-out="right_column or ''"/>
+        </div>
     </div>
 </template>
 </odoo>
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 18ed412b962..59cbde388fe 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -153,37 +153,8 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         padding-bottom: 0.75rem;
     }
 
-    #o_wsale_offcanvas {
-        width: 80%;
-        max-width: $offcanvas-horizontal-width;
-
-        .o_searchbar_form .dropdown-menu {
-            right: 0;
-        }
-
-        #o_wsale_offcanvas_content {
-            @include o-wsale-scrollbar-subdle();
-        }
-
-        .o_wsale_offcanvas_title {
-            &::after, &:not(.collapsed)::after {
-                width: .75rem;
-                height: .75rem;
-                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$headings-color}'><path transform='#{rotate(45, 8, 8)}' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
-                background-size: .75rem;
-            }
-
-            &:not(.collapsed)::after {
-                transform: rotate(-45deg);
-            }
-
-            // Since this nav is visible on mobile only, remove all visual
-            // effects related to keyboard/mouse navigation.
-            &, &:focus, &:hover {
-                box-shadow: none;
-                z-index: 0;
-            }
-        }
+    #o_wsale_offcanvas_content {
+        @include o-wsale-scrollbar-subdle();
     }
 
     #products_grid_before {
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 16507fe8dd1..66b617bf1df 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -490,8 +490,10 @@
     <!-- OffCanvas Nav -->
     <template id="website_sale.o_wsale_offcanvas" name="Offcanvas">
         <aside id="o_wsale_offcanvas"
-               class="offcanvas offcanvas-end p-0">
-
+               class="o_website_offcanvas offcanvas offcanvas-end p-0">
+            <div class="offcanvas-header justify-content-end">
+                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
+            </div>
             <div t-if="category" class="offcanvas-body d-lg-none flex-grow-0 overflow-visible">
                 <t t-call="website_sale.search">
                     <t t-set="search" t-value="original_search or search"/>
diff --git a/odoo/addons/base/views/ir_qweb_widget_templates.xml b/odoo/addons/base/views/ir_qweb_widget_templates.xml
index bd6d5b12e1d..f8253db4f5e 100644
--- a/odoo/addons/base/views/ir_qweb_widget_templates.xml
+++ b/odoo/addons/base/views/ir_qweb_widget_templates.xml
@@ -15,7 +15,7 @@
 </template>
 
 <template id="contact">
-    <address t-ignore="true" class="mb-0" itemscope="itemscope" itemtype="http://schema.org/Organization">
+    <address t-ignore="true" class="o_portal_address mb-0" itemscope="itemscope" itemtype="http://schema.org/Organization">
         <div t-if="not (('name' in fields) or (address and 'address' in fields) or (city and 'city' in fields) or (mobile and 'mobile' in fields) or (website and 'website' in fields) or (email and 'email' in fields))" class="css_non_editable_mode_hidden">
             --<span class="text-muted" t-esc="name"/>--
         </div>
@@ -36,10 +36,14 @@
                     </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>
             <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">
-                <i t-if="not options.get('no_marker')" class='fa fa-globe' role="img" aria-label="Website" title="Website"/>
+                <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>