diff --git a/addons/event/event_view.xml b/addons/event/event_view.xml
index b5c9eea969e..f2470899140 100644
--- a/addons/event/event_view.xml
+++ b/addons/event/event_view.xml
@@ -151,7 +151,7 @@
             <field name="name">event.event.kanban</field>
             <field name="model">event.event</field>
             <field name="arch" type="xml">
-                <kanban>
+                <kanban class="o_event_kanban_view">
                     <field name="user_id"/>
                     <field name="country_id"/>
                     <field name="date_begin"/>
@@ -161,7 +161,7 @@
                     <field name="color"/>
                     <templates>
                         <t t-name="kanban-box">
-                            <div t-attf-class="oe_kanban_color_#{kanban_getcolor(record.color.raw_value)} oe_kanban_card oe_kanban_global_click oe_event_kanban_view" >
+                            <div t-attf-class="oe_kanban_color_#{kanban_getcolor(record.color.raw_value)} oe_kanban_card oe_kanban_global_click">
                                 <div class="o_dropdown_kanban dropdown">
 
                                     <a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >
@@ -174,37 +174,30 @@
                                         <li><ul class="oe_kanban_colorpicker" data-field="color"/></li>
                                     </ul>
                                 </div>
-                                <div class="oe_module_vignette row">
-                                    <div class="col-md-3">
-                                        <div class="oe_module_icon">
-                                            <div class="oe_event_date_thumb oe_event_date"><t t-esc="record.date_begin.raw_value.getDate()"/></div>
-                                            <div class="oe_event_date_thumb oe_event_month_year">
-                                                <t t-esc="moment(record.date_begin.raw_value).format('MMM')"/>
-                                                <t t-esc="record.date_begin.raw_value.getFullYear()"/>
-                                            </div>
-                                            <div class="oe_event_date_thumb oe_event_time"><t t-esc="moment(record.date_begin.raw_value).format('LT')"/></div>
-                                        </div>
+                                <div class="o_event_left">
+                                    <div class="o_day"><t t-esc="record.date_begin.raw_value.getDate()"/></div>
+                                    <div>
+                                        <t t-esc="moment(record.date_begin.raw_value).format('MMM')"/>
+                                        <t t-esc="record.date_begin.raw_value.getFullYear()"/>
                                     </div>
-                                    <div class="col-md-8">
-                                        <h4><field name="name"/></h4>
-                                        <div>
-                                            <small>
-                                                <t t-if="record.country_id.raw_value"> <b> <field name="country_id"/> </b> <br/> </t>
-                                                <i class="fa fa-clock-o" t-att-title="moment(record.date_begin.raw_value).format('LT')"/>
-                                                <b>From</b> <t t-esc="moment(record.date_begin.raw_value).format('L')"/>
-                                                <b>To</b> <t t-esc="moment(record.date_end.raw_value).format('LT')"/>
-                                            </small>
-                                        </div>
-                                        <h4>
-                                            <a name="%(act_event_registration_from_event)d" type="action">
-                                                <t t-esc="record.seats_reserved.raw_value" > Attendees</t>
-                                            </a>
-                                            <t t-if="(record.seats_reserved.raw_value + record.seats_unconfirmed.raw_value) > 0 ">&#47;
-                                                <t t-esc="record.seats_reserved.raw_value + record.seats_unconfirmed.raw_value"/> Expected
-                                                <a name="action_event_registration_report" type="object" >&#40;Report&#41;</a>
-                                            </t>
-                                        </h4>
+                                    <div><t t-esc="moment(record.date_begin.raw_value).format('LT')"/></div>
+                                </div>
+                                <div class="o_event_right">
+                                    <h4><field name="name"/></h4>
+                                    <div>
+                                        <t t-if="record.country_id.raw_value"> <b> <field name="country_id"/> </b> <br/> </t>
+                                        <i class="fa fa-clock-o"/>
+                                        <b>To</b> <t t-esc="moment(record.date_end.raw_value).format('lll')"/>
                                     </div>
+                                    <h4>
+                                        <a name="%(act_event_registration_from_event)d" type="action">
+                                            <t t-esc="record.seats_reserved.raw_value" > Attendees</t>
+                                        </a>
+                                        <t t-if="(record.seats_reserved.raw_value + record.seats_unconfirmed.raw_value) > 0 ">&#47;
+                                            <t t-esc="record.seats_reserved.raw_value + record.seats_unconfirmed.raw_value"/> Expected
+                                            <a name="action_event_registration_report" type="object" >&#40;Report&#41;</a>
+                                        </t>
+                                    </h4>
                                 </div>
                             </div>
                         </t>
diff --git a/addons/event/static/src/css/event.css b/addons/event/static/src/css/event.css
deleted file mode 100644
index fc7fccdfa1e..00000000000
--- a/addons/event/static/src/css/event.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.openerp .oe_kanban_view .oe_event_kanban_view {
- /* Customize width and height of kanban according bootstrap3 */
-  width: 355px;
-  min-height: 100px !important;
-  /* End of customize */
-  cursor: default;
-}
-.openerp .oe_kanban_view .oe_event_kanban_view .oe_event_date_thumb {
-  border-top-left-radius:3px;
-  border-top-right-radius:3px;
-  font-size: 12px;
-  height: auto;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom:-7px;
-  color: #FFFFFF;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-  background-color: #8A89BA;
-}
-.openerp .oe_kanban_view .oe_event_kanban_view .oe_event_date {
-  font-size: 36px;
-  height: auto;
-}
-.openerp .oe_kanban_view .oe_event_kanban_view .oe_event_month_year {
-  margin-bottom: 0px;
-}
-.openerp .oe_kanban_view .oe_event_kanban_view .oe_event_time {
-  border-collapse: separate;
-  color: #8A89BA;
-  background-color: #FFFFFF;
-}
-.openerp .oe_kanban_view .oe_event_kanban_view .oe_module_vignette.row{
-  width: 370px;
-}
diff --git a/addons/event/static/src/less/event.less b/addons/event/static/src/less/event.less
new file mode 100644
index 00000000000..2d5454845c4
--- /dev/null
+++ b/addons/event/static/src/less/event.less
@@ -0,0 +1,33 @@
+.o_kanban_view.o_event_kanban_view {
+
+    .o_kanban_record {
+        position: relative;
+        padding: 0;
+
+        .o-flex-display();
+
+        .o_dropdown_kanban {
+            position: absolute;
+            top: 0;
+            right: 3px;
+        }
+
+        .o_event_left {
+            .o-flex(1, 1, 25%);
+            text-align: center;
+            color: white;
+            background-color: @odoo-brand-optional;
+            padding: 8px;
+
+            .o_day {
+                font-size: 26px;
+            }
+        }
+
+        .o_event_right {
+            .o-flex(1, 1, 75%);
+            padding: 8px;
+            margin-left: 8px;
+        }
+    }
+}
diff --git a/addons/event/views/event.xml b/addons/event/views/event.xml
index 7602a93e587..02b62701fab 100644
--- a/addons/event/views/event.xml
+++ b/addons/event/views/event.xml
@@ -3,7 +3,7 @@
     <data>
         <template id="assets_backend" name="event assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
-                <link rel="stylesheet" href="/event/static/src/css/event.css"/>
+                <link rel="stylesheet" href="/event/static/src/less/event.less"/>
             </xpath>
         </template>
     </data>