diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 1d692346..40be9ac9 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -486,7 +486,29 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       const response = await fetch("/api/calendars");
       if (!response.ok) throw new Error("Failed to fetch calendars");
       const data = await response.json();
-      console.log("Fetched calendars:", data); // Debug log
+      console.log("Fetched calendars:", data);
+
+      // Create principal calendar if it doesn't exist
+      if (data.length === 0 || !data.some((cal: Calendar) => cal.name === "Calendrier principal")) {
+        const principalCalendar = await fetch("/api/calendars", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: "Calendrier principal",
+            color: "#4f46e5",
+            description: "Calendrier principal",
+            userId,
+          }),
+        });
+        
+        if (principalCalendar.ok) {
+          const newData = await principalCalendar.json();
+          data.push(newData);
+        }
+      }
+
       setCalendars(data.map((cal: Calendar & { events: Event[] }) => ({
         ...cal,
         events: cal.events || []
@@ -624,7 +646,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       const savedEvent = await response.json();
       console.log("Event saved successfully:", savedEvent);
 
+      // Refresh calendars and update the view
       await fetchCalendars();
+      if (calendarRef.current) {
+        const calendarApi = calendarRef.current.getApi();
+        calendarApi.refetchEvents();
+      }
+      
       setIsEventModalOpen(false);
       setEventForm({
         title: "",
@@ -910,6 +938,18 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                     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>
               </div>
@@ -930,6 +970,18 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                     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>
               </div>