diff --git a/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.html b/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.html
index e23e9fa..1ffaaca 100644
--- a/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.html
+++ b/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.html
@@ -1,13 +1,75 @@
+<!--
+  display: flex;
+  flex-direction: row;
+  height: auto;
+  background-color: green;
+  padding: 5px;
+  border-radius: 10px;
+  margin-bottom: 5px;
+
+-->
 <div
   (click)="selectEvent()"
-  class="event d-block p-1 px-2 mb-2 border-radius-1 text-truncate small text-white " title="Test Event 2"
+  class="event d-flex flex-direction-row py-1 px-1 mb-2 border-radius-1 small text-white "
+  title="Test Event 2"
   [class.bg-dark]="maySelect()"
   [class.bg-primary]="isRegistered()"
   [class.bg-secondary]="isDisabled()"
 >
-  <div class="app-font-size-sm app-font-weight-normal ">{{formatTime()}}</div>
-  <div class="app-font-size-sm app-font-weight-bold">{{event.eventType.name}}</div>
-  <ng-container *ngIf="hasTrainer()">
-    <div class="app-font-size-sm app-font-weight-normal">{{formatTrainer()}}</div>
-  </ng-container>
+<!--  .event-bar-container {-->
+<!--  flex: 0 0 10px;-->
+<!--  display: flex;-->
+<!--  }-->
+
+<!--  .event-bar{-->
+<!--  margin-top: 3px;-->
+<!--  margin-bottom: 3px;-->
+<!--  background-color: blue;-->
+<!--  flex-grow: 1;-->
+<!--  flex-shrink: 1;-->
+<!--  }-->
+
+  <div class=" event-bar-container flex-grow-0 flex-shrink-0 d-flex" style="flex-basis: 10px;">
+    <div class="event-bar flex-grow-1 flex-shrink-1 my-1 border-radius-1 " style=" background-color: var(--bs-blue)"></div>
+  </div>
+
+<!--  -->
+<!--  .event-info-container {-->
+<!--  flex: 1;-->
+<!--   overflow: hidden;-->
+<!--  }-->
+
+<!--  .event-info {-->
+<!--  padding: 3px;-->
+<!--  margin-top: 3px;-->
+<!--  margin-bottom: 3px;-->
+<!--  background-color: grey;-->
+<!--  word-break: break-word;-->
+<!--  white-space: pre-wrap;-->
+<!--  margin-left: 5px;-->
+
+<!--  }-->
+
+  <div class="event-info-container flex-grow-1 flex-shrink-1 "  style="flex-basis: 0;"  >
+    <div class="event-info ms-1" style="white-space: pre-wrap">
+      <div class="app-font-size-sm app-font-weight-normal ">{{formatTime()}}</div>
+      <div class="app-font-size-sm app-font-weight-bold">{{event.eventType.name}}</div>
+      <ng-container *ngIf="hasTrainer()">
+        <div class="app-font-size-sm app-font-weight-normal " style="max-width: 100%; word-break: break-word">{{formatTrainer()}} very long name</div>
+      </ng-container>
+    </div>
+  </div>
 </div>
+<!--<div class="event2">-->
+<!--  <div class="event-bar-container  ">-->
+<!--    <div class="event-bar  "></div>-->
+<!--  </div>-->
+<!--  <div class="event-info-container">-->
+<!--    <div class="event-info ">-->
+<!--      <div>info1</div>-->
+<!--      <div>info2</div>-->
+<!--      <div>info3</div>-->
+<!--      <div >very long information displayed here</div>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</div>-->
diff --git a/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.scss b/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.scss
index e69de29..fd8e195 100644
--- a/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.scss
+++ b/customer/app/src/app/components/month-calendar-event/month-calendar-event.component.scss
@@ -0,0 +1,40 @@
+
+//.event2{
+//  display: flex;
+//  flex-direction: row;
+//  height: auto;
+//  background-color: green;
+//  padding: 5px;
+//  border-radius: 10px;
+//  margin-bottom: 5px;
+//
+//  .event-bar-container {
+//    flex: 0 0 10px;
+//    display: flex;
+//  }
+//
+//  .event-bar{
+//    margin-top: 3px;
+//    margin-bottom: 3px;
+//    background-color: blue;
+//    flex-grow: 1;
+//    flex-shrink: 1;
+//  }
+//
+//  .event-info-container {
+//   flex: 1;
+//    overflow: hidden;
+//  }
+//
+//  .event-info {
+//    padding: 3px;
+//    margin-top: 3px;
+//    margin-bottom: 3px;
+//    background-color: grey;
+//    word-break: break-word;
+//    white-space: pre-wrap;
+//    margin-left: 5px;
+//
+//  }
+//
+//}