diff --git a/app/vision/page.tsx b/app/vision/page.tsx
index ee15acc..0e8d689 100644
--- a/app/vision/page.tsx
+++ b/app/vision/page.tsx
@@ -64,6 +64,7 @@ export default function VisionPage() {
   } | null>(null);
   const [jitsiUrl, setJitsiUrl] = useState<string | null>(null);
   const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
+  const [meetingsLoading, setMeetingsLoading] = useState(false);
   const [showMeetingDialog, setShowMeetingDialog] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
   const [meetingForm, setMeetingForm] = useState<{
@@ -97,26 +98,89 @@ export default function VisionPage() {
     }
   }, [status]);
 
-  // Load scheduled meetings from localStorage
-  useEffect(() => {
-    if (status === "authenticated" && session?.user?.id) {
-      const stored = localStorage.getItem(`meetings_${session.user.id}`);
-      if (stored) {
-        try {
-          setScheduledMeetings(JSON.parse(stored));
-        } catch (e) {
-          console.error("Error loading meetings:", e);
-        }
-      }
-    }
-  }, [session, status]);
+  // Helper function to convert calendars to ScheduledMeeting format
+  const convertCalendarsToMeetings = (calendarsData: any[]): ScheduledMeeting[] => {
+    const groupAndMissionCalendars = calendarsData.filter((cal: any) => {
+      const isGroup = cal.name?.startsWith("Groupe:");
+      const isMission = cal.name?.startsWith("Mission:");
+      return isGroup || isMission;
+    });
 
-  // Save scheduled meetings to localStorage
+    const meetings: ScheduledMeeting[] = [];
+    groupAndMissionCalendars.forEach((calendar: any) => {
+      const calendarName = calendar.name || "";
+      const isGroup = calendarName.startsWith("Groupe:");
+      const isMission = calendarName.startsWith("Mission:");
+      
+      // Extract entity name from calendar name
+      let entityName = "";
+      let entityId = "";
+      
+      if (isGroup) {
+        entityName = calendarName.replace("Groupe: ", "");
+        // Find matching group by name
+        const matchingGroup = groups.find((g: Group) => g.name === entityName);
+        entityId = matchingGroup?.id || "";
+      } else if (isMission) {
+        entityName = calendarName.replace("Mission: ", "");
+        // Find matching mission by name
+        const matchingMission = missions.find((m: Mission) => m.name === entityName);
+        entityId = matchingMission?.id || calendar.missionId || "";
+      }
+
+      // Convert events to ScheduledMeeting format
+      (calendar.events || []).forEach((event: any) => {
+        const eventStart = new Date(event.start);
+        const dateStr = eventStart.toISOString().split('T')[0];
+        const timeStr = event.isAllDay ? "" : eventStart.toTimeString().slice(0, 5);
+        
+        meetings.push({
+          id: event.id,
+          type: isGroup ? "group" : "mission",
+          entityId: entityId,
+          entityName: entityName,
+          date: dateStr,
+          time: timeStr,
+          title: event.title,
+        });
+      });
+    });
+
+    return meetings;
+  };
+
+  // Load meetings from database (events from group and mission calendars)
   useEffect(() => {
-    if (status === "authenticated" && session?.user?.id && scheduledMeetings.length >= 0) {
-      localStorage.setItem(`meetings_${session.user.id}`, JSON.stringify(scheduledMeetings));
-    }
-  }, [scheduledMeetings, session, status]);
+    const fetchMeetings = async () => {
+      if (status !== "authenticated" || !session?.user?.id) {
+        return;
+      }
+
+      try {
+        setMeetingsLoading(true);
+        // Fetch calendars with events
+        const calendarsResponse = await fetch("/api/calendars");
+        if (!calendarsResponse.ok) {
+          throw new Error("Impossible de charger les calendriers");
+        }
+        const calendarsData = await calendarsResponse.json();
+
+        const meetings = convertCalendarsToMeetings(calendarsData);
+        setScheduledMeetings(meetings);
+      } catch (error) {
+        console.error("Error loading meetings:", error);
+        toast({
+          title: "Erreur",
+          description: "Impossible de charger les réunions",
+          variant: "destructive",
+        });
+      } finally {
+        setMeetingsLoading(false);
+      }
+    };
+
+    fetchMeetings();
+  }, [session, status, groups, missions, toast]);
 
   // Fetch user groups and missions
   useEffect(() => {
@@ -263,11 +327,11 @@ export default function VisionPage() {
 
     try {
       // Fetch user calendars to find the matching calendar
-      const calendarsRes = await fetch("/api/calendars");
-      if (!calendarsRes.ok) {
+      const calendarsResponse = await fetch("/api/calendars");
+      if (!calendarsResponse.ok) {
         throw new Error("Impossible de charger les calendriers");
       }
-      const calendars = await calendarsRes.json();
+      const calendars = await calendarsResponse.json();
 
       // Find the calendar for this mission or group
       let targetCalendar = null;
@@ -354,23 +418,13 @@ export default function VisionPage() {
 
       await Promise.all(eventPromises);
 
-      // Also update localStorage for Vision page display
-      const meetings: ScheduledMeeting[] = eventsToCreate.map(({ start }, index) => {
-        const dateStr = start.toISOString().split('T')[0];
-        const timeStr = meetingForm.allDay ? "" : start.toTimeString().slice(0, 5);
-        
-        return {
-          id: `${Date.now()}-${index}-${Math.random()}`,
-          type: meetingForm.type,
-          entityId: meetingForm.entityId,
-          entityName: meetingForm.entityName,
-          date: dateStr,
-          time: timeStr,
-          title: meetingForm.title || `${meetingForm.type === "group" ? "Groupe" : "Mission"}: ${meetingForm.entityName}`,
-        };
-      });
-
-      setScheduledMeetings([...scheduledMeetings, ...meetings]);
+      // Refresh meetings from database after creation
+      const calendarsResponse = await fetch("/api/calendars");
+      if (calendarsResponse.ok) {
+        const calendarsData = await calendarsResponse.json();
+        const meetings = convertCalendarsToMeetings(calendarsData);
+        setScheduledMeetings(meetings);
+      }
       setShowMeetingDialog(false);
       setMeetingForm({
         type: "",
@@ -399,12 +453,37 @@ export default function VisionPage() {
   };
 
   // Handle delete meeting
-  const handleDeleteMeeting = (meetingId: string) => {
-    setScheduledMeetings(scheduledMeetings.filter(m => m.id !== meetingId));
-    toast({
-      title: "Succès",
-      description: "Réunion supprimée",
-    });
+  const handleDeleteMeeting = async (meetingId: string) => {
+    try {
+      const response = await fetch(`/api/events/${meetingId}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Erreur lors de la suppression");
+      }
+
+      // Refresh meetings from database after deletion
+      const calendarsResponse = await fetch("/api/calendars");
+      if (calendarsResponse.ok) {
+        const calendarsData = await calendarsResponse.json();
+        const meetings = convertCalendarsToMeetings(calendarsData);
+        setScheduledMeetings(meetings);
+      }
+
+      toast({
+        title: "Succès",
+        description: "Réunion supprimée",
+      });
+    } catch (error) {
+      console.error("Error deleting meeting:", error);
+      toast({
+        title: "Erreur",
+        description: error instanceof Error ? error.message : "Erreur lors de la suppression",
+        variant: "destructive",
+      });
+    }
   };
 
   // Format date for display