diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 8e951cf8..615502d2 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -619,6 +619,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
   const handleEventSubmit = async () => {
     try {
+      if (!eventForm.title || !eventForm.start || !eventForm.end || !selectedCalendarId) {
+        setError("Veuillez remplir tous les champs obligatoires");
+        return;
+      }
+
       setLoading(true);
       const eventData = {
         ...eventForm,
@@ -645,10 +650,7 @@ 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();
-      
-      // Reset form and close modal
+      // Reset form and close modal first
       setIsEventModalOpen(false);
       setEventForm({
         title: "",
@@ -660,6 +662,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         calendarId: selectedCalendarId
       });
       setSelectedEvent(null);
+
+      // Then refresh the calendar data
+      await fetchCalendars();
       
       // Force calendar refresh
       if (calendarRef.current) {
@@ -905,7 +910,22 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       />
 
       {/* Event dialog */}
-      <Dialog open={isEventModalOpen} onOpenChange={(open) => !open && setIsEventModalOpen(false)}>
+      <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>
@@ -913,6 +933,12 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             </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>
+          )}
+
           <div className="space-y-4 py-4">
             <div className="space-y-2">
               <Label>Titre</Label>
@@ -927,17 +953,26 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
             <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"
-              >
+              <div className="flex flex-wrap gap-2">
                 {calendars.map((cal) => (
-                  <option key={cal.id} value={cal.id}>
-                    {cal.name}
-                  </option>
+                  <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>
                 ))}
-              </select>
+              </div>
             </div>
 
             <div className="grid grid-cols-2 gap-4">