diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index c91d617a..7dd6d58b 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -1003,9 +1003,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               <Plus className="mr-2 h-4 w-4" />
               <span className="font-medium">Nouveau calendrier</span>
             </Button>
-        <Button
-          onClick={() => {
-            setSelectedEvent(null);
+            <Button
+              onClick={() => {
+                setSelectedEvent(null);
                 setEventForm({
                   title: "",
                   description: null,
@@ -1021,50 +1021,91 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             >
               <Plus className="mr-2 h-4 w-4" />
               <span className="font-medium">Nouvel événement</span>
-        </Button>
-      </div>
+            </Button>
+          </div>
 
           <Tabs value={view} className="w-auto">
             <TabsList>
-          <TabsTrigger
+              <TabsTrigger
                 value="dayGridMonth"
-            onClick={() => handleViewChange("dayGridMonth")}
-          >
-            Mois
-          </TabsTrigger>
-          <TabsTrigger
+                onClick={() => handleViewChange("dayGridMonth")}
+              >
+                Mois
+              </TabsTrigger>
+              <TabsTrigger
                 value="timeGridWeek"
-            onClick={() => handleViewChange("timeGridWeek")}
-          >
-            Semaine
-          </TabsTrigger>
-          <TabsTrigger
+                onClick={() => handleViewChange("timeGridWeek")}
+              >
+                Semaine
+              </TabsTrigger>
+              <TabsTrigger
                 value="timeGridDay"
-            onClick={() => handleViewChange("timeGridDay")}
-          >
-            Jour
-          </TabsTrigger>
-        </TabsList>
+                onClick={() => handleViewChange("timeGridDay")}
+              >
+                Jour
+              </TabsTrigger>
+            </TabsList>
           </Tabs>
-            </div>
+        </div>
 
         <CalendarSelector />
 
+        <style jsx global>{`
+          /* Fixed height and scrolling for day cells only */
+          .fc .fc-daygrid-day-frame {
+            min-height: 100px !important;
+            max-height: 100px !important;
+            overflow-y: auto !important;
+          }
+
+          /* Keep events container relative positioning */
+          .fc .fc-daygrid-day-events {
+            margin-bottom: 0 !important;
+          }
+
+          /* Custom scrollbar styles */
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar {
+            width: 4px;
+          }
+          
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+          }
+          
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb:hover {
+            background: #555;
+          }
+
+          /* Hide scrollbar when not needed */
+          .fc .fc-daygrid-day-frame::-webkit-scrollbar {
+            display: none;
+          }
+
+          .fc .fc-daygrid-day-frame:hover::-webkit-scrollbar {
+            display: block;
+          }
+        `}</style>
+
         {loading ? (
           <div className="h-96 flex items-center justify-center">
             <Loader2 className="h-8 w-8 animate-spin text-primary" />
             <span className="ml-2">Chargement des événements...</span>
-            </div>
-          ) : (
-            <FullCalendar
-              ref={calendarRef}
-              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-              initialView={view}
-              headerToolbar={{
-                left: "prev,next today",
-                center: "title",
-                right: "",
-              }}
+          </div>
+        ) : (
+          <FullCalendar
+            ref={calendarRef}
+            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+            initialView={view}
+            headerToolbar={{
+              left: "prev,next today",
+              center: "title",
+              right: "",
+            }}
             events={calendars
               .filter(cal => visibleCalendarIds.includes(cal.id))
               .flatMap(cal => 
@@ -1117,7 +1158,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             locale={frLocale}
               selectable={true}
               selectMirror={true}
-              dayMaxEvents={true}
+              dayMaxEventRows={false}
+              dayMaxEvents={false}
               weekends={true}
               select={handleDateSelect}
               eventClick={handleEventClick}
@@ -1132,219 +1174,219 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               minute: '2-digit',
               hour12: false
             }}
-            />
-          )}
-        </Card>
+          />
+        )}
+      </Card>
 
       {/* Calendar dialog */}
-        <CalendarDialog
-        open={isCalendarModalOpen}
-        onClose={() => setIsCalendarModalOpen(false)}
-        onSave={handleCalendarSave}
-        onDelete={handleCalendarDelete}
-        initialData={selectedCalendar || undefined}
-      />
+      <CalendarDialog
+      open={isCalendarModalOpen}
+      onClose={() => setIsCalendarModalOpen(false)}
+      onSave={handleCalendarSave}
+      onDelete={handleCalendarDelete}
+      initialData={selectedCalendar || undefined}
+    />
 
-      {/* Event dialog */}
-      <Dialog open={isEventModalOpen} onOpenChange={(open) => {
-        if (!open) {
-          setIsEventModalOpen(false);
-          setEventForm({
-            title: "",
-            description: null,
-            start: "",
-            end: "",
-            allDay: false,
-            location: null,
-            calendarId: selectedCalendarId
-          });
-          setSelectedEvent(null);
-          setError(null);
-        }
-      }}>
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>
-              {selectedEvent ? "Modifier l'événement" : "Nouvel événement"}
-            </DialogTitle>
-          </DialogHeader>
+    {/* Event dialog */}
+    <Dialog open={isEventModalOpen} onOpenChange={(open) => {
+      if (!open) {
+        setIsEventModalOpen(false);
+        setEventForm({
+          title: "",
+          description: null,
+          start: "",
+          end: "",
+          allDay: false,
+          location: null,
+          calendarId: selectedCalendarId
+        });
+        setSelectedEvent(null);
+        setError(null);
+      }
+    }}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {selectedEvent ? "Modifier l'événement" : "Nouvel événement"}
+          </DialogTitle>
+        </DialogHeader>
 
-          {error && (
-            <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-2 rounded-md text-sm">
-              {error}
-            </div>
-          )}
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-2 rounded-md text-sm">
+            {error}
+          </div>
+        )}
 
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label>Titre</Label>
-              <Input
-                value={eventForm.title}
-                onChange={(e) =>
-                  setEventForm({ ...eventForm, title: e.target.value })
-                }
-                placeholder="Titre de l'événement"
-              />
-            </div>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label>Titre</Label>
+            <Input
+              value={eventForm.title}
+              onChange={(e) =>
+                setEventForm({ ...eventForm, title: e.target.value })
+              }
+              placeholder="Titre de l'événement"
+            />
+          </div>
 
-            <div className="space-y-2">
-              <Label>Calendrier</Label>
-              <div className="flex flex-wrap gap-2">
-                {calendars.map((cal) => (
-                  <button
-                    key={cal.id}
-                    type="button"
-                    onClick={() => setSelectedCalendarId(cal.id)}
-                    className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-all ${
-                      cal.id === selectedCalendarId
-                        ? 'border-primary bg-primary/5'
-                        : 'border-gray-200 hover:border-gray-300'
-                    }`}
-                  >
-                    <div 
-                      className="w-3 h-3 rounded-full" 
-                      style={{ backgroundColor: cal.color }}
-                    />
-                    <span className="text-sm font-medium">{cal.name}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label>Début</Label>
-                <div className="flex gap-2">
-                  <div className="flex-1">
-                    <DatePicker
-                      selected={getDateFromString(eventForm.start)}
-                      onChange={handleStartDateChange}
-                      dateFormat="dd/MM/yyyy"
-                      locale="fr"
-                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-                      placeholderText="Date"
-                      customInput={<Input />}
-                    />
-                  </div>
-                  <Input
-                    type="time"
-                    value={eventForm.start ? new Date(eventForm.start).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
-                    onChange={(e) => {
-                      const [hours, minutes] = e.target.value.split(':');
-                      const date = getDateFromString(eventForm.start);
-                      date.setHours(parseInt(hours), parseInt(minutes));
-                      handleStartDateChange(date);
-                    }}
-                    className="w-32"
+          <div className="space-y-2">
+            <Label>Calendrier</Label>
+            <div className="flex flex-wrap gap-2">
+              {calendars.map((cal) => (
+                <button
+                  key={cal.id}
+                  type="button"
+                  onClick={() => setSelectedCalendarId(cal.id)}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-all ${
+                    cal.id === selectedCalendarId
+                      ? 'border-primary bg-primary/5'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div 
+                    className="w-3 h-3 rounded-full" 
+                    style={{ backgroundColor: cal.color }}
                   />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label>Fin</Label>
-                <div className="flex gap-2">
-                  <div className="flex-1">
-                    <DatePicker
-                      selected={getDateFromString(eventForm.end)}
-                      onChange={handleEndDateChange}
-                      dateFormat="dd/MM/yyyy"
-                      locale="fr"
-                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-                      placeholderText="Date"
-                      customInput={<Input />}
-                      minDate={getDateFromString(eventForm.start)}
-                    />
-                  </div>
-                  <Input
-                    type="time"
-                    value={eventForm.end ? new Date(eventForm.end).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
-                    onChange={(e) => {
-                      const [hours, minutes] = e.target.value.split(':');
-                      const date = getDateFromString(eventForm.end);
-                      date.setHours(parseInt(hours), parseInt(minutes));
-                      handleEndDateChange(date);
-                    }}
-                    className="w-32"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="allDay"
-                checked={eventForm.allDay}
-                onCheckedChange={(checked) =>
-                  setEventForm({ ...eventForm, allDay: checked as boolean })
-                }
-              />
-              <Label htmlFor="allDay">Toute la journée</Label>
-            </div>
-
-            <div className="space-y-2">
-              <Label>Lieu</Label>
-              <Input
-                value={eventForm.location || ""}
-                onChange={(e) =>
-                  setEventForm({ ...eventForm, location: e.target.value })
-                }
-                placeholder="Ajouter un lieu"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label>Description</Label>
-              <Textarea
-                value={eventForm.description || ""}
-                onChange={(e) =>
-                  setEventForm({ ...eventForm, description: e.target.value })
-                }
-                placeholder="Ajouter une description"
-              />
+                  <span className="text-sm font-medium">{cal.name}</span>
+                </button>
+              ))}
             </div>
           </div>
 
-          <DialogFooter>
-            {selectedEvent && (
-              <Button
-                variant="destructive"
-                onClick={handleEventDelete}
-                disabled={loading}
-              >
-                {loading ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Suppression...
-                  </>
-                ) : (
-                  "Supprimer"
-                )}
-              </Button>
-            )}
-            <div className="flex space-x-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsEventModalOpen(false)}
-                disabled={loading}
-              >
-                Annuler
-              </Button>
-              <Button onClick={handleEventSubmit} disabled={loading}>
-                {loading ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Enregistrement...
-                  </>
-                ) : selectedEvent ? (
-                  "Mettre à jour"
-                ) : (
-                  "Créer"
-                )}
-              </Button>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Début</Label>
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <DatePicker
+                    selected={getDateFromString(eventForm.start)}
+                    onChange={handleStartDateChange}
+                    dateFormat="dd/MM/yyyy"
+                    locale="fr"
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                    placeholderText="Date"
+                    customInput={<Input />}
+                  />
+                </div>
+                <Input
+                  type="time"
+                  value={eventForm.start ? new Date(eventForm.start).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
+                  onChange={(e) => {
+                    const [hours, minutes] = e.target.value.split(':');
+                    const date = getDateFromString(eventForm.start);
+                    date.setHours(parseInt(hours), parseInt(minutes));
+                    handleStartDateChange(date);
+                  }}
+                  className="w-32"
+                />
+              </div>
             </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+
+            <div className="space-y-2">
+              <Label>Fin</Label>
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <DatePicker
+                    selected={getDateFromString(eventForm.end)}
+                    onChange={handleEndDateChange}
+                    dateFormat="dd/MM/yyyy"
+                    locale="fr"
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                    placeholderText="Date"
+                    customInput={<Input />}
+                    minDate={getDateFromString(eventForm.start)}
+                  />
+                </div>
+                <Input
+                  type="time"
+                  value={eventForm.end ? new Date(eventForm.end).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''}
+                  onChange={(e) => {
+                    const [hours, minutes] = e.target.value.split(':');
+                    const date = getDateFromString(eventForm.end);
+                    date.setHours(parseInt(hours), parseInt(minutes));
+                    handleEndDateChange(date);
+                  }}
+                  className="w-32"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="allDay"
+              checked={eventForm.allDay}
+              onCheckedChange={(checked) =>
+                setEventForm({ ...eventForm, allDay: checked as boolean })
+              }
+            />
+            <Label htmlFor="allDay">Toute la journée</Label>
+          </div>
+
+          <div className="space-y-2">
+            <Label>Lieu</Label>
+            <Input
+              value={eventForm.location || ""}
+              onChange={(e) =>
+                setEventForm({ ...eventForm, location: e.target.value })
+              }
+              placeholder="Ajouter un lieu"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Description</Label>
+            <Textarea
+              value={eventForm.description || ""}
+              onChange={(e) =>
+                setEventForm({ ...eventForm, description: e.target.value })
+              }
+              placeholder="Ajouter une description"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          {selectedEvent && (
+            <Button
+              variant="destructive"
+              onClick={handleEventDelete}
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Suppression...
+                </>
+              ) : (
+                "Supprimer"
+              )}
+            </Button>
+          )}
+          <div className="flex space-x-2">
+            <Button
+              variant="outline"
+              onClick={() => setIsEventModalOpen(false)}
+              disabled={loading}
+            >
+              Annuler
+            </Button>
+            <Button onClick={handleEventSubmit} disabled={loading}>
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Enregistrement...
+                </>
+              ) : selectedEvent ? (
+                "Mettre à jour"
+              ) : (
+                "Créer"
+              )}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
     </div>
   );
 }