diff --git a/app.css b/app.css
index 03f1a9b..af2f663 100644
--- a/app.css
+++ b/app.css
@@ -2,21 +2,43 @@ body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+  font-family: 'Avenir';
 }
 
-.section-one {
-  height: 100vh;
+.container {
+  text-align: center;
+  color: var(--color);
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-image: url(./public/assets/background_01.jpg);
   background-size: cover;
   background-position: center;
-  background-image: url("/public/assets/background_01.jpg");
+  background-attachment: fixed;
+}
+
+.section-one {
+  height: 100vh;
+  width: 100%;
   color: white;
   justify-content: center;
   display: flex;
   flex-direction: column;
 }
 
+.container-one {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .section-two {
   height: 100vh;
+  width: 100%;
   color: white;
   background: #13120d;
 }
@@ -37,16 +59,13 @@ body {
   align-items: center;
 }
 
-.section-two img {
-  margin-top: 5rem;
-}
-
 .section-three {
+  height: 100vh; 
+  width: 100%;
   display: flex;         
   flex-direction: column;
   justify-content: center;
   align-items: center; 
-  height: 100vh; 
   color: white;         
   text-align: center;   
   background: #786abf;
@@ -60,7 +79,6 @@ body {
 }
 
 .section-three .part-two {
-  margin-top: 5rem;
   display: flex;         
   flex-direction: column;
   justify-content: center;
@@ -73,29 +91,35 @@ body {
 
 .section-four {
   height: 100vh;
-  background-size: cover;
-  background-position: center;
-  background-image: url("/public/assets/background_01.jpg");
+  width: 100%;
   color: white;
 }
 
-.container-one {
+.container-four {
+  height: 100vh;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
 }
 
-svg {
-  height: 30vh;
-}
-
-.container-four {
-  height: 100vh;
+.footer {
+  position: fixed;
+  bottom: 0;
+  height: 2rem;
   display: flex;
-  flex-direction: column;
+  padding: 0.5rem;
+  align-self: start;
+}
+.footer div {
   justify-content: space-evenly;
-  align-items: center;
+}
+.footer img {
+  height: 2rem;
+}
+
+svg {
+  height: 30vh;
 }
 
 .logo-date {
@@ -111,15 +135,20 @@ svg {
 }
 
 .logo-place {
-  height: 20rem;
+  height: 18rem;
 }
 
 p {
   text-align: center;
 }
 
+h1 {
+  font-size: 4rem;
+  margin-top: 2rem;
+}
+
 h2 {
-  font-size: 5rem;
+  font-size: 3rem;
   margin-top: 2rem;
 }
 
@@ -127,21 +156,6 @@ time {
   font-size: 2rem;
 }
 
-.footer {
-  position: fixed;
-  bottom: 0;
-  height: 2rem;
-  width: auto;
-  display: flex;
-  padding: 0.5rem;
-}
-.footer div {
-  justify-content: space-evenly;
-}
-.footer img {
-  height: 2rem;
-}
-
 #first-text {
   opacity: 0;
 }
diff --git a/dist/avenir-medium.3c1007ff.woff b/dist/avenir-medium.3c1007ff.woff
new file mode 100644
index 0000000..5dcebc2
Binary files /dev/null and b/dist/avenir-medium.3c1007ff.woff differ
diff --git a/dist/index.3c1007ff.woff b/dist/index.3c1007ff.woff
new file mode 100644
index 0000000..5dcebc2
Binary files /dev/null and b/dist/index.3c1007ff.woff differ
diff --git a/dist/index.75a90472.css b/dist/index.75a90472.css
index 245ae93..5017492 100644
--- a/dist/index.75a90472.css
+++ b/dist/index.75a90472.css
@@ -2,22 +2,44 @@ body {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-family: Avenir;
 }
 
-.section-one {
-  color: #fff;
+.container {
+  text-align: center;
+  color: var(--color);
   background-image: url("background_01.1e2e62c2.jpg");
   background-position: center;
   background-size: cover;
+  background-attachment: fixed;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+}
+
+.section-one {
+  color: #fff;
   flex-direction: column;
   justify-content: center;
+  width: 100%;
   height: 100vh;
   display: flex;
 }
 
+.container-one {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
 .section-two {
   color: #fff;
   background: #13120d;
+  width: 100%;
   height: 100vh;
 }
 
@@ -37,10 +59,6 @@ body {
   display: flex;
 }
 
-.section-two img {
-  margin-top: 5rem;
-}
-
 .section-three {
   color: #fff;
   text-align: center;
@@ -48,6 +66,7 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 100%;
   height: 100vh;
   display: flex;
 }
@@ -63,7 +82,6 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  margin-top: 5rem;
   display: flex;
 }
 
@@ -73,29 +91,37 @@ body {
 
 .section-four {
   color: #fff;
-  background-image: url("background_01.1e2e62c2.jpg");
-  background-position: center;
-  background-size: cover;
+  width: 100%;
   height: 100vh;
 }
 
-.container-one {
+.container-four {
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
+  height: 100vh;
   display: flex;
 }
 
-svg {
-  height: 30vh;
+.footer {
+  align-self: start;
+  height: 2rem;
+  padding: .5rem;
+  display: flex;
+  position: fixed;
+  bottom: 0;
 }
 
-.container-four {
-  flex-direction: column;
+.footer div {
   justify-content: space-evenly;
-  align-items: center;
-  height: 100vh;
-  display: flex;
+}
+
+.footer img {
+  height: 2rem;
+}
+
+svg {
+  height: 30vh;
 }
 
 .logo-date {
@@ -111,39 +137,27 @@ svg {
 }
 
 .logo-place {
-  height: 20rem;
+  height: 18rem;
 }
 
 p {
   text-align: center;
 }
 
+h1 {
+  margin-top: 2rem;
+  font-size: 4rem;
+}
+
 h2 {
   margin-top: 2rem;
-  font-size: 5rem;
+  font-size: 3rem;
 }
 
 time {
   font-size: 2rem;
 }
 
-.footer {
-  width: auto;
-  height: 2rem;
-  padding: .5rem;
-  display: flex;
-  position: fixed;
-  bottom: 0;
-}
-
-.footer div {
-  justify-content: space-evenly;
-}
-
-.footer img {
-  height: 2rem;
-}
-
 #first-text, #second-text {
   opacity: 0;
 }
diff --git a/dist/index.75a90472.css.map b/dist/index.75a90472.css.map
index 588a90f..058bc65 100644
--- a/dist/index.75a90472.css.map
+++ b/dist/index.75a90472.css.map
@@ -1 +1 @@
-{"mappings":"AAAA;;;;;;AAMA;;;;;;;;;;;AAWA;;;;;;AAMA;;;;;;;;;AASA;;;;;;;AAOA;;;;AAIA;;;;;;;;;;;AAWA;;;;;;;AAOA;;;;;;;;AAQA;;;;AAIA;;;;;;;;AAQA;;;;;;;AAOA;;;;AAIA;;;;;;;;AAQA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;;;;AAQA;;;;AAGA;;;;AAIA;;;;AAQA;;;;;;;;;AAUA;;;;AAIA;EACE;;;;EAGA;;;;;EAIA;;;;;EAIA;;;;;EAIA","sources":["app.css"],"sourcesContent":["body {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.section-one {\n  height: 100vh;\n  background-size: cover;\n  background-position: center;\n  background-image: url(\"/public/assets/background_01.jpg\");\n  color: white;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.section-two {\n  height: 100vh;\n  color: white;\n  background: #13120d;\n}\n\n.section-two .part-one {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;    \n  background: #786abf;\n  border-bottom: 1px solid white;\n}\n\n.section-two .part-two {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.section-two img {\n  margin-top: 5rem;\n}\n\n.section-three {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center; \n  height: 100vh; \n  color: white;         \n  text-align: center;   \n  background: #786abf;\n}\n\n.section-three .part-one {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;    \n}\n\n.section-three .part-two {\n  margin-top: 5rem;\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n}\n\n.section-three span {\n  color: black;\n}\n\n.section-four {\n  height: 100vh;\n  background-size: cover;\n  background-position: center;\n  background-image: url(\"/public/assets/background_01.jpg\");\n  color: white;\n}\n\n.container-one {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\nsvg {\n  height: 30vh;\n}\n\n.container-four {\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n}\n\n.logo-date {\n  height: 4rem;\n}\n\n#circle {\n  opacity: 0;\n}\n\n.st1 {\n  height: 10rem;\n}\n\n.logo-place {\n  height: 20rem;\n}\n\np {\n  text-align: center;\n}\n\nh2 {\n  font-size: 5rem;\n  margin-top: 2rem;\n}\n\ntime {\n  font-size: 2rem;\n}\n\n.footer {\n  position: fixed;\n  bottom: 0;\n  height: 2rem;\n  width: auto;\n  display: flex;\n  padding: 0.5rem;\n}\n.footer div {\n  justify-content: space-evenly;\n}\n.footer img {\n  height: 2rem;\n}\n\n#first-text {\n  opacity: 0;\n}\n\n#second-text {\n  opacity: 0;\n}\n\n#line-container {\n  height: 10%;\n  width: 20%;\n  position: absolute;\n  left: 0;\n  bottom: 100;\n  /* rotate: -45deg; */\n  transform: translate(-50%, -50%);\n}\n\n#line {\n  stroke-dashoffset: 0;\n}\n\n@media screen and (max-width: 1024px) {\n  p {\n    padding: 0.5rem;\n  }\n  .logo-osrd-big {\n    height: 13rem;\n    padding: 0.5rem;\n  }\n  .logo-date {\n    height: 2rem;\n    padding: 0.5rem;\n  }\n  .logo-titre {\n    height: 4rem;\n    padding: 0.5rem;\n  }\n  h2 {\n    font-size: 3rem;\n  }\n}\n"],"names":[],"version":3,"file":"index.75a90472.css.map","sourceRoot":"/__parcel_source_root/"}
\ No newline at end of file
+{"mappings":"AAAA;;;;;;;AAOA;;;;;;;;;;;;;;;AAeA;;;;;;;;;AASA;;;;;;;AAOA;;;;;;;AAOA;;;;;;;;;AASA;;;;;;;AAOA;;;;;;;;;;;;AAYA;;;;;;;AAOA;;;;;;;AAOA;;;;AAIA;;;;;;AAMA;;;;;;;;AAQA;;;;;;;;;AAQA;;;;AAGA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAQA;;;;;;;;;AAUA;;;;AAIA;EACE;;;;EAGA;;;;;EAIA;;;;;EAIA;;;;;EAIA","sources":["app.css"],"sourcesContent":["body {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  font-family: 'Avenir';\n}\n\n.container {\n  text-align: center;\n  color: var(--color);\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-image: url(./public/assets/background_01.jpg);\n  background-size: cover;\n  background-position: center;\n  background-attachment: fixed;\n}\n\n.section-one {\n  height: 100vh;\n  width: 100%;\n  color: white;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.container-one {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.section-two {\n  height: 100vh;\n  width: 100%;\n  color: white;\n  background: #13120d;\n}\n\n.section-two .part-one {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;    \n  background: #786abf;\n  border-bottom: 1px solid white;\n}\n\n.section-two .part-two {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.section-three {\n  height: 100vh; \n  width: 100%;\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center; \n  color: white;         \n  text-align: center;   \n  background: #786abf;\n}\n\n.section-three .part-one {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: center;    \n}\n\n.section-three .part-two {\n  display: flex;         \n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n}\n\n.section-three span {\n  color: black;\n}\n\n.section-four {\n  height: 100vh;\n  width: 100%;\n  color: white;\n}\n\n.container-four {\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n}\n\n.footer {\n  position: fixed;\n  bottom: 0;\n  height: 2rem;\n  display: flex;\n  padding: 0.5rem;\n  align-self: start;\n}\n.footer div {\n  justify-content: space-evenly;\n}\n.footer img {\n  height: 2rem;\n}\n\nsvg {\n  height: 30vh;\n}\n\n.logo-date {\n  height: 4rem;\n}\n\n#circle {\n  opacity: 0;\n}\n\n.st1 {\n  height: 10rem;\n}\n\n.logo-place {\n  height: 18rem;\n}\n\np {\n  text-align: center;\n}\n\nh1 {\n  font-size: 4rem;\n  margin-top: 2rem;\n}\n\nh2 {\n  font-size: 3rem;\n  margin-top: 2rem;\n}\n\ntime {\n  font-size: 2rem;\n}\n\n#first-text {\n  opacity: 0;\n}\n\n#second-text {\n  opacity: 0;\n}\n\n#line-container {\n  height: 10%;\n  width: 20%;\n  position: absolute;\n  left: 0;\n  bottom: 100;\n  /* rotate: -45deg; */\n  transform: translate(-50%, -50%);\n}\n\n#line {\n  stroke-dashoffset: 0;\n}\n\n@media screen and (max-width: 1024px) {\n  p {\n    padding: 0.5rem;\n  }\n  .logo-osrd-big {\n    height: 13rem;\n    padding: 0.5rem;\n  }\n  .logo-date {\n    height: 2rem;\n    padding: 0.5rem;\n  }\n  .logo-titre {\n    height: 4rem;\n    padding: 0.5rem;\n  }\n  h2 {\n    font-size: 3rem;\n  }\n}\n"],"names":[],"version":3,"file":"index.75a90472.css.map","sourceRoot":"/__parcel_source_root/"}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index bf9bf6b..bd22e34 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,7 +7,8 @@
     <script src="/index.975ef6c8.js" defer=""></script>
   </head>
   <body>
-    <section class="section-one">
+    <div class="container">
+      <section class="section-one">
       <div class="container-one">
         <svg viewbox="0 0 567.3 475.8">
           <style>.st0 {
@@ -66,10 +67,10 @@
       <div id="line-container">
         <img src="/OSRD-kickoff-programme-ornement-03.14c6980c.svg" alt="line" id="line">
       </div>
-    </section>
-    <section class="section-two">
+      </section>
+      <section class="section-two">
       <div class="part-one">
-        <h2>Design <span>your Journey</span></h2>
+        <h1>Design <span style="color: #000">your Journey<span style="color: #c7b2de">.</span></span></h1>
         <p> 34 rue du commandant René Mouchotte <br>
             de 14h à 16h <br>
             <simetrodeparis><span> Montparnasse Bienvenue</span>
@@ -80,8 +81,8 @@ <h2>Design <span>your Journey</span></h2>
         <h2>Le lieu</h2>
         <img src="/OSRD-kickoff-programme-plan-event.13fe5069.svg" alt="plan" class="logo-place">
       </div>
-    </section>
-    <section class="section-three">
+      </section>
+      <section class="section-three">
       <div>
         <h2>Les conférences</h2>
           <p style="color: #000">
@@ -109,8 +110,8 @@ <h2>Les conférences</h2>
           <b>Loïc Hamelin</b> - Directeur du programme OSRD
         </p>
       </div>
-    </section>
-    <section class="section-four">
+      </section>
+      <section class="section-four">
       <div class="container-four">
         <div>
           <h2>La suite</h2>
@@ -125,14 +126,12 @@ <h2>La suite</h2>
           </a>
         </div>
       </div>
-    </section>
-    <div>
+      </section>
       <div class="footer">
         <div>
           <img src="/OSRD-kickoff-programme-logo-GOUV.f2120df8.svg" alt="logo-gouv">
           <img src="/OSRD-kickoff-programme-logo-UE.5471af58.svg" alt="logo-ue">
         </div>
-
         <div>
           <img src="/OSRD-kickoff-programme-logo-SNCF.7943ada4.svg" alt="logo-sncf">
         </div>
diff --git a/index.css b/index.css
index 7475c03..1a70adc 100644
--- a/index.css
+++ b/index.css
@@ -1,4 +1,4 @@
 @font-face {
   font-family: "Avenir";
-  src: url("../public/fonts/Avenir/AvenirRegular/AvenirRegular.ttf");
+  src: url("./public/fonts/Avenir/avenir-medium.woff");
 }
diff --git a/index.html b/index.html
index 416b760..95cd0c7 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,8 @@
     <script src="./src/index.js" type="module"></script>
   </head>
   <body>
-    <section class="section-one">
+    <div class="container">
+      <section class="section-one">
       <div class="container-one">
         <svg viewBox="0 0 567.3 475.8">
           <style type="text/css">
@@ -100,10 +101,10 @@
           id="line"
         />
       </div>
-    </section>
-    <section class="section-two">
+      </section>
+      <section class="section-two">
       <div class="part-one">
-        <h2>Design <span>your Journey</span></h2>
+        <h1>Design <span style="color: black">your Journey<span style="color: #C7B2DE">.</span></span></h1>
         <p> 34 rue du commandant René Mouchotte <br/>
             de 14h à 16h <br/>
             <SiMetrodeparis /><span> Montparnasse Bienvenue</span>
@@ -118,8 +119,8 @@ <h2>Le lieu</h2>
           class="logo-place"
         />
       </div>
-    </section>
-    <section class="section-three">
+      </section>
+      <section class="section-three">
       <div>
         <h2>Les conférences</h2>
           <p style="color: black">
@@ -147,8 +148,8 @@ <h2>Les conférences</h2>
           <b>Loïc Hamelin</b> - Directeur du programme OSRD
         </p>
       </div>
-    </section>
-    <section class="section-four">
+      </section>
+      <section class="section-four">
       <div class="container-four">
         <div>
           <h2>La suite</h2>
@@ -166,8 +167,7 @@ <h2>La suite</h2>
           </a>
         </div>
       </div>
-    </section>
-    <div>
+      </section>
       <div class="footer">
         <div>
           <img
@@ -179,7 +179,6 @@ <h2>La suite</h2>
             alt="logo-ue"
           />
         </div>
-
         <div>
           <img
             src="/public/assets/logos/OSRD-kickoff-programme-logo-SNCF.svg"
diff --git a/public/fonts/Avenir/avenir-black.woff b/public/fonts/Avenir/avenir-black.woff
new file mode 100644
index 0000000..db1de71
Binary files /dev/null and b/public/fonts/Avenir/avenir-black.woff differ
diff --git a/public/fonts/Avenir/avenir-book.woff b/public/fonts/Avenir/avenir-book.woff
new file mode 100644
index 0000000..c2f1e82
Binary files /dev/null and b/public/fonts/Avenir/avenir-book.woff differ
diff --git a/public/fonts/Avenir/avenir-lighter.woff b/public/fonts/Avenir/avenir-lighter.woff
new file mode 100644
index 0000000..c75042f
Binary files /dev/null and b/public/fonts/Avenir/avenir-lighter.woff differ
diff --git a/public/fonts/Avenir/avenir-medium.woff b/public/fonts/Avenir/avenir-medium.woff
new file mode 100644
index 0000000..5dcebc2
Binary files /dev/null and b/public/fonts/Avenir/avenir-medium.woff differ