diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 6c911e67330..2288e6296d7 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -273,6 +273,8 @@
             'website/static/src/components/editor/editor.scss',
             'website/static/src/components/editor/editor.xml',
             'website/static/src/components/navbar/navbar.js',
+            'website/static/src/components/navbar/navbar.scss',
+            'website/static/src/components/navbar/navbar.xml',
             'website/static/src/components/burger_menu/burger_menu.js',
             'website/static/src/components/switch/switch.js',
             'website/static/src/components/switch/switch.scss',
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index d4f198c8c64..8d373a0c010 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -44,11 +44,18 @@ patch(NavBar.prototype, {
         useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', renderAndAdapt);
     },
 
+    get shouldDisplayWebsiteSystray() {
+        return this.websiteService.currentWebsite && this.websiteService.isRestrictedEditor;
+    },
+
+    // Somehow a setter is needed in `patch()` to avoid an owl error.
+    set shouldDisplayWebsiteSystray(_) {},
+
     /**
      * @override
      */
     get systrayItems() {
-        if (this.websiteService.currentWebsite && this.websiteService.isRestrictedEditor) {
+        if (this.shouldDisplayWebsiteSystray) {
             return websiteSystrayRegistry
                 .getEntries()
                 .map(([key, value], index) => ({ key, ...value, index }))
diff --git a/addons/website/static/src/components/navbar/navbar.scss b/addons/website/static/src/components/navbar/navbar.scss
new file mode 100644
index 00000000000..e5a99466791
--- /dev/null
+++ b/addons/website/static/src/components/navbar/navbar.scss
@@ -0,0 +1,9 @@
+.o_menu_systray.o_website_systray {
+    @if $o-navbar-use-pills {
+        --NavBar-entry-margin-left: #{$o-navbar-entry-padding-h * 0.5};
+        --NavBar-entry-margin-right: #{$o-navbar-entry-padding-h * 0.5};
+    } @else {
+        --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h};
+        --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h};
+    }
+}
diff --git a/addons/website/static/src/components/navbar/navbar.xml b/addons/website/static/src/components/navbar/navbar.xml
new file mode 100644
index 00000000000..9a6292a0dbc
--- /dev/null
+++ b/addons/website/static/src/components/navbar/navbar.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1">
+    <xpath expr="//div[hasclass('o_menu_systray')]" position="attributes">
+        <attribute name="t-attf-class" add="{{shouldDisplayWebsiteSystray ? 'o_website_systray': ''}}" separator=" "/>
+    </xpath>
+</t>
+
+</templates>
diff --git a/addons/website/static/src/systray_items/edit_website.scss b/addons/website/static/src/systray_items/edit_website.scss
index d82eeabc07f..acc5452260a 100644
--- a/addons/website/static/src/systray_items/edit_website.scss
+++ b/addons/website/static/src/systray_items/edit_website.scss
@@ -1,3 +1,10 @@
 .o_edit_website_container {
     margin: -$o-navbar-padding-v 0;
+
+    &.o_not_translatable .o_nav_entry {
+        &, &:hover {
+            background-color: inherit;
+            color: inherit;
+        }
+    }
 }
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index 21417080edf..081f7fb7ebb 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -1,11 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 <t t-name="website.EditWebsiteSystray">
-    <div class="o_edit_website_container d-none d-md-block" t-att-class="{ o_translatable: translatable }">
-        <a href="#" class="h-100" accesskey="a" t-on-click="startEdit" t-att-class="{'btn btn-primary d-flex align-items-center rounded-0 border-0 fw-normal': !translatable, 'o_nav_entry': translatable}">
-            <span t-if="translatable" class="fa fa-pencil me-2"/>
-            <span t-else="" class="fa me-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
-            <t t-esc="label"/>
+    <div class="o_menu_systray_item o_edit_website_container d-none d-md-block" t-att-class="{ o_not_translatable: !translatable }">
+        <a href="#" class="h-100" accesskey="a" t-on-click="startEdit" t-att-class="{'btn btn-primary d-flex align-items-center ps-0 pe-2 rounded-0 border-0 fw-normal': !translatable, 'o_nav_entry': translatable}">
+            <span t-att-class="{'o_nav_entry' : !translatable}">
+                <span t-if="translatable" class="fa fa-pencil me-1"/>
+                <span t-else="" class="fa" t-att-class="{ 'fa-refresh fa-spin me-2': this.state.isLoading, 'fa-pencil me-1': !this.state.isLoading }"/>
+                <t t-esc="label"/>
+            </span>
         </a>
     </div>
 </t>
diff --git a/addons/website/static/src/systray_items/mobile_preview.xml b/addons/website/static/src/systray_items/mobile_preview.xml
index ada0138cde1..4a41a70ba5f 100644
--- a/addons/website/static/src/systray_items/mobile_preview.xml
+++ b/addons/website/static/src/systray_items/mobile_preview.xml
@@ -2,9 +2,9 @@
 <templates xml:space="preserve">
 <t t-name="website.MobilePreviewSystray">
     <div class="o_mobile_preview o_menu_systray_item d-none d-md-block"
-         t-on-click="() => this.websiteService.context.isMobile = !this.websiteService.context.isMobile"
          t-att-class="{ 'o_mobile_preview_active': this.state.isMobile }">
-        <a href="#" accesskey="v" class="o_nav_entry">
+        <a href="#" accesskey="v" class="o_nav_entry"
+           t-on-click="() => this.websiteService.context.isMobile = !this.websiteService.context.isMobile">
             <span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-lg fa-mobile"/>
         </a>
     </div>
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
index b03f2883c06..7bc26b9bf06 100644
--- a/addons/website/static/src/systray_items/new_content.xml
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -41,7 +41,7 @@
 
 <t t-name="website.NewContentSystray">
     <div class="o_menu_systray_item o_new_content_container d-none d-md-block" t-on-click="onClick">
-        <a href="#" accesskey="c" class="o_nav_entry"><span class="fa fa-plus me-2"/>New</a>
+        <a href="#" accesskey="c" class="o_nav_entry"><span class="fa fa-plus me-1"/>New</a>
         <NewContentModal t-if="websiteContext.showNewContentModal"/>
     </div>
 </t>
diff --git a/addons/website/static/src/systray_items/publish.js b/addons/website/static/src/systray_items/publish.js
index 01038609012..8d1f05f5fe0 100644
--- a/addons/website/static/src/systray_items/publish.js
+++ b/addons/website/static/src/systray_items/publish.js
@@ -58,7 +58,7 @@ PublishSystray.template = xml`
 <div t-on-click="publishContent" class="o_menu_systray_item d-md-flex ms-auto" data-hotkey="p" t-att-data-processing="state.processing and 1">
     <a href="#" class="o_nav_entry">
         <Switch value="state.published" disabled="true" extraClasses="'mb-0 o_switch_danger_success'"/>
-        <span class="d-none d-md-block ms-2" t-esc="this.label"/>
+        <span class="d-none d-md-block ms-1" t-esc="this.label"/>
     </a>
 </div>`;
 PublishSystray.components = {
diff --git a/addons/website/static/src/systray_items/translate_website.scss b/addons/website/static/src/systray_items/translate_website.scss
index 4397f19ce20..8f7f53168e3 100644
--- a/addons/website/static/src/systray_items/translate_website.scss
+++ b/addons/website/static/src/systray_items/translate_website.scss
@@ -1,3 +1,10 @@
 .o_translate_website_container {
     margin: -$o-navbar-padding-v 0;
+
+    .btn .o_nav_entry {
+        &, &:hover {
+            background-color: inherit;
+            color: inherit;
+        }
+    }
 }
diff --git a/addons/website/static/src/systray_items/translate_website.xml b/addons/website/static/src/systray_items/translate_website.xml
index 41499849783..f46dd9522ea 100644
--- a/addons/website/static/src/systray_items/translate_website.xml
+++ b/addons/website/static/src/systray_items/translate_website.xml
@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-    <t t-name="website.TranslateWebsiteSystray">
-        <div class="o_translate_website_container d-none d-md-block">
-            <a href="#" accesskey="t" t-on-click="startTranslate" class="btn btn-primary d-flex align-items-center h-100 rounded-0 border-0 fw-normal">
+<t t-name="website.TranslateWebsiteSystray">
+    <div class="o_menu_systray_item o_translate_website_container d-none d-md-block">
+        <a href="#" accesskey="t" t-on-click="startTranslate" class="btn btn-primary d-flex align-items-center h-100 px-0 rounded-0 border-0 fw-normal">
+            <span class="o_nav_entry">
                 <span t-if="websiteContext.translation" class="fa fa-refresh fa-spin me-2"/>
                 Translate
-            </a>
-        </div>
-    </t>
+            </span>
+        </a>
+    </div>
+</t>
+
 </templates>
diff --git a/addons/website/static/src/systray_items/website_switcher.xml b/addons/website/static/src/systray_items/website_switcher.xml
index d5cc7c9022a..229deed7ec3 100644
--- a/addons/website/static/src/systray_items/website_switcher.xml
+++ b/addons/website/static/src/systray_items/website_switcher.xml
@@ -4,7 +4,7 @@
     <Dropdown class="'o_menu_systray_item o_website_switcher_container'" hotkey="'w'">
         <t t-set-slot="toggler">
             <div class="d-none d-md-block">
-                <span t-esc="websiteService.currentWebsite.name" class="me-2"/>
+                <span t-esc="websiteService.currentWebsite.name" class="me-1"/>
                 <i class="fa fa-caret-down"/>
             </div>
             <div class="d-md-none">
diff --git a/addons/website/static/tests/tours/snippet_table_of_content.js b/addons/website/static/tests/tours/snippet_table_of_content.js
index 9587a153ade..0c5c0a2dd03 100644
--- a/addons/website/static/tests/tours/snippet_table_of_content.js
+++ b/addons/website/static/tests/tours/snippet_table_of_content.js
@@ -68,7 +68,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_table_of_content', {
     },
     {
         content: "Toggle the mobile view",
-        trigger: '.o_mobile_preview',
+        trigger: '.o_mobile_preview > a',
     },
     {
         content: "Check that we have the good TOC on mobile",
diff --git a/addons/website_blog/static/src/js/tours/website_blog.js b/addons/website_blog/static/src/js/tours/website_blog.js
index 9c6e109ed34..6619175d1cc 100644
--- a/addons/website_blog/static/src/js/tours/website_blog.js
+++ b/addons/website_blog/static/src/js/tours/website_blog.js
@@ -75,11 +75,11 @@
     },
     ...wTourUtils.clickOnSave(),
     {
-        trigger: ".o_menu_systray_item.o_mobile_preview",
+        trigger: ".o_menu_systray_item.o_mobile_preview > a",
         content: markup(_t("Use this icon to preview your blog post on <b>mobile devices</b>.")),
         position: "bottom",
     }, {
-        trigger: ".o_menu_systray_item.o_mobile_preview",
+        trigger: ".o_menu_systray_item.o_mobile_preview > a",
         extra_trigger: '.o_website_preview.o_is_mobile',
         content: _t("Once you have reviewed the content on mobile, you can switch back to the normal view by clicking here again"),
         position: "right",