diff --git a/addons/website/static/src/components/fields/publish_button.js b/addons/website/static/src/components/fields/publish_button.js
new file mode 100644
index 00000000000..cc60352dc23
--- /dev/null
+++ b/addons/website/static/src/components/fields/publish_button.js
@@ -0,0 +1,10 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+
+const { Component } = owl;
+
+class PublishField extends Component {}
+PublishField.template = "website.PublishField";
+
+registry.category("fields").add("website_publish_button", PublishField);
diff --git a/addons/website/static/src/components/fields/publish_button.xml b/addons/website/static/src/components/fields/publish_button.xml
new file mode 100644
index 00000000000..79bb3df65d8
--- /dev/null
+++ b/addons/website/static/src/components/fields/publish_button.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+<t t-name="website.PublishField" owl="1">
+    <div class="o_stat_info">
+        <span class="o_stat_text o_hover"
+              t-att-class="props.value ? 'text-danger' : 'text-success'"
+              t-esc="props.value ? env._t('Unpublish') : env._t('Publish')"/>
+        <span class="o_stat_text o_not_hover"
+              t-att-class="props.value ? 'text-success' : 'text-danger'"
+              t-esc="props.value ? env._t('Published') : env._t('Unpublished')"/>
+    </div>
+</t>
+
+</templates>
diff --git a/addons/website/static/src/components/fields/res_config_settings.js b/addons/website/static/src/components/fields/res_config_settings.js
index 20a94ae1589..4b0828097da 100644
--- a/addons/website/static/src/components/fields/res_config_settings.js
+++ b/addons/website/static/src/components/fields/res_config_settings.js
@@ -1,41 +1,41 @@
-odoo.define('website.settings', function (require) {
+/** @odoo-module **/
 
-const core = require('web.core');
-const Dialog = require('web.Dialog');
-const FieldBoolean = require('web.basic_fields').FieldBoolean;
-const fieldRegistry = require('web.field_registry');
+import { BooleanField } from '@web/views/fields/boolean/boolean_field';
+import { Dialog } from '@web/core/dialog/dialog';
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
 
-const QWeb = core.qweb;
-const _t = core._t;
+const { Component } = owl;
 
-const WebsiteCookiesbarField = FieldBoolean.extend({
-    xmlDependencies: ['/website/static/src/xml/website.res_config_settings.xml'],
+class CookieBarDialog extends Component {
+    accept() {
+        this.props.accept();
+        this.props.close();
+    }
+}
+CookieBarDialog.components = { Dialog };
+CookieBarDialog.template = 'website.res_config_settings.CookieDialog';
 
-    _onChange: function () {
-        const checked = this.$input[0].checked;
-        if (!checked) {
-            return this._setValue(checked);
+class WebsiteCookiebarField extends BooleanField {
+    setup() {
+        this.dialog = useService('dialog');
+    }
+
+    onChange(newValue) {
+        if (!newValue) {
+            return this.props.update(newValue);
         }
-
-        const cancelCallback = () => this.$input[0].checked = !checked;
-        Dialog.confirm(this, null, {
-            title: _t("Please confirm"),
-            $content: QWeb.render('website.res_config_settings.cookies_modal_main'),
-            buttons: [{
-                text: _t('Do not activate'),
-                classes: 'btn-primary',
-                close: true,
-                click: cancelCallback,
+        let value = false;
+        this.dialog.add(CookieBarDialog, {
+            title: "Website Cookie Bar",
+            accept: () => {
+                value = true;
             },
-            {
-                text: _t('Activate anyway'),
-                close: true,
-                click: () => this._setValue(checked),
-            }],
-            cancel_callback: cancelCallback,
+        }, {
+            onClose: () => {
+                this.props.update(value);
+            }
         });
-    },
-});
-
-fieldRegistry.add('website_cookiesbar_field', WebsiteCookiesbarField);
-});
+    }
+}
+registry.category("fields").add("website_cookiesbar_field", WebsiteCookiebarField);
diff --git a/addons/website/static/src/components/fields/res_config_settings.xml b/addons/website/static/src/components/fields/res_config_settings.xml
index eaa1a682e51..f298d232ea5 100644
--- a/addons/website/static/src/components/fields/res_config_settings.xml
+++ b/addons/website/static/src/components/fields/res_config_settings.xml
@@ -1,18 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-<t t-name="website.res_config_settings.cookies_modal_main">
-    <main role="alert">
-        <p>
-            <b>Cookie bars may significantly impair the experience</b> of
-            your visitors. We recommend you avoid them unless you have
-            verified with a legal advisor that you absolutely need cookie
-            consent in your country.
-        </p>
-        <p>
-            For session cookies, authentification and analytics,
-            <b>you do not need to ask for the consent</b> (see e.g. Opinion
-            04/2012 on Cookie Consent Exemption by the EU Art.29 WP).
-        </p>
-    </main>
+
+<t t-name="website.res_config_settings.CookieDialog" owl="1">
+    <Dialog title="'Please confirm'" size="'md'">
+        <t t-set-slot="default">
+            <main role="alert">
+                <p>
+                    <b>Cookie bars may significantly impair the experience</b> of
+                    your visitors. We recommend you avoid them unless you have
+                    verified with a legal advisor that you absolutely need cookie
+                    consent in your country.
+                </p>
+                <p>
+                    For session cookies, authentification and analytics,
+                    <b>you do not need to ask for the consent</b> (see e.g. Opinion
+                    04/2012 on Cookie Consent Exemption by the EU Art.29 WP).
+                </p>
+            </main>
+        </t>
+        <t t-set-slot="footer">
+            <button class="btn btn-primary" t-on-click="props.close">Do not activate</button>
+            <button class="btn btn-secondary" t-on-click="accept">Activate anyway</button>
+        </t>
+    </Dialog>
 </t>
+
 </templates>
diff --git a/addons/website/static/src/js/backend/button.js b/addons/website/static/src/js/backend/button.js
index bb3c5bd161e..5a75a304977 100644
--- a/addons/website/static/src/js/backend/button.js
+++ b/addons/website/static/src/js/backend/button.js
@@ -7,46 +7,7 @@ var field_registry = require('web.field_registry');
 
 var _t = core._t;
 
-var WebsitePublishButton = AbstractField.extend({
-    className: 'o_stat_info',
-    supportedFieldTypes: ['boolean'],
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * A boolean field is always set since false is a valid value.
-     *
-     * @override
-     */
-    isSet: function () {
-        return true;
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * This widget is supposed to be used inside a stat button and, as such, is
-     * rendered the same way in edit and readonly mode.
-     *
-     * @override
-     * @private
-     */
-    _render: function () {
-        this.$el.empty();
-        var text = this.value ? _t("Published") : _t("Unpublished");
-        var hover = this.value ? _t("Unpublish") : _t("Publish");
-        var valColor = this.value ? 'text-success' : 'text-danger';
-        var hoverColor = this.value ? 'text-danger' : 'text-success';
-        var $val = $('<span>').addClass('o_stat_text o_not_hover ' + valColor).text(text);
-        var $hover = $('<span>').addClass('o_stat_text o_hover ' + hoverColor).text(hover);
-        this.$el.append($val).append($hover);
-    },
-});
-
+// TODO: Remove me when Partner view is adapted to OWL
 var WidgetWebsiteButtonIcon = AbstractField.extend({
     template: 'WidgetWebsiteButtonIcon',
     events: {
@@ -111,6 +72,5 @@ var WidgetWebsiteButtonIcon = AbstractField.extend({
 });
 
 field_registry
-    .add('website_redirect_button', WidgetWebsiteButtonIcon)
-    .add('website_publish_button', WebsitePublishButton);
+    .add('website_redirect_button', WidgetWebsiteButtonIcon);
 });
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 57a8f7380f1..f5ec944162c 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -1,10 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <div t-name="WidgetWebsiteButton" class="o_stat_info published">
-        <span class="o_stat_text o_value"/>
-        <span class="o_stat_text">On Website</span>
-    </div>
-
     <t t-name="WidgetWebsiteButtonIcon">
         <button type="button" class="btn oe_stat_button">
             <i class="fa fa-fw o_button_icon fa-globe"/>
diff --git a/addons/website/static/tests/redirect_field_tests.js b/addons/website/static/tests/redirect_field_tests.js
index 2b0db99145c..0188512e761 100644
--- a/addons/website/static/tests/redirect_field_tests.js
+++ b/addons/website/static/tests/redirect_field_tests.js
@@ -29,6 +29,26 @@ QUnit.module("redirect_field", (hooks) => {
                         },
                     ],
                 },
+                blog_post: {
+                    fields: {
+                        is_published: {
+                            string: "Is published",
+                            type: "boolean",
+                            searchable: true,
+                            trim: true,
+                        }
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            is_published: true,
+                        },
+                        {
+                            id: 2,
+                            is_published: false,
+                        }
+                    ]
+                }
             },
         };
 
@@ -87,4 +107,38 @@ QUnit.module("redirect_field", (hooks) => {
 
         assert.verifySteps(['object', 'open_website_url']);
     });
+    QUnit.test("redirect field in form view is green if value=true", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "blog_post",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div class="oe_button_box" name="button_box">
+                            <field name="is_published" widget="website_redirect_button" />
+                        </div>
+                    </sheet>
+                </form>`,
+        });
+        assert.containsOnce(target, ".oe_stat_button .o_button_icon.text-success", "redirect field is green");
+    });
+    QUnit.test("redirect field in form view is red if value=false", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "blog_post",
+            resId: 2,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div class="oe_button_box" name="button_box">
+                            <field name="is_published" widget="website_redirect_button" />
+                        </div>
+                    </sheet>
+                </form>`,
+        });
+        assert.containsOnce(target, ".oe_stat_button .o_button_icon.text-danger", "redirect field is red");
+    });
 });
diff --git a/addons/website/static/tests/website_tests.js b/addons/website/static/tests/website_tests.js
index 8d43100b9d5..ef830626be1 100644
--- a/addons/website/static/tests/website_tests.js
+++ b/addons/website/static/tests/website_tests.js
@@ -6,6 +6,7 @@ var testUtils = require("web.test_utils");
 
 var createView = testUtils.createView;
 
+// TODO: remove me when legacy redirect button is removed
 QUnit.module('website', {
     before: function () {
         this.data = {