diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 8fff4315649..8364f932279 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -42,6 +42,7 @@
         'views/snippets/s_share.xml',
         'views/snippets/s_rating.xml',
         'views/snippets/s_btn.xml',
+        'views/snippets/s_hr.xml',
         'views/website_views.xml',
         'views/website_visitor_views.xml',
         'views/res_config_settings_views.xml',
diff --git a/temp_scss b/addons/website/static/src/scss/website.scss
similarity index 97%
rename from temp_scss
rename to addons/website/static/src/scss/website.scss
index 877b268c7f1..9d2276a438f 100644
--- a/temp_scss
+++ b/addons/website/static/src/scss/website.scss
@@ -912,32 +912,6 @@ table.table_desc tr td {
 }
 
 
-// HR
-.s_hr {
-    line-height: 0;
-    hr {
-        padding: 0;
-        border: 0;
-        border-top-color: inherit;
-        margin: 0;
-    }
-    // Style
-    .s_hr_dashed { border-top-style: dashed; }
-    .s_hr_double { border-top-style: double; }
-    .s_hr_dotted { border-top-style: dotted; }
-    .s_hr_solid  { border-top-style: solid;  }
-    // Thickness
-    $count: 5;
-    $base-width: 1px;
-    @while $count > 0 {
-        .s_hr_#{$base-width * $count} {
-            border-top-width: $base-width * $count;
-        }
-        $count: $count - 1;
-    }
-}
-
-
 //
 // Layout
 //
diff --git a/addons/website/static/src/snippets/s_hr/000.scss b/addons/website/static/src/snippets/s_hr/000.scss
new file mode 100644
index 00000000000..ec548e3c555
--- /dev/null
+++ b/addons/website/static/src/snippets/s_hr/000.scss
@@ -0,0 +1,24 @@
+
+.s_hr {
+    line-height: 0;
+    hr {
+        padding: 0;
+        border: 0;
+        border-top-color: inherit;
+        margin: 0;
+    }
+    // Style
+    .s_hr_dashed { border-top-style: dashed; }
+    .s_hr_double { border-top-style: double; }
+    .s_hr_dotted { border-top-style: dotted; }
+    .s_hr_solid  { border-top-style: solid;  }
+    // Thickness
+    $count: 5;
+    $base-width: 1px;
+    @while $count > 0 {
+        .s_hr_#{$base-width * $count} {
+            border-top-width: $base-width * $count;
+        }
+        $count: $count - 1;
+    }
+}
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
new file mode 100644
index 00000000000..14a140ee008
--- /dev/null
+++ b/addons/website/views/snippets/s_hr.xml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_hr" name="Separator">
+    <div class="s_hr text-left pt32 pb32">
+        <hr class="s_hr_1px s_hr_solid border-600 w-100 mx-auto"/>
+    </div>
+</template>
+
+<template id="s_hr_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_hr" data-target="hr">
+            <we-colorpicker string="Color"
+                data-select-style="true"
+                data-css-property="border-color"
+                data-color-prefix="border-"
+                data-excluded="transparent_grayscale"/>
+            <we-select string="Thickness">
+                <t t-foreach="range(1,6)" t-as="s_hr_thickness">
+                    <we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
+                </t>
+            </we-select>
+            <we-select string="Style">
+                <we-button data-select-class="s_hr_solid">Solid</we-button>
+                <we-button data-select-class="s_hr_dashed">Dashed</we-button>
+                <we-button data-select-class="s_hr_dotted">Dotted</we-button>
+                <we-button data-select-class="s_hr_double">Double</we-button>
+            </we-select>
+            <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">100%</we-button>
+            </we-select>
+            <we-select string="Alignment">
+                <we-button data-select-class="mr-auto">Left</we-button>
+                <we-button data-select-class="mx-auto">Center</we-button>
+                <we-button data-select-class="ml-auto">Right</we-button>
+            </we-select>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_hr_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_hr/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/temp_xml b/addons/website/views/snippets/snippets.xml
similarity index 97%
rename from temp_xml
rename to addons/website/views/snippets/snippets.xml
index b652f523fc5..0fe7a13ea79 100644
--- a/temp_xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_hr" name="Separator">
-    <div class="s_hr text-left pt32 pb32">
-        <hr class="s_hr_1px s_hr_solid border-600 w-100 mx-auto"/>
-    </div>
-</template>
-
 <template id="s_facebook_page" name="Facebook Page">
     <div class="o_facebook_page">
         <div class="o_facebook_alert alert alert-info" role="status">
@@ -693,16 +687,6 @@
             data-color-prefix="bg-"/>
     </div>
 
-    <!-- COLOR | .s_hr -->
-    <div data-selector=".s_hr"
-         data-target="hr">
-        <we-colorpicker string="Color"
-            data-select-style="true"
-            data-css-property="border-color"
-            data-color-prefix="border-"
-            data-excluded="transparent_grayscale"/>
-    </div>
-
     <!-- COLOR | .s_cards -->
     <div data-selector=".s_card, .accordion .card">
         <we-colorpicker string="Color"
@@ -729,32 +713,6 @@
         </we-select>
     </div>
 
-    <!-- STYLES | .s_hr -->
-    <div data-selector=".s_hr" data-target="hr">
-        <we-select string="Thickness">
-            <t t-foreach="range(1,6)" t-as="s_hr_thickness">
-                <we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
-            </t>
-        </we-select>
-        <we-select string="Style">
-            <we-button data-select-class="s_hr_solid">Solid</we-button>
-            <we-button data-select-class="s_hr_dashed">Dashed</we-button>
-            <we-button data-select-class="s_hr_dotted">Dotted</we-button>
-            <we-button data-select-class="s_hr_double">Double</we-button>
-        </we-select>
-        <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">100%</we-button>
-        </we-select>
-        <we-select string="Alignment">
-            <we-button data-select-class="mr-auto">Left</we-button>
-            <we-button data-select-class="mx-auto">Center</we-button>
-            <we-button data-select-class="ml-auto">Right</we-button>
-        </we-select>
-    </div>
-
     <!-- Carousel | .s_carousel | .s_quotes_carousel -->
     <div data-js="Carousel"
         data-selector="section"