diff --git a/app/api/events/route.ts b/app/api/events/route.ts
index d3ffdf23..0e4255ea 100644
--- a/app/api/events/route.ts
+++ b/app/api/events/route.ts
@@ -6,7 +6,7 @@ import { prisma } from "@/lib/prisma";
 export async function POST(req: NextRequest) {
   const session = await getServerSession(authOptions);
 
-  if (!session?.user?.username) {
+  if (!session?.user?.id) {
     return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
   }
 
@@ -25,7 +25,7 @@ export async function POST(req: NextRequest) {
     const calendar = await prisma.calendar.findFirst({
       where: {
         id: calendarId,
-        userId: session.user.username,
+        userId: session.user.id,
       },
     });
 
@@ -46,8 +46,8 @@ export async function POST(req: NextRequest) {
         isAllDay: allDay || false,
         location: location || null,
         calendarId,
-        userId: session.user.username,
-      } as any, // Temporary type assertion to bypass the type error
+        userId: session.user.id,
+      },
     });
 
     console.log("Created event:", event);
@@ -61,7 +61,7 @@ export async function POST(req: NextRequest) {
 export async function PUT(req: NextRequest) {
   const session = await getServerSession(authOptions);
 
-  if (!session?.user?.username) {
+  if (!session?.user?.id) {
     return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
   }
 
@@ -80,7 +80,7 @@ export async function PUT(req: NextRequest) {
     const calendar = await prisma.calendar.findFirst({
       where: {
         id: calendarId,
-        userId: session.user.username,
+        userId: session.user.id,
       },
       include: {
         events: {
@@ -107,11 +107,7 @@ export async function PUT(req: NextRequest) {
         end: new Date(end),
         isAllDay: allDay || false,
         location,
-        calendar: {
-          connect: {
-            id: calendarId
-          }
-        }
+        calendarId,
       },
     });
 
diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 40be9ac9..8e951cf8 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -620,21 +620,20 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   const handleEventSubmit = async () => {
     try {
       setLoading(true);
-      console.log("Submitting event:", {
+      const eventData = {
         ...eventForm,
+        id: selectedEvent?.id,
         calendarId: selectedCalendarId,
         userId,
-      });
+      };
+      console.log("Submitting event:", eventData);
+      
       const response = await fetch("/api/events", {
         method: selectedEvent ? "PUT" : "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({
-          ...eventForm,
-          calendarId: selectedCalendarId,
-          userId,
-        }),
+        body: JSON.stringify(eventData),
       });
 
       if (!response.ok) {
@@ -648,11 +647,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
       // Refresh calendars and update the view
       await fetchCalendars();
-      if (calendarRef.current) {
-        const calendarApi = calendarRef.current.getApi();
-        calendarApi.refetchEvents();
-      }
       
+      // Reset form and close modal
       setIsEventModalOpen(false);
       setEventForm({
         title: "",
@@ -663,6 +659,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         location: null,
         calendarId: selectedCalendarId
       });
+      setSelectedEvent(null);
+      
+      // Force calendar refresh
+      if (calendarRef.current) {
+        const calendarApi = calendarRef.current.getApi();
+        calendarApi.refetchEvents();
+      }
     } catch (error) {
       console.error("Error saving event:", error);
       setError(error instanceof Error ? error.message : "Failed to save event");
@@ -922,66 +925,75 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               />
             </div>
 
+            <div className="space-y-2">
+              <Label>Calendrier</Label>
+              <select
+                value={selectedCalendarId}
+                onChange={(e) => setSelectedCalendarId(e.target.value)}
+                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              >
+                {calendars.map((cal) => (
+                  <option key={cal.id} value={cal.id}>
+                    {cal.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>Début</Label>
-                <div className="relative">
-                  <DatePicker
-                    selected={getDateFromString(eventForm.start)}
-                    onChange={handleStartDateChange}
-                    showTimeSelect
-                    timeFormat="HH:mm"
-                    timeIntervals={15}
-                    timeCaption="Heure"
-                    dateFormat="dd/MM/yyyy HH:mm"
-                    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="Sélectionner la date et l'heure"
-                    customInput={<Input />}
-                    showTimeSelectOnly={false}
-                    inline={false}
-                    timeClassName={() => "text-primary"}
-                    popperModifiers={[
-                      {
-                        name: "preventOverflow",
-                        options: {
-                          padding: 10
-                        }
-                      }
-                    ]}
-                    popperPlacement="bottom-start"
+                <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>
 
               <div className="space-y-2">
                 <Label>Fin</Label>
-                <div className="relative">
-                  <DatePicker
-                    selected={getDateFromString(eventForm.end)}
-                    onChange={handleEndDateChange}
-                    showTimeSelect
-                    timeFormat="HH:mm"
-                    timeIntervals={15}
-                    timeCaption="Heure"
-                    dateFormat="dd/MM/yyyy HH:mm"
-                    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="Sélectionner la date et l'heure"
-                    minDate={getDateFromString(eventForm.start)}
-                    customInput={<Input />}
-                    showTimeSelectOnly={false}
-                    inline={false}
-                    timeClassName={() => "text-primary"}
-                    popperModifiers={[
-                      {
-                        name: "preventOverflow",
-                        options: {
-                          padding: 10
-                        }
-                      }
-                    ]}
-                    popperPlacement="bottom-start"
+                <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>