diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 08ef7b54ab4..f631e56e08c 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -3,7 +3,7 @@
     <!-- Front-end/Back-end integration -->
     <template id="user_navbar" inherit_id="website.layout">
         <xpath expr="//t[@t-set='html_data']" position="after">
-            <t t-set="body_classname" t-value="'o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else None"/>
+            <t t-set="body_classname" t-value="(body_classname if body_classname else '') + (' o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else '')"/>
         </xpath>
         <xpath expr="//div[@id='wrapwrap']" position="before">
             <nav groups="base.group_user" t-if="website and menu_data" id="oe_main_menu_navbar" class="o_main_navbar">
diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index aadd4802fd4..9d0b796cb00 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -220,8 +220,9 @@ img.o_forum_avatar_big {
 }
 
 .o_wforum_elearning_navtabs_container {
-    height: $owprofile-tabs-height;
-    background-color: #66445e;
+    @include media-breakpoint-up(md) {
+        background-color: theme-color('secondary');
+    }
 }
 
 .website_forum {
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index de04744ffb9..6aa3040e453 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -52,7 +52,7 @@
 
         <div id="wrap" t-attf-class="container #{website_forum_action}">
             <div class="row">
-                <div class="o_wprofile_email_validation_container mb16 mt16">
+                <div class="o_wprofile_email_validation_container flex-grow-1 mb16 mt16">
                     <t t-call="website_profile.email_validation_banner">
                         <t t-set="redirect_url" t-value="'/forum/%s' % forum.id"/>
                         <t t-set="send_validation_email_message" t-value="'Click here to send a verification email allowing you to participate to the forum.'"/>
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index ad1771c5d62..8c3b572955f 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -1,7 +1,11 @@
-$owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
-$owprofile-tabs-height: 36px;
+// Retrive the tab's height by summ its properties
+$owprofile-tabs-height: ($nav-link-padding-y*2) + ($font-size-base * $line-height-base);
 
-.o_wprofile_wrap {
+// Overal page bg-color: Blend it 'over' the color choosen by the user
+// ($body-bg), rather than force it replacing the variable's value.
+$owprofile-color-bg: mix($body-bg, #efeff4);
+
+.o_wprofile_body {
     background-color: $owprofile-color-bg;
 }
 
@@ -10,16 +14,15 @@ $owprofile-tabs-height: 36px;
 }
 
 .o_wprofile_pict {
-    @include size(30%);
-    border-radius: 100%;
+    @include size(100%);
     padding-top: 30%;
     background-size: cover;
     background-position: center;
 
     @include media-breakpoint-up(md)  {
-        @include size(100%);
-        border-radius: 0;
-        padding-top: 100%;
+        padding-top: 70%;
+        border: 1px solid darken(#875A7B, 10%);
+        border-bottom-width: 0;
     }
 }
 
@@ -34,6 +37,14 @@ $owprofile-tabs-height: 36px;
     }
 }
 
+.o_wprofile_sidebar {
+    border: 1px solid $border-color;
+
+    @include media-breakpoint-up(md) {
+        border-top-width: 0;
+    }
+}
+
 .o_wprofile_nav_tabs {
     @include media-breakpoint-up(md)  {
         margin-top: $owprofile-tabs-height * -1;
@@ -42,6 +53,7 @@ $owprofile-tabs-height: 36px;
         .nav-link {
             border-radius: 0;
             border-width: 0 1px;
+            line-height: $line-height-base;
             @include o-hover-text-color(rgba(white, 0.8), white);
 
             &, &:hover {
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 6d2469c2f30..ba222b18f11 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -84,6 +84,7 @@
 
     <!-- Edit Profile Page -->
     <template id="user_profile_edit_main" name="Edit Profile">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
         <t t-call="website.layout">
             <div id="wrap" class="o_wprofile_wrap">
                 <div class="container pt-4 pb-5">
@@ -185,8 +186,9 @@
 
     <!-- Profile Page -->
     <template id="user_profile_main" name="Profile Page">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
         <t t-call="website.layout">
-            <div id="wrap" class="o_wprofile_wrap">
+            <div id="wrap" class="o_wprofile_wrap mt-0">
                 <t t-call="website_profile.user_profile_header"/>
                 <t t-call="website_profile.user_profile_content"/>
             </div>
@@ -203,7 +205,7 @@
                 <div class="row">
                     <!-- ==== Header Left ==== -->
                     <div class="col-12 col-md-4 col-lg-3">
-                        <div t-attf-class="d-flex align-items-start #{'justify-content-between' if (request.env.user == user) else 'justify-content-around' }">
+                        <div t-attf-class="d-flex align-items-start h-100 #{'justify-content-between' if (request.env.user == user) else 'justify-content-around' }">
                             <div class="o_wprofile_pict d-inline-block mb-3 mb-md-0" t-attf-style="background-image:url(/web/image/res.users/#{user.id}/image)"/>
                             <a class="btn btn-primary d-inline-block d-md-none" t-if="request.env.user == user and validation_email_done" t-attf-href="/profile/edit?url_param=#{edit_button_url_param}">
                                 <i class="fa fa-pencil mr-1"/>EDIT
@@ -246,8 +248,8 @@
 
                 <!-- ========== SIDEBAR ========== -->
                 <div class="col-12 col-md-4 col-lg-3 mt-3 mt-md-0">
-                    <div class="bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
-                        <div class="d-flex justify-content-between">
+                    <div class="o_wprofile_sidebar bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
+                        <div class="o_wprofile_sidebar_top d-flex justify-content-between">
                             <div t-if="user.rank_id" class="d-flex align-items-center">
                                 <small class="font-weight-bold mr-2">Current rank:</small>
                                 <img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
@@ -320,7 +322,10 @@
                     <t t-set="user_points" t-value="0"/>
                 </t>
                 <path class="o_pc_circle_bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
-                <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" />
+                <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" mask="url(#mask)"/>
+                <mask id="mask">
+                    <polygon points="0,0 17.2,0 17.2,10 18,10 18,0 36,0 36,36 0,36" fill="white"/>
+                </mask>
                 <linearGradient id="gradient">
                     <stop offset="0%" stop-color="var(--o-pc-color-stop-1)"/>
                     <stop offset="100%" stop-color="var(--o-pc-color-stop-2)"/>
@@ -448,8 +453,9 @@
     All Users Page
     -->
     <template id="users_page_main" name="Users Page">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
          <t t-call="website.layout">
-            <div id="wrap" class="o_wprofile_wrap pb-5">
+            <div id="wrap" class="o_wprofile_wrap mt-0 pb-5">
                 <t t-call="website_profile.users_page_header"/>
                 <t t-call="website_profile.users_page_content"/>
             </div>
diff --git a/addons/website_sale_slides/views/website_slides_templates.xml b/addons/website_sale_slides/views/website_slides_templates.xml
index ad980a29a7a..538638248ec 100644
--- a/addons/website_sale_slides/views/website_slides_templates.xml
+++ b/addons/website_sale_slides/views/website_slides_templates.xml
@@ -6,27 +6,26 @@
     <xpath expr="//div[hasclass('o_wslides_js_course_join')]" position="inside">
         <t t-if="not channel.is_member and channel.enroll == 'payment'">
             <t t-if="channel.product_id.website_published">
-                <h4>
-                    <!-- original discounted price, if any -->
-                    <span t-att-class="'text-danger oe_default_price %s' % ('' if product_info['has_discounted_price'] else 'd-none')"
-                        style="text-decoration: line-through; white-space: nowrap;"
-                        t-esc="product_info['list_price']"
-                        t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
-                        <!-- real price -->
-                    <b class="oe_price" style="white-space: nowrap;"
+                <div t-attf-class="text-center d-flex align-items-center text-center pb-1 #{'justify-content-between' if product_info['has_discounted_price'] else 'justify-content-around'}">
+                    <!-- real price -->
+                    <div class="oe_price font-weight-bold text-nowrap h2 my-2"
                         t-esc="product_info['price']"
                         t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
                     <span itemprop="price" style="display:none;" t-esc="product_info['price']"/>
                     <span itemprop="priceCurrency" style="display:none;" t-esc="product_info['currency_id'].name"/>
-                </h4>
-                <a role="button" class="col-10 btn btn-primary" t-att-href="channel.product_id.website_url">
+                    <!-- original discounted price, if any -->
+                    <del t-att-class="'text-600 text-nowrap oe_default_price %s' % ('' if product_info['has_discounted_price'] else 'd-none')"
+                        t-esc="product_info['list_price']"
+                        t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
+                </div>
+                <a role="button" class="btn btn-primary btn-block" t-att-href="channel.product_id.website_url">
                     <span class="cta-title text_small_caps">Buy Course</span>
                 </a>
             </t>
             <t t-else="">
-                <a role="button" class="col-10 btn btn-light" href="#">
-                    <span class="cta-title text_small_caps">Course Not Buyable</span>
-                </a>
+                <div class="alert my-0 bg-200 text-center">
+                    Course Not Buyable
+                </div>
             </t>
         </t>
     </xpath>
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 301887e87be..7a0e59d2960 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -1,6 +1,4 @@
 
-$o-wslides-tabs-height: 36px;
-
 .o_wslides_fs_main {
     @include o-position-absolute(0,0,0,0);
     z-index: 2000;
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index c4797b85995..8f90d98c22a 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -1,6 +1,12 @@
 $MAX-Z-INDEX : 2147483647 !default;
-$o-wslides-tabs-height: 36px;
-$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
+
+// Retrive the tab's height by summ its properties
+$o-wslides-tabs-height: ($nav-link-padding-y*2) + ($font-size-base * $line-height-base);
+
+// Overal page bg-color: Blend it 'over' the color choosen by the user
+// ($body-bg), rather than force it replacing the variable's value.
+$o-wslides-color-bg: mix($body-bg, #efeff4);
+
 $o-wslides-color-dark1: #47525f;
 $o-wslides-color-dark2: #1f262d;
 $o-wslides-color-dark3: #101216;
@@ -14,18 +20,19 @@ $o-wslides-fs-side-width: 300px;
 }
 
 .o_wslides_course_pict {
-    @include size(100%, 30%);
+    @include size(100%);
     padding-top: 30%;
     background-size: cover;
     background-position: center;
 
     @include media-breakpoint-up(md)  {
-        @include size(100%);
-        padding-top: 100%;
+        padding-top: 70%;
+        border: 1px solid darken(#875A7B, 10%);
+        border-bottom-width: 0;
     }
 }
 
-.o_wslides_wrap {
+.o_wslides_body {
     background-color: $o-wslides-color-bg;
 
     .o_wslides_home_nav {
@@ -42,11 +49,6 @@ $o-wslides-fs-side-width: 300px;
         }
     }
 
-    .o_wslides_course_card,
-    .o_wslides_lesson_card {
-        border-width: 0 0 3px 0;
-    }
-
     .o_wslides_js_slide_like_up,
     .o_wslides_js_slide_like_down {
         &:not(.disabled) {
@@ -80,10 +82,16 @@ $o-wslides-fs-side-width: 300px;
         opacity: 0.5;
     }
 
+    // Solve an overfow issue caused in some
+    // circumstances by flex containers.
+    hr {
+        min-height: 1px;
+    }
+
     // Truncate text descriptions to a specific number of lines.
     // If '-webkit-line-clamp' is not supported, a less effective
     // 'line-height' fallback will be used instead.
-    $truncate-limits: 2, 3, 5, 10;
+    $truncate-limits: 2, 3, 10;
 
     @each $limit in $truncate-limits {
         .o_wslides_desc_truncate_#{$limit} {
@@ -109,18 +117,33 @@ $o-wslides-fs-side-width: 300px;
             border: none;
         }
     }
+
+    .o_wprofile_progress_circle {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 200px;
+    }
 }
 
 // New course page
 // **************************************************
 
+.o_wslides_course_sidebar {
+    border: 1px solid $border-color;
+
+    @include media-breakpoint-up(md) {
+        border-top-width: 0;
+    }
+}
+
 @mixin o-wslides-tabs($tab-active-color: $o-wslides-color-bg) {
-    margin-top: $o-wslides-tabs-height * -1;
+    margin-top: ($o-wslides-tabs-height * -1) + 0.05rem;
     border-bottom: 0;
 
     .nav-link {
         border-radius: 0;
         border-width: 0 1px;
+        line-height: $line-height-base;
         @include o-hover-text-color(rgba(white, 0.8), white);
 
         &, &:hover {
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 1b835af6335..38d28900d01 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -99,8 +99,9 @@
         <t t-call-assets="web.pdf_js_lib" t-css="false"/>
         <script type="text/javascript" src="/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js"></script>
     </t>
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
-        <div class="wrap o_wslides_wrap">
+        <div id="wrap" t-attf-class="wrap mt-0">
             <t t-set="main_object" t-value="channel"/>
 
             <div t-attf-class="o_wslides_course_header o_wslides_gradient position-relative text-white pb-md-0 pt-2 pt-md-5 #{'pb-3' if channel.channel_type == 'training' else 'o_wslides_course_doc_header pb-5'}">
@@ -111,7 +112,7 @@
                         <!-- ==== Header Left ==== -->
                         <div class="col-12 col-md-4 col-lg-3">
                             <div class="d-flex align-items-start justify-content-around h-100">
-                                <div class="o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0" t-attf-style="background-image:url(/web/image/slide.channel/#{channel.id}/image)"/>
+                                <div class="o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0" t-attf-style="background-image:url(/web/image/slide.channel/#{channel.id}/image)" t-ignore="True"/>
                             </div>
                         </div>
 
@@ -232,7 +233,7 @@
 
 <template id="course_sidebar" name="Course Sidebar (infos, CTA)">
     <!-- Training-only: Channel sidebar (aka general information + CTAs) -->
-    <div class="bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
+    <div class="o_wslides_course_sidebar bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
 
         <div class="o_wslides_sidebar_top d-flex justify-content-between">
             <div class="o_wslides_js_course_join flex-grow-1">
@@ -364,17 +365,17 @@
                 </li>
             </t>
         </ul>
-        <div t-if="channel.can_upload" class="o_wslides_content_actions">
-            <a  class="o_wslides_js_slide_upload mr-1 border btn btn-light text-muted"
+        <div t-if="channel.can_upload" class="o_wslides_content_actions btn-group">
+            <a  class="o_wslides_js_slide_upload mr-1 border btn btn-light bg-white"
                 role="button"
                 aria-label="Upload Presentation"
                 href="#"
                 t-att-data-channel-id="channel.id"
                 t-att-data-can-upload="channel.can_upload"
-                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus mr-1"/>Add Content</a>
-            <a class="o_wslides_js_slide_section_add border btn btn-light text-muted" t-attf-channel_id="#{channel.id}"
+                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus mr-1 align-middle"/><span>Add Content</span></a>
+            <a class="o_wslides_js_slide_section_add border btn btn-light bg-white" t-attf-channel_id="#{channel.id}"
                 href="#" role="button"
-                groups="website.group_website_publisher"><i class="fa fa-folder-o mr-1"/>Add Section</a>
+                groups="website.group_website_publisher"><i class="fa fa-folder-o mr-1 align-middle"/><span>Add Section</span></a>
         </div>
     </div>
     <div t-field="channel.description_html"/>
@@ -514,35 +515,30 @@
         </a>
     </div>
     <!-- Featured lesson  -->
-    <div t-if="not search and not search_slide_type and slide_promoted" class="container mb-3">
-        <div class="card">
-            <div class="card-body d-flex flex-column flex-lg-row">
-                <t t-set="image_url" t-value="'/web/image/slide.slide/%s/image' % slide_promoted.id"/>
+    <div t-if="not search and not search_slide_type and slide_promoted" class="container py-1 mb-2">
+        <div class="card flex-column flex-lg-row">
+            <t t-set="image_url" t-value="'/web/image/slide.slide/%s/image' % slide_promoted.id"/>
 
-                <t t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher">
-                    <a t-attf-href="/slides/slide/#{slug(slide_promoted)}" class="w-100 w-lg-50 mr-0 mr-lg-4 mb-3 mb-lg-0 flex-shrink-0 rounded border">
-                        <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
-                    </a>
-                </t>
-                <t t-else="">
-                    <div class="w-100 w-lg-50 mr-0 mr-lg-4 mb-3 mb-lg-0 flex-shrink-0 rounded border">
-                        <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
-                    </div>
-                </t>
+            <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher"
+               t-attf-href="/slides/slide/#{slug(slide_promoted)}" class="w-100 w-lg-50 flex-shrink-0 rounded">
+                <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
+            </a>
+            <div t-else="" class="w-100 w-lg-50 flex-shrink-0 rounded">
+                <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
+            </div>
 
-                <div>
-                    <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher"
-                       t-attf-href="/slides/slide/#{slug(slide_promoted)}"
-                       class="h4 d-block" t-att-title="slide_promoted.name" t-field="slide_promoted.name"/>
-                    <h4 t-else="" class="text-muted" t-field="slide_promoted.name"/>
+            <div class="card-body">
+                <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher"
+                   t-attf-href="/slides/slide/#{slug(slide_promoted)}"
+                   class="h4 d-block" t-att-title="slide_promoted.name" t-field="slide_promoted.name"/>
+                <h4 t-else="" class="text-muted" t-field="slide_promoted.name"/>
 
-                    <div t-if="slide_promoted.tag_ids" class="border-top mt-2 pt-1">
-                        <t t-foreach="slide_promoted.tag_ids" t-as="tag">
-                            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide_promoted.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
-                        </t>
-                    </div>
-                    <div class="o_wslides_desc_truncate_10 mt-3" t-field="slide_promoted.description"/>
+                <div t-if="slide_promoted.tag_ids" class="border-top mt-2 pt-1">
+                    <t t-foreach="slide_promoted.tag_ids" t-as="tag">
+                        <a t-att-href="'/slides/%s/tag/%s' % (slug(slide_promoted.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
+                    </t>
                 </div>
+                <div class="o_wslides_desc_truncate_10 mt-3" t-field="slide_promoted.description"/>
             </div>
         </div>
     </div>
@@ -561,9 +557,10 @@
         <t t-foreach="category_data" t-as="category">
             <div class="mb-2" t-if="(category['slides'] or channel.can_publish) and (search_category and search_category.id == category['id'] or not search_category)">
                 <div class="d-flex align-items-center justify-content-between border-bottom pb-2 mb-3" t-if="category['name'] != 'Uncategorized'">
-                    <h5 class="m-0"><t t-esc="category['name']"/></h5>
-                    <a t-if="category['id']" t-att-href="'/slides/%s/category/%s' % (slug(channel), category['slug_name'])">View all</a>
-                    <a t-else="" t-att-href="'/slides/%s?uncategorized=1' % (slug(channel))">View all</a>
+                    <t t-set="is_empty_editable" t-value="not category['slides'] and channel.can_publish"/>
+                    <h5 t-attf-class="m-0 #{'text-muted' if is_empty_editable else ''}"><t t-esc="category['name']"/></h5>
+                    <a t-if="category['id'] and not is_empty_editable" t-att-href="'/slides/%s/category/%s' % (slug(channel), category['slug_name'])">View all</a>
+                    <a t-elif="not is_empty_editable" t-att-href="'/slides/%s?uncategorized=1' % (slug(channel))">View all</a>
                 </div>
                 <div class="row mx-n2">
                     <t t-foreach="category['slides']" t-as="slide">
@@ -613,9 +610,9 @@
             <div t-else="" class="card-img-top border-bottom o_wslides_gradient" t-attf-style="padding-top: 50%;"/>
         </t>
 
-        <div class="card-body">
-            <a t-if="can_access" class="card-title h5" t-attf-href="/slides/slide/#{slug(slide)}" t-esc="slide.name"/>
-            <span t-else="" class="card-title h5 text-muted" t-esc="slide.name"/>
+        <div class="card-body p-3">
+            <a t-if="can_access" class="card-title h5 mb-2o_wslides_desc_truncate_2" t-attf-href="/slides/slide/#{slug(slide)}" t-esc="slide.name"/>
+            <span t-else="" class="card-title h5 mb-2 o_wslides_desc_truncate_2 text-muted" t-esc="slide.name"/>
             <div class="card-subtitle mb-2 text-muted" t-if="slide.is_preview or (not slide.is_published and user.has_group('website.group_website_publisher'))">
                 <t t-if="slide.is_preview">
                     <span class="badge badge-info">Free preview</span>
@@ -626,14 +623,14 @@
             </div>
             <div class="card-text pt-2">
                 <div class="o_wslides_desc_truncate_3 font-weight-light oe_no_empty" t-field="slide.description"/>
-                <div t-if="slide.tag_ids" class="border-top mt-2 pt-1">
+                <div t-if="slide.tag_ids" class="mt-2 pt-1 o_wslides_desc_truncate_2">
                     <t t-foreach="slide.tag_ids" t-as="tag">
-                        <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
+                        <a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" class="badge badge-light" t-esc="tag.name"/>
                     </t>
                 </div>
             </div>
         </div>
-        <div class="card-footer border-top-0 text-600">
+        <div class="card-footer bg-white text-600">
             <div class="d-flex align-items-center small">
                 <span class="font-weight-bold mr-auto" t-field="slide.completion_time" t-options='{"widget": "float_time"}'/>
                 <div class="o_wslides_js_slide_like mr-2">
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index dde3e222cc6..0bcf0c0d189 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -3,6 +3,7 @@
 
 <!-- Channels home template -->
 <template id='courses_home' name="Odoo Courses Homepage">
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
         <div class="wrap o_wslides_wrap">
             <section class="s_banner overflow-hidden bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default.svg&quot;); background-size: cover; background-position: 55% 65%">
@@ -87,7 +88,7 @@
                                 <div class="row mb-5 mt-3 mt-lg-0">
                                     <div class="col-12 col-sm-6 col-lg-12">
                                         <t t-call="website_slides.slides_home_user_profile_small"/>
-                                        <hr class="d-sm-none d-lg-block" />
+                                        <hr class="d-sm-none d-lg-block"/>
                                     </div>
                                     <div class="col-12 col-sm-6 col-lg-12 d-flex align-items-center">
                                         <t t-call="website_slides.slides_home_user_achievements_small"/>
@@ -163,8 +164,9 @@
 
 <!-- Channel all/main template -->
 <template id='courses_all' name="Odoo All Courses">
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
-        <div class="wrap o_wslides_wrap">
+        <div class="wrap">
             <section class="s_banner bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default_all.svg&quot;); background-size: cover; background-position: 80% 20%">
                 <div class="container py-5">
                     <h1 t-if="search_my" class="display-3 mb-0">My Courses</h1>
@@ -173,14 +175,33 @@
             </section>
             <div class="container mt16 o_wslides_home_nav position-relative">
                 <!-- Navbar dynamically composed using displayed channel tag groups. -->
-                <nav class="navbar navbar-expand-md navbar-light shadow-sm" style="background: white!important">
-                    <div class="navbar-nav border-right pr-3">
-                        <a class="nav-link nav-item" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
+                <nav class="navbar navbar-expand-md navbar-light shadow-sm pl-0" style="background: white!important">
+                    <div class="navbar-nav border-right">
+                        <a class="nav-link nav-item px-3" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
                     </div>
-                    <button class="navbar-toggler" type="button"
+                    <!-- Clear filtering (mobile)-->
+                    <div class="form-inline text-nowrap ml-auto d-md-none" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
+                        <a t-att-href="'/slides/all?%s' % keep_query('debug')" class="btn btn-info mr-2" role="button" title="Clear filters">
+                            <i class="fa fa-eraser"/> Clear filters
+                        </a>
+                    </div>
+                    <form t-else="" method="GET" class="form-inline o_wslides_nav_navbar_right d-md-none">
+                        <!-- Search box (mobile)-->
+                        <div class="input-group">
+                            <input type="search" name="search" class="form-control"
+                                placeholder="Search courses" aria-label="Search"
+                                t-att-value="search_term"/>
+                            <div class="input-group-append">
+                                <button class="btn border border-left-0 oe_search_button" type="submit" aria-label="Search" title="Search">
+                                    <i class="fa fa-search"/>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                    <button class="navbar-toggler px-1" type="button"
                         data-toggle="collapse" data-target="#navbarTagGroups"
                         aria-controls="navbarTagGroups" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
+                        <span class="navbar-toggler-icon small"/>
                     </button>
                     <div class="collapse navbar-collapse" id="navbarTagGroups">
                         <t t-set="search_tag_groups" t-value="search_tags.mapped('group_id')"/>
@@ -202,16 +223,15 @@
                                     </div>
                                 </li>
                             </t>
-                            <!-- clear filtering -->
-                            <li class="nav-item ml-auto" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
-                                <a t-att-href="'/slides/all?%s' % keep_query('debug')" class="nav-link mr-2"
-                                    role="button" title="Clear filters">
-                                    <i class="fa fa-eraser"/> Clear filters
-                                </a>
-                            </li>
                         </ul>
-                        <!-- search box -->
-                        <form method="GET" class="form-inline o_wslides_nav_navbar_right">
+                        <!-- Clear filtering (desktop)-->
+                        <div class="form-inline ml-auto d-none d-md-flex" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
+                            <a t-att-href="'/slides/all?%s' % keep_query('debug')" class="btn btn-info text-nowrap mr-2" role="button" title="Clear filters">
+                                <i class="fa fa-eraser"/> Clear filters
+                            </a>
+                        </div>
+                        <!-- Search box (desktop) -->
+                        <form method="GET" class="form-inline o_wslides_nav_navbar_right d-none d-md-flex">
                             <div class="input-group">
                                 <input type="search" name="search" class="form-control"
                                     placeholder="Search courses" aria-label="Search"
@@ -262,7 +282,7 @@
 
 <template id='course_card' name="Course Card">
     <div class="card w-100 o_wslides_course_card mb-4">
-        <t t-set="course_image" t-value="'/web/image/slide.channel/%s/image_large' % channel.id"/>
+        <t t-set="course_image" t-value="'/web/image/slide.channel/%s/image' % channel.id"/>
         <a t-attf-href="/slides/#{slug(channel)}" t-title="channel.name">
             <div t-if="channel.image_large" class="card-img-top" t-attf-style="padding-top: 50%; background-image: url(#{course_image}); background-size: cover; background-position:center"/>
             <div t-else="" class="o_wslides_gradient card-img-top position-relative" style="padding-top: 50%; opacity: 0.8">
@@ -270,7 +290,7 @@
             </div>
         </a>
         <div class="card-body p-3">
-            <a class="card-title h5 o_wslides_desc_truncate_2" t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
+            <a class="card-title h5 mb-2 o_wslides_desc_truncate_2" t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
             <div class="card-text mt-1">
                 <div class="font-weight-light o_wslides_desc_truncate_3" t-field="channel.description"/>
                 <div t-if="channel.tag_ids" class="mt-2 pt-1 o_wslides_desc_truncate_2">
@@ -280,7 +300,7 @@
                 </div>
             </div>
         </div>
-        <div class="card-footer border-top-0 text-600 px-3">
+        <div class="card-footer bg-white text-600 px-3">
             <div class="d-flex justify-content-between align-items-center">
                 <small class="font-weight-bold" t-field="channel.total_time" t-options='{"widget": "float_time"}'/>
                 <div class="d-flex flex-grow-1 justify-content-end">
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index fcb324a4193..1d89aa83bbb 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -3,6 +3,7 @@
 
 <!-- Slide: main template: detailed view -->
 <template id="slide_main" name="Slide Detailed View">
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
         <t t-set="main_object" t-value="slide"/>
         <div class="wrap o_wslides_wrap">
@@ -225,7 +226,7 @@
     </div>
     <div t-if="slide.tag_ids" class="pb-2">
         <t t-foreach="slide.tag_ids" t-as="tag">
-            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-light py-1 px-2" t-esc="tag.name"/>
+            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-info py-1 px-2" t-esc="tag.name"/>
         </t>
     </div>
     <div class="o_wslides_lesson_content_type">
diff --git a/addons/website_slides_forum/views/website_slides_forum_templates.xml b/addons/website_slides_forum/views/website_slides_forum_templates.xml
index b0342ec4077..82f7b8e9182 100644
--- a/addons/website_slides_forum/views/website_slides_forum_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_forum_templates.xml
@@ -3,7 +3,7 @@
     <template id="website_slides_forum_header" inherit_id="website_forum.header">
         <xpath expr="//div[hasclass('container')]" position="before">
             <t t-if="forum.slide_channel_id">
-                <div class="row o_wforum_elearning_navtabs_container">
+                <div class="o_wforum_elearning_navtabs_container">
                     <div class="container">
                         <ul class="nav nav-tabs o_wprofile_nav_tabs mt-0 flex-nowrap" role="tablist" id="profile_extra_info_tablist">
                             <li class="nav-item">
diff --git a/addons/website_slides_survey/static/src/img/certification.svg b/addons/website_slides_survey/static/src/img/certification.svg
new file mode 100644
index 00000000000..54895cf600f
--- /dev/null
+++ b/addons/website_slides_survey/static/src/img/certification.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M7.158 11.549a2.005 2.005 0 0 1-3.105-1.286 2.005 2.005 0 0 1-1.286-3.105 2.005 2.005 0 0 1 1.286-3.105 2.005 2.005 0 0 1 3.105-1.286 2.005 2.005 0 0 1 3.105 1.286 2.005 2.005 0 0 1 1.286 3.105 2.005 2.005 0 0 1-1.286 3.105 2.005 2.005 0 0 1-3.105 1.286z" id="a"/><filter filterUnits="objectBoundingBox" id="b"><feMorphology radius=".5" in="SourceAlpha" result="shadowSpreadInner1"/><feOffset in="shadowSpreadInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0749562937 0" in="shadowInnerInner1"/></filter><path id="d" d="M6.04788912 6.85018391L7.55257375 8.20939291 9.91700506 6 11 6.947144 7.55257375 10 5 7.75171917z"/><filter x="-2.5%" y="-3.8%" width="105%" height="115%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".3" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.233200393 0" in="shadowOffsetOuter1"/></filter></defs><g transform="translate(-2 -2)" fill="none" fill-rule="evenodd"><g transform="rotate(22 5.57 9.903)"><use fill="#00C9FF" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path stroke="#FFF" stroke-width=".7" d="M7.158 11.96a2.355 2.355 0 0 1-3.395-1.407 2.355 2.355 0 0 1-1.406-3.395 2.355 2.355 0 0 1 1.406-3.395 2.355 2.355 0 0 1 3.395-1.406 2.355 2.355 0 0 1 3.395 1.406 2.355 2.355 0 0 1 1.406 3.395 2.355 2.355 0 0 1-1.406 3.395 2.355 2.355 0 0 1-3.395 1.406z"/></g><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_slides_survey/static/src/scss/website_profile.scss b/addons/website_slides_survey/static/src/scss/website_profile.scss
deleted file mode 100644
index c912aebf31b..00000000000
--- a/addons/website_slides_survey/static/src/scss/website_profile.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// Certification Card
-.o_wprofile_slides_certif_card_body {
-    height: 66px;
-    > div > div:first-child {
-        position: absolute;
-        padding: 0px;
-        top: 8px;
-        left: 8px;
-        width: 66px;
-        height: 66px;
-    }
-    > div > div:nth-child(3) > span {
-        position: absolute;
-        right: 32px;
-        top: 13px;
-    }
-    > div > div > div:nth-child(2) {
-        position: absolute;
-        bottom: 0px;
-        right: 32px;
-        a {
-            margin-left: 8px;
-            color: grey;
-        }
-    }
-}
diff --git a/addons/website_slides_survey/static/src/scss/website_slides_survey.scss b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
new file mode 100644
index 00000000000..3aaa503352c
--- /dev/null
+++ b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
@@ -0,0 +1,34 @@
+$o_wss_color_1 : #5B7687;
+$o_wss_color_2 : #485761;
+
+// General
+// **************************************************
+.o_wss_certification_icon {
+    @include size(1.4em, auto);
+}
+
+// Course page
+// **************************************************
+#wrap.o_wss_certification_channel {
+    .o_wslides_course_header {
+        background-image: linear-gradient(120deg, $o_wss_color_1, $o_wss_color_2);
+    }
+
+    .o_wslides_course_pict {
+        @include media-breakpoint-up(md)  {
+            border-color: $o_wss_color_2;
+        }
+    }
+
+    .o_wslides_nav_tabs .nav-link {
+        @include media-breakpoint-up(md) {
+            &, &:hover{
+                border-color: $o_wss_color_1;
+            }
+
+            &.active {
+                border-color: $gray-100;
+            }
+        }
+    }
+}
diff --git a/addons/website_slides_survey/views/assets.xml b/addons/website_slides_survey/views/assets.xml
index 7a31fa078c8..40eae653970 100644
--- a/addons/website_slides_survey/views/assets.xml
+++ b/addons/website_slides_survey/views/assets.xml
@@ -2,9 +2,11 @@
 <odoo>
     <data>
         <template id="assets_frontend" inherit_id="website.assets_frontend" name="Slides Certification">
+            <xpath expr="//link[last()]" position="after">
+                <link rel="stylesheet" type="text/scss" href="/website_slides_survey/static/src/scss/website_slides_survey.scss"/>
+            </xpath>
             <xpath expr="//script[last()]" position="after">
                 <script type="text/javascript" src="/website_slides_survey/static/src/js/slides_upload.js"/>
-                <link rel="stylesheet" type="text/scss" href="/website_slides_survey/static/src/scss/website_profile.scss"/>
                 <script type="text/javascript" src="/website_slides_survey/static/src/js/slides_course_fullscreen_player.js"/>
             </xpath>
         </template>
diff --git a/addons/website_slides_survey/views/survey_templates.xml b/addons/website_slides_survey/views/survey_templates.xml
index deea71a9c99..074784d75b7 100644
--- a/addons/website_slides_survey/views/survey_templates.xml
+++ b/addons/website_slides_survey/views/survey_templates.xml
@@ -12,5 +12,11 @@
                 </div>
             </xpath>
         </template>
+
+        <template id="o_wss_certification_icon">
+            <t t-set="icon_url" t-value="icon_url if icon_url else '/website_slides_survey/static/src/img/certification.svg'"/>
+            <t t-set="icon_classes" t-value="icon_classes if icon_classes else 'o_wss_certification_icon'"/>
+            <img t-att-class="icon_classes" t-att-src="icon_url" alt="Certification icon"/>
+        </template>
     </data>
 </odoo>
diff --git a/addons/website_slides_survey/views/website_slides_templates_course.xml b/addons/website_slides_survey/views/website_slides_templates_course.xml
index 98aa90c575f..8e94e1665ca 100644
--- a/addons/website_slides_survey/views/website_slides_templates_course.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_course.xml
@@ -1,6 +1,23 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <data>
+        <template id="course_main" inherit_id="website_slides.course_main" name="Certification Course Main">
+            <xpath expr="//div[@id='wrap']" position="attributes">
+                <attribute name="t-attf-class" separator=" " add="#{'o_wss_certification_channel' if channel.nbr_certification > 0 else ''}"/>
+            </xpath>
+
+            <xpath expr="//div[@id='courseMainTabContent']//div[@id='home']/t" position="before">
+                <div t-if="channel.nbr_certification > 0 and channel.is_member" class="alert alert-success d-flex align-items-center justify-content-between flex-wrap">
+                    <div>Begin your <b>certification</b> today!</div>
+
+                    <t t-set="first_slide" t-value="category_data[0]['slides'][0]"/>
+                    <a t-attf-href="/slides/slide/#{slug(first_slide)}?fullscreen=1" class="btn btn-success mt-2 mt-sm-0">
+                        <span>Start Now</span><i class="fa fa-chevron-right ml-2 align-middle"/>
+                    </a>
+                </div>
+            </xpath>
+        </template>
+
         <template id="slide_icon_inherit_survey" inherit_id="website_slides.slide_icon">
             <xpath expr="//i[last()]" position="after">
                 <i t-if="slide.slide_type == 'certification'" t-att-class="'fa fa-trophy %s' % icon_class"></i>
diff --git a/addons/website_slides_survey/views/website_slides_templates_homepage.xml b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
index bc4be6ba9b2..eaa1783346b 100644
--- a/addons/website_slides_survey/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
@@ -3,7 +3,18 @@
     <data>
         <template id="courses_home_inherit_survey" inherit_id="website_slides.courses_home">
             <xpath expr="//a[hasclass('o_wslides_home_all_slides')]" position="after">
-                <a class="nav-link nav-link" href="/slides/all?slide_type=certification"><i class="fa fa-trophy mr-1"/>Certifications</a>
+                <a class="nav-link nav-link d-flex" href="/slides/all?slide_type=certification">
+                    <t t-call="website_slides_survey.o_wss_certification_icon"/>
+                    <span class="ml-1">Certifications</span>
+                </a>
+            </xpath>
+        </template>
+
+        <template id="course_card_inherit_survey" inherit_id="website_slides.course_card">
+            <xpath expr="//div/div" position="after">
+                <div t-if="channel.nbr_certification > 0" class="position-absolute py-1 px-2 h5" style="right:0; top:0">
+                    <t t-call="website_slides_survey.o_wss_certification_icon"/>
+                </div>
             </xpath>
         </template>
     </data>