diff --git a/src/data/levels.js b/src/data/levels.js
index c5c1593..20f92e0 100644
--- a/src/data/levels.js
+++ b/src/data/levels.js
@@ -2,12 +2,18 @@ import { type } from "@testing-library/user-event/dist/type";
 
 const levels = [
   {
-    _id: "1",
+    _id: 0,
+    name: "0",
+    unlocks: [],
+  },
+  {
+    _id: 1,
     name: "1",
     unlocks: [
       {
         name: "Archetype",
         type: "choice",
+        _id: 105,
         options: [
           {
             folder_id: "xdVnM5YTVFEewTje",
@@ -69,7 +75,7 @@ const levels = [
     ],
   },
   {
-    _id: "2",
+    _id: 2,
     name: "2",
     unlocks: [
       {
@@ -88,36 +94,44 @@ const levels = [
     ],
   },
   {
-    _id: "3",
+    _id: 3,
     name: "3",
+    unlocks: [],
   },
   {
-    _id: "4",
+    _id: 4,
     name: "4",
+    unlocks: [],
   },
   {
-    _id: "5",
+    _id: 5,
     name: "5",
+    unlocks: [],
   },
   {
-    _id: "6",
+    _id: 6,
     name: "6",
+    unlocks: [],
   },
   {
-    _id: "7",
+    _id: 7,
     name: "7",
+    unlocks: [],
   },
   {
-    _id: "8",
+    _id: 8,
     name: "8",
+    unlocks: [],
   },
   {
-    _id: "9",
+    _id: 9,
     name: "9",
+    unlocks: [],
   },
   {
-    _id: "10",
+    _id: 10,
     name: "10",
+    unlocks: [],
   },
 ];
 
diff --git a/src/layouts/Body/index.js b/src/layouts/Body/index.js
index 1ebcf78..f013003 100644
--- a/src/layouts/Body/index.js
+++ b/src/layouts/Body/index.js
@@ -1,8 +1,62 @@
 import "./styles.css";
 
+import { useState } from "react";
+
+import allData from "../../data/dataFiltered.js";
+import levels from "../../data/levels.js";
+
 const Body = (props) => {
-  console.log(props); //Object { level: 0 }
-  return <div className="body">lvl: {props.level}</div>;
+  const [level, setLevel] = useState();
+  const [archetype, setArchetype] = useState();
+  // setArchetype("");
+  let unlocks = [];
+  if (props.level) {
+    if (levels[props.level].unlocks) {
+      unlocks.push(levels[props.level].unlocks);
+    }
+  }
+  const changeArchetype = (e) => {
+    setArchetype(e.target.value);
+  };
+  return (
+    <div>
+      <h1>Body</h1>
+      {unlocks.map((unlock) => {
+        return unlock.map((item) => {
+          if (item._id === 105) {
+            return (
+              <div key={item._id}>
+                <label htmlFor="archetypes">Level {props.level}</label>
+                <select name="archetypes" onChange={changeArchetype}>
+                  {item.options.map((option) => {
+                    return (
+                      <option key={option.name} value={option.folder_id}>
+                        {option.name} - {option.folder_id}
+                      </option>
+                    );
+                  })}
+                </select>
+                <h2>Compétences d'archétype</h2>
+                {allData
+                  .filter((comp) => comp.folder === archetype)
+                  .map((comp) => {
+                    if (comp._key.includes("!folders")) {
+                      //Ici recursivement récupérer les compétences d'archetype car certaines sont rangés dans des dossiers, sous-dossiers
+                    }
+                    return (
+                      <div key={comp._id}>
+                        <h3>{comp.name}</h3>
+                        <p>{comp.description}</p>
+                      </div>
+                    );
+                  })}
+              </div>
+            );
+          }
+        });
+      })}
+    </div>
+  );
 };
 
 export default Body;
diff --git a/src/pages/Character/index.js b/src/pages/Character/index.js
index 0b3f810..befbb2a 100644
--- a/src/pages/Character/index.js
+++ b/src/pages/Character/index.js
@@ -9,7 +9,7 @@ import levels from "../../data/levels.js";
 
 const Character = () => {
   const [data, setData] = useState();
-  var selectedLevel = 0;
+  const [selectedLevel, setSelectedLevel] = useState();
   useEffect(() => {
     const filterDataByFolder = (folderId) => {
       const filteredData = allData.filter((item) => item.folder === folderId);
@@ -33,18 +33,19 @@ const Character = () => {
     });
 
     setData(filteredData);
+    setSelectedLevel(0);
   }, [setData]);
 
   let levelDom = document.getElementsByClassName("level");
 
   for (let i = 0; i < levelDom.length; i++) {
+    // eslint-disable-next-line no-loop-func
     levelDom[i].addEventListener("click", () => {
       for (let j = 0; j < levelDom.length; j++) {
         levelDom[j].classList.remove("selected");
       }
       levelDom[i].classList.add("selected");
-      selectedLevel = i + 1;
-      Body({ level: selectedLevel });
+      setSelectedLevel(i + 1);
     });
   }
 
@@ -111,6 +112,7 @@ const Character = () => {
             {renderSubItems(item?.subItems)}
           </div>
         ))} */}
+
         <Body level={selectedLevel} />
       </Container>
     </div>