diff --git a/addons/event_booth/data/event_booth_category_data.xml b/addons/event_booth/data/event_booth_category_data.xml
index fc9c1bcb159..d20865f3b2a 100644
--- a/addons/event_booth/data/event_booth_category_data.xml
+++ b/addons/event_booth/data/event_booth_category_data.xml
@@ -6,28 +6,23 @@
         <field name="sequence">1</field>
         <field name="image_1920" type="base64" file="event_booth/static/src/img/standard-booth.jpeg"/>
         <field name="description" type="html">
-            <div class="card text-center shadow-sm mt32">
-                <div class="o_wevent_theme_bg_dark card-header p-4">
-                    <h4 class="text-white m-0">Standard</h4>
-                </div>
-                <ul class="list-group list-group-flush">
-                    <li class="list-group-item">
-                        <span>1 Branded Booth</span>
-                    </li>
-                    <li class="o_wevent_theme_bg_dark list-group-item">
-                        <span class="text-white">4m²</span>
-                    </li>
-                    <li class="list-group-item">
-                        <span>46" display screen</span>
-                    </li>
-                    <li class="list-group-item">
-                        <span>1 desk</span>
-                    </li>
-                    <li class="list-group-item">
-                        <span>Logo &amp; link on website</span>
-                    </li>
-                </ul>
-            </div>
+            <ul class="list-group list-group-flush">
+                <li class="list-group-item">
+                    <span>1 Branded Booth</span>
+                </li>
+                <li class="list-group-item">
+                    <span>4m²</span>
+                </li>
+                <li class="list-group-item">
+                    <span>46" display screen</span>
+                </li>
+                <li class="list-group-item">
+                    <span>1 desk</span>
+                </li>
+                <li class="list-group-item">
+                    <span>Logo &amp; link on website</span>
+                </li>
+            </ul>
         </field>
     </record>
 
@@ -36,16 +31,12 @@
         <field name="sequence">2</field>
         <field name="image_1920" type="base64" file="event_booth/static/src/img/premium-booth.jpeg"/>
         <field name="description" type="html">
-            <div class="card text-center shadow-sm mt32">
-                <div class="card-header p-4 bg-secondary">
-                    <h4 class="text-white m-0">Premium</h4>
-                </div>
                 <ul class="list-group list-group-flush">
                     <li class="list-group-item">
                         <span>1 Branded Booth</span>
                     </li>
-                    <li class="list-group-item bg-secondary">
-                        <span class="text-white">4m²</span>
+                    <li class="list-group-item">
+                        <span>4m²</span>
                     </li>
                     <li class="list-group-item">
                         <span>46" display screen</span>
@@ -63,7 +54,6 @@
                         <span>10 + 1 passes</span>
                     </li>
                 </ul>
-            </div>
         </field>
     </record>
 
@@ -72,16 +62,12 @@
         <field name="sequence">3</field>
         <field name="image_1920" type="base64" file="event_booth/static/src/img/vip-booth.jpeg"/>
         <field name="description" type="html">
-            <div class="card text-center shadow-sm mt32">
-                <div class="card-header p-4 bg-primary">
-                    <h4 class="text-white m-0">VIP</h4>
-                </div>
                 <ul class="list-group list-group-flush">
                     <li class="list-group-item">
                         <span>2 Branded Booth</span>
                     </li>
-                    <li class="list-group-item bg-primary">
-                        <span class="text-white">8m²</span>
+                    <li class="list-group-item">
+                        <span>8m²</span>
                     </li>
                     <li class="list-group-item">
                         <span>2 x 46" display screens</span>
@@ -99,7 +85,6 @@
                         <span>10 + 1 passes</span>
                     </li>
                 </ul>
-            </div>
         </field>
     </record>
 
