diff --git a/addons/website_event/static/src/img/snippets_thumbs/s_country_events.svg b/addons/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg
similarity index 100%
rename from addons/website_event/static/src/img/snippets_thumbs/s_country_events.svg
rename to addons/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index fd2bda6d0a6..d4c142fe036 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -111,7 +111,7 @@
                     <t id="sale_products_hook"/>
                     <t t-snippet="website.s_searchbar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_searchbar.svg"/>
                     <t id="blog_posts_hook"/>
-                    <t id="event_local_events_hook"/>
+                    <t id="event_upcoming_snippet_hook"/>
                     <t id="snippet_google_map_hook"/>
                     <t id="mass_mailing_newsletter_block_hook"/>
                     <t id="mass_mailing_newsletter_popup_hook"/>
@@ -166,6 +166,7 @@
 
 <template id="external_snippets" inherit_id="website.snippets" priority="8">
     <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]" position="after">
+        <t t-install="website_event" string="Events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg"/>
         <t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg"/>
         <t t-install="website_mail_group" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_group.svg"/>
         <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg"/>
diff --git a/addons/website_event/__manifest__.py b/addons/website_event/__manifest__.py
index 40356f20c27..bce83f96e00 100644
--- a/addons/website_event/__manifest__.py
+++ b/addons/website_event/__manifest__.py
@@ -17,8 +17,11 @@
     ],
     'data': [
         'data/event_data.xml',
+        'data/website_snippet_data.xml',
         'views/res_config_settings_views.xml',
         'views/event_snippets.xml',
+        'views/snippets/s_events.xml',
+        'views/snippets/snippets.xml',
         'views/event_templates_list.xml',
         'views/event_templates_page.xml',
         'views/event_templates_page_registration.xml',
@@ -55,7 +58,6 @@
             'website_event/static/src/scss/event_templates_page.scss',
             'website_event/static/src/js/display_timer_widget.js',
             'website_event/static/src/js/register_toaster_widget.js',
-            'website_event/static/src/js/website_geolocation.js',
             'website_event/static/src/js/website_event.js',
             'website_event/static/src/js/website_event_ticket_details.js',
             'website_event/static/src/js/website_event_set_customize_options.js',
@@ -63,6 +65,9 @@
         'website.assets_editor': [
             'website_event/static/src/js/website_event.editor.js',
         ],
+        'website.assets_wysiwyg': [
+            '/website_event/static/src/snippets/s_events/options.js',
+        ],
     },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_event/controllers/main.py b/addons/website_event/controllers/main.py
index 87b7d821290..ee44ac4ad69 100644
--- a/addons/website_event/controllers/main.py
+++ b/addons/website_event/controllers/main.py
@@ -375,31 +375,6 @@ class WebsiteEventController(http.Controller):
             'event_ticket_ids': request.env['event.event.ticket'],
         }
 
-    # ------------------------------------------------------------
-    # TOOLS (JSON)
-    # ------------------------------------------------------------
-
-    @http.route('/event/get_country_event_list', type='json', auth='public', website=True)
-    def get_country_events(self, **post):
-        Event = request.env['event.event']
-        country_code = request.session['geoip'].get('country_code')
-        result = {'events': [], 'country': False}
-        events = None
-        domain = request.website.website_domain()
-        if country_code:
-            country = request.env['res.country'].search([('code', '=', country_code)], limit=1)
-            events = Event.search(domain + ['|', ('address_id', '=', None), ('country_id.code', '=', country_code), ('date_begin', '>=', '%s 00:00:00' % fields.Date.today())], order="date_begin")
-        if not events:
-            events = Event.search(domain + [('date_begin', '>=', '%s 00:00:00' % fields.Date.today())], order="date_begin")
-        for event in events:
-            if country_code and event.country_id.code == country_code:
-                result['country'] = country
-            result['events'].append({
-                "date": self.get_formated_date(event),
-                "event": event,
-                "url": event.website_url})
-        return request.env['ir.ui.view']._render_template("website_event.country_events_list", result)
-
     # ------------------------------------------------------------
     # TOOLS (HELPERS)
     # ------------------------------------------------------------
