diff --git a/landing_page/dist/choose-map.html b/landing_page/dist/choose-map.html
new file mode 100644
index 00000000..bf8ac50d
--- /dev/null
+++ b/landing_page/dist/choose-map.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <title>Choose map - WorkAdventu.re</title>
+
+    <link rel="stylesheet" href="main.css">
+    <script src="bundle.js"></script>
+</head>
+
+<body class="choose-map">
+    <div class="container-fluid container-lg section pt-5">
+        <h1 class="text-center pixel-title">CHOOSE YOUR MAP !</h1>
+        <div class="row no-gutters">
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_1">
+                    <img src="static/images/step 1.png">
+                    <p>Back to class</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_2">
+                    <img src="static/images/step 1.png">
+                    <p>Back to class</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_3">
+                    <img src="static/images/step 1.png">
+                    <p>Back to class</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_4">
+                    <img src="static/images/step 1.png">
+                    <p>Back to class</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_5">
+                    <img src="static/images/step 1.png">
+                    <p>Back to class</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_6">
+                    <img src="static/images/step 1.png">
+                    <p>Back to class</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container-fluid container-lg section text-center" id="map-link-container" style="display: none;">
+        <h1 class="mb-3">YOUR MAP URL IS</h1>
+        <p id="wa-link" class="mb-5"></p>
+        <div class="row align-items-center justify-content-center">
+            <div class="col-sm-8 text-right mb-4 pb-sm-0">
+                <button class="copy-btn" onclick="copyToClipboard()">COPY MAP <small>URL TO CLIPBOARD</small></button>
+            </div>
+            <div class="col-sm-4 text-center text-sm-left">
+                <span id="new-url">to share it !</span>
+                <span id="url-copied" style="display: none">done !</span>
+            </div>
+        </div>
+        <div class="row start-area justify-content-center mt-5">
+            <div class="col-12 col-sm-1 d-none d-sm-block">
+                <img src="static/images/female-character.gif">
+            </div>
+            <div class="col-12 col-sm-4 mb-3 mb-sm-0">
+                <button id="start-btn" onclick="play()">START <span>&gt;&gt;</span></button>
+            </div>
+            <div class="col-12 col-sm-1">
+                <img src="static/images/male-character.gif">
+            </div>
+        </div>
+    </div>
+<script>
+    var rand           = '';
+    var characters       = 'abcdefghijklmnopqrstuvwxyz';
+    var charactersLength = characters.length;
+    for ( var i = 0; i < 9; i++ ) {
+        rand += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    var id = rand.slice(0,3) + '-' + rand.slice(3,6) + '-' + rand.slice(6);
+    var mapLink = document.getElementById('wa-link');
+    var mapLinkContainer = document.getElementById('map-link-container');
+
+    function setSelectedMap(element){
+        var items = document.querySelectorAll(".map-item");
+        [].forEach.call(items, function(el) {
+            el.classList.remove("active");
+        });
+        element.classList.add("active");
+        mapLink.innerText = window.location.protocol + "//play."+window.location.host + "/_/" + id + "/" + element.dataset.url;
+        mapLinkContainer.style.display = 'block';
+        document.getElementById('new-url').style.display = 'inline';
+        document.getElementById('url-copied').style.display = 'none';
+
+        mapLinkContainer.scrollIntoView({
+            block: "start",
+            inline: "nearest",
+            behavior: "smooth"
+        })
+    }
+
+    function copyToClipboard() {
+        var aux = document.createElement("input");
+        aux.setAttribute("value", mapLink.innerHTML);
+        document.body.appendChild(aux);
+        aux.select();
+        document.execCommand("copy");
+        document.body.removeChild(aux);
+
+        document.getElementById('new-url').style.display = 'none';
+        document.getElementById('url-copied').style.display = 'inline';
+    }
+
+    function play(){
+        window.location.assign(mapLink.innerText);
+    }
+
+    (function() {
+        document.addEventListener('click', function (event) {
+            // If the clicked element doesn't have the right selector, bail
+            var mapItem = event.target.closest('.map-item');
+            if (mapItem === null) {
+                return;
+            }
+            // Don't follow the link
+            event.preventDefault();
+            setSelectedMap(mapItem);
+        }, false);
+    })();
+</script>
+</body>
+
+</html>
diff --git a/landing_page/dist/static/images/female-character.gif b/landing_page/dist/static/images/female-character.gif
new file mode 100644
index 00000000..a9d7b998
Binary files /dev/null and b/landing_page/dist/static/images/female-character.gif differ
diff --git a/landing_page/dist/static/images/male-character.gif b/landing_page/dist/static/images/male-character.gif
new file mode 100644
index 00000000..d8b0c0fe
Binary files /dev/null and b/landing_page/dist/static/images/male-character.gif differ
diff --git a/landing_page/src/images/btn-bg-bw.png b/landing_page/src/images/btn-bg-bw.png
new file mode 100644
index 00000000..f007b749
Binary files /dev/null and b/landing_page/src/images/btn-bg-bw.png differ
diff --git a/landing_page/src/javascript/index.js b/landing_page/src/javascript/index.js
index 162db0e7..cc5cd7ef 100644
--- a/landing_page/src/javascript/index.js
+++ b/landing_page/src/javascript/index.js
@@ -1,4 +1 @@
-import '../sass/styles.scss';
-
-console.log('Webpack Boilerplate');
-
+import '../sass/styles.scss';
\ No newline at end of file
diff --git a/landing_page/src/sass/_choose-map.scss b/landing_page/src/sass/_choose-map.scss
new file mode 100644
index 00000000..a26d8980
--- /dev/null
+++ b/landing_page/src/sass/_choose-map.scss
@@ -0,0 +1,62 @@
+body.choose-map{
+
+  .map-item{
+    cursor: pointer;
+    margin: 1rem 0.5rem;
+    padding: 1rem;
+    text-align: center;
+    border: 3px transparent solid;
+
+    &.active{
+      border-color: #FFFFFF;
+    }
+
+    p{
+      margin: 0;
+    }
+  }
+
+  #wa-link{
+    text-decoration: underline;
+  }
+
+  .copy-btn{
+    font-family: "Karmatic Arcade";
+    font-size: 30px;
+    border: 4px solid #ffffff;
+    width: auto;
+    box-shadow: 4px 4px white;
+    padding: 1rem;
+    background: #000000;
+    color: white;
+    margin-right: 10px;
+    &:focus{
+      outline: none;
+    }
+
+    small{
+      font-size: 16px;
+    }
+  }
+
+  .start-area{
+    img{
+      min-height: 70px;
+    }
+
+    #start-btn{
+      background-color: transparent;
+      border: none;
+      color: #ffffff;
+      border-bottom: 8px solid white;
+      animation: blinker 1s alternate infinite;
+      font-size: 50px;
+    }
+
+    @keyframes blinker {
+      50% {
+        opacity: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/landing_page/src/sass/styles.scss b/landing_page/src/sass/styles.scss
index b76eb127..4f230626 100644
--- a/landing_page/src/sass/styles.scss
+++ b/landing_page/src/sass/styles.scss
@@ -1,5 +1,6 @@
 @import "custom";
 @import "~bootstrap/scss/bootstrap";
+@import "_choose-map";
 
 @font-face {
     font-family: OpenSans;
@@ -279,3 +280,6 @@ img{
     }
 }
 
+.pixel-title{
+    font-family: "Karmatic Arcade" !important;
+}
\ No newline at end of file
