diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 0d2748f8..6846aaa6 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -1058,7 +1058,6 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 }))
               )}
             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"
@@ -1067,23 +1066,18 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                     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}
+                  <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>
-                    </div>
-                    <div className="text-[10px] text-white/90 truncate">
-                      {calendarName}
-                    </div>
+                    )}
+                    <span className="font-medium truncate">
+                      {arg.event.title}
+                    </span>
                   </div>
                 </div>
               );
@@ -1169,110 +1163,80 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         )}
 
         <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 className="text-base font-semibold">Calendrier</Label>
-            <div className="grid grid-cols-2 gap-2">
-              {calendars.map((cal) => (
-                <button
-                  key={cal.id}
-                  type="button"
-                  onClick={() => {
-                    console.log('Selecting calendar:', cal.id);
-                    setEventForm(prev => ({
-                      ...prev,
-                      calendarId: cal.id
-                    }));
-                  }}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
-                    eventForm.calendarId === cal.id
-                      ? 'bg-white ring-2 ring-primary ring-offset-2'
-                      : 'bg-gray-50 hover:bg-gray-100'
-                  }`}
-                >
-                  <div 
-                    className="w-3 h-3 rounded-full" 
-                    style={{ backgroundColor: cal.color }}
-                  />
-                  <span className={`text-sm ${
-                    eventForm.calendarId === cal.id 
-                      ? 'font-medium text-gray-900' 
-                      : 'text-gray-600'
-                  }`}>
-                    {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 ? formatTimeForInput(new Date(eventForm.start)) : ''}
-                  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 className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="title" className="text-base font-semibold">Titre</Label>
+              <Input
+                id="title"
+                placeholder="Titre de l'événement"
+                value={eventForm.title}
+                onChange={(e) => setEventForm({ ...eventForm, title: e.target.value })}
+              />
             </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 ? formatTimeForInput(new Date(eventForm.end)) : ''}
-                  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"
-                />
+              <Label className="text-base font-semibold">Calendrier</Label>
+              <div className="grid grid-cols-2 gap-2">
+                {calendars.map((cal) => (
+                  <button
+                    key={cal.id}
+                    type="button"
+                    onClick={() => {
+                      setEventForm(prev => ({
+                        ...prev,
+                        calendarId: cal.id
+                      }));
+                    }}
+                    className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
+                      eventForm.calendarId === cal.id
+                        ? 'bg-white ring-2 ring-primary'
+                        : 'bg-gray-900 hover:bg-gray-800'
+                    }`}
+                  >
+                    <div 
+                      className="w-3 h-3 rounded-full" 
+                      style={{ backgroundColor: cal.color }}
+                    />
+                    <span className={`text-sm ${
+                      eventForm.calendarId === cal.id 
+                        ? 'font-medium text-gray-900' 
+                        : 'text-gray-100'
+                    }`}>
+                      {cal.name}
+                    </span>
+                  </button>
+                ))}
               </div>
             </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="start" className="text-base font-semibold">Début</Label>
+              <DatePicker
+                selected={eventForm.start ? new Date(eventForm.start) : null}
+                onChange={(date) => setEventForm({ ...eventForm, start: date?.toISOString() || "" })}
+                showTimeSelect
+                timeFormat="HH:mm"
+                timeIntervals={15}
+                dateFormat="dd/MM/yyyy HH:mm"
+                placeholderText="Sélectionner une date et heure"
+                className="w-full"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="end" className="text-base font-semibold">Fin</Label>
+              <DatePicker
+                selected={eventForm.end ? new Date(eventForm.end) : null}
+                onChange={(date) => setEventForm({ ...eventForm, end: date?.toISOString() || "" })}
+                showTimeSelect
+                timeFormat="HH:mm"
+                timeIntervals={15}
+                dateFormat="dd/MM/yyyy HH:mm"
+                placeholderText="Sélectionner une date et heure"
+                className="w-full"
+                minDate={eventForm.start ? new Date(eventForm.start) : undefined}
+              />
+            </div>
           </div>
 
           <div className="flex items-center space-x-2">