diff --git a/frontend/src/views/ApprenticeshipView.vue b/frontend/src/views/ApprenticeshipView.vue
index e312592..a6ff84e 100644
--- a/frontend/src/views/ApprenticeshipView.vue
+++ b/frontend/src/views/ApprenticeshipView.vue
@@ -14,7 +14,7 @@
     <p class="marginauto">
       {{ $t('alternance.body2') }}
     </p>
-    <img class="marginauto" src="../components/images/impactiv.svg" alt="impactiv-logo" width="300">
+    <img class="marginauto" src="../components/images/impactiv.svg" alt="impactiv-logo" >
   </div>
   <br>
   <h2>{{ $t('alternance.what') }}</h2>
@@ -23,7 +23,7 @@
       <p>
         {{ $t('alternance.what1') }}
       </p>
-      <img class="marginauto" src="../components/images/bt4.png" alt="bt4" width="300">
+      <img class="marginauto" src="../components/images/bt4.png" alt="bt4" >
     </div>
     <p>
       {{ $t('alternance.what2') }}
@@ -45,7 +45,7 @@
       {{ $t('alternance.learn2') }}
     </p>
     <div class="grid">
-      <img class="marginauto" src="../components/images/debug.png" alt="debug-screen" width="300">
+      <img class="marginauto" src="../components/images/debug.png" alt="debug-screen" >
       <p class="marginauto">
         {{ $t('alternance.learn3') }}
       </p>
@@ -57,7 +57,7 @@
       <p>
         {{ $t('alternance.learn5') }}
       </p>
-      <img class="marginauto" src="../components/images/mender.png" alt="mender-logo" width="400">
+      <img class="marginauto" src="../components/images/mender.png" alt="mender-logo">
     </div>
     <p>
       {{ $t('alternance.learn6') }}
@@ -78,5 +78,15 @@
 </template>
 
 <style scoped lang="scss">
-
+  p {
+    text-align: justify;
+  }
+  img {
+    width: 40dvw;
+  }
+  @media screen and (min-width: 900px) {
+    img {
+      max-width: 20dvw;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Sae201View.vue b/frontend/src/views/Sae201View.vue
index b607c90..ce8ba5e 100644
--- a/frontend/src/views/Sae201View.vue
+++ b/frontend/src/views/Sae201View.vue
@@ -43,5 +43,15 @@
 </template>
 
 <style scoped lang="scss">
-
+  p {
+    text-align: justify;
+  }
+  img {
+    width: 40dvw;
+  }
+  @media screen and (min-width: 900px) {
+    img {
+      max-width: 30dvw;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Sae301View.vue b/frontend/src/views/Sae301View.vue
index 20e4b1b..7df2154 100644
--- a/frontend/src/views/Sae301View.vue
+++ b/frontend/src/views/Sae301View.vue
@@ -6,7 +6,7 @@
 <div class="margin">
   <h2>{{ $t('sae301.title') }}</h2>
   <div class="grid">
-    <img style="grid-column: 2; grid-row: 1;" src="../components/images/sae301-scheme.jpg" alt="file_scheme" width="500">
+    <img class="marginauto" style="grid-column: 2; grid-row: 1;" src="../components/images/sae301-scheme.jpg" alt="file_scheme" width="500">
     <p class="marginauto" style="grid-column: 1; grid-row: 1;">
       {{ $t('sae301.body1') }}
     </p>
@@ -34,7 +34,7 @@
   <div>
     <h2>{{ $t('sae301.feelingstitle') }}</h2>
     <div>
-      {{ $t('sae301.feelings') }}
+      <p>{{ $t('sae301.feelings') }}</p>
     </div>
   </div>
 </div>
@@ -43,5 +43,15 @@
 </template>
 
 <style scoped lang="scss">
-
+  p {
+    text-align: justify;
+  }
+  img {
+    width: 40dvw;
+  }
+  @media screen and (min-width: 900px) {
+    img {
+      max-width: 30dvw;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Sae302View.vue b/frontend/src/views/Sae302View.vue
index 3d0e837..33bb157 100644
--- a/frontend/src/views/Sae302View.vue
+++ b/frontend/src/views/Sae302View.vue
@@ -43,5 +43,15 @@
 </template>
 
 <style scoped lang="scss">
-
+  p {
+    text-align: justify;
+  }
+  img {
+    width: 40dvw;
+  }
+  @media screen and (min-width: 900px) {
+    img {
+      max-width: 30dvw;
+    }
+  }
 </style>
\ No newline at end of file