diff --git a/public/assets/flyer-background-mobile.png b/public/assets/flyer-background-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c2c87f46d84a24e1c2da3c1619be09f522a73d7
Binary files /dev/null and b/public/assets/flyer-background-mobile.png differ
diff --git a/public/assets/flyer-background.png b/public/assets/flyer-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..42ec40abd9016df12f43641cc31061e655f8f82b
Binary files /dev/null and b/public/assets/flyer-background.png differ
diff --git a/public/assets/flyerEcolyoWeb2023.pdf b/public/assets/flyerEcolyoWeb2023.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..2228a9a87455459e01b4269e4a120faa0b220855
Binary files /dev/null and b/public/assets/flyerEcolyoWeb2023.pdf differ
diff --git a/public/index.html b/public/index.html
index 184a58ba3157db144cb78f532fe795364cd394e2..f6fc9d54424fda9bfef70f46f5780d1a7b934476 100644
--- a/public/index.html
+++ b/public/index.html
@@ -317,6 +317,23 @@
         </a>
       </div>
     </section>
+    <section class="flyer">
+      <div class="background"></div>
+      <div class="content">
+        <h2>Envie de parler d’Ecolyo autour de vous ?</h2>
+        <p>
+          N’hésitez pas à parler d’Ecolyo à vos proches en téléchargeant le
+          flyer. <br />Il vous suffit de cliquer sur le bouton juste en dessous
+          !
+        </p>
+        <a
+          href="assets/flyerEcolyoWeb2023.pdf"
+          download="flyerEcolyoWeb2023.pdf"
+          class="button robots-nocontent"
+          >Télécharger le flyer</a
+        >
+      </div>
+    </section>
     <footer>
       <div class="logos-footer">
         <img class="gl" src="assets/legal/mglLogo.svg" alt="logo grandlyon" />
@@ -358,16 +375,16 @@
     </footer>
   </body>
   <script>
