diff --git a/frontend/src/assets/loupe.png b/frontend/src/assets/loupe.png
new file mode 100644
index 0000000000000000000000000000000000000000..1111b47095f0e4a1f01132dc777ea48b86b9461c
Binary files /dev/null and b/frontend/src/assets/loupe.png differ
diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
index c317a04450eb9814b479e9de083206a38d653ae3..20a6368c3be0bd7d499eb61aa7b2d0a7aae3cb2d 100644
--- a/frontend/src/components/Banner.vue
+++ b/frontend/src/components/Banner.vue
@@ -4,6 +4,7 @@
   <img class="logo" alt="Vue logo" src="../assets/logo.png" />
   <h1 class="text" >CaCaoCritics</h1>
   </div>
+  <SearchBar />
   <div class="menu">
   <BurgerMenu />
   </div>
@@ -12,12 +13,14 @@
 
 <script>
 import BurgerMenu from "@/components/BurgerMenu.vue";
+import SearchBar from "./SearchBar.vue";
 
 export default {
   name: "Banner",
   components: {
     BurgerMenu,
-  },
+    SearchBar
+},
 };
 </script>
 
diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue
index 0e3e68f8dedbbbbcf9a635bffc6ee120e4aa8890..9638fad16d3fad66a3c67fd966d48aaffb75d264 100644
--- a/frontend/src/components/MovieType.vue
+++ b/frontend/src/components/MovieType.vue
@@ -1,11 +1,18 @@
 <template>
 <div class="box">
 <h1>Genre</h1>
+<div class="check">
 <input type="checkbox" id="action" value="Action" v-model="genre">
 <label for="Action">Action</label>
-<br>
+</div>
+<div class="check">
 <input type="checkbox" id="horreur" value="Horreur" v-model="genre">
 <label for="horreur">Horreur</label>
+</div>
+<div class="check">
+<input type="checkbox" id="fantastique" value="Fantastique" v-model="genre">
+<label for="fantastique">Fantastique</label>
+</div>
 <br>
 </div>
 </template>
@@ -16,13 +23,14 @@
 
 <style scoped>
 .box {
+    display: flex;
+    flex-direction: column;
     margin-left: 20px;
     background-color: #912F56;
     width: 200px;
     border-radius: 20px;
     color:white;
-    justify-content: space-between;
-    
+    justify-content: center;
 }
 
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
index cff3df5fc3289afafab95099d13288616986ed19..c19602212384c12f0b50a81e109aec22aac45e67 100644
--- a/frontend/src/components/SearchBar.vue
+++ b/frontend/src/components/SearchBar.vue
@@ -1,158 +1,67 @@
 <template>
-<form id="content">
-  <input type="text" name="input" class="input" :class="{ square: closed}">
-  <button @click="toggleClose" type="reset" class="search" :class="{ close: closed }"></button>
-</form>
+   <input type="text" v-model="input" placeholder="Search movies..." />
 </template>
 
 <script>
