diff --git a/public/index.html b/public/index.html
index aa05c8e..2b36c7d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,29 +17,34 @@
 		<canvas id="canvas"></canvas>
 		<div class="loading">
 			<div class="center">
-				<div><div class="pixel"></div></div>
+				<div>
+					<div class="pixel"></div>
+				</div>
 				<div class="text-loading">Loading...</div>
-				<div class='container start-level-button'>
-					<a href='#' class='playBut'>
 
-						<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In  -->
-						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-						 x="0px" y="0px" width="213.7px"
-							height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
-							xml:space="preserve">
+				<form id="form-username">
+					<label for="username">Username (max 10 characters):</label>
+					<input name="username" id="username" type="text" placeholder="Username..." required maxlength="10">
+					<div class='container start-level-button'>
+						<button type="submit" class='playBut'>
 
-							<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round"
-								stroke-linejoin="round" stroke-miterlimit="10" points="
+							<!-- SVG button from https://codepen.io/lukemeyrick/pen/qdxqwM/  -->
+							<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+								xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="213.7px"
+								height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
+								xml:space="preserve">
+
+								<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7"
+									stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
 						  73.5,62.5 148.5,105.8 73.5,149.1 " />
 
-							<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round"
-								stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3" />
-						</svg>
-
-
-
-					</a>
-				</div>
+								<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7"
+									stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8"
+									cy="106.8" r="103.3" />
+							</svg>
+						</button>
+					</div>
+				</form>
 			</div>
 		</div>
 	</main>
diff --git a/public/styles/main.css b/public/styles/main.css
index 68e759b..3b2a683 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -54,14 +54,15 @@ body {
     color: white;
 }
 
-div.start-level-button {
-    display: none;
+#form-username {
+    margin-top: 2vh;
+    color: white;
 }
 
 .container {
     width     : 100%;
     text-align: center;
-    margin-top: 10vh;
+    margin-top: 1vh;
 }
 
 .circle {
@@ -74,9 +75,11 @@ div.start-level-button {
 }
 
 .playBut {
+    background-color  : black;
     display           : inline-block;
     transition        : all 0.5s ease;
     -webkit-transition: all 0.5s ease;
+    border: 0;
 }
 
 .playBut .triangle {
diff --git a/src/GameLogic/gameField.js b/src/GameLogic/gameField.js
index bb2bf6a..0670cf5 100644
--- a/src/GameLogic/gameField.js
+++ b/src/GameLogic/gameField.js
@@ -37,6 +37,7 @@ export class GameField {
         this.collisionManager.setMainTank(this.tank);
 
         this.lastRequest = null;
+        this.name = null;
     }
 
     //add all tiles here!
@@ -101,17 +102,20 @@ export class GameField {
 
         $(".loading").show();
         $(".text-loading").show();
-        $(".start-level-button").hide();
+        $("#form-username").hide();
         await this.prepareGame(level);
         if (this.map == null) {
             this.prepareGame(1);
         }
         $(".text-loading").hide();
-        $(".start-level-button").show();
+        $("#form-username").show();
 
         if (firstTime) {
-            $(".start-level-button").on("click", () => {
+            $("#form-username").on("submit", (e) => {
+                e.preventDefault();
+                console.log($(".loading"));
                 $(".loading").hide();
+                this.name = $("#username").val();
                 this.soundManager.playSound(SoundEnum.GameStart);
                 requestAnimationFrame(() => this.gameLoop());
             })
@@ -200,10 +204,11 @@ export class GameField {
         this.ctx.fillStyle = "black";
         this.ctx.fillRect(this.width - 90, 0, 90, 100);
 
-        this.ctx.font = "20px VT323, sans-serif";
+        this.ctx.font = "12px VT323, sans-serif";
         this.ctx.fillStyle = "white";
         this.ctx.fillText("Level: " + this.map.mapLevel, this.width - 90, 20);
-        this.ctx.fillText("Tanks: " + this.aiTanks._count, this.width - 90, 50);
+        this.ctx.fillText("Tanks: " + this.aiTanks._count, this.width - 90, 40);
+        this.ctx.fillText("User: " + this.name, this.width - 90, 60);
     }
 
 }
\ No newline at end of file
diff --git a/src/game.js b/src/game.js
index f11eee9..8bd769a 100644
--- a/src/game.js
+++ b/src/game.js
@@ -50,6 +50,8 @@ export class Game {
         addEventListener("keyup", (ev) => {
             if (prevEv && prevEv.key == ev.key) prevEv = undefined;
         });
+
+        
         requestAnimationFrame(() => this.gameField.play(1, true));
     }
 }
\ No newline at end of file