diff --git a/addons/website_sale_slides/data/sale_order_demo.xml b/addons/website_sale_slides/data/sale_order_demo.xml
index f4efe84a1e8..1961ee1b0ce 100644
--- a/addons/website_sale_slides/data/sale_order_demo.xml
+++ b/addons/website_sale_slides/data/sale_order_demo.xml
@@ -38,6 +38,14 @@
         <field name="state">sale</field>
     </record>
     <record id="sale_order_course_2_line_1" model="sale.order.line">
+        <field name="order_id" ref="sale_order_course_2"/>
+        <field name="name" model="sale.order.line" eval="obj().env.ref('website_sale_slides.product_course_channel_1').get_product_multiline_description_sale()"/>
+        <field name="product_id" ref="website_sale_slides.product_course_channel_1"/>
+        <field name="product_uom_qty">1</field>
+        <field name="product_uom" ref="uom.product_uom_unit"/>
+        <field name="price_unit">150.0</field>
+    </record>
+    <record id="sale_order_course_2_line_2" model="sale.order.line">
         <field name="order_id" ref="sale_order_course_2"/>
         <field name="name" model="sale.order.line" eval="obj().env.ref('website_sale_slides.product_course_channel_6').get_product_multiline_description_sale()"/>
         <field name="product_id" ref="website_sale_slides.product_course_channel_6"/>
