diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx
new file mode 100644
index 0000000..19d29c4
--- /dev/null
+++ b/cryptide_project/src/Components/PlayerList.tsx
@@ -0,0 +1,20 @@
+
+import React from 'react';
+import PersonStatus from './PersonStatus';
+
+//@ts-ignore
+function PlayerList({ players }) {
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+            {
+                //@ts-ignore
+                players.map((player, index) => (
+                    <PersonStatus key={index} state={player.state} name={player.name} />
+                ))
+            }
+        </div>
+
+    );
+}   
+
+export default PlayerList;
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/InGame.css b/cryptide_project/src/Pages/InGame.css
index 019a26d..690147a 100644
--- a/cryptide_project/src/Pages/InGame.css
+++ b/cryptide_project/src/Pages/InGame.css
@@ -96,4 +96,9 @@
 
     width: 100px;
     height: 60px;
-}
\ No newline at end of file
+}
+
+/* #playerCanvasBody{
+    columns: 2 auto;
+    grid-row: 2;
+} */
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index a14b67d..389f709 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@@ -9,6 +9,7 @@ import GraphContainer from '../Components/GraphContainer';
 import ChoiceBar from '../Components/ChoiceBar';
 import ButtonImgNav from '../Components/ButtonImgNav';
 import PersonStatus from '../Components/PersonStatus';
+import PlayerList from '../Components/PlayerList';
 
 /* Icon */
 import Leave from "../res/icon/leave.png";
@@ -33,6 +34,29 @@ import { FormattedMessage } from 'react-intl';
 
 //@ts-ignore
 const InGame = ({locale, changeLocale}) => {
+
+  const players = [
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    { state: Replay, name: 'Dummy' },
+    { state: Replay, name: 'Boat' },
+    { state: Replay, name: 'Bot-tom' },
+    // Ajouter d'autres joueurs au besoin
+  ];
+
+
+
+
     const [showChoiceBar, setShowChoiceBar] = useState(false);
   
     const handleNodeClick = (shouldShowChoiceBar: boolean) => {
@@ -140,10 +164,13 @@ const InGame = ({locale, changeLocale}) => {
             <h3>Il y a 3 joueurs</h3>
           </Offcanvas.Header>
           <Offcanvas.Body>
-            {/* affichage d'une liste responsive dynamic */}
-            <PersonStatus state={Replay} name="Dummy"/>
-            <PersonStatus state={Replay} name="Boat"/>
-            <PersonStatus state={Replay} name="Bot-tom"/>
+              {/* affichage d'une liste responsive dynamic */}
+            {/* <div className='playerCanvasBody'>
+              <PersonStatus state={Replay} name="Dummy"/>
+              <PersonStatus state={Replay} name="Boat"/>
+              <PersonStatus state={Replay} name="Bot-tom"/>
+            </div> */}
+            <PlayerList players={players} />
           </Offcanvas.Body>
         </Offcanvas>