diff --git a/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js b/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js
index 640688aa4da..e774ca96bfe 100644
--- a/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js
+++ b/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js
@@ -4,6 +4,9 @@ import { registry } from "@web/core/registry";
 import wsTourUtils from '@website_sale/js/tours/tour_utils';
 
 var registerSteps = [{
+    content: "Open ticket modal",
+    trigger: 'button.btn-primary:contains("Register")',
+}, {
     content: "Select 2 units of 'Ticket1' ticket type",
     trigger: '#o_wevent_tickets_collapse .row.o_wevent_ticket_selector[name="Ticket1"] select',
     run: 'text 2',
diff --git a/addons/test_event_full/static/src/js/tours/wevent_register_tour.js b/addons/test_event_full/static/src/js/tours/wevent_register_tour.js
index d5c3caf9a8b..c8ed49572d2 100644
--- a/addons/test_event_full/static/src/js/tours/wevent_register_tour.js
+++ b/addons/test_event_full/static/src/js/tours/wevent_register_tour.js
@@ -31,25 +31,23 @@ var discoverTalkSteps = function (talkName, fromList, reminderOn, toggleReminder
         steps = steps.concat([{
             content: `Check Favorite for ${talkName} was already on`,
             trigger: 'div.o_wetrack_js_reminder i.fa-bell',
-            extra_trigger: 'span.o_wetrack_js_reminder_text:contains("Favorite On")',
             run: function () {}, // it's a check
         }]);
     }
     else {
         steps = steps.concat([{
             content: `Check Favorite for ${talkName} was off`,
-            trigger: 'span.o_wetrack_js_reminder_text:contains("Set Favorite")',
+            trigger: 'div.o_wetrack_js_reminder i.fa-bell-o',
             run: function () {}, // it's a check
         }]);
         if (toggleReminder) {
             steps = steps.concat([{
                 content: "Set Favorite",
-                trigger: 'span.o_wetrack_js_reminder_text',
+                trigger: 'div.o_wetrack_js_reminder',
                 run: 'click',
             }, {
                 content: `Check Favorite for ${talkName} is now on`,
                 trigger: 'div.o_wetrack_js_reminder i.fa-bell',
-                extra_trigger: 'span.o_wetrack_js_reminder_text:contains("Favorite On")',
                 run: function () {}, // it's a check
             }]);
         }
@@ -81,9 +79,12 @@ var discoverRoomSteps = function (roomName) {
 var registerSteps = [{
     content: 'Go on Register',
     trigger: 'a.btn-primary:contains("Register")',
+}, {
+    content: 'Open ticket modal',
+    trigger: 'button.btn-primary:contains("Register")',
 }, {
     content: "Select 2 units of 'Standard' ticket type",
-    trigger: '#o_wevent_tickets_collapse .row:has(.o_wevent_registration_multi_select:contains("Free")) select',
+    trigger: '.o_wevent_ticket_selector select',
     run: 'text 2',
 }, {
     content: "Click on 'Register' button",
@@ -119,7 +120,7 @@ var registerSteps = [{
     trigger: 'a:contains("register to your favorites talks now")',
     run: 'click',
 },  {
-    trigger: 'h1:contains("Book your talks")',
+    trigger: 'h4:contains("Book your talks")',
     run: function() {},
 }];
 
@@ -139,7 +140,7 @@ var browseTalksSteps = [{
     trigger: 'a:contains("Talks")',
 }, {
     content: 'Check we are on the talk list page',
-    trigger: 'h1:contains("Book your talks")',
+    trigger: 'h4:contains("Book your talks")',
     run: function () {} // check
 }];
 
@@ -148,7 +149,7 @@ var browseMeetSteps = [{
     trigger: 'a:contains("Community")',
 }, {
     content: 'Check we are on the community page',
-    trigger: 'span:contains("Join a room")',
+    trigger: 'h3:contains("Join a room")',
     run: function () {} // check
 }];
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 19facfeb354..9e1a42867a3 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2585,8 +2585,8 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
 <template id="website_search_box" name="Website Searchbox">
     <div t-attf-class="input-group #{_classes}" role="search">
         <t t-set="search_placeholder">Search...</t>
-        <input type="search" name="search" t-att-class="'search-query form-control oe_search_box %s' % _input_classes" t-att-placeholder="placeholder if placeholder else search_placeholder" t-att-value="search"/>
-        <button type="submit" t-att-class="'btn oe_search_button %s' % (_submit_classes or 'btn-primary')" aria-label="Search" title="Search">
+        <input type="search" name="search" t-att-class="'search-query form-control oe_search_box border-0 bg-light %s' % _input_classes" t-att-placeholder="placeholder if placeholder else search_placeholder" t-att-value="search"/>
+        <button type="submit" t-att-class="'btn oe_search_button %s' % (_submit_classes or 'btn-light')" aria-label="Search" title="Search">
             <i class="oi oi-search"/>
             <span t-if="search" class="oe_search_found">
                 <small>(<t t-out="search_count or 0"/> found)</small>
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index 0f12a338c79..94323558ec8 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -34,7 +34,7 @@
                 <p class="lead mb-3">Every year we invite our community, partners and end-users to come and meet us! It's the ideal event to get together and present new features, roadmap of future versions, achievements of the software, workshops, training sessions, etc....</p>
                 <p class="mb-3">This event is also an opportunity to showcase our partners' case studies, methodology or developments. Be there and see directly from the source the features of the version 12!
                 </p>
-                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="text-bg-light border-start border-2 border-secondary p-3">
                     <p class="mb-0"><i class="fa fa-info-circle me-2"/>This event and all the conferences are in <b>English</b>!</p>
                 </div>
                 <h5 class="mb-2">What's new?</h5>
@@ -51,11 +51,11 @@
                     <li><b>Business Room</b> - To discuss implementation methodologies, best sales practices, etc.</li>
                     <li><b>Workshop Room</b> - Mainly for developers.</li>
                 </ul>
-                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-3" style="border-start-width: 3px !important;">
+                <div class="rounded-end border-start border-secondary p-3 mb-3" style="border-start-width: 3px !important;">
                     <p class="mb-0"><em>If you wish to make a presentation, please send your topic proposal as soon as possible for approval to Mr. Famke Jenssens at ngh (a) yourcompany (dot) com. The presentations should be, for example, a presentation of a community module, a case study, methodology feedback, technical, etc. Each presentation must be in English.</em></p>
                 </div>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="text-bg-light border-start border-2 border-secondary p-3">
                     <p class="mb-0">OpenElec Applications reserves the right to cancel, re-name or re-locate the event or change the dates on which it is held.</p>
                 </div>
             </div>
@@ -79,7 +79,7 @@
                 <p class="lead mb-3">Around one hundred ballons will simultaneously take flight and turn the sky into a beautiful canvas of colours.</p>
                 <p class="lead mb-3">This is the perfect place for spending a nice day with your family, we guarantee you will be leaving with beautiful everlasting memories!</p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="text-bg-light border-start border-2 border-secondary p-3">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                     <p class="mb0">The safety of our attendees and our aeronauts comes first!</p>
                 </div>
@@ -116,7 +116,7 @@
 
     <p>For any additional information, please contact us at <a href="mailto:events@odoo.com">events@odoo.com</a></p>
 
-    <section class="s_we_speaker o_wevent_theme_bg_light p-3 mb-4" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="performer">
+    <section class="s_we_speaker p-3 mb-4" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="performer">
         <span class="badge text-bg-secondary o_wevent_badge float-end">SPEAKER</span>
         <img src="/mail/static/src/img/odoobot.png" width="70" class="img-fluid rounded-circle float-start me-3" alt=""/>
         <div class="overflow-hidden">
@@ -148,7 +148,7 @@
                 <p class="lead mb-3">Bands like Bar Fighters, Led Slippers and Link Floyd will offer you the show of the century during our three day event.</p>
                 <p class="lead mb-3">This is the perfect place for spending a nice time with your friends while listening to some of the most iconic rock songs of all times!</p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="text-bg-light border-start border-2 border-secondary p-3">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                 </div>
             </div>
@@ -181,7 +181,7 @@
                 to chat with experienced players and trainers once the tournament is over!
                 </p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="text-bg-light border-start border-2 border-secondary p-3">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                 </div>
             </div>
@@ -215,7 +215,7 @@
         Special discount codes will be handed out during the various streams, make sure to be there on time.
     </p>
     <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@openwood.example.com">events@penwood.example.com</a>.</p>
-    <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+    <div class="text-bg-light border-start border-2 border-secondary p-3">
         <p class="mb-1">This event is fully online and FREE, if you have paid for tickets, you should get a refund.<br/>
         It will require a good Internet connection to get the best video quality.</p>
     </div>
diff --git a/addons/website_event/static/src/js/website_event_ticket_details.js b/addons/website_event/static/src/js/website_event_ticket_details.js
index b001141c1b9..9de1a28de4f 100644
--- a/addons/website_event/static/src/js/website_event_ticket_details.js
+++ b/addons/website_event/static/src/js/website_event_ticket_details.js
@@ -4,7 +4,6 @@
     publicWidget.registry.ticketDetailsWidget = publicWidget.Widget.extend({
         selector: '.o_wevent_js_ticket_details',
         events: {
-            'click .o_wevent_registration_btn': '_onTicketDetailsClick',
             'change .form-select': '_onTicketQuantityChange'
         },
         start: function (){
@@ -30,24 +29,6 @@
         //--------------------------------------------------------------------------
         // Handlers
         //--------------------------------------------------------------------------
-
-        /**
-         * When the "Fold Tickets Details" option is active, this will be called each
-         * time the user expand or fold the tickets (o_wevent_registration_btn). This
-         * allows to show/hide elements depending on the folding state.
-         *
-         * @private
-         * @param {*} ev
-         */
-        _onTicketDetailsClick: function (ev){
-            ev.preventDefault();
-            if (this.foldedByDefault){
-                let $target = $(ev.currentTarget);
-                $target.toggleClass('btn-primary');
-                $target.children().toggleClass('d-none');
-                $target.siblings('.o_wevent_registration_title, .o_wevent_price_range').toggleClass('d-none');
-            }
-        },
         /**
          * @private
          */
diff --git a/addons/website_event/static/src/scss/event_templates_common.scss b/addons/website_event/static/src/scss/event_templates_common.scss
index 3e448e20602..478a4104cef 100644
--- a/addons/website_event/static/src/scss/event_templates_common.scss
+++ b/addons/website_event/static/src/scss/event_templates_common.scss
@@ -4,21 +4,6 @@ $o-wevent-bg-color-light: mix($o-wevent-bg-color-base, #E9ECEF);
 $o-wevent-bg-color-dark: mix($o-wevent-bg-color-base, #24363a);
 $o-wevent-color: $body-color;
 
-.o_wevent_theme_bg_base {
-    background-color: $o-wevent-bg-color-base !important;
-    color: $o-wevent-color;
-}
-
-.o_wevent_theme_bg_light {
-    background-color: $o-wevent-bg-color-light !important;
-    color: $o-wevent-color;
-}
-
-.o_wevent_theme_bg_dark {
-    background-color: $o-wevent-bg-color-dark !important;
-    color: $o-wevent-color;
-}
-
 .o_wevent_index, .o_wevent_event {
 
     // Simple colored tags according to assigned background color
@@ -73,36 +58,12 @@ $o-wevent-color: $body-color;
      */
 
     .o_wevent_index_topbar_filters {
-        .dropdown-toggle {
-            border: $border-width solid mix(map-get($theme-colors, 'primary'), map-get($grays, '400'));
-            @extend .o_wevent_theme_bg_light;
-            @include border-radius($dropdown-border-radius);
-            &:hover, &:focus {
-                border-color: map-get($theme-colors, 'primary');
-                color: map-get($theme-colors, 'primary');
-                text-decoration: none;
-            }
-            &:after {
-                margin-left: 1.2em;
-            }
-            .fa {
-                margin-right: .4em;
-                color: $o-wevent-color;
-            }
-        }
         .dropdown-menu {
-            margin-top: $navbar-padding-y;
-            min-width: 12rem;
             max-height: 250px;
             overflow-y: auto;
-            @extend .o_wevent_theme_bg_light;
         }
     }
 
-    .o_wevent_event_searchbar_form > input {
-        @extend .o_wevent_theme_bg_light;
-    }
-
     /*
      * COMMON TO ALL ONLINE-* PAGES
      */
@@ -112,39 +73,35 @@ $o-wevent-color: $body-color;
         .o_wevent_online_badge_unpublished{
             opacity: 0.4;
         }
+        .o_wesession_list_item{
+            margin: 1rem 0;
+            border: 1px solid;
+            border-left: 10px solid;
+        }
         // background color-based for new styling
-        .event_color_1 {
-            background-color: rgba(240, 96, 80, 0.2);
+        @for $size from 2 through length($o-colors) {
+            .event_color_#{$size - 1} {
+                &.event_track{
+                    $-bg: adjust-color(nth($o-colors, $size), $lightness: 40%, $saturation: 15%);
+                    @include o-print-color($-bg, background-color, bg-opacity);
+                    > div{
+                        border-top: 3px solid adjust-color(nth($o-colors, $size), $lightness: 10%, $saturation: 15%);
+                    }
+                }
+                &.o_wesession_list_item{
+                    border-color: adjust-color(nth($o-colors, $size), $lightness: 30%, $saturation: 15%);
+                    background-color: unset;
+                }
+            }
         }
-        .event_color_2 {
-            background-color: rgba(244, 164, 96, 0.2);
-        }
-        .event_color_3 {
-            background-color: rgba(247, 205, 31, 0.2);
-        }
-        .event_color_4 {
-            background-color: rgba(108,193,237,0.2);
-        }
-        .event_color_5 {
-            background-color: rgba(129,73,104,0.2);
-        }
-        .event_color_6 {
-            background-color: rgba(235,126,127,0.2);
-        }
-        .event_color_7 {
-            background-color: rgba(44,131,151,0.2);
-        }
-        .event_color_8 {
-            background-color: rgba(71,85,119,0.2);
-        }
-        .event_color_9 {
-            background-color: rgba(214,20,95,0.2);
-        }
-        .event_color_10 {
-            background-color: rgba(48,195,129,0.2);
-        }
-        .event_color_11 {
-            background-color: rgba(147,101,184,0.2);
+        .event_color_0 {
+            background-color: unset;
+            &.event_track{
+                border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
+            }
+            &.o_wesession_list_item{
+                border-color: $o-wevent-bg-color-light;
+            }
         }
 
         .o_wevent_online_page_container {
@@ -156,27 +113,6 @@ $o-wevent-color: $body-color;
                     max-width: 96px;
                 }
             }
-
-            // Left panel
-            .o_wevent_online_page_aside {
-                @extend .o_wevent_theme_bg_base;
-                // Left panel: content display
-                .o_wevent_online_page_aside_content {
-                    li:not(.nav-item) {
-                        border-bottom: 1px solid $border-color;
-                        &:first-child {
-                            border-top: 1px solid $border-color;
-                        }
-                        &:last-child {
-                            border-bottom: 0px;
-                        }
-                    }
-
-                    .o_wevent_online_page_aside_collapse:not(.collapsed) {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
         }
     }
 
diff --git a/addons/website_event/static/src/scss/event_templates_list.scss b/addons/website_event/static/src/scss/event_templates_list.scss
index ddd907c7a78..be8c69c59f6 100644
--- a/addons/website_event/static/src/scss/event_templates_list.scss
+++ b/addons/website_event/static/src/scss/event_templates_list.scss
@@ -20,34 +20,19 @@
 .o_wevent_index {
     // Events List
     .o_wevent_events_list {
-        header {
-            a {
-                transition: all .25s ease-in-out;
-                &:hover, &:focus {
-                    transform: scale(1.05);
-                }
-            }
-        }
-        @include media-breakpoint-up(sm) {
-            #o_wevent_index_main_col article div.col {
-                min-width: 0;
-            }
-        }
         .opt_events_list_columns {
-            header {
+            .card-header {
                 height: 200px;
             }
         }
         .opt_events_list_rows {
-            @include media-breakpoint-down(md) {
-                header {
-                    height: 200px;
-                }
+            .card-header {
+                min-height: 130px;
             }
         }
         .o_wevent_badge_event {
-            @include o-position-absolute($top: 0, $left: 0);
-            @include border-start-radius(0);
+            @include o-position-absolute($top: 0, $right: 0);
+            @include border-end-radius(0);
             padding: ($spacer * .5) $card-spacer-x;
             transform: translateY(-50%);
         }
@@ -74,18 +59,11 @@
                 font-weight: $font-weight-bold;
                 text-transform: uppercase;
             }
+            &.left{
+                left: $card-spacer-x;
+            }
         }
-        .o_wevent_participating,
-        .o_wevent_unpublished {
-            position: absolute;
-            bottom: 0;
-            width: 100%;
-            padding: $card-spacer-y $card-spacer-x;
-            text-align: right;
-        }
-        article {
-            background-color: $o-wevent-bg-color-base;
-            color: $o-wevent-color;
+        a {
             .card-body {
                 background-color: $o-wevent-bg-color-base !important;
                 color: $o-wevent-color;
diff --git a/addons/website_event/static/src/scss/event_templates_page.scss b/addons/website_event/static/src/scss/event_templates_page.scss
index 0da01fdaf3a..e86aeb075d3 100644
--- a/addons/website_event/static/src/scss/event_templates_page.scss
+++ b/addons/website_event/static/src/scss/event_templates_page.scss
@@ -1,5 +1,5 @@
 .o_wevent_event {
-    min-height: calc(98vh - 70px);
+    min-height: calc(95vh - 70px);
 
     // Multi-line event title, even in mobile mode
     nav > div > a.navbar-brand {
@@ -13,11 +13,15 @@
     #o_wevent_event_submenu {
         li.nav-item {
             white-space: nowrap;
+            
+            a{
+                padding: 0;
+                padding-right: 1rem;
+            }
         }
     }
 
     .o_wevent_event_title {
-        margin: 3rem 0;
 
         .o_wevent_event_name {
             font-weight: $display-font-weight;
@@ -52,45 +56,17 @@
             flex: 0 0 33%;
         }
     }
-
-    .o_wevent_sidebar_title {
-        margin-bottom: $spacer;
-        opacity: .5;
-        text-transform: uppercase;
-    }
-
-    .o_wevent_sidebar_block {
-        padding: $spacer * 3;
-        border-bottom: $border-width solid $border-color;
-
-        &:last-child {
-            border-bottom: 0;
-        }
-    }
 }
 
 .o_wevent_event {
     .o_record_cover_container {
         overflow: hidden;
         z-index: 0;
+        color: white;
 
         .o_record_cover_component {
             z-index: -1;
         }
-        &.o_record_has_cover {
-            .o_record_cover_image {
-                background-attachment: fixed;
-
-                &::after {
-                    content: "";
-                    display: block;
-                    @include o-position-absolute(0,0,50%,0);
-                }
-            }
-            .o_wevent_event_title {
-                color: white;
-            }
-        }
     }
 }
 
diff --git a/addons/website_event/static/tests/tours/tickets_questions.js b/addons/website_event/static/tests/tours/tickets_questions.js
index 61fe72d108c..7a10b0ab2b9 100644
--- a/addons/website_event/static/tests/tours/tickets_questions.js
+++ b/addons/website_event/static/tests/tours/tickets_questions.js
@@ -7,17 +7,21 @@ registry.category("web_tour.tours").add('test_tickets_questions', {
     steps: () => [{
     content: "Click on the Design Fair event",
     trigger: 'article:contains("Design Fair New York")',
+}, {
+    content: "Click on Register modal tickets button",
+    trigger: 'button:contains("Register")',
+    run: 'click'
 }, {
     content: "Check Register button is disabled when no ticket selected",
     trigger: 'button:disabled:contains("Register")',
     isCheck: true,
 }, {
     content: "Select 2 'Free' tickets to buy",
-    trigger: 'div.row:contains("Free") select.form-select',
+    trigger: 'div.o_wevent_ticket_selector:contains("Free") select.form-select',
     run: 'text 2'
 }, {
-    content: "Click on Register tickets button",
-    trigger: 'button:contains("Register")',
+    content: "Click on Register (to fill tickets data) button",
+    trigger: 'div.modal-footer button:contains("Register")',
     run: 'click'
 }, {
     trigger: 'div:contains("Ticket #1").modal-body input[name*="name"]',
diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index de2a5ed2063..e0b2275ec41 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -21,12 +21,10 @@
             <!-- Content -->
             <div class="o_wevent_events_list">
                 <div class="container">
-                    <div class="d-flex mx-n3">
-                        <t t-call="website_event.searched_tags"/>
-                    </div>
+                    <t t-call="website_event.searched_tags"/>
                     <div class="row">
-                        <div id="o_wevent_index_main_col" t-attf-class="col-md my-5 #{opt_events_list_columns and 'opt_events_list_columns' or 'opt_events_list_rows'}">
-                            <div class="row">
+                        <div id="o_wevent_index_main_col" t-attf-class="col-md mb-3 #{opt_events_list_columns and 'opt_events_list_columns' or 'opt_events_list_rows'}">
+                            <div class="row g-4 g-lg-3 g-xxl-4">
                                 <!-- Events List -->
                                 <t t-call="website_event.events_list"/>
                             </div>
@@ -49,15 +47,12 @@
 
 <!-- Index Topbar -->
 <template id="index_topbar" name="Topbar">
-    <nav class="navbar navbar-light border-top shadow-sm d-print-none">
-        <div class="container">
-            <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
-                <span class="navbar-brand h4 my-0 me-auto pe-sm-4">Events</span>
-                <ul class="o_wevent_index_topbar_filters nav">
+        <div class="container my-3">
+            <div class="o_wevent_index_topbar_filters d-flex d-print-none align-items-center justify-content-end flex-wrap gap-2 w-100">
+                <h2 class="my-0 me-auto pe-sm-4">Events</h2>
                     <t t-foreach="categories" t-as="category">
-                        <li t-if="category.is_published and category.tag_ids and any(tag.color for tag in category.tag_ids)" class="nav-item dropdown me-2 my-1">
-                            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-                                <i class="fa fa-folder-open"/>
+                        <div t-if="category.is_published and category.tag_ids and any(tag.color for tag in category.tag_ids)" class="dropdown d-none d-lg-block">
+                            <a href="#" role="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                 <t t-out="category.name"/>
                             </a>
                             <div class="dropdown-menu">
@@ -69,24 +64,94 @@
                                     </a>
                                 </t>
                             </div>
-                        </li>
+                        </div>
                     </t>
-                </ul>
-                <div class="d-flex align-items-center flex-wrap ps-sm-3 pe-0">
-                    <t t-call="website_event.events_search_box_input"/>
+                <div class="o_wevent_search d-flex w-100 w-lg-auto">
+                    <div class="w-100 flex-grow-1">
+                        <t t-call="website_event.events_search_box_input"/>
+                    </div>
+                    <button class="btn btn-light position-relative ms-2 d-lg-none"
+                        data-bs-toggle="offcanvas"
+                        data-bs-target="#o_wevent_index_offcanvas">
+                        <i class="fa fa-sliders"/>
+                    </button>
+                </div>
+            </div>
+            <!-- Off canvas filters on mobile-->
+            <div id="o_wevent_index_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">
+                        <t t-foreach="categories" t-as="category">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button border-top collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        t-att-data-bs-target="'.o_wevent_offcanvas_cat_%s' % category.name"
+                                        aria-expanded="false">
+                                        <t t-out="category.name"/>
+                                    </button>
+                                </h2>
+                                <div t-attf-class="o_wevent_offcanvas_cat_#{category.name} accordion-collapse collapse">
+                                    <div class="accordion-body pt-0">
+                                        <ul class="list-group list-group-flush">
+                                            <li t-if="category.is_published and category.tag_ids and any(tag.color for tag in category.tag_ids)" class="list-group-item">
+                                                <t t-foreach="category.tag_ids" t-as="tag">
+                                                    <a t-if="tag.color"
+                                                        t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids if tag in search_tags else (tag | search_tags).ids))"
+                                                        t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{'active' if tag in search_tags else ''}">
+                                                        <t t-out="tag.name"/>
+                                                    </a>
+                                                </t>
+                                            </li>
+                                        </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_wevent_offcanvas_date"
+                                    aria-expanded="false">
+                                    Date
+                                </button>
+                            </h2>
+                            <div class="o_wevent_offcanvas_date accordion-collapse collapse">
+                                <div class="accordion-body pt-0">
+                                    <ul class="list-group list-group-flush">
+                                        <li class="list-group-item">
+                                            <t t-foreach="dates" t-as="date">
+                                                <t t-if="date[3] or (date[0] in ('old','upcoming','all'))">
+                                                    <a t-att-href="keep('/event', date=date[0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('date') == date[0] and 'active'}">
+                                                        <t t-out="date[1]"/>
+                                                        <span t-if="date[3]" t-out="date[3]" t-attf-class="badge rounded-pill #{searches.get('date') == date[0] and 'bg-light text-primary' or 'bg-primary'} ms-3"/>
+                                                    </a>
+                                                </t>
+                                            </t>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </nav>
 </template>
 
 <template id="searched_tags" name="Searched tags">
-    <div class="d-flex align-items-center mt16">
+    <div class="d-flex align-items-center">
         <t t-foreach="search_tags" t-as="tag">
-            <span t-attf-class="align-items-baseline border d-inline-flex ps-2 rounded ml16 mb-2 #{'o_tag_color_%s' % tag.color if tag.color else ''}">
-                <i class="fa fa-tag me-2 text-muted"/>
+            <span t-attf-class="d-inline-flex align-items-baseline rounded border ps-2 me-2 mb-2 #{'o_tag_color_%s' % tag.color if tag.color else ''}">
                 <t t-out="tag.display_name"/>
-                <a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids))" class="btn border-0 py-1">&#215;</a>
+                <a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids))" class="btn border-0 py-1 text-white">&#215;</a>
             </span>
         </t>
     </div>
@@ -94,10 +159,9 @@
 
 <!-- Filter - Date -->
 <template id="event_time" inherit_id="website_event.index_topbar" name="Filter by Date">
-    <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
-        <li class="nav-item dropdown me-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-                <i class="fa fa-calendar"/>
+    <xpath expr="//div[hasclass('o_wevent_search')]" position="before">
+        <div class="dropdown d-none d-lg-block me-2 my-1">
+            <a href="#" role="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                 <t t-if="current_date" t-out="current_date"/>
                 <t t-else="">Upcoming Events</t>
             </a>
@@ -111,15 +175,15 @@
                     </t>
                 </t>
             </div>
-        </li>
+        </div>
     </xpath>
 </template>
 
 <!-- Filter - Location -->
 <template id="event_location" inherit_id="website_event.index_topbar" active="False" name="Filter by Country">
-    <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
+    <xpath expr="//div[hasclass('o_wevent_index_topbar_filters')]" position="inside">
         <li class="nav-item dropdown me-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+            <a href="#" role="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                 <i class="fa fa-map-marker"/>
                 <t t-if="current_country" t-out="current_country.name"/>
                 <t t-else="">All countries</t>
@@ -148,8 +212,8 @@
 <template id="events_list" name="Events list">
     <!-- Options -->
     <t t-set="opt_index_sidebar" t-value="is_view_active('website_event.opt_index_sidebar')"/>
-    <t t-if="opt_events_list_columns" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-md-6' or 'col-md-6 col-lg-4'"/>
-    <t t-else="" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-12' or 'col-xl-10 offset-xl-1'"/>
+    <t t-if="opt_events_list_columns" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-md-6' or 'col-md-6 col-lg-4 col-xl-3'"/>
+    <t t-else="" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-12' or 'col-xl-12'"/>
     <!-- No events -->
     <div t-if="not event_ids" class="col-12 text-center">
         <div t-call="website_event.event_empty_events_svg" class="my-4"/>
@@ -168,67 +232,73 @@
         No results found for '<span t-out="original_search"/>'. Showing results for '<span t-out="searches['search']"/>'.
     </div>
     <!-- List -->
-    <div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size} mb-4">
-        <a t-cache="event if not editable and event.website_published else None" t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-decoration-none" t-att-data-publish="event.website_published and 'on' or 'off'">
-            <article t-attf-class="h-100 #{opt_events_list_cards and 'card border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
-                <div class="h-100 row g-0">
+    <div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size}">
+        <a t-cache="event if not editable and event.website_published else None" t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-decoration-none text-dark " t-att-data-publish="event.website_published and 'on' or 'off'">
+            <article t-attf-class="h-100 #{opt_events_list_cards and 'card'}" itemscope="itemscope" itemtype="http://schema.org/Event">
+                <div t-attf-class="h-100 #{opt_events_list_columns and 'd-flex flex-wrap flex-column' or 'row mx-0'}">
                     <!-- Header -->
-                    <header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12' or 'col-sm-4 col-lg-3'} #{(not opt_events_list_cards) and 'shadow'}">
+                    <header t-attf-class="card-header overflow-hidden bg-secondary p-0 border-0 rounded-0 #{opt_events_list_columns and 'col-12' or 'col-4 col-lg-3'} #{(not opt_events_list_cards) and 'shadow-sm'}">
                         <!-- Image + Link -->
                         <div class="d-block h-100 w-100">
                             <t t-call="website.record_cover">
                                 <t t-set="_record" t-value="event"/>
-
                                 <!-- Short Date -->
-                                <div class="o_wevent_event_date position-absolute shadow-sm o_not_editable">
+                                <div t-attf-class="o_wevent_event_date position-absolute shadow-sm o_not_editable #{(not opt_events_list_columns) and 'left'} ">
                                     <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'LLL'}" class="o_wevent_event_month"/>
                                     <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'dd'}" class="o_wevent_event_day oe_hide_on_date_edit"/>
                                 </div>
+                                <!-- Not open -->
+                                <span t-if="not event.event_registrations_open and (not opt_events_list_cards or not opt_events_list_columns)" class="position-absolute bottom-0 px-3 py-2 w-100 text-bg-light">
+                                    <t t-if="not event.event_registrations_started">
+                                        Registrations not yet open
+                                    </t>
+                                    <t t-elif="event.event_registrations_sold_out">
+                                        Sold Out
+                                    </t>
+                                    <t t-else="">
+                                        Registrations Closed
+                                    </t>
+                                </span>
                                 <!-- Participating -->
-                                <small t-if="event.is_participating" class="o_wevent_participating text-bg-success">
+                                <small t-if="event.is_participating" class="o_wevent_participating position-absolute bottom-0 px-3 py-2 w-100 text-bg-success">
                                     <i class="fa fa-check me-2"/>Registered
                                 </small>
                                 <!-- Unpublished -->
-                                <small t-if="not event.website_published" class="o_wevent_unpublished text-bg-danger">
+                                <small t-if="not event.website_published" class="o_wevent_unpublished position-absolute bottom-0 px-3 py-2 w-100 text-bg-danger">
                                     <i class="fa fa-ban me-2"/>Unpublished
                                 </small>
                             </t>
                         </div>
                     </header>
-                    <div t-att-class="'%s %s position-relative' % (
-                        opt_events_list_columns and 'col-12' or 'col',
-                        opt_events_list_columns and event.event_registrations_open and not event.event_registrations_sold_out and 'h-100' or '')">
-                        <!-- Body -->
-                        <main t-attf-class="#{opt_events_list_cards and 'card-body' or (opt_events_list_columns and 'py-3' or 'px-4')}">
+                    
+                    <!-- Body -->
+                    <main t-attf-class="card-body position-relative d-flex flex-column justify-content-between gap-2 #{opt_events_list_columns and 'col-12 py-3' or 'col-8 col-lg-9 px-4'} #{not opt_events_list_cards and opt_events_list_columns and 'px-0'} #{not opt_events_list_cards and not opt_events_list_columns and 'py-0'}">
+                        <div>
+                            <div class="d-flex flex-wrap gap-2">
+                                <t t-foreach="event.tag_ids.filtered(lambda tag: tag.category_id.website_id == website or not tag.category_id.website_id)" t-as="tag">
+                                    <span t-if="tag.color"
+                                        t-attf-class="badge mt-3 mt-sm-0 rounded-pill px-2 p-1 #{'o_tag_color_%s' % tag.color if tag.color else 'text-bg-light'}">
+                                        <t t-out="tag.name"/>
+                                    </span>
+                                </t>
+                            </div>
                             <!-- Title -->
                             <h5 t-attf-class="card-title mt-2 mb-0 text-truncate #{(not event.website_published) and 'text-danger'}">
                                 <span t-field="event.name" itemprop="name"/>
                             </h5>
                             <!-- Start Date & Time -->
-                            <time class="o_not_editable" itemprop="startDate" t-att-datetime="event.date_begin">
-                                <span t-out="event.date_begin"
-                                    t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'date_only': 'true', 'format': 'long', 'tz_name': event.date_tz}"/> -
-                                <span t-out="event.date_begin"
-                                    t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short', 'tz_name': event.date_tz}"/>
-                                (<span t-out="event.date_tz"/>)
-                            </time>
-                            <!-- Location -->
-                            <div class="o_not_editable" itemprop="location" t-out="event.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
-                            <div class="mt8">
-                                <t t-foreach="event.tag_ids.filtered(lambda tag: tag.category_id.website_id == website or not tag.category_id.website_id)" t-as="tag">
-                                    <span t-if="tag.color"
-                                          t-attf-class="badge mr4 #{'bg-primary' if tag in search_tags else ''} #{'o_tag_color_%s' % tag.color if tag.color else ''}">
-                                        <span t-out="tag.name"/>
-                                    </span>
-                                </t>
-                            </div>
-                        </main>
-                    </div>
+                            <small class="o_not_editable text-muted" itemprop="description" t-out="event.subtitle">
+                            </small>
+                        </div>
+                        <!-- Location -->
+                        <small class="o_not_editable fw-bold" itemprop="location" t-out="event.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
+                    </main>
+                    
                     <!-- Footer -->
-                    <footer t-if="not event.event_registrations_open or event.event_registrations_sold_out"
-                        t-att-class="'alert-secondary small align-self-end w-100 %s %s' % (
-                            opt_events_list_cards and 'card-footer' or (not opt_events_list_columns and 'mx-4 mt-auto pt-2') or 'py-2',
-                            opt_events_list_cards and 'border-top' or '',
+                    <footer t-if="not event.event_registrations_open and opt_events_list_columns and opt_events_list_cards"
+                        t-att-class="'small align-self-end w-100 %s %s' % (
+                            opt_events_list_cards and 'card-footer' or (not opt_events_list_columns and 'py-2 mt-2') or 'py-2',
+                            opt_events_list_cards and 'border-top' or 'px-2',
                         )">
                         <span t-if="not event.event_registrations_open">
                             <t t-if="not event.event_registrations_started">
@@ -258,7 +328,7 @@
 
 <template id="opt_events_list_categories" inherit_id="website_event.events_list" active="False" name="Show Templates">
     <xpath expr="//main/*" position="before">
-        <span t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-end'}" t-field="event.event_type_id"/>
+        <span t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge text-bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'position-absolute bottom-0 end-0'} #{not opt_events_list_columns and opt_events_list_cards and 'me-3 mb-3'}" t-field="event.event_type_id"/>
     </xpath>
 </template>
 
diff --git a/addons/website_event/views/event_templates_page.xml b/addons/website_event/views/event_templates_page.xml
index c115060fd05..c95d16485c0 100644
--- a/addons/website_event/views/event_templates_page.xml
+++ b/addons/website_event/views/event_templates_page.xml
@@ -6,60 +6,8 @@
     <t t-call="website.layout">
         <!-- Options -->
         <t t-set="opt_events_list_categories" t-value="is_view_active('website_event.opt_events_list_categories')"/>
-        <div id="wrap" t-attf-class="o_wevent_event js_event d-flex flex-column #{'o_wevent_hide_sponsors' if hide_sponsors else ''}">
-            <t t-if="not event.menu_id">
-                <nav class="navbar navbar-light border-top shadow-sm d-print-none">
-                    <div class="container align-items-baseline justify-content-start">
-                        <a href="/event" class="navbar-brand h4 my-0 me-0 me-md-4">
-                            <i class="fa fa-long-arrow-left me-2"/>
-                            <span>All Events</span>
-                        </a>
-                        <ul class="navbar-nav flex-row ms-md-auto ms-0">
-                            <li t-if="opt_events_list_categories" class="nav-item me-3">
-                                <a t-attf-href="/event?type=#{event.event_type_id.id}" t-if="event.event_type_id" class="nav-link">
-                                    <i class="fa fa-folder-open me-2"/><span t-field="event.event_type_id"/>
-                                </a>
-                            </li>
-                            <li t-if="event.country_id" class="nav-item me-3">
-                                <a t-attf-href="/event?country=#{event.country_id.id}" class="nav-link">
-                                    <i class="fa fa-map-marker me-2"/><span t-field="event.country_id"/>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="d-flex align-items-centerflex-wrap ps-sm-3 pe-0">
-                            <t t-call="website_event.events_search_box_input">
-                                <t t-set="_classes" t-valuef="ms-auto"/>
-                            </t>
-                        </div>
-                    </div>
-                </nav>
-            </t>
-            <t t-else="">
-                <nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
-                    <div class="container align-items-baseline">
-                        <a t-att-href="event.website_url" t-field="event.name" class="navbar-brand h4 my-0 me-0"/>
-                        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
-                            <span class="navbar-toggler-icon"></span>
-                        </button>
-                        <div id="o_wevent_event_submenu" class="collapse navbar-collapse">
-                            <ul class="navbar-nav w-100 flex-md-wrap" t-att-data-menu_name="editable and 'Event Menu'" t-att-data-content_menu_id="editable and event.menu_id.id">
-                                <t t-foreach="event.menu_id.child_id" t-as="submenu">
-                                    <t t-call="website.submenu">
-                                        <t t-set="item_class" t-value="'nav-item'"/>
-                                        <t t-set="link_class" t-value="'nav-link'"/>
-                                    </t>
-                                </t>
-                            </ul>
-                            <!-- Add Register additional CTA button, in addition to menus -->
-                            <a t-if="event.menu_register_cta and not event.is_participating"
-                                t-att-href="'/event/%s/register' % (slug(event))"
-                                class="btn btn-primary ms-auto">
-                                Register
-                            </a>
-                        </div>
-                    </div>
-                </nav>
-            </t>
+        <div id="wrap" t-attf-class="o_wevent_event js_event d-flex flex-column h-100 #{'o_wevent_hide_sponsors' if hide_sponsors else ''}">
+            <t t-if="not hide_submenu" t-call="website_event.navbar"/>
             <t t-out="0"/>
             <t t-set="editor_sub_message">Following content will appear on all events.</t>
             <div class="oe_structure oe_empty" id="oe_structure_website_event_layout_1" t-att-data-editor-sub-message="editor_sub_message"/>
@@ -67,4 +15,61 @@
     </t>
 </template>
 
+<template id="navbar" name="Event Navbar">
+    <div class="container my-3">
+        <a href="/event">
+            <i class="fa fa-chevron-left me-2"/>
+            <span>Back to events</span> 
+        </a>
+    </div>
+    <div class="mb-3">
+        <div class="container d-flex flex-wrap flex-lg-nowrap justify-content-between align-items-center">
+            <t t-set="active_submenu" t-value="event.menu_id.child_id.filtered(lambda sm: sm._is_active())"></t>
+            <h6 t-field="event.name" t-attf-class="flex-grow-1 #{'my-3' if active_submenu else 'mb-0'}"/>
+            <div class="d-flex flex-grow-1 align-items-center justify-content-end gap-2">
+                <nav t-if="active_submenu" class="navbar navbar-light navbar-expand-md p-0 d-md-none">
+                    <div class="container align-items-baseline">
+                        <div id="o_wevent_event_submenu" class="dropdown nav-item">
+                            <button class="dropdown-toggle btn btn-light" data-bs-toggle="dropdown">
+                                <t t-out="active_submenu.name if len(active_submenu) == 1 else ''"/>
+                            </button>
+                            <ul class="dropdown-menu flex-md-wrap w-100" t-att-data-menu_name="editable and 'Event Menu'" t-att-data-content_menu_id="editable and event.menu_id.id">
+                                <t t-foreach="event.menu_id.child_id" t-as="submenu">
+                                    <t t-call="website.submenu">
+                                        <t t-set="link_class" t-value="'dropdown-item'"/>
+                                    </t>
+                                </t>
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+                <!-- Add Register additional CTA button, in addition to menus -->   
+                <a t-if="event.menu_register_cta and not event.is_participating"
+                    t-att-href="'/event/%s/register' % (slug(event))"
+                    t-attf-class="btn btn-primary #{'d-none' if hide_register_cta else ''}">
+                    Register
+                </a>
+            </div>
+        </div>
+        <nav class="navbar navbar-light navbar-expand-md d-none d-md-block p-0">
+            <div class="container align-items-baseline">
+                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div id="o_wevent_event_submenu" class="collapse navbar-collapse">
+                    <ul class="navbar-nav flex-md-wrap w-100" t-att-data-menu_name="editable and 'Event Menu'" t-att-data-content_menu_id="editable and event.menu_id.id">
+                        <t t-foreach="event.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        
+    </div>
+</template>
+
 </odoo>
diff --git a/addons/website_event/views/event_templates_page_misc.xml b/addons/website_event/views/event_templates_page_misc.xml
index d538158bf49..b8882cceb32 100644
--- a/addons/website_event/views/event_templates_page_misc.xml
+++ b/addons/website_event/views/event_templates_page_misc.xml
@@ -25,11 +25,11 @@
 <template id="template_location">
     <t t-call="website_event.layout">
         <div class="oe_structure" id="oe_structure_website_event_location_1"/>
-        <section class="pt32 pb32">
+        <section>
             <div class="container">
                 <div class="row">
                     <div class="col-12">
-                        <h1 class="o_page_header mb-3">Event Location</h1>
+                        <h3>Event Location</h3>
                         <h4 class="mb-3" t-field="event.address_id" t-options='{
                             "widget": "contact",
                             "fields": ["name"],
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index 1294cff84c5..637cc70f66e 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -4,24 +4,7 @@
 
 <template id="event_details" name="Event Header">
     <t t-call="website_event.layout">
-        <div name="event" itemscope="itemscope" itemtype="http://schema.org/Event">
-            <t t-call="website.record_cover">
-                <t t-set="_record" t-value="event"/>
-                <t t-set="use_filters" t-value="True"/>
-                <t t-set="use_size" t-value="True"/>
-                <t t-set="use_text_align" t-value="True"/>
-
-                <div class="container d-flex flex-column flex-grow-1 justify-content-around">
-                    <div class="o_wevent_event_title">
-                        <span t-if="event.is_participating" class="badge text-bg-success o_wevent_badge"><i class="fa fa-check me-2"/>Registered</span>
-                        <h1 t-field="event.name" class="o_wevent_event_name" itemprop="name" placeholder="Event Title"/>
-                        <h2 t-field="event.subtitle" class="o_wevent_event_subtitle" placeholder="Event Subtitle"/>
-                    </div>
-                </div>
-                <div class="container">
-                    <t t-call="website_event.registration_template"/>
-                </div>
-            </t>
+        <div class="h-100" name="event" itemscope="itemscope" itemtype="http://schema.org/Event">
             <t t-out="0"/>
         </div>
     </t>
@@ -29,253 +12,160 @@
 
 <!-- Event - Description -->
 <template id="event_description_full" name="Event Description" track="1">
+    <t t-set="hide_submenu" t-value="True"/>
+    <t t-set="hide_register_cta" t-value="True"/>
     <t t-call="website_event.event_details">
-        <section class="mt-n5" t-cache="event if not editable and event.website_published else None">
-            <div class="container overflow-hidden">
-                <div class="row g-0 mt-n4 mb-3">
-                    <!-- Description -->
-                    <div id="o_wevent_event_main_col" class="o_wevent_theme_bg_base col-lg-8 px-3 pt-5 pb-0 shadow-sm">
-                        <span t-field="event.description" itemprop="description"/>
+        <section class="h-100" t-cache="event if not editable and event.website_published else None">
+            <div class="container overflow-hidden h-100 pb-5">
+                <div class="row h-100">
+                <div class="col">
+                    <t t-call="website_event.navbar"/>
+                    <!-- Show the button tickets only on mobile -->
+                    <div class="container d-lg-none py-3">
+                        <t t-call="website_event.registration_template"/>
                     </div>
-                    <div class="o_wevent_theme_bg_light col-lg-4 shadow-sm d-print-none">
-                        <!-- Date & Time -->
-                        <div class="o_wevent_sidebar_block">
-                            <h6 class="o_wevent_sidebar_title">Date &amp; Time</h6>
-                            <div class="d-flex">
-                                <h5 t-field="event.date_begin" class="my-1" t-options="{'tz_name': event.date_tz, 'format': 'EEEE MMMM dd, YYYY'}" t-att-datetime="event.date_begin"/>
-                            </div>
-                            <t t-if="not event.is_one_day">Start -</t>
-                            <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
-                            <t t-if="event.is_one_day">
-                                <i class="fa fa-long-arrow-right mx-1"/>
-                            </t>
-                            <t t-else="">
-                                (<span t-out="event.date_tz"/>)
-                                <i class="fa fa-long-arrow-down d-block text-muted mx-3 my-2" style="font-size: 1.5rem"/>
-                                <div class="d-flex">
-                                    <h5 t-field="event.date_end" class="my-1" t-options="{'tz_name': event.date_tz, 'format': 'EEEE MMMM dd, YYYY'}"/>
+                    <!-- Description -->
+                    <div id="o_wevent_event_main_col">
+                        <t t-call="website.record_cover">
+                            <t t-set="_record" t-value="event"/>
+                            <t t-set="use_filters" t-value="True"/>
+                            <t t-set="use_size" t-value="False"/>
+                            <t t-set="use_text_align" t-value="True"/>
+                            <div class="container d-flex flex-column flex-grow-1 justify-content-around">
+                                <div class="o_wevent_event_title p-3 my-5">
+                                    <span t-if="event.is_participating" class="badge text-bg-success o_wevent_badge"><i class="fa fa-check me-2"/>Registered</span>
+                                    <h1 t-field="event.name" class="o_wevent_event_name" itemprop="name" placeholder="Event Title"/>
+                                    <h2 t-field="event.subtitle" class="o_wevent_event_subtitle" placeholder="Event Subtitle"/>
                                 </div>
-                                <t t-if="not event.is_one_day">End -</t>
-                            </t>
-                            <span t-if="not event.is_one_day" t-out="event.date_end" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
-                            <span t-else="" t-field="event.date_end" t-options="{'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}" t-att-datetime="event.date_end"/>
-                            (<span t-out="event.date_tz"/>)
+                            </div>
+                        </t>
+                        <div class="mt-4" t-field="event.description" itemprop="description"/>
+                    </div>
+                </div>
+                    <!-- Sidebar -->
+                    <div class="d-lg-flex justify-content-end col-lg-4 col-xl-3 mb-3 mb-lg-0 d-print-none">
+                        <div class="mt-3">
+                            <!-- Tickets Desktop -->
+                            <div class="container d-none d-lg-block">
+                                <t t-call="website_event.registration_template"/>
+                            </div>
+                            <!-- Date & Time -->
+                            <div class="o_wevent_sidebar_block border-bottom pb-3 my-3">
+                                <h6 class="o_wevent_sidebar_title text-muted text-uppercase">Date &amp; Time</h6>
+                                <div class="d-flex">
+                                    <h6 t-field="event.date_begin" class="my-1" t-options="{'tz_name': event.date_tz, 'format': 'EEEE MMMM dd, YYYY'}" t-att-datetime="event.date_begin"/>
+                                </div>
+                                <t t-if="not event.is_one_day">Start -</t>
+                                <span t-out="event.date_begin" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
+                                <t t-if="event.is_one_day">
+                                    <i class="fa fa-long-arrow-right mx-1"/>
+                                </t>
+                                <t t-else="">
+                                    (<span t-out="event.date_tz"/>)
+                                    <i class="fa fa-long-arrow-down d-block text-muted mx-3 my-2" style="font-size: 1.5rem"/>
+                                    <div class="d-flex">
+                                        <h6 t-field="event.date_end" class="my-1" t-options="{'tz_name': event.date_tz, 'format': 'EEEE MMMM dd, YYYY'}"/>
+                                    </div>
+                                    <t t-if="not event.is_one_day">End -</t>
+                                </t>
+                                <span t-if="not event.is_one_day" t-out="event.date_end" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
+                                <span t-else="" t-field="event.date_end" t-options="{'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}" t-att-datetime="event.date_end"/>
+                                (<span t-out="event.date_tz"/>)
 
-                            <div class="dropdown">
-                                <i class="fa fa-calendar me-1"/>
-                                <a href="#" role="button" data-bs-toggle="dropdown">Add to Calendar</a>
+                                <a href="#" role="button" data-bs-toggle="dropdown" class="btn btn-secondary text-bg-secondary dropdown w-100 mt-3">
+                                    <p class="mb-0"><i class="fa fa-calendar me-2"/>Add to Calendar</p>
+                                </a>
                                 <div class="dropdown-menu">
                                     <a t-att-href="iCal_url" class="dropdown-item">iCal/Outlook</a>
                                     <a t-att-href="google_url" class="dropdown-item" target="_blank">Google</a>
                                 </div>
                             </div>
-                        </div>
-                        <!-- Location -->
-                        <div t-if="event.address_id" class="o_wevent_sidebar_block">
-                            <h6 class="o_wevent_sidebar_title">Location</h6>
-                            <h4 t-field="event.address_id" class="" t-options='{
-                                "widget": "contact",
-                                "fields": ["name"]
-                            }'/>
-                            <div itemprop="location" class="mb-2" t-field="event.address_id" t-options='{
-                                "widget": "contact",
-                                "fields": ["address"],
-                                "no_marker": True
-                            }'/>
-                            <div class="mb-3" t-field="event.address_id" t-options='{
-                                "widget": "contact",
-                                "fields": ["phone", "mobile", "email"]
-                            }'/>
-                            <i class="fa fa-map-marker fa-fw" role="img"/>
-                            <a t-att-href="event._google_map_link()" target="_blank">Get the direction</a>
-                        </div>
-                        <!-- Organizer -->
-                        <div t-if="event.organizer_id" class="o_wevent_sidebar_block">
-                            <h6 class="o_wevent_sidebar_title">Organizer</h6>
-                            <h4 t-field="event.organizer_id"/>
-                            <div itemprop="location" t-field="event.organizer_id" t-options="{'widget': 'contact', 'fields': ['phone', 'mobile', 'email']}"/>
-                        </div>
-                        <!-- Social -->
-                        <div class="o_wevent_sidebar_block">
-                            <h6 class="o_wevent_sidebar_title">SHARE</h6>
-                            <p class="mb-2">Find out what people see and say about this event, and join the conversation.</p>
-                            <t t-snippet-call="website.s_share">
-                                <t t-set="_no_title" t-value="True"/>
-                                <t t-set="_classes" t-valuef="o_wevent_sidebar_social mx-n1"/>
-                                <t t-set="_link_classes" t-valuef="o_wevent_social_link"/>
-                            </t>
+                            <!-- Location -->
+                            <div t-if="event.address_id" class="o_wevent_sidebar_block border-bottom pb-3 mb-3">
+                                <h6 class="o_wevent_sidebar_title text-muted text-uppercase">Location</h6>
+                                <h4 t-field="event.address_id" class="" t-options='{
+                                    "widget": "contact",
+                                    "fields": ["name"]
+                                }'/>
+                                <div itemprop="location" class="mb-2" t-field="event.address_id" t-options='{
+                                    "widget": "contact",
+                                    "fields": ["address"],
+                                    "no_marker": True
+                                }'/>
+                                <div class="mb-3" t-field="event.address_id" t-options='{
+                                    "widget": "contact",
+                                    "fields": ["phone", "mobile", "email"]
+                                }'/>
+                                <a t-att-href="event._google_map_link()" target="_blank" class="btn btn-secondary text-bg-secondary w-100">
+                                    <p class="mb-0"><i class="fa fa-map-marker fa-fw" role="img"/>Get the direction</p>
+                                </a>
+                            </div>
+                            <!-- Organizer -->
+                            <div t-if="event.organizer_id" class="o_wevent_sidebar_block border-bottom pb-3 mb-3">
+                                <h6 class="o_wevent_sidebar_title text-muted text-uppercase">Organizer</h6>
+                                <h4 t-field="event.organizer_id"/>
+                                <div itemprop="location" t-field="event.organizer_id" t-options="{'widget': 'contact', 'fields': ['phone', 'mobile', 'email']}"/>
+                            </div>
+                            <!-- Social -->
+                            <div class="o_wevent_sidebar_block">
+                                <h6 class="o_wevent_sidebar_title text-muted text-uppercase">SHARE</h6>
+                                <p class="mb-2">Find out what people see and say about this event, and join the conversation.</p>
+                                <t t-snippet-call="website.s_share">
+                                    <t t-set="_no_title" t-value="True"/>
+                                    <t t-set="_classes" t-valuef="o_wevent_sidebar_social mx-n1"/>
+                                    <t t-set="_link_classes" t-valuef="o_wevent_social_link"/>
+                                </t>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
+        <t t-call="website_event.modal_ticket_registration"/>
     </t>
 </template>
 
 <!-- Event - Registration -->
 <template id="registration_template" name="Registration">
+    <!-- Show the tickets button only on desktop -->
+    <div t-attf-class="d-flex d-lg-block flex-wrap justify-content-between align-items-center {{event.event_registrations_open and 'pb-3 border-bottom' or ''}}">
+        <div class="d-flex flex-wrap justify-content-between align-items-center w-100 mb-3">
+            <h4 class="mb-0">Tickets</h4>
+            <t t-call="website_event.registration_configure_tickets_button" t-if="request.env.user.has_group('event.group_event_manager')">
+                <t t-set="linkClasses">ms-2</t>
+            </t>
+        </div>
+        <button t-if="event.event_registrations_open" type="button" data-bs-toggle="modal" data-bs-target="#modal_ticket_registration" class="btn btn-primary w-100">Register</button>
+    </div>
     <div t-if="toast_message" class="o_wevent_register_toaster d-none" t-att-data-message="toast_message"/>
-    <div t-if="not event.event_registrations_open" class="o_wevent_theme_bg_base mb-5">
-        <div class="alert alert-info mb-0 row g-0 justify-content-between align-items-center" role="status">
+    <div t-if="not event.event_registrations_open" class="mb-3">
+        <div class="alert alert-info mb-0 d-flex flex-wrap gap-2 justify-content-between align-items-center" role="status">
             <t t-if="not event.event_registrations_started and not event.event_registrations_sold_out">
-                <div class="col col-md-8 d-flex">
+                <div class="d-flex flex-column">
                     <em class="me-2">Ticket Sales starting on
                         <span class="" t-out="event.start_sale_datetime"
                             t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
                         <span t-out="event.date_tz"/>
                     </em>
                     <t t-call="website_event.registration_configure_tickets_button"
-                        t-if="request.env.user.has_group('event.group_event_manager')"/>
+                        t-if="request.env.user.has_group('event.group_event_manager')">
+                            <t t-set="linkClasses">alert-link my-3</t>
+                    </t>
                 </div>
-                <button class="btn btn-danger col col-md-4"  disabled="1">Registrations not yet open</button>
+                <button class="btn btn-danger" disabled="1">Registrations not yet open</button>
             </t>
             <t t-else="">
-                <div class="col col-md-8">
+                <div>
                     <em t-if="event.event_registrations_sold_out">Tickets for this Event are <b>Sold Out</b></em>
                     <em t-else="">Registrations are <b>closed</b></em>
                 </div>
-                <button class="btn btn-danger col col-md-4 py-2" disabled="1">
+                <button class="btn btn-danger py-2 w-100" disabled="1">
                     <span t-if="event.event_registrations_sold_out">Sold Out</span>
                     <span t-else="">Registrations Closed</span>
                 </button>
             </t>
         </div>
     </div>
-    <form t-if="event.event_registrations_open and (not event.event_ticket_ids or any(not ticket.is_expired for ticket in event.event_ticket_ids))"
-        id="registration_form"
-        class="mb-5"
-        t-attf-action="/event/#{slug(event)}/registration/new" method="post"
-        itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
-        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-        <div id="o_wevent_tickets" class="o_wevent_theme_bg_base shadow-sm o_wevent_js_ticket_details" data-folded-by-default="0">
-            <div t-if="registration_error_code == 'insufficient_seats'" class="alert alert-danger" role="alert">
-                <p class="mb-0">
-                    Registration failed! These tickets are not available anymore.
-                </p>
-            </div>
-            <t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
-            <!-- If some tickets expired and there is only one type left, we keep the same layout -->
-            <t t-if="len(event.event_ticket_ids) &gt; 1">
-                <div class="d-flex align-items-center py-2 ps-3 pe-2 border-bottom">
-                    <span class="o_wevent_registration_title text-start">Tickets</span>
-                    <div class="o_wevent_price_range d-none"/>
-                    <t t-call="website_event.registration_configure_tickets_button"
-                        t-if="request.env.user.has_group('event.group_event_manager')"/>
-                    <span t-if="not event.event_registrations_open" class="text-danger">
-                        <i class="fa fa-ban me-2"/>Sold Out
-                    </span>
-                    <a href="#" role="button" class="o_wevent_registration_btn d-none" data-bs-target="#o_wevent_tickets_collapse">
-                        <span>Tickets</span>
-                        <span class="btn p-0 close d-none">×</span>
-                    </a>
-                </div>
-                <div id="o_wevent_tickets_collapse" class="collapse show">
-                    <div t-foreach="tickets" t-as="ticket"
-                         class="o_wevent_theme_bg_light row px-3 py-2 mx-0 border-bottom o_wevent_ticket_selector"
-                         t-att-name="ticket.name">
-                        <div class="col-md-8 col-xs-12 p-0" itemscope="itemscope" itemtype="http://schema.org/Offer">
-                            <h5 itemprop="name" t-field="ticket.name" class="my-0"/>
-                            <t t-if="ticket.description">
-                                <small t-field="ticket.description" class="text-muted py-2"/>
-                                <br/>
-                            </t>
-                            <small t-if="ticket.end_sale_datetime and ticket.sale_available and not ticket.is_expired"
-                                   class="text-muted me-3" itemprop="availabilityEnds">Sales end on
-                                <span itemprop="priceValidUntil" t-out="ticket.end_sale_datetime"
-                                t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
-                                (<span t-out="ticket.event_id.date_tz"/>)
-                            </small>
-                            <small t-if="ticket.start_sale_datetime and not ticket.sale_available and not ticket.is_expired"
-                                   class="text-muted me-3" itemprop="availabilityEnds">
-                                Sales start on <span itemprop="priceValidUntil" t-out="ticket.start_sale_datetime"
-                                t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
-                                (<span t-out="ticket.event_id.date_tz"/>)
-                            </small>
-                        </div>
-                        <div class="col-md-4 col-xs-12 p-0 d-flex align-items-center justify-content-between">
-                            <div class="o_wevent_registration_multi_select"/>
-                            <div class="w-auto ms-auto">
-                                <select t-if="not ticket.is_expired and ticket.sale_available"
-                                    t-attf-name="nb_register-#{ticket.id}"
-                                    class="form-select">
-                                    <t t-set="seats_max_ticket" t-value="(not ticket.seats_limited or ticket.seats_available &gt; 9) and 10 or ticket.seats_available + 1"/>
-                                    <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
-                                    <t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event)"/>
-                                    <t t-foreach="range(0, seats_max)" t-as="nb">
-                                        <option t-out="nb" t-att-selected="len(ticket) == 0 and nb == 0 and 'selected'"/>
-                                    </t>
-                                </select>
-                                <div t-else="" class="text-danger">
-                                    <span t-if="not ticket.sale_available and not ticket.is_expired and ticket.is_launched" >Sold Out</span>
-                                    <span t-if="ticket.is_expired">Expired</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row g-0">
-                        <div class="d-grid col-md-4 offset-md-8 py-2 ps-md-0 pe-md-2">
-                            <button type="submit" class="btn btn-primary o_wait_lazy_js a-submit" disabled="" t-attf-id="#{event.id}">
-                                Register
-                                <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
-                                    (only <t t-out="event.seats_available"/> available)
-                                </t>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </t>
-            <div t-else="" class="o_wevent_registration_single">
-                <div class="row p-2 ps-3">
-                    <div class="col-lg-8 d-flex flex-columns align-items-center" itemscope="itemscope" itemtype="http://schema.org/Offer">
-                        <h6 itemprop="name" class="my-0 pe-3 border-end text-dark o_wevent_single_ticket_name">
-                            <span t-if="tickets" t-field="tickets.name"/>
-                            <span t-else="">Registration</span>
-                        </h6>
-                        <t t-if="tickets.description">
-                            <small t-field="tickets.description" class="text-muted py-2"/>
-                            <br/>
-                        </t>
-                        <small t-if="tickets.end_sale_datetime and tickets.sale_available and not tickets.is_expired"
-                            class="text-muted ms-1 me-3" itemprop="availabilityEnds">
-                            Sales end on
-                            <span itemprop="priceValidUntil" t-out="tickets.end_sale_datetime"
-                                t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
-                            (<span t-out="tickets.event_id.date_tz"/>)
-                        </small>
-                        <t t-call="website_event.registration_configure_tickets_button"
-                        t-if="request.env.user.has_group('event.group_event_manager')"/>
-                        <div class="ms-auto o_wevent_nowrap">
-                            <t t-if="event.event_registrations_open">
-                                <span class="text-dark fw-bold align-middle px-2">Qty</span>
-                                <link itemprop="availability" content="http://schema.org/InStock"/>
-                                <select t-att-name="'nb_register-%s' % (tickets.id if tickets else 0)" class="d-inline w-auto form-select">
-                                    <t t-set="seats_max_ticket" t-value="(not tickets or not tickets.seats_limited or tickets.seats_available &gt; 9) and 10 or tickets.seats_available + 1"/>
-                                    <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
-                                    <t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event) if tickets else seats_max_event"/>
-                                    <t t-foreach="range(0, seats_max)" t-as="nb">
-                                        <option t-out="nb" t-att-selected="nb == 1 and 'selected'"/>
-                                    </t>
-                                </select>
-                            </t>
-                            <t t-else="">
-                                <span itemprop="availability" content="http://schema.org/SoldOut" class="text-danger">
-                                    <i class="fa fa-ban me-2"/>Sold Out
-                                </span>
-                            </t>
-                        </div>
-                    </div>
-                    <div class="d-grid col-lg-4 pt-3 pt-lg-0 ps-2 ps-lg-0">
-                        <button type="submit" class="btn btn-primary o_wait_lazy_js a-submit" t-attf-id="#{event.id}" disabled="disabled">
-                            Register
-                            <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
-                                (only <t t-out="event.seats_available"/> available)
-                            </t>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </form>
 </template>
 
 <template id="registration_attendee_details" name="Registration Attendee Details">