diff --git a/addons/website_event/data/website_snippet_data.xml b/addons/website_event/data/website_snippet_data.xml
new file mode 100644
index 00000000000..18a3923868d
--- /dev/null
+++ b/addons/website_event/data/website_snippet_data.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo><data>
+
+    <record id="ir_filters_event_list_snippet" model="ir.filters">
+        <field name="name">Upcoming Events</field>
+        <field name="model_id">event.event</field>
+        <field name="user_id" eval="False" />
+        <field name="domain">[('date_begin', '&gt;=', context_today())]</field>
+        <field name="sort">['date_begin desc']</field>
+    </record>
+
+    <record id="website_snippet_filter_event_list" model="website.snippet.filter">
+        <field name="filter_id" ref="website_event.ir_filters_event_list_snippet"/>
+        <field name="field_names">name,subtitle</field>
+        <field name="limit" eval="16"/>
+        <field name="name">Upcoming Events</field>
+    </record>
+
+</data></odoo>
diff --git a/addons/website_event/models/__init__.py b/addons/website_event/models/__init__.py
index f660b21f901..1e1a81e486f 100644
--- a/addons/website_event/models/__init__.py
+++ b/addons/website_event/models/__init__.py
@@ -8,4 +8,5 @@ from . import event_type
 from . import website
 from . import website_event_menu
 from . import website_menu
+from . import website_snippet_filter
 from . import website_visitor
