diff --git a/mind-ar/index.html b/mind-ar/index.html
index f96ca9fb1d16c3c21d3fc66de7075ad62ecd5b3b..0a9cba5d8710b43740b03e1be1b77a0c05577154 100644
--- a/mind-ar/index.html
+++ b/mind-ar/index.html
@@ -4,40 +4,100 @@
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image.prod.js"></script>
     <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image-aframe.prod.js"></script>
+    <style>
+      body {
+        font-family: system-ui;
+        margin: 0;
+        height: 100svh;
+        width: 100svw;
+      }
+
+      .ar-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 30px 20px;
+        border: none;
+        background: #ff2849;
+        border-radius: 20px;
+        cursor: pointer;
+        position: absolute;
+        width: 250px;
+        bottom: 50px;
+        left: calc((100svw / 2) - (290px / 2));
+      }
+
+      .label {
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+        font-family: sans-serif;
+        letter-spacing: 1px;
+      }
+
+      .description {
+        position: absolute;
+        top: 50px;
+        font-size: 25px;
+        text-align: center;
+      }
+    </style>
   </head>
   <body>
-    <a-scene
-      mindar-image="imageTargetSrc: ./targets.mind;"
-      vr-mode-ui="enabled: false"
-      device-orientation-permission-ui="enabled: false"
-    >
-      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
-      <a-assets>
-        <img
-          id="card"
-          src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/card.png"
-        />
-        <a-asset-item
-          id="avatarModel"
-          src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/softmind/scene.gltf"
-        ></a-asset-item>
-      </a-assets>
-      <a-entity mindar-image-target="targetIndex: 0">
-        <a-plane
-          src="#card"
-          position="0 0 0"
-          height="0.552"
-          width="1"
-          rotation="0 0 0"
-        ></a-plane>
-        <a-gltf-model
-          rotation="0 0 0 "
-          position="0 0 0.1"
-          scale="0.005 0.005 0.005"
-          src="#avatarModel"
-          animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
-        ></a-gltf-model>
-      </a-entity>
-    </a-scene>
+    <template id="ar-scene-template">
+      <a-scene
+        id="ar-scene"
+        mindar-image="imageTargetSrc: ./targets.mind;"
+        vr-mode-ui="enabled: false"
+        device-orientation-permission-ui="enabled: false"
+      >
+        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
+        <a-assets>
+          <img
+            id="card"
+            src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/card.png"
+          />
+          <a-asset-item
+            id="avatarModel"
+            src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/softmind/scene.gltf"
+          ></a-asset-item>
+        </a-assets>
+        <a-entity mindar-image-target="targetIndex: 0">
+          <a-plane
+            src="#card"
+            position="0 0 0"
+            height="0.552"
+            width="1"
+            rotation="0 0 0"
+          ></a-plane>
+          <a-gltf-model
+            rotation="0 0 0 "
+            position="0 0 0.1"
+            scale="0.005 0.005 0.005"
+            src="#avatarModel"
+            animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
+          ></a-gltf-model>
+        </a-entity>
+      </a-scene>
+    </template>
+    <div class="container" id="welcome-page">
+      <div class="description">
+        <div>Bienvenue à l&apos;exposition "Hoelympique" !</div>
+        <div>Pour démarrer, cliquez sur le bouton "Démarrer l&apos;expérience !"</div>
+      </div>
+      <div class="ar-button">
+        <span class="label">Démarrer l'expérience !</span>
+      </div>
+    </div>
   </body>
+  <footer>
+    <script>
+      const button = document.querySelector(".ar-button");
+      button.addEventListener("click", () => {
+        const template = document.getElementById("ar-scene-template");
+        document.querySelector("body").appendChild(template.content.cloneNode(true));
+        document.querySelector("#welcome-page").remove();
+      })
+    </script>
+  </footer>
 </html>