diff --git a/addons/website_sale_slides/static/src/js/slides_course_join.js b/addons/website_sale_slides/static/src/js/slides_course_join.js
new file mode 100644
index 00000000000..22ebe96da3e
--- /dev/null
+++ b/addons/website_sale_slides/static/src/js/slides_course_join.js
@@ -0,0 +1,43 @@
+odoo.define('website_sale_slides.course.join.widget', function (require) {
+"use strict";
+
+var CourseJoinWidget = require('website_slides.course.join.widget').courseJoinWidget;
+
+CourseJoinWidget.include({
+    xmlDependencies: (CourseJoinWidget.prototype.xmlDependencies || []).concat(
+        ["/website_sale_slides/static/src/xml/slide_course_join.xml"]
+    ),
+    init: function (parent, options) {
+        this._super.apply(this, arguments);
+        this.productId = options.channel.productId || false;
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * When the user joins the course, if it's set as "on payment" and the user is logged in,
+     * we redirect to the shop page for this course.
+     *
+     * @param {MouseEvent} ev
+     * @override
+     * @private
+     */
+    _onClickJoin: function (ev) {
+        ev.preventDefault();
+
+        if (this.channel.channelEnroll === 'payment' && !this.publicUser) {
+            var shopUrl = _.str.sprintf('/shop/cart/update?product_id=%s&amp;express=1', this.productId);
+            this.beforeJoin().then(function () {
+                window.location.href = shopUrl;
+            });
+        } else {
+            this._super.apply(this, arguments);
+        }
+    },
+});
+
+return CourseJoinWidget;
+
+});
diff --git a/addons/website_sale_slides/static/src/js/slides_course_quiz.js b/addons/website_sale_slides/static/src/js/slides_course_quiz.js
index 1e601acc7a7..3922a631a30 100644
--- a/addons/website_sale_slides/static/src/js/slides_course_quiz.js
+++ b/addons/website_sale_slides/static/src/js/slides_course_quiz.js
@@ -5,7 +5,7 @@ var sAnimations = require('website.content.snippets.animation');
 var Quiz = require('website_slides.quiz').Quiz;
 
 sAnimations.registry.websiteSlidesQuizNoFullscreen.include({
-    _extractChannelData: function (slideData){
+    _extractChannelData: function (slideData) {
         return _.extend({}, this._super.apply(this, arguments), {
             productId: slideData.productId,
             enroll: slideData.enroll,
diff --git a/addons/website_sale_slides/static/src/xml/slide_course_join.xml b/addons/website_sale_slides/static/src/xml/slide_course_join.xml
new file mode 100644
index 00000000000..404386d7c36
--- /dev/null
+++ b/addons/website_sale_slides/static/src/xml/slide_course_join.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-extend="slide.course.join">
+        <t t-jquery=".o_wslides_js_course_join_link" t-operation="append">
+            <t t-if="widget.channel.channelEnroll == 'payment'">
+                <t t-if="widget.publicUser">
+                    Sign in
+                </t>
+                <t t-else="">
+                    Buy course
+                </t>
+            </t>
+        </t>
+    </t>
+</templates>
diff --git a/addons/website_sale_slides/static/src/xml/website_sale_slides_quiz.xml b/addons/website_sale_slides/static/src/xml/website_sale_slides_quiz.xml
index 9392a8bff21..5a371469a49 100644
--- a/addons/website_sale_slides/static/src/xml/website_sale_slides_quiz.xml
+++ b/addons/website_sale_slides/static/src/xml/website_sale_slides_quiz.xml
@@ -1,43 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-extend="slide.slide.quiz.validation">
-        <t t-jquery="#validation" t-operation="append">
-            <div t-if="widget.readonly &amp;&amp; widget.publicUser &amp;&amp; widget.channel.channelEnroll == 'payment'" class="alert alert-info d-flex align-items-center justify-content-between">
-                <div>
-                    <b class="h5 mb-0">Sign in and buy the course to join it and take the quiz!</b>
-                    <span class="my-0 h4" style="line-height: 1">
-                        <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">
-                            + <t t-esc="widget.quiz.quizKarmaGain"/> XP
-                        </span>
-                    </span>
-                </div>
-                <div>
-                    <a t-att-href="'/web/login?redirect=' + widget.redirectURL" class="btn btn-primary font-weight-bold text-uppercase">Sign in</a>
-                    <span t-if="widget.channel.signupAllowed" class="d-block mt-2">Don't have an account ? <a class="font-weight-bold" t-att-href="'/web/signup?redirect=' + widget.url">Sign Up !</a></span>
-                </div>
-            </div>
-            <div t-if="widget.readonly &amp;&amp; !widget.publicUser &amp;&amp; widget.channel.channelEnroll == 'payment'" class="card col-md-3">
-                <div class="card-body d-flex flex-column align-items-center">
-                    <a role="button"
-                        class="btn btn-primary btn-block o_wslides_js_course_join_link d-block mb-2"
-                        title="Start Course" aria-label="Start Course Channel"
-                        t-attf-href="/shop/cart/update?product_id=#{widget.channel.productId}&amp;express=1"
-                        t-att-data-channel-id="widget.slide.channelId">
-                        <span class="text-white text-uppercase font-weight-bold">
-                            Buy the course
-                        </span>
-                    </a>
-                    <div class="text-center">
-                        <del t-if="widget.channel.hasDiscountedPrice"
-                            class="text-600 text-nowrap oe_default_price d-inline"
-                            t-esc="widget.channel.listPrice"/>
-                        <span class="oe_price font-weight-bold text-nowrap h3 my-2"
-                            t-esc="widget.channel.price"/>
-                        <span t-if="widget.channel.currencySymbol" class="text-nowrap font-weight-bold h3 my-2" itemprop="priceCurrency" t-esc="widget.channel.currencySymbol"/>
-                        <span t-else="" class="text-nowrap ml-1" itemprop="priceCurrency" t-esc="widget.channel.currencyName"/>
-                    </div>
-                </div>
-            </div>
+        <t t-jquery=".o_wslides_quiz_join_course_message" t-operation="append">
+            <span t-if="widget.channel.channelEnroll == 'payment'">
+                <t t-if="widget.publicUser">
+                    Sign in and buy the course to take the quiz
+                </t>
+                <t t-else="">
+                    To validate your answers, buy the course!
+                </t>
+            </span>
         </t>
     </t>
 </templates>
diff --git a/addons/website_sale_slides/views/assets.xml b/addons/website_sale_slides/views/assets.xml
index 65b544695e0..0aad00a5ae1 100644
--- a/addons/website_sale_slides/views/assets.xml
+++ b/addons/website_sale_slides/views/assets.xml
@@ -4,6 +4,7 @@
         <template id="assets_frontend" inherit_id="website.assets_frontend" name="Buy course on quiz">
             <xpath expr="//script[last()]" position="after">
                 <script type="text/javascript" src="/website_sale_slides/static/src/js/slides_course_quiz.js"/>
+                <script type="text/javascript" src="/website_sale_slides/static/src/js/slides_course_join.js"/>
                 <script type="text/javascript" src="/website_sale_slides/static/src/js/slides_course_unsubscribe.js"/>
             </xpath>
         </template>
diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index d6bb401c7e2..fb2ce65a55c 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -138,6 +138,10 @@ class WebsiteSlides(WebsiteProfile):
                 } for answer in question.sudo().answer_ids],
             } for question in slide.question_ids]
         }
+        if 'slide_answer_quiz' in request.session:
+            slide_answer_quiz = json.loads(request.session['slide_answer_quiz'])
+            if str(slide.id) in slide_answer_quiz:
+                values['session_answers'] = slide_answer_quiz[str(slide.id)]
         values.update(self._get_slide_quiz_partner_info(slide))
         return values
 
@@ -239,6 +243,22 @@ class WebsiteSlides(WebsiteProfile):
             domain = expression.AND([domain, [('partner_ids', '=', request.env.user.partner_id.id)]])
         return domain
 
+    def _channel_remove_session_answers(self, channel, slide=False):
+        """ Will remove the answers saved in the session for a specific channel / slide. """
+
+        if 'slide_answer_quiz' not in request.session:
+            return
+
+        slides_domain = [('channel_id', '=', channel.id)]
+        if slide:
+            slides_domain = expression.AND([slides_domain, [('id', '=', slide.id)]])
+        slides = request.env['slide.slide'].search_read(slides_domain, ['id'])
+
+        session_slide_answer_quiz = json.loads(request.session['slide_answer_quiz'])
+        for slide in slides:
+            session_slide_answer_quiz.pop(str(slide['id']), None)
+        request.session['slide_answer_quiz'] = json.dumps(session_slide_answer_quiz)
+
     # --------------------------------------------------
     # SLIDE.CHANNEL MAIN / SEARCH
     # --------------------------------------------------
@@ -538,7 +558,9 @@ class WebsiteSlides(WebsiteProfile):
 
     @http.route(['/slides/channel/leave'], type='json', auth='user', website=True)
     def slide_channel_leave(self, channel_id):
-        request.env['slide.channel'].browse(channel_id)._remove_membership(request.env.user.partner_id.ids)
+        channel = request.env['slide.channel'].browse(channel_id)
+        channel._remove_membership(request.env.user.partner_id.ids)
+        self._channel_remove_session_answers(channel)
         return True
 
     @http.route(['/slides/channel/tag/search_read'], type='json', auth='user', methods=['POST'], website=True)
@@ -782,7 +804,7 @@ class WebsiteSlides(WebsiteProfile):
         return result
 
     # --------------------------------------------------
-    # QUIZZ SECTION
+    # QUIZ SECTION
     # --------------------------------------------------
 
     @http.route('/slides/slide/quiz/question_add_or_update', type='json', methods=['POST'], auth='user', website=True)
@@ -865,6 +887,7 @@ class WebsiteSlides(WebsiteProfile):
         slide = fetch_res['slide']
 
         if slide.user_membership_id.sudo().completed:
+            self._channel_remove_session_answers(slide.channel_id, slide)
             return {'error': 'slide_quiz_done'}
 
         all_questions = request.env['slide.question'].sudo().search([('slide_id', '=', slide.id)])
@@ -889,6 +912,7 @@ class WebsiteSlides(WebsiteProfile):
                 'last_rank': not request.env.user._get_next_rank(),
                 'level_up': rank_progress['previous_rank']['lower_bound'] != rank_progress['new_rank']['lower_bound']
             })
