diff --git a/webapp/src/assets/perso/perso-1/pose-1.png b/webapp/src/assets/perso/perso-1/pose-1.png
new file mode 100644
index 0000000..0404c72
Binary files /dev/null and b/webapp/src/assets/perso/perso-1/pose-1.png differ
diff --git a/webapp/src/assets/perso/perso-2/pose-1.png b/webapp/src/assets/perso/perso-2/pose-1.png
new file mode 100644
index 0000000..557ed2c
Binary files /dev/null and b/webapp/src/assets/perso/perso-2/pose-1.png differ
diff --git a/webapp/src/components/content/game/cardmission/index.jsx b/webapp/src/components/content/game/cardmission/index.jsx
index 879a3f2..34fb563 100644
--- a/webapp/src/components/content/game/cardmission/index.jsx
+++ b/webapp/src/components/content/game/cardmission/index.jsx
@@ -1,9 +1,25 @@
+import Pose1 from "../../../../assets/perso/perso-1/pose-1.png";
+import Pose2 from "../../../../assets/perso/perso-2/pose-1.png";
+
+const img = ["",Pose1,Pose2]
+
+function Transition({img}) {
+    return(
+        <div>
+
+        </div>
+    )
+}
+
 function CardMission({mission}) {
     return(
-        <div className="h-60 w-72 bg-slate-200 flex flex-col justify-start items-center gap-5">
-            <h2>Test</h2>
-            <div className="h-28 w-28 rounded-full bg-black"></div>
-            <button className="px-4 py-3 text-white bg-darkBlue">Play</button>
+        <div className="h-60 w-72 bg-slate-200 flex flex-col justify-start items-center gap-5 rounded-md">
+            <h2 className="text-lg">Test</h2>
+            <div>
+                <img src={img[1]} alt="perso" className="h-28 w-28 rounded-full object-cover object-left-top"/>
+            </div>
+            <a href="game/1"><button className="px-4 py-3 text-white bg-darkBlue">Play</button></a>
+            <Transition img={img[1]}/>
         </div>
     )
 }
diff --git a/webapp/src/components/content/game/mainmenu/index.jsx b/webapp/src/components/content/game/mainmenu/index.jsx
index 971334e..f757e04 100644
--- a/webapp/src/components/content/game/mainmenu/index.jsx
+++ b/webapp/src/components/content/game/mainmenu/index.jsx
@@ -2,7 +2,16 @@ import CardMission from "../cardmission";
 
 function MainMenu() {
     return(
-        <main className="h-screen w-screens pl-32 bg-red-900 flex flex-row flex-wrap gap-4 p-4">
+        <main className="min-h-screen w-screens pl-44 bg-red-900 flex flex-row flex-wrap gap-12 p-8">
+            <CardMission />
+            <CardMission />
+            <CardMission />
+            <CardMission />
+            <CardMission />
+            <CardMission />
+            <CardMission />
+            <CardMission />
+            <CardMission />
             <CardMission />
         </main>
     );
diff --git a/webapp/src/components/navbarre/login-button/index.jsx b/webapp/src/components/navbarre/login-button/index.jsx
index 385a15e..ad4c724 100644
--- a/webapp/src/components/navbarre/login-button/index.jsx
+++ b/webapp/src/components/navbarre/login-button/index.jsx
@@ -1,6 +1,8 @@
 function LoginButton() {
     return (
-        <button className="py-3 px-6 bg-darkBlue text-white rounded-md">Login</button>
+        <a href="/login">
+            <button className="py-3 px-6 bg-darkBlue text-white rounded-md">Login</button>
+        </a>
     )
 }