diff --git a/src/assets/languages/ar.json b/src/assets/languages/ar.json
index 9525d91..b3bd64d 100644
--- a/src/assets/languages/ar.json
+++ b/src/assets/languages/ar.json
@@ -43,6 +43,7 @@
     "moveCompletedTaskToBottom": "نقل المهام المكتملة إلى الأسفل",
     "moveCompletedSubTaskToBottom": "نقل المهام الفرعية المكتملة إلى الأسفل",
     "fullscreenToDoModal": "تفاصيل المهمة بشاشة كاملة",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "إكمال المهام تلقائيًا",
     "weekStartOnMonday": "بداية الأسبوع يوم الاثنين"
   },
   "donate": {
diff --git a/src/assets/languages/de.json b/src/assets/languages/de.json
index 4738e3a..f80fa21 100644
--- a/src/assets/languages/de.json
+++ b/src/assets/languages/de.json
@@ -43,6 +43,7 @@
     "clear": "Löschen",
     "fullscreenToDoModal": "Aufgabendetails im Vollbildmodus",
     "moveCompletedSubTaskToBottom": "Abgeschlossene Unteraufgaben nach unten verschieben",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Aufgaben automatisch erledigen",
     "weekStartOnMonday": "Die Woche beginnt am Montag"
   },
   "donate": {
diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json
index 7ae08f4..f38aafc 100644
--- a/src/assets/languages/en.json
+++ b/src/assets/languages/en.json
@@ -43,6 +43,7 @@
     "moveCompletedTaskToBottom": "Move completed tasks to bottom",
     "moveCompletedSubTaskToBottom": "Move completed sub-tasks to bottom",
     "fullscreenToDoModal": "To-do Details in full screen",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Complete tasks automatically",
     "weekStartOnMonday": "The Week start on Monday"
   },
   "donate": {
diff --git a/src/assets/languages/es.json b/src/assets/languages/es.json
index 3572581..01b9158 100644
--- a/src/assets/languages/es.json
+++ b/src/assets/languages/es.json
@@ -43,6 +43,7 @@
     "clear": "Eliminar",
     "fullscreenToDoModal": "Detalles de tareas en pantalla completa",
     "moveCompletedSubTaskToBottom": "Mover las subtareas completadas al final",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Completar tareas automáticamente",
     "weekStartOnMonday": "La semana comienza el lunes."
   },
   "donate": {
diff --git a/src/assets/languages/fr.json b/src/assets/languages/fr.json
index aeb5bf8..64db332 100644
--- a/src/assets/languages/fr.json
+++ b/src/assets/languages/fr.json
@@ -43,6 +43,7 @@
     "clear": "Supprimer",
     "fullscreenToDoModal": "Détails de la tâche en plein écran",
     "moveCompletedSubTaskToBottom": "Déplacer les sous-tâches terminées vers le bas",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Effectuer des tâches automatiquement",
     "weekStartOnMonday": "La semaine commence le lundi"
   },
   "donate": {
diff --git a/src/assets/languages/he.json b/src/assets/languages/he.json
index 0bbd12f..6082f2c 100644
--- a/src/assets/languages/he.json
+++ b/src/assets/languages/he.json
@@ -43,6 +43,7 @@
     "moveCompletedTaskToBottom": "הזז משימות שהושלמו לתחתית",
     "moveCompletedSubTaskToBottom": "הזז תתי משימות שהושלמו לתחתית",
     "fullscreenToDoModal": "פרטי משימה במסך מלא",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "השלם משימות באופן אוטומטי",
     "weekStartOnMonday": "השבוע מתחיל ביום שני"
   },
   "donate": {
diff --git a/src/assets/languages/hi.json b/src/assets/languages/hi.json
index 4548834..098d2ed 100644
--- a/src/assets/languages/hi.json
+++ b/src/assets/languages/hi.json
@@ -43,6 +43,7 @@
     "moveCompletedTaskToBottom": "पूरे हुए कार्यों को नीचे ले जाएं",
     "moveCompletedSubTaskToBottom": "पूरी हुई उप-कार्यों को नीचे ले जाएं",
     "fullscreenToDoModal": "फुल स्क्रीन में करने के लिए कार्यों का विवरण",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "कार्य स्वचालित रूप से पूर्ण करें",
     "weekStartOnMonday": "सप्ताह सोमवार से शुरू होता है"
   },
   "donate": {
diff --git a/src/assets/languages/it.json b/src/assets/languages/it.json
index d6c4458..7eb6e52 100644
--- a/src/assets/languages/it.json
+++ b/src/assets/languages/it.json
@@ -43,6 +43,7 @@
     "clear": "Eliminare",
     "fullscreenToDoModal": "Dettagli attività a schermo intero",
     "moveCompletedSubTaskToBottom": "Sposta le attività secondarie completate in basso",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Completa le attività automaticamente",
     "weekStartOnMonday": "La settimana inizia lunedì"
   },
   "donate": {
diff --git a/src/assets/languages/ja.json b/src/assets/languages/ja.json
index 93b5ad9..cf43002 100644
--- a/src/assets/languages/ja.json
+++ b/src/assets/languages/ja.json
@@ -43,6 +43,7 @@
     "clear": "消去",
     "fullscreenToDoModal": "全画面でのToDo詳細",
     "moveCompletedSubTaskToBottom": "完了したサブタスクを一番下に移動します",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "タスクを自動的に完了する",
     "weekStartOnMonday": "週は月曜日から始まります"
   },
   "donate": {
diff --git a/src/assets/languages/ko.json b/src/assets/languages/ko.json
index 395b243..64cc956 100644
--- a/src/assets/languages/ko.json
+++ b/src/assets/languages/ko.json
@@ -43,6 +43,7 @@
     "clear": "삭제",
     "fullscreenToDoModal": "전체 화면으로 할 일 세부 정보",
     "moveCompletedSubTaskToBottom": "완료된 하위 작업을 맨 아래로 이동",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "자동으로 작업 완료",
     "weekStartOnMonday": "주 시작 월요일"
   },
   "donate": {
diff --git a/src/assets/languages/pl.json b/src/assets/languages/pl.json
index 2313d3a..eebe305 100644
--- a/src/assets/languages/pl.json
+++ b/src/assets/languages/pl.json
@@ -107,6 +107,7 @@
     "clear": "Usuwać",
     "fullscreenToDoModal": "Szczegóły zadań na pełnym ekranie",
     "moveCompletedSubTaskToBottom": "Przenieś ukończone zadania podrzędne na dół",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Automatyczne wykonywanie zadań",
     "weekStartOnMonday": "Tydzień zaczyna się w poniedziałek"
   },
   "tips": {
diff --git a/src/assets/languages/pt.json b/src/assets/languages/pt.json
index 32c3443..9476591 100644
--- a/src/assets/languages/pt.json
+++ b/src/assets/languages/pt.json
@@ -43,6 +43,7 @@
     "clear": "Excluir",
     "fullscreenToDoModal": "Detalhes da tarefa em tela cheia",
     "moveCompletedSubTaskToBottom": "Mover subtarefas concluídas para baixo",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Completar tarefas automaticamente",
     "weekStartOnMonday": "A semana começa na segunda-feira"
   },
   "donate": {
diff --git a/src/assets/languages/ru.json b/src/assets/languages/ru.json
index 479fd9d..ec92ccf 100644
--- a/src/assets/languages/ru.json
+++ b/src/assets/languages/ru.json
@@ -43,6 +43,7 @@
     "clear": "Очистить",
     "fullscreenToDoModal": "Детали на весь экран",
     "moveCompletedSubTaskToBottom": "Переместить завершенные подзадачи в конец",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Выполняйте задачи автоматически",
     "weekStartOnMonday": "Начало недели в понедельник"
   },
   "donate": {
diff --git a/src/assets/languages/tr.json b/src/assets/languages/tr.json
index 922de0e..9d89433 100644
--- a/src/assets/languages/tr.json
+++ b/src/assets/languages/tr.json
@@ -43,6 +43,7 @@
     "clear": "Temizle",
     "fullscreenToDoModal": "Tam ekranda yapılacakların ayrıntıları",
     "moveCompletedSubTaskToBottom": "Tamamlanan görevleri en alta taşı",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Görevleri otomatik olarak tamamlayın",
     "weekStartOnMonday": "Hafta Pazartesi ile başlar"
   },
   "donate": {
diff --git a/src/assets/languages/uk.json b/src/assets/languages/uk.json
index c787527..a038e99 100644
--- a/src/assets/languages/uk.json
+++ b/src/assets/languages/uk.json
@@ -43,6 +43,7 @@
     "clear": "Видалити",
     "fullscreenToDoModal": "Деталі справ на весь екран",
     "moveCompletedSubTaskToBottom": "Перемістіть виконані підзавдання вниз",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Виконуйте завдання автоматично",
     "weekStartOnMonday": "Початок тижня в понеділок"
   },
   "donate": {
diff --git a/src/assets/languages/vi.json b/src/assets/languages/vi.json
index 7881061..2dcbf06 100644
--- a/src/assets/languages/vi.json
+++ b/src/assets/languages/vi.json
@@ -43,6 +43,7 @@
     "moveCompletedTaskToBottom": "Di chuyển công việc đã hoàn thành xuống dưới cùng",
     "moveCompletedSubTaskToBottom": "Di chuyển công việc con đã hoàn thành xuống dưới cùng",
     "fullscreenToDoModal": "Chi tiết Công việc ở chế độ toàn màn hình",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "Hoàn thành nhiệm vụ tự động",
     "weekStartOnMonday": "Tuần bắt đầu vào Thứ Hai"
   },
   "donate": {
diff --git a/src/assets/languages/zh-CN.json b/src/assets/languages/zh-CN.json
index c04a9a4..de9fec9 100644
--- a/src/assets/languages/zh-CN.json
+++ b/src/assets/languages/zh-CN.json
@@ -43,6 +43,7 @@
     "weekStartOnMonday": "从星期一开始",
     "clear": "清除",
     "fullscreenToDoModal": "全屏显示“待办事项详情”",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "自动完成任务",
     "moveCompletedSubTaskToBottom": "将已完成的子任务移到底部"
   },
   "donate": {
diff --git a/src/assets/languages/zh-TW.json b/src/assets/languages/zh-TW.json
index ce669bd..c72f623 100644
--- a/src/assets/languages/zh-TW.json
+++ b/src/assets/languages/zh-TW.json
@@ -43,6 +43,7 @@
     "clear": "刪除",
     "fullscreenToDoModal": "全屏待辦事項詳細信息",
     "moveCompletedSubTaskToBottom": "將完成的子任務移至底部",
+    "autoCompleteTaskWhenAllSubtasksAreDone": "自動完成任務",
     "weekStartOnMonday": "一周從星期一開始"
   },
   "donate": {
diff --git a/src/components/activeToDo.vue b/src/components/activeToDo.vue
index 12f54b8..cea9204 100644
--- a/src/components/activeToDo.vue
+++ b/src/components/activeToDo.vue
@@ -1,33 +1,86 @@
 <template>
-  <div id="todo-item-active" class="todo-item" ref="currentTodo" draggable="true"
-    @dragstart="startDrag($event, activeTodo.toDo, activeTodo.index)" @dragend="endDrag()" @wheel="movingWheel"
-    :class="{ 'dragging': todoDragging }" @mouseleave="hideToDoItem">
+  <div
+    id="todo-item-active"
+    class="todo-item"
+    ref="currentTodo"
+    draggable="true"
+    @dragstart="startDrag($event, activeTodo.toDo, activeTodo.index)"
+    @dragend="endDrag()"
+    @wheel="movingWheel"
+    :class="{ dragging: todoDragging }"
+    @mouseleave="hideToDoItem"
+  >
     <div class="d-flex">
-      <span class="noselect item-text" :class="{ 'checked-todo': activeTodo.toDo.checked }" style="flex-grow: 1"
-        @click="checkTodoClickhandler" @click.middle="showToDoDetails">
-        <span v-if="activeTodo.toDo.color != 'none'" class="cicle-icon" :style="'color: ' + activeTodo.toDo.color" :class="{
-          'bi-check-circle-fill': activeTodo.toDo.checked,
-          'bi-circle-fill': !activeTodo.toDo.checked,
-        }"></span>
-        <span v-else class="cicle-icon"
-          :class="{ 'bi-check-circle': activeTodo.toDo.checked, 'bi-circle': !activeTodo.toDo.checked, }"></span>
+      <span
+        class="noselect item-text"
+        :class="{ 'checked-todo': activeTodo.toDo.checked }"
+        style="flex-grow: 1"
+        @click="checkTodoClickhandler"
+        @click.middle="showToDoDetails"
+      >
+        <span
+          v-if="activeTodo.toDo.color != 'none'"
+          class="cicle-icon"
+          :style="'color: ' + activeTodo.toDo.color"
+          :class="{
+            'bi-check-circle-fill': activeTodo.toDo.checked,
+            'bi-circle-fill': !activeTodo.toDo.checked,
+          }"
+        ></span>
+        <span
+          v-else
+          class="cicle-icon"
+          :class="{
+            'bi-check-circle': activeTodo.toDo.checked,
+            'bi-circle': !activeTodo.toDo.checked,
+          }"
+        ></span>
         <span v-html="todoText"></span>
