diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index b7cb59d1725..a44a94a31aa 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -176,6 +176,9 @@
             'website/static/src/services/website_service.js',
             'website/static/src/components/navbar/navbar.js',
             'website/static/src/components/dialog/dialog.js',
+            'website/static/src/components/dialog/dialog.scss',
+            'website/static/src/components/switch/switch.js',
+            'website/static/src/components/switch/switch.scss',
             'website/static/src/systray_items/*.js',
             'website/static/src/systray_items/*.scss',
         ],
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index deb5eff4006..0afc9434773 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -597,8 +597,8 @@ class Website(Home):
         url = page['url']
 
         if ext_special_case:  # redirect non html pages to backend to edit
-            return werkzeug.utils.redirect('/web#id=' + str(page.get('view_id')) + '&view_type=form&model=ir.ui.view')
-        return werkzeug.utils.redirect(url + "?enable_editor=1")
+            return '/web#id=' + str(page.get('view_id')) + '&view_type=form&model=ir.ui.view'
+        return url + "?enable_editor=1"
 
     @http.route("/website/get_switchable_related_views", type="json", auth="user", website=True)
     def get_switchable_related_views(self, key):
diff --git a/addons/website/static/src/components/dialog/dialog.js b/addons/website/static/src/components/dialog/dialog.js
index 15baedbe1b0..d6f918c6a2b 100644
--- a/addons/website/static/src/components/dialog/dialog.js
+++ b/addons/website/static/src/components/dialog/dialog.js
@@ -1,6 +1,9 @@
 /** @odoo-module **/
 
 import { Dialog } from '@web/core/dialog/dialog';
