diff --git a/app/missions/page.tsx b/app/missions/page.tsx
index 964ac153..be50138d 100644
--- a/app/missions/page.tsx
+++ b/app/missions/page.tsx
@@ -1,51 +1,104 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Search } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
 
-// Mock mission data until we implement the database
-const mockMissions = [
-  {
-    id: 1,
-    title: "Développement d'une application web",
-    category: "Technology",
-    location: "Remote",
-    skills: ["React", "Node.js", "MongoDB"],
-    duration: "1-3 months",
-    createdAt: "2023-05-15"
-  },
-  {
-    id: 2,
-    title: "Conception d'identité visuelle",
-    category: "Design",
-    location: "Paris",
-    skills: ["Adobe Photoshop", "Illustrator", "UI/UX"],
-    duration: "< 1 month",
-    createdAt: "2023-06-02"
-  },
-  {
-    id: 3,
-    title: "Traduction de documentation technique",
-    category: "Writing",
-    location: "Hybrid",
-    skills: ["Translation", "Technical Writing", "English"],
-    duration: "> 3 months",
-    createdAt: "2023-06-10"
-  }
-];
+// Define Mission interface
+interface User {
+  id: string;
+  email: string;
+}
+
+interface MissionUser {
+  id: string;
+  role: string;
+  user: User;
+}
+
+interface Mission {
+  id: string;
+  name: string;
+  logo?: string;
+  oddScope: string[];
+  niveau: string;
+  missionType: string;
+  projection: string;
+  createdAt: string;
+  creator: User;
+  missionUsers: MissionUser[];
+}
 
 export default function MissionsPage() {
   const [searchTerm, setSearchTerm] = useState("");
+  const [missions, setMissions] = useState<Mission[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { toast } = useToast();
   
-  const filteredMissions = mockMissions.filter(mission => 
-    mission.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    mission.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    mission.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
+  // Fetch missions from API
+  useEffect(() => {
+    const fetchMissions = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch('/api/missions');
+        if (!response.ok) {
+          throw new Error('Failed to fetch missions');
+        }
+        const data = await response.json();
+        setMissions(data.missions || []);
+      } catch (error) {
+        console.error('Error fetching missions:', error);
+        toast({
+          title: "Erreur",
+          description: "Impossible de charger les missions",
+          variant: "destructive",
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMissions();
+  }, []);
+  
+  // Filter missions based on search term
+  const filteredMissions = missions.filter(mission => 
+    mission.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    mission.niveau.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    mission.missionType.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    mission.oddScope.some(scope => scope.toLowerCase().includes(searchTerm.toLowerCase()))
   );
   
+  // Function to format date
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('fr-FR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    });
+  };
+
+  // Function to get mission category
+  const getCategory = (mission: Mission) => {
+    return mission.oddScope && mission.oddScope.length > 0 
+      ? mission.oddScope[0].replace('odd-', 'ODD ') 
+      : "Non catégorisé";
+  };
+
+  // Function to get mission duration
+  const getDuration = (projection: string) => {
+    switch(projection) {
+      case 'short': return '< 1 mois';
+      case 'medium': return '1-3 mois';
+      case 'long': return '> 3 mois';
+      default: return projection;
+    }
+  };
+  
   return (
     <div className="flex flex-col h-full w-full bg-white">
       <div className="bg-white border-b border-gray-100 py-2 px-4">
@@ -64,46 +117,63 @@ export default function MissionsPage() {
       </div>
       
       <div className="flex-1 overflow-auto bg-white p-4">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {filteredMissions.map((mission, index) => (
-            <div key={mission.id} className="bg-white shadow-sm border border-gray-200 overflow-hidden h-full rounded-sm">
-              <div className="p-0">
-                <div className="flex justify-between items-center px-4 pt-4 pb-2">
-                  <span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
-                    {mission.category}
-                  </span>
-                  <span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
-                    {mission.duration}
-                  </span>
-                </div>
-                
-                <div className="px-4 pb-4">
-                  <h2 className="text-base font-medium mb-2">{mission.title}</h2>
-                  <p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
+        {loading ? (
+          <div className="flex justify-center items-center h-40">
+            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-900"></div>
+          </div>
+        ) : filteredMissions.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {filteredMissions.map((mission) => (
+              <div key={mission.id} className="bg-white shadow-sm border border-gray-200 overflow-hidden h-full rounded-sm">
+                <div className="p-0">
+                  <div className="flex justify-between items-center px-4 pt-4 pb-2">
+                    <span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
+                      {getCategory(mission)}
+                    </span>
+                    <span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
+                      {getDuration(mission.projection)}
+                    </span>
+                  </div>
                   
-                  <div className="flex flex-wrap gap-1 mb-4">
-                    {mission.skills.map(skill => (
-                      <span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
-                        {skill}
-                      </span>
-                    ))}
+                  <div className="px-4 pb-4">
+                    <h2 className="text-base font-medium mb-2">{mission.name}</h2>
+                    <p className="text-sm text-gray-600 mb-4">Type: {mission.missionType}</p>
+                    
+                    <div className="flex flex-wrap gap-1 mb-4">
+                      {mission.missionUsers.slice(0, 3).map(missionUser => (
+                        <span key={missionUser.id} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
+                          {missionUser.role === 'gardien-temps' ? 'Gardien du Temps' : 
+                           missionUser.role === 'gardien-parole' ? 'Gardien de la Parole' :
+                           missionUser.role === 'gardien-memoire' ? 'Gardien de la Mémoire' : 'Volontaire'}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                  
+                  <div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
+                    <span className="text-xs text-gray-500">
+                      Créée le {formatDate(mission.createdAt)}
+                    </span>
+                    <Link href={`/missions/${mission.id}`}>
+                      <Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-sm">
+                        Voir détails
+                      </Button>
+                    </Link>
                   </div>
                 </div>
-                
-                <div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
-                  <span className="text-xs text-gray-500">
-                    Créée le {mission.createdAt.replace('2023-', '')}
-                  </span>
-                  <Link href={`/missions/${mission.id}`}>
-                    <Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-sm">
-                      Voir détails
-                    </Button>
-                  </Link>
-                </div>
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center p-8">
+            <p className="text-gray-500">Aucune mission trouvée</p>
+            <Link href="/missions/new">
+              <Button className="mt-4 bg-blue-600 text-white">
+                Créer une nouvelle mission
+              </Button>
+            </Link>
+          </div>
+        )}
       </div>
     </div>
   );