diff --git a/index.html b/index.html
index 979eff5..8f9c7b4 100644
--- a/index.html
+++ b/index.html
@@ -1,31 +1,65 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8">
-		<title>Riot App</title>
-		<script src="https://cdn.tailwindcss.com"></script>
-	</head>
-	<body class="bg-neutral-50">
+<head>
+	<meta charset="utf-8">
+	<title>Riot App</title>
+	<script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-neutral-50">
 
-		<onzer></onzer>
+<div id="app"></div>
 
-		<script src="https://unpkg.com/animore/animore.js"></script>
-		<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
+<script src="https://unpkg.com/animore/animore.js"></script>
+<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
+<script src="https://unpkg.com/@riotjs/route@6/route.umd.js"></script>
 
-		<script type="riot" src="./onzer.riot"></script>
+<!-- Composant Onzer -->
+<script type="riot" src="./onzer.riot"></script>
 
-		<script type="text/javascript">
-			async function fetch_data() {
-				return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
-					return response.json();
-				});
-			}
+<!-- Composant Playlists -->
+<script type="riot">
+	<playlists>
+      <h1>Playlists Page</h1>
+      <p>This is the playlists page. It is currently empty.</p>
+      <script>
+        export default {
+          // Your component logic here
+        }
+</script>
+<style>
+	/* Your style here */
+</style>
+</playlists>
+</script>
 
-			riot.compile().then(async () => {
-				const data = await fetch_data();
-				riot.mount('onzer', { items: data });
-			});
-		</script>
+<script type="text/javascript">
+	async function fetch_data() {
+		return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => response.json());
+	}
 
-	</body>
+	function mountComponent(component) {
+		const app = document.getElementById('app');
+		app.innerHTML = '';
+		riot.mount(app, component);
+	}
+
+	riot.compile().then(async () => {
+		const data = await fetch_data();
+
+		// Définir les routes
+		route('/', () => {
+			riot.mount('onzer', { items: data });
+		});
+
+		route('/playlists', () => {
+			riot.mount('playlists');
+		});
+
+		// Démarrer le routeur
+		router.start();
+		router.exec();
+	});
+</script>
+
+</body>
 </html>
diff --git a/onzer.riot b/onzer.riot
index 1238d48..fe7d029 100644
--- a/onzer.riot
+++ b/onzer.riot
@@ -13,7 +13,7 @@
             <div class="flex flex-row items-baseline">
                 <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 h-20 pl-6 grow"
                        placeholder={state.placeholder} onkeyup={edit} />
-                <input type="button" value="Playlists"
+                <input type="button" value="Playlists" onclick={navigateToPlaylists}
                        class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2" />
             </div>
         </form>
@@ -96,6 +96,9 @@
                     computeHttpRequest = `${baseHttpRequest}${table}`;
                 }
                 return fetch(computeHttpRequest).then(response => response.json());
+            },
+            navigateToPlaylists() {
+                route('/playlists');
             }
         }
     </script>
diff --git a/playlists.riot b/playlists.riot
new file mode 100644
index 0000000..154c83e
--- /dev/null
+++ b/playlists.riot
@@ -0,0 +1,14 @@
+<playlists>
+    <h1>Playlists Page</h1>
+    <p>This is the playlists page. It is currently empty.</p>
+
+    <script>
+        export default {
+            // Votre code de composant ici (si nécessaire)
+        }
+    </script>
+
+    <style>
+        /* Votre style ici (si nécessaire) */
+    </style>
+</playlists>
