diff --git a/landing_page/dist/index.html b/landing_page/dist/index.html
index 8f935d33..0402b1ea 100644
--- a/landing_page/dist/index.html
+++ b/landing_page/dist/index.html
@@ -23,67 +23,79 @@
                     <img src="static/images/logo.png">
                 </div>
                 <div class="title text-center">
-                    <h1>Discover a pixelated new world !</h1>
-                    <h2>Start a casual conversation</h2>
+                    <h1>Your workplace<br/>but better</h1>
+                    <h2>Discover a pixelated new world !</h2>
+                    <h3>Start a casual conversation</h3>
                 </div>
-                <div>
-                    <a class="custom-link start" href="#" title="START !" onclick="startGame()">
-                    </a>
+                <div class="row justify-content-md-center pt-5" style="margin-top: 100px;">
+                    <div class="col col-lg-3">
+                        <a class="custom-link contribute" href="#" title="CONTRIBUTE !">CONTRIBUTE
+                        </a>
+                    </div>
+                    <div class="col col-lg-3">
+                        <a class="custom-link start" href="#" title="START !" onclick="startGame()">
+                            START !
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
     </header>
-    <div class="container-fluid container-lg section bg-white how-to">
-        <div class="row justify-content-md-center">
-            <div class="col-12 col-md-3 text-center my-3 my-md-0">
-                <div class="image-item">
-                    <img src="static/images/bitmap.png">
-                    <h2>Choose your map</h2>
+    <div class="section bg-white how-to">
+        <div class="container-fluid container-lg">
+            <div class="row justify-content-md-center">
+                <div class="col-12 col-md-4 text-center my-3 my-md-0">
+                    <div class="image-item">
+                        <h2>Choose your map</h2>
+                        <div class="step-image"><img src="static/images/Bitmap3.png"></div>
+                    </div>
                 </div>
-            </div>
-            <div class="col-12 col-md-3 text-center my-3 my-md-0">
-                <div class="image-item">
-                    <img src="static/images/bitmap.png">
-                    <h2>Select your character</h2>
+                <div class="col-12 col-md-4 text-center my-3 my-md-0">
+                    <div class="image-item">
+                        <h2>Select your character</h2>
+                        <div class="step-image"><img src="static/images/Bitmap2.png"></div>
+                    </div>
                 </div>
-            </div>
-            <div class="col-12 col-md-3 text-center my-3 my-md-0">
-                <div class="image-item">
-                    <img src="static/images/bitmap.png">
-                    <h2>Let's go explore and talk&nbsp;!</h2>
+                <div class="col-12 col-md-4 text-center my-3 my-md-0">
+                    <div class="image-item">
+                        <h2>Let's go explore and talk&nbsp;!</h2>
+                        <div class="step-image"><img src="static/images/bitmap.png"></div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="row justify-content-md-center pt-5">
-            <div class="col col-lg-3">
-                <a class="custom-link light demo" href="#" title="DEMO !" onclick="startGame()">
-                </a>
-            </div>
-            <div class="col col-lg-3">
-                <a class="custom-link start" href="#" title="START !" onclick="startGame()">
-                </a>
-            </div>
-        </div>
     </div>
-
-    <div class="container-fluid container-lg bg-gray section used-by">
-        <h2 class="text-center pb-4">Used by millions of people worldwilde and companies such as :</h2>
-        <div class="row justify-content-md-center align-items-center">
-            <div class="col col-md-auto">
-                <img src="static/images/atari.png">
-            </div>
-            <div class="col col-md-auto">
-                <img src="static/images/super-nintendo.png">
-            </div>
-            <div class="col col-md-auto">
-                <img src="static/images/amstrad.png">
-            </div>
-            <div class="col col-md-auto">
-                <img src="static/images/sinclair-2.png">
+    <div class="section bg-white">
+        <div class="container-fluid container-lg">
+            <div class="col-12 credits">
+                <h2>Credits</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <p>Sed ultrices finibus lacus a scelerisque. Mauris non tellus blandit, pulvinar ipsum ac, bibendum ligula. Ut enim est, posuere sit amet nunc nec, vestibulum iaculis est. Cras nec nunc tempor, ultricies felis eget, elementum augue. Nam id gravida erat. Cras vel ligula hendrerit, euismod nulla vestibulum, vulputate tortor. Mauris convallis cursus leo, vitae consectetur magna mollis at.</p>
+                <p>
+                    Donec cursus mauris mi, non porttitor neque auctor eget. Pellentesque mi orci, imperdiet vitae malesuada at, sollicitudin vitae justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris et cursus enim. Cras viverra lorem in sem hendrerit tempus. Praesent dignissim volutpat lorem, id dapibus turpis placerat eget.
+                </p>
             </div>
         </div>
     </div>
