diff --git a/pkg/emscripten/play.jpg b/pkg/emscripten/play.jpg
new file mode 100644
index 0000000000..1ddd9d012b
Binary files /dev/null and b/pkg/emscripten/play.jpg differ
diff --git a/pkg/emscripten/proto.css b/pkg/emscripten/proto.css
index de14a476fd..596017e3cd 100644
--- a/pkg/emscripten/proto.css
+++ b/pkg/emscripten/proto.css
@@ -11,6 +11,18 @@
   background-color: black;
 }
 
+/**
+ * Webplayer Preview when not loaded.
+ */
+.webplayer-preview {
+  cursor: wait;
+  opacity: 0.3;
+}
+.webplayer-preview.loaded {
+  cursor: pointer;
+  opacity: 1;
+}
+
 /**
  * Disable the border around the player.
  */
@@ -34,9 +46,9 @@ canvas.webplayer {
     to { -webkit-transform: rotate(360deg); }
 }
 
-textarea {
-    font-family: monospace;
-    font-size: 0.7em;
+textarea {
+    font-family: monospace;
+    font-size: 0.7em;
     height: 95%;
     width:  95%;
     border-style: none; 
diff --git a/pkg/emscripten/proto.html b/pkg/emscripten/proto.html
index 3cb54ae651..e240ff0899 100644
--- a/pkg/emscripten/proto.html
+++ b/pkg/emscripten/proto.html
@@ -97,8 +97,9 @@
    </nav>
    <div class="bg-inverse webplayer-container">
       <div class="container">
-         <div class="webplayer_border text-xs-center" id="canvas_div" style="display: none">
-            <canvas class="webplayer col-xs-12" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
+         <div class="webplayer_border text-xs-center" id="canvas_div">
+            <canvas class="webplayer col-xs-12" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" style="display: none"></canvas>
+            <img class="webplayer-preview img-fluid" src="play.jpg" width="900px" height="675px" alt="RetroArch Logo">
          </div>
       </div>
    </div>
diff --git a/pkg/emscripten/proto.js b/pkg/emscripten/proto.js
index 414cd6e64d..078aa10e7f 100644
--- a/pkg/emscripten/proto.js
+++ b/pkg/emscripten/proto.js
@@ -158,7 +158,8 @@ function stat(path)
 
 function startRetroArch()
 {
-   document.getElementById('canvas_div').style.display = 'block';
+   $('.webplayer').show();
+   $('.webplayer-preview').hide();
    document.getElementById('btnDrop').disabled = true;
    document.getElementById('btnRun').disabled = true;
   
@@ -300,6 +301,14 @@ $(function() {
    // Load the Core's related JavaScript.
    $.getScript(core + '_libretro.js', function () 
    {
+    /**
+     * Make the Preview image clickable to start RetroArch.
+     */
+    $('.webplayer-preview').addClass('loaded').click(function () {
+      startRetroArch();
+      return false;
+    });
+
     // Activate the Start RetroArch button.
     $('#btnRun').removeClass('disabled');
     $('#icnRun').removeClass('fa-spinner spinning');