diff --git a/film.riot b/film.riot
new file mode 100644
index 0000000..288e0d1
--- /dev/null
+++ b/film.riot
@@ -0,0 +1,21 @@
+<film>
+    <div each="{movie in this.props.movies}">
+        <h1>{movie.title}</h1>
+        <img src="https://www.themoviedb.org/t/p/w600_and_h900_bestv2{movie.poster_path}" if="{this.getPoster(movie.poster_path)}">
+        <h4>Popularité : {movie.popularity}</h4>
+        <h3>{movie.vote_average}/10 sur {movie.vote_count} avis.</h3>
+        <h2>Genre(s) : {movie.genre_ids}</h2>
+    </div>
+
+     <script>
+    export default {
+        getPoster(path){
+            if(path == null){
+                return false;
+            } else {
+                return true;
+            }
+        }
+    }
+    </script>
+</film>
\ No newline at end of file
diff --git a/filter.riot b/filter.riot
new file mode 100644
index 0000000..a54cc73
--- /dev/null
+++ b/filter.riot
@@ -0,0 +1,20 @@
+<sorting>
+	<form onsubmit="{filteing}">
+		<button onclick={filteing} value=""&sort_by="vote_average.desc">Mieux notés</button>
+		<button onclick={filteing}>Plus populaires</button>
+	</form>
+
+<script>
+	export default
+	{
+		async filteing(e)
+		{
+			let data = await this.sa.sorting(e.target.value)
+			this.props.updateListFilm(data.results)
+			//console.log(data)
+		}
+	}
+
+</script>
+
+</sorting>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b5c36c1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="main.riot" type="riot"></script>
+	<script src="search.riot" type="riot"></script>
+	<script src="film.riot" type="riot"></script>
+	<script src="sorting.riot" type="riot"></script>
+	<script src="kind.riot" type="riot"></script>
+	<script src="detail.riot" type="riot"></script>
+	<script src="service.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
+	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" type="text/css" href="./style.css">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Style the header */
+.header {
+  background-color: #f1f1f1;
+  padding: 30px;
+  text-align: center;
+  font-size: 35px;
+}
+
+/* Container for flexboxes */
+.row {
+  display: -webkit-flex;
+  display: flex;
+}
+
+/* Create three equal columns that sits next to each other */
+.column {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding: 10px;
+  height: 300px; /* Should be removed. Only for demonstration */
+}
+
+/* Style the footer */
+.footer {
+  background-color: #f1f1f1;
+  padding: 10px;
+  text-align: center;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media (max-width: 600px) {
+  .row {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
+}
+</style>
+</head>
+<body>
+	<main title="CINEMAMA"></main>
+</body>
+<script>
+	(async () => {
+		 await riot.compile().then(()=>{
+
+		 riot.install(function(component){
+		 	component.sa = sa
+		 })
+
+		 	let sa =  makeServiceajax();
+		 	console.log(sa);
+			console.log(riot.mount('main'));
+		});
+
+	})()
+</script>
+</html>
diff --git a/kind.riot b/kind.riot
new file mode 100644
index 0000000..262e995
--- /dev/null
+++ b/kind.riot
@@ -0,0 +1,24 @@
+<kind>
+	<select onchange="{ select }" name="genre-names" value="1">
+		<option each={genre in this.state.genreList} value="{this.genreList.name}"> {this.genreList.name}</option>
+	</select>
+
+		<button onclick="{ obetirgenre }" > Ajouter </button>
+
+	<script>
+		export default{
+			onBeforeMount (props,state) {
+				this.state = {
+					genreList : []
+				}
+			},
+				async obetirgenre() {
+					let genres = await this.sa.getGenres()
+					this.update({genreList : genre})
+					console.log(genreList)
+			}
+		}
+
+	</script>
+
+</kind>
\ No newline at end of file
diff --git a/listFilms.riot b/listFilms.riot
new file mode 100644
index 0000000..d1858ce
--- /dev/null
+++ b/listFilms.riot
@@ -0,0 +1,3 @@
+<listFilms>
+	<h2 each="{movie in this.props.movies">{movie.title}</h2>
+</listFilms>
\ No newline at end of file
