diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index 2aa307b64..d741ac924 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -62,12 +62,15 @@ export default {
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
+        eventClick: this.onEventClick,
+        eventMouseEnter: this.onEventMouseEnter,
+        eventMouseLeave: this.onEventMouseLeave,
         selectMirror: true,
         editable: true,
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
-          right: 'dayGridMonth,timeGridWeek,timeGridDay'
+          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,listWeek,listDay'
         },
       }
     }
@@ -92,6 +95,17 @@ export default {
     },
     onEventChange(payload) {
       this.$store.dispatch('updateEvent', payload);
+    },
+    onEventClick(payload) {
+      payload.event.setProp('backgroundColor','#3788d8');
+      payload.event.setProp('textColor','#ffffff');
+      this.$store.dispatch('updateEvent', payload);
+    },
+    onEventMouseEnter(payload) {
+      payload.event.setProp('borderColor','#444444');
+    },
+    onEventMouseLeave(payload) {
+      payload.event.setProp('borderColor','#ffffff');
     }
   },
   mounted() {
@@ -99,3 +113,4 @@ export default {
   }
 }
 </script>
+
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js
index 79c3db5d0..8fae5eb00 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js
@@ -118,7 +118,6 @@ const store = createStore({
       updateEvent({ commit }, payload) {
          console.log('### action updateEvent', payload);
          let startDateInput = document.getElementById("chill_calendarbundle_calendar_startDate");
-         console.log(payload.event)
          startDateInput.value = payload.event.start.toISOString();
          let endDateInput = document.getElementById("chill_calendarbundle_calendar_endDate");
          endDateInput.value = payload.event.end.toISOString();
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index 520104b79..48bb02802 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -79,12 +79,14 @@ export default {
             let arr = results.filter(i => i.user.id === u.id).map(i => 
               ({
                 start: i.startDate.datetime,
-                end: i.endDate.datetime
+                end: i.endDate.datetime,
+                //display: 'background' // can be an option for the disponibility 
               })
             );
             calendarEvents.push({
               events: arr,
               color: u.color,
+              textColor: '#444444',
               id: u.id
             })
           })
@@ -119,10 +121,14 @@ export default {
           let child = children[i];
           if (child.nodeType === Node.ELEMENT_NODE) {
             this.users.selected.forEach(u => {
-              if (child.firstChild.innerText == u.username) {
-                child.style.background = u.color;
+              if (child.hasChildNodes()) {
+                if (child.firstChild.innerText == u.username) {
+                  child.style.background = u.color;
+                    child.firstChild.style.color = '#444444';
+                  }
+                }
               }
-            })
+            )
           }
         }
       }
@@ -150,16 +156,4 @@ export default {
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
-<style lang="scss">
-   span.multiselect__tag {
-      background: var(--bs-chill-orange);
-   }
-   span.multiselect__option--highlight {
-      &::after {
-         background: var(--bs-chill-green);
-      }
-      &.multiselect__option--selected::after {
-         background: var(--bs-chill-red);
-      }
-   }
-</style>
+