@@ -449,32 +339,148 @@
 
 <!-- Button to configure Tickets -->
 <template id="registration_configure_tickets_button" name="Registration Configure Ticket Button">
-    <div class="o_not_editable mx-2" role="link">
-        <a class="text-nowrap" t-attf-href="/web#id=#{event.id}&amp;menu_id=#{backend_menu_id}&amp;view_type=form&amp;model=event.event">
-            <i class="fa fa-gear me-1" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
-        </a>
+    <a t-attf-class="o_not_editable text-nowrap {{linkClasses or '' }}" t-attf-href="/web#id=#{event.id}&amp;menu_id=#{backend_menu_id}&amp;view_type=form&amp;model=event.event" role="link"  title="Configure event tickets">
+        <i class="fa fa-gear me-1" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
+    </a>
+</template>
+
+<template id="modal_ticket_registration" name="Modal for tickets registration">
+    <!-- Modal -->
+    <div class="modal fade" id="modal_ticket_registration" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+            <div class="modal-header">
+                <div class="o_wevent_registration_title modal-title fs-5" id="staticBackdropLabel">Tickets</div>
+                <div t-if="len(event.event_ticket_ids) &gt; 1" class="o_wevent_price_range ms-2"/>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <form t-if="event.event_registrations_open and (not event.event_ticket_ids or any(not ticket.is_expired for ticket in event.event_ticket_ids))"
+                id="registration_form"
+                t-attf-action="/event/#{slug(event)}/registration/new" method="post"
+                itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
+                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                <div id="o_wevent_tickets" class="shadow-sm o_wevent_js_ticket_details">
+                    <div t-if="registration_error_code == 'insufficient_seats'" class="alert alert-danger" role="alert">
+                        <p class="mb-0">
+                            Registration failed! These tickets are not available anymore.
+                        </p>
+                    </div>
+                    <t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
+                    <!-- If some tickets expired and there is only one type left, we keep the same layout -->
+                    <t t-if="len(event.event_ticket_ids) &gt; 1">
+                        <span t-if="not event.event_registrations_open" class="text-danger">
+                            <i class="fa fa-ban me-2"/>Sold Out
+                        </span>
+                        <div id="o_wevent_tickets_collapse" class="modal-body collapse show">
+                            <div t-foreach="tickets" t-as="ticket"
+                                class="d-flex justify-content-between o_wevent_ticket_selector"
+                                t-att-name="ticket.name">
+                                <div itemscope="itemscope" itemtype="http://schema.org/Offer">
+                                    <h5 itemprop="name" t-field="ticket.name" class="my-0"/>
+                                    <t t-if="ticket.description">
+                                        <small t-field="ticket.description" class="text-muted py-2"/>
+                                        <br/>
+                                    </t>
+                                    <small t-if="ticket.end_sale_datetime and ticket.sale_available and not ticket.is_expired"
+                                        class="text-muted me-3" itemprop="availabilityEnds">Sales end on
+                                        <span itemprop="priceValidUntil" t-out="ticket.end_sale_datetime"
+                                        t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
+                                        (<span t-out="ticket.event_id.date_tz"/>)
+                                    </small>
+                                    <small t-if="ticket.start_sale_datetime and not ticket.sale_available and not ticket.is_expired"
+                                        class="text-muted me-3" itemprop="availabilityEnds">
+                                        Sales start on <span itemprop="priceValidUntil" t-out="ticket.start_sale_datetime"
+                                        t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
+                                        (<span t-out="ticket.event_id.date_tz"/>)
+                                    </small>
+                                </div>
+                                <div class="d-flex align-items-center justify-content-between p-0">
+                                    <div class="o_wevent_registration_multi_select flex-md-grow-1 me-2 text-end"/>
+                                    <div class="w-auto ms-auto">
+                                        <select t-if="not ticket.is_expired and ticket.sale_available"
+                                            t-attf-name="nb_register-#{ticket.id}"
+                                            class="form-select">
+                                            <t t-set="seats_max_ticket" t-value="(not ticket.seats_limited or ticket.seats_available &gt; 9) and 10 or ticket.seats_available + 1"/>
+                                            <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
+                                            <t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event)"/>
+                                            <t t-foreach="range(0, seats_max)" t-as="nb">
+                                                <option t-out="nb" t-att-selected="len(ticket) == 0 and nb == 0 and 'selected'"/>
+                                            </t>
+                                        </select>
+                                        <div t-else="" class="text-danger">
+                                            <span t-if="not ticket.sale_available and not ticket.is_expired and ticket.is_launched" >Sold Out</span>
+                                            <span t-if="ticket.is_expired">Expired</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+                            <button type="submit" class="btn btn-primary o_wait_lazy_js a-submit" disabled="" t-attf-id="#{event.id}">
+                                Register
+                                <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
+                                    (only <t t-out="event.seats_available"/> available)
+                                </t>
+                            </button>
+                        </div>
+                    </t>
+                    <div t-else="" class="o_wevent_registration_single">
+                        <div class="modal-body row px-3 py-2 mx-0">
+                            <div class="col-12 col-md-8 p-0" itemscope="itemscope" itemtype="http://schema.org/Offer">
+                                <h5 itemprop="name" class="my-0 pe-3 o_wevent_single_ticket_name">
+                                    <span t-if="tickets" t-field="tickets.name"/>
+                                    <span t-else="">Registration</span>
+                                </h5>
+                                <t t-if="tickets.description">
+                                    <small t-field="tickets.description" class="text-muted py-2"/>
+                                    <br/>
+                                </t>
+                                <small t-if="tickets.end_sale_datetime and tickets.sale_available and not tickets.is_expired"
+                                    class="text-muted" itemprop="availabilityEnds">
+                                    Sales end on
+                                    <span itemprop="priceValidUntil" t-out="tickets.end_sale_datetime"
+                                        t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
+                                    (<span t-out="tickets.event_id.date_tz"/>)
+                                </small>
+                            </div>
+                            <div class="col-md-4 d-flex align-items-center justify-content-between p-0">
+                                <t t-if="event.event_registrations_open">
+                                    <link itemprop="availability" content="http://schema.org/InStock"/>
+                                    <div class="o_wevent_registration_single_select w-auto ms-auto">
+                                        <select t-att-name="'nb_register-%s' % (tickets.id if tickets else 0)" class="d-inline w-auto form-select">
+                                            <t t-set="seats_max_ticket" t-value="(not tickets or not tickets.seats_limited or tickets.seats_available &gt; 9) and 10 or tickets.seats_available + 1"/>
+                                            <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
+                                            <t t-set="seats_max" t-value="min(seats_max_ticket, seats_max_event) if tickets else seats_max_event"/>
+                                            <t t-foreach="range(0, seats_max)" t-as="nb">
+                                                <option t-out="nb" t-att-selected="nb == 1 and 'selected'"/>
+                                            </t>
+                                        </select>
+                                    </div>
+                                </t>
+                                <t t-else="">
+                                    <span itemprop="availability" content="http://schema.org/SoldOut" class="text-danger">
+                                        <i class="fa fa-ban me-2"/>Sold Out
+                                    </span>
+                                </t>
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
+                            <button type="submit" class="btn btn-primary o_wait_lazy_js a-submit" t-attf-id="#{event.id}" disabled="disabled">
+                                Register
+                                <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
+                                    (only <t t-out="event.seats_available"/> available)
+                                </t>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+            </div>
+        </div>
     </div>
 </template>
 
-<!-- This template is called whenever the "Fold Ticket Details" option is checked on the website (Customize > Fold Tickets Details) -->
-<template id="fold_register_details" inherit_id="website_event.registration_template" active="False" name="Fold ticket details">
-    <xpath expr="//div[@id='o_wevent_tickets']" position="attributes">
-        <attribute name="data-folded-by-default">1</attribute>
-    </xpath>
-    <xpath expr="//div[@id='o_wevent_tickets_collapse']" position="attributes">
-        <attribute name="class">collapse</attribute>
-    </xpath>
-    <xpath expr="//span[hasclass('o_wevent_registration_title')]" position="attributes">
-        <attribute name="class" add="d-none" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('o_wevent_price_range')]" position="attributes">
-        <attribute name="class">o_wevent_price_range</attribute>
-    </xpath>
-    <xpath expr="//a[hasclass('o_wevent_registration_btn')]" position="attributes">
-        <attribute
-            name="class">btn btn-primary o_wevent_registration_btn collapsed ms-auto</attribute>
-        <attribute name="data-bs-toggle">collapse</attribute>
-    </xpath>
-</template>
-
 </odoo>
diff --git a/addons/website_event/views/event_templates_widgets.xml b/addons/website_event/views/event_templates_widgets.xml
index 2738ca09d9a..be6ad53be4e 100644
--- a/addons/website_event/views/event_templates_widgets.xml
+++ b/addons/website_event/views/event_templates_widgets.xml
@@ -4,7 +4,7 @@
 <!-- Search Box -->
 <template id="events_search_box_input" name="Events search box">
     <t t-call="website.website_search_box_input">
-        <t t-set="_classes" t-valuef="o_wevent_event_searchbar_form w-100 my-1 my-lg-0 #{_classes}"/>
+        <t t-set="_classes" t-valuef="o_wevent_event_searchbar_form flex-grow-1 #{_classes}"/>
         <t t-set="search_type" t-valuef="events"/>
         <t t-set="action" t-valuef="/event"/>
         <t t-set="display_description" t-valuef="true"/>
@@ -21,7 +21,7 @@
 
 <template id="events_search_box" inherit_id="website.website_search_box" primary="True">
     <xpath expr="//div[@role='search']" position="replace">
