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>