diff --git a/addons/auth_totp/static/tests/totp_flow.js b/addons/auth_totp/static/tests/totp_flow.js
index fd9badb6d82..416f85262b2 100644
--- a/addons/auth_totp/static/tests/totp_flow.js
+++ b/addons/auth_totp/static/tests/totp_flow.js
@@ -21,7 +21,7 @@ function openRoot() {
 function openUserProfileAtSecurityTab() {
     return [{
         content: 'Open user account menu',
-        trigger: '.o_user_menu .oe_topbar_name',
+        trigger: '.o_user_menu .dropdown-toggle',
         run: 'click',
     }, {
         content: "Open preferences / profile screen",
@@ -154,7 +154,7 @@ registry.category("web_tour.tours").add('totp_login_enabled', {
     }
 }, {
     content: "check we're logged in",
-    trigger: ".o_user_menu .oe_topbar_name",
+    trigger: ".o_user_menu .dropdown-toggle",
     run() {}
 }]});
 
@@ -191,7 +191,7 @@ registry.category("web_tour.tours").add('totp_login_device', {
     }
 }, {
     content: "check we're logged in",
-    trigger: ".o_user_menu .oe_topbar_name",
+    trigger: ".o_user_menu .dropdown-toggle",
     run: 'click',
 }, {
     content: "click the Log out button",
@@ -212,7 +212,7 @@ registry.category("web_tour.tours").add('totp_login_device', {
     trigger: 'button:contains("Log in")',
 },  {
     content: "check we're logged in without 2FA",
-    trigger: ".o_user_menu .oe_topbar_name",
+    trigger: ".o_user_menu .dropdown-toggle",
     run() {}
 },
 // now go and disable two-factor authentication would be annoying to do in a separate tour
diff --git a/addons/hr/static/tests/tours/hr_employee_flow.js b/addons/hr/static/tests/tours/hr_employee_flow.js
index bd1208b7179..cdfc8f39643 100644
--- a/addons/hr/static/tests/tours/hr_employee_flow.js
+++ b/addons/hr/static/tests/tours/hr_employee_flow.js
@@ -20,7 +20,7 @@ registry.category("web_tour.tours").add('hr_employee_tour', {
     },
     {
         content: "Open user account menu",
-        trigger: ".o_user_menu .oe_topbar_name",
+        trigger: ".o_user_menu .dropdown-toggle",
         run: 'click',
     }, {
         content: "Open My Profile",
diff --git a/addons/mail/static/src/web/activity/activity_menu.xml b/addons/mail/static/src/web/activity/activity_menu.xml
index 491af0f9d97..ddda9dccaf2 100644
--- a/addons/mail/static/src/web/activity/activity_menu.xml
+++ b/addons/mail/static/src/web/activity/activity_menu.xml
@@ -5,7 +5,7 @@
     <Dropdown position="'bottom-end'" autoOpen="false" beforeOpen.bind="onBeforeOpen" menuClass="`p-0 ${ store.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
         <t t-set-slot="toggler">
             <i class="fa fa-lg fa-clock-o" role="img" aria-label="Activities"></i>
-            <span t-if="store.activityCounter" class="o-mail-ActivityMenu-counter badge"><t t-esc="store.activityCounter"/></span>
+            <span t-if="store.activityCounter" class="o-mail-ActivityMenu-counter badge rounded-pill"><t t-esc="store.activityCounter"/></span>
         </t>
         <t t-set-slot="default">
             <div class="o-mail-ActivityMenu bg-view flex-grow-1 d-flex flex-column" t-att-class="{ 'overflow-auto w-100 mh-100': store.isSmall }">
diff --git a/addons/mail/static/src/web/messaging_menu/messaging_menu.xml b/addons/mail/static/src/web/messaging_menu/messaging_menu.xml
index c5ac62ab40a..84bcc98f3c0 100644
--- a/addons/mail/static/src/web/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/web/messaging_menu/messaging_menu.xml
@@ -5,7 +5,7 @@
     <Dropdown t-if="!env.inDiscussApp" autoOpen="false" beforeOpen.bind="beforeOpen" onStateChanged="state => this.state.isOpen = state.open" position="'bottom-end'" menuClass="`p-0 ${ store.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
         <t t-set-slot="toggler">
             <i class="fa fa-lg fa-comments" role="img" aria-label="Messages" t-on-click="() => store.discuss.activeTab = store.isSmall and store.discuss.activeTab === 'mailbox' ? 'all' : store.discuss.activeTab"></i>
-            <span t-if="counter" class="o-mail-MessagingMenu-counter badge"><t t-esc="counter"/></span>
+            <span t-if="counter" class="o-mail-MessagingMenu-counter badge rounded-pill"><t t-esc="counter"/></span>
         </t>
         <t t-set-slot="default">
             <t t-call="mail.MessagingMenu.content"/>
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 880f14aa170..0a2b5cf11d3 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -1,3 +1,10 @@
+// ------- Kanban View -------
+.o_kanban_view {
+    @include media-breakpoint-down(md) {
+        --ControlPanel-border-bottom: none;
+    }
+}
+
 // ------- Kanban renderer -------
 .o_kanban_renderer {
     // ----------------------------------------------------------------------------
@@ -587,7 +594,7 @@
             margin: calc(var(--KanbanRecord-margin-v) * 0.5) var(--KanbanRecord-margin-h);
 
             @include media-breakpoint-down(md) {
-                margin: 0 0 -1px 0;
+                margin: 0 0 -1px 0 0 #{-$border-width};
                 flex-basis: 100%;
             }
 
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
index 22eab2ffe23..f2cfe10e651 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
@@ -16,10 +16,11 @@
 
     // ====== Top-Bar
     .o_burger_menu_topbar {
-        min-height: $o-navbar-height-xs;
+        min-height: $o-navbar-height;
         background-color: $o-burger-topbar-bg;
         color: $o-burger-topbar-color;
-        line-height: $o-navbar-height-xs;
+        line-height: $o-navbar-height;
+        box-shadow: inset 0 -1px 0 $border-color;
 
         .dropdown-toggle, .o_burger_menu_close {
             padding: 0 $o-horizontal-padding;
@@ -28,15 +29,12 @@
 
     // ====== Menu content container (both App's and User's entries)
     .o_burger_menu_content {
-        &.o_burger_menu_dark {
-            background-color: darken($o-burger-base-bg, 5%);
+        &.o_burger_menu_app {
+            background-color: $o-burger-base-bg;
         }
 
         // Menu entries size and layout
         ul {
-            background-color: rgba(invert($o-burger-base-color), .1);
-            box-shadow: inset 0 -1px 0 rgba($o-burger-base-color, .1);
-
             li > div, li {
                 padding-left: $o-horizontal-padding;
             }
@@ -45,14 +43,18 @@
             li {
                 ul > li {
                     &, > div {
-                        text-indent: 2em;
+                        text-indent: .5em;
                     }
                     ul > li {
                         &, > div {
-                            text-indent: 3em;
+                            text-indent: 1em;
                         }
                     }
                 }
+
+                &:last-child {
+                    margin-bottom: map-get($map: $spacers, $key: 2);
+                }
             }
         }
 
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss
index 9711b398434..be6bb703367 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss
@@ -1,7 +1,7 @@
 // = Burger Menu Variables
 // ============================================================================
-$o-burger-topbar-bg: $o-brand-odoo !default;
-$o-burger-topbar-color: $o-white !default;
+$o-burger-base-bg: $o-white !default;
+$o-burger-base-color: $o-gray-800 !default;
 
-$o-burger-base-bg: $o-burger-topbar-bg !default;
-$o-burger-base-color: $o-burger-topbar-color !default;
+$o-burger-topbar-bg: $o-gray-100 !default;
+$o-burger-topbar-color: $o-gray-900 !default;
\ No newline at end of file
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.xml b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
index 79a7c9edfe3..0aa68ce88b5 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
@@ -5,7 +5,7 @@
 
 <div t-name="web.BurgerMenu" owl="1">
     <button
-        class="o_mobile_menu_toggle o-no-caret d-md-none border-0"
+        class="o_mobile_menu_toggle o_nav_entry o-no-caret d-md-none border-0 pe-3"
         title="Toggle menu" aria-label="Toggle menu"
         t-on-click="_openBurger">
         <i class="oi oi-panel-right"/>
@@ -15,7 +15,7 @@
         <div class="o_burger_menu position-fixed top-0 bottom-0 start-100 d-flex flex-column flex-nowrap" t-att-class="transition.className" t-on-touchstart.stop="_onSwipeStart" t-on-touchend.stop="_onSwipeEnd">
           <div class="o_burger_menu_topbar d-flex align-items-center justify-content-between flex-shrink-0 py-0 fs-4"
               t-on-click.stop='_toggleUserMenu'>
-              <small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-view text-body': isUserMenuUnfolded }">
+              <small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-view text-body border-end': isUserMenuUnfolded }">
                   <img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&amp;field=avatar_128&amp;id=' + user.userId" alt="Menu"/>
                   <span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
                   <i t-if="isUserMenuTogglable" class="fa" t-att-class="state.isUserMenuOpened ? 'fa-caret-down' : 'fa-caret-left'"/>
@@ -23,7 +23,7 @@
               <button class="o_burger_menu_close oi oi-close btn d-flex align-items-center h-100 bg-transparent border-0 fs-2 text-reset" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
           </div>
           <nav class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto"
-              t-att-class="{o_burger_menu_dark: !isUserMenuUnfolded, 'bg-view': isUserMenuUnfolded}">
+              t-att-class="{o_burger_menu_app: !isUserMenuUnfolded, 'bg-view': isUserMenuUnfolded}">
               <!-- -->
               <t t-if="isUserMenuUnfolded">
                   <MobileSwitchCompanyMenu t-if="Object.values(company.availableCompanies).length > 1" />
@@ -48,7 +48,12 @@
 
 <t t-name="web.BurgerSection" owl="1">
     <li t-if="section.childrenTree.length" class="ps-0">
-        <div class="py-3 bg-transparent" t-att-class="{ 'fs-4': !isNested }"
+        <div class="bg-transparent"
+            t-att-class="{
+                'fw-bold text-900 pt-3 pb-2': !isNested,
+                'border-top': !isNested &amp;&amp; subMenu_index != 0,
+                'py-2': isNested,
+            }"
             t-att-data-menu-xmlid="section.xmlid" t-esc="section.name"/>
         <ul class="ps-0">
             <t t-foreach="section.childrenTree" t-as="subSection" t-key="subSection_index">
@@ -60,7 +65,11 @@
         </ul>
     </li>
     <li t-else="" t-on-click="() => this._onMenuClicked(section)"  t-att-data-menu-xmlid="section.xmlid"
-        class="py-3" t-att-class="{ 'fs-4': !isNested }">
+        t-att-class="{
+            'fw-bold text-900 py-3': !isNested,
+            'border-top': !isNested &amp;&amp; subMenu_index != 0,
+            'py-2': isNested,
+        }">
         <t t-esc="section.name"/>
     </li>
 </t>
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index 9e1952dfe7f..638a6c3e3b3 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -2,17 +2,16 @@
 // = Main Navbar
 // ============================================================================
 .o_main_navbar {
-    @include print-variable(o-navbar-height, $o-navbar-height-xs);
-
-    @include media-breakpoint-up(lg) {
-        @include print-variable(o-navbar-height, $o-navbar-height-lg);
-    }
+    @include print-variable(o-navbar-height, $o-navbar-height);
 
     display: flex;
     height: var(--o-navbar-height);
     min-width: min-content;
+    padding-top: $o-navbar-padding-v;
+    padding-bottom: $o-navbar-padding-v;
     border-bottom: $o-navbar-border-bottom;
     background: $o-navbar-background;
+    font-size: $o-navbar-font-size;
 
     // = Reset browsers defaults
     // --------------------------------------------------------------------------
@@ -24,27 +23,39 @@
 
     // = General components & behaviours
     // --------------------------------------------------------------------------
-    .dropdown.show > .dropdown-toggle {
-        @extend %-main-navbar-entry-active;
-    }
 
-    .o_nav_entry {
+    .o_nav_entry, .dropdown-toggle {
         @extend %-main-navbar-entry-base;
         @extend %-main-navbar-entry-spacing;
-        @extend %-main-navbar-entry-bg-hover;
-    }
-
-    .dropdown-toggle {
-        @extend %-main-navbar-entry-base;
-        @extend %-main-navbar-entry-spacing;
-        @extend %-main-navbar-entry-bg-hover;
         border: 0;
     }
 
+    .o_menu_sections {
+        .o_nav_entry, .dropdown-toggle {
+            @extend %-main-navbar-entry-bg-hover;
+        }
+
+        .dropdown.show > .dropdown-toggle {
+            @extend %-main-navbar-entry-active;
+        }
+    }
+
+    @if (not $o-navbar-use-pills) {
+        .o_menu_systray {
+            .o_nav_entry, .dropdown-toggle {
+                @extend %-main-navbar-entry-bg-hover;
+            }
+
+            .dropdown.show > .dropdown-toggle {
+                @extend %-main-navbar-entry-active;
+            }
+        }
+    }
+
     .dropdown-menu {
-        margin-top: 0;
         border-top: 0;
-        @include border-top-radius(0);
+        margin-top: $o-navbar-dropdown-menu-margin-top;
+        border-radius: $o-navbar-dropdown-menu-border-radius;
     }
 
     .o_dropdown_menu_group_entry.dropdown-item {
@@ -58,8 +69,9 @@
     // = Navbar Sections & Children
     // --------------------------------------------------------------------------
     .o_navbar_apps_menu .dropdown-toggle {
+        --NavBar-entry-padding-left: #{$o-horizontal-padding};
+
         @extend %-main-navbar-entry-base;
-        padding-left: $o-horizontal-padding;
         font-size: $o-navbar-brand-font-size;
     }
 
@@ -68,6 +80,7 @@
         @extend %-main-navbar-entry-spacing;
         padding-left: 0;
         font-size: $o-navbar-brand-font-size;
+        color: var(--NavBar-brand-color, #{$o-navbar-brand-color});
 
         &:hover {
             background: none;
@@ -75,8 +88,6 @@
     }
 
     .o_menu_sections {
-        width: 0;
-
         .o_more_dropdown_section_group {
             margin-top: .8em;
 
@@ -87,27 +98,16 @@
         }
     }
 
-    .o_menu_systray > * {
-        > a, > .dropdown > a, > button, > label { // <label> is required by website
-            @extend %-main-navbar-entry-base;
-            @extend %-main-navbar-entry-spacing;
-            @extend %-main-navbar-entry-bg-hover;
-
-            @include media-breakpoint-up(lg) {
-                padding: 0 $o-horizontal-padding * .6;
-            }
-
-            .badge {
-                margin-right: -.5em;
-                border: 0;
-                height: $o-navbar-badge-size + $o-navbar-badge-padding + $o-navbar-badge-size-adjust;
-                padding: ($o-navbar-badge-padding * .5) $o-navbar-badge-padding;
-                background-color: var(--o-navbar-badge-bg, #{$o-navbar-badge-bg});
-                font-size: $o-navbar-badge-size;
-                color: var(--o-navbar-badge-color, inherit);
-                text-shadow: var(--o-navbar-badge-text-shadow, #{1px 1px 0 rgba($black, .3)});
-                transform: translate(-10%, -30%);
-            }
+    .o_menu_systray {
+        .badge {
+            margin-right: -.5em;
+            border: 0;
+            padding: ($o-navbar-badge-padding * .5) $o-navbar-badge-padding;
+            background-color: var(--o-navbar-badge-bg, #{$o-navbar-badge-bg});
+            font-size: $o-navbar-badge-size;
+            color: var(--o-navbar-badge-color, $o-navbar-badge-color);
+            text-shadow: var(--o-navbar-badge-text-shadow, #{$o-navbar-badge-text-shadow});
+            transform: translate(-0.6em, -30%);
         }
     }
 }
diff --git a/addons/web/static/src/webclient/navbar/navbar.variables.scss b/addons/web/static/src/webclient/navbar/navbar.variables.scss
index 7f8d3020292..752ae879a86 100644
--- a/addons/web/static/src/webclient/navbar/navbar.variables.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.variables.scss
@@ -1,23 +1,35 @@
 // = Main Navbar Variables
 // ============================================================================
-$o-navbar-height-xs: 46px !default;
-$o-navbar-height-lg: 40px !default;
-$o-navbar-height: $o-navbar-height-lg !default;
+$o-navbar-use-pills: false !default;
+$o-navbar-height: 46px !default;
+$o-navbar-padding-v: 0px !default;
+$o-navbar-font-size: $o-font-size-base !default;
 
 $o-navbar-background: $o-brand-odoo !default;
-
 $o-navbar-border-bottom: 1px solid darken($o-brand-odoo, 10%) !default;
 
-$o-navbar-entry-color: $o-white !default;
-$o-navbar-entry-font-size: $o-font-size-base !default;
+$o-navbar-entry-margin-h: 0 !default;
+$o-navbar-entry-padding-h: .63em !default;
+$o-navbar-entry-border-radius: 0 !default;
+$o-navbar-entry-color: rgba($o-white, .9) !default;
+$o-navbar-entry-color--hover: $o-white !default;
+$o-navbar-entry-font-size: 1em !default;
 $o-navbar-entry-bg--hover: rgba($o-black, .08) !default;
 
-$o-navbar-brand-font-size: $o-navbar-entry-font-size * 1.3 !default;
+$o-navbar-entry-color--active: $o-navbar-entry-color--hover !default;
+$o-navbar-entry-bg--active: $o-navbar-entry-bg--hover !default;
+
+$o-navbar-dropdown-menu-margin-top: 0px !default;
+$o-navbar-dropdown-menu-border-radius: 0 0 $o-border-radius $o-border-radius !default;
+
+$o-navbar-brand-font-size: 1.2em !default;
+$o-navbar-brand-color: $o-navbar-entry-color !default;
 
 $o-navbar-badge-size: 11px !default;
-$o-navbar-badge-size-adjust: 1px !default;
 $o-navbar-badge-padding: 4px !default;
 $o-navbar-badge-bg: $o-success !default;
+$o-navbar-badge-color: inherit !default;
+$o-navbar-badge-text-shadow: 1px 1px 0 rgba($o-black, .3) !default;
 
 // = % PseudoClasses
 //
@@ -28,28 +40,37 @@ $o-navbar-badge-bg: $o-success !default;
     display: flex;
     align-items: center;
     width: auto;
-    height: var(--o-navbar-height, #{$o-navbar-height});
+    height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2});
+    border-radius: $o-navbar-entry-border-radius;
     user-select: none;
     background: transparent;
     font-size: $o-navbar-entry-font-size;
 
-    @include o-hover-text-color(rgba($o-navbar-entry-color, .9), $o-navbar-entry-color);
+    @include o-hover-text-color(
+        var(--NavBar-entry-color, #{$o-navbar-entry-color}),
+        var(--NavBar-entry-color--hover, #{$o-navbar-entry-color--hover})
+    );
 }
 
 %-main-navbar-entry-spacing {
-    padding: 0 $o-horizontal-padding * .75;
-    line-height: var(--o-navbar-height);
+    margin: 0;
+    margin-left: var(--NavBar-entry-margin-left, #{$o-navbar-entry-margin-h});
+    margin-right: var(--NavBar-entry-margin-right, #{$o-navbar-entry-margin-h});
+    padding: 0;
+    padding-left: var(--NavBar-entry-padding-left, #{$o-navbar-entry-padding-h});
+    padding-right: var(--NavBar-entry-padding-right, #{$o-navbar-entry-padding-h});
+    line-height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2});
 }
 
 %-main-navbar-entry-bg-hover {
     &:hover {
-        background-color: $o-navbar-entry-bg--hover;
+        background-color: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover});
     }
 }
 
 %-main-navbar-entry-active {
     &, &:hover, &:focus {
-        background: $o-navbar-entry-bg--hover;
-        color: $o-navbar-entry-color;
+        background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active});
+        color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active});
     }
 }
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index a382786b820..cd2be93347f 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -17,7 +17,7 @@
           t-if="currentApp"
           href="getMenuItemHref(currentApp)"
           t-esc="currentApp.name"
-          class="'o_menu_brand d-none d-md-block'"
+          class="'o_menu_brand d-none d-md-flex'"
           dataset="{ menuXmlid: currentApp.xmlid, section: currentApp.id }"
           onSelected="() => this.onNavBarDropdownItemSelection(currentApp)"
         />
@@ -60,7 +60,7 @@
   </t>
 
   <t t-name="web.NavBar.SectionsMenu" owl="1">
-    <div class="o_menu_sections d-none d-md-flex flex-grow-1 flex-shrink-1" t-ref="appSubMenus" role="menu">
+    <div class="o_menu_sections d-none d-md-flex flex-grow-1 flex-shrink-1 w-0" t-ref="appSubMenus" role="menu">
 
       <t t-foreach="sections" t-as="section" t-key="section.id">
         <t
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.scss b/addons/web/static/src/webclient/user_menu/user_menu.scss
index e4432ca44cf..132afe3d1a7 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.scss
+++ b/addons/web/static/src/webclient/user_menu/user_menu.scss
@@ -1,5 +1,9 @@
 .o_user_menu .dropdown-toggle {
-    --Avatar-size: calc(var(--o-navbar-height) - 20px);
+    --NavBar-entry-padding-right: 0;
 
-    padding-right: $o-horizontal-padding;
+    margin-right: $o-horizontal-padding;
+
+    .o_user_avatar {
+        height: calc(var(--o-navbar-height) - 20px);
+    }
 }
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.xml b/addons/web/static/src/webclient/user_menu/user_menu.xml
index 40135aaf09a..0f19fecf16a 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu.xml
@@ -4,8 +4,13 @@
     <t t-name="web.UserMenu" owl="1">
         <Dropdown class="'o_user_menu d-none d-md-block pe-0'" togglerClass="'py-1 py-lg-0'">
             <t t-set-slot="toggler">
-                <img class="o_user_avatar o_avatar h-75 py-1 rounded" t-att-src="source" alt="User"/>
-                <span class="oe_topbar_name d-none d-lg-block ms-1"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
+                <img class="o_avatar o_user_avatar rounded" t-att-src="source" alt="User"/>
+                <small class="oe_topbar_name d-none ms-2 text-start smaller lh-1 text-truncate"  t-att-class="{'d-lg-inline-block' : env.debug}" style="max-width: 200px">
+                    <t t-esc="user.name"/>
+                    <mark class="d-block font-monospace text-truncate">
+                        <i class="fa fa-database oi-small me-1"/><t t-esc="user.db.name"/>
+                    </mark>
+                </small>
             </t>
             <t t-foreach="getElements()" t-as="element" t-key="element_index">
                 <t t-if="!element.hide">
diff --git a/addons/web/static/tests/webclient/user_menu_tests.js b/addons/web/static/tests/webclient/user_menu_tests.js
index 9443c1678b0..14315af4720 100644
--- a/addons/web/static/tests/webclient/user_menu_tests.js
+++ b/addons/web/static/tests/webclient/user_menu_tests.js
@@ -100,8 +100,6 @@ QUnit.test("can be rendered", async (assert) => {
         target.querySelector("img.o_user_avatar").dataset.src,
         "http://lordofthering/web/image?model=res.users&field=avatar_128&id=7"
     );
-    assert.containsOnce(target, "span.oe_topbar_name");
-    assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron");
     assert.containsNone(target, ".dropdown-menu .dropdown-item");
     await click(target.querySelector("button.dropdown-toggle"));
     assert.containsN(target, ".dropdown-menu .dropdown-item", 4);
@@ -132,8 +130,8 @@ QUnit.test("display the correct name in debug mode", async (assert) => {
     env = await makeTestEnv();
     await mount(UserMenu, target, { env });
     assert.containsOnce(target, "img.o_user_avatar");
-    assert.containsOnce(target, "span.oe_topbar_name");
-    assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron (test)");
+    assert.containsOnce(target, "small.oe_topbar_name");
+    assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron" + "test");
 });
 
 QUnit.test("can execute the callback of settings", async (assert) => {
diff --git a/addons/website/static/src/systray_items/edit_website.scss b/addons/website/static/src/systray_items/edit_website.scss
index facb2a8946d..d82eeabc07f 100644
--- a/addons/website/static/src/systray_items/edit_website.scss
+++ b/addons/website/static/src/systray_items/edit_website.scss
@@ -1,5 +1,3 @@
 .o_edit_website_container {
-    &:not(.o_translatable) {
-        @include button-variant($o-brand-primary, $o-brand-primary);
-    }
+    margin: -$o-navbar-padding-v 0;
 }
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index 96a7dd2f08b..a164c8c16f3 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 <t t-name="website.EditWebsiteSystray" owl="1">
     <div class="o_edit_website_container d-none d-md-block" t-att-class="{ o_translatable: translatable }">
-        <a href="#" accesskey="a" t-on-click="startEdit" t-att-class="{ 'text-reset': !translatable }">
+        <a href="#" class="btn btn-primary d-flex align-items-center h-100 rounded-0 border-0" accesskey="a" t-on-click="startEdit">
             <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"/>
diff --git a/addons/website/static/src/systray_items/mobile_preview.xml b/addons/website/static/src/systray_items/mobile_preview.xml
index 5ebf76115fc..9070534f7f0 100644
--- a/addons/website/static/src/systray_items/mobile_preview.xml
+++ b/addons/website/static/src/systray_items/mobile_preview.xml
@@ -4,7 +4,7 @@
     <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">
+        <a href="#" accesskey="v" class="o_nav_entry">
             <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 d13f03f90aa..a9dd8d13fcf 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" owl="1">
     <div class="o_menu_systray_item o_new_content_container d-none d-md-block" t-on-click="onClick">
-        <a href="#" accesskey="c"><span class="fa fa-plus me-2"/>New</a>
+        <a href="#" accesskey="c" class="o_nav_entry"><span class="fa fa-plus me-2"/>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 d035816ab3e..5f1284037a6 100644
--- a/addons/website/static/src/systray_items/publish.js
+++ b/addons/website/static/src/systray_items/publish.js
@@ -55,7 +55,7 @@ class PublishSystray extends Component {
 }
 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="#">
+    <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"/>
     </a>
diff --git a/addons/website/static/src/systray_items/translate_website.scss b/addons/website/static/src/systray_items/translate_website.scss
index f8fcfdcfb5a..4397f19ce20 100644
--- a/addons/website/static/src/systray_items/translate_website.scss
+++ b/addons/website/static/src/systray_items/translate_website.scss
@@ -1,3 +1,3 @@
 .o_translate_website_container {
-    @include button-variant($o-brand-primary, $o-brand-primary);
+    margin: -$o-navbar-padding-v 0;
 }
diff --git a/addons/website/static/src/systray_items/translate_website.xml b/addons/website/static/src/systray_items/translate_website.xml
index b60623cafd6..9849a8c31e8 100644
--- a/addons/website/static/src/systray_items/translate_website.xml
+++ b/addons/website/static/src/systray_items/translate_website.xml
@@ -3,7 +3,7 @@
 
     <t t-name="website.TranslateWebsiteSystray" owl="1">
         <div class="o_translate_website_container d-none d-md-block">
-            <a href="#" accesskey="t" t-on-click="startTranslate" class="text-reset">
+            <a href="#" accesskey="t" t-on-click="startTranslate" class="btn btn-secondary d-flex align-items-center h-100 rounded-0 border-0">
                 <span t-if="websiteContext.translation" class="fa fa-refresh fa-spin me-2"/>
                 TRANSLATE
             </a>
diff --git a/addons/website/static/tests/tours/reset_password.js b/addons/website/static/tests/tours/reset_password.js
index 7cd6cecf179..3f731e89a32 100644
--- a/addons/website/static/tests/tours/reset_password.js
+++ b/addons/website/static/tests/tours/reset_password.js
@@ -21,7 +21,7 @@ registry.category("web_tour.tours").add('website_reset_password', {
     },
     {
         content: "check that we're logged in",
-        trigger: '.oe_topbar_name:contains("The King")',
+        trigger: '.o_user_menu .dropdown-toggle',
         run: function () {}
     },
 ]});
diff --git a/odoo/addons/test_apikeys/static/tests/apikey_flow.js b/odoo/addons/test_apikeys/static/tests/apikey_flow.js
index 8853a9b830f..c9a212ffa7d 100644
--- a/odoo/addons/test_apikeys/static/tests/apikey_flow.js
+++ b/odoo/addons/test_apikeys/static/tests/apikey_flow.js
@@ -8,7 +8,7 @@ registry.category("web_tour.tours").add('apikeys_tour_setup', {
     url: '/web?debug=1', // Needed as API key part is now only displayed in debug mode
     steps: [{
     content: 'Open user account menu',
-    trigger: '.o_user_menu .oe_topbar_name',
+    trigger: '.o_user_menu .dropdown-toggle',
     run: 'click',
 }, {
     content: "Open preferences / profile screen",
@@ -67,7 +67,7 @@ registry.category("web_tour.tours").add('apikeys_tour_teardown', {
     url: '/web?debug=1', // Needed as API key part is now only displayed in debug mode
     steps: [{
     content: 'Open preferences',
-    trigger: '.o_user_menu .oe_topbar_name',
+    trigger: '.o_user_menu .dropdown-toggle',
 }, {
     trigger: '[data-menu=settings]',
 }, {
@@ -87,7 +87,7 @@ registry.category("web_tour.tours").add('apikeys_tour_teardown', {
     trigger: 'button:contains(Confirm Password)',
 }, {
     content: 'Re-open preferences again',
-    trigger: '.o_user_menu .oe_topbar_name',
+    trigger: '.o_user_menu .dropdown-toggle',
 }, {
     trigger: '[data-menu=settings]',
 }, {