diff --git a/mon-projet/src/main.jsx b/mon-projet/src/main.jsx
index 4bfc3b2..b0e32bf 100644
--- a/mon-projet/src/main.jsx
+++ b/mon-projet/src/main.jsx
@@ -1,17 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import "./index.css";
 import App from "./App.jsx";
-import { BrowserRouter } from "react-router-dom";
-
-createRoot(document.getElementById("root")).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-);
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 );
diff --git a/mon-projet/src/pages/Accueil.jsx b/mon-projet/src/pages/Accueil.jsx
index c7171dc..d6295aa 100644
--- a/mon-projet/src/pages/Accueil.jsx
+++ b/mon-projet/src/pages/Accueil.jsx
@@ -1,8 +1,107 @@
-import { useParams } from "react-router-dom";
+import { useState } from "react";
+import Carte from "../components/carte";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+const initialData = [
+  {
+    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 Accueil() {
-  const { id } = useParams();
-  return <h1>Détails de la trilogie {id}</h1>;
+  console.log("test");
+  const [likes, setLikes] = useState({});
+  const [recherche, setRecherche] = useState("");
+  const [trilogies, setTrilogies] = useState(initialData);
+  const [nom, setNom] = useState("");
+  const [niveaux, setNiveaux] = useState("");
+  const [tri, setTri] = useState("nom");
+
+  const affichees = [...trilogies]
+    .filter((t) => t.nom.toLowerCase().includes(recherche.toLowerCase()))
+    .sort((a, b) => {
+      if (tri === "nom") return a.nom.localeCompare(b.nom);
+      if (tri === "likes") return (likes[b.id] || 0) - (likes[a.id] || 0);
+      return 0;
+    });
+
+  function ajouter(e) {
+    e.preventDefault();
+    if (nom.trim() === "") return;
+    const nouvelle = { id: Date.now(), nom, niveaux };
+    setTrilogies([...trilogies, nouvelle]);
+    setNom("");
+    setNiveaux("");
+  }
+
+  function liker(id) {
+    setLikes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
+  }
+
+  const total = Object.values(likes).reduce((s, n) => s + n, 0);
+
+  <div className="body">
+    <Header />
+    <>
+      <select value={tri} onChange={(e) => setTri(e.target.value)}>
+        <option value="nom">Nom (A→Z)</option>
+        <option value="likes">Plus likées</option>
+      </select>
+    </>
+    <form onSubmit={ajouter}>
+      <input
+        value={nom}
+        onChange={(e) => setNom(e.target.value)}
+        placeholder="Nom de la trilogie"
+      />
+      <input
+        value={niveaux}
+        onChange={(e) => setNiveaux(e.target.value)}
+        placeholder="Niveaux"
+      />
+      <button type="submit">Ajouter</button>
+    </form>
+    <input
+      type="search"
+      placeholder="Rechercher une trilogie…"
+      value={recherche}
+      onChange={(e) => setRecherche(e.target.value)}
+    />
+    <p>👍 Total de likes : {total}</p>
+    {affichees.length === 0 && <p>Aucune trilogie trouvée</p>}
+    {affichees.map((trilo) => (
+      <Carte
+        key={trilo.id}
+        titre={trilo.nom}
+        niveaux={trilo.niveaux}
+        likes={likes[trilo.id] || 0}
+        onLike={() => liker(trilo.id)}
+      />
+    ))}
+    <Footer />
+  </div>;
 }
 
 export default Accueil;