diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index 53d2296a464..704692babca 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -28,7 +28,7 @@
                 width: @o-switch-size - 0.2;
                 height: @o-switch-size - 0.2;
                 margin-top: 0.1ex;
-                margin-left: 0.3ex;
+                margin-left: 0.1ex;
                 border-radius: 100rem;
                 .transition(all 0.3s @o-we-md-ease);
                 box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
@@ -44,6 +44,14 @@
             }
         }
     }
+    &.o_switch_danger {
+        > input {
+            &:not(:checked) + span {
+                box-shadow: none;
+                .o-linear-gradient(0deg, lighten(@brand-danger, 5%), darken(@brand-danger, 5%));
+            }
+        }
+    }
 }
 
 .dropdown-menu label .o_switch {
diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index ab1de2ea357..6937545c5a8 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -232,6 +232,7 @@ var WebsiteRoot = BodyManager.extend({
         })
         .done(function (result) {
             $data.toggleClass("css_unpublished css_published");
+            $(".ribbon-publish.ribbon-wrapper").toggleClass("css_unpublished css_published");
             $data.find('input').prop("checked", result);
             $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off');
         })
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
index 8cbf1ba7d98..132fd7ba70d 100644
--- a/addons/website/static/src/less/website.ui.components.less
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -481,4 +481,37 @@ body .modal {
             opacity: 0.5;
         }
     }
-}
\ No newline at end of file
+}
+
+// Unpublished page's ribbon
+.ribbon-publish.ribbon-wrapper {
+    width: 200px;
+    height: 200px;
+    z-index: 5;
+    position: absolute;
+    right: 0;
+    overflow: hidden;
+    &.css_published {
+        display:none;
+    }
+    &.css_unpublished {
+        display:block;
+    }
+}
+.ribbon-publish .ribbon {
+    font: bold 15px Sans-Serif;
+    color: white;
+    text-align: center;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    position: relative;
+    padding: 7px 65px;
+    right: 27px;
+    top: 44px;
+    width: 300px;
+    cursor: default;
+    white-space: unset;
+    word-wrap:break-word;
+}
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 7dc3cc7e688..3de913cc079 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -5,6 +5,11 @@
         <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"/>
         </xpath>
+        <xpath expr="//div[@id='wrapwrap']//header" position="after">
+            <div t-if="'website_published' in main_object.fields_get()" t-attf-class="ribbon-publish ribbon-wrapper #{main_object.website_published and 'css_published' or 'css_unpublished'}">
+                <div class="ribbon btn btn-danger">Unpublished</div>
+            </div>
+        </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">
                 <ul id="oe_applications">
@@ -61,7 +66,7 @@
                 <ul class="o_menu_systray hidden-xs" groups="website.group_website_publisher">
                     <li t-if="'website_published' in main_object.fields_get()" t-attf-class="js_publish_management #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
                         <a>
-                            <label class="o_switch js_publish_btn" for="id" >
+                            <label class="o_switch o_switch_danger js_publish_btn" for="id" >
                                 <input type="checkbox" t-att-checked="main_object.website_published" id="id"/>
                                 <span/>
                                 <span class="css_publish">Unpublished</span>