diff --git a/addons/website_event/models/website_snippet_filter.py b/addons/website_event/models/website_snippet_filter.py
new file mode 100644
index 00000000000..1a1b6215c64
--- /dev/null
+++ b/addons/website_event/models/website_snippet_filter.py
@@ -0,0 +1,51 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from datetime import timedelta
+
+from odoo import models, fields, _
+
+
+class WebsiteSnippetFilter(models.Model):
+    _inherit = 'website.snippet.filter'
+
+    def _get_hardcoded_sample(self, model):
+        samples = super()._get_hardcoded_sample(model)
+        if model._name == 'event.event':
+            data = [{
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_1.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Great Reno Ballon Race'),
+                'date_begin': fields.Date.today() + timedelta(days=10),
+                'date_end': fields.Date.today() + timedelta(days=11),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_2.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Conference For Architects'),
+                'date_begin': fields.Date.today(),
+                'date_end': fields.Date.today() + timedelta(days=2),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_3.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Live Music Festival'),
+                'date_begin': fields.Date.today() + timedelta(weeks=8),
+                'date_end': fields.Date.today() + timedelta(weeks=8, days=5),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_5.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Hockey Tournament'),
+                'date_begin': fields.Date.today() + timedelta(days=7),
+                'date_end': fields.Date.today() + timedelta(days=7),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_7.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('OpenWood Collection Online Reveal'),
+                'date_begin': fields.Date.today() + timedelta(days=1),
+                'date_end': fields.Date.today() + timedelta(days=3),
+            }, {
+                'cover_properties': '{"background-image": "url(\'/website_event/static/src/img/event_cover_4.jpg\')", "resize_class": "o_record_has_cover o_half_screen_height", "opacity": "0.4"}',
+                'name': _('Business Workshops'),
+                'date_begin': fields.Date.today() + timedelta(days=2),
+                'date_end': fields.Date.today() + timedelta(days=4),
+            }]
+            merged = []
+            for index in range(0, max(len(samples), len(data))):
+                merged.append({**samples[index % len(samples)], **data[index % len(data)]})
+                # merge definitions
+            samples = merged
+        return samples
diff --git a/addons/website_event/static/src/js/website_geolocation.js b/addons/website_event/static/src/js/website_geolocation.js
deleted file mode 100644
index 0ce89dc8e5a..00000000000
--- a/addons/website_event/static/src/js/website_geolocation.js
+++ /dev/null
@@ -1,37 +0,0 @@
-odoo.define('website_event.geolocation', function (require) {
-'use strict';
-
-var publicWidget = require('web.public.widget');
-
-publicWidget.registry.visitor = publicWidget.Widget.extend({
-    selector: ".oe_country_events, .country_events",
-    disabledInEditableMode: false,
-
-    /**
-     * @override
-     */
-    start: function () {
-        var defs = [this._super.apply(this, arguments)];
-        var self = this;
-        var $eventList = this.$('.country_events_list');
-        this._originalContent = $eventList[0].outerHTML;
-        defs.push(this._rpc({route: '/event/get_country_event_list'}).then(function (data) {
-            if (data) {
-                self._$loadedContent = $(data);
-                self._$loadedContent.attr('contentEditable', false);
-                $eventList.replaceWith(self._$loadedContent);
-            }
-        }));
-        return Promise.all(defs);
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        this._super.apply(this, arguments);
-        if (this._$loadedContent) {
-            this._$loadedContent.replaceWith(this._originalContent);
-        }
-    },
-});
-});
diff --git a/addons/website_event/static/src/snippets/s_events/000.js b/addons/website_event/static/src/snippets/s_events/000.js
new file mode 100644
index 00000000000..68fae94a2ab
--- /dev/null
+++ b/addons/website_event/static/src/snippets/s_events/000.js
@@ -0,0 +1,28 @@
+/** @odoo-module **/
+
+import publicWidget from 'web.public.widget';
+import DynamicSnippet from 'website.s_dynamic_snippet';
+
+const DynamicSnippetEvents = DynamicSnippet.extend({
+    selector: '.s_event_upcoming_snippet',
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     * @private
+     */
+    _getSearchDomain: function () {
+        const searchDomain = this._super.apply(this, arguments);
+        const filterByTagIds = JSON.parse(this.$el.get(0).dataset.filterByTagIds || '[]');
+        if (filterByTagIds.length > 0) {
+            searchDomain.concat(Array(filterByTagIds.length-1).fill('&'));
+            for (const tag of filterByTagIds) {
+                searchDomain.push(['tag_ids', 'in', tag]);
+            }
+        }
+        return searchDomain;
+    }
+
+});
+
+publicWidget.registry.events = DynamicSnippetEvents;
diff --git a/addons/website_event/static/src/snippets/s_events/000.scss b/addons/website_event/static/src/snippets/s_events/000.scss
new file mode 100644
index 00000000000..f31635477a1
--- /dev/null
+++ b/addons/website_event/static/src/snippets/s_events/000.scss
@@ -0,0 +1,93 @@
+.s_dynamic {
+    .s_events_event_title {
+        font-weight: $headings-font-weight;
+        line-height: 1;
+    }
+
+    .s_events_event_subtitle {
+        font-size: $font-size-base;
+    }
+
+    &.s_event_event_picture {
+        .s_events_event {
+            margin: 0;
+            min-height: 150px;
+
+            figcaption {
+                position: relative;
+                justify-content: center;
+                pointer-events: auto;
+            }
+
+            .s_events_event_cover {
+                min-height: 100%;
+
+                .o_record_cover_container {
+                    top: 0;
+                }
+            }
+
+            .s_events_event_title {
+                @include font-size($h3-font-size);
+                margin-bottom: 0.5em;
+            }
+        }
+
+        .row {
+            align-items: stretch;
+            .s_events_event_subtitle {
+                margin: 0;
+            }
+        }
+    }
+
+    &.s_event_event_card {
+        .card {
+            height: 100%;
+
+            .s_events_event_cover {
+                height: 150px;
+
+                .o_record_cover_container {
+                    background-color: transparent !important;
+
+                    .o_record_cover_image {
+                        @extend .card-img-top;
+                        height: inherit;
+                    }
+                }
+
+                .s_events_event_date {
+                    top: $card-spacer-x;
+                    right: $card-spacer-x;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    width: $display4-size;
+                    height: $display4-size;
+                    border-radius: 50%;
+                    text-align: center;
+
+                    .s_events_event_month {
+                        font-size: $font-size-sm;
+                        font-weight: $font-weight-bold;
+                        text-transform: uppercase;
+                    }
+                    .s_events_event_day {
+                        font-size: $font-size-lg;
+                        font-weight: $font-weight-light;
+                    }
+                }
+            }
+
+            a {
+                color: color-yiq($o-brand-primary);
+
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+
+        }
+    }
+}
diff --git a/addons/website_event/static/src/snippets/s_events/options.js b/addons/website_event/static/src/snippets/s_events/options.js
new file mode 100644
index 00000000000..9bbe76d5b7c
--- /dev/null
+++ b/addons/website_event/static/src/snippets/s_events/options.js
@@ -0,0 +1,55 @@
+/** @odoo-module **/
+
+import options from 'web_editor.snippets.options';
+import dynamicSnippetOptions from 'website.s_dynamic_snippet_options';
+
+const dynamicSnippetEventOptions = dynamicSnippetOptions.extend({
+    /**
+     * @override
+     */
+    init() {
+        this._super.apply(this, arguments);
+        this.modelNameFilter = 'event.event';
+        this.tagIDs = [];
+    },
+
+    async willStart() {
+        const _super = this._super.bind(this);
+        this.tagIDs = JSON.parse(this.$target[0].dataset.filterByTagIds || '[]');
+        const tags = await this._rpc({
+            model: 'event.tag',
+            method: 'search_read',
+            domain: ['&', ['category_id.website_published', '=', true], ['color', 'not in', ['0', false]]],
+            fields: ['id', 'display_name'],
+        });
+        this.allTagsByID = {};
+        for (const tag of tags) {
+            this.allTagsByID[tag.id] = tag;
+        }
+
+        return _super(...arguments);
+    },
+
+    setTags(previewMode, widgetValue, params) {
+        this.tagIDs = JSON.parse(widgetValue).map(tag => tag.id);
+        this.selectDataAttribute(previewMode, JSON.stringify(this.tagIDs), params);
+    },
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        if (methodName === 'setTags') {
+            return JSON.stringify(this.tagIDs.map(id => this.allTagsByID[id]));
+        }
+        return this._super(...arguments);
+    },
+
+    _setOptionsDefaultValues() {
+        this._setOptionValue('numberOfRecords', 4);
+        this._super.apply(this, arguments);
+    },
+
+});
+
+options.registry.event_upcoming_snippet = dynamicSnippetEventOptions;
diff --git a/addons/website_event/views/event_snippets.xml b/addons/website_event/views/event_snippets.xml
index a610f23ac27..3caea5d7f03 100644
--- a/addons/website_event/views/event_snippets.xml
+++ b/addons/website_event/views/event_snippets.xml
@@ -1,29 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<!-- Snippet - Country Events - Placeholder -->
-<template id="s_country_events" name="Events">
-    <div t-attf-class="s_country_events_list oe_country_events #{_classes}">
-        <div class="country_events_list">
-            <h6 class="o_wevent_sidebar_title">
-                <i class="fa fa-globe mr-2"/>Upcoming Events
-            </h6>
-        </div>
-    </div>
-</template>
-
 <!-- Snippets and options -->
 <template id="snippets" inherit_id="website.snippets">
