diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index 3a8d0165a52..a83df8a01cd 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -177,11 +177,11 @@ odoo.define('website_slides.fullscreen', function (require) {
          * Greens up the bullet when the slide is completed
          *
          * @public
-         * @param {*} slide_id
+         * @param {Integer} slideId
          */
         setSlideCompleted: function (slideId) {
             var $elem = this.$('.fa-circle-thin[data-slide-id="'+slideId+'"]');
-            $elem.removeClass('fa-circle-thin').addClass('fa-check-circle text-success');
+            $elem.removeClass('fa-circle-thin').addClass('fa-check-circle text-success bg-white o_wslides_slide_completed rounded-circle');
         },
         /**
          * Updates the progressbar whenever a lesson is completed
@@ -235,6 +235,8 @@ odoo.define('website_slides.fullscreen', function (require) {
          * @param {*} ev
          */
         _onClickTab: function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
             var $elem = $(ev.currentTarget);
             var isQuiz = $elem.data('isQuiz');
             var slideID = parseInt($elem.data('id'));
@@ -250,12 +252,8 @@ odoo.define('website_slides.fullscreen', function (require) {
         _onChangeCurrentSlide: function () {
             var slide = this.get('slideEntry');
             this.$('.o_wslides_fs_sidebar_list_item.active').removeClass('active');
-            var selector = '.o_wslides_fs_sidebar_list_item[data-id='+slide.id+']';
-            if (slide.isQuiz) {
-                selector += '[data-is-quiz="1"]';
-            } else {
-                selector += '[data-is-quiz!="1"]';
-            }
+            var selector = '.o_wslides_fs_sidebar_list_item[data-id='+slide.id+'][data-is-quiz!="1"]';
+
             this.$(selector).addClass('active');
             this.trigger_up('change_slide', this.get('slideEntry'));
         },
@@ -291,7 +289,6 @@ odoo.define('website_slides.fullscreen', function (require) {
         },
         custom_events: {
             'change_slide': '_onChangeSlideRequest',
-            'toggle_sidebar': '_onToggleSidebar',
             'slide_completed': '_onSlideCompleted',
             'quiz_completed': '_onSlideCompleted',
             'slide_go_next': '_onSlideGoToNext',
@@ -425,7 +422,6 @@ odoo.define('website_slides.fullscreen', function (require) {
             var slide = this.get('slide');
             var $content = this.$('.o_wslides_fs_content');
             $content.empty();
-            $content.removeClass('bg-white'); // webpage case
 
             // display quiz slide, or quiz attached to a slide
             if (slide.type === 'quiz' || slide.isQuiz) {
@@ -440,8 +436,9 @@ odoo.define('website_slides.fullscreen', function (require) {
                 this.videoPlayer = new VideoPlayer(this, slide);
                 return this.videoPlayer.appendTo($content);
             } else if (slide.type === 'webpage'){
-                $(slide.htmlContent).appendTo($content);
-                $content.addClass('bg-white');
+                var $wpContainer = $('<div>').addClass('o_wslide_fs_webpage_content bg-white block w-100 overflow-auto');
+                $(slide.htmlContent).appendTo($wpContainer);
+                $content.append($wpContainer);
             }
             return $.when();
         },
@@ -480,7 +477,7 @@ odoo.define('website_slides.fullscreen', function (require) {
          *
          * @private
          */
-        _onChangeSlide: function (){
+        _onChangeSlide: function () {
             var self = this;
             var slide = this.get('slide');
             return this._fetchSlideContent().then(function() { // update title and render content
@@ -534,8 +531,7 @@ odoo.define('website_slides.fullscreen', function (require) {
          */
         _onClickToggleSidebar: function (ev){
             ev.preventDefault();
-            this.$('.o_wslides_fs_sidebar').toggleClass('d-none');
-            this.$('.o_wslides_fs_content').toggleClass('col-10').toggleClass('col-12');
+            this.$('.o_wslides_fs_sidebar').toggleClass('o_wslides_fs_sidebar_hidden');
             this.$('.o_wslides_fs_toggle_sidebar').toggleClass('active');
         },
     });
diff --git a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
index 3868ad873cb..b377c7c3ca2 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -1,79 +1,126 @@
-$slides-bg-fullscreen: #313A44;
-$slides-bg-fullscreen-dark: darken($slides-bg-fullscreen,5%);
-$slides-bg-fullscreen-darker: darken($slides-bg-fullscreen,10%);
+$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
+$o-wslides-color-dark1: #47525f;
+$o-wslides-color-dark2: #1f262d;
+$o-wslides-color-dark3: #101216;
+$o-wslides-fs-side-width: 300px;
+
+$o-wslides-tabs-height: 36px;
 
-$slides-text: #8A8F93;
 
 .o_wslides_fs_main {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include o-position-absolute(0,0,0,0);
     z-index: 2000;
-    color: $slides-text;
 
     .o_wslides_slide_fs_header {
-        background-color: $slides-bg-fullscreen;
+        background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
+        padding-bottom: 3px;
         height: 50px;
-    }
 
-    .o_wslides_fs_container {
-        height: calc(100% - 50px);
-        background-color: $slides-bg-fullscreen;
-    }
+        > div > a {
+            background-color: rgba($o-wslides-color-dark3, 0.5);
+            @include o-hover-text-color(rgba(white, 0.8), white);
+            text-decoration: none!important;
 
-    .o_wslides_fs_sidebar {
-        transition: all .2s ease-in;
-        overflow: auto;
-
-        .o_wslides_fs_sidebar_header {
-            color: $slides-text;
-            .progress {
-                height: 5px;
+            + a {
+                margin-left: 1px;
             }
-        }
 
-        .o_wslides_fs_sidebar_section {
-            background-color: $slides-bg-fullscreen-dark;
-            border: none;
-            border-radius: 0;
+            &:hover {
+                background-color: rgba($o-wslides-color-dark3, 0.2);
+            }
 
-            .card-body {
-                color: $slides-text;
-            }
-        }
-
-        .o_wslides_fs_sidebar_list{
-            li:hover,
-            li.active {
-                cursor: pointer;
-                background-color: $slides-bg-fullscreen-darker;
-            }
-            li {
-                color: $slides-text;
-            }
-            li.active{
-                border-left: 2px solid $primary;
+            &.active{
+                background-color: transparent;
                 color: #fff;
             }
         }
     }
 
-    .o_wslides_fs_content {
-        background-color: $slides-bg-fullscreen-dark;
+    .o_wslides_fs_container {
+        background-color: $o-wslides-color-dark2;
     }
 
-    .o_wslides_fs_content_no_sidebar {
-        max-width: 100%;
-        width: 100%;
+    .o_wslides_fs_content {
+        transition: all .2s ease-in;
+    }
+
+    .o_wslides_fs_sidebar {
+        transition: all .2s ease-in;
+        background-image: linear-gradient(160deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
+        box-shadow: 5px 0 15px rgba(black, 0.2);
+        position: relative;
+
+        .o_wslides_fs_sidebar_content {
+            min-width: $o-wslides-fs-side-width;
+            transition: all .2s ease-in;
+        }
+
+        .o_wslides_fs_toggle_sidebar {
+            @include o-position-absolute(0, auto, 0, 100%);
+            width: 700px;
+            background: rgba(black, 0.2);
+        }
+
+        @include media-breakpoint-down (md) {
+            @include o-position-absolute(0, auto, 0, 0);
+
+            &.o_wslides_fs_sidebar_hidden {
+                display: none;
+            }
+        }
+
+        @include media-breakpoint-up (md) {
+            width: $o-wslides-fs-side-width;
+
+            &.o_wslides_fs_sidebar_hidden {
+                width: 0;
+
+                .o_wslides_fs_sidebar_content {
+                    transform: translateX(-100%);
+                }
+            }
+        }
+
+        a {
+            text-decoration: none !important;
+            @include o-hover-text-color(rgba(white, 0.8), white);
+        }
+
+        .o_wslides_fs_sidebar_section {
+            background-color: rgba($o-wslides-color-dark3, 0.3);
+        }
+
+        .o_wslides_fs_sidebar_section_slides li {
+            color: rgba(white, 0.8);
+            line-height: 1.3;
+
+            &.active {
+                box-shadow: inset 2px 0 0 theme-color('primary');
+                background-color: rgba($o-wslides-color-dark3, 0.5);
+
+                &, a {
+                    color: white;
+                }
+            }
+
+            i.o_wslides_slide_completed{
+                @include size(13px);
+                box-shadow: inset 0 0 0 1px theme-color('success');
+            }
+
+            .o_wslides_fs_slide_name {
+                line-height: 1;
+            }
+        }
     }
 
     // quizz
     .o_wslides_fs_quiz_container {
         background-color: $gray-200;
+        height: 100%;
         overflow: scroll;
         overflow-x: hidden;
+        width: 100%;
 
         .o_wslides_js_lesson_quiz_question {
             li {
@@ -100,9 +147,4 @@ $slides-text: #8A8F93;
             }
         }
     }
-
-    // Tools
-    .bg-brand {
-        background-color: $o-enterprise-color;
-    }
 }
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index bbe635a89fa..1a4814fd4ac 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -5,6 +5,10 @@ $MAX-Z-INDEX : 2147483647 !default;
 $gray-50: #f4f4f4 !default;
 $o-enterprise-radient-color: #62495B !default;
 
+.o_wslides_gradient {
+    background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
+}
+
 // Common to new slides pages
 // **************************************************
 
@@ -442,4 +446,4 @@ div.embed-responsive {
 // Upload Modal
 .o_wslides_select_type {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index 0af500914c5..c8b4bc66186 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -64,7 +64,7 @@
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-body d-flex p-0">
-                        <div class="w-50 bg-brand"></div>
+                        <div class="w-50 o_wslides_gradient"/>
                         <div class="w-50 d-flex flex-column p-3">
                             <h1>Amazing!</h1>
                             <div class="pb-3">
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 118a42aa4ac..59668760e8a 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -275,8 +275,8 @@
                     <t t-if="channel.is_member and channel.completed">
                         <span class="badge badge-pill badge-success pull-right py-1 px-2"><i class="fa fa-check"/> Completed</span>
                     </t>
-                    <div t-elif="channel.is_member" class="progress w-50" style="height: 4px;">
-                        <div class="progress-bar rounded" role="progressbar" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100" t-attf-style="width:#{channel.completion}%;"/>
+                    <div t-elif="channel.is_member" class="progress w-50" style="height: 6px">
+                        <div class="progress-bar" role="progressbar" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100" t-attf-style="width:#{channel.completion}%;"/>
                     </div>
                     <small t-else=""><b t-esc="channel.total_slides"/> steps</small>
                 </div>
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 43874d74224..97a4ae158e4 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -4,126 +4,133 @@
 <!-- Slide template for the fullscreen mode -->
 <template id="slide_fullscreen" name="Fullscreen">
     <t t-call="website.layout">
-        <div class="o_wslides_fs_main d-flex flex-column"
-            t-att-data-user-id="user.id"
-            t-att-data-course-name="slide.channel_id.name"
-            t-att-data-course-id="slide.channel_id.id"
-            t-att-data-course-slug="slug(slide.channel_id)"
-            t-att-data-slide-id="slide.id">
-            <div class="o_wslides_slide_fs_header d-flex w-100">
-                <a class="p-3 h-100 d-inline-block o_wslides_fs_toggle_sidebar active text-uppercase" href="#">
-                    <i class="fa fa-bars"/> Lessons
-                </a>
-                <a class="p-3 h-100 d-inline-block text-uppercase" t-attf-href="/slides/slide/#{slug(slide)}" target="new">
-                    <i class="fa fa-pencil"/> Write a review
-                </a>
-                <div class="p-3 h-100 d-inline-block o_wslides_fs_slide_title font-weight-bold">
-                    <t>
-                        <t t-call="website_slides.slide_icon">
-                            <t t-set="icon_class" t-value="'mr-2 text'"/>
-                        </t>
-                        <span class="o_wslides_fs_slide_title_span" t-esc="slide.name"/>
-                    </t>
+        <div class="o_wslides_fs_main d-flex flex-column font-weight-light">
+
+            <div class="o_wslides_slide_fs_header d-flex flex-shrink-0 text-white">
+                <div class="d-flex">
+                    <a class="o_wslides_fs_toggle_sidebar d-flex align-items-center px-3" href="#" title="Lessons">
+                        <i class="fa fa-bars"/><span class="d-none d-md-inline-block ml-1">Lessons</span>
+                    </a>
+                    <a class="o_wslides_fs_review d-flex align-items-center px-3" t-attf-href="/slides/slide/#{slug(slide)}" target="new" title="Reviews">
+                        <i class="fa fa-pencil"/><span class="d-none d-md-inline-block ml-1">Write a review</span>
+                    </a>
                 </div>
-                <div class="ml-auto p-3 text-uppercase">
-                    <a href="/slides/">Back to courses</a>
+                <div class="o_wslides_fs_slide_title flex-grow-1 d-flex align-items-center px-2 px-md-3">
+                    <t t-call="website_slides.slide_icon">
+                        <t t-set="icon_class" t-value="'mr-2 text'"/>
+                    </t>
+                    <span class="o_wslides_fs_slide_title_span" t-esc="slide.name"/>
+                </div>
+                <div class="d-flex">
+                    <a class="d-flex align-items-center px-3" t-attf-href="/slides/#{slug(slide.channel_id)}">
+                        <i class="fa fa-sign-out d-md-none"/><span class="d-none d-md-inline-block ml-1">Back to course</span>
+                    </a>
                 </div>
             </div>
-            <div class="o_wslides_fs_container d-flex flex-wrap">
-                <div class="col-2 o_wslides_fs_sidebar p-0">
-                    <div class="o_wslides_fs_sidebar_header mt-2 p-2">
-                        <a t-attf-href="/slides/#{slug(slide.channel_id)}">
-                            <span class="h3" t-field="slide.channel_id.name"/>
-                        </a>
-                        <div t-if="not is_public_user" class="mt-2">
-                            <div class="progress">
-                                <div class="progress-bar" role="progressbar" t-attf-style="width: #{slide.channel_id.completion}%" t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"></div>
+
+            <div class="o_wslides_fs_container d-flex position-relative overflow-hidden flex-grow-1">
+                <div class="o_wslides_fs_content align-items-stretch justify-content-center d-flex h-100 flex-grow-1 order-2"></div>
+
+                <div class="o_wslides_fs_sidebar text-white flex-shrink-0 order-1">
+                    <div class="o_wslides_fs_sidebar_content d-flex flex-column px-3 pt-3 h-100">
+                        <div class="o_wslides_fs_sidebar_header mb-3">
+                            <a class="h5 d-block mb-1" t-attf-href="/slides/#{slug(slide.channel_id)}">
+                                <span t-field="slide.channel_id.name"/>
+                            </a>
+                            <div t-if="not is_public_user" class="d-flex align-items-center">
+                                <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
+                                    <div class="progress-bar" role="progressbar" t-attf-style="width: #{slide.channel_id.completion}%" t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"></div>
+                                </div>
+                                <div class="ml-3 small">
+                                    <span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %
+                                </div>
                             </div>
-                            <span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %
                         </div>
-                    </div>
-                    <div class="o_wslides_fs_category mt-4">
-                        <t t-if="uncategorized_slides" t-call="website_slides.slide_fullscreen_sidebar_category">
-                            <t t-set="slides" t-value="uncategorized_slides"/>
-                            <t t-set="current_slide" t-value="slide"/>
-                        </t>
-                        <t t-foreach="slide.channel_id.category_ids" t-as="category">
-                            <t t-if="category.slide_ids">
-                                <t t-call="website_slides.slide_fullscreen_sidebar_category">
-                                    <t t-set="slides" t-value="category.slide_ids"/>
-                                    <t t-set="current_slide" t-value="slide"/>
+                        <ul class="mx-n3 list-unstyled my-0 pb-2 overflow-auto">
+                            <t t-if="uncategorized_slides" t-call="website_slides.slide_fullscreen_sidebar_category">
+                                <t t-set="slides" t-value="uncategorized_slides"/>
+                                <t t-set="current_slide" t-value="slide"/>
+                            </t>
+                            <t t-foreach="slide.channel_id.category_ids" t-as="category">
+                                <t t-if="category.slide_ids">
+                                    <t t-call="website_slides.slide_fullscreen_sidebar_category">
+                                        <t t-set="slides" t-value="category.slide_ids"/>
+                                        <t t-set="current_slide" t-value="slide"/>
+                                    </t>
                                 </t>
                             </t>
-                        </t>
+                        </ul>
                     </div>
+                    <a href="#" class="o_wslides_fs_toggle_sidebar d-lg-none bg-black-50"/>
                 </div>
-                <div class="col-10 o_wslides_fs_content p-0"></div>
             </div>
         </div>
     </t>
 </template>
 
+
 <template id="slide_fullscreen_sidebar_category" name="Slides category template for fullscreen view side bar">
-    <div class="card o_wslides_fs_sidebar_section mb-3" t-attf-id="category-collapse-#{category.id if category else 0}">
-        <div class="card-header" t-attf-id="#category-title-#{category.id if category else 0}" data-toggle="collapse" t-attf-data-target="#category-#{category.id if category else 0}" aria-expanded="true" t-attf-aria-controls="category-#{category.id if category else 0}">
+    <li class="o_wslides_fs_sidebar_section py-2 px-3 mb-2">
+        <a class="text-uppercase text-500 py-1 small d-block" t-attf-id="category-collapse-#{category.id if category else 0}" data-toggle="collapse" role="button" aria-expanded="true" t-att-href="('#collapse-%s') % (category.id if category else 0)" t-attf-aria-controls="collapse-#{category.id if category else 0}">
             <t t-if="category">
-                <span class="h6 text-uppercase" t-field="category.name"/>
+                <b t-field="category.name"/>
             </t>
             <t t-else="">
-                <span class="h6 text-uppercase">Uncategorized</span>
+                <b >Uncategorized</b>
             </t>
-        </div>
-        <div t-attf-id="category-#{category.id if category else 0}" class="collapse show" t-attf-aria-labelledby="#category-title-#{category.id if category else 0}" t-attf-data-parent="#category-collapse-#{category.id if category else 0}">
-          <div class="card-body p-0" style="background-color: transparent !important;"><!-- inline style as boostrap used !important property to force color on .card-body -->
-            <ul class="o_wslides_fs_sidebar_list list-group list-unstyled collapse show p-0 m-0" t-att-id="('collapse-%s') % (category.id if category else 0)" >
-                <t t-foreach="slides" t-as="slide">
-                    <t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
-                    <li t-att-class="'o_wslides_fs_sidebar_list_item d-flex p-1 font-weight-bold %s' % ('active' if slide.id == current_slide.id else '')"
-                        t-att-data-id="slide.id"
-                        t-att-data-name="slide.name"
-                        t-att-data-type="slide.slide_type"
-                        t-att-data-slug="slug(slide)"
-                        t-att-data-has-question="1 if slide.question_ids else 0"
-                        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 channel_progress[slide.id]"
-                        >
-                        <div class="mr-2 ml-2 flex-grow">
-                            <i t-if="not slide_completed" class="fa fa-circle-thin" t-att-data-slide-id="slide.id"/>
-                            <i t-if="slide_completed" class="fa fa-check-circle text-success" t-att-data-slide-id="slide.id"/>
-                        </div>
-                        <div class="">
-                            <t t-call="website_slides.slide_icon">
-                                <t t-set="icon_class" t-value="'mr-2'"/>
-                                <t t-set="slide" t-value="slide"/>
-                            </t>
-                            <span t-field="slide.name"/>
-
-                            <ul t-if="slide.link_ids" class="list-group list-unstyled">
-                                <li t-foreach="slide.link_ids" t-as="link">
-                                    <a class="btn btn-link" t-att-href="link.link" target="new"><i class="fa fa-link"/> <span t-esc="link.name"/></a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li t-if="slide.question_ids and slide.slide_type != 'quiz'" class="o_wslides_fs_sidebar_list_item"
-                        t-att-data-id="slide.id"
-                        t-att-data-name="slide.name"
-                        t-att-data-type="slide.slide_type"
-                        t-att-data-slug="slug(slide)"
-                        t-att-data-has-question="1 if slide.question_ids else 0"
-                        t-att-data-is-quiz="1">
-                        <span class="ml-4">
-                            <i class="fa fa-flag-checkered"/> Quiz: <span t-field="slide.name"/>
-                        </span>
-                    </li>
-                </t>
-            </ul>
-
-          </div>
-        </div>
-    </div>
+        </a>
+        <ul class="o_wslides_fs_sidebar_section_slides collapse show position-relative px-0 pb-1 my-0 mx-n3" t-att-id="('collapse-%s') % (category.id if category else 0)">
+            <t t-foreach="slides" t-as="slide">
+                <t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
+                <li t-att-class="'o_wslides_fs_sidebar_list_item d-flex align-items-top py-2 %s text-truncate' % ('active' if slide.id == current_slide.id else '')"
+                    t-att-data-id="slide.id"
+                    t-att-data-name="slide.name"
+                    t-att-data-type="slide.slide_type"
+                    t-att-data-slug="slug(slide)"
+                    t-att-data-has-question="1 if slide.question_ids else 0"
+                    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 channel_progress[slide.id]"
+                    >
+                    <span class="ml-3 pt-1">
+                        <i t-if="not slide_completed" class="fa fa-circle-thin overflow-hidden d-flex align-items-center justify-content-center" t-att-data-slide-id="slide.id"/>
+                        <i t-if="slide_completed" class="o_wslides_slide_completed fa fa-check-circle rounded-circle text-success bg-white border border-success overflow-hidden d-flex align-items-center justify-content-center" t-att-data-slide-id="slide.id"/>
+                    </span>
+                    <div class="ml-2">
+                        <a class="d-block pt-1" href="#">
+                            <div class="d-flex ">
+                                <t t-call="website_slides.slide_icon">
+                                    <t t-set="icon_class" t-value="'mr-1 fw-fw'"/>
+                                    <t t-set="slide" t-value="slide"/>
+                                </t>
+                                <div class="o_wslides_fs_slide_name" t-esc="slide.name"/>
+                            </div>
+                        </a>
+                        <ul class="list-unstyled w-100 pt-2 small" t-if="slide.link_ids or (slide.question_ids and not slide.slide_type =='quiz')" >
+                            <li t-if="slide.link_ids" t-foreach="slide.link_ids" t-as="link" class="pl-0 mb-1">
+                                <a class="o_wslides_fs_slide_link" t-att-href="link.link" target="new">
+                                    <i class="fa fa-link mr-2"/><span t-esc="link.name"/>
+                                </a>
+                            </li>
+                            <li class="o_wslides_fs_sidebar_list_item pl-0 mb-1" t-if="slide.question_ids and not slide.slide_type == 'quiz'"
+                                t-att-data-id="slide.id"
+                                t-att-data-name="slide.name"
+                                t-att-data-type="slide.slide_type"
+                                t-att-data-slug="slug(slide)"
+                                t-att-data-has-question="1 if slide.question_ids else 0"
+                                t-att-data-is-quiz="1">
+                                <a class="o_wslides_fs_slide_quiz" href="#" t-att-index="i">
+                                    <i class="fa fa-flag-checkered text-warning mr-2"/>Quiz
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </t>
+        </ul>
+    </li>
 </template>
 
+
 </data></odoo>
diff --git a/addons/website_slides_forum/views/website_slides_templates.xml b/addons/website_slides_forum/views/website_slides_templates.xml
index dd9717a8bd7..534c9a50ef8 100644
--- a/addons/website_slides_forum/views/website_slides_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_templates.xml
@@ -11,10 +11,9 @@
     </template>
 
     <template id="slide_fullscreen" inherit_id="website_slides.slide_fullscreen">
-        <!-- Fullscreen template: add link to forum -->
-        <xpath expr="//div[hasclass('o_wslides_fs_slide_title')]" position="before">
-            <a t-if="slide.channel_id.forum_id" class="p-3 h-100 d-inline-block text-uppercase" t-att-href="'/forum/%s' % (slug(slide.channel_id.forum_id))" target="new">
-                <i class="fa fa-comments"></i>Ask a question
+        <xpath expr="//a[hasclass('o_wslides_fs_review')]" position="after">
+            <a t-if="slide.channel_id.forum_id" id="fullscreen_forum_button" class="d-flex align-items-center px-3" t-attf-href="/forum/#{slug(slide.channel_id.forum_id)}" target="new">
+                <i class="fa fa-comments"/><span class="ml-1 d-none d-md-inline-block">Ask a question</span>
             </a>
         </xpath>
     </template>