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 8ad2e307c69..e84424acff1 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
@@ -32,15 +32,20 @@ odoo.define('website_event.ticket_details', function (require) {
         //--------------------------------------------------------------------------
 
         /**
+         * 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){
-                $(ev.currentTarget).toggleClass('btn-primary text-left pl-0');
-                $(ev.currentTarget).siblings().toggleClass('d-none');
-                this.$('.close').toggleClass('d-none');
+                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');
             }
         },
         /**
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 abc2e5a6289..97dc25b289e 100644
--- a/addons/website_event/static/src/scss/event_templates_page.scss
+++ b/addons/website_event/static/src/scss/event_templates_page.scss
@@ -34,24 +34,20 @@
         }
     }
 
+    .o_wevent_registration_title {
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+    }
+
     .o_wevent_registration_btn {
-        flex: 0 0 100%;
+        transition: none;
+
+        &:not(.collapsed) {
+            box-shadow: none;
+        }
 
         &.collapsed {
             flex: 0 0 33%;
-
-            .close {
-                display: none;
-            }
-        }
-        .close {
-            display: block;
-        }
-        &:not(.collapsed) {
-            box-shadow: none;
-            font-weight: $font-weight-bold;
-            text-transform: uppercase;
-            transition: none;
         }
     }
 
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index ee8fc9103a8..a18203cc6fa 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -116,21 +116,20 @@
 
 <!-- Event - Registration -->
 <template id="registration_template" name="Registration">
-    <div t-if="request.env.user.has_group('event.group_event_manager')" class="alert alert-info rounded-0 o_website_event_configuration o_not_editable" role="status">
-        <a t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event">
-            <i class="fa fa-pencil mr-2" role="img" aria-label="Edit" title="Edit event registration in backend"/><em>Configure Event Tickets</em>
-        </a>
-    </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="bg-white mb-5">
         <div class="alert alert-info mb-0 d-flex justify-content-between align-items-center" role="status">
             <t t-if="not event.event_registrations_started">
-                <em class="col-md-8">Ticket Sales starting on
-                    <span class="" t-esc="event.start_sale_datetime"
+                <div class="col-md-8 d-flex">
+                    <em class="mr-2">Ticket Sales starting on
+                        <span class="" t-esc="event.start_sale_datetime"
                             t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
-                    <span t-esc="event.date_tz"/>
+                        <span t-esc="event.date_tz"/>
                     </em>
-                <button class="btn btn-danger mr-1 ml-3 col-md-4"  disabled="1">Registrations not yet open</button>
+                    <t t-call="website_event.registration_configure_tickets_button"
+                        t-if="request.env.user.has_group('event.group_event_manager')"/>
+                </div>
+                <button class="btn btn-danger ml-2 col-md-4"  disabled="1">Registrations not yet open</button>
             </t>
             <t t-else="">
                 <div class="col-md-8">
@@ -154,19 +153,17 @@
             <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 or tickets.description">
-                <div class="d-flex justify-content-between align-items-center py-2 pl-3 pr-2 border-bottom">
-                    <div id="price-range" class="pr-3 d-none"/>
+                <div class="d-flex align-items-center py-2 pl-3 pr-2 border-bottom">
+                    <span class="py-2 o_wevent_registration_title text-left">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 mr-2"/>Sold Out
                     </span>
-                    <div t-if="event.is_participating" id="registered" class="ml-auto pr-3 d-none">
-                        <span class="o_wevent_badge badge badge-success ml-3">
-                            <i class="fa fa-check mr-2"/>Registered
-                        </span>
-                    </div>
-                    <a href="#" role="button" class="btn o_wevent_registration_btn text-left" data-target="#o_wevent_tickets_collapse">
-                        <span class="py-2">Tickets</span>
-                        <span class="close d-none">×</span>
+                    <a href="#" role="button" class="o_wevent_registration_btn d-none" data-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">
@@ -225,18 +222,20 @@
             <div t-else="" class="o_wevent_registration_single">
                 <div class="row p-2 pl-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 pr-3 border-right text-dark">
+                        <h6 itemprop="name" class="my-0 pr-3 border-right text-dark o_wevent_single_ticket_name">
                             <span t-if="tickets" t-field="tickets.name"/>
                             <span t-else="">Registration</span>
                         </h6>
                         <small t-if="tickets.end_sale_datetime and tickets.sale_available and not tickets.is_expired" class="text-muted mr-3" itemprop="availabilityEnds">Sales end on
                             <span itemprop="priceValidUntil" t-esc="tickets.end_sale_datetime"
                                 t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
-                                <span t-esc="tickets.event_id.date_tz"/>
+                            <span t-esc="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="ml-auto o_wevent_nowrap">
                             <t t-if="event.event_registrations_open">
-                                <span class="text-dark font-weight-bold align-middle pr-2">Qty</span>
+                                <span class="text-dark font-weight-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="w-auto custom-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"/>
@@ -403,26 +402,33 @@
     </t>
 </template>
 
-<!-- Edit Options -->
+<!-- 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;view_type=form&amp;model=event.event">
+            <i class="fa fa-gear mr-1" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
+        </a>
+    </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" customize_show="True" 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='registered']" position="attributes">
-        <attribute name="class">ml-auto pr-3</attribute>
-    </xpath>
-    <xpath expr="//div[@id='price-range']" position="attributes">
-        <attribute name="class">ml-0 pr-3</attribute>
-    </xpath>
     <xpath expr="//div[@id='o_wevent_tickets_collapse']" position="attributes">
         <attribute name="class">collapse</attribute>
     </xpath>
-    <xpath expr="//a[hasclass('o_wevent_registration_btn')]" position="attributes">
-        <attribute name="class">btn btn-primary o_wevent_registration_btn collapsed</attribute>
-        <attribute name="data-toggle">collapse</attribute>
+    <xpath expr="//span[hasclass('o_wevent_registration_title')]" position="attributes">
+        <attribute name="class" add="d-none" separator=" "/>
     </xpath>
-    <xpath expr="//span[hasclass('close')]" position="attributes">
-        <attribute name="class">close d-none</attribute>
+    <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 ml-auto</attribute>
+        <attribute name="data-toggle">collapse</attribute>
     </xpath>
 </template>
 
diff --git a/addons/website_event_questions/static/tests/tours/tickets_questions.js b/addons/website_event_questions/static/tests/tours/tickets_questions.js
index b46fc63a0e6..36084499e8e 100644
--- a/addons/website_event_questions/static/tests/tours/tickets_questions.js
+++ b/addons/website_event_questions/static/tests/tours/tickets_questions.js
@@ -8,9 +8,6 @@ tour.register('test_tickets_questions', {
 }, [{
     content: "Click on the Design Fair event",
     trigger: 'article:contains("Design Fair New York")',
-}, {
-    content: "Click on Buy tickets button",
-    trigger: 'a:contains("Tickets")',
 }, {
     content: "Select 2 'Free' tickets to buy",
     trigger: 'div.row:contains("Free") select.custom-select',
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 31a8898bbae..ffd98358989 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
@@ -12,10 +12,6 @@ tour.register('event_buy_tickets', {
             content: "Go to the `Events` page",
             trigger: 'a[href*="/event"]:contains("Conference for Architects TEST"):first',
         },
-        {
-            content: "Show available Tickets",
-            trigger: '.o_wevent_registration_btn',
-        },
         {
             content: "Select 1 unit of `Standard` ticket type",
             extra_trigger: '#wrap:not(:has(a[href*="/event"]:contains("Conference for Architects")))',
diff --git a/addons/website_event_sale/views/website_event_templates.xml b/addons/website_event_sale/views/website_event_templates.xml
index 3caa8282568..b37b52fcc71 100644
--- a/addons/website_event_sale/views/website_event_templates.xml
+++ b/addons/website_event_sale/views/website_event_templates.xml
@@ -15,17 +15,21 @@
         </t>
         <span t-else="" class="font-weight-bold text-uppercase">Free</span>
     </xpath>
-    <xpath expr="//div[@id='price-range']" position="inside">
-        <span class="text-dark">
-            From
-            <span t-esc="event.event_ticket_ids[0].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
-            to
-            <span t-esc="event.event_ticket_ids[-1].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
-        </span>
+    <xpath expr="//div[hasclass('o_wevent_price_range')]" position="inside">
+        <t t-if="event.event_ticket_ids[-1].price_reduce > 0">
+            <span class="text-dark">
+                From
+                <span t-esc="event.event_ticket_ids[0].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
+                <t t-if="event.event_ticket_ids[-1].price_reduce != event.event_ticket_ids[0].price_reduce">
+                    to
+                    <span t-esc="event.event_ticket_ids[-1].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
+                </t>
+            </span>
+        </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 mr-2 d-flex align-items-center align-self-stretch">
+        <div class="px-2 text-dark d-flex align-items-center align-self-stretch">
             <t t-if="tickets.price">
                 <t t-if="(tickets.price-website.get_current_pricelist().currency_id._convert(tickets.price_reduce, event.company_id.sudo().currency_id, event.company_id, datetime.date.today())) &gt; 1 and website.get_current_pricelist().discount_policy == 'without_discount'">
                     <del class="text-danger mr-1" t-field="tickets.price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.get_current_pricelist().currency_id}"/>