diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 0f6ab42d5ee..3f47a6128f9 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1758,7 +1758,7 @@ export class Wysiwyg extends Component {
             e.preventDefault();
             e.stopImmediatePropagation();
             e.stopPropagation();
-            switch (e.target.id) {
+            switch (e.currentTarget.id) {
                 case 'create-link':
                     this.toggleLinkTools();
                     break;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index d4c99720b48..b96d3fc4717 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -499,9 +499,21 @@
             background: transparent;
             margin-top: $o-we-sidebar-content-field-spacing;
             padding: 0 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
-            grid-template-areas: "typo typo style colors" "size align list link" "options options options options" "options2 options2 options2 options2";
-            grid-template-columns: 1fr 1fr 1fr 1fr;
-            grid-template-rows: minmax($o-we-sidebar-content-field-height, auto) minmax($o-we-sidebar-content-field-height, auto) auto auto ;
+            grid-template-areas:
+                "typo typo style style colors"
+                "size align list list link"
+                "ai animate animate hilight hilight"
+                "options options options options options"
+                "options2 options2 options2 options2 options2"
+                "options3 options3 options3 options3 options3";
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-rows:
+                minmax($o-we-sidebar-content-field-height, auto)
+                minmax($o-we-sidebar-content-field-height, auto)
+                minmax($o-we-sidebar-content-field-height, auto)
+                auto
+                auto
+                auto;
             row-gap: $o-we-sidebar-content-field-spacing;
             column-gap: $o-we-sidebar-content-field-multi-spacing;
             width: 100%;
@@ -626,8 +638,12 @@
                     }
                 }
 
-                & + we-customizeblock-option {
+                & ~ we-customizeblock-option {
                     grid-area: options2;
+
+                    & ~ we-customizeblock-option {
+                        grid-area: options3;
+                    }
                 }
             }
 
@@ -723,6 +739,20 @@
                 }
             }
 
+            #chatgpt {
+                grid-area: ai;
+
+                span {
+                    margin-left: 5px;
+                }
+            }
+            #animate {
+                grid-area: animate;
+            }
+            #highlight {
+                grid-area: hilight;
+            }
+
             .dropdown-menu.colorpicker-menu {
                 min-width: 0;
                 max-height: none;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 659dde98eed..61f712959da 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -176,7 +176,9 @@
             </div>
 
             <div id="chatgpt" class="btn-group">
-                <div id="open-chatgpt" title="Generate or transform content with AI" class="fa fa-magic fa-fw btn editor-ignore"></div>
+                <div id="open-chatgpt" title="Generate or transform content with AI" class="btn editor-ignore">
+                    <span class="fa fa-magic fa-fw"></span>
+                </div>
             </div>
 
             <div  t-if="props.showImageShape" id="image-shape" class="btn-group">
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 7694bfc3aa1..38e083f6d69 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -616,7 +616,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
      * @param {Event} ev
      */
     _onAnimateTextClick(ev) {
-        const target = ev.target;
+        const target = ev.currentTarget;
         this._handleTextOptions(target, [
             this._getOptionTextClass(target),
             "o_animate",
@@ -636,7 +636,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
      * @param {Event} ev
      */
     _onTextHighlightClick(ev) {
-        const target = ev.target;
+        const target = ev.currentTarget;
         this._handleTextOptions(target, [
             this._getOptionTextClass(target),
             "o_text_highlight_underline",
diff --git a/addons/website/static/src/xml/web_editor.xml b/addons/website/static/src/xml/web_editor.xml
index ce66fc0df69..1eb5b78f11d 100644
--- a/addons/website/static/src/xml/web_editor.xml
+++ b/addons/website/static/src/xml/web_editor.xml
@@ -40,20 +40,31 @@
         <xpath expr="//t[@t-if='this.isMobile()']//div[@id='list']" position="inside">
             <div t-if="props.showAnimateText" title="Animate text" class="btn fa fa-play fa-fw o_we_animate_text" data-text-selector=".o_animated_text"/>
         </xpath>
-        <xpath expr="//t[@t-else]//div[@id='list']" position="inside">
-            <div t-if="props.showAnimateText" title="Animate text" class="btn fa fa-play fa-fw o_we_animate_text" data-text-selector=".o_animated_text"/>
+        <xpath expr="//t[@t-else]//div[last()]" position="after">
+            <div t-if="props.showAnimateText" id="animate" class="btn-group">
+                <div title="Animate text" class="btn o_we_animate_text" data-text-selector=".o_animated_text">
+                    <span class="fa fa-play fa-fw"></span>
+                    <span>Animate</span>
+                </div>
+            </div>
+        </xpath>
+
+        <xpath expr="//div[@id='open-chatgpt']" position="inside">
+            <span>AI</span>
         </xpath>
 
         <xpath expr="//div[@id='strikethrough']" position="attributes">
             <attribute name="t-if">!props.showTextHighlights</attribute>
         </xpath>
-        <xpath expr="//div[@id='underline']" position="attributes">
-            <attribute name="t-if">!props.showTextHighlights</attribute>
-        </xpath>
-        <xpath expr="//div[@id='underline']" position="after">
-            <div t-if="props.showTextHighlights" title="Add Text Highlight Effects"
-                class="btn oi oi-text-effect oi-fw o_we_text_highlight"
-                data-text-selector=".o_text_highlight"/>
+        <xpath expr="//div[1]" position="inside">
+            <div t-if="props.showTextHighlights" id="highlight" class="btn-group">
+                <div title="Add Text Highlight Effects"
+                    class="btn o_we_text_highlight"
+                    data-text-selector=".o_text_highlight">
+                    <span class="oi oi-text-effect oi-fw"></span>
+                    <span>Highlight</span>
+                </div>
+            </div>
         </xpath>
     </t>
 </templates>