diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6378fc8420b6eba9e84163700438decd630d9a47..69538563681f389b3107f724af66bc71d2ed2123 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,8 @@
   },
   "[javascript][vue]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index e40d143570fafa7afa4a1209ca01b21e6c976c08..10eb82a0339a71021f1dff932cb137db05eeeaad 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,45 +1,52 @@
 <template>
   <div class="home">
-  <div class="carousel">
-   <carousel :items-to-show="5.5" autoplay=1300>
-    <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
-        <img
-          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
-          withd="100"
-          height="300"
-        />
-    </slide>
-    <template #addons>
-      <navigation />
-      <pagination />
-    </template>
-  </carousel>
-  </div>
+    <div class="carousel">
+      <carousel :items-to-show="5.5" autoplay="1300">
+        <slide
+          v-for="movie in movies"
+          :key="movie.id"
+          autoplay="True"
+          transition="100"
+        >
+          <img
+            :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+            withd="100"
+            height="300"
+          />
+        </slide>
+        <template #addons>
+          <navigation />
+          <pagination />
+        </template>
+      </carousel>
+    </div>
     <br />
     <div class="corps">
-  <div class="type">
-    <MovieType />
-  </div>
-    <li v-for="movie in movies" :key="movie.id">
-      <p class="movie-title">
-        {{ movie.title }}
-      </p>
-      <p class="film">
-        <img
-          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
-          withd="100"
-          height="300"
-        />
-      </p>
-    </li>
+      <div class="type">
+        <MovieType />
+      </div>
+      <div>
+        <li v-for="movie in movies" :key="movie.id">
+          <p class="movie-title">
+            {{ movie.title }}
+          </p>
+          <p class="film">
+            <img
+              :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+              withd="100"
+              height="300"
+            />
+          </p>
+        </li>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
-import 'vue3-carousel/dist/carousel.css';
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
+import "vue3-carousel/dist/carousel.css";
+import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
 import MovieType from "../components/MovieType.vue";
 
 export default {
@@ -81,7 +88,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .logo {
   max-width: 100px;
 }
@@ -105,7 +111,10 @@ li {
   margin-right: 5px;
 }
 .film {
-  display:flex;
+  display: flex;
   align-self: center;
 }
+.corps {
+  display: flex;
+}
 </style>