diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 35eb1dd..8306744 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/index.html b/index.html
index 8f9c7b4..fc7719e 100644
--- a/index.html
+++ b/index.html
@@ -1,65 +1,49 @@
 <!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">
 
-<div id="app"></div>
+		<onzer></onzer>
 
-<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 src="https://unpkg.com/animore/animore.js"></script>
+		<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
-<!-- Composant Onzer -->
-<script type="riot" src="./onzer.riot"></script>
+		<script type="riot" src="./onzer.riot"></script>
+		<script type="riot" src="./playlists.riot"></script>
 
-<!-- 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>
+		<script type="text/javascript">
+			async function fetch_data() {
+				return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
+					return response.json();
+				});
+			}
 
-<script type="text/javascript">
-	async function fetch_data() {
-		return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => response.json());
-	}
+			function mountComponent(component) {
+				const app = document.getElementById('app');
+				app.innerHTML = '';
+				riot.mount(app, component);
+			}
 
-	function mountComponent(component) {
-		const app = document.getElementById('app');
-		app.innerHTML = '';
-		riot.mount(app, component);
-	}
+			riot.compile().then(async () => {
+				const data = await fetch_data();
 
-	riot.compile().then(async () => {
-		const data = await fetch_data();
+				route('/', () => {
+					riot.mount('onzer', { items: data });
+				});
 
-		// Définir les routes
-		route('/', () => {
-			riot.mount('onzer', { items: data });
-		});
+				route('/playlists', () => {
+					riot.mount('playlists');
+				});
 
-		route('/playlists', () => {
-			riot.mount('playlists');
-		});
+				router.start();
+				router.exec();
 
-		// Démarrer le routeur
-		router.start();
-		router.exec();
-	});
-</script>
+			});
+		</script>
 
-</body>
+	</body>
 </html>
