diff --git a/src/app/index.coffee b/src/app/index.coffee
index 753bc54fe0..67d7545322 100644
--- a/src/app/index.coffee
+++ b/src/app/index.coffee
@@ -33,7 +33,6 @@ newUser = (model, userId) ->
         0: {id: 0, type: 'reward', text: '1 TV episode', notes: '', price: 20 }
       rewardIds: [0]
 
-
 get '/', (page, model) ->
   # Render page if a userId is already stored in session data
   userId = model.get '_session.userId'
@@ -61,14 +60,18 @@ view.fn 'taskClasses', (type, completed) ->
   classes += " completed" if completed
   return classes
     
+view.fn "percent", (x, y) ->
+  x=1 if x==0
+  Math.round(x/y*100)
+    
 view.fn "round", (num) ->
   Math.round num
   
 view.fn "gold", (num) -> 
-  num.toFixed(1).split('.')[0]
+  num.toFixed(1).split('.')[0] if num
 
 view.fn "silver", (num) -> 
-  num.toFixed(1).split('.')[1]
+  num.toFixed(1).split('.')[1] if num
 
 ## CONTROLLER FUNCTIONS ##
 
diff --git a/views/app/index.html b/views/app/index.html
index 29dc066f1e..f60e1ab725 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -64,11 +64,18 @@
             <b><div id="lvl">Lvl: {_user.lvl}</div></b>
           </td>
           <td id="bars">
-            <div id="hp-bar" style="width:400px;">
-              <span id="hp">HP: {round(_user.hp)}</span>
+            <div class="progress progress-danger">
+              <div class="bar" style="width: {percent(_user.hp,50)}%;">
+                <span id="hp">HP: {round(_user.hp)} / 50</span>
+              </div>
             </div>
-            <div id="tnl-bar" style="width:400px;">
-              <span id="tnl">Exp: {round(_user.exp)} / {_tnl}</span>
+
+            <div class="progress progress-warning">
+              <div class="bar" style="width: {percent(_user.exp,_tnl)}%;">
+                <span id="tnl">Exp: {round(_user.exp)} / {_tnl}</span>
+              </div>
+            </div>
+              
             </div>
           </td>
         </tr>