diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index e5c1108695c..83ec0c58530 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1351,13 +1351,15 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
      */
     async start() {
         await this._super(...arguments);
+        const iconEl = document.createElement('i');
         if (this.options.dataAttributes.buttonStyle) {
-            const iconEl = document.createElement('i');
             iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
-            this.containerEl.appendChild(iconEl);
         } else {
-            this.el.classList.add('fa', 'fa-fw', 'fa-edit');
+            iconEl.classList.add('fa', 'fa-fw', 'fa-refresh', 'mr-1');
+            this.el.classList.add('o_we_no_toggle');
+            this.containerEl.textContent = _t("Replace media");
         }
+        $(this.containerEl).prepend(iconEl);
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 73247077c8b..ca8f9e6a080 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -50,14 +50,14 @@ $o-we-translated-content-color: rgb(120, 215, 110) !default;
 
 $o-we-toolbar-height: 32px !default;
 
-$o-we-item-spacing: 7px !default;
+$o-we-item-spacing: 8px !default;
 $o-we-item-border-width: 1px !default;
 $o-we-item-border-color: $o-we-bg-darkest !default;
-$o-we-item-border-radius: 1px !default;
+$o-we-item-border-radius: 2px !default;
 $o-we-item-clickable-bg: $o-we-bg-lightest!default;
 $o-we-item-clickable-color: $o-we-fg-light!default;
 $o-we-item-clickable-hover-bg: $o-we-bg-dark!default;
-$o-we-item-pressed-bg: $o-we-bg-darker !default;
+$o-we-item-pressed-bg: $o-we-bg-light !default;
 $o-we-item-pressed-color: $o-we-fg-lighter !default;
 
 $o-we-item-standup-color-light: $o-we-fg-lighter;
@@ -109,6 +109,7 @@ $o-we-sidebar-content-gutter-item-indent: 5px !default;
 $o-we-sidebar-content-padding-base: 10px !default;
 $o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
 $o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
+$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default;
 
 $o-we-sidebar-content-main-title-height: 32px !default;
 $o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
@@ -125,8 +126,9 @@ $o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
 $o-we-sidebar-content-field-control-item-size: 1em !default;
 $o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
 $o-we-sidebar-content-field-label-spacing: 6px !default;
-$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-field-label-spacing + 102px !default;
-$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing !default;
+
+$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-available-room * .4 !default;
+$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default;
 $o-we-sidebar-content-field-height: 22px !default;
 
 $o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
@@ -163,13 +165,12 @@ $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
 $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
 
 $o-we-sidebar-content-field-input-max-width: 60px !default;
-$o-we-sidebar-content-field-input-bg: $o-we-bg-darker !default;
+$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
 $o-we-sidebar-content-field-input-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $o-we-sidebar-content-field-input-unit-font-size: 11px !default;
 $o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
 
-// This value allows 5 fa icons (fit one row exactly with this)
-$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.2 !default;
+$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing;
 
 $o-we-sidebar-content-field-progress-height: 4px !default;
 $o-we-sidebar-content-field-progress-control-height: 10px !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index a1c884afbdc..e79f8013ad0 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -116,6 +116,29 @@ body.editor_enable.editor_has_snippets {
     &[disabled] {
         opacity: .5;
     }
+
+    &:not([disabled]) {
+        &.active:not(.o_we_no_toggle), &:hover {
+            color: $o-we-sidebar-content-field-pressed-color;
+        }
+
+        $-hover-colors: (
+            'success': $o-we-color-success,
+            'info': $o-we-color-info,
+            'warning': $o-we-color-warning,
+            'danger': $o-we-color-danger,
+        );
+
+        @each $name, $color in $-hover-colors {
+            &.o_we_text_#{$name} {
+                color: $color;
+            }
+
+            &.o_we_hover_#{$name}:hover {
+                color: $color;
+            }
+        }
+    }
 }
 
 %we-generic-link {
@@ -126,19 +149,6 @@ body.editor_enable.editor_has_snippets {
     &:not([disabled]) {
         &.active, &:hover {
             @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
-            color: $o-we-sidebar-content-field-pressed-color;
-        }
-
-        $-hover-colors: (
-            'success': $o-we-color-success,
-            'info': $o-we-color-info,
-            'warning': $o-we-color-warning,
-            'danger': $o-we-color-danger,
-        );
-        @each $name, $color in $-hover-colors {
-            &.o_we_hover_#{$name}:hover {
-                color: $color;
-            }
         }
     }
 }
