diff --git a/app/components/single-task.hbs b/app/components/single-task.hbs
index d644ec8..a60d490 100644
--- a/app/components/single-task.hbs
+++ b/app/components/single-task.hbs
@@ -5,12 +5,8 @@
     </h5>
     <div class="toggle-done ml-auto">
       <div class="btn-group btn-group-sm" role="group">
-        <BsButton @type="secondary">Pin</BsButton>
-        {{#if this.task.isComplete}}
-          <BsButton @type="primary" onClick={{action (mut this.task.isComplete) false}}>Undo</BsButton>
-        {{else}}
-          <BsButton @type="primary" onClick={{action (mut this.task.isComplete) true}}>Done</BsButton>
-        {{/if}}
+        <BsButton @type="secondary" {{on "click" (fn this.setTaskAsPinned this.task)}}>Pin</BsButton>
+        <ToggleComplete @task={{this.task}} />
       </div>
     </div>
   </div>
diff --git a/app/components/task-list.hbs b/app/components/task-list.hbs
index 41b6c7c..18fc1bd 100644
--- a/app/components/task-list.hbs
+++ b/app/components/task-list.hbs
@@ -1,7 +1,7 @@
 <div class="card">
   <ul class="list-group list-group-flush">
     {{#each this.tasks as |task|}}
-      <SingleTask @task={{task}} />
+      <SingleTask @task={{task}} @setTaskAsPinned={{this.setTaskAsPinned}} />
     {{/each}}
   </ul>
 </div>
\ No newline at end of file
diff --git a/app/components/toggle-complete.hbs b/app/components/toggle-complete.hbs
new file mode 100644
index 0000000..7de2bdf
--- /dev/null
+++ b/app/components/toggle-complete.hbs
@@ -0,0 +1,3 @@
+<BsButton @type="primary" onClick={{action (mut @task.isComplete) (if @task.isComplete false true)}}>
+  {{if @task.isComplete "Undo" "Done"}}
+</BsButton>
\ No newline at end of file
diff --git a/app/controllers/index.js b/app/controllers/index.js
index 78d8779..4e35203 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -1,4 +1,17 @@
-import Controller from '@ember/controller';
+import Controller from "@ember/controller";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
 
 export default class IndexController extends Controller {
+  @tracked pinnedTask;
+
+  @action
+  setTaskAsPinned(task) {
+    this.pinnedTask = task.toJSON();
+  }
+
+  get completedTasks() {
+    const count = this.model.filter((task) => task.isComplete).length;
+    return count;
+  }
 }
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 13a70b0..f5aad2b 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -9,11 +9,7 @@
       <div class="toggle-done ml-auto">
         <div class="btn-group btn-group-sm" role="group">
           <BsButton @type="secondary">Unpin</BsButton>
-          {{#if this.pinnedTask.isComplete}}
-            <BsButton @type="primary">Undo</BsButton>
-          {{else}}
-            <BsButton @type="primary">Done</BsButton>
-          {{/if}}
+          <ToggleComplete @task={{this.pinnedTask}} />
         </div>
       </div>
     </div>
@@ -25,7 +21,7 @@
   No Pinned Tasks
 {{/if}}
 <h4>Other Tasks</h4>
-<TaskList @tasks={{this.model}} />
+<TaskList @tasks={{this.model}} @setTaskAsPinned={{this.setTaskAsPinned}} />
 
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">
diff --git a/tests/integration/components/toggle-complete-test.js b/tests/integration/components/toggle-complete-test.js
new file mode 100644
index 0000000..0ce89c7
--- /dev/null
+++ b/tests/integration/components/toggle-complete-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | toggle-complete', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<ToggleComplete />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <ToggleComplete>
+        template block text
+      </ToggleComplete>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});