diff --git a/main.riot b/main.riot
new file mode 100644
index 0000000..9b17ec8
--- /dev/null
+++ b/main.riot
@@ -0,0 +1,44 @@
+<main>
+	<h3>{props.title}</h3>
+	<h2 if="{this.state.isLoading}">Loading</h2>
+	<h4 if={this.state.movieList}> Résultats  {state.message}</h4>
+	<search updateListFilm="{updateListFilm}" updateLoading="{updateLoading}"></search>
+	<img class="spinner" if={this.state.isLoading == true } src="./DesertedDazzlingBudgie-size_restricted.gif" />
+	<kind updateListFilm="{updateListFilm}"></kind>
+	<sorting updateListFilm="{updateListFilm}" updateLoading="{updateLoading}"></sorting>
+	<film movies="{this.state.movieList}"></film>
+	<script>
+		export default
+		{
+		
+		onBeforeMount (props,state) {
+			this.state = {
+				movieList : [],
+				isLoading : false
+			}
+			this.getMovie();
+		},
+		onMounted(){
+
+		},
+		async getMovie(){
+			this.state.movieList = await this.sa.discover();
+			console.log(this.state.movieList)
+			this.updateListFilm(this.state.movieList.results)
+		}
+		,
+		async updateListFilm(listFilms){
+			this.update({movieList : listFilms});
+			//console.log(this.state.movieList)
+	},
+	updateLoading(bool){
+
+		this.update({
+			isLoading : bool
+		})
+	}
+}
+
+</script>
+<footer>CINEMAMA</footer>
+</main>
\ No newline at end of file
diff --git a/search.riot b/search.riot
new file mode 100644
index 0000000..6e22268
--- /dev/null
+++ b/search.riot
@@ -0,0 +1,17 @@
+<search>
+	<input oninput="{search}"></input>
+
+<script>
+	export default
+	{
+		async search(e)
+		{
+			let data = await this.sa.searchMovie(e.target.value)
+			this.props.updateListFilm(data.results)
+			//console.log(data)
+		}
+	}
+
+</script>
+
+</search>
diff --git a/service.js b/service.js
new file mode 100644
index 0000000..42e1b60
--- /dev/null
+++ b/service.js
@@ -0,0 +1,59 @@
+function makeServiceajax(){
+	let urlBase = "https://api.themoviedb.org/3/"
+	let apiKey = "3501a3f71bbe8a2f282d299a14602396"
+
+	let service = {
+		searchMovie, doRequest, discover, detailsMovie, sorting, trading, getGenres
+	};
+
+	function doRequest(search){
+		return fetch(urlBase+"search/movie?api_key"+apiKey+"&language=fr&query"+search+"&page=1")
+			.then(response => response.json())
+			.then(data => data)
+	}
+
+	function searchMovie(search){
+        return fetch(urlBase+"search/movie?api_key="+apiKey+"&language=fr&query="+search+"&page=1")
+            .then(response => response.json())
+            .then(data => data)
+    }
+
+    function discover(){
+        return fetch(urlBase+"discover/movie?api_key="+apiKey+"&language=fr&app&page=1")
+            .then(response => response.json())
+            .then(data => data)
+    }
+
+
+    function detailsMovie(movie_id){
+        return fetch(urlBase+"discover/movie"+movie_id+"?api_key="+apiKey+"&language=fr&app&page=1")
+            .then(response => response.json())
+            .then(data => data)
+    }
+
+    function genres(){
+         return fetch(urlBase+"discover/movie?api_key="+apiKey+"&language=fr&app&page=1")
+            .then(response => response.json())
+            .then(data => data)
+    }
+
+    function getGenres(){
+         return fetch(urlBase+"genre/movie/list?api_key="+apiKey+"&language=fr&app&page=1")
+            .then(response => response.json())
+            .then(data => data)
+    }
+
+    function sorting(type){
+        return fetch(urlBase+"discover/movie/?api_key="+apiKey+ type +"&language=fr&app&page=1")
+            .then(response => response.json())
+            .then(data => data)
+    }
+
+    function trading(){
+        return fetch(urlBase + "trending/all/day?api_key=" + apiKey + "&language=fr&page=1")
+            .then(response => response.json())
+            .then(data => data)
+    }
+
+	return service
+}
\ No newline at end of file
diff --git a/sorting.riot b/sorting.riot
new file mode 100644
index 0000000..ded1526
--- /dev/null
+++ b/sorting.riot
@@ -0,0 +1,24 @@
+<sorting>
+		<button onclick="{filteing}" value="&sort_by=vote_average.descvote_count.desc">Mieux notés</button>
+		<button onclick="{trading}">Plus populaires</button>
+
+<script>
+	export default
+	{
+		async filteing(e)
+		{
+			let data = await this.sa.sorting(e.target.value)
+			this.props.updateListFilm(data.results)
+			console.log(data)
+		},
+		async trading()
+		{
+			let data = await this.sa.trading()
+			this.props.updateListFilm(data.results)
+			console.log(data)
+		}
+	}
+
+</script>
+
+</sorting>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c0cdcd4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,3 @@
+h3{
+	size: 20px;
+}
\ No newline at end of file