diff --git a/app/vision/page.tsx b/app/vision/page.tsx
index a13be64..5d82f3c 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 { CalendarClient } from "@/components/calendar/calendar-client";
+import { Calendar as CalendarComponent } from "@/components/ui/calendar";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -52,8 +52,6 @@ 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;
@@ -98,32 +96,6 @@ 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 () => {
@@ -406,75 +378,86 @@ export default function VisionPage() {
               </div>
               
               <div className="flex flex-col lg:flex-row gap-6">
-                {/* Colonne calendrier (étroite) - CalendarClient avec dimensions réduites */}
+                {/* Colonne calendrier (étroite) */}
                 <div id="vision-calendar" className="w-full lg:w-80 lg:flex-shrink-0">
-                  {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}
+                  <style dangerouslySetInnerHTML={{__html: `
+                    #vision-calendar .rdp-caption_label {
+                      color: #111827 !important;
+                      font-weight: 600 !important;
+                      font-size: 0.875rem !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;
+                      width: 2.5rem !important;
+                      height: 2.5rem !important;
+                      font-size: 0.875rem !important;
+                    }
+                    #vision-calendar .rdp-day_today {
+                      background-color: #DBEAFE !important;
+                      color: #1d4ed8 !important;
+                      border: 2px solid #3b82f6 !important;
+                      font-weight: 600 !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;
+                    }
+                    #vision-calendar .rdp-day:not(.rdp-day_disabled):hover {
+                      background-color: #f3f4f6 !important;
+                    }
+                    #vision-calendar .rdp-day.hasMeeting:not(.rdp-day_disabled):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",
+                    }}
+                  />
                 </div>
                 {/* Colonne invisible pour espacer calendrier et liste des réunions */}
                 <div className="hidden lg:block w-8" />