diff --git a/static/src/scss/website_event.scss b/static/src/scss/website_event.scss
new file mode 100644
index 0000000..f39611a
--- /dev/null
+++ b/static/src/scss/website_event.scss
@@ -0,0 +1,98 @@
+// Index
+
+.o_wevent_index {
+    // Events List
+    .o_wevent_events_list {
+        header {
+            a {
+                transition: all .25s ease-in-out;
+                @include hover-focus {
+                    transform: scale(1.05);
+                }
+            }
+        }
+        &.opt_event_list_cards_bg {
+            @if (color('body') == $o-portal-default-body-bg) {
+                @extend .bg-200;
+            }
+        }
+        .opt_events_list_columns {
+            header {
+                height: 200px;
+            }
+        }
+        .opt_events_list_rows {
+            @include media-breakpoint-down(sm) {
+                header {
+                    height: 200px;
+                }
+            }
+        }
+        .o_wevent_badge_event {
+            @include o-position-absolute($top: 0, $left: 0);
+            @include border-left-radius(0);
+            padding: ($spacer * .5) $card-spacer-x;
+            transform: translateY(-50%);
+        }
+        .o_wevent_event_date {
+            top: $card-spacer-x;
+            right: $card-spacer-x;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            @include size(4rem);
+            border-radius: 50%;
+            text-align: center;
+
+            .o_wevent_event_day {
+                font-size: 1.125rem;
+                font-weight: 300;
+                line-height: 1;
+            }
+            .o_wevent_event_month {
+                font-size: 0.75rem;
+                font-weight: $font-weight-bold;
+                text-transform: uppercase;
+            }
+        }
+        .o_wevent_participating,
+        .o_wevent_unpublished {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            padding: $card-spacer-y $card-spacer-x;
+            text-align: right;
+        }
+        .card-title {
+            color: $body-color;
+        }
+    }
+    .o_wevent_sidebar_title {
+        margin: 0 0 ($spacer * 1.5) 0;
+        border-bottom: $border-width solid $border-color;
+        padding: 0 0 ($spacer * .5) 0;
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+    }
+    .o_wevent_sidebar_block_kalachakra {
+        margin: 0 0 ($spacer * 2.5) 0;
+    }
+    .o_wevent_sidebar_figure {
+        position: relative;
+
+        .figure-img {
+            margin-bottom: 0;
+        }
+        .figure-caption {
+            @include o-position-absolute($left: 0, $bottom: 0);
+            width: 100%;
+            padding: $spacer;
+            background-color: rgba($color: #000, $alpha: 0.5);
+            @include border-bottom-radius($border-radius);
+            color: #fff;
+        }
+    }
+    #o_wevent_index_main_col .form-inline {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/views/booking_website_registration.xml b/views/booking_website_registration.xml
index 80b020e..b45cc15 100644
--- a/views/booking_website_registration.xml
+++ b/views/booking_website_registration.xml
@@ -8,6 +8,7 @@
         </xpath>
         <xpath expr="//link[last()]" position="after">
             <link rel="stylesheet" type="text/css" href="/kalachakra/static/src/css/kalachakra.css"/>
+            
         </xpath>
     </template>
 
diff --git a/views/event_templates_page.xml b/views/event_templates_page.xml
index e5091f2..30ff67c 100644
--- a/views/event_templates_page.xml
+++ b/views/event_templates_page.xml
@@ -1,4 +1,11 @@
 <odoo>
+<template id="assets_frontend" name="booking assets" inherit_id="web.assets_frontend">
+        
+        <xpath expr="//link[last()]" position="after">
+         
+            <link rel="stylesheet" type="text/scss" href="/kalachakra/static/src/scss/kalachakra.scss"/>
+        </xpath>
+    </template>
 <template id="layout" name="Event" inherit_id="website_event.layout">
         <xpath expr="//nav" position="replace">
            
@@ -6,8 +13,9 @@
                     <div class="container align-items-baseline justify-content-start">
                         <a href="/event" class="navbar-brand h4 my-0 mr-0 mr-md-4">
                             <i class="fa fa-long-arrow-left text-primary mr-2"/>
-                            <span>Toutes les activités</span>
+                            <span class="h6">Toutes les activités</span>
                         </a>
+                        
                     </div>
                 </nav>
             
diff --git a/views/event_templates_page_registration.xml b/views/event_templates_page_registration.xml
index 1c4ae38..a4d34c8 100644
--- a/views/event_templates_page_registration.xml
+++ b/views/event_templates_page_registration.xml
@@ -4,19 +4,19 @@
 <xpath expr="//div[@class='col-lg-4 pt-3 pt-lg-0 pl-2 pl-lg-0']" position="replace">
 <t t-if="event.booking_event">
 <div class="col-lg-4 pt-3 pt-lg-0 pl-2 pl-lg-0">
-<a t-attf-id="#{event.id}" t-attf-href="/booking/registration/options?event_id={{event.id}}" class="btn btn-primary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
+<a t-attf-id="#{event.id}" t-attf-href="/booking/registration/options?event_id={{event.id}}" class="btn btn-secondary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
 </div>
 </t>
 <t t-if="not event.booking_event">
 <div class="col-lg-4 pt-3 pt-lg-0 pl-2 pl-lg-0">
 <t t-if="event.online_event and not event.online_only">
-<a t-attf-id="#{event.id}" t-attf-href="/event/registration/step1?event_id={{event.id}}" class="btn btn-primary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
+<a t-attf-id="#{event.id}" t-attf-href="/event/registration/step1?event_id={{event.id}}" class="btn btn-secondary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
 </t>
 <t t-if="event.online_only">
-<a t-attf-id="#{event.id}" t-attf-href="/event/registration/step2?event_id={{event.id}}" class="btn btn-primary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
+<a t-attf-id="#{event.id}" t-attf-href="/event/registration/step2?event_id={{event.id}}" class="btn btn-secondary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
 </t>
-<t t-if="not event.online_event">
-<a t-attf-id="#{event.id}" t-attf-href="/event/registration/step2?event_id={{event.id}}" class="btn btn-primary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
+<t t-if="not event.online_event and not event.online_only">
+<a t-attf-id="#{event.id}" t-attf-href="/event/registration/step2?event_id={{event.id}}" class="btn btn-secondary btn-block" data-original-title="" title="" aria-describedby="tooltip34075">Register</a>
 </t>
 </div>
     <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
@@ -25,6 +25,9 @@
 </t>
 
 
+</xpath>
+<xpath expr="//h6[@class='my-0 pr-3 border-right text-dark']" position="replace">
+
 </xpath>
 <!-- on bloque la qte à 1 -->
 <xpath expr="//select[@class='w-auto custom-select']" position="replace">
@@ -62,7 +65,66 @@
             
         </t>
     </xpath>
-    <xpath expr="//div[4][@class='o_wevent_sidebar_block']" position="replace">
+    <xpath expr="//div[3][@class='o_wevent_sidebar_block']" position="replace">
+    </xpath>
+    <xpath expr="//div[3][@class='o_wevent_sidebar_block']" position="replace">
     </xpath>
+
+    <xpath expr="//div[1][@class='o_wevent_sidebar_block']" position="replace">
+    <div class="o_wevent_sidebar_block">
+                            <h6 class="o_wevent_sidebar_title">Date &amp; Time</h6>
+                            <div class="d-flex">
+                                <h5 t-field="event.with_context(tz=event.date_tz).date_begin" class="my-1 mr-1" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
+                                <h5 class="my-1" t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}" itemprop="startDate" t-att-datetime="event.date_begin"/>
+                            </div>
+                            <t t-if="not event.is_one_day">Start -</t>
+                            <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                            <t t-if="event.is_one_day">
+                                <i class="fa fa-long-arrow-right mx-1"/>
+                                <span t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                            </t>
+                            <t t-else="">
+                                <i class="fa fa-long-arrow-down d-block text-muted mx-3 my-2" style="font-size: 1.5rem"/>
+                                <div class="d-flex">
+                                    <h5 t-field="event.with_context(tz=event.date_tz).date_end" class="my-1 mr-1" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
+                                    <h5 class="my-1" t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'date_only': 'true', 'format': 'long'}"/>
+                                </div>
+                                <t t-if="not event.is_one_day">End -</t>
+                                <span t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                            </t>
+                            
+
+                            <!-- <div class="dropdown">
+                                <i class="fa fa-calendar mr-1"/>
+                                <a href="#" role="button" data-toggle="dropdown">Add to Calendar</a>
+                                <div class="dropdown-menu">
+                                    <a t-att-href="iCal_url" class="dropdown-item">iCal/Outlook</a>
+                                    <a t-att-href="google_url" class="dropdown-item" target="_blank">Google</a>
+                                </div>
+                            </div>-->
+                        </div>
+    </xpath>
+    <xpath expr="//div[2][@class='o_wevent_sidebar_block']" position="replace">
+    <div t-if="event.address_id" class="o_wevent_sidebar_block">
+                            <h6 class="o_wevent_sidebar_title">Location</h6>
+                            <h4 t-field="event.address_id" class="" t-options='{
+                                "widget": "contact",
+                                "fields": ["name"]
+                            }'/>
+                            <div itemprop="location" class="mb-2" t-field="event.address_id" t-options='{
+                                "widget": "contact",
+                                "fields": ["address"],
+                                "no_marker": True
+                            }'/>
+                            <div class="mb-3" t-field="event.address_id" t-options='{
+                                "widget": "contact",
+                                "fields": ["phone", "mobile", "email"]
+                            }'/>
+                            <!-- <i class="fa fa-map-marker fa-fw" role="img"/>
+                            <a t-att-href="event._google_map_link()" target="_blank">Get the direction</a> -->
+                        </div>
+
+    </xpath>
+
 </template>
 </odoo>
\ No newline at end of file