diff --git a/addons/web_editor/static/src/img/snippets_options/content_width_full.svg b/addons/mass_mailing/static/src/img/snippets_options/content_width_full.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/content_width_full.svg
rename to addons/mass_mailing/static/src/img/snippets_options/content_width_full.svg
diff --git a/addons/web_editor/static/src/img/snippets_options/content_width_normal.svg b/addons/mass_mailing/static/src/img/snippets_options/content_width_normal.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/content_width_normal.svg
rename to addons/mass_mailing/static/src/img/snippets_options/content_width_normal.svg
diff --git a/addons/web_editor/static/src/img/snippets_options/content_width_small.svg b/addons/mass_mailing/static/src/img/snippets_options/content_width_small.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/content_width_small.svg
rename to addons/mass_mailing/static/src/img/snippets_options/content_width_small.svg
diff --git a/addons/mass_mailing/views/snippets/s_alert.xml b/addons/mass_mailing/views/snippets/s_alert.xml
index 6f634e3345e..e9813e386e5 100644
--- a/addons/mass_mailing/views/snippets/s_alert.xml
+++ b/addons/mass_mailing/views/snippets/s_alert.xml
@@ -13,7 +13,7 @@
 </template>
 
 <template id="s_alert_options" inherit_id="mass_mailing.snippet_options">
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="before">
+    <xpath expr="//div[@id='so_width']" position="before">
         <div data-selector=".s_alert" data-js="Alert">
             <we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
                 <we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
@@ -26,7 +26,7 @@
         </div>
     </xpath>
     <!-- Keep those options in separate xpath for options order -->
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="after">
+    <xpath expr="//div[@id='so_width']" position="after">
         <div data-selector=".s_alert">
             <we-select string="Size">
                 <we-button data-select-class="s_alert_sm">Small</we-button>
diff --git a/addons/mass_mailing/views/snippets/s_hr.xml b/addons/mass_mailing/views/snippets/s_hr.xml
index 85f3936c085..da434e10fca 100644
--- a/addons/mass_mailing/views/snippets/s_hr.xml
+++ b/addons/mass_mailing/views/snippets/s_hr.xml
@@ -10,7 +10,7 @@
 <template id="s_hr_options" inherit_id="mass_mailing.snippet_options">
     <xpath expr="." position="inside">
         <div data-selector=".s_hr" data-target="hr">
-            <t t-call="web_editor.snippet_options_border_line_widgets">
+            <t t-call="mass_mailing.snippet_options_border_line_widgets">
                 <t t-set="label">Border</t>
                 <t t-set="direction" t-value="'top'"/>
             </t>
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 447ce98aec9..25e97209b64 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -771,6 +771,47 @@
     </a>
 </template>
 
+<!-- Border -->
+<template id="snippet_options_border_line_widgets">
+    <we-row t-att-string="label">
+        <we-input data-name="border_width_opt"
+                t-att-data-apply-to="apply_to"
+                data-select-style="0"
+                t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width"
+                data-unit="px"
+                t-att-data-extra-class="with_bs_class and 'border'"
+                t-att-data-variable="width_variable"/>
+        <we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style"
+                data-dependencies="border_width_opt"
+                t-att-data-apply-to="apply_to"
+                t-att-data-variable="style_variable">
+            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
+            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
+            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
+            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
+        </we-select>
+        <we-colorpicker data-dependencies="border_width_opt"
+                        t-att-data-apply-to="apply_to"
+                        data-select-style="true"
+                        t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color"
+                        data-color-prefix="border-"
+                        t-att-data-color="color_variable"/>
+    </we-row>
+</template>
+
+<template id="snippet_options_border_widgets">
+    <t t-call="mass_mailing.snippet_options_border_line_widgets">
+        <t t-set="label">Border</t>
+        <t t-set="with_bs_class" t-value="True"/>
+    </t>
+    <we-input string="Round Corners"
+            t-att-data-apply-to="apply_to"
+            t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
+            data-select-style="0" data-css-property="border-radius"
+            data-unit="px" data-extra-class="rounded"
+            t-att-data-variable="radius_variable"/>
+</template>
+
 <!-- Snippet themes Options -->
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
@@ -780,7 +821,7 @@
     <div data-js="Box"
          data-selector=".row > div"
          data-exclude=".o_mail_wrapper_td, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div">
