diff --git a/css/main.css b/css/main.css
index ec9fe77..3ae38fe 100644
--- a/css/main.css
+++ b/css/main.css
@@ -145,7 +145,7 @@
     background: url(../img/guy_sprite.png) -160px 0px;
 }
 
-html {
+#main {
   -webkit-transform: scale(1.5);
   transform: scale(2);
   transform-origin: 0;
diff --git a/index.html b/index.html
index e42ef02..dd86547 100644
--- a/index.html
+++ b/index.html
@@ -8,15 +8,23 @@
     <!-- <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no" /> -->
     <link rel="stylesheet" href="./css/main.css">
   </head>
-  <body style="overflow:hidden; background: black;">
+  <body style="overflow:hidden; background: black; margin: 0; position: relative;">
+    <div id="main">
       Pirate!!!
       <div id="map">
         
       </div>
 
+      
+    </div>
+    <div id="bottomHud" style="position: fixed; bottom: 0; width: 100%; left: 0; height: 150px; background: rgba(218, 218, 218, 0); z-index: 1000;">
+    </div>
     <!-- jQuery and co -->
     <script src="./js/jquery.min.js"></script>
     <script src="./js/socket.io-1.3.5.js"></script>
     <script src="./js/main.js"></script>
   </body>
+
+  
+  
 </html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index b6bde93..6476da7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -17,7 +17,7 @@ socket.on('disconnect', function () {
 
 socket.on('getmap', function (conent) {
 	cssMap = conent["cssMap"];
-	$("body").append('<div style="position:absolute; top:0px;left:0px; width:'+cssMap.length*32+'px; height:'+cssMap[0].length*32+'px"></div>');
+	$("#main").append('<div style="position:absolute; top:0px;left:0px; width:'+cssMap.length*32+'px; height:'+cssMap[0].length*32+'px"></div>');
 	utilMap = conent["utilMap"];
 	//console.log(map);
 	domMap = $("#map");
@@ -54,7 +54,7 @@ function addNewPlayer(player, id) {
 			var modeClass = "guy";
 			var modeImg = "./img/plain.png";
 		}
-		$("body").append('<div class="player" id="'+id+'" style="position:absolute; top:'+player["y"]+'px; left:'+player["x"]+'px; width:7px; height:7px; z-index:100;"><img class="'+modeClass+'" src="'+modeImg+'"></div>');
+		$("#main").append('<div class="player" id="'+id+'" style="position:absolute; top:'+player["y"]+'px; left:'+player["x"]+'px; width:7px; height:7px; z-index:100;"><img class="'+modeClass+'" src="'+modeImg+'"></div>');
 	}
 }
 
@@ -94,7 +94,7 @@ socket.on('setpos', function (allPlayers) {
 				var oldPosX = Math.floor(parseFloat($("#"+id).css("left").split("px")[0]));				
 				if(oldPosY != playerY || oldPosX != playerX) {
 					if(ownId === id) {
-						window.scrollTo(playerElement.offset().left-$(window).width()/2, playerElement.offset().top-$(window).height()/2);
+						window.scrollTo(playerElement.offset().left-$(window).width()/2, playerElement.offset().top-$(window).height()/2+100);
 						var mapX = Math.floor(playerX/32);
 						var mapY = Math.floor(playerY/32);
 
@@ -224,4 +224,5 @@ $(document).ready(function() {
 	       }
 	});
 
+
 });
\ No newline at end of file