-        <form t-attf-class="o_wevent_event_searchbar_form o_wait_lazy_js w-100 my-1 my-lg-0 #{_classes}"
+        <form t-attf-class="o_wevent_event_searchbar_form o_wait_lazy_js w-100 flex-grow-1 #{_classes}"
               t-att-action="action if action else '/event'" method="get">
             <t t-set="search" t-value="search or _searches and _searches['search']"/>
             <t t-set="placeholder" t-value="placeholder or _placeholder"/>
diff --git a/addons/website_event/views/snippets/s_events.xml b/addons/website_event/views/snippets/s_events.xml
index e883f41cec5..e58bfca520f 100644
--- a/addons/website_event/views/snippets/s_events.xml
+++ b/addons/website_event/views/snippets/s_events.xml
@@ -47,13 +47,13 @@
                     <t t-set="_resize_height" t-value="256"/>
                     <t t-set="_resize_width" t-value="256"/>
 
-                    <div class="s_events_event_date o_wevent_theme_bg_base position-absolute shadow-sm text-dark">
+                    <div class="s_events_event_date position-absolute shadow-sm text-dark">
                         <span t-field="record.date_begin" t-options="{'format': 'LLL'}" class="s_events_event_month"/>
                         <span t-field="record.date_begin" t-options="{'format': 'dd'}" class="s_events_event_day"/>
                     </div>
                 </t>
             </a>
-            <div class="o_wevent_theme_bg_base card-body p-3">
+            <div class="card-body p-3">
                 <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                 <h5 class="mb-0 text-truncate" t-field="record.name"/>
                 <time itemprop="startDate" t-att-datetime="record.date_begin">
diff --git a/addons/website_event_booth/static/src/scss/website_event_booth.scss b/addons/website_event_booth/static/src/scss/website_event_booth.scss
index 403516d0d5e..4a73af52960 100644
--- a/addons/website_event_booth/static/src/scss/website_event_booth.scss
+++ b/addons/website_event_booth/static/src/scss/website_event_booth.scss
@@ -21,8 +21,8 @@ label.o_wbooth_category_unavailable {
     }
 
     & > input + div {
-        padding: 10px;
-        border: 5px solid mix(map-get($theme-colors, 'secondary'), #e9ecef);
+        opacity: .4;
+        border: 3px solid $o-gray-600;
     }
 
     &:not(.o_wbooth_category_unavailable) > input + div {
@@ -30,36 +30,12 @@ label.o_wbooth_category_unavailable {
     }
 
     &:not(.o_wbooth_category_unavailable):hover > input + div {
-        border-color: map-get($theme-colors, 'secondary');
-    }
-
-    &:hover > input + div:before {
-        color: map-get($theme-colors, 'secondary');
+        opacity: .8;
     }
 
     & > input:checked + div,
     &:hover > input:checked + div {
-        border-color: map-get($theme-colors, 'primary');
-    }
-
-    & > input:checked + div:before,
-    &:hover > input:checked + div:before {
-        color: map-get($theme-colors, 'primary');
-    }
-
-    & > input:checked + div:before,
-    &:not(.o_wbooth_category_unavailable):hover > input + div:before {
-        content: "\f058";
-        font-family: "FontAwesome";
-        width: 40px;
-        height: 40px;
-        position: absolute;
-        line-height: 40px;
-        top: -16px;
-        right: -16px;
-        background-color: $o-wevent-bg-color-base;
-        @include font-size(2em);
-        text-align: center;
+        opacity: 1;
     }
 
     & img {
@@ -68,55 +44,41 @@ label.o_wbooth_category_unavailable {
 
 }
 
+.o_wbooth_booths .form-check{
+    position: relative;
+    padding-left: 0;
+
+    & > input {
+        visibility: hidden;
+        position: absolute;
+    }
+    & > input + label {
+        opacity: .4;
+        padding: 1rem;
+        border: 1px solid $o-gray-600;
+    }
+
+    &:hover > input + label  {
+        opacity: 1;
+    }
+
+    & > input:checked + label,
+    &:hover > input:checked + label {
+        opacity: 1;
+        background-color: $o-gray-600;
+        color: $o-white;
+    }
+
+}
+
 .o_wevent_booth_category {
     background-color: $o-wevent-bg-color-light;
 }
 
 .o_wevent_booth_order_progress {
-    $wevent-booth-order-progress-color: mix(map-get($theme-colors, 'primary'), $body-bg, 40%);
-    $wevent-booth-order-progress-color-2: mix(map-get($theme-colors, 'primary'), $body-bg, 33%);
-    $wevent-booth-order-progress-height: 48px;
-    height: $wevent-booth-order-progress-height;
     li {
-        border: 1px solid $wevent-booth-order-progress-color;
-        border-right-width: 0;
-        padding-left: 24px;
-        height: $wevent-booth-order-progress-height;
-        line-height: $wevent-booth-order-progress-height;
-        width: calc(100%/3);
         &.o_current_stage {
-            background: $wevent-booth-order-progress-color;
-            .chevron:before {
-                border-left: 24px solid $wevent-booth-order-progress-color;
-            }
-        }
-        &:first-child {
-            padding-left: 0px;
-            &:hover:not(.o_current_stage) {
-                background-color: $wevent-booth-order-progress-color-2 !important;
-                .chevron, .chevron::before {
-                    border-left-color: $wevent-booth-order-progress-color-2 !important;
-                }
-            }
-        }
-        &:last-child {
-            border-right-width: 1px !important;
-        }
-        .chevron {
-            top: -1px;
-            right: -24px;
-            z-index: 1;
-            border: 24px solid transparent;
-            border-right: 0;
-            border-left: 24px solid $wevent-booth-order-progress-color;
-            &:before {
-                @include o-position-absolute($top:-24px, $right:2px);
-                display: block;
-                border: 24px solid transparent;
-                border-right: 0;
-                border-left: 24px solid $o-wevent-bg-color-base;
-                content: "";
-            }
+            font-weight: bold;
         }
     }
 }
diff --git a/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml b/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
index 3d94ad429a7..21b1dc897f3 100644
--- a/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
+++ b/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
@@ -8,25 +8,12 @@
         </div>
     </t>
 
-    <t t-name="event_booth_registration_complete">
-        <ul class="o_wevent_booth_order_progress list-unstyled d-none d-lg-block mb-0">
-            <li class="position-relative float-start m-0 text-center">
-                <a class="text-decoration-none text-reset" t-attf-href="/event/#{event_id}/booth?booth_category_id=#{booth_category_id}">
-                    <span class="d-block">Booth Selection</span><span class="chevron position-absolute d-block"/>
-                </a>
-            </li>
-            <li class="position-relative float-start m-0 text-center">
-                Contact Details<span class="chevron position-absolute d-block"/>
-            </li>
-            <li class="position-relative float-start m-0 text-center o_current_stage">
-                Confirmed
-            </li>
-        </ul>
-        <div class="col-12 p-5">
-            <div class="row mb-3">
+    <t t-name="event_booth_registration_complete"> 
+        <div class="col-12">
+            <div class="row my-3">
                 <div class="col-12">
-                    <h3>Booth Registration completed!</h3>
-                    <span class="h4 text-muted" t-out="event_name"/>
+                    <h4>Booth Registration completed!</h4>
+                    <h5 class="text-muted" t-out="event_name"/>
                 </div>
             </div>
             <div class="d-flex flex-column">
diff --git a/addons/website_event_booth/views/event_booth_registration_templates.xml b/addons/website_event_booth/views/event_booth_registration_templates.xml
index 24b014d5ce9..a6a80b35901 100644
--- a/addons/website_event_booth/views/event_booth_registration_templates.xml
+++ b/addons/website_event_booth/views/event_booth_registration_templates.xml
@@ -9,14 +9,12 @@
             <form method="post"
                 id="o_wbooth_contact_details_form"
                 t-att-data-event-id="event.id"
-                class="col-12 px-5 py-3 js_website_submit_form">
+                class="col-12 js_website_submit_form">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                 <input type="hidden" name="booth_category_id" t-att-value="booth_category.id"/>
                 <input type="hidden" name="event_booth_ids" t-att-value="event_booths.ids"/>
                 <div id="o_wbooth_contact_details">
-                    <h4 class="mt32">
-                        <strong>Contact Details</strong>
-                    </h4>
+                    <h4>Contact Details</h4>
                     <div class="row mb-3">
                         <label class="col-form-label col-sm-auto">
                             <span>Name</span>
diff --git a/addons/website_event_booth/views/event_booth_templates.xml b/addons/website_event_booth/views/event_booth_templates.xml
index cd03d7c3bc6..75a9b80efff 100644
--- a/addons/website_event_booth/views/event_booth_templates.xml
+++ b/addons/website_event_booth/views/event_booth_templates.xml
@@ -5,19 +5,10 @@
         <t t-call="website_event.layout">
             <div class="o_wbooth_registration" t-att-data-event-id="event.id"
                  itemscope="itemscope" itemtype="http://schema.org/Event">
-                <t t-call="website.record_cover">
-                    <t t-set="_record" t-value="event"/>
-                    <t t-set="use_filters" t-value="True"/>
-                    <t t-set="use_text_align" t-value="True"/>
-                    <t t-set="additionnal_classes" t-value="'pb128'"/>
-
-                    <div class="container d-flex flex-column flex-grow-1">
-                        <h1 class="text-white my-5">Get A Booth</h1>
-                    </div>
-                </t>
-                <section class="mt-n5">
+                <section>
                     <div class="container overflow-hidden">
-                        <div class="o_wevent_theme_bg_base row mb64 g-0 rounded shadow-sm">
+                        <h3>Get A Booth</h3>
+                        <div class="row g-0">
                             <t t-out="0"/>
                         </div>
                     </div>
@@ -56,22 +47,27 @@
                 <t t-call="website_event_booth.event_booth_order_progress">
                     <t t-set="step" t-value="'STEP_BOOTH_SELECTION'"/>
                 </t>
-                <div t-attf-class="#{'col-lg-9' if available_booth_category_ids else 'col-lg-12'} p-4 pt-3">
-                    <form method="post" class="form-horizontal justify-content-center mt32 js_website_submit_form o_wbooth_registration_form"
+                <div t-attf-class="#{'col-lg-12' if available_booth_category_ids else 'col-lg-12'}">
+                    <form method="post" class="form-horizontal js_website_submit_form o_wbooth_registration_form mt-1"
                           t-attf-action="/event/#{slug(event)}/booth/register" t-att-data-event-id="event.id">
                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                        <div class="row">
+                        <div class="row mb-3">
+                            <h4 class="mb-3">Choose your type of booth</h4>
                             <t t-foreach="event.event_booth_category_ids" t-as="booth_category">
                                 <t t-set="booth_category_unavailable" t-value="booth_category not in available_booth_category_ids"/>
-                                <div class="col-md-4 mb-3">
-                                    <label t-attf-class="d-block #{'o_wbooth_category_unavailable' if booth_category_unavailable else ''}">
+                                <div class="col-md-6 col-lg-4 mb-2">
+                                    <label t-attf-class="d-block h-100 #{'o_wbooth_category_unavailable' if booth_category_unavailable else ''}">
                                         <input type="radio" name="booth_category_id" t-att-value="booth_category.id" t-att-disabled="booth_category_unavailable"
-                                               t-att-checked="booth_category.id == selected_booth_category_id"/>
-                                        <div>
-                                            <h5 name="booth_category_name" class="m-0 text-truncate" t-out="booth_category.name"/>
-                                            <span class="img img-responsive">
-                                                <div t-field="booth_category.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_256', 'class': 'mt-2'}"/>
-                                            </span>
+                                            t-att-checked="booth_category.id == selected_booth_category_id"/>
+                                        <div class="card h-100">
+                                            <div t-field="booth_category.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 name="booth_category_name" class="card-title" t-out="booth_category.name"/>
+                                                <span class="booth_category_price"></span>
+                                                <div t-attf-id="o_wbooth_booth_description_#{booth_category.id}"
+                                                    t-field="booth_category.description"/>
+                                            </div>
                                         </div>
                                         <div t-if="booth_category_unavailable" class="o_ribbon_right bg-danger">
                                             <span class="text-nowrap">Sold Out</span>
@@ -81,37 +77,35 @@
                             </t>
                         </div>
                         <t t-if="available_booth_category_ids">
-                            <div t-if="event.exhibition_map" class="row">
-                                <div class="d-grid col-sm-6 offset-sm-3 mb-4">
-                                    <a class="text-decoration-none text-center" href="#" data-bs-toggle="modal" data-bs-target="#mapModal"><i class="fa fa-map-o me-2"/>View Plan</a>
-                                    <div role="dialog" id="mapModal" class="modal" tabindex="-1">
-                                        <div class="modal-dialog modal-lg">
-                                            <div class="modal-content">
-                                                <div class="modal-body">
-                                                    <div t-field="event.exhibition_map" t-options="{'widget': 'image'}" class="img img-responsive"/>
+                            <div class="row">
+                                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+                                    <h4 class="mb-0">Location</h4>
+                                    <div t-if="event.exhibition_map">
+                                        <a class="text-decoration-none text-center" href="#" data-bs-toggle="modal" data-bs-target="#mapModal"><i class="fa fa-map-o me-2"/>View Plan</a>
+                                        <div role="dialog" id="mapModal" class="modal" tabindex="-1">
+                                            <div class="modal-dialog modal-lg">
+                                                <div class="modal-content">
+                                                    <div class="modal-body">
+                                                        <div t-field="event.exhibition_map" t-options="{'widget': 'image'}" class="img img-responsive"/>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-sm-2 offset-sm-1">
-                                    <label for="booth_id" class="control-label">Booths</label>
+                                <div class="col-12 o_wbooth_booths d-flex flex-wrap align-items-center gap-2" t-att-data-selected-booth-ids="selected_booth_ids or ''"/>
+                                <div class="row">
+                                    <div class="alert alert-danger col-12 o_wbooth_unavailable_booth_alert d-none" role="alert">
+                                        <i class="fa fa-exclamation-triangle"/>
+                                        <span>Sorry, several booths are now sold out. Please change your choices before validating again.</span>
+                                    </div>
                                 </div>
-                                <div class="col-sm-6 o_wbooth_booths" t-att-data-selected-booth-ids="selected_booth_ids or ''"/>
-                            </div>
-                            <div class="row">
-                                <div class="alert alert-danger col-12 o_wbooth_unavailable_booth_alert d-none" role="alert">
-                                    <i class="fa fa-exclamation-triangle"/>
-                                    <span>Sorry, several booths are now sold out. Please change your choices before validating again.</span>
-                                </div>
-                            </div>
-                            <div class="row" name="booth_registration_submit">
-                                <div class="col-sm-6 offset-sm-3 mt-5">
-                                    <button type="submit" class="btn btn-primary btn-block fw-bold o_wbooth_registration_submit" disabled="true">
-                                        <span>Book my Booths</span>
-                                    </button>
+                                <div class="my-3" name="booth_registration_submit">
+                                    <div class="d-flex flex-column align-content-end justify-content-end pt-3 border-top">
+                                        <button type="submit" class="o_wbooth_registration_submit btn btn-primary btn-block ms-auto fw-bold" disabled="true">
+                                            <span>Book my Booth(s)</span>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
                         </t>
@@ -120,25 +114,19 @@
                         </div>
                     </form>
                 </div>
-                <div t-if="available_booth_category_ids" class="o_wevent_booth_category col-lg-3 hidden-sm hidden-xs p-4 pt-3">
-                    <t t-foreach="event.event_booth_category_ids" t-as="booth_category">
-                        <div t-attf-id="o_wbooth_booth_description_#{booth_category.id}"
-                             class="o_wbooth_booth_description d-none" t-field="booth_category.description"/>
-                    </t>
-                </div>
             </t>
         </t>
     </template>
 
     <template id="event_booth_order_progress">
-        <ul class="o_wevent_booth_order_progress list-unstyled d-none d-lg-block mb-0">
+        <ul class="o_wevent_booth_order_progress list-unstyled d-none d-lg-block mb-3">
             <li t-attf-class="position-relative float-start m-0 text-center #{'o_current_stage' if step=='STEP_BOOTH_SELECTION' else ''}">
                 <a class="text-decoration-none text-reset" t-attf-href="/event/#{slug(event)}/booth?#{keep_query('booth_category_id', 'booth_ids')}">
-                    <span class="d-block">Booth Selection</span><span class="chevron position-absolute d-block"/>
+                    <span>Booth Selection</span><span class="fa fa-angle-right d-inline-block align-middle mx-sm-3 text-muted fs-5"></span>
                 </a>
             </li>
             <li t-attf-class="position-relative float-start m-0 text-center #{'o_current_stage' if step=='STEP_DETAILS_FORM' else 'text-muted'}">
-                Contact Details<span class="chevron position-absolute d-block"/>
+                Contact Details<span class="fa fa-angle-right d-inline-block align-middle mx-sm-3 text-muted fs-5"></span>
             </li>
             <li class="position-relative float-start m-0 text-center text-muted">
                 <span>Confirmed</span>
diff --git a/addons/website_event_booth_exhibitor/static/tests/tours/website_event_booth_exhibitor.js b/addons/website_event_booth_exhibitor/static/tests/tours/website_event_booth_exhibitor.js
index 84fada9a21f..f93ed118309 100644
--- a/addons/website_event_booth_exhibitor/static/tests/tours/website_event_booth_exhibitor.js
+++ b/addons/website_event_booth_exhibitor/static/tests/tours/website_event_booth_exhibitor.js
@@ -25,7 +25,7 @@
         trigger: '.o_wbooth_booths div:contains("OpenWood Demonstrator 2") input',
     }, {
         content: "Validate attendees details",
-        trigger: 'button:contains("Book my Booths")',
+        trigger: 'button:enabled:contains("Book my Booth(s)")',
         run: 'click',
     }, {
         content: "Fill booth details",
diff --git a/addons/website_event_booth_sale/views/event_booth_registration_templates.xml b/addons/website_event_booth_sale/views/event_booth_registration_templates.xml
index 39be8642fcc..06494ba3fa1 100644
--- a/addons/website_event_booth_sale/views/event_booth_registration_templates.xml
+++ b/addons/website_event_booth_sale/views/event_booth_registration_templates.xml
@@ -4,7 +4,7 @@
     <template id="event_booth_registration_details" inherit_id="website_event_booth.event_booth_registration_details">
         <xpath expr="//button[hasclass('o_wbooth_registration_confirm')]//span" position="replace">
             <t t-if="has_payment_step">Go to Payment</t>
-            <t t-else="">Book my Booths</t>
+            <t t-else="">Book my Booth(s)</t>
         </xpath>
     </template>
 
diff --git a/addons/website_event_booth_sale/views/event_booth_templates.xml b/addons/website_event_booth_sale/views/event_booth_templates.xml
index 1ef91efa47b..33c6a6c9ff9 100644
--- a/addons/website_event_booth_sale/views/event_booth_templates.xml
+++ b/addons/website_event_booth_sale/views/event_booth_templates.xml
@@ -2,7 +2,7 @@
 <odoo>
 
     <template id="event_booth_registration" inherit_id="website_event_booth.event_booth_registration">
-        <xpath expr="//h5[@name='booth_category_name']" position="after">
+        <xpath expr="//label//span[hasclass('booth_category_price')]" position="replace">
             <t t-if="booth_category.price">
                 <t t-if="(booth_category.price - booth_category.price_reduce) &gt; 0 and website.pricelist_id.discount_policy == 'without_discount'">
                     <del t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
@@ -14,14 +14,14 @@
                          t-field="booth_category.price_incl"
                          t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
                 </t>
-                <span t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
-                      t-field="booth_category.price_reduce" class="fw-normal text-muted"
+                <h5 t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
+                      t-field="booth_category.price_reduce"
                       t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
-                <span t-else=""
-                      t-field="booth_category.price_reduce_taxinc" class="fw-normal text-muted"
+                <h5 t-else=""
+                      t-field="booth_category.price_reduce_taxinc"
                       t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
             </t>
-            <span t-else="" class="fw-normal text-muted">Free</span>
+            <h5 t-else="">Free</h5>
         </xpath>
         <xpath expr="//input[@name='booth_category_id']" position="attributes">
             <attribute name="t-att-data-price">
@@ -33,13 +33,11 @@
                 ) or '0'
             </attribute>
         </xpath>
-        <xpath expr="//div[@name='booth_registration_submit']" position="before">
-            <div class="row o_wbooth_booth_total_price d-none">
-                <div class="col-sm-2 offset-sm-1">
-                    <span class="fw-bold">Total</span>
-                </div>
-                <div class="col-sm-6">
-                    <span class="fw-bold" t-out="float(0)"
+        <xpath expr="//button[hasclass('o_wbooth_registration_submit')]" position="before">
+            <div class="o_wbooth_booth_total_price d-none pb-3 text-end">
+                <div class="fw-bold">
+                    <span>Total</span>
+                    <span t-out="float(0)"
                           t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
                 </div>
             </div>
diff --git a/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml b/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml
index c858ca2c2c2..2c1867ba656 100644
--- a/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml
+++ b/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml
@@ -55,7 +55,7 @@
                             </div>
                             <span class="text-muted" t-if="sponsorData.subtitle" t-out="sponsorData.subtitle"/>
                             <span t-if="sponsorData.url">
-                                <i class="fa fa-home me-2"/><a t-att-href="sponsorData.url"><span t-out="sponsorData.url"/></a>
+                                <i class="fa fa-globe me-2"/><a t-att-href="sponsorData.url"><span t-out="sponsorData.url"/></a>
                             </span>
                             <span t-if="sponsorData.email">
                                 <i class="fa fa-envelope me-2"/><a t-att-mailto="sponsorData.email"><span t-out="sponsorData.email"/></a>
diff --git a/addons/website_event_exhibitor/static/src/js/event_sponsor_search.js b/addons/website_event_exhibitor/static/src/js/event_sponsor_search.js
index 7dfbcf91eac..6fd0b80278f 100644
--- a/addons/website_event_exhibitor/static/src/js/event_sponsor_search.js
+++ b/addons/website_event_exhibitor/static/src/js/event_sponsor_search.js
@@ -9,10 +9,12 @@ publicWidget.registry.websiteEventSearchSponsor = publicWidget.Widget.extend({
         'click .o_search_tag .btn': '_onTagRemove',
         'click .o_dropdown_reset_tags': '_onTagReset',
         'change .o_wevent_event_tags_form input': '_onTagAdd',
+        'change .o_wevent_event_tags_mobile_form input': '_onTagAddMobile',
     },
 
     start: function () {
         this.form = this.$el.find('.o_wevent_event_tags_form');
+        this.mobileForm = this.$el.find('.o_wevent_event_tags_mobile_form');
         return this._super.apply(this, arguments);
     },
 
@@ -29,6 +31,10 @@ publicWidget.registry.websiteEventSearchSponsor = publicWidget.Widget.extend({
         this.form.submit();
     },
 
+    _onTagAddMobile: function () {
+        this.mobileForm.submit();
+    },
+
     _onTagRemove: function (event) {
         const tag = $(event.target).parent();
         const data = tag.data();
diff --git a/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss b/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss
index fd90b3eb06d..d9e62b00634 100644
--- a/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss
+++ b/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss
@@ -23,6 +23,9 @@
             padding: 1rem;
             background-color: $o-wevent-bg-color-base !important;
             color: $o-wevent-color;
+            img{
+                max-height: 1rem;
+            }
         }
 
         .card-footer {
@@ -99,8 +102,9 @@
             }
 
             .o_wesponsor_aside_logo {
-                max-width: 40px;
-                object-fit: contain;
+                width: 50px;
+                height: 30px;
+                object-fit: cover;
                 object-position: top;
             }
 
diff --git a/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss b/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss
index daecd7900a7..b6f51ccefbd 100644
--- a/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss
+++ b/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss
@@ -13,9 +13,6 @@
     color: #404040;
     padding-top: 2px;
     padding-bottom: 2px;
-    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
 }
 
 .o_wevent_event .ribbon_Gold {
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
index d37280f8ed4..1573c50d60c 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
@@ -3,13 +3,13 @@
 
 <template id="event_exhibitors" name="Event Exhibitors">
     <t t-call="website_event.layout">
-        <div class="o_wevent_online o_wesponsor_index">
+        <div class="o_wevent_online o_wesponsor_index container">
             <!-- Topbar -->
             <t t-call="website_event_exhibitor.exhibitors_topbar"/>
             <!-- Drag/Drop Area -->
             <div id="oe_structure_wesponsor_index_1" class="oe_structure"/>
             <!-- Content -->
-            <div class="o_wesponsor_container container">
+            <div class="o_wesponsor_container">
                 <div class="row">
                     <t t-call="website_event_exhibitor.exhibitors_search"/>
                 </div>
@@ -31,22 +31,38 @@
 
 <!-- Main topbar -->
 <template id="exhibitors_topbar" name="Exhibitor Tools">
-    <nav class="navbar navbar-light border-top shadow-sm d-print-none">
-        <div class="container">
-            <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
-                <form class="o_wevent_event_tags_form" action="#" method="POST">
-                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                    <ul class="o_wesponsor_topbar_filters o_wevent_index_topbar_filters nav"/>
-                </form>
-                <div class="o_wevent_event_search_box d-flex align-items-center flex-wrap ps-sm-3 pe-0">
-                    <t t-call="website_event_exhibitor.exhibitor_search_box">
-                        <t t-set="search" t-value="search_key" />
-                        <t t-set="placeholder" t-value="'Search an exhibitor ...'"/>
-                    </t>
-                </div>
+    <div class="d-flex d-print-none align-items-center justify-content-end flex-wrap gap-2 w-100">
+        <h3 class="my-0 me-auto pe-sm-4">Exhibitors</h3>
+        <form class="o_wevent_event_tags_form d-none d-lg-block" action="#" method="POST">
+            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+            <div class="o_wesponsor_topbar_filters o_wevent_index_topbar_filters d-flex gap-2"/>
+        </form>
+        <div class="o_wevent_search d-flex w-100 w-lg-auto">
+            <div class="o_wevent_event_search_box d-flex align-items-center flex-wrap flex-grow-1">
+                <t t-call="website_event_exhibitor.exhibitor_search_box">
+                    <t t-set="search" t-value="search_key" />
+                    <t t-set="placeholder" t-value="'Search an exhibitor ...'"/>
+                </t>
             </div>
+            <button class="btn btn-light position-relative ms-2 d-lg-none"
+                data-bs-toggle="offcanvas"
+                data-bs-target="#o_wevent_exhibitors_offcanvas">
+                <i class="fa fa-sliders"/>
+            </button>
         </div>
-    </nav>
+    </div>
+    <!-- Off canvas filters on mobile-->
+    <div id="o_wevent_exhibitors_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">
+            <form class="o_wevent_event_tags_mobile_form" action="#" method="POST">
+                <div class="o_wesponsor_topbar_filters_mobile accordion accordion-flush"/>
+            </form>
+        </div>
+    </div>
 </template>
 
 <!-- Topbar: optional country filters -->
@@ -54,10 +70,9 @@
     inherit_id="website_event_exhibitor.exhibitors_topbar"
     name="Filter by Country"
     active="True">
-    <xpath expr="//ul[hasclass('o_wesponsor_topbar_filters')]" position="inside">
-        <li class="nav-item dropdown me-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-                <i class="fa fa-folder-open"/>
+    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters')]" position="inside">
+        <div class="dropdown flex-grow-1">
+            <a href="#" role="button" class="btn btn-light dropdown-toggle w-100" data-bs-toggle="dropdown">
                 By Country
             </a>
             <div class="dropdown-menu">
@@ -73,7 +88,44 @@
                     </label>
                 </t>
             </div>
-        </li>
+        </div>
+    </xpath>
+    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters_mobile')]" position="inside">
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target=".o_wevent_offcanvas_country"
+                    aria-expanded="false"
+                    aria-controls="o_wevent_offcanvas_country">
+                    By Country
+                </button>
+            </h2>
+            <div class="o_wevent_offcanvas_country accordion-collapse collapse">
+                <div class="accordion-body pt-0">
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                            <a t-att-href="'/event/%s/exhibitors?%s' % (
+                                        slug(event),
+                                        keep_query('*', search_countries='')
+                                    )">
+                                All Countries
+                            </a>
+                        </li>
+                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                        <t t-foreach="sponsor_countries" t-as="sponsor_country">
+                            <label t-attf-class="dropdown-item {{ 'active' if sponsor_country.id in search_countries.ids else '' }}">
+                                <input class="d-none" type="checkbox" name="sponsor_country" multiple="multiple"
+                                    t-att-value="sponsor_country.id"
+                                    t-att-checked="'checked' if sponsor_country.id in search_countries.ids else None"/>
+                                <t t-out="sponsor_country.name"/>
+                            </label>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+        </div>
     </xpath>
 </template>
 
@@ -82,10 +134,9 @@
     inherit_id="website_event_exhibitor.exhibitors_topbar"
     name="Filter by Sponsorship"
     active="True">
-    <xpath expr="//ul[hasclass('o_wesponsor_topbar_filters')]" position="inside">
-        <li class="nav-item dropdown me-2 my-1">
-            <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-                <i class="fa fa-folder-open"/>
+    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters')]" position="inside">
+        <div class="dropdown flex-grow-1">
+            <a href="#" role="button" class="btn btn-light dropdown-toggle w-100" data-bs-toggle="dropdown">
                 By Level
             </a>
             <div class="dropdown-menu">
@@ -101,7 +152,41 @@
                     </label>
                 </t>
             </div>
-        </li>
+        </div>
+    </xpath>
+    <xpath expr="//div[hasclass('o_wesponsor_topbar_filters_mobile')]" position="inside">
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target=".o_wevent_offcanvas_country"
+                    aria-expanded="false"
+                    aria-controls="o_wevent_offcanvas_country">
+                    By Level
+                </button>
+            </h2>
+            <div class="o_wevent_offcanvas_country accordion-collapse collapse">
+                <div class="accordion-body pt-0">
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                            <a >
+                                All Levels
+                            </a>
+                        </li>
+                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                        <t t-foreach="sponsor_types" t-as="sponsor_type">
+                            <label t-attf-class="dropdown-item {{ 'active' if sponsor_type.id in search_sponsorships.ids else '' }}">
+                                <input class="d-none" type="checkbox" name="sponsor_type" multiple="multiple"
+                                    t-att-value="sponsor_type.id"
+                                    t-att-checked="'checked' if sponsor_type.id in search_sponsorships.ids else None"/>
+                                <t t-out="sponsor_type.name"/>
+                            </label>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+        </div>
     </xpath>
 </template>
 
@@ -137,9 +222,8 @@
 <!-- Exhibitors: Cards-based display -->
 <template id="exhibitors_display_cards" name="Exhibitors Cards">
     <div t-foreach="sponsor_categories" t-as="sponsor_category" class="row mb-3">
-        <div class="col-12">
-            <h2 class="m-0" t-out="sponsor_category['sponsorship'].name"/>
-            <hr class="mt-2 mb-2"/>
+        <div class="col-12 mb-3">
+            <h4 class="m-0" t-out="sponsor_category['sponsorship'].name"/>
         </div>
         <div t-foreach="sponsor_category['sponsors']" t-as="sponsor" class="col-md-6 col-lg-3 mb-4">
             <t t-call="website_event_exhibitor.exhibitor_card"/>
@@ -152,9 +236,9 @@
 <!-- ============================================================ -->
 
 <template id="exhibitor_card" name="Exhibitor Card">
-    <article class="h-100 card border-0 shadow-sm o_wesponsor_card"
+    <article class="o_wesponsor_card card h-100"
         itemscope="itemscope" itemtype="http://schema.org/Event">
-        <div class="h-100 row g-0" t-att-data-publish="sponsor.website_published and 'on' or 'off'">
+        <div class="row g-0 h-100" t-att-data-publish="sponsor.website_published and 'on' or 'off'">
             <t t-set="sponsor_image_url" t-value="sponsor.website_image_url"/>
             <header t-att-class="'overflow-hidden col-12 %s' % ('bg-secondary' if not sponsor_image_url else '')">
                 <div class="d-block h-100 w-100">
@@ -163,7 +247,7 @@
                         <small t-if="not sponsor.is_published" class="o_wesponsor_card_header_badge bg-danger">
                             <i class="fa fa-ban me-2"/>Unpublished
                         </small>
-                        <img class="position-absolute me-2 mt-2"
+                        <img class="position-absolute me-3 mt-3"
                             style="right: 0; top: 0; max-height: 20px;"
                             t-if="sponsor.partner_id.country_id"
                             t-att-src="sponsor.partner_id.country_id.image_url"
@@ -177,10 +261,10 @@
                     </div>
                 </div>
             </header>
-            <div class="o_wevent_theme_bg_base col-12 h-100">
+            <div class="col-12 h-100 border-top">
                 <main class="card-body">
                     <!-- Title -->
-                    <h5 class="card-title mt-0 mb-0 d-flex align-items-start">
+                    <h5 class="card-title d-flex align-items-start justify-content-between mt-0 mb-0">
                         <span t-field="sponsor.name" itemprop="name" class="text-break"/>
                         <span t-if="sponsor.is_in_opening_hours and sponsor.chat_room_id"
                             class="ms-auto badge text-bg-danger">Live
@@ -212,7 +296,7 @@
 
 <!-- Searched terms -->
 <template id="exhibitors_search" name="Exhibitors: search terms">
-    <div class="d-flex align-items-center mb-3">
+    <div class="d-flex flex-wrap align-items-center mb-3">
         <t t-foreach="search_countries" t-as="country">
             <t t-call="website_event_exhibitor.exhibitors_search_tag">
                 <t t-set="value" t-value="country.id"/>
@@ -232,10 +316,10 @@
 
 <template id="exhibitors_search_tag" name="Exhibitors: term">
     <span t-att-data-field="field" t-att-data-value="value"
-        class="o_search_tag align-items-baseline border d-inline-flex ps-2 mt-3 rounded ml16 mb-2 bg-white">
+        class="o_search_tag d-flex align-items-baseline ps-2 my-2 me-2 border rounded bg-white">
         <i class="fa fa-tag me-2 text-muted"/>
         <t t-out="label"/>
-        <span class="btn border-0 py-1">&#215;</span>
+        <span class="btn border-0 py-1 px-2">&#215;</span>
     </span>
 </template>
 
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
index b61f9361bf5..d8e332d52e9 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
@@ -30,7 +30,7 @@
 <!-- ============================================================ -->
 
 <template id="exhibitor_main" name="Exhibitor: Main Content">
-    <div t-att-class="'col-12 o_wesponsor_exhibitor_main border mt-3 p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
+    <div t-att-class="'o_wesponsor_exhibitor_main col-12 border mt-3 p-0 %s' % ('col-lg-10' if option_widescreen else 'col-lg-9')">
         <!-- EVENT NOT STARTED ALERTS -->
         <t t-if="not sponsor.event_id.is_ongoing">
             <div t-if="sponsor.event_id.is_done" class="alert alert-warning rounded-0 text-center" role="alert">
@@ -97,8 +97,7 @@
         <div class="h5 m-3">
             About <t t-out="sponsor.name"/>
         </div>
-        <hr class="my-0"/>
-        <div class="ms-3 clearfix">
+        <div class="container clearfix border-top">
             <div t-if="sponsor.image_128 or sponsor.partner_id.image_128" class="float-start pt-3 pe-3">
                 <span t-if="sponsor.image_128" t-field="sponsor.image_128" class="o_wevent_online_page_avatar"
                     t-options="{'widget': 'image', 'filename-field': 'partner_name'}"/>
@@ -110,7 +109,7 @@
                     <div class="d-flex align-items-center">
                         <span t-field="sponsor.name" class="h4 mb-0"/>
                         <span t-if="sponsor.sponsor_type_id.display_ribbon_style and sponsor.sponsor_type_id.display_ribbon_style != 'no_ribbon'"
-                              t-field="sponsor.sponsor_type_id" t-attf-class="o_ribbon o_ribbon_right ribbon_#{sponsor.sponsor_type_id.display_ribbon_style}"/>
+                              t-field="sponsor.sponsor_type_id" t-attf-class="o_ribbon ribbon_#{sponsor.sponsor_type_id.display_ribbon_style} badge ms-3 fw-bold"/>
                     </div>
                     <span t-field="sponsor.subtitle"
                         t-att-class="'text-muted %s' % '' if sponsor.hour_from and sponsor.hour_to else 'mb-3'"/>
@@ -123,10 +122,10 @@
                         (<span t-out="sponsor.event_date_tz"/>)
                     </div>
                     <div t-if="sponsor.url" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-home me-2"/><a t-att-href="sponsor.url"><span t-field="sponsor.url"/></a>
+                        <i class="fa fa-globe me-2"/><a t-att-href="sponsor.url"><span t-field="sponsor.url"/></a>
                     </div>
                     <div t-elif="sponsor.partner_id.website" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-home me-2"/><a t-att-href="sponsor.partner_id.website"><span t-field="sponsor.partner_id.website"/></a>
+                        <i class="fa fa-globe me-2"/><a t-att-href="sponsor.partner_id.website"><span t-field="sponsor.partner_id.website"/></a>
                     </div>
                     <div t-if="sponsor.email" class="d-flex text-break align-items-baseline">
                         <i class="fa fa-envelope me-2"/><a t-att-mailto="sponsor.email"><span t-field="sponsor.email"/></a>
@@ -137,7 +136,7 @@
                 </div>
                 <a t-if="sponsor.partner_id.country_id"
                     t-att-href="'/event/%s/exhibitors?countries=%s' % (slug(sponsor.event_id), [sponsor.partner_id.country_id.id])"
-                    t-attf-class="text-end d-none d-md-block #{'me-5' if sponsor.sponsor_type_id.display_ribbon_style and sponsor.sponsor_type_id.display_ribbon_style != 'no_ribbon' else ''}">
+                    class="d-none d-md-block text-end">
                     <img class="img"
                         style="max-height: 36px;"
                         t-att-src="sponsor.partner_id.country_id.image_url"
@@ -147,7 +146,7 @@
         </div>
         <!-- Website description -->
         <div t-if="not is_html_empty(sponsor.website_description)" t-field="sponsor.website_description"
-             class="my-2 mx-3 oe_no_empty"/>
+             class="my-2 oe_no_empty"/>
         <t t-elif="env.user.has_group('event.group_event_user')">
             <div t-field="sponsor.website_description" class="my-2 mx-3"
                  placeholder="e.g. &quot;Openwood specializes in home decoration...&quot;"/>
@@ -167,35 +166,34 @@
 <!-- ============================================================ -->
 
 <template id="exhibitor_aside" name="Exhibitor: Aside">
-    <div t-att-class="'col-12 mt-3 ps-0 pe-0 border o_wevent_online_page_aside o_wesponsor_exhibitor_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
+    <div t-att-class="'o_wevent_online_page_aside o_wesponsor_exhibitor_aside col-12 mt-3 ps-0 pe-0 border %s' % ('col-lg-2' if option_widescreen else 'col-lg-3')">
         <div class="o_wevent_online_page_aside_content">
-            <div class="d-flex align-items-center justify-content-between me-2">
+            <div class="d-flex align-items-center justify-content-between">
                 <span class="h5 m-3">Other exhibitors</span>
                 <a href="#collapse_exhibitor_aside" data-bs-toggle="collapse"
-                   class="d-lg-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
+                   class="o_wevent_online_page_aside_collapse d-lg-none p-2 text-decoration-none collapsed">
                     <i class="oi oi-chevron-down d-lg-none"/>
                 </a>
             </div>
-            <ul id="collapse_exhibitor_aside" class="list-unstyled collapse d-lg-block mb-0">
-                <li t-foreach="sponsors_other" t-as="sponsor_other">
-                    <a class="row g-0 px-2 pt-2 pb-1 text-decoration-none"
+            <ul id="collapse_exhibitor_aside" class="list-group list-group-flush collapse d-lg-block">
+                <li class="list-group-item list-group-item-action" t-foreach="sponsors_other" t-as="sponsor_other">
+                    <a class="d-flex flex-wrap flex-md-nowrap text-decoration-none text-dark"
                         t-att-href="sponsor_other.website_url"
                         t-att-data-publish="sponsor_other.website_published and 'on' or 'off'">
-                        <div class="col-3 d-flex flex-column align-items-center">
+                        <div class="d-flex flex-column align-items-center">
                             <img t-if="sponsor_other.partner_id.country_id"
-                            class="me-2 mb-1 o_wesponsor_aside_logo"
+                            class="o_wesponsor_aside_logo mb-1"
                             t-att-src="sponsor_other.partner_id.country_id.image_url"
                             t-att-alt="sponsor_other.partner_id.country_id.name"/>
                             <span t-if="sponsor_other.sponsor_type_id.display_ribbon_style not in [False, 'no_ribbon']"
-                                t-att-class="'badge text-bg-light me-2 ribbon_%s' % sponsor_other.sponsor_type_id.display_ribbon_style"
+                                t-att-class="'badge text-bg-light ribbon_%s' % sponsor_other.sponsor_type_id.display_ribbon_style"
                                 t-out="sponsor_other.sponsor_type_id.name"/>
-                            <span t-else="" class="badge text-bg-light me-2"
+                            <span t-else="" class="badge text-bg-light"
                                 t-out="sponsor_other.sponsor_type_id.name"/>
                         </div>
-                        <div class="col flex-grow-1 overflow-auto">
+                        <div class="flex-grow-1 overflow-auto px-2">
                             <span class="d-flex align-items-baseline o_wesponsor_sponsor_name">
                                 <span class="d-inline-block text-truncate" t-out="sponsor_other.name"/>
-
                             </span>
                             <small class="text-muted" t-out="sponsor_other.subtitle"/>
                             <div class="d-inline-block float-end" t-if="not sponsor_other.website_published">
diff --git a/addons/website_event_exhibitor/views/event_templates_sponsor.xml b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
index 37223ff1616..614911812f1 100644
--- a/addons/website_event_exhibitor/views/event_templates_sponsor.xml
+++ b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
@@ -5,17 +5,17 @@
     <xpath expr="//div[@id='wrap']" position="inside">
         <section class="o_wevent_sponsor_wrapper d-none d-md-block d-print-none mt-auto">
             <div class="container pt32 pb16" t-if="event.sponsor_ids">
-                <div t-attf-class="d-flex flex-wrap mb-5 #{'' if (len(event.sponsor_ids) > 10) else 'justify-content-md-center'}">
+                <div t-attf-class="d-flex flex-wrap mb-5 gap-3 #{'' if (len(event.sponsor_ids) > 10) else 'justify-content-md-center'}">
                     <t t-foreach="event.sponsor_ids.sorted(
                             lambda sponsor: (not sponsor.website_published, sponsor.sudo().sponsor_type_id.sequence, sponsor.sequence)
                         )" t-as="sponsor">
                         <t t-set="popover_content">
                             <div t-field="sponsor.name" class="h5"/>
                             <div t-if="sponsor.url" class="d-flex align-items-baseline">
-                                <i class="fa fa-home me-2"/><a t-att-href="sponsor.url" t-field="sponsor.url" class="text-truncate"/>
+                                <i class="fa fa-globe me-2"/><a t-att-href="sponsor.url" t-field="sponsor.url" class="text-truncate"/>
                             </div>
                         </t>
-                        <a class="o_wevent_sponsor o_wevent_sponsor_card h-100" tabindex="0" role="button"
+                        <a class="o_wevent_sponsor o_wevent_sponsor_card h-100 rounded text-decoration-none" tabindex="0" role="button"
                             t-att-data-publish="'on' if sponsor.website_published else 'off'"
                             t-att-data-bs-content="popover_content"
                             data-bs-html="true" data-bs-trigger="focus" data-bs-toggle="popover" data-bs-placement="bottom">
@@ -30,12 +30,12 @@
 
 <!-- Common template for sponsor images and 'Unpublished' badge -->
 <template id="event_sponsor_thumb_details">
-    <div class="h-100 shadow-sm p-2">
+    <div class="p-2">
         <span t-field="sponsor.image_128"
             t-options='{"widget": "image", "class": "img img-fluid", "filename-field": "partner_name"}'/>
-        <span t-if="sponsor.sudo().sponsor_type_id.display_ribbon_style and sponsor.sudo().sponsor_type_id.display_ribbon_style != 'no_ribbon'"
-            t-field="sponsor.sudo().sponsor_type_id" t-attf-class="o_ribbon o_ribbon_right ribbon_#{sponsor.sudo().sponsor_type_id.display_ribbon_style}"/>
     </div>
+    <span t-if="sponsor.sudo().sponsor_type_id.display_ribbon_style and sponsor.sudo().sponsor_type_id.display_ribbon_style != 'no_ribbon'"
+            t-field="sponsor.sudo().sponsor_type_id" t-attf-class="o_ribbon d-block w-100 ribbon_#{sponsor.sudo().sponsor_type_id.display_ribbon_style}"/>
     <span t-if="not sponsor.website_published"
         class="d-flex justify-content-center badge text-bg-danger o_wevent_online_badge_unpublished">Unpublished</span>
 </template>
diff --git a/addons/website_event_exhibitor/views/snippets.xml b/addons/website_event_exhibitor/views/snippets.xml
index 0ce217b3df4..213cb0562d5 100644
--- a/addons/website_event_exhibitor/views/snippets.xml
+++ b/addons/website_event_exhibitor/views/snippets.xml
@@ -3,7 +3,7 @@
 
 <template id="snippet_options" inherit_id="website.snippet_options" name="Event exhibitor snippet options">
     <xpath expr="." position="inside">
-        <div data-selector="main:has(nav .o_wevent_event_tags_form)" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="Event Page">
+        <div data-selector="main:has(.o_wevent_event_tags_form)" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="Event Page">
             <we-row string="Top Bar Filter" class="o_we_full_row">
                 <we-button string="Sponsorship"
                            data-customize-website-views="website_event_exhibitor.exhibitors_topbar_sponsorship"
diff --git a/addons/website_event_meet/static/src/scss/event_meet_templates.scss b/addons/website_event_meet/static/src/scss/event_meet_templates.scss
index ce7a4e8f434..dffd340dc0d 100644
--- a/addons/website_event_meet/static/src/scss/event_meet_templates.scss
+++ b/addons/website_event_meet/static/src/scss/event_meet_templates.scss
@@ -15,10 +15,6 @@
             height: 85vh;
         }
     }
