diff --git a/lib/app/index.js b/lib/app/index.js
index afe8dd7d09..12d50bc416 100644
--- a/lib/app/index.js
+++ b/lib/app/index.js
@@ -13,17 +13,12 @@ content = require('./content');
 
 score = require('./score');
 
-view.fn('taskClasses', function(type, completed, value, hideCompleted) {
+view.fn('taskClasses', function(type, completed, value) {
   var classes;
   classes = type;
   if (completed) {
     classes += " completed";
   }
-  if (type === 'todo') {
-    if ((hideCompleted && completed) || (!hideCompleted && !completed)) {
-      classes += " hide";
-    }
-  }
   switch (false) {
     case !(value < -8):
       classes += ' color-worst';
@@ -104,6 +99,7 @@ get('/:uidParam?', function(page, model, _arg) {
         habitIds: [],
         dailyIds: [],
         todoIds: [],
+        completedIds: [],
         rewardIds: []
       };
       _ref1 = content.defaultTasks;
@@ -148,6 +144,7 @@ getHabits = function(page, model, userId) {
     model.refList("_habitList", "_user.tasks", "_user.habitIds");
     model.refList("_dailyList", "_user.tasks", "_user.dailyIds");
     model.refList("_todoList", "_user.tasks", "_user.todoIds");
+    model.refList("_completedList", "_user.tasks", "_user.completedIds");
     model.refList("_rewardList", "_user.tasks", "_user.rewardIds");
     return page.render();
   });
@@ -160,11 +157,28 @@ ready(function(model) {
   model.on('set', '*', function() {
     return $('[rel=popover]').popover();
   });
-  model.set('_hideCompleted', true);
-  $('a[data-toggle="tab"]').on('shown', function(e) {
-    var hideCompleted;
-    hideCompleted = $(e.target).attr('href') === '#tab1' ? true : false;
-    return model.set('_hideCompleted', hideCompleted);
+  model.on('set', '_user.tasks.*.completed', function(i, completed, previous, isLocal) {
+    var direction, from, ids, index, shouldTransfer, to, _ref1, _ref2, _ref3;
+    _ref1 = [null, null, false, null], from = _ref1[0], to = _ref1[1], shouldTransfer = _ref1[2], direction = _ref1[3];
+    if (completed === true && previous === false && isLocal) {
+      _ref2 = ['_todoList', '_completedList', true, 'up'], from = _ref2[0], to = _ref2[1], shouldTransfer = _ref2[2], direction = _ref2[3];
+    } else if (completed === false && previous === true && isLocal) {
+      _ref3 = ['_completedList', '_todoList', true, 'down'], from = _ref3[0], to = _ref3[1], shouldTransfer = _ref3[2], direction = _ref3[3];
+    }
+    if (shouldTransfer) {
+      ids = _.map(model.get(from), function(obj) {
+        return obj.id;
+      });
+      index = ids.indexOf(i);
+      model.push(to, model.remove(from, index));
+      score(model.at('_user'), model.at(i), direction);
+    }
+    return console.log({
+      i: i,
+      completed: completed,
+      previous: previous,
+      isLocal: isLocal
+    }, 'on completed');
   });
   setupSortable = function(type) {
     return $("ul." + type + "s").sortable({
diff --git a/src/app/index.coffee b/src/app/index.coffee
index 863bb26c6e..16635b806d 100644
--- a/src/app/index.coffee
+++ b/src/app/index.coffee
@@ -6,12 +6,11 @@ content = require('./content')
 score = require('./score')
 
 ## VIEW HELPERS ##
-view.fn 'taskClasses', (type, completed, value, hideCompleted) ->
+
+view.fn 'taskClasses', (type, completed, value) ->
   #TODO figure out how to just pass in the task model, so i can access all these properties from one object
   classes = type
   classes += " completed" if completed
-  if type == 'todo'
-    classes += " hide" if (hideCompleted and completed) or (!hideCompleted and !completed)
     
   switch
     when value<-8 then classes += ' color-worst'
@@ -63,7 +62,7 @@ get '/:uidParam?', (page, model, {uidParam}) ->
       newUser = {
         stats: { money: 0, exp: 0, lvl: 1, hp: 50 }
         items: { itemsEnabled: false, armor: 0, weapon: 0 }
-        tasks: {}, habitIds: [], dailyIds: [], todoIds: [], rewardIds: []
+        tasks: {}, habitIds: [], dailyIds: [], todoIds: [], completedIds: [], rewardIds: []
       }
       for task in content.defaultTasks
         guid = task.id = require('derby/node_modules/racer').uuid()
@@ -109,6 +108,7 @@ getHabits = (page, model, userId) ->
     model.refList "_habitList", "_user.tasks", "_user.habitIds"
     model.refList "_dailyList", "_user.tasks", "_user.dailyIds"
     model.refList "_todoList", "_user.tasks", "_user.todoIds"
+    model.refList "_completedList", "_user.tasks", "_user.completedIds"
     model.refList "_rewardList", "_user.tasks", "_user.rewardIds"
       
     page.render()  
@@ -124,12 +124,21 @@ ready (model) ->
   model.on 'set', '*', ->
     $('[rel=popover]').popover()
   
-  model.set('_hideCompleted', true)
-  $('a[data-toggle="tab"]').on 'shown', (e) ->
-    #see http://twitter.github.com/bootstrap/javascript.html#tabs 
-    hideCompleted = if $(e.target).attr('href') == '#tab1' then true else false  
-    model.set('_hideCompleted', hideCompleted)
-      
+  model.on 'set', '_user.tasks.*.completed', (i, completed, previous, isLocal) ->
+    [from, to, shouldTransfer, direction] = [null, null, false, null]
+    if completed==true and previous==false and isLocal
+      [from, to, shouldTransfer, direction] = ['_todoList', '_completedList', true, 'up']
+    else if completed==false and previous==true and isLocal
+      [from, to, shouldTransfer, direction] = ['_completedList', '_todoList', true, 'down']
+    if shouldTransfer
+      ids = _.map model.get(from), (obj) ->
+        obj.id
+      index = ids.indexOf(i)
+      model.push to, model.remove(from, index)
+      score(model.at('_user'), model.at(i), direction) 
+ 
+    console.log {i:i, completed:completed, previous:previous, isLocal:isLocal}, 'on completed'
+  
   # Make the lists draggable using jQuery UI
   # Note, have to setup helper function here and call it for each type later
   # due to variable binding of "type"
diff --git a/views/app/index.html b/views/app/index.html
index 85a02eab7a..0ae4001530 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -115,7 +115,7 @@
             </div>
             <div class="tab-pane" id="tab2">
               <ul class='completeds'>
-                {#each _todoList as :task}<app:task />{/}
+                {#each _completedList as :task}<app:task />{/}
               </ul>
             </div>
           </div>
@@ -174,7 +174,7 @@
   </form>
 
 <task:>
-  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, _hideCompleted)}">
+  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value)}">
     <pre>
     <div class="task-meta-controls">