-    <xpath expr="//t[@id='event_local_events_hook']" position="replace">
-        <t t-snippet="website_event.s_country_events" t-thumbnail="/website_event/static/src/img/snippets_thumbs/s_country_events.svg"/>
-    </xpath>
     <xpath expr="//t[@id='event_speaker_bio_hook']" position="replace">
         <t t-snippet="website_event.s_speaker_bio" t-thumbnail="/website_event/static/src/img/snippets_thumbs/s_speaker_bio.svg"/>
     </xpath>
 </template>
 
 <template id="snippet_options" inherit_id="website.snippet_options">
-    <xpath expr="//*[@t-set='so_content_addition_selector']" position="inside">, .oe_country_events, .s_speaker_bio</xpath>
+    <xpath expr="//*[@t-set='so_content_addition_selector']" position="inside">, .s_speaker_bio</xpath>
 </template>
 
 <template id="event_searchbar_input_snippet_options" inherit_id="website.searchbar_input_snippet_options" name="event search bar snippet options">
diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index 0ba22217e57..a5ebd1ecce6 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -318,13 +318,4 @@
     </xpath>
 </template>
 
-<!-- Index - Sidebar - Snippet - Country Events -->
-<template id="index_sidebar_country_event" inherit_id="website_event.index_sidebar" active="False" customize_show="True" name="Country Events" priority="70">
-    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
-        <div class="o_wevent_sidebar_block">
-            <t t-snippet-call="website_event.s_country_events"/>
-        </div>
-    </xpath>
-</template>
-
 </odoo>