-        <t t-call="web_editor.snippet_options_border_widgets"/>
+        <t t-call="mass_mailing.snippet_options_border_widgets"/>
     </div>
     <div data-js="layout_column"
         data-selector=".o_mail_snippet_general"
@@ -810,28 +851,41 @@
     </div>
 
     <!-- H-ALIGN -->
-    <t t-call="web_editor.snippet_options_text_align">
-        <t t-set="selector" t-value="'.s_text_highlight'"/>
-    </t>
+    <div id="so_text_align" data-selector=".s_text_highlight">
+        <we-button-group string="Alignment">
+            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
-    <t t-call="web_editor.snippet_options_width">
-        <t t-set="selector" t-value="'.s_alert, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_width" data-selector=".s_alert, .s_blockquote, .s_text_highlight">
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <we-button data-select-class="w-75">75%</we-button>
+            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
+        </we-select>
+    </div>
 
-    <t t-call="web_editor.snippet_options_block_align">
-        <t t-set="selector" t-value="'.s_alert, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_block_align" data-selector=".s_alert, .s_blockquote, .s_text_highlight">
+        <we-button-group string="Alignment" data-dependencies="!so_width_100">
+            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
     <div data-js="BodyWidth" data-selector=".o_layout" data-target=".o_mail_wrapper" data-no-check="true">
         <we-button-group string="Body Width">
             <we-button data-select-class="o_mail_small"
-                        data-img="/web_editor/static/src/img/snippets_options/content_width_small.svg"
+                        data-img="/mass_mailing/static/src/img/snippets_options/content_width_small.svg"
                         title="Small"/>
             <we-button data-select-class="o_mail_regular"
-                        data-img="/web_editor/static/src/img/snippets_options/content_width_normal.svg"
+                        data-img="/mass_mailing/static/src/img/snippets_options/content_width_normal.svg"
                         title="Regular"/>
             <we-button data-select-class=""
-                        data-img="/web_editor/static/src/img/snippets_options/content_width_full.svg"
+                        data-img="/mass_mailing/static/src/img/snippets_options/content_width_full.svg"
                         title="Full"/>
         </we-button-group>
     </div>
@@ -911,7 +965,7 @@
             data-no-transparency="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="mass_mailing.snippet_options_border_widgets">
             <t t-set="so_rounded_no_dependencies" t-value="True"/>
         </t>
     </div>
@@ -919,7 +973,7 @@
     <div data-js="Box"
          data-selector=".o_mail_block_discount2"
          data-target="table">
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="mass_mailing.snippet_options_border_widgets">
         </t>
     </div>
 
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 1a84dedf112..9b2a2b79b9f 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -366,119 +366,6 @@
     </t>
 </template>
 