@@ -151,17 +161,15 @@ body.editor_enable.editor_has_snippets {
     padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
     border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
     border-radius: $o-we-sidebar-content-field-border-radius;
-    background: $o-we-sidebar-content-field-clickable-bg;
+    background-color: $o-we-sidebar-content-field-clickable-bg;
     color: $o-we-sidebar-content-field-clickable-color;
 
-    &:not([disabled]):hover {
+    &:not([disabled]):hover, &.active:not(.o_we_no_toggle) {
         @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
-        color: $o-we-sidebar-content-field-pressed-color;
     }
 
-    &.active {
-        background: $o-we-sidebar-content-field-pressed-bg;
-        color: $o-we-sidebar-content-field-pressed-color;
+    &.active:not(.o_we_no_toggle) {
+        background-color: $o-we-sidebar-content-field-pressed-bg;
     }
 }
 
@@ -171,7 +179,7 @@ body.editor_enable.editor_has_snippets {
     flex: 1 1 auto;
     justify-content: center;
     border: none;
-    background: transparent;
+    background-color: transparent;
     color: inherit;
     font-weight: normal;
 
@@ -214,7 +222,7 @@ body.editor_enable.editor_has_snippets {
     #snippets_menu {
         flex: 0 0 auto;
         display: flex;
-        background: $o-we-sidebar-tabs-bg;
+        background-color: $o-we-sidebar-tabs-bg;
         box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
         color: $o-we-sidebar-tabs-color;
 
@@ -228,6 +236,7 @@ body.editor_enable.editor_has_snippets {
         position: relative;
         width: 100%;
         padding: $o-we-sidebar-blocks-content-spacing;
+        background-color: $o-we-bg-lighter;
 
         .o_snippet_search_filter_input {
             width: 100%;
@@ -366,38 +375,24 @@ body.editor_enable.editor_has_snippets {
 
         @mixin large-component() {
             flex: 1 1 auto;
-            width: ($o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent) * 0.5;
+            width: $o-we-sidebar-content-available-room * .6;
         }
 
         we-button, we-toggler {
             @extend %we-generic-button;
-            text-align: left;
-
-            &.fa {
-                display: inline-block;
-                padding: 0;
-                border: none;
-                background: none;
-                text-align: center;
-
-                &.fa-times, &.fa-minus {
-                    color: $o-we-color-danger;
-                }
-                &.fa-plus {
-                    color: $o-we-color-success;
-                }
-
-                &.active {
-                    padding: 0;
-
-                    &::after {
-                        display: none;
-                    }
-                }
-            }
         }
+
+        we-button.o_we_link {
+            @extend %we-generic-link;
+            margin-top: 0;
+            border: 0;
+            padding: 0;
+            background: 0;
+        }
+
         we-toggler {
             @include we-icon-button('\f0d7');
+            text-align: left;
 
             + * {
                 display: none !important;
@@ -407,7 +402,6 @@ body.editor_enable.editor_has_snippets {
             }
             &.active {
                 @include we-icon-button('\f0d8');
-
                 + * {
                     display: block !important;
                 }
@@ -434,7 +428,7 @@ body.editor_enable.editor_has_snippets {
             position: relative;
             display: block;
             padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
-            background: $o-we-bg-lighter;
+            background-color: $o-we-bg-lighter;
             box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
 
             > we-title {
@@ -442,7 +436,7 @@ body.editor_enable.editor_has_snippets {
                 align-items: center;
                 margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent);
                 padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
-                background: $o-we-bg-light;
+                background-color: $o-we-bg-light;
                 box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
                 font-size: $o-we-sidebar-content-main-title-font-size;
 
@@ -453,7 +447,7 @@ body.editor_enable.editor_has_snippets {
 
                 > we-top-button-group {
                     flex: 0 0 auto;
-                    display: block;
+                    display: flex;
                     margin-left: auto;
                     font-size: .9em;
 
@@ -461,20 +455,13 @@ body.editor_enable.editor_has_snippets {
                         font-size: 1.2em;
                     }
 
-                    > * {
+                    we-button {
                         margin-left: $o-we-sidebar-content-field-multi-spacing;
-                    }
-                    > we-customizeblock-option {
-                        &, .fa {
-                            display: inline-block !important;
-                        }
-                        .fa {
-                            margin: 0;
-                        }
-                    }
+                        padding: 0 $o-we-sidebar-content-field-multi-spacing;
 
-                    .fa {
-                        @extend %we-generic-link;
+                        &.fa {
+                            margin-left: $o-we-sidebar-content-field-label-spacing;
+                        }
                     }
                 }
             }
@@ -548,7 +535,7 @@ body.editor_enable.editor_has_snippets {
         }
 
         // Checkboxes
-        .o_we_checkbox_wrapper.o_we_user_value_widget {
+        we-button.o_we_checkbox_wrapper.o_we_user_value_widget {
             padding: 0;
             border: none;
             background: none;
@@ -621,6 +608,10 @@ body.editor_enable.editor_has_snippets {
                     border-right-width: ($o-we-item-spacing - 1px);
                 }
             }
+            &:not(.o_we_so_color_palette) + we-button:not(:hover) {
+                background: none;
+            }
+
             we-selection-items {
                 @include o-position-absolute(100%, 0, auto, 0);
                 z-index: $zindex-dropdown;
@@ -725,8 +716,8 @@ body.editor_enable.editor_has_snippets {
             we-button {
                 display: flex;
                 justify-content: center;
-                flex: 0 1 percentage(1/3);
-                padding: 0 2px;
+                flex: 0 1 percentage(1/4);
+                padding: ($o-we-sidebar-content-field-button-group-button-spacing / 4) ($o-we-sidebar-content-field-button-group-button-spacing / 3);
                 text-align: center;
             }
         }
@@ -744,6 +735,10 @@ body.editor_enable.editor_has_snippets {
                 &:focus-within {
                     border-color: $o-we-sidebar-content-field-input-border-color;
                 }
+
+                > we-button { // for input-group
+                    border: none;
+                }
             }
 
             &.o_we_large_input > div {
@@ -862,7 +857,7 @@ body.editor_enable.editor_has_snippets {
             input[type="range"] {
                 @include large-component();
                 height: $o-we-sidebar-content-field-height;
-                padding: 0;
+                padding: 0 $o-we-item-border-width 0 0;
                 background-color: transparent;
                 appearance: none;
 
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index f2eaf597fcd..673ba9ea5f6 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -24,10 +24,10 @@
             <we-title>
                 <span t-esc="name"/>
                 <we-top-button-group>
-                    <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_hover_success"
+                    <we-button class="fa fa-fw fa-clone oe_snippet_clone o_we_link o_we_hover_success"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
-                    <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_hover_danger"
+                    <we-button class="fa fa-fw fa-trash oe_snippet_remove o_we_link o_we_hover_danger"
                                 title="Remove Block"
                                 aria-label="Remove Block"/>
                 </we-top-button-group>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index e284a024b48..0b0508b8317 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -116,8 +116,9 @@
                     <we-button data-background-type="cover">Cover</we-button>
                     <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
                 </we-select>
-                <we-button class="fa fa-fw fa-crosshairs" title="Background Position"
-                        data-background-position-overlay="true" data-no-preview="true"/>
+                <we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
+                    <i class="fa fa-fw fa-crosshairs"/>
+                </we-button>
             </we-row>
             <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
                 <!-- &emsp; -->
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 14a2bcfdc57..c5a2a6ef450 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -30,8 +30,11 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
     start: async function () {
         await this._super(...arguments);
         const linkButton = document.createElement('we-button');
-        linkButton.classList.add('o_we_redirect_to', 'fa', 'fa-fw', 'fa-external-link');
+        const icon = document.createElement('i');
+        icon.classList.add('fa', 'fa-fw', 'fa-external-link')
+        linkButton.classList.add('o_we_redirect_to');
         linkButton.title = _t("Redirect to URL in a new tab");
+        linkButton.appendChild(icon);
         this.containerEl.appendChild(linkButton);
         this.el.classList.add('o_we_large_input');
         this.inputEl.classList.add('text-left');
diff --git a/addons/website/static/src/snippets/s_chart/options.js b/addons/website/static/src/snippets/s_chart/options.js
index a76a0a71f31..fe59cedf4a4 100644
--- a/addons/website/static/src/snippets/s_chart/options.js
+++ b/addons/website/static/src/snippets/s_chart/options.js
@@ -201,7 +201,7 @@ options.registry.InnerChart = options.Class.extend({
      */
     _makeDeleteButton: function (...classes) {
         const rmbuttonEl = options.buildElement('we-button', null, {
-            classes: ['fa', 'fa-fw', 'fa-minus', ...classes],
+            classes: ['o_we_text_danger', 'o_we_link', 'fa', 'fa-fw', 'fa-minus', ...classes],
         });
         const newEl = document.createElement('td');
         newEl.appendChild(rmbuttonEl);
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
index 366b6adf3fd..822531bc38b 100644
--- a/addons/website/views/snippets/s_chart.xml
+++ b/addons/website/views/snippets/s_chart.xml
@@ -48,10 +48,10 @@
                 <table>
                     <tr>
                         <th/>
-                        <th><we-button class="fa fa-fw fa-plus add_column"/></th>
+                        <th><we-button class="add_column fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
                     </tr>
                     <tr>
-                        <th><we-button class="fa fa-fw fa-plus add_row"/></th>
+                        <th><we-button class="add_row fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
                     </tr>
                 </table>
             </we-matrix>
diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml
index 05df0d245de..3a8d84e9d07 100644
--- a/addons/website/views/snippets/s_rating.xml
+++ b/addons/website/views/snippets/s_rating.xml
@@ -35,7 +35,9 @@
                     data-apply-to=".s_rating_active_icons"
                     data-css-property="color"
                     data-color-prefix="text-"/>
-                <we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true"></we-button>
+                <we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
+                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                </we-button>
             </we-row>
             <we-row string="⌙ Inactive">
                 <we-colorpicker
@@ -43,11 +45,13 @@
                     data-apply-to=".s_rating_inactive_icons"
                     data-css-property="color"
                     data-color-prefix="text-"/>
-                <we-button class="fa fa-fw fa-edit" data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true"></we-button>
+                <we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
+                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                </we-button>
             </we-row>
             <we-row string="Score">
                 <we-input data-active-icons-number="true" data-step="1"/>
-                <span>/</span>
+                <span class="mx-2">/</span>
                 <we-input data-total-icons-number="true" data-step="1"/>
             </we-row>
             <we-button-group string="Size" data-apply-to=".s_rating_icons">
diff --git a/addons/website/views/snippets/s_tabs.xml b/addons/website/views/snippets/s_tabs.xml
index 1519804080e..9d428170ac1 100644
--- a/addons/website/views/snippets/s_tabs.xml
+++ b/addons/website/views/snippets/s_tabs.xml
@@ -65,16 +65,20 @@
     <xpath expr="." position="inside">
         <div data-js="NavTabs" data-selector="section.s_tabs">
             <we-button data-add-tab=""
-                        data-no-preview="true"
-                        class="fa fa-fw fa-plus"
-                        title="Add Tab"
-                        aria-label="Add Tab"/>
+                       data-no-preview="true"
+                       class="o_we_text_success ml-0"
+                       title="Add Tab"
+                       aria-label="Add Tab">
+                <i class="fa fa-fw fa-plus"/>
+            </we-button>
             <we-button data-remove-tab=""
-                        data-name="remove_tab_opt"
-                        data-no-preview="true"
-                        class="fa fa-fw fa-minus"
-                        title="Remove Tab"
-                        aria-label="Remove Tab"/>
+                       data-name="remove_tab_opt"
+                       data-no-preview="true"
+                       class="o_we_text_danger mr-3"
+                       title="Remove Tab"
+                       aria-label="Remove Tab">
+                <i class="fa fa-fw fa-minus"/>
+            </we-button>
         </div>
         <div data-js="NavTabsStyle" data-selector="section" data-target=".s_tabs_main">
             <we-select string="Style">
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 632df4b44ae..569e4ac2330 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -383,10 +383,18 @@
 
     <div data-js="CarouselItem"
          data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
-        <we-button data-slide="left" data-no-preview="true" class="fa fa-fw fa-angle-left"/>
-        <we-button data-slide="right" data-no-preview="true" class="fa fa-fw fa-angle-right"/>
-        <we-button data-add-slide="true" data-no-preview="true" class="fa fa-fw fa-plus"/>
-        <we-button data-remove-slide="true" data-no-preview="true" class="fa fa-fw fa-minus"/>
+        <we-button data-slide="left" data-no-preview="true">
+            <i class="fa fa-fw fa-angle-left"/>
+        </we-button>
+        <we-button data-slide="right" data-no-preview="true" class="mr-2">
+            <i class="fa fa-fw fa-angle-right"/>
+        </we-button>
+        <we-button data-add-slide="true" data-no-preview="true" class="o_we_text_success">
+            <i class="fa fa-fw fa-plus"/>
+        </we-button>
+        <we-button data-remove-slide="true" data-no-preview="true" class="o_we_text_danger">
+            <i class="fa fa-fw fa-minus"/>
+        </we-button>
     </div>
 
     <!-- Accordion -->
@@ -491,7 +499,7 @@
 
     <div data-js="SnippetSave"
         t-attf-data-selector="#{so_snippet_addition_selector}, #{so_content_addition_selector}">
-        <we-button class="fa fa-fw fa-save o_we_hover_warning"
+        <we-button class="fa fa-fw fa-save o_we_link o_we_hover_warning"
                    title="Save the block to use it elsewhere"
                    data-save-snippet=""
                    data-no-preview="true"/>
@@ -719,7 +727,7 @@
     <div data-js="anchor"
         data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
         data-exclude=".modal *, .oe_structure .oe_structure *, [data-oe-type=html] .oe_structure *">
-        <we-button class="fa fa-fw fa-link"
+        <we-button class="fa fa-fw fa-link o_we_link"
                    title="Create a link to target this section"
                    data-no-preview="true"/>
     </div>
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index dd8f0c6bf71..91004dcb5db 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -45,18 +45,22 @@
 
         <!-- Add Field Form -->
         <div data-js="AddFieldForm" data-selector=".s_website_form" data-target="form">
-            <we-button class="fa fa-fw fa-plus"
+            <we-button class="o_we_text_success"
                 title="Add a new field at the end"
                 data-add-field=""
-                data-no-preview="true"/>
+                data-no-preview="true">
+                <i class="fa fa-fw fa-plus"/>
+            </we-button>
         </div>
 
         <!-- Add Field -->
         <div data-js="AddField" data-selector=".s_website_form_field" data-exclude=".s_website_form_dnone">
-            <we-button class="fa fa-fw fa-plus"
+            <we-button class="o_we_text_success"
                 title="Add a new field after this one"
                 data-add-field=""
-                data-no-preview="true"/>
+                data-no-preview="true">
+                <i class="fa fa-fw fa-plus"/>
+            </we-button>
         </div>
 
         <!-- Field -->