diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
index 160bede..dd19373 100644
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -9,7 +9,9 @@
         </span>
     </div>
     <div v-else class="flex items-center flex-1">
-        <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checkedIt" class="block mr-1">
+        <CheckBoxField :check-it="!!(checked)"
+                       @update:field="checked = $event"
+                       class="block mr-1" />
         <input type="text"
                v-model="toDo.data.attributes.data.name"
                @keypress.enter="updateToDo"
@@ -58,13 +60,13 @@ export default {
         },
     },
     watch: {
-        checked: function (val) {
+        checked: function () {
             // eslint-disable-next-line no-undef
             axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id + '/check')
                 .then(res => {
                     // this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
                     this.toDo.data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
-                    this.checked = val
+                    this.checked = !!(res.data.data.attributes.data.checked_at)
                 })
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)