diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index a1f744dd..eba3ff4f 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -1115,10 +1115,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                   description: event.description,
                   location: event.location,
                   calendarId: event.calendarId,
-                  backgroundColor: cal.color,
+                  backgroundColor: `${cal.color}dd`,
                   borderColor: cal.color,
                   textColor: '#ffffff',
                   extendedProps: {
+                    calendarName: cal.name,
                     location: event.location,
                     description: event.description,
                     calendarId: event.calendarId,
@@ -1127,34 +1128,45 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                   }
                 }))
               )}
-            eventContent={(arg) => (
-              <div 
-                className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm hover:brightness-110"
-                style={{
-                  backgroundColor: `${arg.event.backgroundColor}`,
-                  boxShadow: `inset 0 0 0 1px ${arg.event.backgroundColor}, 0 1px 2px ${arg.event.backgroundColor}40`
-                }}
-              >
-                <div className="flex items-center gap-1.5 text-xs text-white">
-                  {!arg.event.allDay && (
-                    <span className="font-medium whitespace-nowrap">
-                      {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
-                        hour: '2-digit',
-                        minute: '2-digit'
-                      })}
-                    </span>
-                  )}
-                  <span className="font-medium truncate">
-                    {arg.event.title}
-                  </span>
+            eventContent={(arg) => {
+              const calendarName = arg.event.extendedProps.calendarName;
+              return (
+                <div 
+                  className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm hover:brightness-110"
+                  style={{
+                    backgroundColor: `${arg.event.backgroundColor}`,
+                    boxShadow: `inset 0 0 0 1px ${arg.event.borderColor}, 0 2px 4px ${arg.event.borderColor}40`
+                  }}
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <div className="flex items-center gap-1.5 text-xs text-white">
+                      {!arg.event.allDay && (
+                        <span className="font-medium whitespace-nowrap">
+                          {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
+                            hour: '2-digit',
+                            minute: '2-digit'
+                          })}
+                        </span>
+                      )}
+                      <span className="font-medium truncate">
+                        {arg.event.title}
+                      </span>
+                    </div>
+                    <div className="text-[10px] text-white/90 truncate">
+                      {calendarName}
+                    </div>
+                  </div>
                 </div>
-              </div>
-            )}
-            eventClassNames={(arg) => [
-              'hover:ring-2 hover:ring-offset-1',
-              'transition-all duration-150',
-              arg.event.allDay ? 'py-1' : ''
-            ]}
+              );
+            }}
+            eventClassNames="rounded-md overflow-hidden"
+            dayCellContent={(arg) => {
+              return (
+                <div className="text-xs font-medium">
+                  {arg.dayNumberText}
+                </div>
+              );
+            }}
             locale={frLocale}
               selectable={true}
               selectMirror={true}