diff --git a/mon-projet/src/App.jsx b/mon-projet/src/App.jsx
index 5d02391..0663840 100644
--- a/mon-projet/src/App.jsx
+++ b/mon-projet/src/App.jsx
@@ -1,17 +1,42 @@
 import "./App.css";
-import Header from "./components/Header"; //
+import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Carte from "./components/Carte";
-import Compteurs from "./components/Compteurs";
+const trilogies = [
+  {
+    id: 1,
+    nom: "The RGB Trilogy",
+    niveaux: "Yatagarasu - Erebus - Sonic Wave",
+  },
+  {
+    id: 2,
+    nom: "The Greek Letter Trilogy",
+    niveaux: "Omega - Sigma - Gamma",
+  },
+  {
+    id: 3,
+    nom: "The Techno Trilogy",
+    niveaux: "Artificial Ascent - Digital Descent - Cybernetic Crescent ",
+  },
+  {
+    id: 4,
+    nom: "The Riot's Trilogy",
+    niveaux: "Tartarus - Acheron - Aeternus",
+  },
+  {
+    id: 5,
+    nom: "The Apocalytic Trilogy",
+    niveaux: "Cataclysm - Bloodbath - aftermath",
+  },
+];
 
 function App() {
   return (
     <div className="body">
       <Header />
-      <Compteurs />
-
-      <Carte titre="" texte="Suivi en temps réel" />
-      <Carte titre="Consommation" texte="Carburant consommé" />
+      {trilogies.map((trilo) => (
+        <Carte key={trilo.id} titre={trilo.nom} niveaux={trilo.niveaux} />
+      ))}
       <Footer />
     </div>
   );
diff --git a/mon-projet/src/components/Compteurs.jsx b/mon-projet/src/components/Compteurs.jsx
index 6865176..415896a 100644
--- a/mon-projet/src/components/Compteurs.jsx
+++ b/mon-projet/src/components/Compteurs.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 function Compteur() {
-  const [nombre, setNombre] = useState(0); // valeur de départ : 0
+  const [nombre, setNombre] = useState(0);
 
   return (
     <div>
diff --git a/mon-projet/src/components/carte.jsx b/mon-projet/src/components/carte.jsx
index ba3d5f9..cb41b24 100644
--- a/mon-projet/src/components/carte.jsx
+++ b/mon-projet/src/components/carte.jsx
@@ -1,8 +1,13 @@
+import { useState } from "react";
 function Carte(props) {
+  const [likes, setLikes] = useState(0);
   return (
     <div className="carte">
       <h2>{props.titre}</h2>
-      <p>{props.texte}</p>
+      <p>{props.niveaux}</p>
+      <p>{props.createur}</p>
+      <h2>{props.nom}</h2>
+      <button onClick={() => setLikes(likes + 1)}>❤️ {likes}</button>
     </div>
   );
 }
diff --git a/mon-projet/src/components/header.jsx b/mon-projet/src/components/header.jsx
index 8ccdf39..8766655 100644
--- a/mon-projet/src/components/header.jsx
+++ b/mon-projet/src/components/header.jsx
@@ -22,7 +22,7 @@ function Header() {
         tellement iconiques que des suites sont créées, créant ainsi des
         trilogies qui resteront à jamais dans l'esprit des joueurs. Aujourd'hui,
         on va parler de 5 trilogies qui ont marqué l'histoire de geometry dash,
-        5 trilogies qui ont su nous impacter.
+        trilogies qui ont su nous impacter.
       </p>
     </header>
   );
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..33faebe
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "stagiaire",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}