diff --git a/addons/website_event/views/event_templates_widgets.xml b/addons/website_event/views/event_templates_widgets.xml
index 9f424578ee5..b0718308025 100644
--- a/addons/website_event/views/event_templates_widgets.xml
+++ b/addons/website_event/views/event_templates_widgets.xml
@@ -35,40 +35,6 @@
     </xpath>
 </template>
 
-<!-- Snippet - Country Events - List -->
-<template id="country_events_list" name="Country Events List">
-    <div class="country_events_list">
-        <t t-if="events">
-            <h6 class="o_wevent_sidebar_title">
-                <t t-if="country">
-                    <i class="fa fa-flag mr-2"/>Events: <span t-esc="country.name"/>
-                    <img class="img-fluid" t-att-src="country.image_url" alt=""/>
-                </t>
-                <t t-else="">
-                    <i class="fa fa-globe mr-2"/>Upcoming Events
-                </t>
-            </h6>
-            <ul class="list-group mb-3">
-                <li t-foreach="events[:5]" t-as="event_dict" class="list-group-item d-flex justify-content-between">
-                    <a t-att-href="event_dict['url']">
-                        <i t-if="not event_dict['event'].website_published" class="fa fa-ban text-danger mr-1" role="img" aria-label="Unpublished" title="Unpublished"/>
-                        <span t-esc="event_dict['event'].name" t-attf-class="#{(not event_dict['event'].website_published) and 'text-danger' or ''}"/>
-                    </a>
-                    <span t-esc="event_dict['date']"/>
-                </li>
-            </ul>
-            <div t-if="len(events) &gt; 5">
-                <t t-if="country">
-                    <a t-attf-href="/event?country=#{country.id}" class="small"><b>See all events from <span t-esc="country.name"/></b></a>
-                </t>
-                <t t-else="">
-                    <a href="/event" class="small"><b>View all</b></a>
-                </t>
-            </div>
-        </t>
-    </div>
-</template>
-
 <!-- Timer widget -->
 <template id="display_timer_widget" name="Display Timer Widget">
     <t t-set="pre_countdown_display" t-value="bool(pre_countdown_text) or pre_countdown_display"/>
