diff --git a/client/src/components/Editor.vue b/client/src/components/Editor.vue
index 140b533..2a8622c 100644
--- a/client/src/components/Editor.vue
+++ b/client/src/components/Editor.vue
@@ -95,8 +95,8 @@ export default class Editor extends Vue {
   generateTaskList() {
     // Get task list for today
     const data = this.editor.getValue();
-    const regex = /\s+?- \[( |x)\] (.+)/gm;
-    let m;
+    const regex = /- \[( |x)\] (.+)/gm;
+    let m: any;
     let completed = false;
     this.global.taskList.splice(0)
     while ((m = regex.exec(data)) !== null) {
@@ -107,8 +107,6 @@ export default class Editor extends Vue {
       completed = m[1] === "x";
       this.global.taskList.push({ completed, name: m[2], index: m['index'] });
     }
-    console.log(this.global.taskList);
-    this.global.taskTrigger += 1;
   }
 
   created() {
@@ -165,6 +163,19 @@ export default class Editor extends Vue {
       this.editor.setCursor(cursor);
     });
   }
+
+  @Watch('global.taskList')
+  onTaskListChanged() {
+    const data = this.editor.getValue();
+    let newData = data
+    this.global.taskList.forEach((task: any) => {
+      let c = task.completed ? 'x' : ' ';
+      newData = newData.substr(0, task.index + 3) + c + newData.substr(task.index + 4);
+    })
+    if (newData !== data) {
+      this.editor.setValue(newData);
+    }
+  }
 }
 </script>
 
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index 85c6d5d..69cd27b 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -3,10 +3,18 @@
     <div class="main-header level is-mobile">
       <div class="level-left">
         <div class="level-item alt-button" @click="toggleSidebar(true)">
-          <b-icon v-show="!sidebar.hide" icon="grip-lines"> </b-icon>
+          <b-icon
+            v-show="!sidebar.hide"
+            icon="grip-lines"
+          >
+          </b-icon>
         </div>
         <div class="level-item alt-button" @click="toggleSidebar()">
-          <b-icon v-show="sidebar.hide" icon="grip-lines-vertical"> </b-icon>
+          <b-icon
+            v-show="sidebar.hide"
+            icon="grip-lines-vertical"
+          >
+          </b-icon>
         </div>
         <div class="level-item alt-button" v-if="!options.hideCreate">
           <div @click="newNote()">
@@ -15,17 +23,7 @@
             </b-tooltip>
           </div>
         </div>
-        <Tasks :tasks="this.taskList"></Tasks>
-        <!-- <div class="level-item alt-button" v-if="this.taskList.length">
-          <b-dropdown aria-role="list">
-            <b-tooltip label="Tasks" position="is-bottom" slot="trigger" role="button">
-              <b-icon icon="tasks"></b-icon>
-            </b-tooltip>
-            <b-dropdown-item custom v-for="task of this.taskList" v-bind:key="task.uuid">
-              <SimpleTask :task="task"></SimpleTask>
-            </b-dropdown-item>
-          </b-dropdown>
-        </div> -->
+        <Tasks></Tasks>
         <div class="level-item alt-button">
           <div @click="goToSearch()">
             <b-tooltip label="Search notes" position="is-bottom">
@@ -76,14 +74,10 @@
                 v-model="sidebar.autoSave"
                 @input="sidebar.toggleAutoSave"
               >
-                {{
-                  sidebar.autoSave ? "Disable Auto-Save" : "Enable Auto-Save"
-                }}
+                {{ sidebar.autoSave ? 'Disable Auto-Save' : 'Enable Auto-Save' }}
               </b-switch>
             </b-dropdown-item>
-            <b-dropdown-item @click="exportNotes()"
-              >Export Notes</b-dropdown-item
-            >
+            <b-dropdown-item @click="exportNotes()">Export Notes</b-dropdown-item>
             <b-dropdown-item @click="logout()">Logout</b-dropdown-item>
           </b-dropdown>
         </div>
@@ -93,35 +87,31 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import Component from "vue-class-component";
-import _ from "lodash";
-import addDays from "date-fns/addDays";
-import subDays from "date-fns/subDays";
-import format from "date-fns/format";
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import _ from 'lodash';
+import addDays from 'date-fns/addDays';
+import subDays from 'date-fns/subDays'
+import format from 'date-fns/format';
 
-import SidebarInst from "../services/sidebar";
-import { clearToken } from "../services/user";
-import { NoteService } from "../services/notes";
+import SidebarInst from '../services/sidebar';
+import {clearToken} from '../services/user';
+import {NoteService} from '../services/notes';
 
-import { IHeaderOptions } from "../interfaces";
+import {IHeaderOptions} from '../interfaces';
 
