diff --git a/addons/website_event_online/__init__.py b/addons/website_event_online/__init__.py
index 5b9ba23c97a..5a31f331a2a 100644
--- a/addons/website_event_online/__init__.py
+++ b/addons/website_event_online/__init__.py
@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
-from . import models
 from . import controllers
+from . import models
 from . import tests
diff --git a/addons/website_event_online/__manifest__.py b/addons/website_event_online/__manifest__.py
index e5f8ce7c482..115bf41a466 100644
--- a/addons/website_event_online/__manifest__.py
+++ b/addons/website_event_online/__manifest__.py
@@ -15,8 +15,11 @@
     ],
     'data': [
         'security/ir.model.access.csv',
+        'views/assets.xml',
         'views/event_event_views.xml',
         'views/event_registration_views.xml',
+        'views/event_tag_views.xml',
+        'views/event_type_views.xml',
         'views/website_visitor_views.xml',
         'views/event_templates_event.xml',
     ],
@@ -24,6 +27,7 @@
         'data/website_visitor_demo.xml',
         'data/event_demo.xml',
         'data/event_registration_demo.xml',
+        'data/event_tag_demo.xml',
     ],
     'application': False,
     'installable': True,
diff --git a/addons/website_event_online/data/event_tag_demo.xml b/addons/website_event_online/data/event_tag_demo.xml
new file mode 100644
index 00000000000..391eb867aa6
--- /dev/null
+++ b/addons/website_event_online/data/event_tag_demo.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="event.event_tag_category_1_tag_1" model="event.tag">
+        <field name="color">1</field>
+    </record>
+    <record id="event.event_tag_category_1_tag_2" model="event.tag">
+        <field name="color">2</field>
+    </record>
+    <record id="event.event_tag_category_1_tag_3" model="event.tag">
+        <field name="color">3</field>
+    </record>
+    <record id="event.event_tag_category_1_tag_4" model="event.tag">
+        <field name="color">4</field>
+    </record>
+
+    <record id="event.event_tag_category_2_tag_1" model="event.tag">
+        <field name="color">5</field>
+    </record>
+    <record id="event.event_tag_category_2_tag_2" model="event.tag">
+        <field name="color">6</field>
+    </record>
+    <record id="event.event_tag_category_2_tag_3" model="event.tag">
+        <field name="color">7</field>
+    </record>
+
+    <record id="event.event_tag_category_3_tag_1" model="event.tag">
+        <field name="color">8</field>
+    </record>
+    <record id="event.event_tag_category_3_tag_2" model="event.tag">
+        <field name="color">9</field>
+    </record>
+</odoo>
diff --git a/addons/website_event_online/models/__init__.py b/addons/website_event_online/models/__init__.py
index fa937cadda2..e6dbdc4c033 100644
--- a/addons/website_event_online/models/__init__.py
+++ b/addons/website_event_online/models/__init__.py
@@ -3,4 +3,5 @@
 
 from . import event_event
 from . import event_registration
+from . import event_tag
 from . import website_visitor
diff --git a/addons/website_event_online/models/event_tag.py b/addons/website_event_online/models/event_tag.py
new file mode 100644
index 00000000000..4ac8cf42272
--- /dev/null
+++ b/addons/website_event_online/models/event_tag.py
@@ -0,0 +1,10 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+from odoo import models, fields
+
+
+class EventTag(models.Model):
+    _inherit = ['event.tag']
+
+    color = fields.Integer(string='Color Index')
diff --git a/addons/website_event_online/static/src/scss/website_event_templates.scss b/addons/website_event_online/static/src/scss/website_event_templates.scss
new file mode 100644
index 00000000000..55e714cce79
--- /dev/null
+++ b/addons/website_event_online/static/src/scss/website_event_templates.scss
@@ -0,0 +1,51 @@
+// Color tags according to assigned background color.
+
+.o_wevent_index, .o_wevent_event {
+
+    // Simple colored tags according to assigned background color
+    @for $size from 1 through length($o-colors) {
+        .o_tag_color_#{$size - 1} {
+            @if $size == 1 {
+                & {
+                    background-color: white;
+                    color: nth($o-colors, $size);
+                    box-shadow: inset 0 0 0 2px nth($o-colors, $size);
+                }
+                &::after {
+                    background-color: nth($o-colors, $size);
+                }
+            } @else {
+                &, &::after {
+                    background-color: nth($o-colors, $size);
+                    color: $white;
+                }
+            }
+        }
+    }
+
+    // Complex colored tags according to assigned background color with hover effect
+    @for $size from 1 through length($o-colors) {
+        .o_tag_color_hovered_#{$size - 1} {
+            $background-color: white;
+            // no color selected
+            @if $size == 1 {
+                & {
+                    color: black;
+                    background-color: $background-color;
+                    box-shadow: inset 0 0 0 1px nth($o-colors, $size);
+                }
+            } @else {
+                $background-color: nth($o-colors, $size);
+                & {
+                    color: white;
+                    background-color: $background-color;
+                }
+            }
+            @at-root a#{&} {
+                &:hover {
+                    background-color: darken($background-color, 20%);
+                }
+            }
+        }
+    }
+}
diff --git a/addons/website_event_online/views/assets.xml b/addons/website_event_online/views/assets.xml
new file mode 100644
index 00000000000..d0f9161a9c6
--- /dev/null
+++ b/addons/website_event_online/views/assets.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <template id="assets_frontend" inherit_id="website.assets_frontend" name="Event Online Assets Frontend">
+        <xpath expr="//link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/website_event_online/static/src/scss/website_event_templates.scss"/>
+        </xpath>
+    </template>
+
+</odoo>
diff --git a/addons/website_event_online/views/event_event_views.xml b/addons/website_event_online/views/event_event_views.xml
index 6d45652b57c..4ed754e39b0 100644
--- a/addons/website_event_online/views/event_event_views.xml
+++ b/addons/website_event_online/views/event_event_views.xml
@@ -14,6 +14,9 @@
                     <field name="menu_register_cta"/>
                 </div>
             </xpath>
