diff --git a/styles/app/index.styl b/styles/app/index.styl
index 7055f7092d..27bbfea45c 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -92,7 +92,6 @@ h1 > span {
   display: none;
 }
 
-
 .vote-up, .vote-down {
   text-decoration:none;
 }
@@ -124,13 +123,16 @@ h1 > span {
 #character td {
   text-align: center;
 }
+
+#bars 
+  width: 400px
   
-#tnl-bar { border: 1px solid black; background-color:white; margin-top:10px;}
-#tnl { float:right; margin:5px; }
-
-#hp-bar { border: 1px solid black; background-color:white;}
-
-#hp { float:right; margin:5px; }
+  .bar 
+    border: 1px solid black
+  .progress-text
+    float: right 
+    margin: 5px
+    color: black
 
 #money { float:right; }
 
diff --git a/views/app/index.html b/views/app/index.html
index 25c31802a0..50971b01c7 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -78,15 +78,13 @@
           </td>
           <td id="bars">
             <div class="progress progress-danger">
-              <div class="bar" style="width: {percent(_user.hp,50)}%;">
-                <span id="hp">HP: {round(_user.hp)} / 50</span>
-              </div>
+              <span class="progress-text">HP: {round(_user.hp)} / 50</span>
+              <div class="bar" style="width: {percent(_user.hp,50)}%;"></div>
             </div>
 
             <div class="progress progress-warning">
-              <div class="bar" style="width: {percent(_user.exp,_tnl)}%;">
-                <span id="tnl">Exp: {round(_user.exp)} / {_tnl}</span>
-              </div>
+              <span class="progress-text">Exp: {round(_user.exp)} / {_tnl}</span>
+              <div class="bar" style="width: {percent(_user.exp,_tnl)}%;"></div>
             </div>
               
             </div>