diff --git a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts
index 186a71c..9761a78 100644
--- a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts
+++ b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts
@@ -18,6 +18,11 @@ export class DialogOverlayComponent {
 
   constructor(public sharedService: SharedService, private router: Router) {}
 
+  /**
+   * Navigates to the login route and emits an empty string via the
+   * "closeDialogEmitter" output event, which can be used to close the overlay
+   * from the parent component.
+   */
   closeOverlay() {
     this.router.navigate(['/login']);
     this.closeDialogEmitter.emit('');
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index 658358e..c1b92bc 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/src/app/shared/components/overlay/overlay.component.ts
@@ -26,10 +26,19 @@ export class OverlayComponent implements OnInit {
 
   constructor(private overlayService: OverlayService, private router: Router) {}
 
+  /**
+   * Angular lifecycle hook that is called after the component's view has been fully initialized.
+   * Invokes `checkOverlayData` to subscribe to overlay data changes and update the component's state accordingly.
+   */
   ngOnInit(): void {
     this.checkOverlayData();
   }
 
+  /**
+   * Subscribes to the overlay data observable from the OverlayService.
+   * Updates the component's `overlayType` and `overlayData` properties
+   * whenever new overlay data is emitted.
+   */
   checkOverlayData() {
     this.overlayService.overlayData$.subscribe((data) => {
       if (data) {
@@ -39,12 +48,21 @@ export class OverlayComponent implements OnInit {
     });
   }
 
+  /**
+   * Emits an event to close the overlay and set the overlay type/data to the provided string.
+   * If the overlay type is 'dialog', navigates to the login route.
+   * @param emitter The string to be emitted, which will also be set as the overlay data.
+   */
   onCloseOverlay(emitter: string) {
     this.overlayType === 'dialog' && this.router.navigate(['/login']);
     this.overlayData = emitter;
   }
 
   @HostListener('document:click', ['$event'])
+  /**
+   * Listens for clicks on the overlay background and closes the overlay if the target element does not have the class 'overlay-content'.
+   * @param event The click event.
+   */
   checkOpenContactEdit(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
     if (
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts
index 3f5679c..ba8e764 100644
--- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts
@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FirebaseService } from '../../../../services/firebase.service';
-import { OverlayService } from '../../../../services/overlay.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
@@ -12,14 +11,7 @@ import { BtnBackComponent } from '../../buttons/btn-back/btn-back.component';
 @Component({
   selector: 'app-task-edit-overlay',
   standalone: true,
-  imports: [
-    BtnCloseComponent,
-    FormsModule,
-    CommonModule,
-    AssignedComponent,
-    AddTaskComponent,
-    BtnBackComponent,
-  ],
+  imports: [BtnCloseComponent, FormsModule, CommonModule, AddTaskComponent],
   templateUrl: './task-edit-overlay.component.html',
   styleUrl: './task-edit-overlay.component.scss',
 })
@@ -36,6 +28,13 @@ export class TaskEditOverlayComponent {
     private router: Router
   ) {}
 
+  /**
+   * OnInit lifecycle hook.
+   *
+   * If the overlay data is empty, this hook subscribes to the route parameters
+   * and sets the overlay data and type from the route parameters. It also sets
+   * the overlay mobile flag to true.
+   */
   ngOnInit() {
     if (this.overlayData == '') {
       if (this.route.params.subscribe()) {
@@ -48,12 +47,24 @@ export class TaskEditOverlayComponent {
     }
   }
 
+  /**
+   * Gets the task data from the Firebase service for the given task id.
+   * @param taskId the id of the task
+   * @returns {Task[]} an array of tasks with the given id
+   */
   getTaskData(taskId: string) {
     return this.firebaseService
       .getAllTasks()
       .filter((task) => task.id === taskId);
   }
 
+  /**
+   * Closes the task edit overlay dialog.
+   *
+   * If the overlay is being displayed in mobile view, this function navigates to
+   * the board page. Otherwise, it emits a close dialog event. It also removes
+   * the task data from local storage.
+   */
   closeDialog() {
     this.overlayMobile
       ? this.router.navigate(['/board'])
@@ -61,6 +72,9 @@ export class TaskEditOverlayComponent {
     this.removeTaskData();
   }
 
+  /**
+   * Removes the task data from local storage.
+   */
   removeTaskData() {
     localStorage.removeItem('taskData');
   }
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
index f0cceec..684aaea 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
@@ -32,10 +32,13 @@ export class TaskOverlayComponent implements OnInit {
     ['Technical Task', '#20d7c2'],
   ]);
 
-  closeDialog() {
-    this.closeDialogEmitter.emit('');
-  }
-
+  /**
+   * OnInit lifecycle hook.
+   *
+   * Initializes the overlay component by checking if the `overlayData` is empty.
+   * If it is, subscribes to route parameters to obtain and assign the `id` to `overlayData`.
+   * Also sets `overlayMobile` to `true` if parameters are successfully retrieved.
+   */
   ngOnInit() {
     if (this.overlayData == '') {
       if (this.route.params.subscribe()) {
@@ -47,6 +50,24 @@ export class TaskOverlayComponent implements OnInit {
     }
   }
 
+  /**
+   * Close the task overlay.
+   *
+   * Emits an empty string via the "closeDialogEmitter" output event, which
+   * can be used to close the overlay from the parent component.
+   */
+  closeDialog() {
+    this.closeDialogEmitter.emit('');
+  }
+
+  /**
+   * Edits the task with the given overlay data.
+   *
+   * Closes the task overlay and then either:
+   * - Opens the task edit overlay if the window width is >= 650px
+   * - Navigates to the task edit page if the window width is < 650px
+   * @param overlayData the overlay data of the task to be edited
+   */
   editTask(overlayData: string) {
     this.closeDialog();
     setTimeout(() => {
@@ -58,17 +79,42 @@ export class TaskOverlayComponent implements OnInit {
     }, 10);
   }
 
+  /**
+   * Deletes the task with the given overlay data from the Firebase Realtime Database and closes the overlay.
+   * @param overlayData the overlay data of the task to be deleted
+   * @returns {void}
+   */
   deleteTask(overlayData: string) {
     this.firebaseService.deleteTask(overlayData);
     this.closeDialog();
   }
 
+  /**
+   * Gets the task data from the Firebase Realtime Database for the given task id.
+   *
+   * This function takes a task id and returns an array of tasks with the given id.
+   * The function uses the Firebase service to get all tasks from the Realtime Database
+   * and then filters the result to return only the task with the given id.
+   *
+   * @param taskId The id of the task to be retrieved.
+   * @returns {Task[]} An array of tasks with the given id.
+   */
   getTaskData(taskId: string) {
     return this.firebaseService
       .getAllTasks()
       .filter((task) => task.id === taskId);
   }
 
+  /**
+   * Retrieves the status of a single subtask of a task.
+   *
+   * This function takes the task id and the index of the subtask
+   * and returns the status of the subtask at the given index.
+   *
+   * @param taskId The task id of the task containing the subtask.
+   * @param index The index of the subtask.
+   * @returns {boolean} The status of the subtask at the given index.
+   */
   getSubTaskStatus(taskId: string, index: number) {
     const subtask = this.firebaseService
       .getAllTasks()
@@ -77,6 +123,20 @@ export class TaskOverlayComponent implements OnInit {
     return subtask[0].subtasksDone[index];
   }
 
+  /**
+   * Toggles the status of a single subtask of a task.
+   *
+   * This function takes the task id, the index of the subtask,
+   * the array of subtask statuses, and the status of the subtask.
+   * It toggles the status of the subtask at the given index
+   * and updates the subtasksDone property of the task in the
+   * Firebase Realtime Database.
+   *
+   * @param taskId The task id of the task containing the subtask.
+   * @param index The index of the subtask.
+   * @param array The array of subtask statuses.
+   * @param status The status of the subtask at the given index.
+   */
   toggleSubtaskStatus(
     taskId: string,
     index: number,
@@ -87,10 +147,24 @@ export class TaskOverlayComponent implements OnInit {
     this.firebaseService.updateSubTask(taskId, array);
   }
 
+  /**
+   * Capitalizes the first letter of a given string.
+   *
+   * This function takes a string as an argument and returns a new string
+   * with the first letter capitalized.
+   * @param data The string to capitalize.
+   * @returns {string} A new string with the first letter capitalized.
+   */
   capitalizeFirstLetter(data: string) {
     return data.charAt(0).toUpperCase() + data.slice(1);
   }
 
+  /**
+   * Converts a date string to a human-readable format.
+   *
+   * @param dateString - The date string to convert.
+   * @returns A string representing the date in the format "MMM. DD, YYYY".
+   */
   timeConverter(dateString: string) {
     var a = new Date(dateString);
     var months = [