diff --git a/src/error-page.jsx b/src/error-page.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9d0a9302c42ab6491870f5ab080ad1df6f121520
--- /dev/null
+++ b/src/error-page.jsx
@@ -0,0 +1,17 @@
+import { useRouteError } from "react-router-dom";
+import styles from "./index.module.css";
+import {Link} from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div className={styles.errorPage}>
+      <h1>Oops!</h1>
+      <h2>Erreur 404 - Page non trouvée</h2>
+      <p>La donnée que vous recherchez n'existe pas.</p>
+      <Link to={`/`}>Retour à la page d'accueil</Link>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/index.module.css b/src/index.module.css
index 33059c83aacd22ca2f2cd3ecca4cd97d366ad9db..af3e50bbff00d33a6a487996c3365dd87b44326a 100644
--- a/src/index.module.css
+++ b/src/index.module.css
@@ -119,6 +119,47 @@ nav li a:hover {
 .mqtt {
   font-weight: normal;
 }
+
+.errorPage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font-family: Arial, sans-serif;
+  text-align: center;
+}
+
+.errorPage>h1 {
+  font-size: 3em;
+  margin-bottom: 0.5em;
+}
+
+.errorPage>h2 {
+  font-size: 2em;
+  margin-bottom: 1em;
+}
+
+.errorPage>p {
+  font-size: 1.2em;
+  margin-bottom: 1.5em;
+}
+
+.errorPage>a {
+  display: inline-block;
+  padding: 0.8em 1.5em;
+  background-color: #6c6e71;
+  color: #fff;
+  font-size: 1.2em;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+}
+
+.errorPage>a:hover {
+  background-color: #302f31;
+}
+
 .historique {
   max-height: 300px;
   overflow-y: scroll;
@@ -130,3 +171,4 @@ nav li a:hover {
 .listItem:nth-child(odd) {
   background-color: #ffffff;
 }
+
diff --git a/src/main.jsx b/src/main.jsx
index e75a2bbbb9a4b5408e501ae6275e71c899ed479e..f6e1603b16f58947522374ab646bec017d7ad33a 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,21 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Sensor from "./routes/sensor";
-import Root from "./routes/rout";
+import Sensor, { sensorLoader, loaderLastValueSensor} from "./routes/sensor";
+import Root, { loader as rootLoader } from "./routes/rout";
+import ErrorPage from "./error-page";
 import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
 
-
+function combineLoaders(loaders) {
+  return async function combinedLoader(params) {
+    const data = {};
+    for (const loader of loaders) {
+      const result = await loader(params);
+      Object.assign(data, result);
+    }
+    return data;
+  }
+}
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Root/>,
+    errorElement: <ErrorPage />,
+    loader: rootLoader,
     children: [
       {
         path: "/:sensorName",
         element: <Sensor />,
+        loader: combineLoaders([sensorLoader, loaderLastValueSensor]),
       },
     ],
   },
diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx
index 3ade942ccd0b3fcb1c4f0d2d9ae59324e42279c3..5156af71e1e4e53a9ba4e4ed5c5c10829f2c2e91 100644
--- a/src/routes/rout.jsx
+++ b/src/routes/rout.jsx
@@ -1,13 +1,18 @@
 import styles from "../index.module.css";
 import React, { useState} from 'react';
-import { Outlet, Link} from "react-router-dom";
+import { Outlet, Link, useLoaderData} from "react-router-dom";
 import mqtt from 'precompiled-mqtt';
-import {creerSensor, existSensor, updateSensor} from '../sensor.js';
+import {creerSensor, existSensor, updateSensor, Sensors} from '../sensor.js';
 
+export async function loader() {
+  const contacts = Sensors;
+  return { contacts };
+}
 export default function Root() {
   const [sensors, setSensors] = useState([]);
   const [brokerUrl, setBrokerUrl] = useState('');
 
+  const { contacts } = useLoaderData();
 
   const topic = 'value/#';
   const [client, setClient] = useState(null);
@@ -45,7 +50,6 @@ export default function Root() {
         const sensorData = JSON.parse(message.toString());
         const name = sensorData.name;
         const data = sensorData.value;
-        console.log(sensorData);
         if(existSensor(name)){
           updateSensor(name, data);
         }else {
diff --git a/src/routes/sensor.jsx b/src/routes/sensor.jsx
index 2d65d155fbd2d710413e9c84b7889de4b9223210..f6a4faa1e46cd02456e3a93e80a732c8590be0a0 100644
--- a/src/routes/sensor.jsx
+++ b/src/routes/sensor.jsx
@@ -1,23 +1,25 @@
 import styles from "../index.module.css";
-import Root from "./rout.jsx";
-import {useEffect} from "react";
-import { useParams } from 'react-router-dom';
+import { useParams, useLoaderData } from 'react-router-dom';
 import {getSensor, getLastValue} from '../sensor.js';
 
+export function sensorLoader({params}) {
+    const sensor = getSensor(params.sensorName);
+    return {sensor};
+}
+export function loaderLastValueSensor({params}) {
+    const last_value = getLastValue(params.sensorName);
+    return {last_value};
+}
 export default function Sensor(){
     const { sensorName } = useParams();
-    const sensor = {
-        name: "Exemple sensor name",
-        type: "PERCENT",
-        value: 0.2,
-      };
+    const sensor = useLoaderData();
 
     return(
       <div>
         <h2>{sensorName}</h2>
         <h2>Valeur actuelle</h2>
         <div className={styles.sensorValue}>
-            {getLastValue(sensorName)}
+            {sensor.last_value}
         </div>
         <h2>Historique</h2>
         <div className={styles.historique}>