-
+    <div class="bg-gray section used-by">
+        <div class="container-fluid container-lg">
+            <h2 class="text-center pb-4">Used by millions of people worldwilde and companies such as :</h2>
+            <div class="row justify-content-md-center align-items-center">
+                <div class="col col-md-auto">
+                    <img src="static/images/atari.png">
+                </div>
+                <div class="col col-md-auto">
+                    <img src="static/images/super-nintendo.png">
+                </div>
+                <div class="col col-md-auto">
+                    <img src="static/images/amstrad.png">
+                </div>
+                <div class="col col-md-auto">
+                    <img src="static/images/sinclair-2.png">
+                </div>
+            </div>
+        </div>
+        </div>
     <div class="container-fluid container-lg section quotes">
         <h2 class="text-center">People love WorkAdventure</h2>
         <div class="row justify-content-center">
@@ -103,7 +115,11 @@
             </div>
 
         </div>
-
+    </div>
+    <div class="section bg-white footer">
+        <div class="container-fluid container-lg">
+            <img src="static/images/Logo TCM.png">
+        </div>
     </div>
 </body>
 
diff --git a/landing_page/dist/static/images/Bitmap2.png b/landing_page/dist/static/images/Bitmap2.png
new file mode 100644
index 00000000..3e5bd3ff
Binary files /dev/null and b/landing_page/dist/static/images/Bitmap2.png differ
diff --git a/landing_page/dist/static/images/Bitmap3.png b/landing_page/dist/static/images/Bitmap3.png
new file mode 100644
index 00000000..269b839f
Binary files /dev/null and b/landing_page/dist/static/images/Bitmap3.png differ
diff --git a/landing_page/dist/static/images/Logo TCM.png b/landing_page/dist/static/images/Logo TCM.png
new file mode 100644
index 00000000..bf4881b1
Binary files /dev/null and b/landing_page/dist/static/images/Logo TCM.png differ
diff --git a/landing_page/dist/static/images/logo.png b/landing_page/dist/static/images/logo.png
index 71072db3..f4440ad5 100644
Binary files a/landing_page/dist/static/images/logo.png and b/landing_page/dist/static/images/logo.png differ
diff --git a/landing_page/src/fonts/VCR_OSD.ttf b/landing_page/src/fonts/VCR_OSD.ttf
new file mode 100644
index 00000000..dcca687a
Binary files /dev/null and b/landing_page/src/fonts/VCR_OSD.ttf differ
diff --git a/landing_page/src/fonts/ka1.ttf b/landing_page/src/fonts/ka1.ttf
new file mode 100644
index 00000000..d1df8523
Binary files /dev/null and b/landing_page/src/fonts/ka1.ttf differ
diff --git a/landing_page/src/images/btn-bg-2.png b/landing_page/src/images/btn-bg-2.png
new file mode 100644
index 00000000..b70ddb59
Binary files /dev/null and b/landing_page/src/images/btn-bg-2.png differ
diff --git a/landing_page/src/images/btn-bg.png b/landing_page/src/images/btn-bg.png
index df446d30..8713f389 100644
Binary files a/landing_page/src/images/btn-bg.png and b/landing_page/src/images/btn-bg.png differ
diff --git a/landing_page/src/images/header.png b/landing_page/src/images/header.png
index 5085f6c9..58c1eb73 100644
Binary files a/landing_page/src/images/header.png and b/landing_page/src/images/header.png differ
diff --git a/landing_page/src/sass/styles.scss b/landing_page/src/sass/styles.scss
index 29a1d638..4522533f 100644
--- a/landing_page/src/sass/styles.scss
+++ b/landing_page/src/sass/styles.scss
@@ -12,12 +12,21 @@
     font-weight: normal;
     src: local('04b03'), url('../fonts/04B_03.woff') format('woff');
 }