-import Tasks from "./Tasks.vue";
+import Tasks from './Tasks.vue';
 
 @Component({
   components: {
-    Tasks,
+    Tasks
   },
   props: {
     options: {
       type: Object,
-      required: true,
-    },
-    taskList: {
-      type: Array,
-      required: true,
-    },
-  },
+      required: true
+    }
+  }
 })
 export default class Header extends Vue {
   public sidebar = SidebarInst;
@@ -133,11 +123,11 @@ export default class Header extends Vue {
   }
 
   public newNote() {
-    this.$router.push({ name: "new-note" }).catch((err) => {});
+    this.$router.push({name: 'new-note'}).catch(err => {});
   }
 
   public goToSearch(searchType: string, tag: string) {
-    this.$router.push({ name: "search" }).catch((err) => {});
+    this.$router.push({name: 'search'}).catch(err => {});
   }
 
   public prevent($event: any) {
@@ -146,18 +136,12 @@ export default class Header extends Vue {
 
   public prevDay() {
     const date = subDays(this.sidebar.date, 1);
-    this.$router.push({
-      name: "day-id",
-      params: { id: format(date, "MM-dd-yyyy") },
-    });
+    this.$router.push({ name: 'day-id', params: { id: format(date, 'MM-dd-yyyy') } });
   }
 
   public nextDay() {
     const date = addDays(this.sidebar.date, 1);
-    this.$router.push({
-      name: "day-id",
-      params: { id: format(date, "MM-dd-yyyy") },
-    });
+    this.$router.push({ name: 'day-id', params: { id: format(date, 'MM-dd-yyyy') } });
   }
 
   public async save() {
@@ -204,7 +188,7 @@ export default class Header extends Vue {
 
   public logout() {
     clearToken();
-    this.$router.push({ name: "Login" });
+    this.$router.push({name: 'Login'});
   }
 }
 </script>
diff --git a/client/src/components/TaskItem.vue b/client/src/components/TaskItem.vue
index 1d1c0d3..030cdc5 100644
--- a/client/src/components/TaskItem.vue
+++ b/client/src/components/TaskItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="field">
-    <b-checkbox v-model="completed" @input="updateTask">
+    <b-checkbox v-model="task.completed" @input="updateTask">
       {{ this.task.name }}
     </b-checkbox>
   </div>
@@ -9,6 +9,7 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
+import { Inject } from "vue-property-decorator";
 
 import SidebarInst from "../services/sidebar";
 
@@ -17,20 +18,24 @@ import SidebarInst from "../services/sidebar";
     task: {
       type: Object,
       required: true
+    },
+    index: {
+      type: Number,
+      required: true
     }
   }
 })
 export default class TaskItem extends Vue {
   public task: any;
+  public index: any;
   public sidebar = SidebarInst;
   public completed: Boolean = false;
 
-  mounted() {
-    this.completed = this.task.completed;
-  }
+  @Inject()
+  public global: any;
 
   public async updateTask() {
-    this.task.completed = this.completed;
+    this.global.taskList.splice(this.index, 1, this.task);
   }
 }
 </script>
diff --git a/client/src/components/Tasks.vue b/client/src/components/Tasks.vue
index a894d91..b4da2c1 100644
--- a/client/src/components/Tasks.vue
+++ b/client/src/components/Tasks.vue
@@ -9,8 +9,12 @@
       >
         <b-icon icon="tasks"></b-icon>
       </b-tooltip>
-      <b-dropdown-item custom v-for="task in global.taskList" :key="task.index">
-        <task-item :task="task"></task-item>
+      <b-dropdown-item
+        custom
+        v-for="(task, idx) in global.taskList"
+        :key="task.index"
+      >
+        <task-item :task="task" :index="idx"></task-item>
       </b-dropdown-item>
       <div class="no-tasks" v-if="!global.taskList.length">No tasks found</div>
     </b-dropdown>
diff --git a/client/src/views/Day.vue b/client/src/views/Day.vue
index cee7711..1a37939 100644
--- a/client/src/views/Day.vue
+++ b/client/src/views/Day.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Header :options="headerOptions" :task-list="tasks"></Header>
+    <Header :options="headerOptions"></Header>
     <Editor v-if="!isLoading" v-bind:value="text" v-on:valChanged="valChanged" v-on:saveShortcut="saveDay"></Editor>
     <div v-else class="loading-wrapper">
       <b-loading :is-full-page="false" :active="isLoading"></b-loading>
@@ -59,7 +59,6 @@ export default class Day extends Vue {
     saveFn: () => this.saveDay(),
     deleteFn: () => this.deleteNote(),
   }
-  public tasks: Array<object> = [];
 
   public metaInfo(): any {
     return {