diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index ba483d4..25cd1c9 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/src/app/components/add-task/add-task.component.html
@@ -226,15 +226,15 @@
           </div>
           } @else {
           <img class="add" src="./../../../assets/img/add.svg" alt="" />
-          } @if (taskData.subtasksTitle) {
+          } @if (taskData.subtasks.length > 0) {
           <div class="subtasks">
-            @for (task of taskData.subtasksTitle.reverse(); track task) {
+            @for (subtask of taskData.subtasks.reverse(); track subtask.title) {
             <div class="single-subtask">
-              <p>- {{ task }}</p>
+              <p>- {{ subtask.title }}</p>
               <img
                 src="./../../../assets/img/close.svg"
                 alt=""
-                (click)="deleteSubtask(task)"
+                (click)="deleteSubtask(subtask)"
               />
             </div>
             }
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index e7dfeac..a14acdd 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/src/app/components/add-task/add-task.component.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { AssignedComponent } from './assigned/assigned.component';
-import { Task } from '../../interfaces/task.interface';
+import { Subtask, Task } from '../../interfaces/task.interface';
 import { OverlayService } from '../../services/overlay.service';
 import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -54,8 +54,6 @@ export class AddTaskComponent implements OnInit {
     status: this.taskService.getStatuses()[0],
     priority: this.taskService.getPriorities()[0],
     subtasks: [],
-    subtasksTitle: [],
-    subtasksStatus: [],
     assigned: [],
     assignees: [],
     userData: [],
@@ -143,27 +141,20 @@ export class AddTaskComponent implements OnInit {
     return this.apiService.getTaskById(taskId);
   }
 
-  /**
-   * Adds a new subtask to the task data
-   * @param subtaskName the name of the new subtask
-   */
   addSubtask(subtaskName: string) {
-    this.taskData.subtasksTitle.unshift(subtaskName);
-    this.taskData.subtasksStatus.push(false);
+    const newSubtask: Subtask = {
+      title: subtaskName,
+      status: false,
+    };
+    this.taskData.subtasks.push(newSubtask);
     this.saveTaskData();
   }
 
-  /**
-   * Deletes a subtask from the task data.
-   * @param subtaskName the name of the subtask to delete
-   */
-  deleteSubtask(subtaskName: string) {
-    const index = this.taskData.subtasksTitle.indexOf(subtaskName);
-    if (index !== -1) {
-      this.taskData.subtasksTitle.splice(index, 1);
-      this.taskData.subtasksStatus.splice(index, 1);
-      this.saveTaskData();
-    }
+  deleteSubtask(subtaskToDelete: Subtask) {
+    this.taskData.subtasks = this.taskData.subtasks.filter(
+      (subtask) => subtask !== subtaskToDelete
+    );
+    this.saveTaskData();
   }
 
   /**
@@ -269,8 +260,7 @@ export class AddTaskComponent implements OnInit {
     this.taskData.date = this.currentDate;
     this.taskData.category = '';
     this.taskData.assigned = [];
-    this.taskData.subtasksTitle = [];
-    this.taskData.subtasksStatus = [];
+    this.taskData.subtasks = [];
   }
 
   /**
@@ -318,12 +308,13 @@ export class AddTaskComponent implements OnInit {
    * This ensures that the task data is safe to be stored in the Firebase Realtime Database.
    * @returns {void}
    */
-  checkCrossSiteScripting() {
+  checkCrossSiteScripting(): void {
     this.taskData.title = this.replaceXSSChars(this.taskData.title);
     this.taskData.description = this.replaceXSSChars(this.taskData.description);
-    this.taskData.subtasksTitle = this.taskData.subtasksTitle.map((title) =>
-      this.replaceXSSChars(title)
-    );
+    this.taskData.subtasks = this.taskData.subtasks.map((subtask) => ({
+      ...subtask,
+      title: this.replaceXSSChars(subtask.title),
+    }));
   }
 
   /**
diff --git a/src/app/interfaces/task.interface.ts b/src/app/interfaces/task.interface.ts
index 281e2e3..937915a 100644
--- a/src/app/interfaces/task.interface.ts
+++ b/src/app/interfaces/task.interface.ts
@@ -8,8 +8,6 @@ export interface Task {
   status: string;
   priority: string;
   subtasks: Subtask[];
-  subtasksTitle: string[];
-  subtasksStatus: boolean[];
   assigned: string[];
   assignees: Assignee[];
   userData: UserSummary[];
@@ -18,7 +16,7 @@ export interface Task {
 }
 
 export interface Subtask {
-  id: string;
+  id?: string;
   title: string;
   status: boolean;
 }
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
index 6f6bdf0..890ae1c 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
@@ -100,7 +100,8 @@
     } @if (task.subtasks.length > 0) {
     <div class="subtasks">
       <p>{{ "addTask.subtask" | translate }}:</p>
-      @for (subtask of task.subtasks; track subtask; let i = $index) {
+      @for (subtask of task.subtasks; track subtask; let i = $index) { @if
+      (subtask.id) {
       <div
         class="single-subtask"
         (click)="
@@ -122,7 +123,7 @@
         />
         <p>{{ subtask.title }}</p>
       </div>
-      }
+      } }
     </div>
     }
   </div>