diff --git a/Vocaluxe/Website/index.html b/Vocaluxe/Website/index.html
index 945e3e6d..67df92ef 100644
--- a/Vocaluxe/Website/index.html
+++ b/Vocaluxe/Website/index.html
@@ -10,6 +10,21 @@
     <script src="js/main.js"></script>
 </head>
 <body>
+    <div id="login" data-content-theme="a" data-role="page" data-add-back-btn="true">
+        <div data-role="header">
+            <h1>Login</h1>
+        </div>
+        <!-- /header -->
+
+        <div id="loginContent" data-role="content">
+            <label for="playerName" class="input">Id:</label>
+            <input type="text" id="playerId" name="playerId" data-mini="true">
+            <br />
+            <a data-role="button" id="loginButton">Login</a>
+        </div>
+        <!-- /content -->
+    </div>
+    <!-- /page -->
 
     <div id="main" data-role="page" data-content-theme="a">
         <div data-role="header">
@@ -20,7 +35,7 @@
         <div id="mainContent" data-role="content" data-add-back-btn="true">
             <ul data-role="listview">
                 <li>
-                    <a href="#displayProfile" data-transition="slidefade">
+                    <a id="yourProfileLink" href="#" data-transition="slidefade">
                         <img src="img/profile.png">
                         <h2>Your Profile</h2>
                         <p>Edit your profile</p>
@@ -73,7 +88,6 @@
     </div>
     <!-- /page -->
 
-
     <div id="displayProfile" data-content-theme="a" data-role="page" data-add-back-btn="true">
         <div data-role="header">
             <h1>Profile</h1>
@@ -150,7 +164,7 @@
     </div>
     <!-- /page -->
 
-    <div class="ui-loader-background"> </div>
+    <div class="ui-loader-background"></div>
 </body>
 </html>
 
diff --git a/Vocaluxe/Website/js/main.js b/Vocaluxe/Website/js/main.js
index 46ffb565..2178679d 100644
--- a/Vocaluxe/Website/js/main.js
+++ b/Vocaluxe/Website/js/main.js
@@ -6,6 +6,7 @@ $(document).ready(function () {
     initPageLoadHandler();
     initKeyboardPageHandler();
     initMainPageHandler();
+    initLoginPageHandler();
 });
 
 function replaceTransitionHandler() {
@@ -131,65 +132,21 @@ function initPageLoadHandler() {
 
 }
 
-function initKeyboardPageHandler() {
-    $('#keyboardButtonUp').click(function () {
-        $.ajax({
-            url: "sendKeyEvent=up"
-        })
-    });
-
-    $('#keyboardButtonDown').click(function () {
-        $.ajax({
-            url: "sendKeyEvent=down"
-        })
-    });
-
-    $('#keyboardButtonLeft').click(function () {
-        $.ajax({
-            url: "sendKeyEvent=left"
-        })
-    });
-
-    $('#keyboardButtonRight').click(function () {
-        $.ajax({
-            url: "sendKeyEvent=right"
-        })
-    });
-
-    $('#keyboardButtonEscape').click(function () {
-        $.ajax({
-            url: "sendKeyEvent=escape"
-        })
-    });
-
-    $('#keyboardButtonkeyboardButtonTab').click(function () {
-        $.ajax({
-            url: "sendKeyEvent=tab"
-        })
-    });
-
-    $('#keyboardButtonReturn').click(function () {
-        $.ajax({
-            url: "sendKeyEvent=return"
-        })
-    });
-
-    $('#keyboardButtonKeys').keyup(function (e) {
-        var c = String.fromCharCode(e.keyCode);
-        if (c.match(/\w/)) {
-            c = e.keyCode >= 65 ? c.toLowerCase() : c;
-            $.ajax({
-                url: "sendKeyEvent=" + c
-            })
-        }
-        var oldText = $('#keyboardButtonKeys')[0].value;
-        if (oldText.length > 0) {
-            $('#keyboardButtonKeys')[0].value = oldText.slice(1);
-        }
+function initLoginPageHandler() {
+    $('#loginButton').click(function () {
+        ownProfileId = parseInt($('#playerId').prop("value"));
+        if (ownProfileId != "NaN") {
+            $.mobile.changePage("#main", { transition: "slidefade" });
+        }        
     });
 }
 
 function initMainPageHandler() {
+    $('#yourProfileLink').click(function () {
+        profileIdRequest = ownProfileId;        
+        $.mobile.changePage("#displayProfile", { transition: "slidefade" });
+    });
+
     $('#mainPageTakePhotoLink').click(function () {
         if ($('#captureContainer').length > 0) {
             $('#captureContainer').remove();
@@ -230,4 +187,62 @@ function initMainPageHandler() {
 
         $('#capture').click();
     });
-}
\ No newline at end of file
+}
+
+function initKeyboardPageHandler() {
+    $('#keyboardButtonUp').click(function () {
+        $.ajax({
+            url: "sendKeyEvent?key=up"
+        })
+    });
+
+    $('#keyboardButtonDown').click(function () {
+        $.ajax({
+            url: "sendKeyEvent?key=down"
+        })
+    });
+
+    $('#keyboardButtonLeft').click(function () {
+        $.ajax({
+            url: "sendKeyEvent?key=left"
+        })
+    });
+
+    $('#keyboardButtonRight').click(function () {
+        $.ajax({
+            url: "sendKeyEvent?key=right"
+        })
+    });
+
+    $('#keyboardButtonEscape').click(function () {
+        $.ajax({
+            url: "sendKeyEvent?key=escape"
+        })
+    });
+
+    $('#keyboardButtonkeyboardButtonTab').click(function () {
+        $.ajax({
+            url: "sendKeyEvent?key=tab"
+        })
+    });
+
+    $('#keyboardButtonReturn').click(function () {
+        $.ajax({
+            url: "sendKeyEvent?key=return"
+        })
+    });
+
+    $('#keyboardButtonKeys').keyup(function (e) {
+        var c = String.fromCharCode(e.keyCode);
+        if (c.match(/\w/)) {
+            c = e.keyCode >= 65 ? c.toLowerCase() : c;
+            $.ajax({
+                url: "sendKeyEvent?key=" + c
+            })
+        }
+        var oldText = $('#keyboardButtonKeys')[0].value;
+        if (oldText.length > 0) {
+            $('#keyboardButtonKeys')[0].value = oldText.slice(1);
+        }
+    });
+}