diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index e303007..80ff6fa 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -782,6 +782,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   });
 
   const [visibleCalendarIds, setVisibleCalendarIds] = useState<string[]>([]);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   // Update useEffect to initialize visible calendars and fetch events
   useEffect(() => {
@@ -939,6 +940,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     }
   };
 
+  const handleDateClick = (clickInfo: any) => {
+    // Set the selected date to show events for that day
+    const clickedDate = new Date(clickInfo.date);
+    // Reset time to start of day for comparison
+    clickedDate.setHours(0, 0, 0, 0);
+    setSelectedDate(clickedDate);
+  };
+
   const handleDateSelect = (selectInfo: any) => {
     const startDate = new Date(selectInfo.start);
     const endDate = new Date(selectInfo.end);
@@ -949,6 +958,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       availableCalendars: calendars.length
     });
     
+    // Set selected date to show events for the selected day
+    const selectDate = new Date(startDate);
+    selectDate.setHours(0, 0, 0, 0);
+    setSelectedDate(selectDate);
+    
     // If no calendar is selected, use the first available calendar
     if (!selectedCalendarId && calendars.length > 0) {
       const firstCalendar = calendars[0];
@@ -1261,6 +1275,39 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     });
   };
 
+  // Get events for the selected date
+  const getDayEvents = () => {
+    if (!selectedDate) return [];
+    
+    const dayStart = new Date(selectedDate);
+    dayStart.setHours(0, 0, 0, 0);
+    const dayEnd = new Date(selectedDate);
+    dayEnd.setHours(23, 59, 59, 999);
+    
+    const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
+    const dayEvents = visibleCalendars.flatMap(cal => {
+      return (cal.events || []).filter(event => {
+        const eventStart = new Date(event.start);
+        const eventEnd = new Date(event.end);
+        
+        // Check if event overlaps with the selected day
+        return (eventStart <= dayEnd && eventEnd >= dayStart);
+      }).map(event => ({
+        ...event,
+        calendar: cal
+      }));
+    });
+    
+    // Sort by start time
+    return dayEvents.sort((a, b) => {
+      const aStart = new Date(a.start).getTime();
+      const bStart = new Date(b.start).getTime();
+      return aStart - bStart;
+    });
+  };
+
+  const dayEvents = getDayEvents();
+
   return (
     <div className="flex gap-4 h-full w-full">
       {/* Left column for calendars */}
@@ -1273,6 +1320,114 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         </Card>
       </div>
 
+      {/* Middle column for day events */}
+      {selectedDate && (
+        <div className="w-80 flex-shrink-0">
+          <Card className="p-4 h-full flex flex-col">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {selectedDate.toLocaleDateString('fr-FR', {
+                  weekday: 'long',
+                  day: 'numeric',
+                  month: 'long',
+                  year: 'numeric'
+                })}
+              </h3>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setSelectedDate(null)}
+                className="h-8 w-8"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <ScrollArea className="flex-1">
+              {dayEvents.length === 0 ? (
+                <div className="text-center text-gray-500 py-8">
+                  <CalendarIcon className="h-12 w-12 mx-auto mb-2 opacity-50" />
+                  <p>Aucun événement ce jour</p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {dayEvents.map((event) => {
+                    const calendar = event.calendar as CalendarWithMission;
+                    const startDate = new Date(event.start);
+                    const endDate = new Date(event.end);
+                    const isAllDay = event.isAllDay;
+                    
+                    return (
+                      <Card
+                        key={event.id}
+                        className="p-3 cursor-pointer hover:shadow-md transition-shadow"
+                        onClick={() => handleEventClick({ event: { 
+                          title: event.title,
+                          start: startDate,
+                          end: endDate,
+                          isAllDay: isAllDay,
+                          extendedProps: {
+                            description: event.description,
+                            location: event.location,
+                            calendarId: event.calendarId,
+                            originalEvent: event,
+                            color: calendar.color
+                          }
+                        }})}
+                      >
+                        <div className="flex items-start gap-3">
+                          <div 
+                            className="w-1 h-full rounded-full flex-shrink-0 mt-1"
+                            style={{ backgroundColor: calendar.color }}
+                          />
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1">
+                              <h4 className="font-medium text-gray-900 truncate">
+                                {event.title}
+                              </h4>
+                              <div 
+                                className="w-2 h-2 rounded-full flex-shrink-0"
+                                style={{ backgroundColor: calendar.color }}
+                              />
+                            </div>
+                            <div className="flex items-center gap-2 text-sm text-gray-600">
+                              <Clock className="h-3 w-3" />
+                              <span>
+                                {isAllDay 
+                                  ? "Toute la journée"
+                                  : `${startDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })} - ${endDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`
+                                }
+                              </span>
+                            </div>
+                            {event.location && (
+                              <div className="flex items-center gap-2 text-sm text-gray-600 mt-1">
+                                <MapPin className="h-3 w-3" />
+                                <span className="truncate">{event.location}</span>
+                              </div>
+                            )}
+                            <div className="mt-1">
+                              <Badge 
+                                variant="outline" 
+                                className="text-xs"
+                                style={{ 
+                                  borderColor: calendar.color,
+                                  color: calendar.color 
+                                }}
+                              >
+                                {getCalendarDisplayName(calendar)}
+                              </Badge>
+                            </div>
+                          </div>
+                        </div>
+                      </Card>
+                    );
+                  })}
+                </div>
+              )}
+            </ScrollArea>
+          </Card>
+        </div>
+      )}
+
       {/* Right column for calendar view */}
       <div className="flex-1 flex flex-col">
         <Card className="p-4 flex-1 flex flex-col">
@@ -1442,6 +1597,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 center: "title",
                 right: "",
               }}
+              dateClick={handleDateClick}
             events={(() => {
               const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
               const allEvents = visibleCalendars.flatMap(cal => {