diff --git a/css/index.html b/css/index.html
new file mode 100644
index 0000000..833f45d
--- /dev/null
+++ b/css/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+
+  <title>SoundBox du Channel Ultime</title>
+  <meta name="description" content="SoundBox du Channel Ultime">
+  <meta name="author" content="Creuzdos">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
+  <link rel="stylesheet" href="css/styles.css">
+
+
+</head>
+
+<body>
+  <h1> SoundBox du Channel Ultime </h1>
+  <div id="app" class="row">
+    <div v-for="son in listeDeSons" class="col s6 m4 l3 xl2 son">
+      <div class="titre">{{son.replace(".mp3","")}}</div>
+      <audio controls>
+       <source v-bind:src="'Sounds/' + son" type="audio/mpeg">
+      </audio>
+    </div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <script src="js/vueApp.js"></script>
+</body>
+</html>
diff --git a/css/index.js b/css/index.js
new file mode 100644
index 0000000..c181de0
--- /dev/null
+++ b/css/index.js
@@ -0,0 +1,15 @@
+const express = require('express');
+const fs = require('fs');
+let app = express();
+app.use(express.static('.'));
+app.get('/', function(request, response){
+  response.sendFile('index.html');
+});
+
+app.get('/Sounds', function(request, response){
+  const dir = fs.readdirSync('./Sounds');
+  response.send(dir);
+  //console.log(dir);
+});
+
+app.listen(3000);
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..14f6c47
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,19 @@
+h1{
+  text-align: center;
+}
+
+.son{
+  /*border: 1px solid #FF0000;
+  background-color: #45ccbb;*/
+}
+
+audio{
+  display: block;
+  min-height: 40px;
+  margin: auto;
+}
+
+.titre{
+  text-align: center;
+  font-weight: bold;
+}
