diff --git a/addons/website/static/src/js/content/redirect.js b/addons/website/static/src/js/content/redirect.js
index 7ef56e832c6..1e028d57ca5 100644
--- a/addons/website/static/src/js/content/redirect.js
+++ b/addons/website/static/src/js/content/redirect.js
@@ -1,8 +1,6 @@
 /** @odoo-module */
 
 import { session } from '@web/session';
-// import { _t } from "@web/core/l10n/translation"; // FIXME don't know why it does not work
-const _t = str => str;
 
 /**
  * This script, served with frontend pages, displays buttons in the top left
@@ -16,62 +14,22 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     if (!window.frameElement) {
-        const websiteId = document.documentElement.dataset.websiteId;
-        const {pathname, search} = window.location;
-        const params = new URLSearchParams(search);
-        const enableEditor = params.get('enable_editor');
-        const editTranslations = params.get('edit_translations');
-        params.delete('enable_editor');
-        let newSearch = params.toString();
-        if (newSearch) {
-            newSearch = '?' + newSearch;
+        const frontendToBackendNavEl = document.querySelector('.o_frontend_to_backend_nav');
+        if (frontendToBackendNavEl) {
+            frontendToBackendNavEl.classList.add('d-flex');
+            frontendToBackendNavEl.classList.remove('d-none');
         }
-        const backendPath = `/web#action=website.website_preview&path=${encodeURIComponent(`${pathname}${newSearch}`)}&website_id=${websiteId}`;
-
-        const autoredirectToBackendAction = enableEditor || editTranslations;
-        if (autoredirectToBackendAction) {
+        // Auto redirect to frontend if edit/translation mode is requested
+        const currentUrl = new URL(window.location.href);
+        currentUrl.pathname = `/@${currentUrl.pathname}`;
+        if (currentUrl.searchParams.get('enable_editor') || currentUrl.searchParams.get('edit_translations')) {
             document.body.innerHTML = '';
-            if (enableEditor) {
-                window.location.replace(`${backendPath}&enable_editor=1`);
-            } else if (editTranslations) {
-                window.location.replace(`${backendPath}&edit_translations=1`);
-            } else {
-                window.location.replace(backendPath);
-            }
-        } else {
-            // FIXME this UI does not respect access rights yet but we will
-            // probably end up doing it in XML instead of JS anyway.
-            const frontendToBackendBtnClasses = ['position-relative', 'd-flex', 'align-items-center', 'justify-content-center', 'text-decoration-none'];
-            const frontendToBackendNavEl = document.createElement('div');
-            frontendToBackendNavEl.classList.add('o_frontend_to_backend_nav', 'position-fixed', 'd-flex');
-
-            const loadingIconEl = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
-            loadingIconEl.classList.add('o_frontend_to_backend_icon', 'position-absolute');
-            loadingIconEl.setAttribute('width', "24px");
-            loadingIconEl.setAttribute('height', "24px");
-            loadingIconEl.setAttribute('viewBox', "-7 -7 24 24");
-            loadingIconEl.setAttribute('xmlns', "http://www.w3.org/2000/svg");
-            loadingIconEl.setAttribute('preserveAspectRatio', "xMinYMin");
-            loadingIconEl.innerHTML = "<path fill='#FFF' d='M8 8V1a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h7z'/>";
-            frontendToBackendNavEl.appendChild(loadingIconEl);
-
-            const backendAppsButtonEl = document.createElement('a');
-            backendAppsButtonEl.href = '/web';
-            backendAppsButtonEl.title = _t("Go to your Odoo Apps");
-            backendAppsButtonEl.classList.add('o_frontend_to_backend_apps_btn', 'fa', 'fa-th', ...frontendToBackendBtnClasses);
-            frontendToBackendNavEl.appendChild(backendAppsButtonEl);
-
-            const backendEditButtonEl = document.createElement('a');
-            backendEditButtonEl.href = backendPath;
-            backendEditButtonEl.textContent = _t("Edit");
-            backendEditButtonEl.title = _t("Edit this content");
-            backendEditButtonEl.classList.add('o_frontend_to_backend_edit_btn', 'px-3', ...frontendToBackendBtnClasses);
-            const backendEditButtonIconEl = document.createElement('i');
-            backendEditButtonIconEl.classList.add('fa', 'fa-pencil', 'me-1');
-            backendEditButtonEl.prepend(backendEditButtonIconEl);
-            frontendToBackendNavEl.appendChild(backendEditButtonEl);
-
-            document.body.appendChild(frontendToBackendNavEl);
+            window.location.replace(currentUrl.href);
+            return;
+        }
+        const backendEditBtnEl = document.querySelector('.o_frontend_to_backend_edit_btn');
+        if (backendEditBtnEl) {
+            backendEditBtnEl.href = currentUrl.href;
         }
     } else {
         const backendUserDropdownLinkEl = document.getElementById('o_backend_user_dropdown_link');
@@ -79,7 +37,6 @@ document.addEventListener('DOMContentLoaded', () => {
             backendUserDropdownLinkEl.classList.add('d-none');
             backendUserDropdownLinkEl.classList.remove('d-flex');
         }
-
         // Multiple reasons to do this:
         // - It seems like DOMContentLoaded doesn't always trigger when
         //   listened from the parent window
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index dcb590b8e3c..101a26a4e84 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -20,16 +20,29 @@ $-mini-nav-size: 40px;
         cursor: pointer;
     }
 
-    &::before, .o_frontend_to_backend_icon, .o_frontend_to_backend_apps_btn, .o_frontend_to_backend_edit_btn {
+    &::before, .o_frontend_to_backend_icon, .o_frontend_to_backend_buttons {
         transform-origin: top left;
-        transition: transform 400ms ease 0s;
+        transition: transform 400ms ease 1s;
     }
 
-    .o_frontend_to_backend_apps_btn, .o_frontend_to_backend_edit_btn {
-        min-width: $-mini-nav-size;
-        height: $-mini-nav-size;
-        color: #FFFFFF;
+    .o_frontend_to_backend_buttons {
+        transition-duration: 800ms;
+    }
+
+    .o_frontend_to_backend_buttons {
         transform: translateX(-250%) scaleX(0.5);
+
+        > a {
+            min-width: $-mini-nav-size;
+            height: $-mini-nav-size;
+            color: #FFFFFF;
+        }
+    }
+
+    .o_frontend_to_backend_apps_menu {
+        font-size: $o-font-size-base * ($o-root-font-size / 14px);
+        max-height: 70vh;
+        overflow: auto;
     }
 
     @each $-name, $-color in ('edit': $o-enterprise-primary-color, 'apps': $o-enterprise-color) {
@@ -45,10 +58,14 @@ $-mini-nav-size: 40px;
     &:hover {
         &:before, .o_frontend_to_backend_icon {
             transform: scale(.3);
+            transition-delay: 0ms;
+            transition-duration: 400ms;
         }
 
-        .o_frontend_to_backend_apps_btn, .o_frontend_to_backend_edit_btn {
+        .o_frontend_to_backend_buttons {
             transform: translateX(0);
+            transition-delay: 0ms;
+            transition-duration: 400ms;
         }
     }
 }
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 03a9469ed41..dbdfbb51f8e 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -176,6 +176,23 @@
                 <input t-if="optionName in main_object" type="hidden" class="o_page_option_data" autocomplete="off" t-att-name="optionName" t-att-value="main_object[optionName]"/>
             </t>
         </t>
+        <div groups="base.group_user" class="o_frontend_to_backend_nav position-fixed d-none">
+            <svg class="o_frontend_to_backend_icon position-absolute" width="24px" height="24px"
+                 viewBox="-7 -7 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin">
+                <path fill="#FFF" d="M8 8V1a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h7z"/>
+            </svg>
+            <div class="o_frontend_to_backend_buttons d-flex">
+                <a href="#" title="Go to your Odoo Apps" class="o_frontend_to_backend_apps_btn fa fa-th d-flex align-items-center justify-content-center text-decoration-none" data-bs-toggle="dropdown"/>
+                <div class="dropdown-menu o_frontend_to_backend_apps_menu" role="menu">
+                    <a role="menuitem" class="dropdown-item" t-esc="menu['name']"
+                       t-as="menu" t-foreach="env['ir.ui.menu'].load_menus_root()['children']"
+                       t-attf-href="/web#menu_id=#{menu['id']}&amp;action=#{menu['action'] and menu['action'].split(',')[1] or ''}"/>
+                </div>
+                <a groups="website.group_website_publisher" href="#" title="Edit this content" class="o_frontend_to_backend_edit_btn px-3 d-flex align-items-center justify-content-center text-decoration-none">
+                    <i class="fa fa-pencil me-1"/>Edit
+                </a>
+            </div>
+        </div>
     </xpath>
     <xpath expr="//div[@id='wrapwrap']" position="attributes">
         <attribute name="t-attf-class" add="#{'o_header_overlay' if 'header_overlay' in main_object and main_object.header_overlay else ''}" separator=" "/>