diff --git a/webapp/src/components/content/game/ammo/index.jsx b/webapp/src/components/content/game/ammo/index.jsx
new file mode 100644
index 0000000..bf14798
--- /dev/null
+++ b/webapp/src/components/content/game/ammo/index.jsx
@@ -0,0 +1,12 @@
+function Ammo({arg}) {
+    return(
+        <div className="relative h-48 w-32 bottom-0 bg-white overflow-hidden transition-all duration-200 hover:bottom-full rounded-md">
+            <p>{arg}</p>
+            <div className="absolute left-d24 bottom-0 h-4 w-full rotate-45 bg-darkGreen">
+
+            </div>
+        </div>
+    );
+}
+
+export default Ammo;
\ No newline at end of file
diff --git a/webapp/src/components/content/game/ammobox/index.jsx b/webapp/src/components/content/game/ammobox/index.jsx
new file mode 100644
index 0000000..ad6a4d1
--- /dev/null
+++ b/webapp/src/components/content/game/ammobox/index.jsx
@@ -0,0 +1,16 @@
+import Ammo from "../ammo";
+import { get } from "../../../../modules/fetcher";
+import { useEffect, useState } from "react";
+
+function AmmoBox() {
+    return(
+        <div className="fixed bottom-0 left-28 right-0 h-24 bg-blue-500 flex flex-row justify-between items-start">
+            <Ammo arg={"test"}/>
+            <Ammo arg={"test2"}/>
+            <Ammo arg={"test3"}/>
+            <Ammo arg={"test4"}/>
+        </div>
+    );
+}
+
+export default AmmoBox;
\ No newline at end of file
diff --git a/webapp/src/components/content/game/cardmission/index.jsx b/webapp/src/components/content/game/cardmission/index.jsx
index ae6745f..3b0e5dd 100644
--- a/webapp/src/components/content/game/cardmission/index.jsx
+++ b/webapp/src/components/content/game/cardmission/index.jsx
@@ -1,12 +1,7 @@
 import {useState} from "react";
 import { useNavigate } from "react-router-dom";
-import Pose1 from "../../../../assets/perso/perso-1/pose-1.png";
-import Pose2 from "../../../../assets/perso/perso-2/pose-1.png";
-import Pose3 from "../../../../assets/perso/perso-3/pose-1.png";
-import Pose4 from "../../../../assets/perso/perso-4/pose-1.png";
-// import Pose5 from "../../../../assets/perso/perso-5/pose-1.png";
+import img from "../poseimg";
 
-const img = ["",Pose1,Pose2,Pose3,Pose4];
 
 function CardMission({theme}) {
 
diff --git a/webapp/src/components/content/game/gamescene/index.jsx b/webapp/src/components/content/game/gamescene/index.jsx
index e69de29..831c52a 100644
--- a/webapp/src/components/content/game/gamescene/index.jsx
+++ b/webapp/src/components/content/game/gamescene/index.jsx
@@ -0,0 +1,11 @@
+import AmmoBox from "../ammobox";
+
+function GameScene() {
+    return(
+        <main className="min-h-screen w-screen pl-44 bg-red-900 flex flex-row flex-wrap gap-12">
+            <AmmoBox />
+        </main>
+    );
+}
+
+export default GameScene;
\ No newline at end of file
diff --git a/webapp/src/components/content/game/mainmenu/index.jsx b/webapp/src/components/content/game/mainmenu/index.jsx
index c3242bb..bae42cf 100644
--- a/webapp/src/components/content/game/mainmenu/index.jsx
+++ b/webapp/src/components/content/game/mainmenu/index.jsx
@@ -18,7 +18,7 @@ function MainMenu() {
     },[]);
 
     return(
-        <main className="min-h-screen w-screens pl-44 bg-red-900 flex flex-row flex-wrap gap-12 p-8">
+        <main className="min-h-screen w-screen pl-44 bg-red-900 flex flex-row flex-wrap gap-12 p-8">
             {themes.map((theme) => {
                 return(
                     <CardMission theme={theme} />
diff --git a/webapp/src/components/content/game/poseimg/index.jsx b/webapp/src/components/content/game/poseimg/index.jsx
new file mode 100644
index 0000000..5777414
--- /dev/null
+++ b/webapp/src/components/content/game/poseimg/index.jsx
@@ -0,0 +1,8 @@
+import Pose1 from "../../../../assets/perso/perso-1/pose-1.png";
+import Pose2 from "../../../../assets/perso/perso-2/pose-1.png";
+import Pose3 from "../../../../assets/perso/perso-3/pose-1.png";
+import Pose4 from "../../../../assets/perso/perso-4/pose-1.png";
+
+const img = ["",Pose1,Pose2,Pose3,Pose4];
+
+export default img;
\ No newline at end of file
diff --git a/webapp/src/pages/gametheme/index.jsx b/webapp/src/pages/gametheme/index.jsx
index e30dc5d..928dd4b 100644
--- a/webapp/src/pages/gametheme/index.jsx
+++ b/webapp/src/pages/gametheme/index.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { get } from "../../modules/fetcher";
 import NavbarreGame from "../../components/navbarre/game";
+import GameScene from "../../components/content/game/gamescene";
 
 function GameTheme() {
 
@@ -12,9 +13,7 @@ function GameTheme() {
     useEffect(() => {
         get('https://saucisson.justw.tf/api/themes/'+id, token)
         .then(res => {
-            console.log(res.JSON.theme);
-            setTheme(res.JSON.theme);
-            console.log(theme);
+            setTheme(res.JSON.themes);
         })
         .catch(err => console.log(err));
     },[]);
@@ -22,6 +21,7 @@ function GameTheme() {
     return(
         <div className="h-full w-full">
             <NavbarreGame />
+            <GameScene theme={theme}/>
         </div>
     );
 }
diff --git a/webapp/tailwind.config.js b/webapp/tailwind.config.js
index d67f7e8..d59fd26 100644
--- a/webapp/tailwind.config.js
+++ b/webapp/tailwind.config.js
@@ -8,6 +8,7 @@ module.exports = {
     extend: {
       spacing: {
         'dfull' : '-100vw',
+        'd24': '-24px',
       },
       colors: {
         'darkGreen': '#4dab7f',