diff --git a/package.json b/package.json
index 4d1424b30a..c6ab3a060c 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "gzippo": ">=0.1.4",
     "racer-db-mongo": "*",
     "connect-mongo": ">=0.1.9",
-    "racer": "*"
+    "racer": "*",
+    "derby-ui-boot": "*"
   },
   "private": true,
   "devDependencies": {
diff --git a/src/app/index.coffee b/src/app/index.coffee
index c93e8019fe..753bc54fe0 100644
--- a/src/app/index.coffee
+++ b/src/app/index.coffee
@@ -1,4 +1,7 @@
-{get, view, ready} = require('derby').createApp module
+derby = require('derby')
+{get, view, ready} = derby.createApp module
+derby.use require('derby-ui-boot')
+#derby.use(require('../../ui'))
 
 ## ROUTES ##
 
diff --git a/views/app/index.html b/views/app/index.html
index d8865cffa2..29dc066f1e 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -54,35 +54,70 @@
   </form>
 
 <Body:>
-  <div id="container">
-    
-    <div id=overlay></div>
-    <div id="head">
-      <!--<% if current_user %>-->
-        <table id="character">
-          <tr>
-            <td id="avatar">
-              <img src="/img/avatar/{_user.lvl}.png" /><br/>
-              <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>
-              <div id="tnl-bar" style="width:400px;">
-                <span id="tnl">Exp: {round(_user.exp)} / {_tnl}</span>
-              </div>
-            </td>
-          </tr>
-        </table>
-      <!--<% else %>
-        <h1>HabitRPG</h1>
-        <p>A habit tracker app which treats your goals like a Role Playing Game. <a href="https://github.com/lefnire/habitrpg#habitrpg">More Information</a></p>
-      <% end %>-->
+  <div id=overlay></div>
+  <div id="head">
+    <!--<% if current_user %>-->
+      <table id="character">
+        <tr>
+          <td id="avatar">
+            <img src="/img/avatar/{_user.lvl}.png" /><br/>
+            <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>
+            <div id="tnl-bar" style="width:400px;">
+              <span id="tnl">Exp: {round(_user.exp)} / {_tnl}</span>
+            </div>
+          </td>
+        </tr>
+      </table>
+    <!--<% else %>
+      <h1>HabitRPG</h1>
+      <p>A habit tracker app which treats your goals like a Role Playing Game. <a href="https://github.com/lefnire/habitrpg#habitrpg">More Information</a></p>
+    <% end %>-->
+  </div>
+  <br/>
+  
+  <div class="container-fluid">
+    <div class="row-fluid">
+      
+      <div class="span2">
+        <app:taskList title=Habits type=habit>
+          {#each _habitList}<app:task />{/}
+        </app:taskList>
+        <app:newTask type=habit><input class=new value={_newHabit}></app:newTask>
+      </div>
+      
+      <div class="span2">
+        <app:taskList title=Dailies type=daily>
+          {#each _dailyList}<app:task />{/}
+        </app:taskList>
+        <app:newTask type=daily><input class=new value={_newDaily}></app:newTask>
+      </div>
+
+      <div class="span2">
+        <app:taskList title=Todos type=todo>
+          {#each _todoList}<app:task />{/}
+        </app:taskList>
+        <app:newTask type=todo><input class=new value={_newTodo}></app:newTask>
+      </div>
+
+      <div class="span2">
+        {gold(_user.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.money)} <img src='/img/coin_single_silver.png'/>
+        <app:taskList title=Rewards type=reward>
+          {#each _rewardList}<app:task />{/}
+        </app:taskList>
+        <app:newTask type=reward><input class=new value={_newReward}></app:newTask>
+      </div>
+      
+      
     </div>
-    <br/>
+  </div>
+    
+    
     
-    <div id="content">
       <!--<% if !current_user %>
         <%= link_to(image_tag("http://line6.com/images/connections/facebook-login-button.png", :alt =>  "Login with Facebook"), user_omniauth_authorize_path(:facebook)) %>
       <% else %>-->
@@ -90,35 +125,15 @@
       <!-- would rather have one component: <app:taskList>, which handles taskList, task, and newTask.  However,
         can't pass references as paramters.  so <app:taskList newModel={_newHabit} list={_habitList}> doesn't work
         and have to pass those in via {{{content}}} instead -->
-      <app:taskList title=Habits type=habit>
-        {#each _habitList}<app:task />{/}
-      </app:taskList>
-      <app:newTask type=habit><input class=new value={_newHabit}></app:newTask>
+      
   
-      <app:taskList title=Dailies type=daily>
-        {#each _dailyList}<app:task />{/}
-      </app:taskList>
-      <app:newTask type=daily><input class=new value={_newDaily}></app:newTask>
+      
   
-      <app:taskList title=Todos type=todo>
-        {#each _todoList}<app:task />{/}
-      </app:taskList>
-      <app:newTask type=todo><input class=new value={_newTodo}></app:newTask>
+      
   
-      {gold(_user.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.money)} <img src='/img/coin_single_silver.png'/>
-      <app:taskList title=Rewards type=reward>
-        {#each _rewardList}<app:task />{/}
-      </app:taskList>
-      <app:newTask type=reward><input class=new value={_newReward}></app:newTask>
+      
         
       <!--<% end %>-->
-        
-    </div>
-  </div>
-
-    
-  
-  </div>
   
 <Footer:>
   <a href="https://github.com/lefnire/habitrpg"><img style="z-index:11; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>