diff --git a/assets/img/tutorial2d.png b/assets/img/tutorial2d.png
new file mode 100644
index 0000000..f96360c
Binary files /dev/null and b/assets/img/tutorial2d.png differ
diff --git a/src/components/tutorial-2d.js b/src/components/tutorial-2d.js
new file mode 100644
index 0000000..eb467ac
--- /dev/null
+++ b/src/components/tutorial-2d.js
@@ -0,0 +1,5 @@
+AFRAME.registerComponent('tutorial-2d', {
+  play: function () {
+    document.getElementById('tutorial2d').style.display = 'none';
+  }
+});
diff --git a/src/index.css b/src/index.css
index aa82144..079debc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -45,3 +45,17 @@ html {
   50% { opacity: 0.8; }
   100% { opacity: 1; }
 }
+
+#tutorial2d {
+  position: absolute;
+  width: 60%;
+  left: 20%;
+  top: 35%;
+}
+
+@media (max-width: 1280px) {
+  #tutorial2d {
+    width: 80%;
+    left: 10%;
+  }
+}
diff --git a/src/index.html b/src/index.html
index 3b53a75..69de624 100644
--- a/src/index.html
+++ b/src/index.html
@@ -46,7 +46,8 @@
       search
       stage-colors="color: blue"
       fog="color: #a00; density: 0.035; type: exponential"
-      vr-mode-ui="enterVRButton: #vrButton">
+      vr-mode-ui="enterVRButton: #vrButton"
+      tutorial-2d>
 
       <a-assets timeout="10000">
         {% include './assets.html' %}
@@ -208,6 +209,7 @@
       {% endif %}
     </a-scene>
 
+    <img src="assets/img/tutorial2d.png" id="tutorial2d">
     <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
   </body>
 </html>