diff --git a/src/index.module.css b/src/index.module.css
index 7870459bff3564112c51cd17c0274cf885bfa261..33059c83aacd22ca2f2cd3ecca4cd97d366ad9db 100644
--- a/src/index.module.css
+++ b/src/index.module.css
@@ -118,4 +118,15 @@ nav li a:hover {
 }
 .mqtt {
   font-weight: normal;
-}
\ No newline at end of file
+}
+.historique {
+  max-height: 300px;
+  overflow-y: scroll;
+}
+.listItem:nth-child(even) {
+  background-color: #cbc7c7;
+}
+
+.listItem:nth-child(odd) {
+  background-color: #ffffff;
+}
diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx
index 6973314bfc8ec2841f83cb17e8a5179301f29ee2..3ade942ccd0b3fcb1c4f0d2d9ae59324e42279c3 100644
--- a/src/routes/rout.jsx
+++ b/src/routes/rout.jsx
@@ -66,27 +66,49 @@ export default function Root() {
     }
     setIsConnected(true);
   };
-
+  function navLinkClicked(event) {
+    event.preventDefault();
+    const clickedLink = event.target;
+    clickedLink.style.color = '#87CEEB';
+    if (window.lastClickedNavbarLink && window.lastClickedNavbarLink !== clickedLink) {
+      window.lastClickedNavbarLink.style.color = '';
+    }
+    window.lastClickedNavbarLink = clickedLink;
+  }
+  
+  function sensorLinkClicked(event) {
+    const clickedSensorLink = event.target;
+    clickedSensorLink.style.color = '#87CEEB';
+    if (window.lastClickedSensorLink && window.lastClickedSensorLink !== clickedSensorLink) {
+      window.lastClickedSensorLink.style.color = '';
+    }
+    window.lastClickedSensorLink = clickedSensorLink;
+    // On recupère la dernière nav bar link et on mets à jour sa couleur
+    if (window.lastClickedNavbarLink) {
+      window.lastClickedNavbarLink.style.color = '#87CEEB';
+    }
+  }
+  
   return (
     <>
       <div className={styles.wrapper}>
         <div className={styles.header}>
           <div className={styles.navbar}>
-            <a href="">Real time sensors</a>
-            <a href={window.location.pathname}>Other</a>
-            <a href={window.location.pathname}>Foo</a>
+            <Link onClick={navLinkClicked} to={`/`}>Real time sensors</Link>
+            <a href={window.location.pathname} onClick={navLinkClicked}>Other</a>
+            <a href={window.location.pathname} onClick={navLinkClicked}>Foo</a>
           </div>
         </div>
         <div className={styles.sidebar}>
           <h1 className={styles.sensors}>Sensors</h1>
           <div className={styles.listSensors}>
             <nav>
-            {sensors.length ? (
-            <ul>
-              {sensors.map((sensor) => (
-                <li key={sensor.id}>
-                  <Link to={`/${sensor.name}`}>
-                    {sensor.name ? (
+              {sensors.length ? (
+                <ul>
+                  {sensors.map((sensor) => (
+                    <li key={sensor.id}>
+                      <Link onClick={sensorLinkClicked} to={`/${sensor.name}`}>
+                        {sensor.name ? (
                       <>
                         {sensor.name}
                       </>
diff --git a/src/routes/sensor.jsx b/src/routes/sensor.jsx
index eb2ef6baefc01e9857f22c983f6ae9486c34c57a..7f0640e03e71d0102e3de476f2b5f7a99fb52e6d 100644
--- a/src/routes/sensor.jsx
+++ b/src/routes/sensor.jsx
@@ -22,7 +22,7 @@ export default function Sensor(){
         <h2>Historique</h2>
         <div className={styles.historique}>
             {getSensor(sensorName).map((value, index) => (
-                <div key={index}>{value}</div>
+                <div key={index}  className={styles.listItem}>{value}</div>
             ))}
         </div>
       </div>