-    const navBar = document.querySelector('nav');
+    const navBar = document.querySelector("nav");
     //smooth scroll
     document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-      anchor.addEventListener('click', function (e) {
+      anchor.addEventListener("click", function (e) {
         e.preventDefault();
-        let item = document.querySelector(this.getAttribute('href'));
+        let item = document.querySelector(this.getAttribute("href"));
 
         window.scrollTo({
           top: item.offsetTop - 50,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       });
     });
@@ -376,7 +393,7 @@
     let scrollUp = true;
     let hideDistance = 200;
 
-    let headerHeight = '6.25rem';
+    let headerHeight = "6.25rem";
     let vw;
     let vh;
     let scrollHeightSent = false;
@@ -399,23 +416,23 @@
     };
 
     onload = setDeviceWidth();
-    window.addEventListener('resize', () => {
+    window.addEventListener("resize", () => {
       setDeviceWidth();
     });
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       setDeviceHeight();
     });
 
-    window.addEventListener('scroll', (event) => {
+    window.addEventListener("scroll", (event) => {
       if (vw < 1200) {
         if (scrollY > hideDistance) {
           scrollUp = this.oldScroll > this.scrollY;
           if (scrollUp === false) {
-            navBar.style.marginTop = '-' + headerHeight;
+            navBar.style.marginTop = "-" + headerHeight;
           }
           if (scrollUp === true) {
-            navBar.style.marginTop = '0';
+            navBar.style.marginTop = "0";
           }
           this.oldScroll = this.scrollY;
         }
@@ -424,7 +441,7 @@
       // Send scroll event to matomo if user has scrolled 50% of page, then disable event
       if (scrollY > vh / 2 && !scrollHeightSent) {
         scrollHeightSent = true;
-        _paq.push(['trackEvent', 'Scroll_depth', '50%']);
+        _paq.push(["trackEvent", "Scroll_depth", "50%"]);
       }
     });
   </script>
diff --git a/scss/index.scss b/scss/index.scss
index 85064c865fb201b9d76e606bec4be2d34609e4db..3b6fb594839e5a166e5b11e50b91f00c4f63a737 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -1,5 +1,5 @@
-@import './variables';
-@import './globals';
+@import "./variables";
+@import "./globals";
 
 .gaz-color {
   color: $gaz-color;
@@ -246,13 +246,13 @@ nav {
   position: relative;
   &:before,
   &::after {
-    content: '';
+    content: "";
     display: inline-block;
     position: absolute;
     width: 100%;
     height: 10px;
     left: 0;
-    background-image: url('assets/pattern-dot.svg');
+    background-image: url("assets/pattern-dot.svg");
     background-color: $dark-yellow;
     background-repeat: repeat-x;
     background-position: center;
@@ -355,7 +355,7 @@ nav {
         position: relative;
         &:before,
         &:after {
-          content: '';
+          content: "";
           display: inline-block;
           height: 100px;
           width: 1px;
@@ -392,6 +392,9 @@ nav {
         }
       }
       &.challenge {
+        span {
+          color: $light-blue;
+        }
         @media (min-width: $breakpoint) {
           margin-top: -4rem;
         }
@@ -409,11 +412,6 @@ nav {
           color: $elec-color;
         }
       }
-      &.challenge {
-        span {
-          color: $light-blue;
-        }
-      }
       &.ecogesture {
         @media (min-width: $breakpoint) {
           margin-left: -5.5rem;
@@ -441,15 +439,20 @@ nav {
 
 .create-account {
   background-color: $black;
-  padding: 2.5rem 0;
+  padding: 2.5rem 1rem;
 
   h2 {
     font-size: 2.25rem;
+    font-weight: 700;
     text-align: center;
+    @media (max-width: $large-device) {
+      font-weight: 900;
+      font-size: 1.85rem;
+    }
   }
 
   .containerSteps {
-    padding: 2rem 1rem 3rem;
+    padding: 2rem 0;
     max-width: 1000px;
     margin: auto;
     .step {
@@ -479,6 +482,8 @@ nav {
       }
     }
     .content {
+      font-size: 1.2rem;
+      font-weight: 400;
       @media all and (max-width: $large-device) {
         font-size: 1rem;
       }
@@ -491,10 +496,6 @@ nav {
         font-size: 1.2rem;
       }
     }
-    .content {
-      font-size: 1.2rem;
-      font-weight: 400;
-    }
   }
   .createAccountButton {
     @include button($black, $yellow);
@@ -553,6 +554,69 @@ nav {
   }
 }
 
+.flyer {
+  position: relative;
+
+  .background {
+    height: 400px;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+        270deg,
+        #121212 67.5%,
+        rgba(18, 18, 18, 0) 100%
+      ),
+      url("assets/flyer-background.png");
+    @media (max-width: $breakpoint) {
+      height: 300px;
+      background-image: linear-gradient(
+          316deg,
+          #121212 47.44%,
+          rgba(18, 18, 18, 0.6) 100%
+        ),
+        url("assets/flyer-background-mobile.png");
+      filter: blur(4px);
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 2rem 1rem;
+    justify-content: space-around;
+    h2 {
+      font-size: 1.75rem;
+      font-weight: 900;
+      margin: 0;
+    }
+    p {
+      line-height: 120%;
+      margin: 0;
+    }
+    .button {
+      @include button($black, $yellow);
+      margin: 0;
+      font-size: 1.5rem;
+      text-align: center;
+      justify-content: center;
+      font-weight: 700;
+      padding: 2rem 3rem;
+      border-radius: 4px;
+      background: radial-gradient(
+          105.25% 64.58% at 49.68% 70.83%,
+          rgba(226, 137, 4, 0.5) 0%,
+          rgba(255, 255, 255, 0) 100%
+        ),
+        $yellow;
+    }
+  }
+}
+
 footer {
   background-color: $black;
   display: flex;