-
-    .o_wevent_meeting_room_card {
-        background-color: $o-wevent-bg-color-base;
-    }
 }
 
 /*
diff --git a/addons/website_event_meet/views/event_meet_templates_list.xml b/addons/website_event_meet/views/event_meet_templates_list.xml
index 7f624873af7..22408836b48 100644
--- a/addons/website_event_meet/views/event_meet_templates_list.xml
+++ b/addons/website_event_meet/views/event_meet_templates_list.xml
@@ -3,12 +3,13 @@
 
 <template id="event_meet" name="Meeting Rooms">
     <t t-call="website_event.layout">
-        <div class="o_wevent_online o_wemeet_index">
+        <t t-set="hide_submenu" t-value="True"/>
+        <div class="o_wevent_online o_wemeet_index h-100">
             <!-- Drag/Drop Area -->
             <div id="oe_structure_website_event_location_1" class="oe_structure"/>
             <!-- Content -->
-            <div class="o_wemeet_container container">
-                <div class="row mb-5 mx-0">
+            <div class="o_wemeet_container container h-100">
+                <div class="row h-100 mb-5 mx-0">
                     <t t-call="website_event_meet.community_main"/>
                     <t t-call="website_event_meet.community_aside"/>
                 </div>
@@ -25,22 +26,23 @@
 
 <!-- Meeting Rooms Main Display -->
 <template id="community_main" name="Meeting Rooms: Main Display">
-    <div class="col-12 col-md-8 ps-0 pe-0 pe-md-3 mt-3">
-        <h2 class="d-flex flex-row justify-content-between">
-            <span>Join a room</span>
+    <div class="col-12 col-lg-8 col-xl-9 ps-0">
+        <t t-call="website_event.navbar"/>
+        <div class="d-flex flex-row align-items-center justify-content-between mb-2">
+            <h3 class="mb-0">Join a room</h3>
             <div class="dropdown">
-                <a class="dropdown-toggle o-no-caret btn btn-outline-secondary py-0 px-1" title="Languages Menu"
+                <a class="dropdown-toggle btn btn-light" title="Languages Menu"
                     aria-label="Dropdown menu" data-bs-display="static" data-bs-toggle="dropdown" href="#" role="button">
-                    <span t-out="current_lang.name if current_lang else 'All Languages'"/> ▼</a>
+                    <span t-out="current_lang.name if current_lang else 'All Languages'"/></a>
                 <div class="dropdown-menu" role="menu">
                     <a class="dropdown-item" role="menuitem" t-attf-href="/event/#{slug(event)}/community">All Languages
                        </a>
                     <a class="dropdown-item" role="menuitem" t-as="language" t-attf-href="/event/#{slug(event)}/community?lang=#{language.id}" t-out="language.name" t-foreach="available_languages"/>
                 </div>
             </div>
-        </h2>
-        <hr class="mt-2 mb-3"/>
-        <p class="mt-">Choose a topic that interests you and start talking with the community. <br/> Don't forget to setup your camera and microphone.</p>
+        </div>
+        <p class="lead">Choose a topic that interests you and start talking with the community. <br/> Don't forget to setup your camera and microphone.</p>
+        <br/>
         <div class="d-flex flex-column justify-content-start align-items-start">
             <t t-as="meeting_room" t-call="website_event_meet.meeting_room_card" t-foreach="meeting_rooms">
                 <t t-set="meeting_room" t-value="meeting_room"/>
@@ -116,30 +118,31 @@
     </t>
 
     <a t-if="is_event_user or not meeting_room.room_is_full"
-        class="card o_wevent_meeting_room_card w-100 my-2 d-block text-decoration-none rounded-0"
+        class="card o_wevent_meeting_room_card w-100 my-2 d-block text-decoration-none rounded-0 text-dark"
         t-att-data-meeting-room-id="meeting_room.id"
         t-att-data-open-room="opened"
         t-att-data-is-event-manager="int(is_event_user)"
         t-att-href="meeting_room_href"
         t-att-data-bs-toggle="meeting_room_data_toggle"
         t-att-data-bs-target="meeting_room_data_target">
-        <div class="text-decoration-none w-100 h-100 p-3" t-att-data-publish="meeting_room.website_published and 'on' or 'off'">
+        <div class="w-100 h-100 p-3 border-start border-5 text-decoration-none" t-att-data-publish="meeting_room.website_published and 'on' or 'off'">
             <div class="o_wevent_meeting_room_corner_ribbon" t-if="meeting_room.room_is_full">Full</div>
             <div class="d-flex flex-column">
                 <div class="d-flex flex-row">
-                    <h4 t-att-class="'text-break text-uppercase %s' % ('w-75' if meeting_room.website_published else 'w-50')" t-out="meeting_room.name"/>
+                    <h4 t-att-class="'text-break %s' % ('w-75' if meeting_room.website_published else 'w-50')" t-out="meeting_room.name"/>
                     <div t-if="not meeting_room.is_published" class="w-25">
                         <span class="badge text-bg-danger">Unpublished</span>
                     </div>
                 </div>
-                <span class="text-muted" t-field="meeting_room.summary"/>
+                <p class="text-muted" t-field="meeting_room.summary"/>
                 <div class="d-flex flex-row justify-content-between align-items-center">
-                    <span class="h6 m-0">
-                        <span t-out="meeting_room.room_participant_count"/>&amp;nbsp;
-                        <span t-if="meeting_room.target_audience" class="text-uppercase" t-field="meeting_room.target_audience"/>
-                        <span t-else="" class="text-uppercase">participant(s)</span>
-                    </span>
-                    <div class="d-inline border py-1 px-2 text-bg-secondary" t-out="meeting_room.room_lang_id.name"/>
+                    <p class="d-flex justify-content-between align-items-center gap-2 m-0 text-muted small">
+                        <i class="fa fa-user"></i>
+                        <span t-out="meeting_room.room_participant_count"/>
+                        <span t-if="meeting_room.target_audience" t-field="meeting_room.target_audience"/>
+                        <span t-else="">participant(s)</span>
+                    </p>
+                    <div class="badge text-bg-secondary" t-out="meeting_room.room_lang_id.name"/>
                 </div>
             </div>
         </div>
@@ -163,26 +166,26 @@
 <!-- ============================================================ -->
 
 <template id="community_aside" name="Community: Aside">
-    <div class="col-md-4 p-0 mt-3 o_wevent_community_aside">
-        <div class="d-none d-md-block mb-3" t-if="event.meeting_room_allow_creation">
-            <h2>Start a topic</h2>
-            <hr class="mt-2 mb-3"/>
-            <p>Want to create your own discussion room?</p>
-            <a href="#" role="button"
-                class="btn btn-primary o_wevent_create_room_button"
-                t-if="event.is_ongoing or event.start_today or is_event_user"
-                t-att-data-event-id="event.id"
-                t-att-data-default-lang-code="default_lang_code">
-                <span>Create a Room</span>
-            </a>
-            <div t-else="" class="d-flex flex-column">
-                <button disabled="disabled" class="btn btn-primary align-self-start">Create a Room</button>
-                Room creation will be available when event starts at 
-                <span>
-                    <span class="fw-bold" t-field="event.with_context(tz=event.date_tz).date_begin"
-                        t-options="{'format': 'medium'}"/>
-                    <span class="small">(<t t-out="event.date_tz"/>)</span>
-                </span>
+    <div class="d-lg-flex justify-content-end col-lg-4 col-xl-3 mb-3 mb-lg-0">
+        <div class="o_wevent_community_aside mt-3">
+            <div class="d-none d-md-block mb-3" t-if="event.meeting_room_allow_creation">
+                <h4 class="o_page_header">Start a topic</h4>
+                <p>Want to create your own discussion room?</p>
+                <a href="#" role="button"
+                    class="btn btn-secondary o_wevent_create_room_button w-100"
+                    t-if="event.is_ongoing or event.start_today or is_event_user"
+                    t-att-data-event-id="event.id"
+                    t-att-data-default-lang-code="default_lang_code">
+                    Create a Room
+                </a>
+                <div t-else="" class="d-flex flex-column">
+                    <button disabled="disabled" class="btn btn-secondary w-100">Create a Room</button>
+                    <p class="small">
+                        Room creation will be available when event starts at <span class="fw-bold" t-field="event.with_context(tz=event.date_tz).date_begin"
+                            t-options="{'format': 'medium'}"/>
+                        <span class="small">(<t t-out="event.date_tz"/>)</span>
+                    </p>
+                </div>
             </div>
         </div>
     </div>
diff --git a/addons/website_event_meet/views/event_meet_templates_page.xml b/addons/website_event_meet/views/event_meet_templates_page.xml
index 3826fc37067..6e40b943559 100644
--- a/addons/website_event_meet/views/event_meet_templates_page.xml
+++ b/addons/website_event_meet/views/event_meet_templates_page.xml
@@ -30,7 +30,7 @@
 <!-- ============================================================ -->
 
 <template id="meeting_room_main" name="Meeting Room: Main Content">
-    <div t-att-class="'col-12 o_wemeet_room_main o_wevent_theme_bg_base border mt-3 p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
+    <div t-att-class="'col-12 o_wemeet_room_main border mt-3 p-0 %s' % ('col-lg-9 col-xl-10' if option_widescreen else 'col-lg-8 col-xl-9')">
         <!-- EVENT NOT STARTED ALERTS -->
         <t t-if="not meeting_room.event_id.is_ongoing">
             <div t-if="meeting_room.event_id.is_done" class="alert alert-warning text-center">
@@ -86,13 +86,13 @@
         </div>
         <!-- ROOM DESCRIPTION -->
         <div class="mx-3">
-            <div class="h5 my-3" t-out="meeting_room.name"/>
+            <h5 class="mt-3" t-out="meeting_room.name"/>
             <div t-if="meeting_room.room_participant_count > 0" class="text-muted mb-3">
-                A chat among <t t-out="meeting_room.room_participant_count"/> <span class="fw-bold" t-out="meeting_room.target_audience"/>
+                A chat among <t t-out="meeting_room.room_participant_count"/> <span t-out="meeting_room.target_audience"/>
             </div>
         </div>
         <hr class="my-0"/>
-        <div t-field="meeting_room.summary" class="my-2 mx-3 oe_no_empty"/>
+        <div t-field="meeting_room.summary" class="my-4 mx-3 oe_no_empty"/>
      </div>
 </template>
 
@@ -101,27 +101,28 @@
 <!-- ============================================================ -->
 
 <template id="meeting_room_aside" name="Meeting Room: Aside">
-    <div t-att-class="'col-12 mt-3 ps-0 pe-0 border o_wevent_online_page_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
+    <div t-att-class="'o_wevent_online_page_aside col-12 mt-3 ps-0 pe-0 border %s' % ('col-lg-3 col-xl-2' if option_widescreen else 'col-lg-4 col-xl-3')">
         <div class="o_wevent_online_page_aside_content">
             <div class="d-flex align-items-center justify-content-between me-2">
-                <span class="h5 m-3">Other Rooms</span>
+                <h5 class="m-3">Other Rooms</h5>
                 <a href="#collapse_meet_room_aside" data-bs-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
                     <i class="oi oi-chevron-down d-lg-none"/>
                 </a>
             </div>
-            <ul id="collapse_meet_room_aside" class="list-unstyled collapse d-lg-block mb-0">
-                <li t-foreach="meeting_rooms_other" t-as="meeting_room_other">
-                    <a class="d-block w-100 h-100 px-2 pt-2 pb-1 text-decoration-none"
+            <ul id="collapse_meet_room_aside" class="list-group list-group-flush collapse d-lg-block border-top">
+                <li class="list-group-item list-group-item-action" t-foreach="meeting_rooms_other" t-as="meeting_room_other">
+                    <a class="text-decoration-none text-dark"
                         t-att-href="'/event/%s/meeting_room/%s' % (slug(event), slug(meeting_room_other))">
                         <div class="flex-grow-1 mw-100">
-                            <div class="text-truncate" t-out="meeting_room_other.name"/>
+                            <div class="text-truncate fw-bold" t-out="meeting_room_other.name"/>
                             <span class="text-muted" t-out="meeting_room_other.summary"></span>
-                            <div class="d-flex justify-content-between align-items-center">
-                                <div class="text-muted">
-                                    <b>&amp;#9900;&amp;nbsp;</b>
-                                    <small><t t-out="meeting_room_other.room_participant_count"/> <t t-out="meeting_room_other.target_audience"/></small>
-                                </div>
-                                <small t-if="meeting_room_other.room_lang_id" class="text-muted"><i class="fa fa-globe"/> <t t-out="meeting_room_other.room_lang_id.name"/></small>
+                            <div class="d-flex flex-column flex-xl-row flex-wrap justify-content-between align-items-start align-items-xl-center">
+                                <p class="d-flex justify-content-between align-items-center gap-2 m-0 text-muted small">
+                                    <i class="fa fa-user"></i>
+                                    <t t-out="meeting_room_other.room_participant_count"/>
+                                    <t t-out="meeting_room_other.target_audience"/>
+                                </p>
+                                <small t-if="meeting_room_other.room_lang_id" class="badge text-bg-secondary"> <t t-out="meeting_room_other.room_lang_id.name"/></small>
                             </div>
                         </div>
                     </a>
diff --git a/addons/website_event_meet_quiz/views/event_meet_templates.xml b/addons/website_event_meet_quiz/views/event_meet_templates.xml
index f6853514b32..beb953600a6 100644
--- a/addons/website_event_meet_quiz/views/event_meet_templates.xml
+++ b/addons/website_event_meet_quiz/views/event_meet_templates.xml
@@ -8,8 +8,8 @@
 </template>
 
 <template id="community_leaderboard_small" name="Small Leaderboard">
-    <div class="w-100 d-flex justify-content-between align-items-end o_page_header">
-        <h2>Leaderboard</h2>
+    <div class="o_page_header d-flex flex-wrap justify-content-between align-items-end w-100">
+        <h4 class="mb-0">Leaderboard</h4>
         <a t-attf-href="#{'/event/%s/community/leaderboard' % (slug(event))}">View all</a>
     </div>
     <t t-call="website_event_meet_quiz.visitor_quiz_points_card"/>
@@ -18,19 +18,21 @@
 <template id='visitor_quiz_points_card' name="Small Leaderboard: top3">
     <table class="w-100">
         <tr t-foreach="top3_visitors" t-as="visitor">
-            <td><div class="d-flex align-items-center mb-3">
-                <b class="me-2 text-muted" t-out="visitor['position']"/>
-                <img class="rounded-circle float-start"
-                    style="width: 32px; height: 32px; object-fit: cover;"
-                    t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/img/user_placeholder.jpg'"
-                    t-att-alt="visitor['visitor'].display_name"/>
-                <div class="o_we_leaderboard_name">
-                    <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].partner_id" class="fw-bold">You</span>
-                    <span t-else="" class="fw-bold" t-out="visitor['visitor'].display_name"/>
+            <td>
+                <div class="d-flex align-items-center mb-2">
+                    <b class="me-2 text-muted" t-out="visitor['position']"/>
+                    <img class="rounded-circle float-start"
+                        style="width: 25px; height: 25px; object-fit: cover;"
+                        t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/img/user_placeholder.jpg'"
+                        t-att-alt="visitor['visitor'].display_name"/>
+                    <div class="o_we_leaderboard_name">
+                        <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].partner_id">You</span>
+                        <span t-else="" t-out="visitor['visitor'].display_name"/>
+                    </div>
                 </div>
-            </div></td>
+            </td>
             <td class="text-end">
-                <div class="mb-3">
+                <div class="mb-2">
                     <span class="text-nowrap"><t t-out="visitor['points']"/> xp</span>
                 </div>
             </td>
diff --git a/addons/website_event_sale/static/tests/tours/helpers/WebsiteEventSaleTourMethods.js b/addons/website_event_sale/static/tests/tours/helpers/WebsiteEventSaleTourMethods.js
index bf69adc95da..ac95575dd6d 100644
--- a/addons/website_event_sale/static/tests/tours/helpers/WebsiteEventSaleTourMethods.js
+++ b/addons/website_event_sale/static/tests/tours/helpers/WebsiteEventSaleTourMethods.js
@@ -34,11 +34,19 @@ function checkPriceEvent(eventName, price) {
             content: "Open the Pycon event",
             trigger: `.o_wevent_events_list a:contains(${eventName})`,
         },
+        {
+            content: "Open the ticket picking modal",
+            trigger: `button:contains("Register")`,
+        },
         {
             content: "Verify Price",
             trigger: `.oe_currency_value:contains(${price})`,
             run: function () {}, // it's a check
         },
+        {
+            content: "Open the ticket picking modal",
+            trigger: `.modal-content button:contains("Close")`,
+        },
     ]
 }
 function checkPriceDiscountEvent(eventName, price, discount) {
diff --git a/addons/website_event_sale/static/tests/tours/website_event_sale.js b/addons/website_event_sale/static/tests/tours/website_event_sale.js
index 30e34483ade..349ffc4b9ca 100644
--- a/addons/website_event_sale/static/tests/tours/website_event_sale.js
+++ b/addons/website_event_sale/static/tests/tours/website_event_sale.js
@@ -10,6 +10,10 @@ registry.category("web_tour.tours").add('event_buy_tickets', {
         {
             content: "Go to the `Events` page",
             trigger: 'a[href*="/event"]:contains("Conference for Architects TEST"):first',
+        }, 
+        {
+            content: "Open the register modal",
+            trigger: 'button:contains("Register")',
         },
         {
             content: "Select 1 unit of `Standard` ticket type",
diff --git a/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js b/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js
index ae9462021da..1fbad34f22c 100644
--- a/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js
+++ b/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js
@@ -11,9 +11,13 @@ registry.category("web_tour.tours").add('event_buy_last_ticket', {
         trigger: '.o_wevent_events_list a:contains("Last ticket test")',
     },
     {
-        content: "Show available Tickets",
+        content: "Open Registration Page",
         trigger: '.btn-primary:contains("Register")',
     },
+    {
+        content: "Open the register modal",
+        trigger: 'button:contains("Register")',
+    },
     {
         content: "Select 2 units of `VIP` ticket type",
         extra_trigger: '#wrap:not(:has(a[href*="/event"]:contains("Last ticket test")))',
diff --git a/addons/website_event_sale/static/tests/tours/website_event_sale_pricelists.js b/addons/website_event_sale/static/tests/tours/website_event_sale_pricelists.js
index 52301b29948..34e8a9f2dde 100644
--- a/addons/website_event_sale/static/tests/tours/website_event_sale_pricelists.js
+++ b/addons/website_event_sale/static/tests/tours/website_event_sale_pricelists.js
@@ -13,12 +13,17 @@
             trigger: '.o_wevent_events_list a:contains("Pycon")',
         },
         {
-            content: "Register",
-            trigger: '.btn-primary:contains("Register")',
+            content: "Open the register modal",
+            trigger: 'button:contains("Register")',
+        },
+        {
+            content: "Click on Register button inside modal",
+            trigger: 'div.modal-footer button:contains("Register")',
+            run: 'click'
         },
         {
             content: "Fill attendees details",
-            trigger: 'form[id="attendee_registration"] .btn[type=submit]',
+            trigger: 'form[id="attendee_registration"]',
             run: function () {
                 $("input[name*='1-name']").val("Great Name");
                 $("input[name*='1-phone']").val("111 111");
diff --git a/addons/website_event_sale/views/website_event_templates.xml b/addons/website_event_sale/views/website_event_templates.xml
index 9100aa9136f..d72b4c7000e 100644
--- a/addons/website_event_sale/views/website_event_templates.xml
+++ b/addons/website_event_sale/views/website_event_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="registration_template" inherit_id="website_event.registration_template">
+<template id="modal_ticket_registration" inherit_id="website_event.modal_ticket_registration">
     <!-- Change pricelist -->
     <xpath expr="//div[hasclass('o_wevent_price_range')]" position="after">
         <div id="o_wevent_tickets_pricelist" class="collapse show">
@@ -26,34 +26,36 @@
                      t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
             </t>
             <span t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
+                  class="badge text-bg-secondary fs-6"
                   t-field="ticket.price_reduce"
                   t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
             <span t-else=""
                   t-field="ticket.price_reduce_taxinc"
+                  class="badge text-bg-secondary fs-6"
                   t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
             <span itemprop="price" class="d-none" t-out="ticket.price"/>
             <span itemprop="priceCurrency" class="d-none" t-out="website.currency_id.name"/>
         </t>
-        <span t-else="" class="fw-bold text-uppercase">Free</span>
+        <span t-else="" class="badge text-bg-secondary text-uppercase fs-6">Free</span>
     </xpath>
     <xpath expr="//div[hasclass('o_wevent_price_range')]" position="inside">
         <t t-set="all_prices" t-value="event.event_ticket_ids.mapped('price_reduce')"/>
         <t t-set="lowest_price" t-value="min(all_prices)"/>
         <t t-set="highest_price" t-value="max(all_prices)"/>
         <t t-if="highest_price > 0">
-            <span class="text-dark">
+            <small class="text-muted">
                 From
                 <span t-out="lowest_price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
                 <t t-if="lowest_price != highest_price">
                     to
                     <span t-out="highest_price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
                 </t>
-            </span>
+            </small>
         </t>
     </xpath>
     <!-- Add price information on tickets (mono ticket, aka not in collapse) -->
-    <xpath expr="//div[hasclass('o_wevent_registration_single')]//h6" position="after">
-        <div class="px-2 text-dark d-flex align-items-center align-self-stretch">
+    <xpath expr="//div[hasclass('o_wevent_registration_single_select')]" position="before">
+        <div class="flex-md-grow-1 me-2 text-end">
             <t t-if="tickets.price">
                 <t t-if="(tickets.price - tickets.price_reduce) &gt;0 and website.pricelist_id.discount_policy == 'without_discount'">
                     <del t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
@@ -66,15 +68,17 @@
                          t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
                 </t>
                 <span t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
+                      class="badge text-bg-secondary fs-6"
                       t-field="tickets.price_reduce"
                       t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
                 <span t-else=""
+                      class="badge text-bg-secondary fs-6"
                       t-field="tickets.price_reduce_taxinc"
                       t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.currency_id}"/>
                 <span itemprop="price" class="d-none" t-out="tickets.price"/>
                 <span itemprop="priceCurrency" class="d-none" t-out="website.currency_id.name"/>
             </t>
-            <span t-else="" class="fw-bold text-uppercase">Free</span>
+            <span t-else="" class="badge text-bg-secondary fs-6 text-uppercase">Free</span>
         </div>
     </xpath>
 </template>
@@ -98,10 +102,4 @@
     </xpath>
 </template>
 
-<template id="fold_register_details" inherit_id="website_event.fold_register_details" name="Fold ticket details">
-    <xpath expr="//div[@id='o_wevent_tickets_pricelist']" position="attributes">
-        <attribute name="class">collapse</attribute>
-    </xpath>
-</template>
-
 </odoo>
diff --git a/addons/website_event_sale/views/website_sale_templates.xml b/addons/website_event_sale/views/website_sale_templates.xml
index ef120adc0a8..a3758515b3b 100644
--- a/addons/website_event_sale/views/website_sale_templates.xml
+++ b/addons/website_event_sale/views/website_sale_templates.xml
@@ -2,7 +2,7 @@
 <odoo>
 
     <template id="index_topbar" inherit_id="website_event.index_topbar">
-        <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
+        <xpath expr="//div[hasclass('o_wevent_index_topbar_filters')]" position="inside">
             <t t-set="website_sale_pricelists" t-value="website.get_pricelist_available(show_visible=True)" />
             <t t-set="hasPricelistDropdown" t-value="website_sale_pricelists and len(website_sale_pricelists)&gt;1"/>
             <t t-call="website_sale.pricelist_list">
diff --git a/addons/website_event_track/static/src/js/event_track_reminder.js b/addons/website_event_track/static/src/js/event_track_reminder.js
index e1ed813997f..dc5dced0459 100644
--- a/addons/website_event_track/static/src/js/event_track_reminder.js
+++ b/addons/website_event_track/static/src/js/event_track_reminder.js
@@ -75,23 +75,12 @@ publicWidget.registry.websiteEventTrackReminder = publicWidget.Widget.extend({
 
     _updateDisplay: function () {
         var $trackLink = this.$el.find('i');
-        var isReminderLight = $trackLink.data('isReminderLight');
         if (this.reminderOn) {
             $trackLink.addClass('fa-bell').removeClass('fa-bell-o');
             $trackLink.attr('title', _t('Favorite On'));
-
-            if (!isReminderLight) {
-                this.$el.addClass('btn-primary');
-                this.$el.removeClass('btn-outline-primary');
-            }
         } else {
             $trackLink.addClass('fa-bell-o').removeClass('fa-bell');
             $trackLink.attr('title', _t('Set Favorite'));
-
-            if (!isReminderLight) {
-                this.$el.removeClass('btn-primary');
-                this.$el.addClass('btn-outline-primary');
-            }
         }
     },
 
diff --git a/addons/website_event_track/static/src/scss/event_track_templates.scss b/addons/website_event_track/static/src/scss/event_track_templates.scss
index 189dce827bb..2e5d62b319a 100644
--- a/addons/website_event_track/static/src/scss/event_track_templates.scss
+++ b/addons/website_event_track/static/src/scss/event_track_templates.scss
@@ -7,19 +7,10 @@
         padding: 0;
     }
 
-    // Ensure width for size coherency
-    &:not(.btn-link) {
-        min-width: 100px;
-    }
-
     i {
-        &.fa-bell {
-            color: gold;
-            -webkit-text-stroke-width: 0.5px;
-            -webkit-text-stroke-color: black;
-        }
-        &.fa-bell-o {
-            color: black;
+        &.fa-bell,&.fa-bell-o {
+            color: $o-gray-600;
+            -webkit-text-stroke-color: $o-gray-600;
         }
     }
 }
@@ -134,7 +125,6 @@
                     width: 100%;
                     position: absolute;
                     top: 0;
-                    border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
                 }
                 &::after {
                     content: "";
diff --git a/addons/website_event_track/static/src/scss/event_track_templates_online.scss b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
index 8b8d52a922b..d8ee95f607c 100644
--- a/addons/website_event_track/static/src/scss/event_track_templates_online.scss
+++ b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
@@ -17,13 +17,15 @@
     .o_wesession_track_card {
         background-color: $o-wevent-bg-color-base;
         color: $o-wevent-color;
+
         .card-body {
             padding: 1rem;
-            background-color: $o-wevent-bg-color-base !important;
+            background-color: $o-wevent-bg-color-base  !important;
         }
 
         .card-footer {
             padding: 0.75rem 1rem;
+
             div {
                 color: $o-wevent-color;
             }
@@ -36,6 +38,7 @@
             padding: $card-spacer-y $card-spacer-x;
             text-align: right;
         }
+
         &.o_wesession_track_card_unpublished {
             opacity: 0.8;
         }
@@ -46,15 +49,20 @@
      */
 
     .o_wevent_online_page_container {
+
         // Main panel: current track
         .o_wesession_track_main {
+
             // Force side panel min-width to account for potential Youtube chat
             // And adapt main panel max-width accordingly.
-            @include media-breakpoint-up(md) {
-                max-width: calc(100% - 22rem);
+            &.o_youtube_chat {
+                @include media-breakpoint-up(md) {
+                    max-width: calc(100% - 22rem);
+                }
             }
 
             @media screen and (min-width: 1900px) {
+
                 // return to bootstrap value for col-lg-9 / 10 breakpoint if screen is big enough
                 &.col-lg-9 {
                     max-width: 75%;
@@ -68,9 +76,12 @@
 
         // Left panel: other tracks
         .o_wesession_track_aside {
+
             // Force side panel min-width to account for potential Youtube chat
-            @include media-breakpoint-up(md) {
-                min-width: 22rem;
+            &.o_youtube_chat {
+                @include media-breakpoint-up(md) {
+                    min-width: 22rem;
+                }
             }
 
             @media screen and (min-width: 1900px) {
diff --git a/addons/website_event_track/views/event_track_templates_agenda.xml b/addons/website_event_track/views/event_track_templates_agenda.xml
index 31e49323a75..9338e1a90c0 100644
--- a/addons/website_event_track/views/event_track_templates_agenda.xml
+++ b/addons/website_event_track/views/event_track_templates_agenda.xml
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <div t-else="" class="o_wevent_online o_weagenda_index">
+        <div t-else="" class="o_wevent_online o_weagenda_index container">
             <!-- Options -->
             <t t-set="option_track_wishlist" t-value="not event.is_done and is_view_active('website_event_track.agenda_topbar_wishlist')"/>
             <!-- Topbar -->
@@ -29,10 +29,8 @@
             <!-- Drag/Drop Area -->
             <div class="oe_structure" id="oe_structure_website_event_track_agenda_1"/>
             <!-- Content -->
-            <div class="container-fluid">
-                <div class="row mb-5">
-                    <t t-call="website_event_track.agenda_main"/>
-                </div>
+            <div class="row mb-3">
+                <t t-call="website_event_track.agenda_main"/>
             </div>
             <!-- Drag/Drop Area -->
             <div class="oe_structure" id="oe_structure_website_event_track_agenda_2"/>
@@ -46,18 +44,18 @@
 
 <!-- Main topbar -->
 <template id="agenda_topbar" name="Agenda Tools">
-    <nav class="navbar navbar-light border-top shadow-sm d-print-none">
-        <div class="container-fluid">
-            <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
-                <ul class="o_weagenda_topbar_filters o_wevent_index_topbar_filters nav">
-                </ul>
-                <div class="d-flex ps-sm-3 pe-0">
-                    <label class="invisible text-muted me-2" id="search_summary"><span id="search_number" class="me-1">0</span>Results</label>
-                    <input type="text" class="form-control" placeholder="Filter Tracks..." id="event_track_search"/>
+    <div class="o_weagenda_topbar_filters o_wevent_index_topbar_filters d-print-none d-flex flex-wrap align-items-center justify-content-end gap-2 w-100 mb-3">
+        <h3 class="my-0 me-auto pe-sm-4">Agenda</h3>
+        <label class="invisible text-muted me-2" id="search_summary"><span id="search_number" class="me-1">0</span>Results</label>
+        <div class="o_wevent_search d-flex w-100 w-lg-auto">
+            <div class="input-group">
+                <input type="text" class="form-control search-query oe_search_box border-0 bg-light" placeholder="Search Tracks" id="event_track_search"/>
+                <div class="btn oe_search_button btn-light">
+                    <i class="oi oi-search"/>
                 </div>
             </div>
         </div>
-    </nav>
+    </div>
 </template>
 
 <!-- Option: Tracks display: optional favorites -->
@@ -65,7 +63,7 @@
     inherit_id="website_event_track.agenda_topbar"
     name="Allow Wishlists"
     active="True">
-    <xpath expr="//ul[hasclass('o_weagenda_topbar_filters')]" position="inside">
+    <xpath expr="//div[hasclass('o_weagenda_topbar_filters')]" position="inside">
     </xpath>
 </template>
 
@@ -77,18 +75,12 @@
 <template id="agenda_main" name="Tracks: Main Display">
     <section t-foreach="days" t-as="day" class="col-12">
         <!-- DAY HEADER -->
-        <div class="o_we_track_day_header mt-3 w-100 d-flex justify-content-between align-items-center">
-            <div class="d-flex">
-                <span class="h2 m-0 fw-bold" t-out="day"
-                    t-options="{'widget': 'date', 'format': 'EEEE dd'}"/>
-                <div class="d-flex flex-column ms-2">
-                    <span class="fw-bold" t-out="day"
-                        t-options="{'widget': 'date', 'format': 'MMMM'}"/>
-                    <span class="fw-bold" t-out="day"
-                        t-options="{'widget': 'date', 'format': 'YYYY'}"/>
-                </div>
-                <div class="flex-column align-self-center ms-2">
-                    <span class="small fw-light">(<t t-out="event.date_tz"/>)</span>
+        <div class="o_we_track_day_header d-flex justify-content-between align-items-center w-100">
+            <div class="d-flex flex-column flex-grow-1">
+                <span class="m-0 fw-bold" t-out="day" t-options="{'widget': 'date', 'format': 'EEEE '}"/>
+                <div class="d-flex align-items-center justify-content-start">
+                    <span class="h3 mb-0 fw-bold" t-out="day" t-options="{'widget': 'date', 'format': 'dd MMMM YYYY'}"/>
+                    <span class="small ms-2 fw-light">(<t t-out="event.date_tz"/>)</span>
                 </div>
             </div>
             <small class="float-end text-muted align-self-end"><t t-out="tracks_by_days[day]"/> tracks</small>
@@ -173,7 +165,7 @@
                    class="ms-1 mt-1 mt-md-0 badge text-bg-danger o_wevent_online_badge_unpublished">Unpublished</small>
             <span t-if="option_track_wishlist">
                 <t t-call="website_event_track.track_widget_reminder">
-                    <t t-set="reminder_light" t-value="True"/>
+                    <t t-set="reminder_light" t-value="False"/>
                     <t t-set="reminder_small" t-value="True"/>
                     <t t-set="light_theme" t-value="False"/>
                 </t>
diff --git a/addons/website_event_track/views/event_track_templates_list.xml b/addons/website_event_track/views/event_track_templates_list.xml
index 32cf5cd0d1f..a875cc03a7f 100644
--- a/addons/website_event_track/views/event_track_templates_list.xml
+++ b/addons/website_event_track/views/event_track_templates_list.xml
@@ -3,7 +3,7 @@
 
 <template id="tracks_session" name="Event Tracks">
     <t t-call="website_event.layout">
-        <div class="o_wevent_online o_wesession_index">
+        <div class="o_wevent_online o_wesession_index container">
             <!-- Options -->
             <t t-set="option_track_wishlist" t-value="not event.is_done and is_view_active('website_event_track.session_topbar_wishlist')"/>
             <!-- Topbar -->
@@ -11,13 +11,9 @@
             <!-- Drag/Drop Area -->
             <div id="oe_structure_wesession_index_1" class="oe_structure"/>
             <!-- Content -->
-            <div class="o_wesession_container container">
-                <div class="row">
-                    <t t-call="website_event_track.tracks_search"/>
-                </div>
-                <div class="row">
-                    <t t-call="website_event_track.tracks_main"/>
-                </div>
+            <div class="o_wesession_container">
+                <t t-call="website_event_track.tracks_search"/>
+                <t t-call="website_event_track.tracks_main"/>
             </div>
             <!-- Drag/Drop Area -->
             <div id="oe_structure_wesession_index_2" class="oe_structure mb-5"/>
@@ -31,43 +27,122 @@
 
 <!-- Main topbar -->
 <template id="session_topbar" name="Tracks Tools">
-    <nav class="navbar navbar-light border-top shadow-sm d-print-none">
-        <div class="container">
-            <div class="d-flex flex-column flex-sm-row justify-content-between w-100">
-                <ul class="o_wesession_topbar_filters o_wevent_index_topbar_filters nav">
-                    <!-- Optional wishlist filter -->
-                    <li t-if="option_track_wishlist" class="nav-item dropdown me-2 my-1">
-                        <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-                            <i class="fa fa-folder-open"/> Favorites
-                        </a>
-                        <div class="dropdown-menu">
-                            <a t-att-href="'/event/%s/track?%s' % (
-                                    slug(event),
-                                    keep_query('*', search_wishlist='')
-                                )"
-                                class="dropdown-item d-flex align-items-center justify-content-between">
-                                All Talks
-                            </a>
-                            <a t-att-href="'/event/%s/track?%s' % (
-                                    slug(event),
-                                    keep_query('*', search_wishlist='1')
-                                )"
-                                t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{'active' if search_wishlist else ''}">
+    <div>
+        <div class="o_wesession_topbar_filters o_wevent_index_topbar_filters d-print-none d-flex flex-wrap align-items-center justify-content-end gap-2 w-100 mb-3">
+            <h3 class="my-0 me-auto pe-sm-4">Talks</h3>
+            <!-- Optional wishlist filter -->
+            <div t-if="option_track_wishlist" class="dropdown d-none d-lg-block">
+                <a href="#" role="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
+                    Favorites
+                </a>
+                <div class="dropdown-menu">
+                    <a t-att-href="'/event/%s/track?%s' % (
+                            slug(event),
+                            keep_query('*', search_wishlist='')
+                        )"
+                        class="dropdown-item d-flex align-items-center justify-content-between">
+                        All Talks
+                    </a>
+                    <a t-att-href="'/event/%s/track?%s' % (
+                            slug(event),
+                            keep_query('*', search_wishlist='1')
+                        )"
+                        t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{'active' if search_wishlist else ''}">
+                        Favorites
+                    </a>
+                </div>
+            </div>
+            <div class="o_wevent_search d-flex w-100 w-lg-auto">
+                <t t-call="website_event.events_search_box">
+                    <t t-set="_searches" t-value="searches"/>
+                    <t t-set="action" t-value="'/event/%s/track' % (slug(event))"/>
+                    <t t-set="_placeholder" t-value="'Search a talk ...'"/>
+                </t>
+                <button class="btn btn-light position-relative ms-2 d-lg-none"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#o_wevent_talk_offcanvas">
+                    <i class="fa fa-sliders"/>
+                </button>
+            </div>
+        </div>
+        <!-- Off canvas filters on mobile-->
+        <div id="o_wevent_talk_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_wevent_offcanvas_fav"
+                                aria-expanded="false"
+                                aria-controls="o_wevent_offcanvas_fav">
                                 Favorites
-                            </a>
+                            </button>
+                        </h2>
+                        <div class="o_wevent_offcanvas_fav accordion-collapse collapse">
+                            <div class="accordion-body pt-0">
+                                <ul class="list-group list-group-flush">
+                                    <!-- Optional wishlist filter -->
+                                    <li t-if="option_track_wishlist" class="list-group-item">                         
+                                        <a t-att-href="'/event/%s/track?%s' % (
+                                                slug(event),
+                                                keep_query('*', search_wishlist='')
+                                            )"
+                                            class="d-flex align-items-center justify-content-between">
+                                            All Talks
+                                        </a>
+                                        <a t-att-href="'/event/%s/track?%s' % (
+                                                slug(event),
+                                                keep_query('*', search_wishlist='1')
+                                            )"
+                                            t-attf-class="d-flex align-items-center justify-content-between #{'active' if search_wishlist else ''}">
+                                            Favorites
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
-                    </li>
-                </ul>
-                <div class="d-flex align-items-center flex-wrap ps-sm-3 pe-0">
-                    <t t-call="website_event.events_search_box">
-                        <t t-set="_searches" t-value="searches"/>
-                        <t t-set="action" t-value="'/event/%s/track' % (slug(event))"/>
-                        <t t-set="_placeholder" t-value="'Search a talk ...'"/>
+                    </div>
+                    <t t-foreach="tag_categories" t-as="tag_category">
+                    <div class="accordion-item">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button border-top collapsed"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                t-att-data-bs-target="'.o_wevent_offcanvas_tag_%s' % tag_category.name"
+                                aria-expanded="false">
+                                <t t-out="tag_category.name"/>
+                            </button>
+                        </h2>
+                        <div t-attf-class="o_wevent_offcanvas_tag_#{tag_category.name} accordion-collapse collapse">
+                            <div class="accordion-body pt-0">
+                                <ul class="list-group list-group-flush">
+                                        <li t-if="tag_category.tag_ids and any(tag.color for tag in tag_category.tag_ids)" class="list-group-item">
+                                            <t t-foreach="tag_category.tag_ids" t-as="tag">
+                                                <a t-att-href="'/event/%s/track?%s' % (
+                                                        slug(event),
+                                                        keep_query('*', tags=str((search_tags - tag).ids if tag in search_tags else (tag | search_tags).ids))
+                                                    )"
+                                                    t-if="tag.color"
+                                                    t-attf-class="d-flex align-items-center justify-content-between #{'active' if tag in search_tags else ''}">
+                                                    <t t-out="tag.name"/>
+                                                </a>
+                                            </t>
+                                        </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
                     </t>
                 </div>
             </div>
         </div>
-    </nav>
+    </div>
 </template>
 
 <!-- Option: Topbar: optional tags filters -->
@@ -75,11 +150,10 @@
     inherit_id="website_event_track.session_topbar"
     name="Filter by Tags"
     active="True">
-    <xpath expr="//ul[hasclass('o_wesession_topbar_filters')]" position="inside">
+    <xpath expr="//div[hasclass('o_wevent_search')]" position="before">
         <t t-foreach="tag_categories" t-as="tag_category">
-            <li t-if="tag_category.tag_ids and any(tag.color for tag in tag_category.tag_ids)" class="nav-item dropdown me-2 my-1">
-                <a href="#" role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-                    <i class="fa fa-folder-open"/>
+            <div t-if="tag_category.tag_ids and any(tag.color for tag in tag_category.tag_ids)" class="dropdown d-none d-lg-block me-2 my-1">
+                <a href="#" role="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                     <t t-out="tag_category.name"/>
                 </a>
                 <div class="dropdown-menu">
@@ -94,7 +168,7 @@
                         </a>
                     </t>
                 </div>
-            </li>
+            </div>
         </t>
     </xpath>
 </template>
@@ -104,7 +178,7 @@
     inherit_id="website_event_track.session_topbar"
     name="Allow Wishlists"
     active="True">
-    <xpath expr="//ul[hasclass('o_wesession_topbar_filters')]" position="inside">
+    <xpath expr="//div[hasclass('o_wesession_topbar_filters')]" position="inside">
     </xpath>
 </template>
 
@@ -117,7 +191,7 @@
     <!-- No tracks -->
     <div t-if="not tracks" class="col-12 text-center">
         <div t-call="website_event.event_empty_events_svg" class="my-4"/>
-        <h2>No track found.</h2>
+        <h4>No track found.</h4>
         <p t-if="search_key">We could not find any track matching your search for: <strong t-out="search_key"/>.</p>
         <p t-else="">We could not find any track at this moment.</p>
         <div class="o_not_editable my-3" groups="event.group_event_user">
@@ -136,8 +210,7 @@
 <template id="tracks_display_cards" name="Tracks: Cards Display">
     <div class="row mb-3" t-if="tracks_live">
         <div class="col-12">
-            <h5 class="m-0 text-danger">Live Now</h5>
-            <hr class="mt-2 mb-2"/>
+            <h4>Live Now</h4>
         </div>
         <t t-call="website_event_track.track_cards_section">
             <t t-set="tracks" t-value="tracks_live"/>
@@ -145,8 +218,7 @@
     </div>
     <div class="row mb-3" t-if="tracks_soon">
         <div class="col-12">
-            <h5 class="m-0 text-danger">Coming soon ...</h5>
-            <hr class="mt-2 mb-2"/>
+            <h4>Coming soon ...</h4>
         </div>
         <t t-call="website_event_track.track_cards_section">
             <t t-set="tracks" t-value="tracks_soon"/>
@@ -157,41 +229,36 @@
 <!-- Tracks: List-based display -->
 <template id="tracks_display_list" name="Tracks: List Display">
     <div t-if="tracks">
-        <h1>Book your talks</h1>
-        <h4 class="mb-5">Plan your experience by adding your favorites talks to your wishlist</h4>
+        <h4>Book your talks</h4>
+        <p class="mb-3">Plan your experience by adding your favorites talks to your wishlist</p>
     </div>
     <div t-if="tracks" class="o_wesession_list mb-3">
         <ul class="list-unstyled">
-            <li t-foreach="tracks_by_day" t-as="tracks_info"
-                class="mb-5">
+            <li class="border-bottom" t-foreach="tracks_by_day" t-as="tracks_info">
                 <t t-set="tracks_date" t-value="tracks_info['date']"/>
                 <t t-set="tracks_header_name" t-value="tracks_info['name']"/>
                 <t t-set="tracks" t-value="tracks_info['tracks']"/>
                 <!-- DAY HEADER -->
-                <div class="o_we_track_day_header d-flex">
-                    <div class="d-flex flex-grow-1" t-if="tracks_date">
-                        <span class="h2 m-0 fw-bold" t-out="tracks_date"
-                            t-options="{'widget': 'date', 'format': 'EEEE dd'}"/>
-                        <div class="d-flex ms-3 me-2 flex-column">
-                            <span class="fw-bold" t-out="tracks_date"
-                                t-options="{'widget': 'date', 'format': 'MMMM'}"/>
-                            <span class="fw-bold" t-out="tracks_date"
-                                t-options="{'widget': 'date', 'format': 'YYYY'}"/>
-                        </div>
-                        <div class="flex-column align-self-center ms-2 d-none d-sm-block">
-                            <span class="small fw-light">(<t t-out="event.date_tz"/>)</span>
+                <div t-attf-class="o_we_track_day_header d-flex align-items-center py-3">
+                    <div class="d-flex flex-grow-1 flex-column" t-if="tracks_date">
+                        <span class="m-0 fw-bold" t-out="tracks_date"
+                            t-options="{'widget': 'date', 'format': 'EEEE '}"/>
+                        <div class="d-flex align-items-center justify-content-start">
+                            <span class="h3 mb-0 fw-bold" t-out="tracks_date"
+                                t-options="{'widget': 'date', 'format': 'dd MMMM YYYY'}"/>
+                                <span class="small ms-2 fw-light">(<t t-out="event.date_tz"/>)</span>
                         </div>
                     </div>
                     <div class="d-flex flex-grow-1" t-elif="tracks_header_name">
                         <span class="h1 m-0 fw-bold"
                             t-out="tracks_header_name"/>
                     </div>
-                    <a t-attf-class="ms-auto align-self-start text-black {{ 'collapsed' if tracks_info['default_collapsed'] else '' }}"
+                    <a t-attf-class="my-auto align-self-start text-black {{ 'collapsed' if tracks_info['default_collapsed'] else '' }}"
                         t-attf-href="#collapse_session_list_{{ tracks_info_index }}"
                         t-attf-aria-controls="collapse_session_list_{{ tracks_info_index }}"
                         t-att-aria-expanded="'false' if tracks_info['default_collapsed'] else 'true'"
                         data-bs-toggle="collapse">
-                        <i class="oi fa-2x oi-chevron-down"/>
+                        <i class="oi oi-chevron-down"/>
                     </a>
                     <hr class="mt-2 mb-2"/>
                 </div>
@@ -199,26 +266,35 @@
                 <div t-attf-class="collapse {{ '' if tracks_info['default_collapsed'] else 'show' }}"
                     t-attf-id="collapse_session_list_{{ tracks_info_index }}">
                     <div t-foreach="tracks" t-as="track"
-                        t-att-class="'o_wesession_list_item px-2 py-2 event_color_%d' % (track.color)">
-                        <!-- Side information in a floating div (desktop only) -->
-                        <div t-if="not event.is_done and (not track.date or today_tz &lt;= tracks_date) and option_track_wishlist"
-                            class="float-end d-none d-md-block ms-2 py-1">
-                            <t t-call="website_event_track.track_widget_reminder">
-                                <t t-set="reminder_small" t-value="False"/>
-                                <t t-set="reminder_light" t-value="False"/>
-                            </t>
-                        </div>
+                        t-att-class="'o_wesession_list_item p-3 event_color_%d' % (track.color)">
                         <div class="row g-0">
-                            <!-- Main column: name, speaker -->
-                            <div class="col-md-7">
-                                <!-- Reminder widget: directly in line to gain space, mobile only -->
+                            <div class="col-12 d-flex justify-content-between">
+                                <!-- Hour: Live > Remaining > Hour: desktop only -->
+                                <div t-if="tracks_date and today_tz &lt;= tracks_date"
+                                    >
+                                    <span t-if="track.is_track_live and not track.is_track_done"
+                                        class="badge text-bg-danger">Live</span>
+                                    <span t-elif="not track.is_track_done and track.is_track_soon">
+                                        <span t-out="track.track_start_remaining"
+                                            t-options="{'widget': 'duration', 'digital': False, 'format': 'narrow',
+                                                        'add_direction': True, 'unit': 'second', 'round': 'minute'}"/>
+                                    </span>
+                                    <span t-elif="not track.is_track_done and not track.is_track_soon"
+                                        t-out="track.date"
+                                        t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short', 'tz_name': event.date_tz}"/>
+                                    <span t-else="" class="badge text-bg-info">Finished</span>
+                                </div>
+                                <!-- reminder -->
                                 <div t-if="not event.is_done and (not track.date or today_tz &lt;= tracks_date) and option_track_wishlist"
