diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue
index 23fc56cb43c4f653d8c24f170cf570e1008817b3..21d59ff90fe3268eb98a3afd39e9323d90f10ca0 100644
--- a/frontend/src/components/MovieType.vue
+++ b/frontend/src/components/MovieType.vue
@@ -3,8 +3,8 @@
 <h1>Genre</h1>
 <li v-for="genre in genres" :key="genre.id">
 <div class="check">
-<input type="checkbox" id="action" value="Action" v-model="genre">
-<label for="Action">{{ }}</label>
+<input type="checkbox" id="genre.id" value="genre" >
+<label for="genre">{{ genre.name }}</label>
 </div>
 <br>
 </li>
@@ -12,12 +12,15 @@
 </template>
 
 <script>
+import axios from "axios";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
 export default {
     methods: {
         fetchGenres: function () {
       axios
         .get(
-           backendURL + "/genres/",
+           backendURL + "/genres",
         )
         .then((response) => {
           this.genres = response.data;
@@ -29,7 +32,6 @@ export default {
     },
   },
   created() {
-    this.fetchMovies();
     this.fetchGenres();
   },
 };
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 4048d8a55f736b0657b7105e6a3a6a7195d1aae7..20fad0be82221eedd1b36b1f9d790793de4a48cc 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -28,11 +28,13 @@
         <h5> {{ movie.title }}</h5>
       </p>
       <p class="film">
+        <router-link :to="'/movie/'+ movie.id">
         <img
           :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
           withd="100"
           height="300"
         />
+        </router-link>
       </p>
     </li>
     </div>