+import { Switch } from '@website/components/switch/switch';
+
+const { xml, useState } = owl;
 
 export class WebsiteDialog extends Dialog {
     setup() {
@@ -44,3 +47,46 @@ WebsiteDialog.bodyTemplate = "website.DialogBody";
 WebsiteDialog.footerTemplate = "website.DialogFooter";
 WebsiteDialog.size = "modal-md";
 WebsiteDialog.contentClass = "o_website_dialog";
+
+export class AddPageDialog extends WebsiteDialog {
+    setup() {
+        super.setup();
+
+        this.title = this.env._t("New Page");
+        this.primaryTitle = this.env._t("Create");
+
+        this.state = useState({
+            addMenu: true,
+            name: '',
+        });
+    }
+
+    onChangeAddMenu(value) {
+        this.state.addMenu = value;
+    }
+
+    async primaryClick() {
+        await this.props.addPage(this.state.name, this.state.addMenu);
+        this.close();
+    }
+}
+AddPageDialog.props = {
+    ...WebsiteDialog.props,
+    addPage: Function,
+};
+AddPageDialog.components = {
+    Switch,
+};
+AddPageDialog.bodyTemplate = xml`
+<div>
+    <div class="form-group row">
+        <label class="col-form-label col-md-3">
+            Page Title
+        </label>
+        <div class="col-md-9">
+            <input type="text" t-model="state.name" class="form-control" required="required"/>
+        </div>
+    </div>
+    <Switch extraClasses="'offset-md-3 col-md-9 text-left'" label="'Add to menu'" value="state.addMenu" onChange="(value) => this.onChangeAddMenu(value)"/>
+</div>
+`;
diff --git a/addons/website/static/src/components/dialog/dialog.scss b/addons/website/static/src/components/dialog/dialog.scss
new file mode 100644
index 00000000000..03375ba3132
--- /dev/null
+++ b/addons/website/static/src/components/dialog/dialog.scss
@@ -0,0 +1,5 @@
+.o_website_dialog {
+    label {
+        font-weight: $font-weight-bold;
+    }
+}
diff --git a/addons/website/static/src/components/switch/switch.js b/addons/website/static/src/components/switch/switch.js
new file mode 100644
index 00000000000..45916125cc1
--- /dev/null
+++ b/addons/website/static/src/components/switch/switch.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+const { Component, xml } = owl;
+
+const NO_OP = () => {};
+
+export class Switch extends Component {
+    setup() {
+        this.extraClasses = this.props.extraClasses ? ` ${this.props.extraClasses}` : '';
+    }
+}
+Switch.props = {
+    value: Boolean,
+    extraClasses: String,
+    label: {type: String, optional: true},
+    onChange: { Function, optional: true },
+};
+Switch.defaultProps = {
+    onChange: NO_OP,
+};
+Switch.template = xml`
+<label t-att-class="'o_switch' + extraClasses">
+    <input type="checkbox" t-att-checked="props.value" t-on-change="(ev) => props.onChange(ev.target.checked)"/>
+    <span/>
+    <div t-if="props.label"><t t-esc="props.label"/></div>
+</label>
+`;
diff --git a/addons/website/static/src/components/switch/switch.scss b/addons/website/static/src/components/switch/switch.scss
new file mode 100644
index 00000000000..d61a73d95e9
--- /dev/null
+++ b/addons/website/static/src/components/switch/switch.scss
@@ -0,0 +1,52 @@
+$o-we-switch-size: 1.2em !default;
+$o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
+.o_switch {
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    cursor: pointer;
+
+    > input {
+        display: none;
+
+        + span {
+            margin-right: 0.5em;
+            border-radius: $o-we-switch-size;
+            width: $o-we-switch-size * 1.7;
+            padding-left: 3px;
+            padding-right: 3px;
+            background-color: $o-we-switch-inactive-color;
+            font-size: $o-we-switch-size * 1.09;
+            line-height: $o-we-switch-size;
+            color: $o-we-switch-inactive-color;
+            transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
+
+            &:after {
+                content: "\f057"; // fa-times-circle
+                font-family: 'FontAwesome';
+                color: white;
+                transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
+            }
+        }
+
+        &:checked + span {
+            background: $o-brand-primary;
+
+            &:after {
+                content: "\f058"; // fa-check-circle
+                margin-left: ($o-we-switch-size * 1.7) - $o-we-switch-size;
+            }
+        }
+    }
+
+    &.o_switch_danger_success {
+        > input {
+            &:not(:checked) + span {
+                background: $o-we-color-danger;
+            }
+            &:checked + span {
+                background: $o-we-color-success;
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/systray_items/new_content.js b/addons/website/static/src/systray_items/new_content.js
index 52fafd2dd92..0fcb3dcd6bf 100644
--- a/addons/website/static/src/systray_items/new_content.js
+++ b/addons/website/static/src/systray_items/new_content.js
@@ -2,7 +2,7 @@
 
 import { registry } from '@web/core/registry';
 import { useService } from '@web/core/utils/hooks';
-import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { WebsiteDialog, AddPageDialog } from "@website/components/dialog/dialog";
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 
 const { Component, xml, useState, onWillStart } = owl;
@@ -123,7 +123,15 @@ export class NewContentModal extends Component {
         return this.state.newContentElements.filter(({status}) => status !== MODULE_STATUS.NOT_INSTALLED).concat(this.state.newContentElements.filter(({status}) => status === MODULE_STATUS.NOT_INSTALLED));
     }
 
-    createNewPage() {}
+    createNewPage() {
+        this.dialogs.add(AddPageDialog, {
+            addPage: async (name, addMenu) => {
+                const url = `/website/add/${encodeURIComponent(name)}`;
+                const res = await this.website.sendRequest(url, { add_menu: addMenu || '' });
+                this.website.goToWebsite({ path: res });
+            },
+        });
+    }
 
     async installModule(id, redirectUrl) {
         await this.orm.call(
@@ -148,9 +156,10 @@ export class NewContentModal extends Component {
 
         const {id, name} = this.modulesInfo[element.moduleXmlId];
         const dialogProps = {
-            title: this.env._t("Install"),
+            title: element.title,
             body: _.str.sprintf(this.newContentText.installNeeded, name),
-            confirm: async () => {
+            primaryTitle: this.env._t("Install"),
+            primaryClick: async () => {
                 // Update the NewContentElement with installing icon and text.
                 this.state.newContentElements = this.state.newContentElements.map(el => {
                     if (el.moduleXmlId === element.moduleXmlId) {
@@ -175,9 +184,8 @@ export class NewContentModal extends Component {
                     console.error(error);
                 }
             },
-            cancel: () => {},
         };
-        this.dialogs.add(ConfirmationDialog, dialogProps);
+        this.dialogs.add(WebsiteDialog, dialogProps);
     }
 }
 NewContentModal.template = "website.NewContentModal";
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
index 19ae618fa10..2aec401921f 100644
--- a/addons/website/static/src/systray_items/new_content.xml
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -18,7 +18,7 @@
             <div class="row">
                 <NewContentElement t-if="isDesigner"
                         name="'New Page'"
-                        onClick="() => createNewPage()"
+                        onClick="() => this.createNewPage()"
                         title="'New Page'">
                     <i class="fa fa-file-o"/>
                     <p>Page</p>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 8e019623e76..821087fc54d 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -94,12 +94,6 @@
                                     <t t-set="is_system" t-value="env.user.has_group('base.group_system')"/>
                                     <t t-set="is_designer" t-value="env.user.has_group('website.group_website_designer')"/>
 
-                                    <div t-if='is_designer' class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_page" aria-label="New page" title="New page">
-                                            <i class="fa fa-file-o"/>
-                                            <p>Page</p>
-                                        </a>
-                                    </div>
                                     <t t-set="mod" t-value="env.ref('base.module_website_blog')"/>
                                     <div name="module_website_blog" t-if='is_system' t-cache="is_system"
                                          t-att-data-module-id="mod.id"