-                                    class="float-end d-block d-md-none ms-2 py-1">
+                                    class="d-none d-md-block py-1">
                                     <t t-call="website_event_track.track_widget_reminder">
-                                        <t t-set="reminder_small" t-value="True"/>
+                                        <t t-set="reminder_small" t-value="False"/>
                                         <t t-set="reminder_light" t-value="False"/>
                                     </t>
                                 </div>
+                            </div>
+                            <!-- Main column: name, speaker -->
+                            <div class="col-12">
                                 <span class="h5 mb0">
                                     <a t-if="track.website_published or is_event_user"
                                         class="me-2"
@@ -233,57 +309,23 @@
                                         Unpublished
                                     </span>
                                 </span>
-                                <div class="text-muted d-flex align-items-center">
+                            </div>
+                            
+                            <div class="col-12 d-flex justify-content-between align-items-end">
+                                <div class="d-flex align-items-center w-100 gap-2 text-muted">
                                     <span class="text-muted" t-out="track.partner_tag_line"/>
                                     <t t-if="tracks_date and today_tz &lt;= tracks_date">
-                                        <!-- Hour: Live > Remaining > Hour: mobile only -->
-                                        <div class="d-block d-md-none">
-                                            <span t-if="track.partner_tag_line" class="ms-2">&amp;bull;</span>
-                                            <span t-if="track.is_track_live and not track.is_track_done"
-                                                class="badge text-bg-danger ms-2">Live</span>
-                                            <span t-elif="not track.is_track_done and track.is_track_soon"
-                                                class="ms-2">
-                                                <span t-out="track.track_start_remaining"
-                                                    t-options="{'widget': 'duration', 'digital': False, 'format': 'narrow',
-                                                                'add_direction': True, 'unit': 'second', 'round': 'minute'}"/>
-                                            </span>
-                                            <span t-elif="not track.is_track_done and not track.is_track_soon"
-                                                class="ms-2"
-                                                t-out="track.date"
-                                                t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short', 'tz_name': track.event_id.date_tz}"/>
-                                            <span t-else="" class="badge text-bg-info ms-2">Finished</span>
-                                        </div>
-                                        <!-- Duration (desktop only) -->
                                         <t t-if="track.duration and not track.is_track_done and not track.is_track_done">
