diff --git a/assets/js/user.utils.js b/assets/js/user.utils.js
index fcbfebbb..9f4aff0e 100644
--- a/assets/js/user.utils.js
+++ b/assets/js/user.utils.js
@@ -2,7 +2,7 @@
 * @Author: prpr
 * @Date:   2016-01-21 13:56:40
 * @Last Modified by:   prpr
-* @Last Modified time: 2016-02-05 15:35:02
+* @Last Modified time: 2016-02-05 18:34:01
 */
 
 'use strict';
@@ -73,6 +73,13 @@ function show2dPreview() {
     $("#skinpreview").html($('<p>Skin for Steve model:</p>').append($('<img />').css('float', 'right').attr('src', '../skin/'+docCookies.getItem('uname')+'-steve.png')));
     $("#skinpreview").append($('<p>Skin for Alex model:</p>').append($('<img />').css('float', 'right').attr('src', '../skin/'+docCookies.getItem('uname')+'-alex.png')));
     $("#skinpreview").append($('<p>Cape:</p>').append($('<img />').css('float', 'right').attr('src', '../cape/'+docCookies.getItem('uname')+'.png')));
+    $('#preview').html('3D Preview').attr('href', 'javascript:show3dPreview();');
+}
+
+function show3dPreview() {
+    $('#skinpreview').html('');
+    init3dCanvas()
+    $('#preview').html('2D Preview').attr('href', 'javascript:show2dPreview();');
 }
 
 $("#upload").click(function(){
diff --git a/user/index.php b/user/index.php
index 3dffdd19..9402ebfd 100644
--- a/user/index.php
+++ b/user/index.php
@@ -76,7 +76,7 @@ if (isset($_SESSION['uname'])) {
                         <input type="radio" id="model-alex" name="model" /><label for="model-alex">My skin fits on the new Alex player model.</label>
                         <br /><br />
                         <button id="upload" class="pure-button pure-button-primary">Upload</button>
-                        <a href="javascript:show2dPreview();" class="pure-button">2D Preview</a>
+                        <a id="preview" href="javascript:show2dPreview();" class="pure-button">2D Preview</a>
                     </div>
                     <div id="msg" class="alert hide" role="alert"></div>
                 </div>