diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue
index 21d59ff90fe3268eb98a3afd39e9323d90f10ca0..814dfcf7489fe228ffc76da0b6785b2a10fa2b78 100644
--- a/frontend/src/components/MovieType.vue
+++ b/frontend/src/components/MovieType.vue
@@ -1,14 +1,15 @@
 <template>
 <div class="box">
 <h1>Genre</h1>
-<li v-for="genre in genres" :key="genre.id">
+<div class="liste-genre">
+<li v-for="genre in genres" :key="genre.id" style="list-style-type:none;">
 <div class="check">
 <input type="checkbox" id="genre.id" value="genre" >
-<label for="genre">{{ genre.name }}</label>
+<label for="genre"> {{ genre.name }} </label>
 </div>
-<br>
 </li>
 </div>
+</div>
 </template>
 
 <script>
@@ -16,6 +17,13 @@ import axios from "axios";
 const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
 
 export default {
+    data: function () {
+    return {
+      genrename: "",
+      genres: [],
+      genresLoadingError: "",
+    };
+  },
     methods: {
         fetchGenres: function () {
       axios
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 20fad0be82221eedd1b36b1f9d790793de4a48cc..5064a887eb37d37a096e3e28b9bf3a753f7029c8 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -74,15 +74,31 @@ export default {
         )
         .then((response) => {
           this.movies = response.data;
+          console.log(response.data)
         })
         .catch((error) => {
           this.moviesLoadingError = "An error occured while e ing movies.";
           console.error(error);
         });
+    },
+            fetchGenres: function () {
+      axios
+        .get(
+           backendURL + "/genres",
+        )
+        .then((response) => {
+          this.genres = response.data;
+          console.log(response.data)
+        })
+        .catch((error) => {
+          this.genresLoadingError = "An error occured while e ing genres.";
+          console.error(error);
+        });
     },
   },
   created() {
     this.fetchMovies();
+    this.fetchGenres();
   },
 };
 </script>