-                                            <span class="d-none d-md-block ms-2">&amp;bull;</span>
-                                            <span class="d-none d-md-block ms-2"
+                                            <span class="d-none d-md-block">&amp;bull;</span>
+                                            <span class="d-none d-md-block"
                                                 t-out="track.duration"
                                                 t-options="{'widget': 'duration', 'digital': False, 'format': 'short', 'unit': 'hour', 'round': 'minute'}"/>
                                         </t>
                                     </t>
                                 </div>
-                            </div>
-                            <!-- Aside column: date, tags -->
-                            <div class="col-md-5 align-self-center">
-                                <!-- Hour: Live > Remaining > Hour: desktop only -->
-                                <div t-if="tracks_date and today_tz &lt;= tracks_date"
-                                    class="d-none d-md-block float-end">
-                                    <span t-if="track.is_track_live and not track.is_track_done"
-                                        class="badge text-bg-danger ms-2">Live</span>
-                                    <span t-elif="not track.is_track_done and track.is_track_soon"
-                                        class="ms-2">
-                                        <span t-out="track.track_start_remaining"
-                                            t-options="{'widget': 'duration', 'digital': False, 'format': 'narrow',
-                                                        'add_direction': True, 'unit': 'second', 'round': 'minute'}"/>
-                                    </span>
-                                    <span t-elif="not track.is_track_done and not track.is_track_soon"
-                                        class="ms-2"
-                                        t-out="track.date"
-                                        t-options="{'widget': 'datetime', 'time_only': True, 'format': 'short', 'tz_name': event.date_tz}"/>
-                                    <span t-else="" class="badge text-bg-info ms-2">Finished</span>
-                                </div>
-                                <!-- Tags: desktop only -->
-                                <div class="d-none d-md-block">
+                                <!-- Aside column: tags -->
+                                <div class="d-none d-md-flex justify-content-end align-items-center w-auto gap-2">
+                                    <!-- Tags: desktop only -->
                                     <t t-foreach="track.tag_ids" t-as="tag">
                                         <t t-if="tag.color" t-call="website_event_track.track_tag_badge_link"/>
                                     </t>
@@ -302,7 +344,7 @@
 <!-- ============================================================ -->
 
 <template id="track_cards_section" name="Track Cards">
-    <div t-foreach="tracks" t-as="track" class="col-md-6 col-lg-3 mb-4">
+    <div t-foreach="tracks" t-as="track" class="col-md-6 col-lg-4 col-xl-3 mb-4">
         <t t-if="track.website_published or is_event_user">
             <a t-att-href="'/event/%s/track/%s' % (slug(track.event_id), slug(track))" class="text-decoration-none">
                 <t t-call="website_event_track.track_card"/>
@@ -315,7 +357,7 @@
 </template>
 
 <template id="track_card" name="Track Card">
-    <article t-att-class="'h-100 card rounded-0 border-0 shadow-sm o_wesession_track_card %s' % ('o_wesession_track_card_unpublished' if (not track.website_published and is_event_user) else '')"
+    <article t-att-class="'card o_wesession_track_card h-100 %s' % ('o_wesession_track_card_unpublished' if (not track.website_published and is_event_user) else '')"
         itemscope="itemscope" itemtype="http://schema.org/Event">
         <div class="h-100 row g-0">
             <header class="overflow-hidden bg-secondary col-12">
@@ -325,10 +367,9 @@
 
                 <div t-if="track.website_image_url" class="card-img-top"
                     t-attf-style="padding-top: 50%; background-image: url(#{track.website_image_url}); background-size: cover; background-position:center">
-                    <span t-if="option_track_wishlist and not track.is_track_live" class="position-absolute h3 mt-2 me-2" style="right: 0; top: 0;">
+                    <span t-if="option_track_wishlist and not track.is_track_live" class="position-absolute h3 mt-2 me-2 text-white" style="right: 0; top: 0;">
                         <t t-call="website_event_track.track_widget_reminder">
                             <t t-set="reminder_light" t-value="True"/>
-                            <t t-set="light_theme" t-value="True"/>
                         </t>
                     </span>
                 </div>
@@ -344,20 +385,20 @@
             </header>
             <div class="col-12">
                 <main class="card-body">
-                    <!-- Title -->
-                    <h5 class="card-title mt-0 mb-0 text-truncate">
-                        <span t-field="track.name" itemprop="name"/>
-                    </h5>
                     <!-- Tags> -->
-                    <div>
+                    <div class="mb-2">
                         <t t-foreach="track.tag_ids" t-as="tag">
                             <t t-if="tag.color" t-call="website_event_track.track_tag_badge_info"/>
                         </t>
                     </div>
+                    <!-- Title -->
+                    <h5 class="card-title mb-0 text-truncate">
+                        <span t-field="track.name" itemprop="name"/>
+                    </h5>
                 </main>
             </div>
             <!-- Footer -->