-        <span class="time-details"> {{ timeFormat(activeTodo.toDo.time) }}
-          <div class="alarm-indicator"
-            :class="{ 'show-alarm-indicator': notificationIndicator && activeTodo.toDo.alarm }"></div>
+        <span class="time-details">
+          {{ timeFormat(activeTodo.toDo.time) }}
+          <div
+            class="alarm-indicator"
+            :class="{
+              'show-alarm-indicator':
+                notificationIndicator && activeTodo.toDo.alarm,
+            }"
+          ></div>
         </span>
       </span>
-      <i class="bi-three-dots todo-item-menu" type="button" @click="showToDoDetails"></i>
+      <i
+        class="bi-three-dots todo-item-menu"
+        type="button"
+        @click="showToDoDetails"
+      ></i>
       <i class="bi-x todo-item-remove" @click="removeTodo"></i>
     </div>
 
-    <div v-if="activeTodo.toDo.subTaskList && activeTodo.toDo.subTaskList.length > 0" class="todo-item-sub-tasks">
+    <div
+      v-if="
+        activeTodo.toDo.subTaskList && activeTodo.toDo.subTaskList.length > 0
+      "
+      class="todo-item-sub-tasks"
+    >
       <ul class="sub-tasks">
-        <li v-for="(subTask, index) in activeTodo.toDo.subTaskList" :key="index" class="sub-task">
-          <div class="d-flex flex-row mt-1" :class="{ 'checked-sub-task': subTask.checked }">
-            <input class="form-check-input" type="checkbox" v-model="subTask.checked"
-              @change="checkSubTask(subTask, index, $event)" />
-            <label class="form-check-label" @click="checkSubTask(subTask, index, $event)">
+        <li
+          v-for="(subTask, index) in activeTodo.toDo.subTaskList"
+          :key="index"
+          class="sub-task"
+        >
+          <div
+            class="d-flex flex-row mt-1"
+            :class="{ 'checked-sub-task': subTask.checked }"
+          >
+            <input
+              class="form-check-input"
+              type="checkbox"
+              v-model="subTask.checked"
+              @change="checkSubTask(subTask, index, $event)"
+            />
+            <label
+              class="form-check-label"
+              @click="checkSubTask(subTask, index, $event)"
+            >
               <span v-html="linkifyText(subTask.text)"></span>
             </label>
           </div>
@@ -42,31 +95,41 @@ import toDoListRepository from "../repositories/toDoListRepository";
 import { Modal, Toast } from "bootstrap";
 import moment from "moment";
 import notifications from "../helpers/notifications";
-import linkifyStr from 'linkify-string';
+import linkifyStr from "linkify-string";
 import ClickHandler from "@manuelernestog/click-handler";
 import tasksHelper from "../helpers/tasksHelper";
 
 export default {
   components: {},
   props: {
-    activeTodo: { required: true, type: Object }
+    activeTodo: { required: true, type: Object },
   },
   data() {
     return {
       editing: false,
       todoDragHover: false,
       todoDragging: false,
-      options: { target: '_blank', defaultProtocol: 'https' },
+      options: { target: "_blank", defaultProtocol: "https" },
       clickhandler: new ClickHandler(),
-      scrollingTimeOut: null
+      scrollingTimeOut: null,
     };
   },
   methods: {
     removeTodo: function () {
-      this.$store.commit("setUndoElement", { type: 'task', todo: this.activeTodo.toDo, index: this.activeTodo.index });
-      this.$store.commit("removeTodo", { toDoListId: this.activeTodo.toDoListId, index: this.activeTodo.index, });
+      this.$store.commit("setUndoElement", {
+        type: "task",
+        todo: this.activeTodo.toDo,
+        index: this.activeTodo.index,
+      });
+      this.$store.commit("removeTodo", {
+        toDoListId: this.activeTodo.toDoListId,
+        index: this.activeTodo.index,
+      });
       notifications.refreshDayNotifications(this, this.activeTodo.toDoListId);
-      toDoListRepository.update(this.activeTodo.toDoListId, this.$store.getters.todoLists[this.activeTodo.toDoListId]);
+      toDoListRepository.update(
+        this.activeTodo.toDoListId,
+        this.$store.getters.todoLists[this.activeTodo.toDoListId]
+      );
       let toast = new Toast(document.getElementById("taskRemoved"));
       toast.show(); // The undo remove acction it's called in todoModal.vue:undoRemoveTask
       this.hideToDoItem();
@@ -77,27 +140,62 @@ export default {
         index: this.activeTodo.index,
       });
 
-      let modal = new Modal(document.getElementById("toDoModal"), { keyboard: false });
+      let modal = new Modal(document.getElementById("toDoModal"), {
+        keyboard: false,
+      });
       modal.show();
     },
     checkTodoClickhandler: function (e) {
       if (e.target.href) return;
 
-      this.$store.commit("checkTodo", { toDoListId: this.activeTodo.toDoListId, index: this.activeTodo.index, });
+      this.$store.commit("checkTodo", {
+        toDoListId: this.activeTodo.toDoListId,
+        index: this.activeTodo.index,
+      });
       var id = this.activeTodo.toDoListId;
       var index = this.activeTodo.index;
-      this.clickhandler.handle(() => { this.checkToDo(id, index) }, this.activeTodo.edit, `${this.activeTodo.toDoListId}${this.activeTodo.index}`);
+      this.clickhandler.handle(
+        () => {
+          this.checkToDo(id, index);
+        },
+        this.activeTodo.edit,
+        `${this.activeTodo.toDoListId}${this.activeTodo.index}`
+      );
     },
     checkToDo: function (toDoListId, index) {
-      if (this.$store.getters.todoLists[toDoListId][index].checked && this.$store.getters.config.moveCompletedTaskToBottom) {
+      if (
+        this.$store.getters.todoLists[toDoListId][index].checked &&
+        this.$store.getters.config.moveCompletedTaskToBottom
+      ) {
         this.$refs.currentTodo.style.display = `none`;
-        this.$store.commit("moveTodoToEnd", { toDoListId: toDoListId, index: index, });
+        this.$store.commit("moveTodoToEnd", {
+          toDoListId: toDoListId,
+          index: index,
+        });
+
+        if (
+          this.autoCompleteTaskWhenAllSubtasksAreDone &&
+          this.$store.getters.todoLists[toDoListId][index].subTaskList.length >
+            0
+        ) {
+          this.$store.getters.todoLists[toDoListId][index].subTaskList.forEach(
+            (el) => (el.checked = true)
+          );
+        }
       }
       if (this.$store.getters.config.autoReorderTasks) {
         this.$refs.currentTodo.style.display = `none`;
-        toDoListRepository.update(toDoListId, tasksHelper.reorderTasksList(this.$store.getters.todoLists[toDoListId]));
+        toDoListRepository.update(
+          toDoListId,
+          tasksHelper.reorderTasksList(
+            this.$store.getters.todoLists[toDoListId]
+          )
+        );
       } else {
-        toDoListRepository.update(toDoListId, this.$store.getters.todoLists[toDoListId]);
+        toDoListRepository.update(
+          toDoListId,
+          this.$store.getters.todoLists[toDoListId]
+        );
       }
       notifications.refreshDayNotifications(this, this.activeTodo.toDoListId);
     },
@@ -115,7 +213,9 @@ export default {
     },
     endDrag: function () {
       this.todoDragging = false;
-      document.getElementById("app-container").classList.remove("dragging-item");
+      document
+        .getElementById("app-container")
+        .classList.remove("dragging-item");
     },
     onDragenter: function () {
       this.todoDragHover = true;
@@ -128,8 +228,27 @@ export default {
 
       if (!e.target.value) subTask.checked = !subTask.checked;
       var todoList = this.activeTodo.toDo.subTaskList;
-      if (subTask.checked && this.moveSubtaskToBotttom) { todoList.push(todoList.splice(index, 1)[0]); }
-      toDoListRepository.update(this.activeTodo.toDoListId, this.$store.getters.todoLists[this.activeTodo.toDoListId]);
+      if (subTask.checked && this.moveSubtaskToBotttom) {
+        todoList.push(todoList.splice(index, 1)[0]);
+      }
+
+      if (this.autoCompleteTaskWhenAllSubtasksAreDone) {
+        this.markParentTaskDone(
+          this.activeTodo.toDo.subTaskList[index].checked
+        );
+      }
+
+      toDoListRepository.update(
+        this.activeTodo.toDoListId,
+        this.$store.getters.todoLists[this.activeTodo.toDoListId]
+      );
+    },
+    markParentTaskDone: function (check) {
+      var result = this.activeTodo.toDo.subTaskList.every((el) => el.checked);
+      //debugger;
+      this.$store.getters.todoLists[this.activeTodo.toDoListId][
+        this.activeTodo.index
+      ].checked = result && check;
     },
     timeFormat: function (date) {
       if (date) {
@@ -152,11 +271,15 @@ export default {
         this.scrollingTimeOut = null;
         document.onmousemove = function () {
           document.onmousemove = null;
-          document.getElementById("todo-item-active").classList.remove("scrolling");
-          document.getElementById("app-container").classList.remove("scrolling");
-        }
+          document
+            .getElementById("todo-item-active")
+            .classList.remove("scrolling");
+          document
+            .getElementById("app-container")
+            .classList.remove("scrolling");
+        };
       }, 400);
-    }
+    },
   },
   computed: {
     todoText: function () {
@@ -168,7 +291,10 @@ export default {
     moveSubtaskToBotttom: function () {
       return this.$store.getters.config.moveCompletedSubTaskToBottom;
     },
-  }
+    autoCompleteTaskWhenAllSubtasksAreDone: function () {
+      return this.$store.getters.config.autoCompleteTaskWhenAllSubtasksAreDone;
+    },
+  },
 };
 </script>
 
