diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 7e29fd5..bd9086e 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -40,6 +40,13 @@ import { Badge } from "@/components/ui/badge";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import DatePicker, { registerLocale } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { fr } from "date-fns/locale";
@@ -1941,51 +1948,41 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
             <div className="space-y-2">
               <Label className="text-base font-semibold text-gray-800">Calendrier</Label>
-              <ScrollArea className="max-h-64 border border-gray-200 rounded-lg">
-                <div className="space-y-1 p-2">
+              <Select
+                value={eventForm.calendarId || ""}
+                onValueChange={(value) => {
+                  setEventForm(prev => ({
+                    ...prev,
+                    calendarId: value
+                  }));
+                }}
+              >
+                <SelectTrigger className="w-full bg-white text-gray-900">
+                  <SelectValue placeholder="Sélectionner un calendrier" />
+                </SelectTrigger>
+                <SelectContent>
                   {getAvailableCalendars().map((cal) => {
                     const calWithMission = cal as CalendarWithMission;
                     const label = getCalendarDisplayName(calWithMission);
                     return (
-                      <button
-                        key={cal.id}
-                        type="button"
-                        onClick={() => {
-                          setEventForm(prev => ({
-                            ...prev,
-                            calendarId: cal.id
-                          }));
-                        }}
-                        className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-left ${
-                          eventForm.calendarId === cal.id
-                            ? 'bg-blue-50 ring-2 ring-blue-500 border border-blue-200'
-                            : 'bg-white hover:bg-gray-50 border border-gray-200'
-                        }`}
-                      >
-                        <div 
-                          className="w-4 h-4 rounded-full flex-shrink-0" 
-                          style={{ backgroundColor: cal.color }}
-                        />
-                        <span className={`text-sm flex-1 ${
-                          eventForm.calendarId === cal.id 
-                            ? 'font-medium text-gray-900' 
-                            : 'text-gray-700'
-                        }`}>
-                          {label}
-                        </span>
-                        {calWithMission.syncConfig?.syncEnabled && (
-                          <Badge variant="outline" className="text-[10px] px-1.5 py-0.5 border-blue-400 text-blue-600 flex-shrink-0">
-                            Sync
-                          </Badge>
-                        )}
-                        {eventForm.calendarId === cal.id && (
-                          <Check className="w-4 h-4 text-blue-600 flex-shrink-0" />
-                        )}
-                      </button>
+                      <SelectItem key={cal.id} value={cal.id}>
+                        <div className="flex items-center gap-2 w-full">
+                          <div 
+                            className="w-3 h-3 rounded-full flex-shrink-0" 
+                            style={{ backgroundColor: cal.color }}
+                          />
+                          <span className="flex-1">{label}</span>
+                          {calWithMission.syncConfig?.syncEnabled && (
+                            <Badge variant="outline" className="ml-1 text-[10px] px-1 py-0.5 border-blue-400 text-blue-600">
+                              Sync
+                            </Badge>
+                          )}
+                        </div>
+                      </SelectItem>
                     );
                   })}
-                </div>
-              </ScrollArea>
+                </SelectContent>
+              </Select>
             </div>
 
             <div className="grid grid-cols-2 gap-4">