diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
index c876b97..9fdd6b8 100644
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -1,5 +1,5 @@
 import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { authOptions } from "@/lib/auth";
 import { redirect } from "next/navigation";
 import { prisma } from "@/lib/prisma";
 import { CalendarClient } from "@/components/calendar/calendar-client";
@@ -110,6 +110,11 @@ export default async function CalendarPage() {
       <CalendarClient 
         initialCalendars={calendars} 
         userId={session.user.id}
+        userProfile={{
+          name: session.user.name || '',
+          email: session.user.email || '',
+          avatar: session.user.image || undefined
+        }}
       />
     </div>
   );
diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 1533bc1..7592bb3 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -75,8 +75,8 @@ interface CalendarClientProps {
 interface EventFormData {
   title: string;
   description: string | null;
-  start: string;
-  end: string;
+  start: Date | null;
+  end: Date | null;
   allDay: boolean;
   location: string | null;
   calendarId?: string;
@@ -448,8 +448,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   const [eventForm, setEventForm] = useState<EventFormData>({
     title: "",
     description: null,
-    start: "",
-    end: "",
+    start: null,
+    end: null,
     allDay: false,
     location: null,
     calendarId: selectedCalendarId
@@ -466,6 +466,8 @@ 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(() => {
     if (calendars.length > 0) {
@@ -637,8 +639,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       setEventForm({
         title: "",
         description: null,
-        start: startDate.toISOString(),
-        end: endDate.toISOString(),
+        start: startDate,
+        end: endDate,
         allDay: selectInfo.allDay,
         location: null,
         calendarId: firstCalendar.id
@@ -647,8 +649,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       setEventForm({
         title: "",
         description: null,
-        start: startDate.toISOString(),
-        end: endDate.toISOString(),
+        start: startDate,
+        end: endDate,
         allDay: selectInfo.allDay,
         location: null,
         calendarId: selectedCalendarId
@@ -667,8 +669,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     setEventForm({
       title: event.title,
       description: event.extendedProps.description,
-      start: startDate.toISOString().slice(0, 16),
-      end: endDate.toISOString().slice(0, 16),
+      start: startDate,
+      end: endDate,
       allDay: event.isAllDay,
       location: event.extendedProps.location,
       calendarId: event.extendedProps.calendarId,
@@ -676,79 +678,47 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     setIsEventModalOpen(true);
   };
 
-  const handleEventSubmit = async () => {
+  const handleEventSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
     try {
-      // Validate required fields including calendar
-      if (!eventForm.title || !eventForm.start || !eventForm.end || !eventForm.calendarId) {
-        console.log("Form validation failed:", {
-          title: eventForm.title,
-          start: eventForm.start,
-          end: eventForm.end,
-          calendarId: eventForm.calendarId
-        });
-        setError("Veuillez remplir tous les champs obligatoires et sélectionner un calendrier");
-        return;
+      setLoading(true);
+      if (!eventForm.start || !eventForm.end) {
+        throw new Error('Start and end dates are required');
       }
 
-      setLoading(true);
       const eventData = {
         ...eventForm,
-        start: new Date(eventForm.start).toISOString(),
-        end: new Date(eventForm.end).toISOString(),
+        start: eventForm.start.toISOString(),
+        end: eventForm.end.toISOString(),
         userId,
-        ...(selectedEvent ? { id: selectedEvent.id } : {}),  // Include ID for updates
-        allDay: eventForm.allDay  // Use allDay instead of isAllDay
       };
 
-      console.log("Submitting event with data:", eventData);
-      
-      const response = await fetch("/api/events", {
-        method: selectedEvent ? "PUT" : "POST",
+      const response = await fetch('/api/events', {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify(eventData),
+        credentials: 'include'
       });
 
-      const responseData = await response.json();
-      console.log("Response from server:", responseData);
-      
       if (!response.ok) {
-        console.error("Error response:", responseData);
-        throw new Error(responseData.error || "Failed to save event");
+        throw new Error('Failed to save event');
       }
 
-      // Reset form and close modal first
-      setIsEventModalOpen(false);
-      setEventForm({
-        title: "",
-        description: null,
-        start: "",
-        end: "",
-        allDay: false,
-        location: null,
-        calendarId: selectedCalendarId
-      });
-      setSelectedEvent(null);
-      setError(null);
-
-      // Update calendars state with the new event
-      const updatedCalendars = calendars.map(cal => {
-        if (cal.id === eventData.calendarId) {
+      const newEvent = await response.json();
+      setCalendars(prev => prev.map(cal => {
+        if (cal.id === newEvent.calendarId) {
           return {
             ...cal,
-            events: [...cal.events, responseData]
+            events: [...cal.events, newEvent],
           };
         }
         return cal;
-      });
-      setCalendars(updatedCalendars);
-
-      // Fetch fresh data to ensure all calendars are up to date
-      await fetchCalendars();
-    } catch (error) {
-      console.error("Error saving event:", error);
-      setError(error instanceof Error ? error.message : "Failed to save event");
+      }));
+      setError(null);
+    } catch (err) {
+      setError('Failed to save event');
+      console.error('Error saving event:', err);
     } finally {
       setLoading(false);
     }
@@ -785,8 +755,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       setEventForm({
         title: "",
         description: null,
-        start: "",
-        end: "",
+        start: null,
+        end: null,
         allDay: false,
         location: null,
         calendarId: selectedCalendarId
@@ -867,42 +837,42 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   const handleStartDateChange = (date: Date | null) => {
     if (!date) return;
     
-    const endDate = getDateFromString(eventForm.end);
+    const endDate = getDateFromString(eventForm.end?.toISOString() || "");
     if (date > endDate) {
       // If start date is after end date, set end date to start date + 1 hour
       const newEndDate = new Date(date);
       newEndDate.setHours(date.getHours() + 1);
-      setEventForm({
-        ...eventForm,
-        start: date.toISOString(),
-        end: newEndDate.toISOString(),
-      });
+      setEventForm(prev => ({
+        ...prev,
+        start: date,
+        end: newEndDate,
+      }));
     } else {
-      setEventForm({
-        ...eventForm,
-        start: date.toISOString(),
-      });
+      setEventForm(prev => ({
+        ...prev,
+        start: date,
+      }));
     }
   };
 
   const handleEndDateChange = (date: Date | null) => {
     if (!date) return;
     
-    const startDate = getDateFromString(eventForm.start);
+    const startDate = getDateFromString(eventForm.start?.toISOString() || "");
     if (date < startDate) {
       // If end date is before start date, set start date to end date - 1 hour
       const newStartDate = new Date(date);
       newStartDate.setHours(date.getHours() - 1);
-      setEventForm({
-        ...eventForm,
-        start: newStartDate.toISOString(),
-        end: date.toISOString(),
-      });
+      setEventForm(prev => ({
+        ...prev,
+        start: newStartDate,
+        end: date,
+      }));
     } else {
-      setEventForm({
-        ...eventForm,
-        end: date.toISOString(),
-      });
+      setEventForm(prev => ({
+        ...prev,
+        end: date,
+      }));
     }
   };
 
@@ -1160,8 +1130,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         setEventForm({
           title: "",
           description: null,
-          start: "",
-          end: "",
+          start: null,
+          end: null,
           allDay: false,
           location: null,
           calendarId: selectedCalendarId || calendars[0]?.id
@@ -1236,8 +1206,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 <div className="flex gap-2">
                   <div className="flex-1">
                     <DatePicker
-                      selected={getDateFromString(eventForm.start)}
-                      onChange={handleStartDateChange}
+                      selected={eventForm.start || undefined}
+                      onChange={(date: Date | null) => {
+                        setEventForm(prev => ({
+                          ...prev,
+                          start: date
+                        }));
+                      }}
                       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"
@@ -1246,8 +1221,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                     />
                   </div>
                   <DatePicker
-                    selected={getDateFromString(eventForm.start)}
-                    onChange={handleStartDateChange}
+                    selected={eventForm.start || undefined}
+                    onChange={(date: Date | null) => {
+                      setEventForm(prev => ({
+                        ...prev,
+                        start: date
+                      }));
+                    }}
                     showTimeSelect
                     showTimeSelectOnly
                     timeIntervals={15}
@@ -1264,19 +1244,29 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 <div className="flex gap-2">
                   <div className="flex-1">
                     <DatePicker
-                      selected={getDateFromString(eventForm.end)}
-                      onChange={handleEndDateChange}
+                      selected={eventForm.end || undefined}
+                      onChange={(date: Date | null) => {
+                        setEventForm(prev => ({
+                          ...prev,
+                          end: date
+                        }));
+                      }}
                       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)}
+                      minDate={eventForm.start || undefined}
                     />
                   </div>
                   <DatePicker
-                    selected={getDateFromString(eventForm.end)}
-                    onChange={handleEndDateChange}
+                    selected={eventForm.end || undefined}
+                    onChange={(date: Date | null) => {
+                      setEventForm(prev => ({
+                        ...prev,
+                        end: date
+                      }));
+                    }}
                     showTimeSelect
                     showTimeSelectOnly
                     timeIntervals={15}