diff --git a/mon-projet/src/App.jsx b/mon-projet/src/App.jsx
index 51d4d89..5651eb6 100644
--- a/mon-projet/src/App.jsx
+++ b/mon-projet/src/App.jsx
@@ -1,15 +1,30 @@
-import "./App.css";
-import Details from "./pages/Details";
-import Accueil from "./pages/Accueil";
+import { useState } from "react";
 import { Routes, Route } from "react-router-dom";
-
+import { initialData } from "./data";
+import Accueil from "./pages/Accueil";
+import Details from "./pages/Details";
 function App() {
+  const [trilogies, setTrilogies] = useState(initialData);
+  const [likes, setLikes] = useState({});
+
   return (
     <Routes>
-      <Route path="/" element={<Accueil />} />
-      <Route path="/trilogie/:id" element={<Details />} />
+      <Route
+        path="/"
+        element={
+          <Accueil
+            trilogies={trilogies}
+            setTrilogies={setTrilogies}
+            likes={likes}
+            setLikes={setLikes}
+          />
+        }
+      />
+      <Route
+        path="/trilogie/:id"
+        element={<Details trilogies={trilogies} likes={likes} />}
+      />
     </Routes>
   );
 }
-
 export default App;
diff --git a/mon-projet/src/pages/Accueil.jsx b/mon-projet/src/pages/Accueil.jsx
index 8fc4bb6..81be286 100644
--- a/mon-projet/src/pages/Accueil.jsx
+++ b/mon-projet/src/pages/Accueil.jsx
@@ -3,16 +3,14 @@ import Carte from "../components/carte";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import { initialData } from "../data";
-
-function Accueil() {
+import { useNavigate } from "react-router-dom";
+function Accueil({ likes, setLikes }) {
   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) => {
@@ -21,6 +19,12 @@ function Accueil() {
       return 0;
     });
 
+  const navigate = useNavigate();
+  function hasard() {
+    const i = Math.floor(Math.random() * trilogies.length);
+    navigate(`/trilogie/${trilogies[i].id}`);
+  }
+
   function ajouter(e) {
     e.preventDefault();
     if (nom.trim() === "") return;
@@ -39,6 +43,7 @@ function Accueil() {
     <div className="body">
       <Header />
       <>
+        <button> </button>
         <select value={tri} onChange={(e) => setTri(e.target.value)}>
           <option value="nom">Nom (A→Z)</option>
           <option value="likes">Plus likées</option>
diff --git a/mon-projet/src/pages/Details.jsx b/mon-projet/src/pages/Details.jsx
index d531526..25943ed 100644
--- a/mon-projet/src/pages/Details.jsx
+++ b/mon-projet/src/pages/Details.jsx
@@ -1,23 +1,23 @@
 import { useParams, Link } from "react-router-dom";
-import { initialData } from "../data";
 
-function Details() {
+function Details({ trilogies, likes }) {
   const { id } = useParams();
 
-  const trilogie = initialData.find((t) => t.id === Number(id));
+  const trilogie = trilogies.find((t) => t.id === Number(id));
 
   if (!trilogie)
     return (
       <p>
-        Trilogie introuvable 🤷 <Link to="/">← retour</Link>
+        Introuvable — <Link to="/">retour</Link>
       </p>
     );
 
   return (
     <div className="detail">
-      <Link to="/">← Retour à la liste</Link>
+      <Link to="/">← Retour</Link>
       <h1>{trilogie.nom}</h1>
-      <p>🎮 Niveaux : {trilogie.niveaux}</p>
+      <p>Niveaux : {trilogie.niveaux}</p>
+      <p>❤️ Likes : {likes[trilogie.id] || 0}</p>
     </div>
   );
 }