-<!-- H-ALIGN -->
-<template id="snippet_options_text_align">
-    <div id="so_text_align" t-att-data-selector="selector">
-        <we-button-group string="Alignment">
-            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
-        </we-button-group>
-    </div>
-</template>
-
-<template id="snippet_options_width">
-    <div id="so_width" t-att-data-selector="selector">
-        <we-select string="Width">
-            <we-button data-select-class="w-25">25%</we-button>
-            <we-button data-select-class="w-50">50%</we-button>
-            <we-button data-select-class="w-75">75%</we-button>
-            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
-        </we-select>
-    </div>
-</template>
-
-<template id="snippet_options_block_align">
-    <div id="so_block_align" t-att-data-selector="selector">
-        <we-button-group string="Alignment" data-dependencies="!so_width_100">
-            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
-        </we-button-group>
-    </div>
-</template>
-
-<!-- Stretch section -->
-<template id="snippet_options_container_width">
-    <we-button-group string="Content Width">
-        <we-button data-select-class="o_container_small"
-                    data-img="/web_editor/static/src/img/snippets_options/content_width_small.svg"
-                    title="Small"/>
-        <we-button data-select-class="container"
-                    data-img="/web_editor/static/src/img/snippets_options/content_width_normal.svg"
-                    title="Regular"/>
-        <we-button data-select-class="container-fluid"
-                    data-img="/web_editor/static/src/img/snippets_options/content_width_full.svg"
-                    title="Full"/>
-    </we-button-group>
-</template>
-
-<template id="snippet_options_border_line_widgets">
-    <we-row t-att-string="label">
-        <we-input data-name="border_width_opt"
-                  t-att-data-apply-to="apply_to"
-                  data-select-style="0"
-                  t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width"
-                  data-unit="px"
-                  t-att-data-extra-class="with_bs_class and 'border'"
-                  t-att-data-variable="width_variable"/>
-        <we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style"
-                   data-dependencies="border_width_opt"
-                   t-att-data-apply-to="apply_to"
-                   t-att-data-variable="style_variable">
-            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
-            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
-            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
-            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
-        </we-select>
-        <we-colorpicker data-dependencies="border_width_opt"
-                        t-att-data-apply-to="apply_to"
-                        data-select-style="true"
-                        t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color"
-                        data-color-prefix="border-"
-                        t-att-data-color="color_variable"/>
-    </we-row>
-</template>
-
-<template id="snippet_options_border_widgets">
-    <t t-call="web_editor.snippet_options_border_line_widgets">
-        <t t-set="label">Border</t>
-        <t t-set="with_bs_class" t-value="True"/>
-    </t>
-    <we-input string="Round Corners"
-              t-att-data-apply-to="apply_to"
-              t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
-              data-select-style="0" data-css-property="border-radius"
-              data-unit="px" data-extra-class="rounded"
-              t-att-data-variable="radius_variable"/>
-</template>
-
-<template id="snippet_options_shadow_widgets">
-    <we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable">
-        <we-button data-set-shadow="">None</we-button>
-        <we-button data-set-shadow="outset"
-                   data-img="/web_editor/static/src/img/snippets_options/shadow_out.svg"
-                   data-name="shadow_active_opt"
-                   title="Outset"/>
-        <we-button data-set-shadow="inset"
-                   data-img="/web_editor/static/src/img/snippets_options/shadow_in.svg"
-                   data-name="shadow_inset_opt"
-                   title="Inset"/>
-    </we-button-group>
-    <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt" t-att-data-variable="shadow_variable">
-        <we-colorpicker string="⌙ Color" data-select-style="" data-css-compatible=""/>
-        <we-row string="⌙ Offset (X, Y)">
-            <we-input data-select-style="" data-unit="px"/>
-            <we-input data-select-style="" data-unit="px"/>
-        </we-row>
-        <we-input string="⌙ Blur" data-select-style="" data-unit="px"/>
-        <we-input string="⌙ Spread" data-select-style="" data-unit="px"/>
-        <!-- Inset parameter always hidden (as controlled above) but needed -->
-        <!-- for the we-multi widget to work properly. -->
-        <we-checkbox data-name="fake_inset_shadow_opt" data-select-style="inset"/>
-    </we-multi>
-</template>
-
 <!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
 <template id="snippet_options">
     <!-- t-field -->
diff --git a/addons/website/static/src/img/snippets_options/content_width_full.svg b/addons/website/static/src/img/snippets_options/content_width_full.svg
new file mode 100644
index 00000000000..4620dce4d03
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_full.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g fill="#FFF" class="3_buttons_copy_2" transform="translate(-228 -7)">
+      <g class="content_width_full" transform="translate(228 7)">
+        <path d="M23 0v8H0V0h23zm-5 1v2.5h-3v1h3V7l3-3-3-3zM5 1L2 4l3 3V4.5h3v-1H5V1z" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/content_width_normal.svg b/addons/website/static/src/img/snippets_options/content_width_normal.svg
new file mode 100644
index 00000000000..2a6b08a8fe0
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_normal.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_2" transform="translate(-185 -7)">
+      <g class="content_width_normal" transform="translate(185 7)">
+        <rect width="23" height="8" class="spacer"/>
+        <rect width="13" height="8" x="5" fill="#FFF" class="o_graphic"/>
+        <polygon fill="#D8D8D8" points="2 0 2 8 3 8 3 0" class="o_subdle"/>
+        <polygon fill="#D8D8D8" points="20 0 20 8 21 8 21 0" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/content_width_small.svg b/addons/website/static/src/img/snippets_options/content_width_small.svg
new file mode 100644
index 00000000000..f52d357bf14
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_small.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g fill="#FFF" class="3_buttons_copy_2" transform="translate(-141 -7)">
+      <g class="content_width_small" transform="translate(141 7)">
+        <rect width="7" height="8" x="8" class="o_graphic"/>
+        <polygon fill-rule="nonzero" points="3 1 6 4 3 7 3 4.5 0 4.5 0 3.5 3 3.5" class="o_graphic"/>
+        <polygon fill-rule="nonzero" points="20 1 17 4 20 7 20 4.5 23 4.5 23 3.5 20 3.5" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/web_editor/static/src/img/snippets_options/shadow_in.svg b/addons/website/static/src/img/snippets_options/shadow_in.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/shadow_in.svg
rename to addons/website/static/src/img/snippets_options/shadow_in.svg
diff --git a/addons/web_editor/static/src/img/snippets_options/shadow_out.svg b/addons/website/static/src/img/snippets_options/shadow_out.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/shadow_out.svg
rename to addons/website/static/src/img/snippets_options/shadow_out.svg
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 409048d6bf1..c27b5086c94 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -6,7 +6,6 @@ const {ColorpickerWidget} = require('web.Colorpicker');
 const config = require('web.config');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
