diff --git a/addons/website/static/src/snippets/s_timeline/000.scss b/addons/website/static/src/snippets/s_timeline/000.scss
index 4a0ce4df71c..2c0d03f904a 100644
--- a/addons/website/static/src/snippets/s_timeline/000.scss
+++ b/addons/website/static/src/snippets/s_timeline/000.scss
@@ -1,6 +1,8 @@
 .s_timeline {
     .s_timeline_line {
         position: relative;
+        border-color: gray('800'); // For inheritance, not actual border
+
         &:before {
             content: '';
             display: block !important; // override portal '#wrap .container' value
@@ -9,7 +11,8 @@
             top: 0px;
             bottom: 0px;
             left: 50%;
-            background-color: gray('800');
+            border-left: 1px solid;
+            border-color: inherit;
         }
     }
     .s_timeline_row {
diff --git a/addons/website/static/src/snippets/s_timeline/options.js b/addons/website/static/src/snippets/s_timeline/options.js
index c1efa23c2f9..2ccff40cdba 100644
--- a/addons/website/static/src/snippets/s_timeline/options.js
+++ b/addons/website/static/src/snippets/s_timeline/options.js
@@ -8,7 +8,7 @@ options.registry.Timeline = options.Class.extend({
      * @override
      */
     start: function () {
-        var $buttons = this.$el.find('we-button');
+        var $buttons = this.$el.find('we-button.o_we_overlay_opt');
         var $overlayArea = this.$overlay.find('.o_overlay_options_wrap');
         $overlayArea.append($('<div/>').append($buttons));
 
diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml
index 9ca5212d8b6..32f927e9f0f 100644
--- a/addons/website/views/snippets/s_timeline.xml
+++ b/addons/website/views/snippets/s_timeline.xml
@@ -53,10 +53,22 @@
 </template>
 
 <template id="s_timeline_options" inherit_id="website.snippet_options">
+    <xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
+        <div data-js="MultipleItems" data-selector=".s_timeline">
+            <we-row string="Year">
+                <we-button data-add-item="" data-item=".s_timeline_row:first" data-select-item="" data-add-before="true" data-no-preview="true" class="o_we_bg_brand_primary">
+                    Add Year
+                </we-button>
+            </we-row>
+        </div>
+    </xpath>
     <xpath expr="." position="inside">
         <div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row"/>
         <div data-js="Timeline" data-selector=".s_timeline_card">
-            <we-button data-timeline-card="" data-no-preview="true"><i class="fa fa-fw fa-angle-left"/><i class="fa fa-fw fa-angle-right"/></we-button>
+            <we-button data-timeline-card="" data-no-preview="true" class="o_we_overlay_opt"><i class="fa fa-fw fa-angle-left"/><i class="fa fa-fw fa-angle-right"/></we-button>
+        </div>
+        <div data-selector=".s_timeline">
+            <we-colorpicker string="Line Color" data-select-style="true" data-css-property="border-color" data-color-prefix="border-" data-apply-to=".s_timeline_line"/>
         </div>
     </xpath>
     <xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">