+            <xpath expr="//field[@name='tag_ids']" position="attributes">
+                <attribute name="options">{'color_field': 'color', 'no_quick_create': True}</attribute>
+            </xpath>
         </field>
     </record>
 
diff --git a/addons/website_event_online/views/event_tag_views.xml b/addons/website_event_online/views/event_tag_views.xml
new file mode 100644
index 00000000000..ebaffa264c0
--- /dev/null
+++ b/addons/website_event_online/views/event_tag_views.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0"?>
+<odoo><data>
+    <record id="event_tag_category_view_form" model="ir.ui.view">
+        <field name="name">event.tag.category.view.form.inherit.online</field>
+        <field name="model">event.tag.category</field>
+        <field name="inherit_id" ref="event.event_tag_category_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='tag_ids']//field[@name='name']" position="after">
+                <field name="color" widget="color_picker"/>
+            </xpath>
+        </field>
+    </record>
+
+    <record id="event_tag_category_view_list" model="ir.ui.view">
+        <field name="name">event.tag.category.view.tree.inherit.online</field>
+        <field name="model">event.tag.category</field>
+        <field name="inherit_id" ref="event.event_tag_category_view_tree"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='tag_ids']" position="attributes">
+                <attribute name="widget">many2many_tags</attribute>
+                <attribute name="options">{'color_field': 'color'}</attribute>
+            </xpath>
+        </field>
+    </record>
+
+    <record id="event_tag_view_list" model="ir.ui.view">
+        <field name="name">event.tag.view.list.inherit.online</field>
+        <field name="model">event.tag</field>
+        <field name="inherit_id" ref="event.event_tag_view_tree"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='category_id']" position="after">
+                <field name="color" widget="color_picker"/>
+            </xpath>
+        </field>
+    </record>
+
+    <record id="event_tag_view_form" model="ir.ui.view">
+        <field name="name">event.tag.view.form.inherit.online</field>
+        <field name="model">event.tag</field>
+        <field name="inherit_id" ref="event.event_tag_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='category_id']" position="after">
+                <field name="color" widget="color_picker"/>
+            </xpath>
+        </field>
+    </record>
+
+</data></odoo>
diff --git a/addons/website_event_online/views/event_templates_event.xml b/addons/website_event_online/views/event_templates_event.xml
index b7c71afd11e..00665d0fbdd 100644
--- a/addons/website_event_online/views/event_templates_event.xml
+++ b/addons/website_event_online/views/event_templates_event.xml
@@ -12,4 +12,12 @@
     </xpath>
 </template>
 
+<template id="events_list" inherit_id="website_event.events_list">
+    <xpath expr="//t[@t-foreach='event.tag_ids']/span" position="replace">
+        <span t-attf-class="badge mr8 #{'badge-primary' if tag in search_tags else 'badge-light'}  #{'o_tag_color_%s' % tag.color if tag.color else ''}">
+            <span t-esc="tag.name"/>
+        </span>
+    </xpath>
+</template>
+
 </odoo>
diff --git a/addons/website_event_online/views/event_type_views.xml b/addons/website_event_online/views/event_type_views.xml
new file mode 100644
index 00000000000..b87ae0c0107
--- /dev/null
+++ b/addons/website_event_online/views/event_type_views.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<odoo><data>
+
+    <record id="event_type_view_form" model="ir.ui.view" >
+        <field name="name">event.type.view.form.inherit.online</field>
+        <field name="model">event.type</field>
+        <field name="inherit_id" ref="event.view_event_type_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='tag_ids']" position="attributes">
+                <attribute name="options">{'color_field': 'color', 'no_quick_create': True}</attribute>
+            </xpath>
+        </field>
+    </record>
+
+</data></odoo>