diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
index abae93914fcfa57de1be67d23b56816fa21f8975..ccb9454b66d2a1e04fd478a6c7e90ca56e947a6e 100644
Binary files a/frontend/src/assets/logo.png and b/frontend/src/assets/logo.png differ
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 0a2fe0f243db853c7daf6e8f614b941a921f3ae8..ed613acf45b995239fca708ce639e22460d6e14b 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,17 +1,21 @@
 <template>
   <div class="home">
     <h1>Bienvenue sur CaCaoCritics</h1>
-    <img alt="Vue logo" src="../assets/logo.png" />
+    <img class="logo" alt="Vue logo" src="../assets/logo.png" />
     <br />
-    <input type="text" v-model="moviename" placeholder="enter a movie name"/>
+    <input type="text" v-model="moviename" placeholder="enter a movie name" />
     <div class="film-name">Le film est : {{ moviename }}</div>
     <li v-for="movie in movies" :key="movie.id">
-    <p>
-      {{ movie.title }} 
-    </p>
-    <p>
-      <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" />
-    </p>
+      <p class="movie-title">
+        {{ movie.title }}
+      </p>
+      <p>
+        <img
+          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+          withd="100"
+          height="300"
+        />
+      </p>
     </li>
   </div>
 </template>
@@ -55,6 +59,10 @@ export default {
   text-align: center;
 }
 
+.logo {
+  max-width: 100px;
+}
+
 h3 {
   margin: 40px 0 0;
 }
@@ -70,6 +78,6 @@ li {
 }
 
 a {
-  color: #FF68AD;
+  color: #ff68ad;
 }
 </style>