+@font-face {
+    font-family: 'Karmatic Arcade';
+    src: url('../fonts/ka1.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'VCR OSD Mono';
+    src: url('../fonts/VCR_OSD.ttf') format('truetype');
+}
 
 header {
-    background: url("../images/header.png") no-repeat;
+    background: #28A7FC url("../images/header.png") no-repeat bottom;
     background-size: 100%;
-    height: 28rem;
-
+    height: 37rem;
+    background-attachment: fixed;
+    background-position: 0px 67%;
     .section{
         position: relative;
     }
@@ -28,38 +37,71 @@ header {
         top: 0;
         left: 0;
         right: 0;
-
+        height: 33rem;
         .logo{
             margin: 1rem 0;
         }
 
         .title {
             padding: 5rem 0;
+            color: black;
+            h1 {
+                font-family: 'Karmatic Arcade';
+                font-size: 44px;
+                margin-bottom: 20px;
+            }
         }
     }
 
 }
 .custom-link{
+    font-family: "VCR OSD Mono";
+    font-size: 18px;
+    letter-spacing: 3,75;
+    color: white;
     display: block;
     margin: 0 auto;
     width: 250px;
-    height: 80px;
+    height: 64px;
     background-image: url('../images/btn-bg.png');
     background-repeat: no-repeat;
     background-size: 100%;
-    position: relative;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -24px;
+    padding: 20px;
+    text-align: center;
+    transition: all 0.5s ease;
+    -webkit-transition: all 500ms cubic-bezier(0.000, 0, 1.000, 1); /* older webkit */
+    -webkit-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650);
+    -moz-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650);
+    -o-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650);
+    transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
 
+    -webkit-transition-timing-function: cubic-bezier(0.000, 0, 1.000, 1); /* older webkit */
+    -webkit-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650);
+    -moz-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650);
+    -o-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650);
+    transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
+    &:hover {
+        transform: scale(1.1);
+        color: white;
+    }
+    &.contribute {
+        background-image: url('../images/btn-bg-2.png');
+    }
     &.light{
         background-image: url('../images/btn-bg-light.png');
     }
 
-    &::after{
+    /*&::after{
         content: "";
         position: absolute;
         background-size: 60%;
         width: 100%;
         height: 100%;
-    }
+    }*/
 
     &.start::after{
         background: url("../images/start.png") no-repeat center center;
@@ -80,6 +122,20 @@ img{
 .bg-gray{
     background-color: #3b3b3b !important;
 }
+.credits {
+    text-align: center;
+    h2{
+        padding: 1rem 0;
+        margin: 0;
+        min-height: 6rem;
+        font-family: 'Karmatic Arcade';
+        font-size: 34px;
+        margin-bottom: 20px;
+    }
+    p {
+
+    }
+}
 .section{
     padding-top: 2rem;
     padding-bottom: 5rem;
@@ -91,16 +147,35 @@ img{
     }
 
     &.how-to{
+        padding: 175px 0;
         .image-item{
             height: 100%;
-            max-width: 300px;
             margin: 0 auto;
-            background-color: #f9dcb0;
-            padding: 1rem;
-
+            padding: 20px;
+            .step-image {
+                position: relative;
+                &:after {
+                    content:"";
+                    height: 100%;
+                    width: 100%;
+                    background: #dcdcdc;
+                    position: absolute;
+                    bottom: -25px;
+                    left: 25px;
+                }
+                img {
+                    width: 100%;
+                    z-index: 2;
+                    position: relative;
+                }
+            }
             h2{
                 padding: 1rem 0;
                 margin: 0;
+                min-height: 6rem;
+                font-family: 'Karmatic Arcade';
+                font-size: 22px;
+                margin-bottom: 20px;
             }
         }
     }