diff --git a/addons/google_drive/static/src/xml/gdrive.xml b/addons/google_drive/static/src/xml/gdrive.xml
index d12b3459516..db1e3a11c8a 100644
--- a/addons/google_drive/static/src/xml/gdrive.xml
+++ b/addons/google_drive/static/src/xml/gdrive.xml
@@ -1,7 +1,7 @@
 <templates>
     <t t-name="GoogleDriveMenu" owl="1">
         <li>
-            <ul class="o_embed_menu">
+            <ul class="o_embed_menu p-0">
                 <li t-foreach="props.items" t-as="gdriveItem" t-key="gdriveItem.id"
                     role="menuitem"
                     class="o_menu_item oe_share_gdoc_item dropdown-item"
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 8f9f5875486..90559898922 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -123,7 +123,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/web_calendar.scss',
             'web/static/src/legacy/scss/search_view.scss',
             'web/static/src/legacy/scss/search_panel.scss',
-            'web/static/src/legacy/scss/dropdown_menu.scss',
             'web/static/src/legacy/scss/data_export.scss',
             'base/static/src/scss/onboarding.scss',
             'web/static/src/legacy/scss/attachment_preview.scss',
diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index 09825e24f78..dfbd68405b9 100644
--- a/addons/web/static/src/core/debug/debug_menu.xml
+++ b/addons/web/static/src/core/debug/debug_menu.xml
@@ -5,7 +5,7 @@
         <Dropdown class="o_debug_manager"
           beforeOpen="beforeOpenDropdown"
           t-on-dropdown-item-selected.stop="onDropdownItemSelected"
-          menuClass="'o_dropdown_menu_right'">
+          togglerClass="'btn btn-link'">
             <span class="fa fa-bug"/>
             <t t-set-slot="menu">
                 <t t-foreach="getElements()" t-as="element" t-key="element_index">
diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index 0901cbb08bf..64fac3d8ff1 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -1,59 +1,114 @@
-.o_dropdown {
-  display: inline-block;
-  position: relative;
-}
-
-// Menu
-ul.o_dropdown_menu {
-  background-color: $white;
-  border: 1px solid $gray-300;
-  border-radius: 3px;
-  box-shadow: 0 6px 12px -4px rgba($black, 0.25);
-  color: $o-main-text-color;
-  list-style: none;
-  margin: 0;
-  max-height: 90vh;
-  overflow: auto;
-  padding: 0.5rem 0;
-  position: absolute;
+// = Default Boostrap Classes customizations
+// ----------------------------------------------------------------------------
+.dropdown-menu {
   min-width: 100%;
-  z-index: 1000;
+  max-height: 70vh;
+  overflow: auto;
+  background-clip: border-box;
+  box-shadow: $o-dropdown-box-shadow;
+}
 
-  &.o_dropdown_menu_right {
-    right: 0;
-    left: auto;
+.dropdown-item {
+  &.active {
+    position: relative;
+    @extend .font-weight-bold;
+
+    &:before {
+      @include o-position-absolute(0);
+      transform: translate(-1.5em, 90%);
+      font: .7em/1em FontAwesome;
+      color: $primary;
+      content: "\f00c";
+    }
+  }
+
+  &.selected { // Legacy
+    @extend .dropdown-item.active;
+  }
+
+  // Using <a> tags inside a '.dropdown-item' elements  should not be necessary
+  // since the class in usually applied to the <a> tag itself.
+  // The following rules will handle custom layouts needs (eg '.o_user_menu').
+  &:not(.disabled):not(:disabled) a:not(.disabled):not(:disabled) {
+    @include o-hover-text-color($dropdown-link-color, $dropdown-link-hover-color);
+    font-weight: inherit;
+  }
+
+  &.disabled a, &:disabled a {
+    @include o-hover-text-color(
+      $dropdown-link-disabled-color,
+      $dropdown-link-disabled-color);
   }
 }
 
-// Toggler and items
-button.o_dropdown_toggler,
-li.o_dropdown_item {
-  background-color: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0 1.6rem;
-  position: relative;
-  user-select: none;
-  white-space: nowrap;
+.dropdown-header {
+  @extend .font-weight-bold;
+  padding-bottom: .1em;
 
-  * {
-    color: inherit;
+  &:not(:first-child) {
+    margin-top: .3em;
+  }
+}
+
+.dropdown-divider:first-child {
+  display: none;
+}
+
+.o_rtl {
+  .dropdown-menu {
+    @extend .dropdown-menu-right;
+  }
+}
+
+// = Extend Owl custom classes to visually match Boostrap ones
+// ----------------------------------------------------------------------------
+.o_dropdown {
+  @extend .dropdown;
+
+  &_menu {
+    @extend .dropdown-menu;
+
+    &.o_dropdown_menu_right {
+      @extend .dropdown-menu-right;
+    }
   }
 
+  &_item {
+    @extend .dropdown-item;
+
+    &.o_dropdown_active {
+      @extend .dropdown-item:hover;
+    }
+  }
+
+  &_menu_group {
+    @extend .dropdown-header;
+  }
+}
+
+// = Owl components specific rules
+// -----------------------------------------------------------------------------
+.o_dropdown_item:not(.disabled):not(:disabled) {
+  // Needed 'cause <DropdownItem> generate <li> html tags that for browsers are
+  // normally not clickable.
+  cursor: pointer;
+}
+
+button.o_dropdown_toggler, button.o_dropdown_toggler_btn {
   > span {
     min-width: max-content;
   }
 
-  &:focus,
-  &:active,
-  &:focus:active,
-  &.o_dropdown_active {
+  &%--state-active {
     outline: none;
+    box-shadow: none !important;
   }
 
-  &:hover,
   &.o_dropdown_active {
-    background-color: rgba($black, 0.08);
+    @extend %--state-active;
+  }
+
+  @include hover-focus-active() {
+    @extend %--state-active;
   }
 }
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index 648f02ef00b..5027db86d66 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -14,7 +14,7 @@
           <t t-slot="default" />
         </span>
       </button>
-      <ul t-if="state.open" class="o_dropdown_menu" t-att-class="props.menuClass">
+      <ul t-if="state.open" class="o_dropdown_menu d-block overflow-auto" t-att-class="props.menuClass">
         <t t-slot="menu" />
       </ul>
     </div>
diff --git a/addons/web/static/src/legacy/js/views/graph/graph_controller.js b/addons/web/static/src/legacy/js/views/graph/graph_controller.js
index b7bb10ea0c2..ec07282893c 100644
--- a/addons/web/static/src/legacy/js/views/graph/graph_controller.js
+++ b/addons/web/static/src/legacy/js/views/graph/graph_controller.js
@@ -195,7 +195,7 @@ var GraphController = AbstractController.extend({
         // Update button classes accordingly to the current mode
         const buttons = actionsContainer.querySelectorAll('.o_dropdown_toggler_btn');
         for (const button of buttons) {
-            button.classList.remove('o_dropdown_toggler_btn', 'btn-secondary');
+            button.classList.remove('btn-secondary');
             if (this.isEmbedded) {
                 button.classList.add('btn-outline-secondary');
             } else {
diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index c1ad6682116..b6b34f32400 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
@@ -24,6 +24,12 @@ $black:    #000 !default;
 $primary: $o-brand-primary !default;
 $secondary: $white !default;
 
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: false !default; // Disable pseudo element caret on .dropdown-toggle.
+
 // Body
 //
 // Settings for the `<body>` element.
@@ -93,10 +99,15 @@ $dropdown-border-color: $gray-300 !default;
 
 $dropdown-link-color: $o-main-text-color !default;
 $dropdown-link-hover-color: $gray-900 !default;
-$dropdown-link-hover-bg: $gray-200 !default;
+$dropdown-link-hover-bg: rgba($black, 0.08) !default;
 
 $dropdown-link-active-color: $gray-900 !default;
-$dropdown-link-active-bg: $gray-300 !default;
+$dropdown-link-active-bg: transparent !default;
+
+$dropdown-link-disabled-color: $o-main-color-muted !default;
+
+$dropdown-item-padding-y: $o-dropdown-vpadding !default;
+$dropdown-item-padding-x: $o-dropdown-hpadding !default;
 
 // Z-index master list
 
diff --git a/addons/web/static/src/legacy/scss/dropdown.scss b/addons/web/static/src/legacy/scss/dropdown.scss
index 30db84f2b3d..d8a6dec9f08 100644
--- a/addons/web/static/src/legacy/scss/dropdown.scss
+++ b/addons/web/static/src/legacy/scss/dropdown.scss
@@ -1,32 +1,33 @@
-%dropdown-li-a-padding {
-    padding: 3px $o-dropdown-hpadding;
-}
+// = jQueryUI dropdown adaptations
+// ----------------------------------------------------------------------------
+.ui-widget.ui-autocomplete {
+    @extend .dropdown-menu;
+    top: 0;       // Compute initial position
+    min-width: 0; // Compute initial width
 
-.ui-autocomplete { // Copy style of bootstrap dropdown
-    background-image: none;
-    background-color: $dropdown-bg;
-    border: $dropdown-border-width solid $dropdown-border-color;
-    font-size: $font-size-base;
-    padding: 5px 0px;
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
+    // Needed because .ui-widget are rendered at a
+    // lower stacking contex compared to modals.
+    z-index: $zindex-modal + 1;
 
     .ui-menu-item {
         padding: 0;
-        > a {
-            display: block;
-            color: $dropdown-link-color;
 
-            @extend %dropdown-li-a-padding;
+        > a {
+            @extend .dropdown-item;
 
             &.ui-state-active {
-                border: none;
-                font-weight: normal;
                 margin: 0;
+                border: none;
+                font-weight: $font-weight-normal;
+                color: $dropdown-link-hover-color;
+                background-color: $dropdown-link-hover-bg;
             }
         }
+
         &.o_m2o_dropdown_option, &.o_m2o_start_typing {
-            text-indent: 20px
+            text-indent: $o-dropdown-hpadding * .5;
         }
+
         &.o_m2o_start_typing {
             font-style: italic;
             cursor: default;
@@ -36,56 +37,3 @@
         }
     }
 }
-
-.dropdown-menu {
-    box-shadow: 0 6px 12px -4px rgba(black, 0.25);
-
-    .o_inline_dropdown {
-        position: relative;
-
-        & > .dropdown-menu {
-            top: 0;
-            left: 100%;
-        }
-        &:hover .dropdown-menu {
-            display: block;
-        }
-    }
-}
-
-@mixin dropdown-menu-mixin {
-    .show .dropdown-menu {
-        > * {
-            position: relative; // to allow absolute positionning inside the items
-        }
-
-        .dropdown-item {
-            &:focus, &:active, &:focus:active {
-                outline: none;
-            }
-
-            @extend %dropdown-li-a-padding;
-        }
-
-        .dropdown-header {
-            @extend %dropdown-li-a-padding;
-            color: $o-main-text-color;
-
-            @include media-breakpoint-down(sm) {
-                color: white;
-                text-decoration: underline;
-            }
-        }
-    }
-}
-
-@include dropdown-menu-mixin;
-.navbar-nav {
-    @include dropdown-menu-mixin;
-}
-
-.o_rtl {
-    .dropdown-menu {
-        left: auto;
-    }
-}
diff --git a/addons/web/static/src/legacy/scss/dropdown_extra.scss b/addons/web/static/src/legacy/scss/dropdown_extra.scss
index e4f68ec0447..ad1df061a2f 100644
--- a/addons/web/static/src/legacy/scss/dropdown_extra.scss
+++ b/addons/web/static/src/legacy/scss/dropdown_extra.scss
@@ -1,60 +1,12 @@
 .ui-autocomplete .ui-menu-item {
-    > a.ui-state-active {
-        background-color: $o-brand-odoo;
-        color: white;
-    }
     &.o_m2o_dropdown_option > a {
         color: $o-brand-odoo;
+
         &.ui-state-active {
-            color: white;
+            color: darken($o-brand-odoo, 10%);
         }
     }
     &.o_m2o_start_typing > a.ui-state-active {
         color: $dropdown-link-color;
     }
 }
-
-.oe_dropdown, .oe_dropdown_toggle {
-    position: relative;
-    cursor: pointer;
-}
-.oe_dropdown_toggle {
-    color: #2B2B2B;
-    font-weight: normal;
-}
-.oe_dropdown_menu {
-    display: none;
-    position: absolute;
-    z-index: 3;
-    margin: 0;
-    border: 1px solid #afafb6;
-    background: white;
-    padding: 4px 0;
-    min-width: 140px;
-    text-align: left;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
-    &.oe_opened {
-        display: block;
-    }
-    > li {
-        list-style-type: none;
-        float: none;
-        display: block;
-        position: relative;
-        margin: 0;
-        padding: 2px 8px;
-        &:hover {
-            background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
-            box-shadow: none;
-        }
-        > a {
-            white-space: nowrap;
-            display: block;
-            color: #4c4c4c;
-            text-decoration: none;
-            &:hover {
-                text-decoration: none;
-            }
-        }
-    }
-}
diff --git a/addons/web/static/src/legacy/scss/dropdown_menu.scss b/addons/web/static/src/legacy/scss/dropdown_menu.scss
deleted file mode 100644
index d2da44a3125..00000000000
--- a/addons/web/static/src/legacy/scss/dropdown_menu.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.o_dropdown_menu {
-    > .dropdown-divider:first-child {
-        display: none;
-    }
-
-    min-width: 150px;
-    max-height: calc(100vh - 140px); // FIXME
-    overflow: auto;
-
-    .o_menu_item {
-        position: relative;
-
-        > .dropdown-item {
-            color: $o-main-text-color;
-
-            &:hover {
-                color: darken($o-main-text-color, 10%);
-            }
-        }
-    }
-}
-
-.dropdown-item {
-    position: relative;
-    color: $o-main-text-color;
-
-    &:hover {
-        color: darken($o-main-text-color, 10%);
-    }
-
-    &.selected { // TODO why not using standard BS4 "active" class ?
-        color: darken($o-main-text-color, 10%);
-        font-weight: bold;
-
-        &:before {
-            font-family: FontAwesome;
-            position: absolute;
-            left: 4px;
-            content: "\f00c";
-        }
-    }
-    .o_trash_button {
-        padding-left: 8px;
-        @include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
-    }
-}
\ No newline at end of file
diff --git a/addons/web/static/src/legacy/scss/kanban_dashboard.scss b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
index 92dc3aaa586..fe06c5c1031 100644
--- a/addons/web/static/src/legacy/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
@@ -26,6 +26,7 @@
 
         .o_kanban_manage_toggle_button {
             @include o-kanban-dropdown($o-kanban-dashboard-hpadding);
+            @include o-position-absolute(0, 0);
             height: $o-kanban-manage-toggle-height;
         }
 
@@ -199,15 +200,9 @@
         }
     }
 
-    .o_favorite, .o_kanban_manage_toggle_button {
-        @include o-position-absolute(0, 0);
-        padding: $o-kanban-record-margin;
-    }
-
     .o_favorite {
-        top: 3px;
-        left: 0;
-        right: auto;
+        @include o-position-absolute(3px, $left: 0);
+        padding: $o-kanban-record-margin;
     }
 
     // Emphasize records' colors when necessary
diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss
index 8e0d232148f..49d9c91f64c 100644
--- a/addons/web/static/src/legacy/scss/kanban_view.scss
+++ b/addons/web/static/src/legacy/scss/kanban_view.scss
@@ -251,7 +251,6 @@
             }
             .dropdown-menu {
                 @include o-kanban-dropdown-menu;
-                right: (-$o-kanban-inside-hgutter - 1);
                 min-width: 11rem;
             }
         }
diff --git a/addons/web/static/src/legacy/scss/navbar.scss b/addons/web/static/src/legacy/scss/navbar.scss
index b4c1872e7ce..2a41aac546e 100644
--- a/addons/web/static/src/legacy/scss/navbar.scss
+++ b/addons/web/static/src/legacy/scss/navbar.scss
@@ -1,171 +1,193 @@
-body.o_is_superuser .o_menu_systray {
-    background: repeating-linear-gradient(
-        135deg,
-        #d9b904, #d9b904 10px,
-        #373435 10px, #373435 20px
-    );
-    border-bottom-left-radius: 20px;
+
+// This file is included in both backend and frontend bundles.
+// Bundle-specific rules can be found in 'webclient/navbar.scss' (backend) and
+// 'website.ui.scss' (frontend).
+
+// = Main Navbar
+// ============================================================================
+.o_main_navbar {
+  background-color: $o-brand-odoo;
+  border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
+  display: grid;
+  height: $o-navbar-height;
+  gap: 0px 0px;
+  grid-template-areas: "apps brand sections systray";
+  grid-template-columns:
+    minmax($o-navbar-height, max-content)
+    max-content
+    minmax($o-navbar-height, 1fr)
+    fit-content(100%);
+  grid-template-rows: $o-navbar-height;
+  min-width: min-content;
+
+  // = Scoped Variables
+  //
+  // Variables scoped within the current context that mirror backend's
+  // boostrap values.
+  // --------------------------------------------------------------------------
+  $-backend-font-weight-bold: 500;
+  $-backend-entry-hover-bg: rgba(0, 0, 0, .08);
+  $-backend-h3-font-size: 17px;
+  $-backend-h2-font-size: 20px;
+  $-backend-entry-hpadding: 20px;
+  $-backend-entry-vpadding: 3px;
+
+  // = % PseudoClasses
+  //
+  // Regroup rules shared across different elements
+  // --------------------------------------------------------------------------
+  %-main-navbar-entry-base {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: auto;
+    height: $o-navbar-height;
+    cursor: pointer;
+    user-select: none;
+
+    @include o-hover-text-color(rgba($white, .9), $white);
+  }
+
+  %-main-navbar-entry-padding {
+    padding: 0 $o-horizontal-padding;
+  }
+
+  %-main-navbar-entry-bg-hover {
+    @include hover() {
+      background-color: $-backend-entry-hover-bg;
+    }
+  }
+
+  %-main-navbar-entry-active {
+    @include plain-hover-focus() {
+      background: $-backend-entry-hover-bg;
+      outline: 1px solid $o-navbar-inverse-link-hover-bg;
+      outline-offset: -1px;
+      color: $white;
+    }
+  }
+
+  // = Reset browsers defaults
+  // --------------------------------------------------------------------------
+  > ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  // = Owl <Dropdown> components
+  // --------------------------------------------------------------------------
+  .o_dropdown .o_dropdown_toggler {
+    @extend %-main-navbar-entry-base;
+    @extend %-main-navbar-entry-padding;
+    @extend %-main-navbar-entry-bg-hover;
+    border: 0;
+    white-space: nowrap;
+
+    &, &:focus {
+      background: none;
+    }
+
+    &.o_dropdown_active {
+      @extend %-main-navbar-entry-active;
+    }
+  }
+
+  ul.o_dropdown_menu {
+    margin-top: 0;
+    border-top: 0;
+    @include border-top-radius(0);
+  }
+
+  .o_dropdown_menu_group_entry {
+    padding-left: $o-dropdown-hpadding * 1.5;
+
+    + .o_dropdown_item:not(.o_dropdown_menu_group_entry) {
+      margin-top: .8em;
+    }
+  }
+
+  // = Legacy elements adaptations
+  // --------------------------------------------------------------------------
+  > ul {
+    > li > a, > li > label:only-child, .o_dropdown_toggler {
+      padding: 0 $dropdown-item-padding-x * .5;
+    }
 
     > li {
-        > a, > label {
-            &:hover {
-                background-color: fade_out($o-navbar-inverse-link-hover-bg, 0.5);
-            }
-        }
+      &, > a {
+        @extend %-main-navbar-entry-base;
+      }
+
+      &.show > a {
+        @extend %-main-navbar-entry-active;
+      }
+
+      > a {
+        @extend %-main-navbar-entry-bg-hover;
+      }
+    }
+  }
+
+  // = Main Navbar Elements
+  // --------------------------------------------------------------------------
+  .o_menu_toggle, .o_navbar_apps_menu {
+    @extend %-main-navbar-entry-base;
+    font-size: $-backend-h3-font-size;
+    grid-area: apps;
+  }
+
+  .o_menu_toggle { // Enterprise-legacy only
+    @extend %-main-navbar-entry-padding;
+  }
+
+  .o_menu_brand {
+    @extend %-main-navbar-entry-base;
+    @extend %-main-navbar-entry-padding;
+    padding-left: 0;
+    grid-area: brand;
+    font-size: $-backend-h2-font-size;
+    font-weight: $-backend-font-weight-bold;
+
+    @include hover() {
+      background-color: transparent;
+    }
+  }
+
+  .o_menu_sections {
+    display: flex;
+    grid-area: sections;
+
+    > .o_dropdown_item {
+      @extend %-main-navbar-entry-padding;
     }
 
-    .show .dropdown-toggle {
-        background-color: fade_out($o-navbar-inverse-link-hover-bg, 0.5);
+    .o_more_dropdown_section_group {
+      padding: $-backend-entry-vpadding $-backend-entry-hpadding;
+      margin-top: .8em;
+
+      &:first-child {
+        margin-top: $dropdown-padding-y * -1;
+        padding-top: $dropdown-padding-y * 1.5;
+      }
     }
+  }
+
+  .o_menu_systray {
+    grid-area: systray;
+    display: flex;
+  }
 }
-.o_main_navbar {
-    position: relative;
-    height: $o-navbar-height;
-    border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
+
+// = SuperUser Design
+// ============================================================================
+body.o_is_superuser .o_menu_systray {
+  position: relative;
+  background: repeating-linear-gradient(135deg, #d9b904, #d9b904 10px, #373435 10px, #373435 20px);
+
+  &:before {
+    content: "";
+    @include o-position-absolute(2px, 2px, 2px, 2px);
     background-color: $o-brand-odoo;
-    color: white;
-
-    > a, > button {
-        float: left;
-        height: $o-navbar-height;
-        border: none;
-        padding: 0 $o-horizontal-padding - 4px 0 $o-horizontal-padding;
-        line-height: $o-navbar-height;
-        background-color: transparent;
-        text-align: center;
-        color: inherit;
-
-        font-size: 18px;
-        user-select: none;
-
-        &:hover, &:focus {
-            background-color: $o-navbar-inverse-link-hover-bg;
-            color: inherit;
-        }
-        &:focus, &:active, &:focus:active {
-            outline: none;
-        }
-    }
-
-    .o_app {
-        cursor: pointer;
-    }
-
-    > .o_menu_brand {
-        display: block;
-        float: left;
-        margin-right: 35px;
-        user-select: none;
-        color: white;
-        font-size: 22px;
-        font-weight: 500;
-        line-height: $o-navbar-height;
-        cursor: pointer;
-    }
-
-    > .o_menu_toggle {
-        margin-right: 5px;
-    }
-
-    > ul {
-        display: block;
-        float: left;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        > li {
-            position: relative;
-            display: block;
-            float: left;
-
-            > a {
-                display: block;
-
-                &:focus, &:active, &:focus:active {
-                    outline: none;
-                }
-                &, &:hover, &:focus {
-                    text-decoration: none;
-                }
-            }
-
-            > a, > label {
-                height: $o-navbar-height;
-                padding: 0 10px;
-                color: white;
-                line-height: $o-navbar-height;
-
-                &:hover {
-                    background-color: $o-navbar-inverse-link-hover-bg;
-                }
-            }
-
-            &.o_extra_menu_items {
-                > a {
-                    width: $o-navbar-height;
-                    text-align: center;
-                }
-                &.show > ul {
-                    padding: 0;
-
-                    > li {
-                        > a {
-                            background-color: $o-brand-odoo;
-                            color: white;
-                            border-bottom: 1px solid $o-brand-lightsecondary;
-
-                            &.dropdown-toggle {
-                                background-color: lighten($o-brand-odoo, 15%);
-                                pointer-events: none; // hack to prevent clicking on it because dropdown always opened
-                            }
-                        }
-                        > .dropdown-menu { // remove dropdown-menu default style as it is nested in another one
-                            position: static;
-                            float: none;
-                            display: block;
-                            border: none;
-                            box-shadow: none;
-                            max-height: none;
-                        }
-                    }
-                }
-            }
-        }
-
-        &.o_menu_systray {
-            float: right;
-        }
-    }
-
-    .dropdown-menu.show {
-        max-height: 90vh; // the dropdown should not overstep the viewport
-        min-width: 100%;
-        overflow: auto;
-        margin-top: 0;
-
-        @for $index from 3 through 5 {
-            .o_menu_header_lvl_#{$index}, .o_menu_entry_lvl_#{$index} {
-                padding-left: $o-dropdown-hpadding + ($index - 2)*12px;
-            }
-        }
-    }
-
-    .show .dropdown-toggle {
-        background-color: $o-navbar-inverse-link-hover-bg;
-    }
-    .o_user_menu {
-        margin-left: 6px;
-
-        > a {
-            padding-right: $o-horizontal-padding;
-        }
-
-        .oe_topbar_avatar {
-            height: 26px;
-            width: 26px;
-            object-fit: cover;
-            transform: translateY(-2px);
-        }
-    }
+  }
 }
diff --git a/addons/web/static/src/legacy/scss/navbar_mobile.scss b/addons/web/static/src/legacy/scss/navbar_mobile.scss
index f4593436163..f043c0feb8f 100644
--- a/addons/web/static/src/legacy/scss/navbar_mobile.scss
+++ b/addons/web/static/src/legacy/scss/navbar_mobile.scss
@@ -1,90 +1,101 @@
+// Achieve a top-menu design visually similar to the backend's 'burger' one.
 
-.o_main_navbar {
-    .o_app {
-        @include media-breakpoint-down(sm) {
-            float: none;
-            margin: 0;
-            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-            color: transparent !important;
-        }
-    }
-
-    > .o_menu_brand {
-        @include media-breakpoint-down(sm) {
-            float: none;
-            margin: 0;
-            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-            color: transparent !important;
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        transition: height 200ms linear 0s;
-
-        position: relative;
-        height: $o-navbar-height;
-
-        > ul {
-            > li {
-                float: none;
-                .dropdown-backdrop {
-                    display: none;
-                }
-
-                .dropdown-menu.show {
-                    max-height: none;
-                }
-            }
-
-            &.o_menu_sections {
-                width: 100%;
-                display: none;
-
-                .dropdown-menu.show {
-                    position: static;
-                    float: none;
-                    background-color: transparent;
-                    box-shadow: none;
-                    border: none;
-                    overflow: visible;
-
-                    > .dropdown-item {
-                        background-color: transparent;
-                        color: inherit;
-                    }
-                }
-            }
-
-            &.o_menu_systray {
-                @include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height);
-                height: $o-navbar-height;
-                text-align: right;
-
-                > li {
-                    display: inline-block;
-
-                    .dropdown-menu.show {
-                        @include o-position-absolute($o-navbar-height, 0, 0, 0);
-                        position: fixed;
-                        width: auto;
-                    }
-                }
-
-                .o_user_menu .oe_topbar_name {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
+// = Mobile Main Navbar
+// ============================================================================
 @include media-breakpoint-down(sm) {
-    body.o_mobile_menu_opened > .o_main_navbar {
-        height: 100%;
-        overflow: auto;
-        .o_menu_sections {
+    #oe_main_menu_navbar.o_main_navbar {
+
+        // = Scoped Variables
+        //
+        // Variables scopend within the current context that mirror backend's
+        // boostrap values.
+        // --------------------------------------------------------------------
+        $-bg: darken($o-brand-odoo, 10%);
+        $-color: color-yiq($-bg);
+        $-font-size-base: 16px;
+        $-font-size-lg: 18px;
+        $-entry-hover-bg: rgba(invert($-color), .08);
+
+        // = Invalidate top-menu native 'grid' layout
+        // --------------------------------------------------------------------
+        &, .o_menu_sections li, .dropdown-menu.show {
             display: block;
         }
+
+        .o_menu_sections li, .dropdown-menu.show {
+            position: relative;
+            width: 100%;
+            height: auto;
+        }
+
+        // = Design
+        // --------------------------------------------------------------------
+        .o_mobile_menu_toggle,
+        .dropdown-toggle,
+        .dropdown-item,
+        .o_menu_sections > .css_published {
+            height: $o-navbar-height;
+            @include o-hover-text-color(rgba($-color, .9), $-color);
+        }
+
+        .o_menu_sections {
+            @include o-position-absolute($o-navbar-height, 0, 0, 0);
+            display: none;
+            overflow: auto;
+            background-color: $-bg;
+
+            > li > a {
+                font-size: $-font-size-lg;
+            }
+
+            li.css_published:hover {
+                background-color: $-entry-hover-bg;
+            }
+        }
+
+        .dropdown-divider {
+            border-top-color: rgba($-color, .06);
+            margin-left: $dropdown-item-padding-x;
+            margin-right: $dropdown-item-padding-x;
+        }
+
+        .dropdown.show {
+            &, .dropdown-toggle, .dropdown-item, .dropdown-menu {
+                background-color: darken($-bg, 5%);
+            }
+
+            > .dropdown-toggle {
+                @include o-hover-text-color($-color, $-color);
+                outline: 0;
+                box-shadow: inset 0 1px 0 rgba(invert($-color), .1);
+            }
+
+            .dropdown-menu {
+                border: 0;
+                padding-top: 0;
+                box-shadow: inset 0 -1px 0 rgba($-color, .1);
+            }
+
+            .dropdown-item {
+                display: flex;
+                align-items: center;
+                font-size: $-font-size-base;
+            }
+        }
+
+        // = Toggle Menu (open)
+        // --------------------------------------------------------------------
+        body.o_mobile_menu_opened > & {
+            height: 100%;
+
+            .o_menu_sections {
+                display: block;
+            }
+
+            .o_mobile_menu_toggle:before {
+                content: "\f00d"
+            }
+        }
     }
 }
 
diff --git a/addons/web/static/src/legacy/scss/primary_variables.scss b/addons/web/static/src/legacy/scss/primary_variables.scss
index 44fd1a8625c..685673a2594 100644
--- a/addons/web/static/src/legacy/scss/primary_variables.scss
+++ b/addons/web/static/src/legacy/scss/primary_variables.scss
@@ -71,6 +71,8 @@ $o-form-spacing-unit: 5px !default;
 $o-horizontal-padding: 16px !default;
 $o-innergroup-rpadding: 45px !default;
 $o-dropdown-hpadding: 20px !default;
+$o-dropdown-vpadding: 3px !default;
+$o-dropdown-box-shadow: 0 1rem 1.1rem rgba(#000, .1) !default;
 
 $o-sheet-vpadding: 24px !default;
 
diff --git a/addons/web/static/src/legacy/scss/search_view.scss b/addons/web/static/src/legacy/scss/search_view.scss
index f52c9e9f8bf..e58e21d1326 100644
--- a/addons/web/static/src/legacy/scss/search_view.scss
+++ b/addons/web/static/src/legacy/scss/search_view.scss
@@ -80,89 +80,6 @@
     }
 }
 
-.o_search_options .o_dropdown_toggler_btn:first-child {
-    // apply the padding to the first element so that when the `favorites` menu goes under
-    // the `filters` menu, they're still aligned
-    margin-right: 15px;
-}
-
-// Dropdowns
-.o_search_options .o_dropdown {
-    color: $o-main-text-color;
-    cursor: pointer;
-    display: inline-block;
-    user-select: none;  // Prevent text selection when toggling the dropdowns
-    white-space: nowrap;  // prevent the arrow from going under the dropdown when too little space
-
-    .o_dropdown_title {
-        padding: 0 0.3rem;
-    }
-
-    .o_dropdown_caret {
-        font-size: 12px;
-        width: 1rem;
-    }
-
-    &:hover,
-    &.show {
-
-        .o_dropdown_toggler_btn {
-            color: darken($o-main-text-color, 10%);
-        }
-    }
-
-    .o_dropdown_menu {
-
-        ul.o_embed_menu {
-            padding: 0;
-        }
-
-        a.dropdown-item {
-            align-items: center;
-            display: flex;
-            position: relative;
-
-            .o_item_description {
-                flex: 1;
-            }
-
-            .o_icon_right {
-                @include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
-            }
-
-            .o_icon_right + .o_icon_right {
-                @include o-position-absolute($right: $dropdown-item-padding-x * 1.25);
-            }
-        }
-
-        .o_menu_item_options {
-            list-style: none;
-            margin-bottom: 1rem;
-            padding: 0;
-        }
-    }
-}
-
-// Open and closed carets in dropdowns
-.o_closed_menu {
-    position: relative;
-
-    &:before {
-        margin-top: (-$caret-width);
-        @include o-caret-right;
-        @include o-position-absolute($top: 50%, $left: 10px);
-    }
-}
-.o_open_menu {
-    position: relative;
-
-    &:before {
-        margin-top: (-$caret-width);
-        @include o-caret-down;
-        @include o-position-absolute($top: 50%, $left: 10px);
-    }
-}
-
 // Filter menu
 .o_filter_menu {
 
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index bc1d814b26f..c05013ec94a 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -314,29 +314,29 @@
     margin-top: 0;
 }
 @mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
+    margin: -1px -1px 1px;
     padding: $padding-base/2 $padding-base;
-    border: none;
-    border-left: 1px solid transparent;
+    border: 1px solid transparent;
+    border-bottom: none;
     vertical-align: top;
-    color: $body-color;
+    @include o-hover-text-color($body-color, $headings-color);
 
-    &:hover {
-        color: $headings-color;
-    }
     &:focus, &:active, &:focus:active {
         outline: none;
+        box-shadow: none;
     }
 }
 @mixin o-kanban-dropdown-open {
     position: relative;
     background: white;
-    border-color: gray('400');
+    border-color: $border-color;
     z-index: $zindex-dropdown + 1;
 }
 @mixin o-kanban-dropdown-menu {
     @include o-position-absolute($right: -1px);
-    margin-top: -1px;
-    border-color: gray('400');
+    margin-top: -2px;
+    border-color: $border-color;
+    border-top-right-radius: 0;
 }
 @mixin o-kanban-colorpicker {
     max-width: 150px;
@@ -383,16 +383,11 @@
     padding: 0;
 
     > a {
+        @extend .dropdown-item;
         margin: auto auto auto (-$link-padding-gap);
         padding: 3px $link-padding-gap;
-        color: $body-color;
-        display: block;
-
-        &:hover {
-            background-color: gray('300');
-            color: $headings-color;
-        }
     }
+
     &:last-child {
         margin-bottom: 5px;
     }
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index afcbb640d88..e84ea420a78 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -154,15 +154,16 @@
     <div class="btn-group o_dropdown" t-att-class="{ show: state.open }">
         <button type="button"
             class="o_dropdown_toggler_btn btn btn-secondary"
+            t-attf-class="{{ icon || displayCaret || displayChevron ? 'd-flex align-items-center ' : ''}} {{ displayCaret || displayChevron ? 'pr-1 ' : ''}}"
             t-att-aria-expanded="state.open ? 'true' : 'false'"
             tabindex="-1"
             t-on-click="state.open = !state.open"
             t-on-keydown="_onButtonKeydown"
             >
-            <i t-if="icon" t-att-class="icon"/>
+            <i t-if="icon" t-att-class="icon + ' small mr-1'"/>
             <span class="o_dropdown_title" t-esc="title"/>
-            <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
-            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
+            <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-fw fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-fw ml-auto fa-chevron-{{ state.open ? 'down' : 'right' }}"/>
         </button>
         <ul t-if="state.open" t-attf-class="o_dropdown_menu dropdown-menu {{ dropdownMenuAlignClass }} show" role="menu"
             t-on-item-selected="_onItemSelected"
@@ -221,7 +222,7 @@
 <t t-name="web.DropdownMenuItem" owl="1">
     <li class="o_menu_item" role="menuitem" t-on-keydown="_onKeydown">
         <t t-if="canBeOpened">
-            <a class="o_menu_item_parent dropdown-item"
+            <a class="o_menu_item_parent dropdown-item d-flex align-items-center justify-content-between"
                 t-att-class="{ selected: props.isActive }"
                 t-att-aria-checked="props.isActive ? 'true' : 'false'"
                 role="menuitemcheckbox"
@@ -230,9 +231,9 @@
                 t-on-click.prevent="state.open = !state.open"
                 >
                 <t t-esc="props.description"/>
-                <i t-attf-class="o_icon_right fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+                <i t-attf-class="o_icon_right fa fa-fw mr-n4 fa-caret-{{ state.open ? 'down' : 'right' }}"/>
             </a>
-            <ul t-if="state.open" class="o_menu_item_options">
+            <ul t-if="state.open" class="o_menu_item_options pb-2 list-unstyled">
                 <t t-set="currentGroup" t-value="null"/>
                 <t t-foreach="props.options" t-as="option" t-key="option_index">
                     <li t-if="currentGroup !== null and currentGroup !== option.groupNumber"
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index b09d9ba78ee..26e374e6539 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -1,98 +1,12 @@
-.o_main_navbar {
-  background-color: $o-brand-odoo;
-  border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-  color: $white;
-  display: grid;
-  height: $o-navbar-height;
-  gap: 0px 0px;
-  grid-template-areas: "apps brand sections systray";
-  grid-template-columns:
-    $o-navbar-height
-    max-content
-    minmax($o-navbar-height, 1fr)
-    fit-content(100%);
-  grid-template-rows: $o-navbar-height;
-  min-width: min-content;
+// = Main Navbar
+//
 
-  .o_dropdown_toggler > * {
-    line-height: $o-navbar-height;
-  }
+// The MainNavbar design is shared with the frontent and, at the current state,
+// backend owl components coexist with legacy ones in the backend too.
+// In order to limit unnecessary code repetition and fragmantation, all main
+// design rules are located in legacy/scss/navbar.scss.
+// Moreover, if a new design rule is needed for the backend *only*, it can be
+// added here.
+// ============================================================================
 
-  .o_dropdown_toggler:hover,
-  .o_menu_brand:hover,
-  .o_dropdown_toggler.o_dropdown_active {
-    background-color: darken($o-brand-odoo, 10%);
-  }
-
-  .o_dropdown_item {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    padding-top: 0.4rem;
-    padding-bottom: 0.4rem;
-  }
-
-  .o_dropdown_menu_group {
-    color: $o-main-text-color;
-    line-height: initial;
-    padding: $o-horizontal-padding/2 0;
-    padding-left: $o-dropdown-hpadding;
-  }
-
-  .o_dropdown_menu_group_entry {
-    padding-left: $o-dropdown-hpadding * 1.5;
-  }
-
-  // ------------------------------------
-  // ------- Main Navbar Elements -------
-  // ------------------------------------
-  // Apps Menu
-  .o_navbar_apps_menu {
-    grid-area: apps;
-
-    // Button / toggler to open apps menu
-    button.o_dropdown_toggler {
-      padding: 0;
-      width: 100%;
-    }
-  }
-
-  // Brand (Current App Name)
-  .o_menu_brand {
-    grid-area: brand;
-    cursor: pointer;
-    font-size: 1.8rem;
-    font-weight: 500;
-    margin-right: 2rem;
-    padding: 0 $o-horizontal-padding;
-    user-select: none;
-  }
-
-  // Sections (Current App Menu)
-  .o_menu_sections {
-    grid-area: sections;
-    display: flex;
-
-    .o_menu_sections_more .o_dropdown_menu {
-      padding-top: 0;
-
-      .o_more_dropdown_section {
-        background-color: $o-brand-odoo;
-        border-bottom: 1px solid $o-brand-lightsecondary;
-        color: $white;
-        line-height: initial;
-        padding: 0.25rem 1.67rem;
-
-        &.o_more_dropdown_section_group {
-          background-color: lighten($o-brand-odoo, 15%);
-        }
-      }
-    }
-  }
-
-  // Systray
-  .o_menu_systray {
-    grid-area: systray;
-    display: flex;
-  }
-}
+// .o_main_navbar {}
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 7e9e1eb1c84..bc4254e63c1 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -117,7 +117,7 @@
           </t>
           <t t-else="">
             <div
-              class="o_more_dropdown_section o_more_dropdown_section_group"
+              class="o_more_dropdown_section o_more_dropdown_section_group bg-200 font-weight-bold"
               t-esc="section.name" />
             <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
               <t t-set="items" t-value="section.childrenTree" />
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
index fb267689202..32aec873e04 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
@@ -2,20 +2,18 @@
 <templates xml:space="preserve">
 
 <t t-name="web.SwitchCompanyMenu" owl="1">
-    <li class="o_switch_company_menu">
-        <Dropdown>
-            <span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
-                <t t-if="!env.isSmall"><t t-esc="user.current_company.name"/></t>
-            </span>
-            <t t-set-slot="menu">
-                <t t-foreach="user.allowed_companies" t-as="company_id">
-                    <t t-call="web.SwitchCompanyItem">
-                        <t t-set="company" t-value="user.allowed_companies[company_id]" />
-                    </t>
+    <Dropdown class="o_switch_company_menu">
+        <span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
+            <t t-if="!env.isSmall"><t t-esc="user.current_company.name"/></t>
+        </span>
+        <t t-set-slot="menu">
+            <t t-foreach="user.allowed_companies" t-as="company_id">
+                <t t-call="web.SwitchCompanyItem">
+                    <t t-set="company" t-value="user.allowed_companies[company_id]" />
                 </t>
             </t>
-        </Dropdown>
-    </li>
+        </t>
+    </Dropdown>
 </t>
 
 
diff --git a/addons/web/static/tests/legacy/views/pivot_tests.js b/addons/web/static/tests/legacy/views/pivot_tests.js
index 22f65309dfa..d6002cec0d1 100644
--- a/addons/web/static/tests/legacy/views/pivot_tests.js
+++ b/addons/web/static/tests/legacy/views/pivot_tests.js
@@ -2696,7 +2696,12 @@ QUnit.module('Views', {
             View: PivotView,
             model: "partner",
             data: this.data,
-            arch: `<pivot/>`,
+            // have at least a measure to have a separator in the Measures dropdown:
+            //
+            // Foo
+            // -----
+            // Count
+            arch: `<pivot><field name="foo" type="measure"/></pivot>`,
         });
 
         // open the "Measures" menu
diff --git a/addons/web/static/tests/webclient/switch_company_menu_tests.js b/addons/web/static/tests/webclient/switch_company_menu_tests.js
index 3aa2bb911ad..f2f72e41a95 100644
--- a/addons/web/static/tests/webclient/switch_company_menu_tests.js
+++ b/addons/web/static/tests/webclient/switch_company_menu_tests.js
@@ -36,7 +36,7 @@ QUnit.module("SwitchCompanyMenu", (hooks) => {
         const scMenu = await mount(SwitchCompanyMenu, { env, target });
         registerCleanup(() => scMenu.destroy());
 
-        assert.strictEqual(scMenu.el.tagName.toUpperCase(), "LI");
+        assert.strictEqual(scMenu.el.tagName.toUpperCase(), "DIV");
         assert.hasClass(scMenu.el, "o_switch_company_menu");
         assert.strictEqual(scMenu.el.textContent, "Hermit");
 
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 14bf204b634..dbf2aaa671d 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -86,10 +86,17 @@ body.o_connected_user {
         text-decoration: none;
     }
     .dropdown-menu {
+        border-top: 0;
+        margin-top: 0;
+        background-clip: border-box;
         font-size: inherit;
         border-radius: 0;
         color: $dropdown-link-active-color;
     }
+    #oe_applications .dropdown-menu {
+        // Compensate #oe_applications's padding
+        margin-left: $dropdown-item-padding-x * -0.5;
+    }
 
     .o_menu_sections {
         .o_mobile_preview a {
@@ -99,8 +106,6 @@ body.o_connected_user {
     }
     .o_menu_systray {
         > li > a {
-            padding: 0 $grid-gutter-width/2;
-
             &.css_edit_dynamic{
                 padding: 0 $grid-gutter-width/4;
             }
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index a4fc8dbd64b..7cd2a0eed48 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -4,7 +4,7 @@
     <template id="website_publisher" name="Website Publisher">
         <t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
             <li t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
-                <label class="o_switch o_switch_danger js_publish_btn" t-att-accesskey="desktop_navbar and 'p'">
+                <label class="o_switch o_switch_danger js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
                     <input type="checkbox" t-att-checked="main_object.website_published"/>
                     <span/>
                     <span class="css_publish">Unpublished</span>
@@ -34,7 +34,7 @@
                 <ul id="oe_applications">
                     <li class="dropdown active">
                         <a class="dropdown-toggle full" data-toggle="dropdown" href="#" accesskey="h">
-                            <i class="fa fa-th-large"/> WEBSITE
+                            <i class="fa fa-th-large mr-2"/> WEBSITE
                         </a>
                         <div class="dropdown-menu" role="menu">
                             <!-- This will be populated on hover in JS -->
@@ -42,7 +42,7 @@
                     </li>
                 </ul>
 
-                <button type="button" class="fa fa-bars float-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
+                <button type="button" class="btn fa fa-bars float-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
 
                 <ul class="o_menu_sections" groups="website.group_website_designer">
                     <!-- Content -->
@@ -71,11 +71,11 @@
                         </div>
                     </li>
                     <t t-call="website.website_publisher">
-                        <t t-set="extra_classes" t-translation="off">d-block d-sm-block d-md-none</t>
+                        <t t-set="extra_classes" t-translation="off">d-flex d-sm-flex d-md-none</t>
                     </t>
                 </ul>
 
-                <ul class="o_menu_systray d-none d-md-block" groups="website.group_website_publisher">
+                <ul class="o_menu_systray d-none d-md-flex" groups="website.group_website_publisher">
                     <t t-call="website.website_publisher">
                         <t t-set="extra_classes" t-value=""/>
                         <t t-set="desktop_navbar" t-value="true"/>