-            <footer class="small align-self-end w-100 card-footer">
+            <footer class="small align-self-end w-100 p-3">
                 <div class="d-flex justify-content-between align-items-center">
                     <!-- Speaker -->
                     <span class="text-muted text-truncate" t-field="track.partner_name" itemprop="performer"/>
@@ -384,10 +425,10 @@
 
 <!-- Searched tags -->
 <template id="tracks_search" name="Tracks: search tags">
-    <div class="d-flex align-items-center mb-3">
+    <div t-if="search_wishlist or search_tags" class="d-flex align-items-center my-3">
         <span t-if="search_wishlist"
-            class="align-items-baseline border d-inline-flex ps-2 mt-3 rounded ml16 mb-2 bg-white">
-            <i class="fa fa-bell me-2 text-muted"/> Favorite Talks
+            class="align-items-baseline border d-inline-flex rounded">
+            <i class="fa fa-bell mx-2 text-muted"/> Favorite Talks
             <a t-att-href="'/event/%s/track?%s' % (slug(event), keep_query('*', search_wishlist=''))"
                 class="btn border-0 py-1">
                 &#215;
@@ -395,8 +436,8 @@
         </span>
 
         <t t-foreach="search_tags" t-as="tag">
-            <span class="align-items-baseline border d-inline-flex ps-2 mt-3 rounded ml16 mb-2 bg-white">
-                <i class="fa fa-tag me-2 text-muted"/>
+            <span class="align-items-baseline border d-inline-flex rounded">
+                <i class="fa fa-tag mx-2 text-muted"/>
                 <t t-out="tag.display_name"/>
                 <a t-att-href="'/event/%s/track?%s' % (slug(event), keep_query('*', tags=str((search_tags - tag).ids)))"
                     class="btn border-0 py-1">
diff --git a/addons/website_event_track/views/event_track_templates_page.xml b/addons/website_event_track/views/event_track_templates_page.xml
index 462f2e4921a..bbf556935c6 100644
--- a/addons/website_event_track/views/event_track_templates_page.xml
+++ b/addons/website_event_track/views/event_track_templates_page.xml
@@ -36,7 +36,7 @@
         </t>
     </div>
     <div class="mb-1 align-items-baseline text-break" t-if="track.partner_id.website">
-        <i class="fa fa-home me-2"/><a t-att-href="track.partner_id.website"><span t-field="track.partner_id.website"/></a>
+        <i class="fa fa-globe me-2"/><a t-att-href="track.partner_id.website"><span t-field="track.partner_id.website"/></a>
     </div>
     <div class="mb-1 align-items-baseline text-break" t-if="track.partner_email">
         <i class="fa fa-envelope me-2"/><a t-att-mailto="track.partner_email"><span t-field="track.partner_email"/></a>
@@ -48,7 +48,7 @@
 
 <template id="event_track_content" name="Track: Main Description">
     <div name="o_wesession_track_main"
-         t-att-class="'col-12 o_wesession_track_main o_wevent_theme_bg_base border mt-3 p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
+         t-att-class="'o_wesession_track_main col-12 border p-0 %s %s' % ('col-md-9 col-xl-10' if option_widescreen else 'col-md-8 col-xl-9', 'o_youtube_chat' if track.is_youtube_chat_available else '')">
         <!-- LIVE INFORMATIONS -->
         <div t-if="not track.event_id.is_ongoing and track.event_id.start_remaining" class="pt-3">
             <div class="mx-3 alert alert-warning">
@@ -76,8 +76,8 @@
         </div>
         <!-- TRACK DESCRIPTION -->
         <div class="o_wesession_track_main_description overflow-auto">
-            <div class="mx-3 pt-3 mb-3 d-flex justify-content-between flex-column flex-md-row">
-                <div class="d-flex flex-column">
+            <div class="p-3 border-bottom">
+                <div class="d-flex flex-wrap justify-content-between align-items-center">
                     <span class="h4 mb-0" t-out="track.name"/>
                     <div>
                         <t t-foreach="track.tag_ids" t-as="tag">
@@ -87,38 +87,38 @@
                         </t>
                     </div>
                 </div>
-                <div class="o_we_track_action_buttons d-flex justify-content-md-end align-items-center flex-wrap">
-                    <div class="o_we_track_reminder_button my-1">
-                        <div t-if="option_track_wishlist and not track.is_track_done"
-                            t-call="website_event_track.track_widget_reminder">
-                            <t t-set="reminder_small" t-value="False"/>
-                            <t t-set="reminder_light" t-value="False"/>
+                <div class="d-flex flex-wrap justify-content-between align-items-center">
+                    <div class="text-muted">
+                        <t t-if="track.location_id">
+                            <strong>Location:</strong> <span t-field="track.location_id"/>
+                            <span> - </span>
+                        </t>
+                        <t t-if="track.date">
+                            <span t-field="track.date"
+                                t-options='{"hide_seconds":"True", "format": "short", "tz_name": event.date_tz}'/>
+                            -
+                            <span t-field="track.date_end"
+                                t-options='{"hide_seconds":"True", "format": "short", "tz_name": event.date_tz}'/>
+                            <t t-if="event.date_tz">
+                                (<span t-out="event.date_tz"/>)
+                            </t>
+                        </t>
+                        <t t-if="track.duration">
+                            (<span t-field="track.duration"
+                                t-options='{"widget": "duration", "unit": "hour", "round": "minute"}'/>)
+                        </t>
+                    </div>
+                    <div class="o_we_track_action_buttons d-flex justify-content-md-end align-items-center flex-wrap">
+                        <div class="o_we_track_reminder_button my-1">
+                            <div t-if="option_track_wishlist and not track.is_track_done"
+                                t-call="website_event_track.track_widget_reminder">
+                                <t t-set="reminder_small" t-value="False"/>
+                                <t t-set="reminder_light" t-value="False"/>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="mx-3 text-muted">
-                <t t-if="track.location_id">
-                    <strong>Location:</strong> <span t-field="track.location_id"/>
-                    <span> - </span>
-                </t>
-                <t t-if="track.date">
-                    <span t-field="track.date"
-                        t-options='{"hide_seconds":"True", "format": "short", "tz_name": event.date_tz}'/>
-                    -
-                    <span t-field="track.date_end"
-                        t-options='{"hide_seconds":"True", "format": "short", "tz_name": event.date_tz}'/>
-                    <t t-if="event.date_tz">
-                        (<span t-out="event.date_tz"/>)
-                    </t>
-                </t>
-                <t t-if="track.duration">
-                    (<span t-field="track.duration"
-                        t-options='{"widget": "duration", "unit": "hour", "round": "minute"}'/>)
-                </t>
-            </div>
-
-            <hr class="mt-2 mb-0"/>
 
             <!-- ABOUT AUTHOR -->
             <t t-set="track_fields" t-value="['image', 'partner_name', 'partner_function', 'partner_email', 'partner_phone']"/>
@@ -128,14 +128,13 @@
                     <div class="mt-2 mb-2 d-flex">
                         <div t-if="track.image" t-field="track.image"
                              t-options="{'widget': 'image', 'class': 'rounded-circle me-2', 'max_width': '96'}"/>
-                        <div class="ps-2 pe-0 pe-md-2 d-flex flex-grow-1 flex-column">
-                            <div t-if="track.partner_name" t-field="track.partner_name" class="fw-bold mb-2"/>
-                            <div class="d-none d-lg-block">
-                                <t t-call="website_event_track.event_track_content_partner_info"/>
-                            </div>
+                        <div class="d-none d-md-flex flex-grow-1 flex-column ps-2 pe-0 pe-md-2">
+                            <div t-if="track.partner_name" t-field="track.partner_name" class="mb-2 fw-bold"/>
+                            <t t-call="website_event_track.event_track_content_partner_info"/>
                         </div>
                     </div>
-                    <div class="d-block d-lg-none mt-3 mb-3">
+                    <div class="d-flex d-md-none flex-grow-1 flex-column mt-3 mb-3 ps-2 pe-0 pe-md-2">
+                        <div t-if="track.partner_name" t-field="track.partner_name" class="mb-2 fw-bold"/>
                         <t t-call="website_event_track.event_track_content_partner_info"/>
                     </div>
                     <div t-if="not is_html_empty(track.partner_biography)" t-field="track.partner_biography"
@@ -166,8 +165,8 @@
 <!-- ============================================================ -->
 
 <template id="event_track_aside" name="Track: Aside">
-    <div t-att-class="'col-12 ps-0 pe-0 mt-3 border o_wevent_online_page_aside o_wesession_track_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
-        <div class="o_wevent_theme_bg_base o_wevent_online_page_aside_content">
+    <div t-att-class="'o_wevent_online_page_aside o_wesession_track_aside col-12 ps-0 pe-0 border %s %s' % ('col-md-3 col-xl-2' if option_widescreen else 'col-md-4 col-xl-3', 'o_youtube_chat' if track.is_youtube_chat_available else '')">
+        <div class="o_wevent_online_page_aside_content">
             <div class="mx-2" t-if="track.date and track.website_cta">
                 <t t-set="cta_coundown" t-value="bool(track.website_cta_start_remaining)"/>
                 <div t-if="cta_coundown" class="text-center w-100 btn btn-primary d-none">
@@ -189,7 +188,7 @@
                     </a>
                 </div>
             </div>
-            <div class="d-flex align-items-center justify-content-between my-2 me-2">
+            <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                 <ul class="nav nav-tabs o_wesession_track_aside_nav d-flex border-0" role="tablist">
                     <li class="nav-item flex-grow-1">
                         <a href="#track_list" aria-controls="track_list" class="nav-link active" role="tab" data-bs-toggle="tab">
@@ -204,11 +203,11 @@
             <div id="collapse_track_aside"
                 class="tab-content collapse d-md-block o_wesession_track_aside_tabs">
                 <div class="tab-pane fade show active" id="track_list" role="tabpanel">
-                    <ul class="list-unstyled mb-0">
-                        <li t-foreach="tracks_other" t-as="track_other" class="w-100">
+                    <ul class="list-group list-group-flush">
+                        <li t-foreach="tracks_other" t-as="track_other" class="list-group-item list-group-item-action">
                             <a t-if="is_event_user or track_other.is_published"
                                 t-att-data-publish="track_other.website_published and 'on' or 'off'"
-                                class="d-block w-100 h-100 px-2 pt-2 pb-1 text-decoration-none"
+                                class="d-flex flex-column flex-wrap flex-md-nowrap text-decoration-none text-dark"
                                 t-att-href="track_other.website_url">
                                 <t t-call="website_event_track.event_track_aside_other_track"/>
                             </a>
@@ -226,10 +225,10 @@
 </template>
 
 <template id="event_track_aside_other_track">
-    <span t-out="track_other.name" class="w-100"/>
-    <div class="d-flex align-items-center">
+    <span t-out="track_other.name" class="fw-bold"/>
+    <div class="d-flex flex-column flex-lg-row flex-wrap justify-content-between align-items-start">
         <small class="text-muted" t-out="track_other.partner_name"/>
-        <div class="d-inline-block ms-auto o_wesession_track_aside_info text-truncate">
+        <div class="d-inline-block o_wesession_track_aside_info text-truncate">
             <small t-if="not track_other.website_published and user_event_manager"
                 class="badge text-bg-danger">Unpublished</small>
             <small t-if="track_other.is_track_live and not track_other.is_track_done"
@@ -237,7 +236,7 @@
             <small t-elif="track_other.is_track_done"
                 class="badge text-bg-light">Done</small>
             <small t-elif="track_other.is_track_today and track_other.track_start_remaining"
-                class="badge text-bg-light">
+                class="badge text-bg-secondary">
                 <span t-out="track_other.track_start_remaining"
                     t-options="{'widget': 'duration', 'digital': False, 'add_direction': True,
                                 'unit': 'second', 'round': 'minute', 'format': 'narrow'}"/>
diff --git a/addons/website_event_track/views/event_track_templates_proposal.xml b/addons/website_event_track/views/event_track_templates_proposal.xml
index 9e1d9dad2d7..df86d99e40a 100644
--- a/addons/website_event_track/views/event_track_templates_proposal.xml
+++ b/addons/website_event_track/views/event_track_templates_proposal.xml
@@ -3,25 +3,27 @@
 
 <template id="event_track_proposal">
     <t t-call="website_event.layout">
+        <t t-set="hide_submenu" t-value="True"/>
         <div class="oe_structure" id="oe_structure_website_event_track_proposal_1"/>
         <div class="container">
-            <section class="pt48">
-                <h1 class="o_page_header">Call for Proposals</h1>
-                <h2 class="text-center text-secondary fw-bold my-4" t-out="event.name"/>
-            </section>
-            <section id="forms" t-if="not event.website_track_proposal">
-                <h1>Proposals are closed!</h1>
-                <p>
-                    This event does not accept proposals.
-                </p>
-            </section>
-            <section class="row mb32">
-                <div class="oe_structure col-lg-12">
+            <section class="row mb-3">
+                <div class="col-lg-8 col-xl-9">
+                    <t t-call="website_event.navbar"/>
                     <section>
-                        <h3 class="o_page_header mt8">
-                            Introduction
-                        </h3>
+                        <h3>Call for Proposals</h3>
+                    </section>
+                    <section id="forms" t-if="not event.website_track_proposal">
+                        <h2>Proposals are closed!</h2>
                         <p>
+                            This event does not accept proposals.
+                        </p>
+                    </section>
+                    <div class="oe_structure">
+                    <section>
+                        <h4 class="mt-3">
+                            Introduction
+                        </h4>
+                        <p class="lead">
                             We will accept a broad range of
                             presentations, from reports on academic and
                             commercial projects to tutorials and case
@@ -30,15 +32,15 @@
                             audience, it will be considered for
                             inclusion in the programme.
                         </p>
+                        <br/>
                     </section>
                 </div>
-                <div class="col-lg-9">
                     <div>
                         <section id="forms" t-if="event.website_track_proposal">
-                            <form class="mt32 js_website_submit_form o_website_event_track_proposal_form" t-att-data-event-id="event.id" enctype="multipart/form-data">
+                            <form class="js_website_submit_form o_website_event_track_proposal_form mt-3" t-att-data-event-id="event.id" enctype="multipart/form-data">
                                 <input name="csrf_token" type="hidden" t-att-value="request.csrf_token()"/>
                                 <div id="track_intro">
-                                    <h4 class="mt32"><b>Talk Intro</b></h4>
+                                    <h4 class="mt-3">Talk Intro</h4>
                                     <div class="form-text text-muted mb16">
                                         What is your talk about?
                                     </div>
@@ -67,8 +69,9 @@
                                         </div>
                                     </div>
                                 </div>
+                                <br/>
                                 <div id="speaker_profile">
-                                    <h4 class="mt32"><b>Speaker Profile</b></h4>
+                                    <h4 class="mt-3">Speaker Profile</h4>
                                     <div class="form-text text-muted mb16">
                                         Who will give this talk? We will show this to attendees to showcase your talk.
                                     </div>
@@ -86,7 +89,7 @@
                                     </div>
                                     <div class="row mb-3">
                                         <label class="col-form-label col-sm-auto" for="image" style="width: 200px">Picture</label><br/>
-                                        <div class="col-sm"><input name="image" type="file" accept="image/*" style="width: 100%"/></div>
+                                        <div class="col-sm"><input name="image" class="form-control" type="file" accept="image/*" style="width: 100%"/></div>
                                     </div>
                                     <div class="row mb-3">
                                         <label class="col-form-label col-sm-auto" for="partner_function" style="width: 200px">Job Title</label>
@@ -98,7 +101,7 @@
                                     </div>
                                 </div>
                                 <t t-call="website_event_track.event_track_proposal_contact_details"/>
-                                <div class="o_form_buttons">
+                                <div class="o_form_buttons d-flex justify-content-end">
                                     <button type="submit" class="btn btn-primary o_wetrack_proposal_submit_button">Submit Proposal</button>
                                     <span class="o_wetrack_proposal_error_section text-danger d-none ml8">
                                         <i class="fa fa-close mr4" role="img" aria-label="Error" title="Error"/>
@@ -110,39 +113,32 @@
                     </div>
                     <div class="oe_structure" id="oe_structure_website_event_track_proposal_2"/>
                 </div>
-                <div class="col-lg-3">
-                    <div class="card mb-3 border-0">
-                        <h4 class="o_wevent_theme_bg_base card-header">Talks Types</h4>
-                        <div class="o_wevent_theme_bg_light card-body">
-                            <ul class="list-unstyled">
-                                <li>
-                                    <strong>Regular Talks</strong>. These are standard talks with slides,
-                                    alocated in slots of 60 minutes.
-                                </li><li>
-                                    <strong>Lightning Talks</strong>. These are 30 minutes talks on many
-                                    different topics. Most topics are accepted in lightning talks.
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="card border-0">
-                        <h4 class="o_wevent_theme_bg_base card-header">Submission Agreement</h4>
-                        <div class="o_wevent_theme_bg_light card-body">
-                            <p>
-                            We require speakers to accept an agreement in which they commit to:
-                            </p>
-                            <ul class="list-unstyled">
-                                <li>
-                                    Timely release of presentation material (slides),
-                                    for publishing on our website.
-                                </li><li>
-                                    Allow video and audio recording of their
-                                    presentation, for publishing on our website.
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
+                <aside class="col-lg-4 col-xl-3 mt-3 mt-lg-0 pt-3">
+                    <h5 class="o_page_header">Talks Types</h5>
+                    <h6 class="fw-bold">Regular Talks</h6>
+                    <p>
+                        These are standard talks with slides, alocated in slots of 60 minutes.
+                    </p>
+                    <h6 class="fw-bold">Lightning Talks</h6>
+                    <p>
+                        These are 30 minutes talks on many different topics. Most topics are accepted in lightning talks.
+                    </p>
+                    <br/>
+                    <h5 class="o_page_header">Submission Agreement</h5>
+                    <p>
+                    We require speakers to accept an agreement in which they commit to:
+                    </p>
+                    <ul>
+                        <li>
+                            Timely release of presentation material (slides),
+                            for publishing on our website.
+                        </li>
+                        <li>
+                            Allow video and audio recording of their
+                            presentation, for publishing on our website.
+                        </li>
+                    </ul>
+                </aside>
             </section>
         </div>
         <div class="oe_structure" id="oe_structure_website_event_track_proposal_3"/>
diff --git a/addons/website_event_track/views/event_track_templates_reminder.xml b/addons/website_event_track/views/event_track_templates_reminder.xml
index ff6fe9370fa..6bdd89de54c 100644
--- a/addons/website_event_track/views/event_track_templates_reminder.xml
+++ b/addons/website_event_track/views/event_track_templates_reminder.xml
@@ -7,23 +7,16 @@
     * light_theme: bell is white/gold if set; otherwse bell is gray / white
  -->
 <template id="track_widget_reminder">
-    <t t-set="_btn_style" t-value="'btn-link' if reminder_light else (track.is_reminder_on and 'btn-primary') or 'btn-outline-primary'"/>
+    <t t-set="_btn_style" t-value="'btn-link' if reminder_light else (track.is_reminder_on and '') or ''"/>
     <t t-set="_btn_size" t-value="'btn-sm' if reminder_small else ''"/>
-    <div t-att-class="'o_wetrack_js_reminder btn %s %s' % (_btn_style, _btn_size)">
+    <div t-att-class="'o_wetrack_js_reminder %s %s' % (_btn_style, _btn_size)" role="button">
         <t t-if="track.is_reminder_on" t-set="title">Favorite On</t>
         <t t-else="track.is_reminder_on" t-set="title">Set Favorite</t>
-        <i t-att-class="'fa fa-bell%s inactive_color_%s' % ('' if track.is_reminder_on else '-o', 'dark' if reminder_light and not light_theme else 'light')"
+        <i t-att-class="'fa fa-bell%s %s' % ('' if track.is_reminder_on else '-o', 'text-white' if reminder_light and not light_theme else 'text-dark')"
            t-att-data-track-id="track.id"
            t-att-title="title"
            t-att-data-is-reminder-light="reminder_light"
            t-att-data-reminder-on="bool(track.is_reminder_on)"></i>
-        <span t-if="not reminder_light" class="o_wetrack_js_reminder_text">
-            <t t-if="not track.is_reminder_on">
-                Set Favorite
-            </t><t t-else="">
-                Favorite On
-            </t>
-        </span>
     </div>
 </template>
 
diff --git a/addons/website_event_track_live/views/event_track_templates_list.xml b/addons/website_event_track_live/views/event_track_templates_list.xml
index c8e0e6351b6..4e9aad9ffab 100644
--- a/addons/website_event_track_live/views/event_track_templates_list.xml
+++ b/addons/website_event_track_live/views/event_track_templates_list.xml
@@ -3,17 +3,17 @@
 
 <template id="tracks_display_list" inherit_id="website_event_track.tracks_display_list">
     <!-- TRACK LIST: ADD REPLAY TAG FOR FINISHED TRACKS -->
-    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//span[@t-elif='not track.is_track_done and not track.is_track_soon']" position="after">
+    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-12')]//span[@t-elif='not track.is_track_done and not track.is_track_soon']" position="after">
         <a t-elif="track.youtube_video_url and (track.is_published or is_event_user)"
-            t-att-href="track.website_url" class="badge text-bg-danger ms-2">Replay
+            t-att-href="track.website_url" class="badge text-bg-danger">Replay
         </a>
     </xpath>
     <!-- ADD YOUTUBE ICON -->
-    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//a/span[@t-field='track.name']" position="before">
+    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-12')]//a/span[@t-field='track.name']" position="before">
         <i t-if="track.date and track.youtube_video_url and (track.is_track_soon or track.is_track_live or track.is_youtube_replay)"
             class="fa fa-youtube-play text-danger me-1"/>
     </xpath>
-    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-md-7')]//t/span[@t-field='track.name']" position="before">
+    <xpath expr="//div[@t-foreach='tracks']//div[hasclass('col-12')]//t/span[@t-field='track.name']" position="before">
         <i t-if="track.date and track.youtube_video_url and (track.is_track_soon or track.is_track_live or track.is_youtube_replay)"
             class="fa fa-youtube-play text-danger me-1"/>
     </xpath>
diff --git a/addons/website_event_track_quiz/static/src/scss/event_quiz.scss b/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
index a36a6edc4fe..d80e668c2d3 100644
--- a/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
+++ b/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
@@ -18,7 +18,6 @@ $o-wslides-fs-side-width: 300px;
 }
 
 .o_quiz_main {
-    background-color: $o-wslides-color-bg;
 
     .o_quiz_js_quiz {
         i.o_quiz_js_quiz_icon {
diff --git a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
index 34a7f394421..0a551e70201 100644
--- a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
+++ b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
@@ -3,7 +3,7 @@
 
 <template id="event_leaderboard" name="Leaderboard">
     <t t-call="website_event.layout">
-        <div t-if="visitors" class="o_wevent_theme_bg_light pt32 pb32 o_wevent_quiz_leaderboard">
+        <div t-if="visitors" class="pt32 pb32 o_wevent_quiz_leaderboard">
             <t t-call="website_event_track_quiz.leaderboard_search_bar"/>
             <div class="container mt32">
                 <div t-if="not search" class="row mb-3">
@@ -13,7 +13,7 @@
                 </div>
                 <table class="table table-sm">
                     <tr t-foreach="visitors" t-as="visitor"
-                        t-attf-class="#{'alert-info' if visitor['visitor'] == current_visitor else 'o_wevent_theme_bg_base'} #{'o_wevent_quiz_scroll_to' if scroll_to_position and visitor['visitor'] == current_visitor else ''}">
+                        t-attf-class="#{'alert-info' if visitor['visitor'] == current_visitor else ''} #{'o_wevent_quiz_scroll_to' if scroll_to_position and visitor['visitor'] == current_visitor else ''}">
                         <t t-call="website_event_track_quiz.all_visitor_card"/>
                     </tr>
                 </table>
@@ -26,7 +26,7 @@
             <t t-call="website_event_track_quiz.leaderboard_search_bar"/>
             <div class='alert alert-warning mt32'>No user found for <strong><t t-out="search"/></strong>. Try another search.</div>
         </div>
-        <div t-if="not visitors and not search" class="vh-100 o_wevent_theme_bg_light d-flex justify-content-center align-items-center">
+        <div t-if="not visitors and not search" class="vh-100 d-flex justify-content-center align-items-center">
             <h4 class="text-muted fw-bold">There is currently no leaderboard available</h4>
         </div>
     </t>
diff --git a/addons/website_event_track_quiz/views/event_track_templates_page.xml b/addons/website_event_track_quiz/views/event_track_templates_page.xml
index a14854e7469..e9f1c3787e3 100644
--- a/addons/website_event_track_quiz/views/event_track_templates_page.xml
+++ b/addons/website_event_track_quiz/views/event_track_templates_page.xml
@@ -6,7 +6,7 @@
     inherit_id="website_event_track.event_track_content">
     <xpath expr="//div[hasclass('o_wesession_track_main_description')]" position="after">
         <div id="we_track_quiz_container" t-if="track.quiz_id"
-             t-att-class="'o_quiz_js_quiz_container o_quiz_main border-top o_wevent_theme_bg_base px-2 pt-4 pb-4 col-12 %s' % ('' if track.is_quiz_completed else 'd-none')"
+             t-att-class="'o_quiz_js_quiz_container o_quiz_main border-top col-12 p-3 %s' % ('' if track.is_quiz_completed else 'd-none')"
              t-att-data-object-id="track.id">
             <h3 class="col-12">Quiz</h3>
             <t t-call="website_event_track_quiz.quiz_content">