diff --git a/app/vision/page.tsx b/app/vision/page.tsx
index f3e015a..a13be64 100644
--- a/app/vision/page.tsx
+++ b/app/vision/page.tsx
@@ -7,7 +7,7 @@ import { ResponsiveIframe } from "@/app/components/responsive-iframe";
 import { Users, FolderKanban, Video, ArrowLeft, Loader2, Calendar, Clock, Plus, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
-import { Calendar as CalendarComponent } from "@/components/ui/calendar";
+import { CalendarClient } from "@/components/calendar/calendar-client";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -52,6 +52,8 @@ export default function VisionPage() {
   const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
   const [showMeetingDialog, setShowMeetingDialog] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+  const [calendars, setCalendars] = useState<any[]>([]);
+  const [calendarsLoading, setCalendarsLoading] = useState(true);
   const [meetingForm, setMeetingForm] = useState<{
     type: "group" | "mission" | "";
     entityId: string;
@@ -96,6 +98,32 @@ export default function VisionPage() {
     }
   }, [scheduledMeetings, session, status]);
 
+  // Fetch calendars
+  useEffect(() => {
+    const fetchCalendars = async () => {
+      if (status !== "authenticated" || !session?.user?.id) {
+        return;
+      }
+
+      try {
+        setCalendarsLoading(true);
+        const response = await fetch("/api/calendars");
+        if (response.ok) {
+          const calendarsData = await response.json();
+          setCalendars(Array.isArray(calendarsData) ? calendarsData : []);
+        } else {
+          console.error("Failed to fetch calendars");
+        }
+      } catch (error) {
+        console.error("Error fetching calendars:", error);
+      } finally {
+        setCalendarsLoading(false);
+      }
+    };
+
+    fetchCalendars();
+  }, [session, status]);
+
   // Fetch user groups and missions
   useEffect(() => {
     const fetchData = async () => {
@@ -378,74 +406,75 @@ export default function VisionPage() {
               </div>
               
               <div className="flex flex-col lg:flex-row gap-6">
-                {/* Colonne calendrier (étroite) */}
+                {/* Colonne calendrier (étroite) - CalendarClient avec dimensions réduites */}
                 <div id="vision-calendar" className="w-full lg:w-80 lg:flex-shrink-0">
-                  <style dangerouslySetInnerHTML={{__html: `
-                    #vision-calendar .rdp-caption_label {
-                      color: #111827 !important;
-                      font-weight: 600 !important;
-                    }
-                    #vision-calendar .rdp-nav_button {
-                      color: #374151 !important;
-                      background-color: white !important;
-                    }
-                    #vision-calendar .rdp-nav_button:hover {
-                      color: #111827 !important;
-                    }
-                    #vision-calendar .rdp-nav_button svg,
-                    #vision-calendar .rdp-nav_button path {
-                      color: #374151 !important;
-                      stroke: #374151 !important;
-                      fill: #374151 !important;
-                    }
-                    #vision-calendar .rdp-nav_button:hover svg,
-                    #vision-calendar .rdp-nav_button:hover path {
-                      color: #111827 !important;
-                      stroke: #111827 !important;
-                      fill: #111827 !important;
-                    }
-                    #vision-calendar .rdp-day {
-                      color: #1f2937 !important;
-                      background-color: white !important;
-                    }
-                    #vision-calendar .rdp-day_today {
-                      background-color: #DBEAFE !important;
-                      color: #1d4ed8 !important;
-                      border: 2px solid #3b82f6 !important;
-                    }
-                    #vision-calendar .rdp-day_selected {
-                      background-color: #2563eb !important;
-                      color: white !important;
-                    }
-                    #vision-calendar .rdp-day_outside {
-                      color: #9ca3af !important;
-                      background-color: white !important;
-                    }
-                    #vision-calendar .rdp-day.hasMeeting {
-                      background-color: #2563eb !important;
-                      color: white !important;
-                      font-weight: 600 !important;
-                    }
-                    #vision-calendar .rdp-day.hasMeeting:hover {
-                      background-color: #1d4ed8 !important;
-                      color: white !important;
-                    }
-                  `}} />
-                  <CalendarComponent
-                    mode="single"
-                    selected={selectedDate}
-                    onSelect={setSelectedDate}
-                    className="rounded-md border"
-                    modifiers={{
-                      hasMeeting: (date) => {
-                        if (!date) return false;
-                        return getMeetingsForDate(date).length > 0;
-                      },
-                    }}
-                    modifiersClassNames={{
-                      hasMeeting: "hasMeeting",
-                    }}
-                  />
+                  {calendarsLoading ? (
+                    <div className="flex items-center justify-center h-64">
+                      <Loader2 className="h-6 w-6 animate-spin text-purple-600" />
+                    </div>
+                  ) : session?.user?.id ? (
+                    <div className="vision-calendar-wrapper" style={{ height: 'auto', maxHeight: '600px' }}>
+                      <style dangerouslySetInnerHTML={{__html: `
+                        .vision-calendar-wrapper .fc {
+                          font-size: 0.75rem !important;
+                        }
+                        .vision-calendar-wrapper .fc-toolbar {
+                          padding: 0.5rem !important;
+                          margin-bottom: 0.5rem !important;
+                        }
+                        .vision-calendar-wrapper .fc-toolbar-title {
+                          font-size: 0.875rem !important;
+                          font-weight: 600 !important;
+                        }
+                        .vision-calendar-wrapper .fc-button {
+                          padding: 0.25rem 0.5rem !important;
+                          font-size: 0.75rem !important;
+                          height: auto !important;
+                        }
+                        .vision-calendar-wrapper .fc-daygrid-day {
+                          min-height: 3rem !important;
+                        }
+                        .vision-calendar-wrapper .fc-daygrid-day-number {
+                          padding: 0.25rem !important;
+                          font-size: 0.75rem !important;
+                        }
+                        .vision-calendar-wrapper .fc-daygrid-event {
+                          font-size: 0.65rem !important;
+                          padding: 0.125rem 0.25rem !important;
+                          margin: 0.125rem !important;
+                        }
+                        .vision-calendar-wrapper .fc-col-header-cell {
+                          padding: 0.25rem !important;
+                          font-size: 0.7rem !important;
+                        }
+                        .vision-calendar-wrapper .fc-scrollgrid {
+                          border-width: 1px !important;
+                        }
+                        .vision-calendar-wrapper .fc-daygrid-day-frame {
+                          min-height: 3rem !important;
+                        }
+                        /* Masquer les éléments non nécessaires pour Vision */
+                        .vision-calendar-wrapper .calendar-selector,
+                        .vision-calendar-wrapper .calendar-stats,
+                        .vision-calendar-wrapper .calendar-view-switcher {
+                          display: none !important;
+                        }
+                        /* Réduire la taille de la colonne des événements du jour si elle existe */
+                        .vision-calendar-wrapper .w-80.flex-shrink-0 {
+                          display: none !important;
+                        }
+                      `}} />
+                      <CalendarClient 
+                        initialCalendars={calendars}
+                        userId={session.user.id}
+                        userProfile={{
+                          name: session.user.name || '',
+                          email: session.user.email || '',
+                          avatar: session.user.image || undefined
+                        }}
+                      />
+                    </div>
+                  ) : null}
                 </div>
                 {/* Colonne invisible pour espacer calendrier et liste des réunions */}
                 <div className="hidden lg:block w-8" />