-const dom = require('web.dom');
 const weUtils = require('web_editor.utils');
 var options = require('web_editor.snippets.options');
 const wLinkPopoverWidget = require('@website/js/widgets/link_popover_widget')[Symbol.for("default")];
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 32c0549a730..73a5ff9a5ae 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -350,6 +350,13 @@ font[class*='bg-'] {
         background: transparent;
     }
 }
+// Smaller container
+.o_container_small {
+    @extend .container;
+    @include media-breakpoint-up(lg) {
+        max-width: map-get($container-max-widths, md);
+    }
+}
 
 // Buttons
 .btn {
@@ -464,6 +471,25 @@ table.table_desc tr td {
     border-radius: 0;
 }
 
+.o_full_screen_height {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    min-height: 100vh !important;
+}
+.o_half_screen_height {
+    @extend .o_full_screen_height;
+    min-height: 55vh !important;
+}
+
+// TODO remove cover_full and cover_mid classes (kept for compatibility for now)
+.cover_full {
+    @extend .o_full_screen_height;
+}
+.cover_mid {
+    @extend .o_half_screen_height;
+}
+
 // Allows custom border radius without contents overflowing.
 .card {
     overflow: hidden;
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 87e12a9bc4b..b05b48a4f59 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -237,6 +237,14 @@ $i: 1;
 }
 
 // SNIPPET OPTIONS
+.o_we_border_preview {
+    display: inline-block;
+    width: 999px;
+    max-width: 100%;
+    margin-bottom: 2px;
+    border-width: 4px;
+    border-bottom: none !important;
+}
 
 .pac-container { // google map autosuggestion
     z-index: $zindex-modal-backdrop; // > $o-we-zindex
diff --git a/addons/website/views/snippets/s_alert.xml b/addons/website/views/snippets/s_alert.xml
index 038d7850c73..400977a4eaf 100644
--- a/addons/website/views/snippets/s_alert.xml
+++ b/addons/website/views/snippets/s_alert.xml
@@ -11,7 +11,7 @@
 </template>
 
 <template id="s_alert_options" inherit_id="website.snippet_options">
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="before">
+    <xpath expr="//div[@id='so_width']" position="before">
         <div data-selector=".s_alert" data-js="Alert">
             <we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
                 <we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
@@ -24,7 +24,7 @@
         </div>
     </xpath>
     <!-- Keep those options in separate xpath for options order -->
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="after">
+    <xpath expr="//div[@id='so_width']" position="after">
         <div data-selector=".s_alert">
             <we-select string="Size">
                 <we-button data-select-class="s_alert_sm">Small</we-button>
diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml
index 94bb623c07b..2e5d74b38d3 100644
--- a/addons/website/views/snippets/s_blockquote.xml
+++ b/addons/website/views/snippets/s_blockquote.xml
@@ -37,7 +37,7 @@
 
         <!-- Shadow -->
         <div data-js="Box" data-selector=".s_blockquote" data-target=".s_blockquote_content">
-            <t t-call="web_editor.snippet_options_shadow_widgets"/>
+            <t t-call="website.snippet_options_shadow_widgets"/>
         </div>
 
         <!-- Border Color -->
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
index c42b3fa44ba..adaac74fd41 100644
--- a/addons/website/views/snippets/s_hr.xml
+++ b/addons/website/views/snippets/s_hr.xml
@@ -10,7 +10,7 @@
 <template id="s_hr_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
         <div data-selector=".s_hr" data-target="hr">
-            <t t-call="web_editor.snippet_options_border_line_widgets">
+            <t t-call="website.snippet_options_border_line_widgets">
                 <t t-set="label">Border</t>
                 <t t-set="direction" t-value="'top'"/>
             </t>
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index 5f56197a393..e2e36c12851 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -114,7 +114,7 @@
                 <we-button data-select-class="s_image_gallery_show_indicators">Squared Miniatures</we-button>
                 <we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_rounded">Rounded Miniatures</we-button>
             </we-select>
-            <t t-call="web_editor.snippet_options_border_widgets">
+            <t t-call="website.snippet_options_border_widgets">
                 <t t-set="apply_to" t-valuef="img"/>
                 <t t-set="so_rounded_no_dependencies" t-value="true"/>
             </t>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 7f7ca5648b5..76e3499783d 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -65,8 +65,8 @@
             <t t-set="with_gradients" t-value="True"/>
         </t>
         <div data-js="Box" data-selector=".s_media_list_item" data-target="&gt; .row">
-            <t t-call="web_editor.snippet_options_border_widgets"/>
-            <t t-call="web_editor.snippet_options_shadow_widgets"/>
+            <t t-call="website.snippet_options_border_widgets"/>
+            <t t-call="website.snippet_options_shadow_widgets"/>
         </div>
         <div data-selector=".s_media_list_item" data-target="&gt; .row">
             <we-button-group string="Layout">
diff --git a/addons/website/views/snippets/s_product_catalog.xml b/addons/website/views/snippets/s_product_catalog.xml
index 1b90bf25bf4..127818b818c 100644
--- a/addons/website/views/snippets/s_product_catalog.xml
+++ b/addons/website/views/snippets/s_product_catalog.xml
@@ -83,7 +83,7 @@
     <xpath expr="." position="inside">
         <div data-js="ProductCatalog" data-selector=".s_product_catalog">
             <we-checkbox string="Descriptions" data-toggle-description="true" data-no-preview="true"/>
-            <t t-call="web_editor.snippet_options_border_line_widgets">
+            <t t-call="website.snippet_options_border_line_widgets">
                 <t t-set="label">&#8985; Separator</t>
                 <t t-set="direction" t-value="'top'"/>
                 <t t-set="apply_to" t-value="'.s_product_catalog_dish_description'"/>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index fb9fc2f349a..5e43e150cc6 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -241,7 +241,6 @@
     </xpath>
 </template>
 
-<!-- TODO: remove this template -->
 <template id="snippet_options_border_line_widgets">
     <we-row t-att-string="label">
         <we-input data-name="border_width_opt"
@@ -269,7 +268,6 @@
     </we-row>
 </template>
 
-<!-- TODO: remove this template -->
 <template id="snippet_options_border_widgets">
     <t t-call="website.snippet_options_border_line_widgets">
         <t t-set="label">Border</t>
@@ -283,7 +281,6 @@
               t-att-data-variable="radius_variable"/>
 </template>
 
-<!-- TODO: remove this template -->
 <template id="snippet_options_shadow_widgets">
     <we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable">
         <we-button data-set-shadow="">None</we-button>
@@ -335,18 +332,6 @@
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
 
-    <div data-js="ContainerWidth" data-selector="section, .s_carousel .carousel-item, s_quotes_carousel .carousel-item"
-        data-exclude="[data-snippet] :not(.oe_structure) > [data-snippet]" data-target="> .container, > .container-fluid, > .o_container_small">
-        <t t-call="web_editor.snippet_options_container_width"/>
-    </div>
-    <div data-option-name="minHeight" data-selector="section" data-exclude="section .row > div *">
-        <we-button-group string="Height">
-            <we-button data-name="minheight_auto_opt" data-select-class="" title="Fit content">Auto</we-button>
-            <we-button data-select-class="o_half_screen_height" title="Half screen">50%</we-button>
-            <we-button data-select-class="o_full_screen_height" title="Full screen">100%</we-button>
-        </we-button-group>
-    </div>
-
     <!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
     <div data-js="Box"
          data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
@@ -355,10 +340,10 @@
             data-select-style="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="website.snippet_options_border_widgets">
             <t t-set="so_rounded_no_dependencies" t-value="True"/>
         </t>
-        <t t-call="web_editor.snippet_options_shadow_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- COLOR | .s_cards -->
@@ -370,17 +355,30 @@
     </div>
 
     <!-- H-ALIGN -->
-    <t t-call="web_editor.snippet_options_text_align">
-        <t t-set="selector" t-value="'.s_share, .s_text_highlight'"/>
-    </t>
+    <div id="so_text_align" data-selector=".s_share, .s_text_highlight">
+        <we-button-group string="Alignment">
+            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
-    <t t-call="web_editor.snippet_options_width">
-        <t t-set="selector" t-value="'.s_alert, .s_card, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_width" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <we-button data-select-class="w-75">75%</we-button>
+            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
+        </we-select>
+    </div>
 
-    <t t-call="web_editor.snippet_options_block_align">
-        <t t-set="selector" t-value="'.s_alert, .s_card, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
+        <we-button-group string="Alignment" data-dependencies="!so_width_100">
+            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
     <!-- Carousel | .s_carousel | .s_quotes_carousel -->
     <!-- Dedicated colorpicker so that there is not 3 level of
@@ -513,8 +511,8 @@
     <div data-js="Box"
          data-selector="section .row > div"
          data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize">
-        <t t-call="web_editor.snippet_options_border_widgets"/>
-        <t t-call="web_editor.snippet_options_shadow_widgets"/>
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- Mobile display options -->
@@ -657,14 +655,14 @@
          data-target="nav"
          data-no-check="true"
          groups="website.group_website_designer">
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="website.snippet_options_border_widgets">
             <t t-set="so_rounded_no_dependencies" t-value="True"/>
             <t t-set="width_variable" t-value="'menu-border-width'"/>
             <t t-set="style_variable" t-value="'menu-border-style'"/>
             <t t-set="color_variable" t-value="'menu-border-color'"/>
             <t t-set="radius_variable" t-value="'menu-border-radius'"/>
         </t>
-        <t t-call="web_editor.snippet_options_shadow_widgets">
+        <t t-call="website.snippet_options_shadow_widgets">
             <t t-set="shadow_variable" t-value="'menu-box-shadow'"/>
         </t>
     </div>
@@ -938,8 +936,8 @@
          data-target="#footer"
          data-no-check="true"
          groups="website.group_website_designer">
-        <t t-call="web_editor.snippet_options_border_widgets"/>
-        <t t-call="web_editor.snippet_options_shadow_widgets"/>
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- Scroll to Top -->
@@ -1069,8 +1067,31 @@
         </we-select>
     </div>
 
+    <!-- Stretch section -->
+    <div data-js="ContainerWidth" data-selector="section, .s_carousel .carousel-item, s_quotes_carousel .carousel-item"
+        data-exclude="[data-snippet] :not(.oe_structure) > [data-snippet]" data-target="> .container, > .container-fluid, > .o_container_small">
+        <we-button-group string="Content Width">
+            <we-button data-select-class="o_container_small"
+                       data-img="/website/static/src/img/snippets_options/content_width_small.svg"
+                       title="Small"/>
+            <we-button data-select-class="container"
+                       data-img="/website/static/src/img/snippets_options/content_width_normal.svg"
+                       title="Regular"/>
+            <we-button data-select-class="container-fluid"
+                       data-img="/website/static/src/img/snippets_options/content_width_full.svg"
+                       title="Full"/>
+        </we-button-group>
+    </div>
+
     <!-- Scroll to next section button (only for full height) -->
     <div data-js="ScrollButton" data-selector="section" data-exclude="[data-snippet] :not(.oe_structure) > [data-snippet]">
+        <!-- Min height of section -->
+        <we-button-group string="Height" data-show-scroll-button="">
+            <we-button data-name="minheight_auto_opt" data-select-class="" title="Fit content">Auto</we-button>
+            <we-button data-select-class="o_half_screen_height" title="Half screen">50%</we-button>
+            <we-button data-select-class="o_full_screen_height" title="Full screen" data-name="full_height_opt" data-show-scroll-button="true">100%</we-button>
+        </we-button-group>
+
         <we-checkbox string="Scroll down button"
                      data-toggle-button="true"
                      data-no-preview="true"