-export default {
-    data: function() {
-        return {
-            closed: false
-        }
+export default  {
+  data: function () {
+    return {
+      moviename: "",
+      movies: [],
+      moviesLoadingError: "",
+    };
+  },
+  methods: {
+    fetchMovies: function () {
+      axios
+        .get(
+          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
+        )
+        .then((response) => {
+          this.movies = response.data.results;
+        })
+        .catch((error) => {
+          this.moviesLoadingError = "An error occured while e ing movies.";
+          console.error(error);
+        });
     },
-methods: {
-    toggleClose() {
-        this.closed = !this.closed
-    }
-},
-}
-
+  },
+};
 </script>
 
 <style scoped>
-
-#content {
-  height: 50px;
-  width: 300px;
-  transform: translate(-50%, -50%);
-  margin-top: 20px;
-}
-
-#content.on {
-  -webkit-animation-name: in-out;
-  animation-name: in-out;
-  -webkit-animation-duration: 0.7s;
-  animation-duration: 0.7s;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-}
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
 
 input {
-  box-sizing: border-box;
-  width: 50px;
-  height: 50px;
-  border: 4px solid #000000;
-  border-radius: 50%;
-  background: none;
-  color: #fff;
+  display: block;
+  width: 350px;
+  margin: 20px auto;
+  padding: 10px 45px;
+  background: white url("../assets/loupe.png") no-repeat 15px center;
+  background-size: 15px 15px;
   font-size: 16px;
-  font-weight: 400;
-  font-family: Roboto;
-  outline: 0;
-  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
-  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
-  -webkit-transition-delay: 0.4s;
-  transition-delay: 0.4s;
-  -webkit-transform: translate(-100%, -50%);
-  -ms-transform: translate(-100%, -50%);
-  transform: translate(-100%, -50%);
+  border: none;
+  border-radius: 5px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
-.search {
-  background: none;
-  position: absolute;
-  top: 0px;
-  left: 0;
-  height: 50px;
-  width: 50px;
-  padding: 0;
-  border-radius: 100%;
-  outline: 0;
-  border: 0;
-  color: inherit;
-  cursor: pointer;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-  -webkit-transform: translate(-100%, -50%);
-  -ms-transform: translate(-100%, -50%);
-  transform: translate(-100%, -50%);
-
+.item {
+  width: 350px;
+  margin: 0 auto 10px auto;
+  padding: 10px 20px;
+  color: white;
+  border-radius: 5px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
 }
 
-.search:before {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 4px;
-  background-color: #000;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-  margin-top: 26px;
-  margin-left: 17px;
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-}
-
-.close {
-  -webkit-transition: 0.4s ease-in-out;
-  transition: 0.4s ease-in-out;
-  -webkit-transition-delay: 0.4s;
-  transition-delay: 0.4s;
-}
-
-.close:before {
-  content: "";
-  position: absolute;
-  width: 27px;
-  height: 4px;
-  margin-top: -1px;
-  margin-left: -13px;
-  background-color: #000;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-  -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out;
-}
-
-.close:after {
-  content: "";
-  position: absolute;
-  width: 27px;
-  height: 4px;
-  background-color: #000;
-  margin-top: -1px;
-  margin-left: -13px;
+.movie {
+  background-color: rgb(97, 62, 252);
   cursor: pointer;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
 }
 
-.square {
-  box-sizing: border-box;
-  padding: 0 40px 0 10px;
-  width: 300px;
-  height: 50px;
-  border: 4px solid #000000;
-  border-radius: 0;
-  background: none;
-  color: #000;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 400;
-  outline: 0;
-  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
-  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
-  -webkit-transition-delay: 0.4s, 0s, 0.4s;
-  transition-delay: 0.4s, 0s, 0.4s;
-  /* -webkit-transform: translate(-100%, -50%);
-  -ms-transform: translate(-100%, -50%);
-  transform: translate(-100%, -50%); */
+.error {
+  background-color: tomato;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar1.vue b/frontend/src/components/SearchBar1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cff3df5fc3289afafab95099d13288616986ed19
--- /dev/null
+++ b/frontend/src/components/SearchBar1.vue
@@ -0,0 +1,158 @@
+<template>
+<form id="content">
+  <input type="text" name="input" class="input" :class="{ square: closed}">
+  <button @click="toggleClose" type="reset" class="search" :class="{ close: closed }"></button>
+</form>
+</template>
+
+<script>
+export default {
+    data: function() {
+        return {
+            closed: false
+        }
+    },
+methods: {
+    toggleClose() {
+        this.closed = !this.closed
+    }
+},
+}
+
+</script>
+
+<style scoped>
+
+#content {
+  height: 50px;
+  width: 300px;
+  transform: translate(-50%, -50%);
+  margin-top: 20px;
+}
+
+#content.on {
+  -webkit-animation-name: in-out;
+  animation-name: in-out;
+  -webkit-animation-duration: 0.7s;
+  animation-duration: 0.7s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+
+input {
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  border: 4px solid #000000;
+  border-radius: 50%;
+  background: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+  font-family: Roboto;
+  outline: 0;
+  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
+  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
+  -webkit-transition-delay: 0.4s;
+  transition-delay: 0.4s;
+  -webkit-transform: translate(-100%, -50%);
+  -ms-transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%);
+}
+
+.search {
+  background: none;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  height: 50px;
+  width: 50px;
+  padding: 0;
+  border-radius: 100%;
+  outline: 0;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+  -webkit-transform: translate(-100%, -50%);
+  -ms-transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%);
+
+}
+
+.search:before {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 4px;
+  background-color: #000;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  margin-top: 26px;
+  margin-left: 17px;
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.close {
+  -webkit-transition: 0.4s ease-in-out;
+  transition: 0.4s ease-in-out;
+  -webkit-transition-delay: 0.4s;
+  transition-delay: 0.4s;
+}
+
+.close:before {
+  content: "";
+  position: absolute;
+  width: 27px;
+  height: 4px;
+  margin-top: -1px;
+  margin-left: -13px;
+  background-color: #000;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  -webkit-transition: 0.2s ease-in-out;
+  transition: 0.2s ease-in-out;
+}
+
+.close:after {
+  content: "";
+  position: absolute;
+  width: 27px;
+  height: 4px;
+  background-color: #000;
+  margin-top: -1px;
+  margin-left: -13px;
+  cursor: pointer;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.square {
+  box-sizing: border-box;
+  padding: 0 40px 0 10px;
+  width: 300px;
+  height: 50px;
+  border: 4px solid #000000;
+  border-radius: 0;
+  background: none;
+  color: #000;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 400;
+  outline: 0;
+  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
+  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
+  -webkit-transition-delay: 0.4s, 0s, 0.4s;
+  transition-delay: 0.4s, 0s, 0.4s;
+  /* -webkit-transform: translate(-100%, -50%);
+  -ms-transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%); */
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index d6a1e9094cc27a663c316d3712df645cda123b62..aa64bae9fddee0afda85264ab33de48dfbf0a9b9 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -18,7 +18,6 @@
     <br />
   <div class="search">
     <MovieType />
-    <SearchBar />
   </div>
     <div class="film-name">Le film est : {{ moviename }}</div>
     <li v-for="movie in movies" :key="movie.id">
@@ -111,11 +110,7 @@ a {
   margin-right: 5px;
 }
 .film {
-  text-align: center;
-}
-.search {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  display:flex;
+  align-self: center;
 }
 </style>