diff --git a/frontend/app/components/task-list-item.js b/frontend/app/components/task-list-item.js
index 0bb283d..63cebc2 100644
--- a/frontend/app/components/task-list-item.js
+++ b/frontend/app/components/task-list-item.js
@@ -4,11 +4,17 @@ export default Ember.Component.extend({
   tagName: 'li',
   classNames: ['task-list-item'],
 
-  actions: {
-    saveTask: function() {
-      var task = this.get('task');
+  // how do I make this not fire uncontrollably?
+  // should it be an action? 
+  updateCompletedStatus: function() {
+    var task = this.get('task');
+
+    if (task.get('completedAt')) {
+      task.set('completedAt', null);
+    } else {
       task.set('completedAt', new Date());
-      task.save();
     }
-  }
+
+    task.save();
+  }.observes('task.isCompleted'),
 });
diff --git a/frontend/app/models/task.js b/frontend/app/models/task.js
index 5cc71fe..df9fa75 100644
--- a/frontend/app/models/task.js
+++ b/frontend/app/models/task.js
@@ -3,5 +3,11 @@ import DS from 'ember-data';
 export default DS.Model.extend({
   name: DS.attr('string'),
   completedAt: DS.attr('date'),
-  project: DS.belongsTo('project', { async: true })
+  project: DS.belongsTo('project', { async: true }),
+
+  isCompleted: function() {
+    if (this.get('completedAt')) {
+      return true;
+    }
+  }.property('completedAt')
 });
diff --git a/frontend/app/templates/components/task-list-item.hbs b/frontend/app/templates/components/task-list-item.hbs
index 9d786cd..c901524 100644
--- a/frontend/app/templates/components/task-list-item.hbs
+++ b/frontend/app/templates/components/task-list-item.hbs
@@ -1,9 +1,13 @@
-{{task.name}}
-
-{{#if task.completedAt}}
-  Completed
+{{#if task.isCompleted}}
+  {{input type="checkbox"
+    checked=task.isCompleted
+    class="toggle"}}
 {{else}}
   {{#if task.project.canEdit}}
-    <button {{action 'saveTask'}}>Complete</button>
+    {{input type="checkbox"
+      checked=task.isCompleted
+      class="toggle"}}
   {{/if}}
 {{/if}}
+
+{{task.name}}