diff --git a/addons/website_event/views/snippets/s_events.xml b/addons/website_event/views/snippets/s_events.xml
new file mode 100644
index 00000000000..fbb0c7adaba
--- /dev/null
+++ b/addons/website_event/views/snippets/s_events.xml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+
+<template id="s_events" name="Events">
+    <t t-call="website.s_dynamic_snippet_template">
+        <t t-set="snippet_name" t-value="'s_events'"/>
+        <t t-set="snippet_classes" t-value="'s_event_upcoming_snippet'"/>
+    </t>
+</template>
+
+<!--TEMPLATES-->
+
+<template id="dynamic_filter_template_event_event_picture" name="Picture Layout" priority="5">
+    <figure t-foreach="records" t-as="data" class="w-100 s_events_event">
+        <t t-set="record" t-value="data['_record']._set_tz_context()"/>
+        <a class="s_events_event_cover position-relative d-flex flex-column shadow-sm overflow-hidden rounded text-decoration-none"
+           t-att-href="data['call_to_action_url']">
+            <t t-call="website.record_cover">
+                <t t-set="_record" t-value="record"/>
+                <t t-set="_resize_height" t-value="512"/>
+                <t t-set="_resize_width" t-value="512"/>
+                <t t-set="use_filters" t-value="True"/>
+                <t t-set="additionnal_classes" t-value="'h-100 w-100 bg-600 position-absolute'"/>
+            </t>
+
+            <figcaption class="text-center w-100 h-100 px-3 d-flex flex-column flex-grow-1">
+                <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                <div class="s_events_event_title text-white" t-field="record.name"/>
+                <time itemprop="startDate" t-att-datetime="record.date_begin" class="text-white">
+                    <span t-out="record.date_begin"
+                          t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'long'}"/> -
+                    <span t-out="record.date_begin"
+                          t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short'}"/>
+                </time>
+            </figcaption>
+        </a>
+    </figure>
+</template>
+
+<template id="dynamic_filter_template_event_event_card" name="Card Layout" priority="10">
+    <div t-foreach="records" t-as="data" class="pb32 w-100 s_events_event">
+        <t t-set="record" t-value="data['_record']._set_tz_context()"/>
+        <div class="card shadow-sm">
+            <a class="s_events_event_cover" t-att-href="data['call_to_action_url']">
+                <t t-call="website.record_cover">
+                    <t t-set="_record" t-value="record"/>
+                    <t t-set="_resize_height" t-value="256"/>
+                    <t t-set="_resize_width" t-value="256"/>
+
+                    <div class="s_events_event_date position-absolute bg-white shadow-sm text-dark">
+                        <span t-field="record.date_begin" t-options="{'format': 'LLL'}" class="s_events_event_month"/>
+                        <span t-field="record.date_begin" t-options="{'format': 'dd'}" class="s_events_event_day"/>
+                    </div>
+                </t>
+            </a>
+            <div class="card-body p-3">
+                <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
+                <h5 class="mb-0 text-truncate" t-field="record.name"/>
+                <time itemprop="startDate" t-att-datetime="record.date_begin">
+                    <span t-field="record.date_begin" t-options="{'date_only': 'true', 'format': 'long'}"/> -
+                    <span t-field="record.date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                </time>
+                <div itemprop="location" t-field="record.address_id"
+                     t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<!--SNIPPET OPTIONS -->
+
+<template id="s_events_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <t t-call="website_event.s_dynamic_snippet_options_template">
+            <t t-set="snippet_name" t-value="'event_upcoming_snippet'"/>
+            <t t-set="snippet_selector" t-value="'.s_event_upcoming_snippet'"/>
+            <t t-set="grouping_message">Items per row</t>
+        </t>
+    </xpath>
+</template>
+
+<template id="s_dynamic_snippet_options_template" inherit_id="website.s_dynamic_snippet_options_template">
+    <xpath expr="//we-select[@data-name='filter_opt']" position="after">
+        <we-many2many t-if="snippet_name == 'event_upcoming_snippet'"
+                      string="Event Tags"
+                      data-name="event_tag_opt"
+                      data-model="event.event"
+                      data-m2o-field="tag_ids"
+                      data-domain='[["category_id.website_published", "=", true], ["color", "not in", ["0", false]]]'
+                      data-limit="10"
+                      data-set-tags=""
+                      data-attribute-name="filterByTagIds"
+                      data-no-preview="true"/>
+    </xpath>
+</template>
+
+<!--ASSETS-->
+
+<record id="website_event.s_events_000_scss" model="ir.asset">
+    <field name="name">Event 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website_event/static/src/snippets/s_events/000.scss</field>
+</record>
+
+<record id="website_event.s_events_000_js" model="ir.asset">
+    <field name="name">Event 000 JS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website_event/static/src/snippets/s_events/000.js</field>
+</record>
+
+</odoo>
diff --git a/addons/website_event/views/snippets/snippets.xml b/addons/website_event/views/snippets/snippets.xml
new file mode 100644
index 00000000000..aa8b2fe801c
--- /dev/null
+++ b/addons/website_event/views/snippets/snippets.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+
+<template id="remove_external_snippets" inherit_id="website.external_snippets">
+    <xpath expr="//t[@t-install='website_event']" position="replace"/>
+</template>
+
+<template id="snippets" inherit_id="website.snippets">
+    <xpath expr="//t[@id='event_upcoming_snippet_hook']" position="replace">
+        <t t-snippet="website_event.s_events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_event_upcoming_snippet.svg"/>
+    </xpath>
+</template>
+
+</odoo>