diff --git a/src/migrations/migrations.js b/src/migrations/migrations.js
index 14865cb..0e6412a 100644
--- a/src/migrations/migrations.js
+++ b/src/migrations/migrations.js
@@ -49,7 +49,9 @@ function runInBackground() {
   if (!("runInBackground" in config)) {
     config["runInBackground"] = true;
     config["moveOldTasks"] = true;
-    config["dateToShowInitialDonateModal"] = moment().add(15, "d").format("YYYY-MM-DD");
+    config["dateToShowInitialDonateModal"] = moment()
+      .add(15, "d")
+      .format("YYYY-MM-DD");
     config["InitialDonateModalShown"] = false;
     configRepository.update(config);
   }
@@ -82,6 +84,7 @@ function telemetric() {
     config["notificationIndicator"] = true;
     config["autoReorderTasks"] = false;
     config["moveCompletedTaskToBottom"] = true;
+    config["autoCompleteTaskWhenAllSubtasksAreDone"] = true;
     configRepository.update(config);
   }
 }
diff --git a/src/repositories/configRepository.js b/src/repositories/configRepository.js
index f276e5a..31f30ea 100644
--- a/src/repositories/configRepository.js
+++ b/src/repositories/configRepository.js
@@ -25,7 +25,9 @@ export default {
         openOnStartup: true,
         runInBackground: true,
         moveOldTasks: true,
-        dateToShowInitialDonateModal: moment().add(15, "d").format("YYYY-MM-DD"),
+        dateToShowInitialDonateModal: moment()
+          .add(15, "d")
+          .format("YYYY-MM-DD"),
         InitialDonateModalShown: false,
         mainDividerPosition: 1,
         darkTrayIcon: false,
@@ -36,9 +38,10 @@ export default {
         autoReorderTasks: false,
         moveCompletedTaskToBottom: true,
         moveCompletedSubTaskToBottom: true,
+        autoCompleteTaskWhenAllSubtasksAreDone: true,
         fullscreenToDoModal: false,
         weekStartOnMonday: true,
-        lastDayOpened: moment().format("YYYY-MM-DD")
+        lastDayOpened: moment().format("YYYY-MM-DD"),
       };
       storageRepository.set("config", default_config);
       return default_config;
diff --git a/src/views/configModal.vue b/src/views/configModal.vue
index 1792fcd..1f5a2bc 100644
--- a/src/views/configModal.vue
+++ b/src/views/configModal.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="modal fade" id="configModal" tabindex="-1"
-    aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div
+    class="modal fade"
+    id="configModal"
+    tabindex="-1"
+    aria-labelledby="exampleModalLabel"
+    aria-hidden="true"
+  >
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header">
@@ -8,241 +13,576 @@
           <i class="bi-x close-modal" data-bs-dismiss="modal"></i>
         </div>
         <div class="modal-body px-0" style="display: flex">
-          <ul class="nav nav-tabs" id="confTab" role="tablist" style="display: none">
+          <ul
+            class="nav nav-tabs"
+            id="confTab"
+            role="tablist"
+            style="display: none"
+          >
             <li class="nav-item" role="presentation">
-              <button class="nav-link active" id="config-home-tab" data-bs-toggle="tab" data-bs-target="#config-home"
-                role="tab">
+              <button
+                class="nav-link active"
+                id="config-home-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#config-home"
+                role="tab"
+              >
                 Home
               </button>
             </li>
             <li class="nav-item" role="presentation">
-              <button class="nav-link" id="config-general-tab" data-bs-toggle="tab" data-bs-target="#config-general"
-                role="tab">
+              <button
+                class="nav-link"
+                id="config-general-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#config-general"
+                role="tab"
+              >
                 General
               </button>
             </li>
             <li class="nav-item" role="presentation">
-              <button class="nav-link" id="config-display-tab" data-bs-toggle="tab" data-bs-target="#config-display"
-                role="tab">
+              <button
+                class="nav-link"
+                id="config-display-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#config-display"
+                role="tab"
+              >
                 Display
               </button>
             </li>
             <li class="nav-item" role="presentation">
-              <button class="nav-link" id="config-notifications-tab" data-bs-toggle="tab"
-                data-bs-target="#config-notifications" role="tab">
+              <button
+                class="nav-link"
+                id="config-notifications-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#config-notifications"
+                role="tab"
+              >
                 Notifications
               </button>
             </li>
             <li class="nav-item" role="presentation">
-              <button class="nav-link" id="config-data-tab" data-bs-toggle="tab" data-bs-target="#config-data" role="tab">
+              <button
+                class="nav-link"
+                id="config-data-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#config-data"
+                role="tab"
+              >
                 Data
               </button>
             </li>
             <li class="nav-item" role="presentation">
-              <button class="nav-link" id="config-language-tab" data-bs-toggle="tab" data-bs-target="#config-language"
-                role="tab">
+              <button
+                class="nav-link"
+                id="config-language-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#config-language"
+                role="tab"
+              >
                 Language
               </button>
             </li>
             <li class="nav-item" role="presentation">
-              <button class="nav-link" id="config-behavior-tab" data-bs-toggle="tab" data-bs-target="#config-behavior"
-                role="tab">
+              <button
+                class="nav-link"
+                id="config-behavior-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#config-behavior"
+                role="tab"
+              >
                 Behavior
               </button>
             </li>
           </ul>
 
-          <div id="config-links-menu" class="tab-pane fade show" style="width: 340px;">
+          <div
+            id="config-links-menu"
+            class="tab-pane fade show"
+            style="width: 340px"
+          >
             <link-list :linkList="configLinks"></link-list>
           </div>
 
-          <div class="tab-content px-4" id="confTab-content" style="width: 100%; height: 400px; overflow-y: auto;">
+          <div
+            class="tab-content px-4"
+            id="confTab-content"
+            style="width: 100%; height: 400px; overflow-y: auto"
+          >
             <div class="tab-pane fade active show" id="config-general">
               <div class="d-flex flex-column mt-2 h-100">
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="calendarSetting">{{ $t("settings.calendar") }}</label>
-                  <input class="form-check-input" type="checkbox" id="calendarSetting" v-model="configData.calendar"
-                    @change="changeConfig('calendar', configData.calendar)" />
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="calendarSetting"
+                    >{{ $t("settings.calendar") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="calendarSetting"
+                    v-model="configData.calendar"
+                    @change="changeConfig('calendar', configData.calendar)"
+                  />
                 </div>
 
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="customListsSetting">{{ $t("settings.customLists")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="customListsSetting" v-model="configData.customList"
-                    @change="changeConfig('customList', configData.customList)" />
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="customListsSetting"
+                    >{{ $t("settings.customLists") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="customListsSetting"
+                    v-model="configData.customList"
+                    @change="changeConfig('customList', configData.customList)"
+                  />
                 </div>
 
-                <div v-if="isElectron()" class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
+                <div
+                  v-if="isElectron()"
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
                   <label class="form-check-label" for="updatesCheckSetting">{{
                     $t("settings.checkUpdates")
                   }}</label>
-                  <input class="form-check-input" type="checkbox" id="updatesCheckSetting"
-                    v-model="configData.checkUpdates" @change="changeConfig('checkUpdates', configData.checkUpdates)" />
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="updatesCheckSetting"
+                    v-model="configData.checkUpdates"
+                    @change="
+                      changeConfig('checkUpdates', configData.checkUpdates)
+                    "
+                  />
                 </div>
 
-                <div v-if="isElectron()" class=" form-check form-switch d-flex px-1 mb-3 justify-content-between">
+                <div
+                  v-if="isElectron()"
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
                   <label class="form-check-label" for="openOnStartup">{{
                     $t("settings.openOnStartup")
                   }}</label>
-                  <input class="form-check-input" type="checkbox" id="openOnStartup" v-model="configData.openOnStartup"
-                    @change="setOpenOnStart()" />
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="openOnStartup"
+                    v-model="configData.openOnStartup"
+                    @change="setOpenOnStart()"
+                  />
                 </div>
-                <div v-if="isElectron()" class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
+                <div
+                  v-if="isElectron()"
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
                   <label class="form-check-label" for="runInBackground">
                     <span>
                       {{ $t("settings.runInBackground") }}
                       <sup>
-                        <i class="bi-info-circle" style="cursor: help" :title="$t('settings.runInBackgroundInfo')"> </i>
+                        <i
+                          class="bi-info-circle"
+                          style="cursor: help"
+                          :title="$t('settings.runInBackgroundInfo')"
+                        >
+                        </i>
                       </sup>
                     </span>
                   </label>
-                  <input class="form-check-input" type="checkbox" id="runInBackground"
-                    v-model="configData.runInBackground" @change="setRunInBackground()" />
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="runInBackground"
+                    v-model="configData.runInBackground"
+                    @change="setRunInBackground()"
+                  />
                 </div>
 
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="reportErrors">{{ $t("settings.reportErrors")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="reportErrors" v-model="configData.reportErrors"
-                    @change="setSendErrors()" />
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="reportErrors"
+                    >{{ $t("settings.reportErrors") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="reportErrors"
+                    v-model="configData.reportErrors"
+                    @change="setSendErrors()"
+                  />
                 </div>
               </div>
             </div>
             <div class="tab-pane fade" id="config-behavior">
               <div class="d-flex flex-column mt-2 h-100">
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="moveOldTasks">{{ $t("settings.moveOldTasks")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="moveOldTasks" v-model="configData.moveOldTasks"
-                    @change="changeConfig('moveOldTasks', configData.moveOldTasks)" />
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="moveOldTasks"
+                    >{{ $t("settings.moveOldTasks") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="moveOldTasks"
+                    v-model="configData.moveOldTasks"
+                    @change="
+                      changeConfig('moveOldTasks', configData.moveOldTasks)
+                    "
+                  />
                 </div>
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="weekStartOnMonday">{{ $t("settings.weekStartOnMonday")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="weekStartOnMonday" v-model="configData.weekStartOnMonday"
-                    @change="changeConfig('weekStartOnMonday', configData.weekStartOnMonday)" />
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="weekStartOnMonday"
+                    >{{ $t("settings.weekStartOnMonday") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="weekStartOnMonday"
+                    v-model="configData.weekStartOnMonday"
+                    @change="
+                      changeConfig(
+                        'weekStartOnMonday',
+                        configData.weekStartOnMonday
+                      )
+                    "
+                  />
                 </div>
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="moveOldTasks">{{ $t("settings.startCalendarYesterday")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="moveOldTasks"
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="moveOldTasks"
+                    >{{ $t("settings.startCalendarYesterday") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="moveOldTasks"
                     v-model="configData.startCalendarYesterday"
-                    @change="changeConfig('startCalendarYesterday', configData.startCalendarYesterday)" />
+                    @change="
+                      changeConfig(
+                        'startCalendarYesterday',
+                        configData.startCalendarYesterday
+                      )
+                    "
+                  />
                 </div>
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="autoReorderTasks">{{ $t("settings.autoReorderTasks")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="autoReorderTasks"
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="autoReorderTasks"
+                    >{{ $t("settings.autoReorderTasks") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="autoReorderTasks"
                     v-model="configData.autoReorderTasks"
-                    @change="changeConfig('autoReorderTasks', configData.autoReorderTasks)" />
+                    @change="
+                      changeConfig(
+                        'autoReorderTasks',
+                        configData.autoReorderTasks
+                      )
+                    "
+                  />
                 </div>
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="moveCompletedTaskToBottom">{{
-                    $t("settings.moveCompletedTaskToBottom")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="moveCompletedTaskToBottom"
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="moveCompletedTaskToBottom"
+                    >{{ $t("settings.moveCompletedTaskToBottom") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="moveCompletedTaskToBottom"
                     v-model="configData.moveCompletedTaskToBottom"
-                    @change="changeConfig('moveCompletedTaskToBottom', configData.moveCompletedTaskToBottom)" />
+                    @change="
+                      changeConfig(
+                        'moveCompletedTaskToBottom',
+                        configData.moveCompletedTaskToBottom
+                      )
+                    "
+                  />
                 </div>
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
-                  <label class="form-check-label flex-fill" for="moveCompletedSubTaskToBottom">{{
-                    $t("settings.moveCompletedSubTaskToBottom")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="moveCompletedSubTaskToBottom"
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="moveCompletedSubTaskToBottom"
+                    >{{ $t("settings.moveCompletedSubTaskToBottom") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="moveCompletedSubTaskToBottom"
                     v-model="configData.moveCompletedSubTaskToBottom"
-                    @change="changeConfig('moveCompletedSubTaskToBottom', configData.moveCompletedSubTaskToBottom)" />
+                    @change="
+                      changeConfig(
+                        'moveCompletedSubTaskToBottom',
+                        configData.moveCompletedSubTaskToBottom
+                      )
+                    "
+                  />
+                </div>
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="moveCompletedSubTaskToBottom"
+                    >{{ $t("settings.moveCompletedSubTaskToBottom") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="moveCompletedSubTaskToBottom"
+                    v-model="configData.moveCompletedSubTaskToBottom"
+                    @change="
+                      changeConfig(
+                        'moveCompletedSubTaskToBottom',
+                        configData.moveCompletedSubTaskToBottom
+                      )
+                    "
+                  />
+                </div>
+
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label flex-fill"
+                    for="autoCompleteTaskWhenAllSubtasksAreDone"
+                    >{{
+                      $t("settings.autoCompleteTaskWhenAllSubtasksAreDone")
+                    }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="autoCompleteTaskWhenAllSubtasksAreDone"
+                    v-model="configData.autoCompleteTaskWhenAllSubtasksAreDone"
+                    @change="
+                      changeConfig(
+                        'autoCompleteTaskWhenAllSubtasksAreDone',
+                        configData.autoCompleteTaskWhenAllSubtasksAreDone
+                      )
+                    "
+                  />
                 </div>
               </div>
             </div>
             <div class="tab-pane fade" id="config-display">
               <div class="d-flex flex-column mt-2 h-100">
-
-
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
                   <label class="form-check-label" for="darkThemeSetting">{{
                     $t("settings.darkTheme")
                   }}</label>
-                  <input class="form-check-input" type="checkbox" id="darkThemeSetting" v-model="configData.darkTheme"
-                    @change="changeConfig('darkTheme', configData.darkTheme)" />
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="darkThemeSetting"
+                    v-model="configData.darkTheme"
+                    @change="changeConfig('darkTheme', configData.darkTheme)"
+                  />
                 </div>
 
-                <div v-if="isElectron()" class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
+                <div
+                  v-if="isElectron()"
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
                   <label class="form-check-label" for="darkTrayIcon">{{
                     $t("settings.darkIcon")
                   }}</label>
-                  <input class="form-check-input" type="checkbox" id="darkTrayIcon" v-model="configData.darkTrayIcon"
-                    @change="setDarkTrayIcon" />
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="darkTrayIcon"
+                    v-model="configData.darkTrayIcon"
+                    @change="setDarkTrayIcon"
+                  />
                 </div>
                 <div class="horizontal-divider mb-3"></div>
                 <div class="px-1 mb-3">
-                  <label for="columnsConfig" class="form-check-label">{{ $t("settings.columns") }}: {{
-                    configData.columns
-                  }}</label>
-                  <input type="range" class="form-range mt-2 px-2" min="1" max="12" id="columnsConfig"
-                    v-model="configData.columns" @change="changeConfig('columns', configData.columns)" />
+                  <label for="columnsConfig" class="form-check-label"
+                    >{{ $t("settings.columns") }}:
+                    {{ configData.columns }}</label
+                  >
+                  <input
+                    type="range"
+                    class="form-range mt-2 px-2"
+                    min="1"
+                    max="12"
+                    id="columnsConfig"
+                    v-model="configData.columns"
+                    @change="changeConfig('columns', configData.columns)"
+                  />
                 </div>
 
                 <div class="px-1 mb-3">
-                  <label for="columnsConfig" class="form-check-label">{{ $t("settings.lists_columns") }}: {{
-                    configData.customColumns
-                  }}</label>
-                  <input type="range" class="form-range mt-2 px-2" min="1" max="12" id="columnsConfig"
+                  <label for="columnsConfig" class="form-check-label"
+                    >{{ $t("settings.lists_columns") }}:
+                    {{ configData.customColumns }}</label
+                  >
+                  <input
+                    type="range"
+                    class="form-range mt-2 px-2"
+                    min="1"
+                    max="12"
+                    id="columnsConfig"
                     v-model="configData.customColumns"
-                    @change="changeConfig('customColumns', configData.customColumns)" />
+                    @change="
+                      changeConfig('customColumns', configData.customColumns)
+                    "
+                  />
                 </div>
 
                 <div class="px-1 mb-3 zoom-config">
-                  <label for="zoomConfig" class="form-check-label">{{ $t("settings.zoom") }}: {{ configData.zoom
-                  }}%</label>
-                  <input type="range" class="form-range mt-2 px-2" min="50" max="200" id="zoomConfig" step="5"
-                    v-model="configData.zoom" @change="changeConfig('zoom', configData.zoom)" />
+                  <label for="zoomConfig" class="form-check-label"
+                    >{{ $t("settings.zoom") }}: {{ configData.zoom }}%</label
+                  >
+                  <input
+                    type="range"
+                    class="form-range mt-2 px-2"
+                    min="50"
+                    max="200"
+                    id="zoomConfig"
+                    step="5"
+                    v-model="configData.zoom"
+                    @change="changeConfig('zoom', configData.zoom)"
+                  />
                 </div>
 
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
                   <label class="form-check-label" for="compactViewSetting">{{
                     $t("settings.compactView")
                   }}</label>
-                  <input class="form-check-input" type="checkbox" id="compactViewSetting" v-model="configData.compactView"
-                    @change="changeConfig('compactView', configData.compactView)" />
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="compactViewSetting"
+                    v-model="configData.compactView"
+                    @change="
+                      changeConfig('compactView', configData.compactView)
+                    "
+                  />
                 </div>
-                <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between">
+                <div
+                  class="form-check form-switch d-flex px-1 mb-3 justify-content-between"
+                >
                   <label class="form-check-label" for="fullscreenToDoModal">{{
                     $t("settings.fullscreenToDoModal")
                   }}</label>
-                  <input class="form-check-input" type="checkbox" id="fullscreenToDoModal"
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="fullscreenToDoModal"
                     v-model="configData.fullscreenToDoModal"
-                    @change="changeConfig('fullscreenToDoModal', configData.fullscreenToDoModal)" />
+                    @change="
+                      changeConfig(
+                        'fullscreenToDoModal',
+                        configData.fullscreenToDoModal
+                      )
+                    "
+                  />
                 </div>
               </div>
             </div>
             <div class="tab-pane fade" id="config-notifications">
               <div class="d-flex flex-column mt-3 h-100">
-                <div v-if="isElectron()" class="orm-check form-switch d-flex px-0 mb-3  justify-content-between">
-                  <label class="form-check-label" style="margin-left: 0px" for="notificationOnStartup">{{
-                    $t("settings.notificationOnStartup")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="notificationOnStartup"
+                <div
+                  v-if="isElectron()"
+                  class="orm-check form-switch d-flex px-0 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label"
+                    style="margin-left: 0px"
+                    for="notificationOnStartup"
+                    >{{ $t("settings.notificationOnStartup") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="notificationOnStartup"
                     v-model="configData.notificationOnStartup"
-                    @change="changeConfig('notificationOnStartup', configData.notificationOnStartup)" />
+                    @change="
+                      changeConfig(
+                        'notificationOnStartup',
+                        configData.notificationOnStartup
+                      )
+                    "
+                  />
                 </div>
 
-                <div class="form-check form-switch d-flex px-0 mb-3  justify-content-between">
-                  <label class="form-check-label" style="margin-left: 0px" for="notificationIndicator">{{
-                    $t("settings.notificationIndicator")
-                  }}</label>
-                  <input class="form-check-input" type="checkbox" id="notificationIndicator"
+                <div
+                  class="form-check form-switch d-flex px-0 mb-3 justify-content-between"
+                >
+                  <label
+                    class="form-check-label"
+                    style="margin-left: 0px"
+                    for="notificationIndicator"
+                    >{{ $t("settings.notificationIndicator") }}</label
+                  >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    id="notificationIndicator"
                     v-model="configData.notificationIndicator"
-                    @change="changeConfig('notificationIndicator', configData.notificationIndicator)" />
+                    @change="
+                      changeConfig(
+                        'notificationIndicator',
+                        configData.notificationIndicator
+                      )
+                    "
+                  />
                 </div>
 
                 <div class="horizontal-divider mb-3"></div>
 
-                <label for="notificationSound" class="form-label">{{ $t("settings.notificationSound") }}:</label>
+                <label for="notificationSound" class="form-label"
+                  >{{ $t("settings.notificationSound") }}:</label
+                >
                 <div class="d-flex">
-                  <select id="notificationSound" class="col-sm-9 form-select flex-fill"
-                    aria-label="Default select example" v-model="configData.notificationSound" @change="
-                      changeConfig('notificationSound', configData.notificationSound)
-                      ">
+                  <select
+                    id="notificationSound"
+                    class="col-sm-9 form-select flex-fill"
+                    aria-label="Default select example"
+                    v-model="configData.notificationSound"
+                    @change="
+                      changeConfig(
+                        'notificationSound',
+                        configData.notificationSound
+                      )
+                    "
+                  >
                     <option value="none">None</option>
                     <option value="pop">Pop</option>
                     <option value="bell">Bell</option>
@@ -253,55 +593,100 @@
                     <option value="positive">Positive</option>
                     <option value="metal">Metal</option>
                   </select>
-                  <button class="btn" style="margin-left: 8px" type="button" @click="playSound">
+                  <button
+                    class="btn"
+                    style="margin-left: 8px"
+                    type="button"
+                    @click="playSound"
+                  >
                     <i class="bi-play-circle a"></i>
                   </button>
                 </div>
               </div>
-
-
             </div>
             <div class="tab-pane fade" id="config-data">
               <div class="d-flex flex-column mt-2 h-100">
                 <div>
                   <div>
-                    <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between align-items-center">
-                      <label class="form-check-label" for="export-data-btn">{{ $t("settings.exportData") }}</label>
-                      <button id="export-data-btn" type="button" class="btn py-1 px-2 border" style="width: 140px;"
-                        @click="exportData">
+                    <div
+                      class="form-check form-switch d-flex px-1 mb-3 justify-content-between align-items-center"
+                    >
+                      <label class="form-check-label" for="export-data-btn">{{
+                        $t("settings.exportData")
+                      }}</label>
+                      <button
+                        id="export-data-btn"
+                        type="button"
+                        class="btn py-1 px-2 border"
+                        style="width: 140px"
+                        @click="exportData"
+                      >
                         <i class="icons bi-cloud-arrow-down mx-2"></i>
                         {{ $t("settings.export") }}
                       </button>
                     </div>
 
-                    <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between align-items-center">
-                      <label class="form-check-label" for="import-data-btn">{{ $t("settings.importData") }}</label>
-                      <button id="import-data-btn" type="button" class="btn py-1 px-2 border" style="width: 140px;"
-                        @click="$refs.loadData.click">
+                    <div
+                      class="form-check form-switch d-flex px-1 mb-3 justify-content-between align-items-center"
+                    >
+                      <label class="form-check-label" for="import-data-btn">{{
+                        $t("settings.importData")
+                      }}</label>
+                      <button
+                        id="import-data-btn"
+                        type="button"
+                        class="btn py-1 px-2 border"
+                        style="width: 140px"
+                        @click="$refs.loadData.click"
+                      >
                         <i class="icons bi-cloud-arrow-up mx-2"></i>
                         {{ $t("settings.import") }}
                       </button>
                     </div>
 
-                    <div class="form-check form-switch d-flex px-1 mb-3 justify-content-between align-items-center">
-                      <label class="form-check-label" for="clear-data-btn">{{ $t("settings.clearData") }}</label>
-                      <button id="clear-data-btn" type="button" class="btn py-1 px-2 border" style="width: 140px;"
-                        data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#clearDataModal">
+                    <div
+                      class="form-check form-switch d-flex px-1 mb-3 justify-content-between align-items-center"
+                    >
+                      <label class="form-check-label" for="clear-data-btn">{{
+                        $t("settings.clearData")
+                      }}</label>
+                      <button
+                        id="clear-data-btn"
+                        type="button"
+                        class="btn py-1 px-2 border"
+                        style="width: 140px"
+                        data-bs-dismiss="modal"
+                        data-bs-toggle="modal"
+                        data-bs-target="#clearDataModal"
+                      >
                         <i class="icons bi-x-circle mx-2"></i>
                         {{ $t("settings.clear") }}
                       </button>
                     </div>
                   </div>
-                  <input type="file" id="file-selector" class="d-none" accept=".wtdb" ref="loadData"
-                    @change="importData($event)" />
+                  <input
+                    type="file"
+                    id="file-selector"
+                    class="d-none"
+                    accept=".wtdb"
+                    ref="loadData"
+                    @change="importData($event)"
+                  />
                 </div>
               </div>
             </div>
             <div class="tab-pane fade" id="config-language">
               <div class="d-flex flex-column mt-2 h-100">
-                <label for="language" class="form-label">{{ $t("settings.language") }}:</label>
-                <select id="language" class="col-sm-9 form-select" aria-label="Default select example"
-                  v-model="configData.language" @change="setLanguage">
+                <label for="language" class="form-label"
+                  >{{ $t("settings.language") }}:</label
+                >
+                <select
+                  id="language"
+                  class="col-sm-9 form-select"
+                  aria-label="Default select example"
+                  v-model="configData.language"
+                  @change="setLanguage"
+                >
                   <option value="en">English</option>
                   <option value="es">Español</option>
                   <option value="fr">Français</option>
@@ -328,7 +713,11 @@
       </div>
     </div>
     <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1056">
-      <toast-message ref="invalidFile" id="invalidFile" text="$t('settings.invalidFile')"></toast-message>
+      <toast-message
+        ref="invalidFile"
+        id="invalidFile"
+        text="$t('settings.invalidFile')"
+      ></toast-message>
     </div>
   </div>
 </template>
@@ -370,16 +759,26 @@ export default {
       });
     },
     exportData: function () {
-      let configModal = Modal.getInstance(document.getElementById("configModal"));
+      let configModal = Modal.getInstance(
+        document.getElementById("configModal")
+      );
       configModal.hide();
-      let exportingModal = new Modal(document.getElementById("exportingModal"), { backdrop: "static" });
+      let exportingModal = new Modal(
+        document.getElementById("exportingModal"),
+        { backdrop: "static" }
+      );
       exportingModal.show();
       exportTool.export();
     },
     importData: function (event) {
-      let configModal = Modal.getInstance(document.getElementById("configModal"));
+      let configModal = Modal.getInstance(
+        document.getElementById("configModal")
+      );
       configModal.hide();
-      let importingModal = new Modal(document.getElementById("importingModal"), { backdrop: "static" });
+      let importingModal = new Modal(
+        document.getElementById("importingModal"),
+        { backdrop: "static" }
+      );
       importingModal.show();
       exportTool.import(event);
     },
@@ -394,8 +793,11 @@ export default {
       this.changeConfig("openOnStartup", this.configData.openOnStartup);
       this.$nextTick(function () {
         if (this.isElectron()) {
-          const { ipcRenderer } = require('electron');
-          ipcRenderer.send('set-open-on-startup', this.configData.openOnStartup);
+          const { ipcRenderer } = require("electron");
+          ipcRenderer.send(
+            "set-open-on-startup",
+            this.configData.openOnStartup
+          );
         }
       });
     },
@@ -403,28 +805,34 @@ export default {
       this.changeConfig("runInBackground", this.configData.runInBackground);
       this.$nextTick(function () {
         if (this.isElectron()) {
-          const { ipcRenderer } = require('electron');
-          ipcRenderer.send('set-run-in-background', this.configData.runInBackground);
+          const { ipcRenderer } = require("electron");
+          ipcRenderer.send(
+            "set-run-in-background",
+            this.configData.runInBackground
+          );
         }
       });
     },
     setLanguage: function () {
-      this.changeConfig('language', this.configData.language);
+      this.changeConfig("language", this.configData.language);
       this.$nextTick(function () {
         if (this.isElectron()) {
-          const { ipcRenderer } = require('electron');
-          ipcRenderer.send('set-tray-context-menu-label', { open: this.$t("ui.open"), quit: this.$t("ui.quit") });
+          const { ipcRenderer } = require("electron");
+          ipcRenderer.send("set-tray-context-menu-label", {
+            open: this.$t("ui.open"),
+            quit: this.$t("ui.quit"),
+          });
         }
       });
     },
     setSendErrors: function () {
-      this.changeConfig('reportErrors', this.configData.reportErrors);
+      this.changeConfig("reportErrors", this.configData.reportErrors);
     },
     setDarkTrayIcon: function () {
-      this.changeConfig('darkTrayIcon', this.configData.darkTrayIcon);
+      this.changeConfig("darkTrayIcon", this.configData.darkTrayIcon);
       this.$nextTick(function () {
-        const { ipcRenderer } = require('electron');
-        ipcRenderer.send('set-dark-tray-icon', this.configData.darkTrayIcon);
+        const { ipcRenderer } = require("electron");
+        ipcRenderer.send("set-dark-tray-icon", this.configData.darkTrayIcon);
       });
     },
     playSound: function () {
@@ -440,8 +848,8 @@ export default {
     watch: {
       configProp: function (newVal) {
         this.configData = newVal;
-      }
-    }
+      },
+    },
   },
 };
 </script>
@@ -457,12 +865,11 @@ export default {
 #config-links-menu {
   border-right: 1px solid rgba(0, 0, 0, 0.06);
 
-.dark-theme & {
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-}
+  .dark-theme & {
+    border-right: 1px solid rgba(255, 255, 255, 0.06);
+  }
 }
 
-
 .icons {
   font-size: 18px;
   margin-right: 5px;
@@ -512,10 +919,9 @@ export default {
   }
 }
 
-
 @-moz-document url-prefix() {
   .zoom-config {
     display: none;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/toDoModal/toDoModal.vue b/src/views/toDoModal/toDoModal.vue
index f1a4cf7..bbbe8c9 100644
--- a/src/views/toDoModal/toDoModal.vue
+++ b/src/views/toDoModal/toDoModal.vue
@@ -1,27 +1,62 @@
 <template>
-  <div class="modal fade" :class="{ 'fullscreen': fullscreenToDoModal }" @keydown.esc="pressEsc" id="toDoModal"
-    tabindex="-1" aria-hidden="true">
+  <div
+    class="modal fade"
+    :class="{ fullscreen: fullscreenToDoModal }"
+    @keydown.esc="pressEsc"
+    id="toDoModal"
+    tabindex="-1"
+    aria-hidden="true"
+  >
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header d-flex">
           <div class="todo-list-selector">
             <div class="d-flex align-items-center">
-              <div v-show="showingCalendar" class="align-items-center date-picker-btn" @click="showCalendar()">
+              <div
+                v-show="showingCalendar"
+                class="align-items-center date-picker-btn"
+                @click="showCalendar()"
+              >
                 <i class="bi-calendar-event mx-2"></i>
-                <datepicker id="todo-date-picker-input" class="py-2" v-model="pickedDate" :locale="language"
-                  :input-format='"dd/MM/yyyy"' :weekStartsOn="weekStartOnMonday" />
+                <datepicker
+                  id="todo-date-picker-input"
+                  class="py-2"
+                  v-model="pickedDate"
+                  :locale="language"
+                  :input-format="'dd/MM/yyyy'"
+                  :weekStartsOn="weekStartOnMonday"
+                />
               </div>
-              <div v-show="!showingCalendar" class="align-items-center date-picker-btn">
-                <div class="align-items-center date-picker-btn py-2" id="customListDropDown" data-bs-toggle="dropdown">
+              <div
+                v-show="!showingCalendar"
+                class="align-items-center date-picker-btn"
+              >
+                <div
+                  class="align-items-center date-picker-btn py-2"
+                  id="customListDropDown"
+                  data-bs-toggle="dropdown"
+                >
                   <i class="bi-view-list mx-2"></i>
                   <div id="todo-list-select">{{ pickedCListName }}</div>
                 </div>
                 <ul class="dropdown-menu" aria-labelledby="customListDropDown">
-                  <li v-for="option in cListOptions" :key="option.listId" :value="option.listId">
-                    <button class="dropdown-item" type="button" @click="pickedCList = option.listId">
-                      <i class="bi-check2" :style="{
-                        visibility: option.listId == pickedCList ? 'visible' : 'hidden',
-                      }"></i>
+                  <li
+                    v-for="option in cListOptions"
+                    :key="option.listId"
+                    :value="option.listId"
+                  >
+                    <button
+                      class="dropdown-item"
+                      type="button"
+                      @click="pickedCList = option.listId"
+                    >
+                      <i
+                        class="bi-check2"
+                        :style="{
+                          visibility:
+                            option.listId == pickedCList ? 'visible' : 'hidden',
+                        }"
+                      ></i>
                       <span>{{ option.listName }}</span>
                     </button>
                   </li>
@@ -29,16 +64,29 @@
               </div>
               <div v-if="showCL && showCal" class="d-flex align-items-center">
                 <div class="selector-divider"></div>
-                <i id="btnGroupDrop1" class="bi-chevron-down p-2" type="button" data-bs-toggle="dropdown"></i>
+                <i
+                  id="btnGroupDrop1"
+                  class="bi-chevron-down p-2"
+                  type="button"
+                  data-bs-toggle="dropdown"
+                ></i>
                 <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                   <li>
-                    <button class="dropdown-item" type="button" @click="showingCalendar = true">
+                    <button
+                      class="dropdown-item"
+                      type="button"
+                      @click="showingCalendar = true"
+                    >
                       <i class="bi-calendar-check"></i>
                       <span>{{ $t("settings.calendar") }}</span>
                     </button>
                   </li>
                   <li>
-                    <button class="dropdown-item" type="button" @click="showingCalendar = false">
+                    <button
+                      class="dropdown-item"
+                      type="button"
+                      @click="showingCalendar = false"
+                    >
                       <i class="bi-view-list"></i>
                       <span>{{ $t("settings.customLists") }}</span>
                     </button>
@@ -48,15 +96,37 @@
             </div>
           </div>
           <div class="d-flex ms-auto align-items-center">
-            <time-picker :time="todo.time" @time-selected="changeTime"></time-picker>
-            <i :class="{ 'bi-bell': !todo.alarm, 'bi-bell-fill': todo.alarm }" class="header-menu-icons"
-              @click="changeAlarm" :title="$t('todoDetails.alarm')"></i>
-            <repeating-event v-if="showingCalendar" :repeatingEvent="todo.repeatingEvent" :todo="todo"
-              @repeatingEventSelected="changeRepeatingEvent"></repeating-event>
-            <color-picker :color="todo.color" @color-selected="changeColor"></color-picker>
-            <i id="btnTaskOptionMenu" class="bi-three-dots-vertical header-menu-icons" type="button"
-              data-bs-toggle="dropdown" :title="$t('todoDetails.actions')"></i>
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btnTaskOptionMenu">
+            <time-picker
+              :time="todo.time"
+              @time-selected="changeTime"
+            ></time-picker>
+            <i
+              :class="{ 'bi-bell': !todo.alarm, 'bi-bell-fill': todo.alarm }"
+              class="header-menu-icons"
+              @click="changeAlarm"
+              :title="$t('todoDetails.alarm')"
+            ></i>
+            <repeating-event
+              v-if="showingCalendar"
+              :repeatingEvent="todo.repeatingEvent"
+              :todo="todo"
+              @repeatingEventSelected="changeRepeatingEvent"
+            ></repeating-event>
+            <color-picker
+              :color="todo.color"
+              @color-selected="changeColor"
+            ></color-picker>
+            <i
+              id="btnTaskOptionMenu"
+              class="bi-three-dots-vertical header-menu-icons"
+              type="button"
+              data-bs-toggle="dropdown"
+              :title="$t('todoDetails.actions')"
+            ></i>
+            <ul
+              class="dropdown-menu dropdown-menu-end"
+              aria-labelledby="btnTaskOptionMenu"
+            >
               <li>
                 <button class="dropdown-item" type="button" @click="copyTodo">
                   <i class="bi-clipboard"></i>
@@ -64,7 +134,12 @@
                 </button>
               </li>
               <li>
-                <button class="dropdown-item" type="button" @click="duplicateTodo" data-bs-dismiss="modal">
+                <button
+                  class="dropdown-item"
+                  type="button"
+                  @click="duplicateTodo"
+                  data-bs-dismiss="modal"
+                >
                   <i class="bi-back"></i>
                   <span>{{ $t("todoDetails.duplicate") }}</span>
                 </button>
@@ -73,63 +148,145 @@
                 <hr class="dropdown-divider" />
               </li>
               <li>
-                <button class="dropdown-item" type="button" @click="removeTodo" data-bs-dismiss="modal">
+                <button
+                  class="dropdown-item"
+                  type="button"
+                  @click="removeTodo"
+                  data-bs-dismiss="modal"
+                >
                   <i class="bi-trash"></i> <span>{{ $t("ui.remove") }}</span>
                 </button>
               </li>
               <li v-if="todo.repeatingEvent">
-                <button class="dropdown-item" type="button" @click="removeAll" data-bs-dismiss="modal">
+                <button
+                  class="dropdown-item"
+                  type="button"
+                  @click="removeAll"
+                  data-bs-dismiss="modal"
+                >
                   <i class="bi-trash"></i> <span>{{ $t("ui.removeAll") }}</span>
                 </button>
               </li>
             </ul>
             <div>
-              <i class="bi-x close-modal header-menu-icons" ref="closeModal" data-bs-dismiss="modal"
-                :title="$t('todoDetails.close')"></i>
+              <i
+                class="bi-x close-modal header-menu-icons"
+                ref="closeModal"
+                data-bs-dismiss="modal"
+                :title="$t('todoDetails.close')"
+              ></i>
             </div>
           </div>
         </div>
         <div class="modal-body">
           <div class="form-check">
-            <input class="form-check-input" type="checkbox" value="" id="todo-header" v-model="todo.checked"
-              @change="checkTodoClickhandler(false)" />
+            <input
+              class="form-check-input"
+              type="checkbox"
+              value=""
+              id="todo-header"
+              v-model="todo.checked"
+              @change="checkTodoClickhandler(false)"
+            />
             <div class="title-container">
-              <label v-show="!editingTitle" class="form-check-label todo-title" for="todo-header"
-                :class="{ 'completed-task': todo.checked }" @dblclick="editTitle">
+              <label
+                v-show="!editingTitle"
+                class="form-check-label todo-title"
+                for="todo-header"
+                :class="{ 'completed-task': todo.checked }"
+                @dblclick="editTitle"
+              >
                 <span v-html="todoText"></span>
               </label>
-              <label v-show="!editingTitle && todo.text == ''" class="form-check-label todo-title todo-title-empty-title"
-                for="todo-header" @dblclick="editTitle">
+              <label
+                v-show="!editingTitle && todo.text == ''"
+                class="form-check-label todo-title todo-title-empty-title"
+                for="todo-header"
+                @dblclick="editTitle"
+              >
                 {{ $t("todoDetails.taskTitle") }}
               </label>
-              <input v-show="editingTitle" class="todo-title-input" type="text" v-model="todo.text" ref="titleInput"
-                :placeholder="$t('todoDetails.taskTitle')" @blur="doneEditTitle()" @keyup.enter="doneEditTitle()" />
-              <description-text-area :todoDesc="todo.desc"
-                @updated-description="changeDescription"></description-text-area>
+              <input
+                v-show="editingTitle"
+                class="todo-title-input"
+                type="text"
+                v-model="todo.text"
+                ref="titleInput"
+                :placeholder="$t('todoDetails.taskTitle')"
+                @blur="doneEditTitle()"
+                @keyup.enter="doneEditTitle()"
+              />
+              <description-text-area
+                :todoDesc="todo.desc"
+                @updated-description="changeDescription"
+              ></description-text-area>
             </div>
           </div>
           <div class="mt-3"></div>
           <div class="horizontal-divider mb-0 mt-3"></div>
           <ul class="sub-tasks">
-            <li v-for="(subTask, index) in todo.subTaskList" :key="index" class="sub-task">
-              <div v-show="!subTask.editing" draggable="true" @dragstart="startDrag($event, index)" @dragover.prevent>
-                <div class="d-flex flex-row align-items-center" :class="{ checked: subTask.checked }">
-                  <input class="form-check-input flex-grow-1 mx-3 mt-0" type="checkbox" v-model="subTask.checked"
-                    :id="'sub-task-' + index" @change="changeSubTaskClickhandler(index)" />
-                  <label class="form-check-label" :for="'sub-task-' + index" @dragenter.self="onDragenter($event)"
-                    @dragleave.self="onDragleave($event)" @drop="onDrop($event, index)" @dragover.prevent>
+            <li
+              v-for="(subTask, index) in todo.subTaskList"
+              :key="index"
+              class="sub-task"
+            >
+              <div
+                v-show="!subTask.editing"
+                draggable="true"
+                @dragstart="startDrag($event, index)"
+                @dragover.prevent
+              >
+                <div
+                  class="d-flex flex-row align-items-center"
+                  :class="{ checked: subTask.checked }"
+                >
+                  <input
+                    class="form-check-input flex-grow-1 mx-3 mt-0"
+                    type="checkbox"
+                    v-model="subTask.checked"
+                    :id="'sub-task-' + index"
+                    @change="changeSubTaskClickhandler(index)"
+                  />
+                  <label
+                    class="form-check-label"
+                    :for="'sub-task-' + index"
+                    @dragenter.self="onDragenter($event)"
+                    @dragleave.self="onDragleave($event)"
+                    @drop="onDrop($event, index)"
+                    @dragover.prevent
+                  >
                     <span v-html="linkifyText(subTask.text)"></span>
                   </label>
-                  <i class="bi-trash mx-2" :title="$t('ui.remove')" @click="removeSubTask(index)"></i>
+                  <i
+                    class="bi-trash mx-2"
+                    :title="$t('ui.remove')"
+                    @click="removeSubTask(index)"
+                  ></i>
                 </div>
               </div>
-              <input v-show="subTask.editing" v-model="subTask.text" @blur="doneEditSubTask(index)"
-                @keyup.enter="doneEditSubTask(index)" :ref="'subTaskEdit' + index" class="edit-sub-task" />
+              <input
+                v-show="subTask.editing"
+                v-model="subTask.text"
+                @blur="doneEditSubTask(index)"
+                @keyup.enter="doneEditSubTask(index)"
+                :ref="'subTaskEdit' + index"
+                class="edit-sub-task"
+              />
             </li>
             <div class="new-sub-task d-flex align-items-center">
-              <label for="new-sub-task"><i class="bi-plus-square mx-3"></i></label>
-              <input type="text" id="new-sub-task" :placeholder="$t('todoDetails.addSubTask')" autocomplete="off"
-                @blur="addSubTask()" @keyup.enter="addSubTask()" v-model="newSubTask.text" ref="newSubTask" />
+              <label for="new-sub-task"
+                ><i class="bi-plus-square mx-3"></i
+              ></label>
+              <input
+                type="text"
+                id="new-sub-task"
+                :placeholder="$t('todoDetails.addSubTask')"
+                autocomplete="off"
+                @blur="addSubTask()"
+                @keyup.enter="addSubTask()"
+                v-model="newSubTask.text"
+                ref="newSubTask"
+              />
             </div>
           </ul>
         </div>
@@ -138,16 +295,35 @@
   </div>
 
   <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1056">
-    <toast-message id="copiedTaskToClipboard" :text="$t('todoDetails.copiedTaskToClipboard')"></toast-message>
-    <toast-message id="taskRemoved" :text="$t('todoDetails.taskRemoved')" :sub-text="'(' + $t('ui.undo') + ')'"
-      @subTextClick="undoRemoveTask"></toast-message>
-    <toast-message id="recurrentTaskRemoved" :text="$t('todoDetails.recurrentTaskRemoved')"></toast-message>
-    <toast-message id="taskDuplicated" :text="$t('todoDetails.taskDuplicated')"></toast-message>
+    <toast-message
+      id="copiedTaskToClipboard"
+      :text="$t('todoDetails.copiedTaskToClipboard')"
+    ></toast-message>
+    <toast-message
+      id="taskRemoved"
+      :text="$t('todoDetails.taskRemoved')"
+      :sub-text="'(' + $t('ui.undo') + ')'"
+      @subTextClick="undoRemoveTask"
+    ></toast-message>
+    <toast-message
+      id="recurrentTaskRemoved"
+      :text="$t('todoDetails.recurrentTaskRemoved')"
+    ></toast-message>
+    <toast-message
+      id="taskDuplicated"
+      :text="$t('todoDetails.taskDuplicated')"
+    ></toast-message>
   </div>
 
-  <comfirm-modal :id="'removeReModalToDoDetails'" :title="$t('ui.removeRepeatingTask')"
-    :text="$t('ui.repeatingTaskRemoveConfirm')" :ico="'bi-x-circle'" :okText="$t('ui.remove')" @on-ok="removeAllComfirmed"
-    @on-cancel="removeAllCanceled"></comfirm-modal>
+  <comfirm-modal
+    :id="'removeReModalToDoDetails'"
+    :title="$t('ui.removeRepeatingTask')"
+    :text="$t('ui.repeatingTaskRemoveConfirm')"
+    :ico="'bi-x-circle'"
+    :okText="$t('ui.remove')"
+    @on-ok="removeAllComfirmed"
+    @on-cancel="removeAllCanceled"
+  ></comfirm-modal>
 </template>
 
 <script>
@@ -162,13 +338,13 @@ import timePicker from "./timePicker";
 import repeatingEvent from "./repeatingEvent";
 import notifications from "../../helpers/notifications";
 import repeatingEventHelper from "../../helpers/repeatingEvents.js";
-import languageHelper from "../../helpers/languageHelper.js"
+import languageHelper from "../../helpers/languageHelper.js";
 import repeatingEventRepository from "../../repositories/repeatingEventRepository";
 import comfirmModal from "../../components/comfirmModal.vue";
-import linkifyStr from 'linkify-string';
+import linkifyStr from "linkify-string";
 import ClickHandler from "@manuelernestog/click-handler";
 import tasksHelper from "../../helpers/tasksHelper";
-import descriptionTextArea from './descriptionTextArea.vue'
+import descriptionTextArea from "./descriptionTextArea.vue";
 
 export default {
   name: "toDoModal",
@@ -193,9 +369,9 @@ export default {
       editingTitle: false,
       showingCalendar: true,
       loadingView: false,
-      options: { target: '_blank', defaultProtocol: 'https' },
+      options: { target: "_blank", defaultProtocol: "https" },
       clickhandler: new ClickHandler(),
-    }
+    };
   },
   props: {
     selectedTodo: { required: true, type: Object },
@@ -207,11 +383,15 @@ export default {
     timePicker,
     repeatingEvent,
     comfirmModal,
-    descriptionTextArea
+    descriptionTextArea,
   },
   methods: {
     removeSubTask: function (index) {
       this.todo.subTaskList.splice(index, 1);
+      if (this.autoCompleteTaskWhenAllSubtasksAreDone) {
+        this.markParentTaskDone(true);
+      }
+
       this.updateTodo();
     },
     addSubTask: function () {
@@ -224,6 +404,11 @@ export default {
         this.todo.subTaskList.push(newTodo);
         this.newSubTask.text = "";
       }
+
+      if (this.autoCompleteTaskWhenAllSubtasksAreDone) {
+        this.markParentTaskDone(false);
+      }
+
       this.updateTodo();
     },
     cancelAddSubTask: function () {
@@ -282,12 +467,27 @@ export default {
       document.getElementById("todo-date-picker-input").focus();
     },
     checkTodoClickhandler: function (resetRepeatinEvent = true) {
-      this.clickhandler.handle(function () { this.checkTodo(resetRepeatinEvent) }.bind(this), function () { })
+      this.clickhandler.handle(
+        function () {
+          this.checkTodo(resetRepeatinEvent);
+        }.bind(this),
+        function () {}
+      );
     },
     checkTodo: function (resetRepeatinEvent = true) {
       if (this.todo.checked) {
         if (this.$store.getters.config.moveCompletedTaskToBottom) {
-          this.$store.commit("moveTodoToEnd", { toDoListId: this.todo.listId, index: this.index });
+          this.$store.commit("moveTodoToEnd", {
+            toDoListId: this.todo.listId,
+            index: this.index,
+          });
+
+          if (
+            this.autoCompleteTaskWhenAllSubtasksAreDone &&
+            this.todo.subTaskList.length > 0
+          ) {
+            this.todo.subTaskList.forEach((el) => (el.checked = true));
+          }
         }
         this.index = this.todoList.length - 1;
       }
@@ -305,7 +505,10 @@ export default {
       }
 
       if (this.$store.getters.config.autoReorderTasks) {
-        this.updateTodoList(this.todo.listId, tasksHelper.reorderTasksList(this.todoList));
+        this.updateTodoList(
+          this.todo.listId,
+          tasksHelper.reorderTasksList(this.todoList)
+        );
       } else {
         this.updateTodoList(this.todo.listId, this.todoList);
       }
@@ -343,11 +546,13 @@ export default {
         this.todo = this.todoList[this.index];
 
         if (this.$store.getters.config.autoReorderTasks) {
-          this.updateTodoList(newListID, tasksHelper.reorderTasksList(this.todoList));
+          this.updateTodoList(
+            newListID,
+            tasksHelper.reorderTasksList(this.todoList)
+          );
         } else {
           this.updateTodoList(newListID, this.todoList);
         }
-
       } else {
         this.loadToDoFormDB(newListID);
       }
@@ -368,21 +573,41 @@ export default {
       }.bind(this);
     },
     removeTodo: function () {
-      this.$store.commit("setUndoElement", { type: 'task', todo: this.todo, index: this.index });
-      this.$store.commit("removeTodo", { toDoListId: this.todo.listId, index: this.index });
-      this.updateTodoList(this.todo.listId, this.$store.getters.todoLists[this.todo.listId]);
+      this.$store.commit("setUndoElement", {
+        type: "task",
+        todo: this.todo,
+        index: this.index,
+      });
+      this.$store.commit("removeTodo", {
+        toDoListId: this.todo.listId,
+        index: this.index,
+      });
+      this.updateTodoList(
+        this.todo.listId,
+        this.$store.getters.todoLists[this.todo.listId]
+      );
       let toast = new Toast(document.getElementById("taskRemoved"));
       toast.show();
     },
     undoRemoveTask: function () {
       let obj = this.$store.getters.undoElement;
-      this.$store.commit("insertTodo", { toDoListId: obj.todo.listId, index: obj.index, toDo: obj.todo });
-      this.updateTodoList(obj.todo.listId, this.$store.getters.todoLists[obj.todo.listId]);
+      this.$store.commit("insertTodo", {
+        toDoListId: obj.todo.listId,
+        index: obj.index,
+        toDo: obj.todo,
+      });
+      this.updateTodoList(
+        obj.todo.listId,
+        this.$store.getters.todoLists[obj.todo.listId]
+      );
       let toast = new Toast(document.getElementById("taskRemoved"));
       toast.hide();
     },
     removeAll: function () {
-      let modal = new Modal(document.getElementById("removeReModalToDoDetails"), { backdrop: "static", });
+      let modal = new Modal(
+        document.getElementById("removeReModalToDoDetails"),
+        { backdrop: "static" }
+      );
       modal.show();
     },
     removeAllComfirmed() {
@@ -392,7 +617,10 @@ export default {
         repeatingEventHelper.removeGeneratedRepeatingEvents(date, this);
       });
       this.$store.commit("resetRepeatingEventDateCache");
-      this.$store.commit("loadRepeatingEventDateCache", this.$store.getters.repeatingEventList);
+      this.$store.commit(
+        "loadRepeatingEventDateCache",
+        this.$store.getters.repeatingEventList
+      );
       let toast = new Toast(document.getElementById("recurrentTaskRemoved"));
       toast.show();
     },
@@ -417,9 +645,17 @@ export default {
       this.$store.commit("addTodo", newTodo);
 
       if (this.$store.getters.config.autoReorderTasks) {
-        this.updateTodoList(this.todo.listId, tasksHelper.reorderTasksList(this.$store.getters.todoLists[this.todo.listId]));
+        this.updateTodoList(
+          this.todo.listId,
+          tasksHelper.reorderTasksList(
+            this.$store.getters.todoLists[this.todo.listId]
+          )
+        );
       } else {
-        this.updateTodoList(this.todo.listId, this.$store.getters.todoLists[this.todo.listId]);
+        this.updateTodoList(
+          this.todo.listId,
+          this.$store.getters.todoLists[this.todo.listId]
+        );
       }
 
       let toast = new Toast(document.getElementById("taskDuplicated"));
@@ -473,13 +709,31 @@ export default {
       this.updateTodo(false);
     },
     changeSubTaskClickhandler: function (index) {
-      this.clickhandler.handle(function () { this.changeSubTask(index) }.bind(this), function () { this.editSubTask(index) }.bind(this), index);
+      this.clickhandler.handle(
+        function () {
+          this.changeSubTask(index);
+        }.bind(this),
+        function () {
+          this.editSubTask(index);
+        }.bind(this),
+        index
+      );
     },
     changeSubTask: function (index) {
       if (this.todo.subTaskList[index].checked && this.moveSubtaskToBotttom) {
         this.todo.subTaskList.push(this.todo.subTaskList.splice(index, 1)[0]);
       }
+
       this.updateTodo();
+      if (this.autoCompleteTaskWhenAllSubtasksAreDone) {
+        this.markParentTaskDone(this.todo.subTaskList[index].checked);
+      }
+    },
+    markParentTaskDone: function (check) {
+      var result = this.todo.subTaskList.every((el) => el.checked);
+      this.todo.checked = result && check;
+
+      this.checkTodo();
     },
     linkifyText: function (text) {
       return linkifyStr(text, this.options);
@@ -488,7 +742,7 @@ export default {
       if (document.activeElement.id == "toDoModal") {
         this.$refs.closeModal.click();
       }
-    }
+    },
   },
   watch: {
     selectedTodo: function (newVal) {
@@ -505,7 +759,11 @@ export default {
         this.todo["alarm"] = false;
         this.todo["repeatingEvent"] = null;
       }
-      this.showingCalendar = moment(this.todo.listId, "YYYYMMDD", true).isValid();
+      this.showingCalendar = moment(
+        this.todo.listId,
+        "YYYYMMDD",
+        true
+      ).isValid();
       this.getCListOptions();
       this.loadingView = true;
       if (this.showingCalendar) {
@@ -537,7 +795,7 @@ export default {
       if (this.loadingView) return;
 
       this.moveToTodoList(newVal);
-    }
+    },
   },
   computed: {
     language: function () {
@@ -559,9 +817,12 @@ export default {
     moveSubtaskToBotttom: function () {
       return this.$store.getters.config.moveCompletedSubTaskToBottom;
     },
+    autoCompleteTaskWhenAllSubtasksAreDone: function () {
+      return this.$store.getters.config.autoCompleteTaskWhenAllSubtasksAreDone;
+    },
     weekStartOnMonday: function () {
       return this.$store.getters.config.weekStartOnMonday ? 1 : 0;
-    }
+    },
   },
 };
 </script>
@@ -579,7 +840,6 @@ export default {
       overflow-x: hidden;
       overflow-y: auto;
       max-height: calc(100vh - 180px);
-      ;
       margin: 16px 0px 16px 0px;
       padding: 0px 16px 0px 16px;
     }
@@ -652,8 +912,6 @@ export default {
   margin-left: -8px;
 }
 
-
-
 .dropdown-item {
   color: #3c3c3c;
 }
@@ -663,7 +921,7 @@ export default {
   padding: 0px 10px 10px 10px;
   margin: 0px;
 
-  li>div {
+  li > div {
     -webkit-user-drag: element;
   }