diff --git a/app/mission-tab/[missionId]/page.tsx b/app/mission-tab/[missionId]/page.tsx
index d175aa9c..eecf8415 100644
--- a/app/mission-tab/[missionId]/page.tsx
+++ b/app/mission-tab/[missionId]/page.tsx
@@ -138,7 +138,7 @@ export default function MissionTabDetailPage() {
   // Loading state
   if (loading) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 pt-6">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50">
         <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
       </div>
     );
@@ -147,7 +147,7 @@ export default function MissionTabDetailPage() {
   // Error state if mission not found
   if (!mission) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4 pt-6">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
         <div className="text-center bg-white p-8 rounded-lg shadow-sm border border-gray-200 max-w-md">
           <h2 className="text-xl font-semibold text-gray-800 mb-2">Mission non trouvée</h2>
           <p className="text-gray-600 mb-6">Cette mission n'existe pas ou a été supprimée.</p>
@@ -165,225 +165,197 @@ export default function MissionTabDetailPage() {
   const oddInfo = getODDInfo(mission.oddScope);
 
   return (
-    <div className="bg-gray-50 min-h-screen pt-6">
-      <div className="max-w-screen-2xl mx-auto px-6">
-        {/* Back Button */}
-        <div className="mb-4">
-          <Button 
-            variant="ghost" 
-            className="flex items-center text-gray-600 hover:text-gray-900"
-            onClick={() => router.push('/mission-tab')}
-          >
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Retour au tableau des missions
-          </Button>
-        </div>
+    <div className="bg-gray-50 min-h-screen p-6">
+      {/* Back Button */}
+      <div className="mb-4">
+        <Button 
+          variant="ghost" 
+          className="flex items-center text-gray-600 hover:text-gray-900"
+          onClick={() => router.push('/mission-tab')}
+        >
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Retour au tableau des missions
+        </Button>
+      </div>
 
-        {/* Page Title */}
-        <div className="mb-6">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">Détails de la Mission</h1>
-          <div className="h-1 w-24 bg-blue-600 rounded-full"></div>
-        </div>
-
-        {/* Header */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
-          <div className="flex justify-between items-start">
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900 mb-2">{mission.name}</h1>
-              <div className="flex items-center text-gray-500 text-sm gap-4">
-                <div className="flex items-center">
-                  <Calendar className="h-4 w-4 mr-1" />
-                  {formatDate(mission.createdAt)}
-                </div>
-                <div className="flex items-center">
-                  <Eye className="h-4 w-4 mr-1" />
-                  {Math.floor(Math.random() * 100) + 1} Views
-                </div>
+      {/* Header */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
+        <div className="flex justify-between items-start">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">{mission.name}</h1>
+            <div className="flex items-center text-gray-500 text-sm gap-4">
+              <div className="flex items-center">
+                <Calendar className="h-4 w-4 mr-1" />
+                {formatDate(mission.createdAt)}
+              </div>
+              <div className="flex items-center">
+                <Eye className="h-4 w-4 mr-1" />
+                {Math.floor(Math.random() * 100) + 1} Views
               </div>
             </div>
+          </div>
+          
+          {/* 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 className="text-3xl font-medium text-gray-500">${mission.name.slice(0, 2).toUpperCase()}</span>`;
+                  }
+                }}
+              />
+            ) : (
+              <div className="bg-gray-100 w-full h-full flex items-center justify-center">
+                <span className="text-3xl font-medium text-gray-500">{mission.name.slice(0, 2).toUpperCase()}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      {/* Mission Details Content */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column - Details and Metadata */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Mission Information */}
+          <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">À propos de la mission</h2>
             
-            {/* Display logo */}
-            <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>
+            {/* Mission Badge Row */}
+            <div className="mb-6 flex flex-wrap gap-2">
+              {oddInfo.number && (
+                <div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
+                  <img 
+                    src={oddInfo.iconPath} 
+                    alt={oddInfo.label}
+                    className="w-8 h-8" 
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                    }}
+                  />
+                  <span className="text-sm font-medium text-gray-700">{oddInfo.label}</span>
                 </div>
               )}
-            </div>
-          </div>
-        </div>
-
-        {/* Info Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
-          <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-            <div className="bg-amber-50 p-3 rounded-full mr-3">
-              <MapPin className="h-5 w-5 text-amber-600" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-500 font-medium">Type de mission</p>
-              <p className="text-gray-800 font-medium">{getMissionTypeLabel(mission.missionType)}</p>
-            </div>
-          </div>
-          
-          <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">
-              <Users className="h-5 w-5 text-blue-600" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-500 font-medium">Donneur d'ordre</p>
-              <p className="text-gray-800 font-medium">{mission.donneurDOrdre || "Non spécifié"}</p>
-            </div>
-          </div>
-          
-          <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-            <div className="bg-green-50 p-3 rounded-full mr-3">
-              <Clock className="h-5 w-5 text-green-600" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-500 font-medium">Durée</p>
-              <p className="text-gray-800 font-medium">{getDurationLabel(mission.projection)}</p>
-            </div>
-          </div>
-          
-          <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-            <div className="bg-purple-50 p-3 rounded-full mr-3">
-              <ThumbsUp className="h-5 w-5 text-purple-600" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-500 font-medium">Niveau</p>
-              <p className="text-gray-800 font-medium">{getNiveauLabel(mission.niveau)}</p>
-            </div>
-          </div>
-          
-          <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-            <div className="bg-indigo-50 p-3 rounded-full mr-3">
-              <Languages className="h-5 w-5 text-indigo-600" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-500 font-medium">Participation</p>
-              <p className="text-gray-800 font-medium">{mission.participation || "Non spécifié"}</p>
-            </div>
-          </div>
-          
-          {oddInfo.number && (
-            <div className="bg-white rounded-lg p-4 flex items-center shadow-sm border border-gray-100">
-              <div className="bg-red-50 p-3 rounded-full mr-3 flex items-center justify-center">
-                <img 
-                  src={oddInfo.iconPath} 
-                  alt={oddInfo.label}
-                  className="h-8 w-8" 
-                />
+              <div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
+                <MapPin className="w-4 h-4 text-gray-500" />
+                <span className="text-sm font-medium text-gray-700">{getMissionTypeLabel(mission.missionType)}</span>
               </div>
-              <div>
-                <p className="text-sm text-gray-500 font-medium">Objectif</p>
-                <p className="text-gray-800 font-medium">Développement durable</p>
+              <div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
+                <Clock className="w-4 h-4 text-gray-500" />
+                <span className="text-sm font-medium text-gray-700">{getDurationLabel(mission.projection)}</span>
+              </div>
+              <div className="flex items-center gap-2 bg-gray-100 px-3 py-2 rounded-lg">
+                <ThumbsUp className="w-4 h-4 text-gray-500" />
+                <span className="text-sm font-medium text-gray-700">Niveau: {getNiveauLabel(mission.niveau)}</span>
+              </div>
+            </div>
+          
+            {/* Mission Description */}
+            {mission.intention && (
+              <div className="mb-6">
+                <h3 className="text-md font-medium text-gray-800 mb-2">Description</h3>
+                <p className="text-gray-600 whitespace-pre-line">{mission.intention}</p>
+              </div>
+            )}
+            
+            {/* Mission Creator */}
+            <div>
+              <h3 className="text-md font-medium text-gray-800 mb-2">Mission créée par</h3>
+              <div className="flex items-center">
+                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                  <span className="text-xs font-medium text-blue-700">
+                    {mission.creator.email.substring(0, 2).toUpperCase()}
+                  </span>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-700">{mission.creator.email}</p>
+                  <p className="text-xs text-gray-500">{formatDate(mission.createdAt)}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Attachments Section */}
+          {mission.attachments && mission.attachments.length > 0 && (
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">Fichiers joints</h2>
+              <div className="space-y-3">
+                {mission.attachments.map((attachment) => (
+                  <div key={attachment.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
+                    <div className="flex items-center">
+                      <div className="p-2 bg-blue-100 rounded-md mr-3">
+                        <FileIcon className="h-5 w-5 text-blue-600" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-gray-800">{attachment.filename}</p>
+                        <p className="text-xs text-gray-500">
+                          {(attachment.fileSize / 1024).toFixed(1)} KB • {attachment.fileType}
+                        </p>
+                      </div>
+                    </div>
+                    <a 
+                      href={attachment.publicUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-blue-600 hover:text-blue-800 font-medium"
+                    >
+                      Télécharger
+                    </a>
+                  </div>
+                ))}
               </div>
             </div>
           )}
         </div>
-
-        {/* Project Description */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">Description de la mission</h2>
-          <div className="text-gray-700 whitespace-pre-wrap">
-            {mission.intention || "Aucune description disponible pour cette mission."}
-          </div>
-        </div>
-
-        {/* Attachments Section */}
-        {mission.attachments && mission.attachments.length > 0 && (
-          <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
-            <h2 className="text-xl font-semibold text-gray-800 mb-4">Documents</h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-              {mission.attachments.map((attachment) => (
-                <a 
-                  key={attachment.id} 
-                  href={attachment.publicUrl} 
-                  target="_blank" 
-                  rel="noopener noreferrer"
-                  className="bg-green-50 p-4 rounded-lg flex flex-col hover:bg-green-100 transition-colors"
-                >
-                  <div className="text-green-700 mb-2">
-                    <FileIcon className="h-10 w-10" />
+            
+        {/* Right Column - Services and Profils */}
+        <div className="space-y-6">
+          {/* Services Section */}
+          {mission.services && mission.services.length > 0 && (
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">Services</h2>
+              <div className="space-y-2">
+                {mission.services.map((service, index) => (
+                  <div 
+                    key={index} 
+                    className="flex items-center py-2 px-3 bg-blue-50 text-blue-700 rounded-md"
+                  >
+                    <span className="text-sm font-medium">{service}</span>
                   </div>
-                  <div>
-                    <p className="font-medium text-gray-800 mb-1 truncate">{attachment.filename}</p>
-                    <p className="text-sm text-gray-500">
-                      {attachment.fileType.split('/')[1]?.toUpperCase() || 'Fichier'}
-                    </p>
-                  </div>
-                </a>
-              ))}
+                ))}
+              </div>
             </div>
-          </div>
-        )}
-
-        {/* Skills Required Section */}
-        {mission.profils && mission.profils.length > 0 && (
-          <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
-            <h2 className="text-xl font-semibold text-gray-800 mb-4">Profils recherchés</h2>
-            <div className="flex flex-wrap gap-2">
-              {mission.profils.map((profil, index) => (
-                <span 
-                  key={index} 
-                  className="bg-red-50 text-red-800 px-3 py-2 rounded-full text-sm"
-                >
-                  {profil}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Services Section */}
-        {mission.services && mission.services.length > 0 && (
-          <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
-            <h2 className="text-xl font-semibold text-gray-800 mb-4">Services</h2>
-            <div className="flex flex-wrap gap-2">
-              {mission.services.map((service, index) => (
-                <span 
-                  key={index} 
-                  className="bg-blue-50 text-blue-800 px-3 py-2 rounded-full text-sm"
-                >
-                  {service}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Actions Footer */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6 flex justify-between items-center">
-          <Button 
-            variant="outline" 
-            className="text-gray-700 border-gray-300"
-            onClick={() => router.push('/mission-tab')}
-          >
-            Retour au tableau
-          </Button>
+          )}
           
-          <Button className="bg-green-500 hover:bg-green-600 text-white px-6">
-            Participer à la mission
-          </Button>
+          {/* Profils Requis Section */}
+          {mission.profils && mission.profils.length > 0 && (
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">Profils requis</h2>
+              <div className="space-y-2">
+                {mission.profils.map((profil, index) => (
+                  <div 
+                    key={index} 
+                    className="flex items-center py-2 px-3 bg-purple-50 text-purple-700 rounded-md"
+                  >
+                    <Languages className="h-4 w-4 mr-2" />
+                    <span className="text-sm font-medium">{profil}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/app/mission-tab/page.tsx b/app/mission-tab/page.tsx
index 101d3934..442e933f 100644
--- a/app/mission-tab/page.tsx
+++ b/app/mission-tab/page.tsx
@@ -125,17 +125,16 @@ export default function MissionTabPage() {
   };
   
   return (
-    <div className="w-full bg-white min-h-screen pt-6">
+    <div className="flex flex-col h-full w-full bg-white">
       {/* Page Title */}
-      <div className="max-w-screen-2xl mx-auto px-6 mb-6">
-        <h1 className="text-3xl font-bold text-gray-900 mb-2">Le Tableau des Missions</h1>
-        <div className="h-1 w-24 bg-blue-600 rounded-full"></div>
+      <div className="bg-white border-b border-gray-100 py-3 px-6">
+        <h1 className="text-gray-800 text-xl font-bold">Le Tableau des Missions</h1>
       </div>
 
       {/* Search Header */}
-      <div className="max-w-screen-2xl mx-auto bg-white border border-gray-100 rounded-lg shadow-sm mb-6 py-4 px-6">
+      <div className="bg-white border-b border-gray-100 py-3 px-6">
         <div className="flex items-center justify-between">
-          <h2 className="text-gray-800 text-lg font-medium">Toutes les missions disponibles</h2>
+          <h2 className="text-gray-800 text-base font-medium">Toutes les missions disponibles</h2>
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
             <Input
@@ -149,13 +148,13 @@ export default function MissionTabPage() {
       </div>
       
       {/* Missions Grid */}
-      <div className="max-w-screen-2xl mx-auto p-6 bg-gray-50 rounded-lg border border-gray-100 mb-6">
+      <div className="flex-1 overflow-auto bg-gray-50 p-6">
         {loading ? (
           <div className="flex justify-center items-center h-40">
             <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-600"></div>
           </div>
         ) : filteredMissions.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {filteredMissions.map((mission) => {
               const oddInfo = getODDInfo(mission);
               const niveauColor = getNiveauBadgeColor(mission.niveau);
@@ -256,14 +255,11 @@ export default function MissionTabPage() {
             })}
           </div>
         ) : (
-          <div className="text-center py-16 px-6 bg-white rounded-lg border border-gray-200 shadow-sm">
-            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <Search className="h-8 w-8 text-gray-400" />
+          <div className="flex justify-center items-center h-40 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <div className="text-center">
+              <p className="text-gray-500 font-medium mb-2">Aucune mission trouvée</p>
+              <p className="text-gray-400 text-sm">Modifiez vos critères de recherche ou réessayez plus tard.</p>
             </div>
-            <h3 className="text-lg font-medium text-gray-900 mb-2">Aucune mission trouvée</h3>
-            <p className="text-gray-500 mb-6 max-w-md mx-auto">
-              Essayez de modifier vos critères de recherche.
-            </p>
           </div>
         )}
       </div>