+        self._channel_remove_session_answers(slide.channel_id, slide)
         return {
             'answers': {
                 answer.question_id.id: {
@@ -904,6 +928,13 @@ class WebsiteSlides(WebsiteProfile):
             'rankProgress': rank_progress,
         }
 
+    @http.route(['/slides/slide/quiz/save_to_session'], type='json', auth='public', website=True)
+    def slide_quiz_save_to_session(self, quiz_answers):
+        session_slide_answer_quiz = json.loads(request.session.get('slide_answer_quiz', '{}'))
+        slide_id = quiz_answers['slide_id']
+        session_slide_answer_quiz[str(slide_id)] = quiz_answers['slide_answers']
+        request.session['slide_answer_quiz'] = json.dumps(session_slide_answer_quiz)
+
     def _get_rank_values(self, user):
         lower_bound = user.rank_id.karma_min or 0
         next_rank = user._get_next_rank()
diff --git a/addons/website_slides/data/slide_slide_demo.xml b/addons/website_slides/data/slide_slide_demo.xml
index e4761ec3d1c..fa19dff58f1 100644
--- a/addons/website_slides/data/slide_slide_demo.xml
+++ b/addons/website_slides/data/slide_slide_demo.xml
@@ -75,7 +75,7 @@
         <field name="channel_id" ref="website_slides.slide_channel_demo_0_gard_0"/>
         <field name="is_published" eval="True"/>
         <field name="date_published" eval="datetime.now() - timedelta(days=8)"/>
-        <field name="is_preview" eval="False"/>
+        <field name="is_preview" eval="True"/>
         <field name="public_views">0</field>
         <field name="completion_time">1</field>
         <field name="description">Show your newly mastered knowledge !</field>
@@ -126,7 +126,6 @@
             <field name="question_id" ref="slide_slide_demo_0_4_question_1"/>
         </record>
 
-
     <!-- CHANNEL 1: Taking care of Trees -->
     <!-- ================================================== -->
 
diff --git a/addons/website_slides/static/src/js/slides_course_join.js b/addons/website_slides/static/src/js/slides_course_join.js
index 1e753b967f6..0817f372c31 100644
--- a/addons/website_slides/static/src/js/slides_course_join.js
+++ b/addons/website_slides/static/src/js/slides_course_join.js
@@ -3,26 +3,85 @@ odoo.define('website_slides.course.join.widget', function (require) {
 
 var core = require('web.core');
 var publicWidget = require('web.public.widget');
-require('website_slides.slides');
 
 var _t = core._t;
 
 var CourseJoinWidget = publicWidget.Widget.extend({
     template: 'slide.course.join',
-    xmlDependencies: ['/website_slides/static/src/xml/channel_management.xml'],
+    xmlDependencies: ['/website_slides/static/src/xml/slide_course_join.xml'],
     events: {
         'click .o_wslides_js_course_join_link': '_onClickJoin',
     },
 
-    init: function (parent, channelId){
-        this.channelId = channelId;
-        return this._super.apply(this, arguments);
+    /**
+     *
+     * Overridden to add options parameters.
+     *
+     * @param {Object} parent
+     * @param {Object} options
+     * @param {Object} options.channel slide.channel information
+     * @param {boolean} options.isMember whether current user is member or not
+     * @param {boolean} options.publicUser whether current user is public or not
+     * @param {string} [options.joinMessage] the message to use for the simple join case
+     *   when the course if free and the user is logged in, defaults to "Join Course".
+     * @param {Promise} [options.beforeJoin] a promise to execute before we redirect to
+     *   another url within the join process (login / buy course / ...)
+     * @param {function} [options.afterJoin] a callback function called after the user has
+     *   joined the course
+     */
+    init: function (parent, options) {
+        this._super.apply(this, arguments);
+        this.channel = options.channel;
+        this.isMember = options.isMember;
+        this.publicUser = options.publicUser;
+        this.joinMessage = options.joinMessage || _t('Join Course'),
+        this.beforeJoin = options.beforeJoin || Promise.resolve();
+        this.afterJoin = options.afterJoin || function () {document.location.reload();};
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickJoin: function (ev) {
+        ev.preventDefault();
+
+        if (this.channel.channelEnroll !== 'invite') {
+            if (this.publicUser) {
+                this.beforeJoin().then(this._redirectToLogin.bind(this));
+            } else if (!this.isMember && this.channel.channelEnroll === 'public') {
+                this.joinChannel(this.channel.channelId);
+            }
+        }
     },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * Builds a login page that then redirects to this slide page, or the channel if the course
+     * is not configured as public enroll type.
+     *
+     * @private
+     */
+    _redirectToLogin: function () {
+        var url;
+        if (this.channel.channelEnroll === 'public') {
+            url = window.location.pathname;
+            if (document.location.href.indexOf("fullscreen") !== -1) {
+                url += '?fullscreen=1';
+            }
+        } else {
+            url = `/slides/${this.channel.channelId}`;
+        }
+        document.location = _.str.sprintf('/web/login?redirect=%s', encodeURIComponent(url));
+    },
+
     /**
      * @private
      * @param {Object} $el
@@ -41,14 +100,13 @@ var CourseJoinWidget = publicWidget.Widget.extend({
     },
 
     //--------------------------------------------------------------------------
-    // Handlers
+    // Public
     //--------------------------------------------------------------------------
-
     /**
-     * @private
+     * @public
+     * @param {integer} channelId
      */
-    _onClickJoin: function (event) {
-        var channelId = this.channelId || $(event.currentTarget).data('channel-id');
+    joinChannel: function (channelId) {
         var self = this;
         this._rpc({
             route: '/slides/channel/join',
@@ -56,8 +114,8 @@ var CourseJoinWidget = publicWidget.Widget.extend({
                 channel_id: channelId,
             },
         }).then(function (data) {
-            if (! data.error) {
-                location.reload();
+            if (!data.error) {
+                self.afterJoin();
             } else {
                 if (data.error === 'public_user') {
                     var message = _t('Please <a href="/web/login?redirect=%s">login</a> to join this course');
@@ -86,14 +144,15 @@ publicWidget.registry.websiteSlidesCourseJoin = publicWidget.Widget.extend({
     start: function () {
         var self = this;
         var proms = [this._super.apply(this, arguments)];
+        var data = self.$el.data();
+        var options = {channel: {channelEnroll: data.channelEnroll, channelId: data.channelId}};
         $('.o_wslides_js_course_join').each(function () {
-            proms.push(new CourseJoinWidget(self).attachTo($(this)));
+            proms.push(new CourseJoinWidget(self, options).attachTo($(this)));
         });
         return Promise.all(proms);
     },
 });
 
-
 return {
     courseJoinWidget: CourseJoinWidget,
     websiteSlidesCourseJoin: publicWidget.registry.websiteSlidesCourseJoin
diff --git a/addons/website_slides/static/src/js/slides_course_quiz.js b/addons/website_slides/static/src/js/slides_course_quiz.js
index 1d3942986ca..50ac2a3cef1 100644
--- a/addons/website_slides/static/src/js/slides_course_quiz.js
+++ b/addons/website_slides/static/src/js/slides_course_quiz.js
@@ -24,12 +24,12 @@ odoo.define('website_slides.quiz', function (require) {
      * - slide_go_next: need to go to the next slide, when quiz is done. Event data contains the current slide id.
      * - quiz_completed: when the quiz is passed and completed by the user. Event data contains current slide data.
      */
-    var Quiz= publicWidget.Widget.extend({
+    var Quiz = publicWidget.Widget.extend({
         template: 'slide.slide.quiz',
         xmlDependencies: ['/website_slides/static/src/xml/slide_quiz.xml'],
         events: {
             "click .o_wslides_quiz_answer": '_onAnswerClick',
-            "click .o_wslides_js_lesson_quiz_submit": '_onSubmitQuiz',
+            "click .o_wslides_js_lesson_quiz_submit": '_submitQuiz',
             "click .o_wslides_quiz_modal_btn": '_onClickNext',
             "click .o_wslides_quiz_continue": '_onClickNext',
             "click .o_wslides_js_lesson_quiz_reset": '_onClickReset',
@@ -48,27 +48,27 @@ odoo.define('website_slides.quiz', function (require) {
         /**
         * @override
         * @param {Object} parent
-        * @param {Object} slide_data holding all the classic slide informations
+        * @param {Object} slide_data holding all the classic slide information
         * @param {Object} quiz_data : optional quiz data to display. If not given, will be fetched. (questions and answers).
         */
         init: function (parent, slide_data, channel_data, quiz_data) {
+            this._super.apply(this, arguments);
             this.slide = _.defaults(slide_data, {
                 id: 0,
                 name: '',
                 hasNext: false,
                 completed: false,
-                readonly: false,
+                isMember: false,
             });
             this.quiz = quiz_data || false;
             if (this.quiz) {
                 this.quiz.questionsCount = quiz_data.questions.length;
             }
-            this.readonly = slide_data.readonly || false;
+            this.isMember = slide_data.isMember || false;
             this.publicUser = session.is_website_user;
             this.userId = session.user_id;
             this.redirectURL = encodeURIComponent(document.URL);
             this.channel = channel_data;
-            return this._super.apply(this, arguments);
         },
 
         /**
@@ -83,15 +83,25 @@ odoo.define('website_slides.quiz', function (require) {
         },
 
         /**
+         * Overridden to add custom rendering behavior upon start of the widget.
+         *
+         * If the user has answered the quiz before having joined the course, we check
+         * his answers (saved into his session) here as well.
+         *
          * @override
          */
-        start: function() {
+        start: function () {
             var self = this;
             return this._super.apply(this, arguments).then(function ()  {
                 self._renderValidationInfo();
                 self._bindSortable();
                 self._checkLocationHref();
-                new CourseJoinWidget(self, self.channel.channelId).appendTo(self.$('.o_wslides_course_join_widget'));
+                if (!self.isMember) {
+                    self._renderJoinWidget();
+                } else if (self.slide.sessionAnswers) {
+                    self._applySessionAnswers();
+                    self._submitQuiz();
+                }
             });
         },
 
@@ -99,20 +109,19 @@ odoo.define('website_slides.quiz', function (require) {
         // Private
         //--------------------------------------------------------------------------
 
-        _alertShow: function (alert_code) {
+        _alertShow: function (alertCode) {
             var message = _t('There was an error validating this quiz.');
-            if (! alert_code || alert_code === 'slide_quiz_incomplete') {
+            if (alertCode === 'slide_quiz_incomplete') {
                 message = _t('All questions must be answered !');
-            }
-            else if (alert_code === 'slide_quiz_done') {
+            } else if (alertCode === 'slide_quiz_done') {
                 message = _t('This quiz is already done. Retaking it is not possible.');
-            }
-            else if (alert_code === 'public_user') {
+            } else if (alertCode === 'public_user') {
                 message = _t('You must be logged to submit the quiz.');
             }
+
             this.displayNotification({
                 type: 'warning',
-                title: _t('Something went wrong'),
+                title: _t('Quiz validation error'),
                 message: message,
                 sticky: true
             });
@@ -122,7 +131,7 @@ odoo.define('website_slides.quiz', function (require) {
          * Allows to reorder the questions
          * @private
          */
-        _bindSortable: function() {
+        _bindSortable: function () {
             this.$el.sortable({
                 handle: '.o_wslides_js_quiz_sequence_handler',
                 items: '.o_wslides_js_lesson_quiz_question',
@@ -168,7 +177,6 @@ odoo.define('website_slides.quiz', function (require) {
                 }
             }).then(this._modifyQuestionsSequence.bind(this))
         },
-
         /*
          * @private
          * Fetch the quiz for a particular slide
@@ -209,14 +217,15 @@ odoo.define('website_slides.quiz', function (require) {
             var self = this;
             this.$('.o_wslides_js_lesson_quiz_question').addClass('completed-disabled');
             this.$('input[type=radio]').each(function () {
-                $(this).prop('disabled', self.slide.readonly || self.slide.completed);
+                $(this).prop('disabled', self.slide.completed);
             });
         },
 
         /**
+         * Decorate the answer inputs according to the correction and adds the answer comment if
+         * any.
+         *
          * @private
-         * Decorate the answer inputs according to the correction
-         * and adds the answer comment if any
          */
         _renderAnswersHighlightingAndComments: function () {
             var self = this;
@@ -224,22 +233,20 @@ odoo.define('website_slides.quiz', function (require) {
                 var $question = $(this);
                 var questionId = $question.data('questionId');
                 var isCorrect = self.quiz.answers[questionId].is_correct;
-                $question.find('a.o_wslides_quiz_answer ').each(function () {
+                $question.find('a.o_wslides_quiz_answer').each(function () {
                     var $answer = $(this);
+                    $answer.find('i.fa').addClass('d-none');
                     if ($answer.find('input[type=radio]')[0].checked) {
                         if (isCorrect) {
                             $answer.removeClass('list-group-item-danger').addClass('list-group-item-success');
-                            $answer.find('i.fa').addClass('d-none');
                             $answer.find('i.fa-check-circle').removeClass('d-none');
                         } else {
                             $answer.removeClass('list-group-item-success').addClass('list-group-item-danger');
-                            $answer.find('i.fa').addClass('d-none');
                             $answer.find('i.fa-times-circle').removeClass('d-none');
                             $answer.find('label input').prop('checked', false);
                         }
                     } else {
                         $answer.removeClass('list-group-item-danger list-group-item-success');
-                        $answer.find('i.fa').addClass('d-none');
                         $answer.find('i.fa-circle').removeClass('d-none');
                     }
                 });
@@ -251,6 +258,30 @@ odoo.define('website_slides.quiz', function (require) {
             });
         },
 
+        /**
+         * Will check if we have answers coming from the session and re-apply them.
+         */
+        _applySessionAnswers: function () {
+            if (!this.slide.sessionAnswers || this.slide.sessionAnswers.length === 0) {
+                return;
+            }
+
+            var self = this;
+            this.$('.o_wslides_js_lesson_quiz_question').each(function () {
+                var $question = $(this);
+                $question.find('a.o_wslides_quiz_answer').each(function () {
+                    var $answer = $(this);
+                    if (!$answer.find('input[type=radio]')[0].checked &&
+                        _.contains(self.slide.sessionAnswers, $answer.data('answerId'))) {
+                        $answer.find('input[type=radio]').prop('checked', true);
+                    }
+                });
+            });
+
+            // reset answers coming from the session
+            this.slide.sessionAnswers = false;
+        },
+
         /*
          * @private
          * Update validation box (karma, buttons) according to widget state
@@ -261,20 +292,61 @@ odoo.define('website_slides.quiz', function (require) {
                 QWeb.render('slide.slide.quiz.validation', {'widget': this})
             );
         },
-        /*
-         * Submit the given answer, and display the result
+
+        /**
+         * Renders the button to join a course.
+         * If the user is logged in, the course is public, and the user has previously tried to
+         * submit answers, we automatically attempt to join the course.
          *
-         * @param Array checkedAnswerIds: list of checked answers
+         * @private
          */
-        _submitQuiz: function (checkedAnswerIds) {
+        _renderJoinWidget: function () {
+            var $widgetLocation = this.$(".o_wslides_join_course_widget");
+            if ($widgetLocation.length !== 0) {
+                var courseJoinWidget = new CourseJoinWidget(this, {
+                    isQuiz: true,
+                    channel: this.channel,
+                    isMember: this.isMember,
+                    publicUser: this.publicUser,
+                    beforeJoin: this._saveQuizAnswersToSession.bind(this),
+                    afterJoin: this._afterJoin.bind(this),
+                    joinMessage: _t('Join & Submit'),
+                });
+
+                courseJoinWidget.appendTo($widgetLocation);
+                if (!this.publicUser && courseJoinWidget.channel.channelEnroll === 'public' && this.slide.sessionAnswers) {
+                    courseJoinWidget.joinChannel(this.channel.channelId);
+                }
+            }
+        },
+
+        /**
+         * Get the quiz answers filled in by the User
+         *
+         * @private
+         */
+        _getQuizAnswers: function () {
+            return this.$('input[type=radio]:checked').map(function (index, element) {
+                return parseInt($(element).val());
+            }).get();
+        },
+
+        /**
+         * Submit a quiz and get the correction. It will display messages
+         * according to quiz result.
+         *
+         * @private
+         */
+        _submitQuiz: function () {
             var self = this;
+
             return this._rpc({
                 route: '/slides/slide/quiz/submit',
                 params: {
                     slide_id: self.slide.id,
-                    answer_ids: checkedAnswerIds,
+                    answer_ids: this._getQuizAnswers(),
                 }
-            }).then(function(data){
+            }).then(function (data) {
                 if (data.error) {
                     self._alertShow(data.error);
                 } else {
@@ -326,7 +398,7 @@ odoo.define('website_slides.quiz', function (require) {
          * it goes straight to the 'Add Quiz' button and clicks on it.
          * @private
          */
-        _checkLocationHref: function() {
+        _checkLocationHref: function () {
             if (window.location.href.includes('quiz_quick_create')) {
                 this._onCreateQuizClick();
             }
@@ -344,10 +416,11 @@ odoo.define('website_slides.quiz', function (require) {
          */
         _onAnswerClick: function (ev) {
             ev.preventDefault();
-            if (! this.slide.readonly && ! this.slide.completed) {
+            if (!this.slide.completed) {
                 $(ev.currentTarget).find('input[type=radio]').prop('checked', true);
             }
         },
+
         /**
          * Triggering a event to switch to next slide
          *
@@ -359,6 +432,7 @@ odoo.define('website_slides.quiz', function (require) {
                 this.trigger_up('slide_go_next');
             }
         },
+
         /**
          * Resets the completion of the slide so the user can take
          * the quiz again
@@ -371,30 +445,42 @@ odoo.define('website_slides.quiz', function (require) {
                 params: {
                     slide_id: this.slide.id
                 }
-            }).then(function() {
+            }).then(function () {
                 window.location.reload();
             });
         },
         /**
-         * Submit a quiz and get the correction. It will display messages
-         * according to quiz result.
+         * Saves the answers from the user and redirect the user to the
+         * specified url
          *
          * @private
-         * @param OdooEvent ev
          */
-        _onSubmitQuiz: function (ev) {
-            var inputs = this.$('input[type=radio]:checked');
-            var values = [];
-            for (var i = 0; i < inputs.length; i++){
-                values.push(parseInt($(inputs[i]).val()));
-            }
-
-            if (values.length === this.quiz.questionsCount){
-                this._submitQuiz(values);
+        _saveQuizAnswersToSession: function () {
+            var quizAnswers = this._getQuizAnswers();
+            if (quizAnswers.length === this.quiz.questions.length) {
+                return this._rpc({
+                    route: '/slides/slide/quiz/save_to_session',
+                    params: {
+                        'quiz_answers': {'slide_id': this.slide.id, 'slide_answers': quizAnswers},
+                    }
+                });
             } else {
-                this._alertShow();
+                this._alertShow('slide_quiz_incomplete');
+                return Promise.reject('The quiz is incomplete');
             }
         },
+        /**
+        * After joining the course, we immediately submit the quiz and get the correction.
+        * This allows a smooth onboarding when the user is logged in and the course is public.
+        *
+        * @private
+        */
+       _afterJoin: function () {
+            this.isMember = true;
+            this._renderValidationInfo();
+            this._applySessionAnswers();
+            this._submitQuiz();
+       },
 
         /**
          * When clicking on 'Add a Question' or 'Add Quiz' it
@@ -510,7 +596,7 @@ odoo.define('website_slides.quiz', function (require) {
          * @param event
          * @private
          */
-        _deleteQuestion: function(event) {
+        _deleteQuestion: function (event) {
             var questionId = event.data.questionId;
             this.$('.o_wslides_js_lesson_quiz_question[data-question-id=' + questionId + ']').remove();
             this.quiz.questionsCount--;
@@ -571,7 +657,6 @@ odoo.define('website_slides.quiz', function (require) {
                 self.close();
             });
         }
-
     });
 
     publicWidget.registry.websiteSlidesQuizNoFullscreen = publicWidget.Widget.extend({
@@ -598,6 +683,7 @@ odoo.define('website_slides.quiz', function (require) {
                 var channelData = self._extractChannelData(slideData);
                 slideData.quizData = {
                     questions: self._extractQuestionsAndAnswers(),
+                    sessionAnswers: slideData.sessionAnswers || [],
                     quizKarmaMax: slideData.quizKarmaMax,
                     quizKarmaWon: slideData.quizKarmaWon,
                     quizKarmaGain: slideData.quizKarmaGain,
@@ -612,11 +698,10 @@ odoo.define('website_slides.quiz', function (require) {
         // Handlers
         //---------------------------------------------------------------------
         _onQuizCompleted: function (ev) {
-            var self = this;
             var slide = ev.data.slide;
             var completion = ev.data.completion;
             this.$('#o_wslides_lesson_aside_slide_check_' + slide.id).addClass('text-success fa-check').removeClass('text-600 fa-circle-o');
-            // need to use global selector as progress bar is ouside this animation widget scope
+            // need to use global selector as progress bar is outside this animation widget scope
             $('.o_wslides_lesson_header .progress-bar').css('width', completion + "%");
             $('.o_wslides_lesson_header .progress span').text(_.str.sprintf("%s %%", completion));
         },
@@ -629,7 +714,7 @@ odoo.define('website_slides.quiz', function (require) {
         // Private
         //---------------------------------------------------------------------
 
-        _extractChannelData: function (slideData){
+        _extractChannelData: function (slideData) {
             return {
                 channelId: slideData.channelId,
                 channelEnroll: slideData.channelEnroll,
@@ -644,7 +729,7 @@ odoo.define('website_slides.quiz', function (require) {
          *
          * @return {Array<Object>} list of questions with answers
          */
-        _extractQuestionsAndAnswers: function() {
+        _extractQuestionsAndAnswers: function () {
             var questions = [];
             this.$('.o_wslides_js_lesson_quiz_question').each(function () {
                 var $question = $(this);
diff --git a/addons/website_slides/static/src/xml/channel_management.xml b/addons/website_slides/static/src/xml/channel_management.xml
deleted file mode 100644
index a616cc1baa1..00000000000
--- a/addons/website_slides/static/src/xml/channel_management.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<templates>
-    <t t-name="slide.course.join">
-        <div class="p-0 col-md-2">
-            <a role="button"
-                class="btn btn-primary btn-block o_wslides_js_course_join_link text-uppercase font-weight-bold"
-                title="Start Course" aria-label="Start Course Channel"
-                href="#">
-                <span class="cta-title text_small_caps">Join Course</span>
-            </a>
-        </div>
-    </t>
-</templates>
diff --git a/addons/website_slides/static/src/xml/slide_course_join.xml b/addons/website_slides/static/src/xml/slide_course_join.xml
new file mode 100644
index 00000000000..5c890cd027d
--- /dev/null
+++ b/addons/website_slides/static/src/xml/slide_course_join.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="slide.course.join">
+        <div>
+            <a role="button"
+                class="btn btn-primary o_wslides_js_course_join_link text-uppercase font-weight-bold"
+                title="Join the Course" aria-label="Join the Course"
+                href="#">
+                <t t-if="widget.channel.channelEnroll == 'public'">
+                    <t t-if="widget.publicUser">
+                        Sign in
+                    </t>
+                    <t t-else="" t-esc="widget.joinMessage" />
+                </t>
+            </a>
+        </div>
+    </t>
+</templates>
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index 9cbf68fc760..e64bc96604e 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -5,7 +5,7 @@
             <div class="container">
 
                 <div t-foreach="widget.quiz.questions" t-as="question"
-                     t-attf-class="o_wslides_js_lesson_quiz_question mt-3 mb-4 #{widget.readonly ? 'disabled' : ''} #{widget.slide.completed ? 'completed-disabled' : ''}"
+                     t-attf-class="o_wslides_js_lesson_quiz_question mt-3 mb-4 #{widget.slide.completed ? 'completed-disabled' : ''}"
                      t-att-data-question-id="question.id" t-att-data-title="question.question">
                     <div class="h4">
                         <small class="text-muted"><span t-esc="question_index+1"/>. </small> <span t-esc="question.question"/>
@@ -14,7 +14,7 @@
                         <t t-foreach="question.answer_ids" t-as="answer">
                             <a t-att-data-answer-id="answer.id" href="#"
                                 t-att-data-text="answer.text_value"
-                                t-attf-class="o_wslides_quiz_answer list-group-item d-flex align-items-center #{widget.readonly ? 'disabled bg-transparent' : 'list-group-item-action'} #{widget.slide.completed  &amp;&amp; answer.is_correct ? 'list-group-item-success' : '' }">
+                                t-attf-class="o_wslides_quiz_answer list-group-item d-flex align-items-center list-group-item-action #{widget.slide.completed  &amp;&amp; answer.is_correct ? 'list-group-item-success' : '' }">
 
                                 <label class="my-0 d-flex align-items-center justify-content-center mr-2">
                                     <input type="radio"
@@ -44,27 +44,43 @@
 
     <t t-name="slide.slide.quiz.validation">
         <div id="validation">
-            <div t-if="widget.readonly &amp;&amp; !widget.publicUser &amp;&amp; widget.channel.channelEnroll == 'public'" class="o_wslides_course_join_widget">
-                <!-- Here comes the Join button rendered by the widget -->
-            </div>
-            <div t-if="widget.readonly &amp;&amp; widget.publicUser &amp;&amp; widget.channel.channelEnroll == 'public'" class="alert alert-info d-flex align-items-center justify-content-between">
-                <div>
-                    <b class="h5 mb-0">Sign in and join the course to take the quiz!</b>
-                    <span class="my-0 h4" style="line-height: 1">
-                        <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">
-                            + <t t-esc="widget.quiz.quizKarmaGain"/> XP
+            <div t-if="!widget.isMember">
+                <div class="o_wslides_join_course alert alert-info d-flex align-items-center justify-content-between">
+                    <div t-if="widget.channel.channelEnroll == 'invite'">
+                        <b class="h5 mb-0">
+                            <b>This course is private. <a href="/contactus" class="font-weight-bold">Contact the website administrator</a>  to enroll.</b>
+                        </b>
+                        <span class="my-0 h4">
+                            <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">
+                                + <t t-esc="widget.quiz.quizKarmaGain"/> XP
+                            </span>
                         </span>
-                    </span>
-                </div>
-                <div>
-                    <a t-att-href="'/web/login?redirect=' + widget.redirectURL" class="btn btn-primary font-weight-bold text-uppercase">Sign in</a>
-                    <span t-if="widget.channel.signupAllowed" class="d-block mt-2">Don't have an account ? <a class="font-weight-bold" t-att-href="'/web/signup?redirect=' + widget.url">Sign Up !</a></span>
+                    </div>
+                    <div t-else="" class="w-100">
+                        <b class="h5 mb-0 o_wslides_quiz_join_course_message">
+                            <span t-if="widget.channel.channelEnroll == 'public'">
+                                <t t-if="widget.publicUser">
+                                    Sign in and join the course to verify your answers!
+                                </t>
+                                <t t-else="">
+                                    Join the course to take the quiz and verify your answers!
+                                </t>
+                            </span>
+                        </b>
+                        <span class="my-0 h4">
+                            <span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">
+                                + <t t-esc="widget.quiz.quizKarmaGain"/> XP
+                            </span>
+                        </span>
+                        <div class="o_wslides_join_course_widget float-right"/>
+                    </div>
                 </div>
+                <span t-if="widget.publicUser &amp;&amp; widget.channel.signupAllowed" class="d-block mt-2">
+                    <span>Don't have an account ?</span>
+                    <a class="font-weight-bold" t-att-href="'/web/signup?redirect=' + widget.url">Sign Up !</a>
+                </span>
             </div>
-            <div t-if="widget.readonly &amp;&amp; widget.channel.channelEnroll == 'invite'" class="alert alert-info">
-                <b>This course is private. <a href="/contactus" class="font-weight-bold">Contact the website administrator</a>  to enroll.</b>
-            </div>
-            <div t-if="!widget.readonly" class="d-md-flex align-items-center justify-content-between">
+            <div t-else="" class="d-md-flex align-items-center justify-content-between">
                 <div t-att-class="'d-flex align-items-center' + (widget.slide.completed ? ' alert alert-success my-0 py-1 px-3' : '')">
                     <button t-if="! widget.slide.completed" role="button" title="Check answers" aria-label="Check answers"
                         class="btn btn-primary text-uppercase font-weight-bold o_wslides_js_lesson_quiz_submit">Check your answers</button>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 75396abceb0..bbdf666ea7e 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -287,7 +287,8 @@
                     class="btn btn-primary btn-block o_wslides_js_course_join_link"
                     title="Start Course" aria-label="Start Course Channel"
                     t-att-href="'#'"
-                    t-att-data-channel-id="channel.id">
+                    t-att-data-channel-id="channel.id"
+                    t-att-data-channel-enroll="channel.enroll">
                     <span class="cta-title text_small_caps">
                         <t t-if="channel.channel_type == 'documentation'">Start Course</t>
                         <t t-else="">Join Course</t>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 7ddaa1e97b3..f731efce192 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -442,7 +442,7 @@
         t-att-data-id="slide.id"
         t-att-data-name="slide.name"
         t-att-data-slide-type="slide.slide_type"
-        t-att-data-readonly="not slide.channel_id.is_member"
+        t-att-data-is-member="slide.channel_id.is_member"
         t-att-data-completed="1 if slide_completed else 0"
         t-att-data-quiz-attempts-count="quiz_attempts_count"
         t-att-data-quiz-karma-max="quiz_karma_max"
@@ -453,7 +453,8 @@
         t-att-data-channel-id="slide.channel_id.id"
         t-att-data-channel-enroll="slide.channel_id.enroll"
         t-att-data-channel-can-upload="slide.channel_id.can_upload"
-        t-att-data-signup-allowed="signup_allowed">
+        t-att-data-signup-allowed="signup_allowed"
+        t-att-data-session-answers="session_answers">
         <t t-foreach="slide_questions" t-as="question">
             <t t-call="website_slides.lesson_content_quiz_question"/>
         </t>
@@ -463,7 +464,7 @@
 </template>
 
 <template id="lesson_content_quiz_question" name="Lesson: Quiz question template">
-    <div t-att-class="'o_wslides_js_lesson_quiz_question mt-3 %s' % ('completed-disabled' if slide_completed else ('disabled' if not slide.channel_id.is_member else ''))"
+    <div t-att-class="'o_wslides_js_lesson_quiz_question mt-3 %s' % ('completed-disabled' if slide_completed else ('disabled' if not (slide.channel_id.is_member or slide.is_preview) else ''))"
          t-att-data-question-id="question['id']" t-att-data-title="question['question']" >
         <div class="row d-flex mb-2 mx-0">
             <div class="h4">
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index 1eb17f650a2..4069a88f7ad 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -10,7 +10,8 @@
         <div class="o_wslides_fs_main d-flex flex-column font-weight-light"
             t-att-data-channel-id="slide.channel_id.id"
             t-att-data-channel-enroll="slide.channel_id.enroll"
-            t-att-data-signup-allowed="signup_allowed">
+            t-att-data-signup-allowed="signup_allowed"
+            t-att-data-session-answers="session_answers">
 
             <div class="o_wslides_slide_fs_header d-flex flex-shrink-0 text-white">
                 <div class="d-flex">
@@ -97,8 +98,8 @@
                     t-att-data-is-quiz="0"
                     t-att-data-completed="1 if slide_completed else 0"
                     t-att-data-embed-code="slide.embed_code if slide.slide_type in ['video', 'document', 'presentation', 'infographic'] else False"
-                    t-att-data-readonly="not is_member"
-                    >
+                    t-att-data-is-member="is_member"
+                    t-att-data-session-answers="session_answers">
                     <span class="ml-3">
                         <i t-if="slide_completed and is_member" class="o_wslides_slide_completed fa fa-check fa-fw text-success" t-att-data-slide-id="slide.id"/>
                         <i t-if="not slide_completed and is_member" class="fa fa-circle-thin fa-fw" t-att-data-slide-id="slide.id"/>
@@ -147,7 +148,8 @@
                                 t-att-data-has-question="1 if slide.question_ids else 0"
                                 t-att-data-is-quiz="1"
                                 t-att-data-completed="1 if slide_completed else 0"
-                                t-att-data-readonly="not is_member">
+                                t-att-data-is-member="is_member"
+                                t-att-data-session-answers="session_answers">
                                 <a t-if="can_access" class="o_wslides_fs_slide_quiz" href="#" t-att-index="i">
                                     <i class="fa fa-flag-checkered text-warning mr-2"/>Quiz
                                 </a>