diff --git a/css/game.css b/css/game.css
index 46c6e1a..d52798f 100644
--- a/css/game.css
+++ b/css/game.css
@@ -1,8 +1,8 @@
 body {
 	margin: 0;
-	height: 100%;
+	height: 100vh;
 	overflow: hidden;
-	position: relative;
+   position: relative;
 }
 body:hover {
    cursor: default;
@@ -10,13 +10,6 @@ body:hover {
 canvas.main_canvas {
 	position: absolute;
 }
-.hud {
-   position: absolute;
-   width: 100%;
-   display: flex;
-   justify-content: space-between;
-   align-items: flex-start;
-}
 .hud_item {
    background-color: #555555aa;
    margin: 8px;
@@ -24,6 +17,15 @@ canvas.main_canvas {
    border-radius: 4px;
    color: white;
    font-family: roboto, sans-serif;
+   width: fit-content;
+   position: absolute;
+   display: inline-block;
+}
+.hud_item.bottom {
+   bottom: 0px;
+}
+.hud_item.right {
+   right: 0px;
 }
 div.bar {
    width: 400px;
diff --git a/game.html b/game.html
index 4676ac8..0669acf 100644
--- a/game.html
+++ b/game.html
@@ -7,17 +7,18 @@
   </head>
   <body onload="init()">
     <canvas id="main_canvas" class="main_canvas" width="700" height="700" autofocus></canvas>
-    <div class="hud">
-      <div class="hud_item">
-        <div class="bar red_bar">
-          <div id="health_bar"></div>
-        </div>
-        <br>
-        <div class="bar green_bar">
-          <div id="energy_bar"></div>
-        </div>
+    <div class="hud_item">
+      <div class="bar red_bar">
+        <div id="health_bar"></div>
       </div>
-      <div class="hud_item" id="player_username">Runic alpha</div>
+      <br>
+      <div class="bar green_bar">
+        <div id="energy_bar"></div>
+      </div>
+    </div>
+    <div class="hud_item right" id="player_username">Runic alpha</div>
+    <div class="hud_item bottom right">
+      this is a test
     </div>
     <script src="script/engine.js"></script>
     <script src="script/client.js"></script>
