diff --git a/index.html b/index.html
index de64a60..1311932 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,9 @@
 	<meta charset="utf-8">
 	<title>Riot App</title>
 	<script src="https://cdn.tailwindcss.com"></script>
+	<script type="javascript" src="model.js"></script>
 </head>
-	<body>
+	<body class="bg-neutral-50">
 
 	<onzer></onzer>
 
@@ -13,10 +14,11 @@
 	<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
 	<script type="riot" src="./onzer.riot"></script>
+	<script type="javascript" src="./onzer.riot"></script>
 
 	<script type="text/javascript">
 		riot.compile().then(() => {
-			riot.mount('onzer')
+			riot.mount('onzer');
 		})
 	</script>
 
diff --git a/model.js b/model.js
new file mode 100644
index 0000000..1ae6ac5
--- /dev/null
+++ b/model.js
@@ -0,0 +1,5 @@
+function getSongs(){
+    return fetch(`https://dwarves.iut-fbleau.fr/~fauvet/api/songs`).then(response => {
+        return response;
+    })
+}
\ No newline at end of file
diff --git a/onzer.riot b/onzer.riot
index 38eebb2..ed62ea2 100644
--- a/onzer.riot
+++ b/onzer.riot
@@ -16,15 +16,16 @@
 
     <script>
         export default {
-            onBeforeMount(e){
+            async onBeforeMount(props){
+                const response = await fetch('https://dwarves.iut-fbleau.fr/~fauvet/api/songs');
+
+                console.log(response);
+
                 this.state.placeholder = "Rechercher dans les albums";
+                console.log(this.state.items);
             },
             edit(e) {
-                e.preventDefault()
-                this.state = {items: [{item: "caca", size: 23}, {item: "aze", size: 3}]};
-                this.state.name = "Gros caca";
-                console.log(this.state)
-                this.update();
+
             },
             click(e) {
                 e.preventDefault();
@@ -42,5 +43,4 @@
             }
         }
     </script>
-
 </onzer>
\ No newline at end of file
