diff --git a/app/missions/[missionId]/page.tsx b/app/missions/[missionId]/page.tsx
index 5d0f9721..29084211 100644
--- a/app/missions/[missionId]/page.tsx
+++ b/app/missions/[missionId]/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { FileIcon, Calendar, Eye, MapPin, DollarSign, Clock, ThumbsUp, Languages, BarChart } from "lucide-react";
+import { FileIcon, Calendar, Eye, MapPin, Users, Clock, ThumbsUp, Languages, BarChart } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
 import { useParams } from "next/navigation";
 
@@ -180,9 +180,34 @@ export default function MissionDetailPage() {
               </div>
             </div>
           </div>
-          <Button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md">
-            Participer à la mission
-          </Button>
+          
+          {/* Display logo instead of Participate button */}
+          <div className="w-24 h-24 rounded-md overflow-hidden flex-shrink-0">
+            {mission.logoUrl ? (
+              <img 
+                src={mission.logoUrl} 
+                alt={mission.name}
+                className="w-full h-full object-cover rounded-md"
+                onError={(e) => {
+                  console.log("Logo failed to load:", mission.logoUrl);
+                  // Show placeholder on error
+                  (e.currentTarget as HTMLImageElement).style.display = 'none';
+                  const parent = e.currentTarget.parentElement;
+                  if (parent) {
+                    parent.classList.add('bg-gray-100');
+                    parent.classList.add('flex');
+                    parent.classList.add('items-center');
+                    parent.classList.add('justify-center');
+                    parent.innerHTML = `<span class="text-2xl font-medium text-gray-400">${mission.name.slice(0, 2).toUpperCase()}</span>`;
+                  }
+                }}
+              />
+            ) : (
+              <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+                <span className="text-2xl font-medium text-gray-400">{mission.name.slice(0, 2).toUpperCase()}</span>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
@@ -200,7 +225,7 @@ export default function MissionDetailPage() {
         
         <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
           <div className="bg-blue-50 p-3 rounded-full mr-3">
-            <DollarSign className="h-5 w-5 text-blue-600" />
+            <Users className="h-5 w-5 text-blue-600" />
           </div>
           <div>
             <p className="text-sm text-gray-500 font-medium">Donneur d'ordre</p>
@@ -244,12 +269,12 @@ export default function MissionDetailPage() {
               <img 
                 src={oddInfo.iconPath} 
                 alt={oddInfo.label}
-                className="h-5 w-5" 
+                className="h-8 w-8" 
               />
             </div>
             <div>
-              <p className="text-sm text-gray-500 font-medium">ODD</p>
-              <p className="text-gray-800 font-medium">{oddInfo.label}</p>
+              <p className="text-sm text-gray-500 font-medium">Objectif</p>
+              <p className="text-gray-800 font-medium">Développement durable</p>
             </div>
           </div>
         )}