diff --git a/addons/web/static/src/core/notebook/notebook.scss b/addons/web/static/src/core/notebook/notebook.scss
index be5f880f02f..f6df01d3254 100644
--- a/addons/web/static/src/core/notebook/notebook.scss
+++ b/addons/web/static/src/core/notebook/notebook.scss
@@ -74,4 +74,13 @@
             }
         }
     }
+
+    @include media-breakpoint-down(lg) {
+        .o_notebook_content .oe-toolbar {
+            @include o-position-sticky($top: 0px);
+            margin-left: var(--notebook-margin-x, $o-horizontal-padding);
+            margin-right: var(--notebook-margin-x, $o-horizontal-padding);
+            width: auto;
+        }
+    }
 }
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js
index 1ab71bd229a..00a284c39c0 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/powerbox/Powerbox.js
@@ -42,11 +42,11 @@ export class Powerbox {
 
         // Draw the powerbox.
         this.el = document.createElement('div');
-        this.el.className = 'oe-powerbox-wrapper';
+        this.el.className = 'oe-powerbox-wrapper position-absolute overflow-hidden';
         this.el.style.display = 'none';
         document.body.append(this.el);
         this._mainWrapperElement = document.createElement('div');
-        this._mainWrapperElement.className = 'oe-powerbox-mainWrapper';
+        this._mainWrapperElement.className = 'oe-powerbox-mainWrapper flex-skrink-1 overflow-auto py-2';
         this.el.append(this._mainWrapperElement);
         this.el.addEventListener('mousedown', ev => ev.stopPropagation());
 
@@ -175,19 +175,19 @@ export class Powerbox {
         for (const [category, categoryCommands] of this._groupCommands(commands, categories)) {
             const categoryWrapperEl = parser.parseFromString(`
                 <div class="oe-powerbox-categoryWrapper">
-                    <div class="oe-powerbox-category"></div>
+                    <div class="oe-powerbox-category mx-3 my-1 text-uppercase"></div>
                 </div>`, 'text/html').body.firstChild;
             this._mainWrapperElement.append(categoryWrapperEl);
             categoryWrapperEl.firstElementChild.innerText = category;
             for (const command of categoryCommands) {
                 const commandElWrapper = document.createElement('div');
-                commandElWrapper.className = 'oe-powerbox-commandWrapper';
+                commandElWrapper.className = 'oe-powerbox-commandWrapper d-flex align-items-center px-3 py-2 cursor-pointer';
                 commandElWrapper.classList.toggle('active', this._context.selectedCommand === command);
                 commandElWrapper.replaceChildren(...parser.parseFromString(`
-                    <div class="oe-powerbox-commandLeftCol">
-                        <i class="oe-powerbox-commandImg fa"></i>
+                    <div class="oe-powerbox-commandLeftCol border rounded">
+                        <i class="oe-powerbox-commandImg d-flex align-items-center justify-content-center fa"></i>
                     </div>
-                    <div class="oe-powerbox-commandRightCol">
+                    <div class="oe-powerbox-commandRightCol ms-3">
                         <div class="oe-powerbox-commandName"></div>
                         <div class="oe-powerbox-commandDescription"></div>
                     </div>`, 'text/html').body.children);
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
index 2a9bf83bb58..a86ac1ad363 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
@@ -105,7 +105,6 @@
     padding-right: 5px;
     background: #222222;
     color: white;
-    border-radius: 8px;
 
     .toolbar-bottom::before {
         content: '';
@@ -264,35 +263,44 @@
 .oe-tablepicker-size {
     color: white;
 }
-@media only screen and (max-width: 767px) {
+
+@include media-breakpoint-down(md) {
     .oe-toolbar {
         position: relative;
+        overflow-x: auto;
         visibility: visible;
-        width: 100%;
+        width: auto;
+        height: auto;
+        border-bottom: 1px solid $border-color;
         border-radius: 0;
         background-color: white;
-
+        box-shadow: none;
+        
         .btn {
             color: black;
+            padding: 3px 4px !important;
+        }
+
+        .dropdown-menu {
+            position: fixed !important;
         }
     }
 }
 
+@include media-breakpoint-up(md) {
+    .oe-toolbar.oe-floating{
+        box-shadow: $box-shadow;
+    }
+}
 /* Content styling */
 
 .oe-powerbox-wrapper {
-    position: absolute;
     z-index: $zindex-modal;
-    border: black;
     background: var(--oePowerbox__wrapper-bg, $o-white);
     color: $o-main-text-color;
     max-height: 40vh;
     box-sizing: border-box;
-    max-width: 100%;
-    box-shadow: 0px 3px 18px rgba(0, 0, 0, .23);
-    border-radius: 4px;
-    overflow: hidden;
-    display: flex;
+    box-shadow: $box-shadow;
 
     ::-webkit-scrollbar {
         background: transparent;
@@ -308,45 +316,24 @@
         background: var(--oePowerbox__ScrollbarTrack-background-color, #EDECE9);
     }
 }
-.oe-powerbox-mainWrapper {
-    flex: 1 1 auto;
-    overflow: auto;
-    padding: 5px 0;
-    overscroll-behavior: contain;
-}
 
 .oe-powerbox-category, .oe-powerbox-noResult {
-    margin: 10px;
     color: var(--oePowerbox__category-color, $o-gray-600);
     font-size: 11px;
 }
-.oe-powerbox-category {
-    text-transform: uppercase;
-    margin: 5px 12px;
-}
 .oe-powerbox-noResult {
     display: none;
 }
 .oe-powerbox-commandWrapper {
-    display: flex;
-    padding: 6px 12px;
-    cursor: pointer;
-
     &.active {
         background: var(--oePowerbox__commandName-bg, $o-gray-100); 
     }
 }
 i.oe-powerbox-commandImg {
-    display: flex;
-    height: 30px;
-    width: 30px;
-    align-items: center;
-    justify-content: center;
+    height: 35px;
+    width: 35px;
     background: var(--oePowerbox__commandImg-bg, $o-gray-100);
     color: var(--oePowerbox__commandImg-color, $o-gray-800);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 7px;
-    font-size: 15px;
 }
 .oe-powerbox-commandName {
     font-size: 13px;
@@ -356,9 +343,6 @@ i.oe-powerbox-commandImg {
     color: var(--oePowerbox__commandDescription-color, $o-main-color-muted);
     font-size: 12px;
 }
-.oe-powerbox-commandRightCol {
-    margin: 0 10px;
-}
 
 /* Command hints */
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg.dark.scss b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
index d32fab262d6..0bf6f91f140 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.dark.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
@@ -15,3 +15,11 @@
 .o_link_dialog_preview {
     --o-link-dialog-preview-border: #{$border-width} solid #{$border-color};
 }
+
+.o_colorpicker_sections, .o_we_color_btn {
+    --bg: #{$o-gray-200};
+}
+
+.o_custom_gradient_btn {
+    --o-we-toolbar-border: #{$o-gray-800};
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index ddbad87772c..9b7e6f4e5f3 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -133,6 +133,12 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         }
 
         .o_colorpicker_section {
+            &.o_custom_gradient_editor{
+                .o_custom_gradient_btn{
+                    border: 1px solid var(--o-we-toolbar-border);
+                }
+            }
+
             &::after {
                 content: "";
                 display: table;
@@ -154,7 +160,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
 // Toolbar - Generic rules shared among backend & frontend
 .oe-toolbar {
-    display: grid;
+    display: flex;
+    align-items: center;
 
     .btn {
         display: flex;
@@ -182,16 +189,11 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
 // Floating Toolbar
 .oe-toolbar.oe-floating {
-    gap: 0 $o-we-sidebar-content-field-control-item-spacing * .7;
-    grid-auto-flow: column;
+    gap: $o-we-sidebar-content-field-control-item-spacing * .7;
     align-items: stretch;
-    height: auto;
     min-height: $o-we-toolbar-height;
-    max-width: none;
-    border-radius: $o-we-item-border-radius;
     padding: 0 $o-we-sidebar-content-field-control-item-spacing;
     background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
-    box-shadow: 0 0 4px rgba(#000, .1), 0 4px 18px rgba(#000, .25);
     color: var(--o-we-toolbar-color-text, #{$o-we-toolbar-color-text});
     font-family: $o-we-font-family;
 
@@ -276,7 +278,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         overflow: visible;
         border-top: 1px solid var(--o-we-toolbar-border, #{$o-we-toolbar-border});
         background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
-        box-shadow: 0 18px 18px rgba(#000, .23);
+        box-shadow: $box-shadow;
         @include border-top-radius(0);
         @include border-bottom-radius($o-we-item-border-radius);
 
@@ -375,7 +377,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
     .colorpicker {
         background: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
-        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
+        box-shadow: $box-shadow;
     }
 
     .o_image_alt {
@@ -384,6 +386,12 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     }
 }
 
+// Toolbar in Sidebar (website editor, mass mailing)
+#oe_snippets > .o_we_customize_panel .oe-toolbar {
+    display: grid;
+    align-items: stretch;
+}
+
 // Floating Table Picker
 .oe-tablepicker-wrapper .oe-tablepicker {
     .oe-tablepicker-cell {
@@ -403,7 +411,8 @@ body:not(.editor_has_snippets) {
         z-index: 1056;
     }
 }
-@media only screen and (max-width: 767px) {
+
+@include media-breakpoint-down(md) {
     .oe-toolbar {
         background-color: white;
 
@@ -665,7 +674,12 @@ img.o_we_selected_image {
     // Prevent the edited link from being deselected when clicking between
     // buttons in the popover
     user-select: none;
+    box-shadow: $box-shadow;
+    border-color: rgba(0,0,0,0.025);
 
+    .popover-arrow::before {
+        border-right-color: rgba(0, 0, 0, 0.05);
+    }
     // As the popover is displayed both in the frontend and the backend,
     // the font styles need to be uniformized.
     font-size: 12px;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 8421b03c821..9087ed3de0a 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -9,7 +9,7 @@
         <div id="toolbar" class="oe-toolbar oe-floating">
             <div id="style" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
-                    data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
+                    data-bs-toggle="dropdown" data-bs-original-title="Text style" tabindex="-1" aria-expanded="false">
                     <span title="Text style">Normal</span>
                 </button>
                 <ul class="dropdown-menu">
@@ -76,8 +76,9 @@
 
             <div id="font-size" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
-                    data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
+                    data-bs-toggle="dropdown" tabindex="-1" data-bs-original-title="Font Size" aria-expanded="false">
                     <span id="fontSizeCurrentValue" title="Font size"></span>
+                    <span id="fontSizeCurrentValue"></span>
                 </button>
                 <ul class="dropdown-menu">
                     <li><a class="dropdown-item" href="#" data-call="setFontSize">default</a></li>
@@ -98,7 +99,7 @@
 
             <div id="justify" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
-                    data-bs-toggle="dropdown" tabindex="-1" data-bs-display="static" aria-expanded="false">
+                    data-bs-toggle="dropdown" tabindex="-1" data-bs-original-title="Paragraph" aria-expanded="false">
                     <i id="paragraphDropdownButton" class="fa fa-align-left fa-fw" title="Text align"></i>
                 </button>
                 <div class="dropdown-menu">