diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts
index 599484a..09c9f68 100644
--- a/src/app/components/board/board.component.ts
+++ b/src/app/components/board/board.component.ts
@@ -39,6 +39,18 @@ export class BoardComponent {
   taskMovedFrom: string = '';
   taskDropped: boolean = false;
 
+  /**
+   * OnInit lifecycle hook. Subscribes to the following events:
+   *
+   * - itemDropped: updates the taskMovedTo and taskMovedFrom properties
+   * - itemMovedTo: updates the taskMovedTo property
+   * - itemMovedFrom: updates the taskMovedFrom property
+   *
+   * These properties are used to conditionally render a highlighted task
+   * component when a task is moved.
+   *
+   * @returns void
+   */
   ngOnInit() {
     this.dragDropService.itemDropped.subscribe(({ id, status }) => {
       this.handleItemDropped(id, status);
@@ -51,12 +63,25 @@ export class BoardComponent {
     });
   }
 
+  /**
+   * Adds a new task by opening a new route if the user is in page view mode,
+   * or by setting the overlay data to open a new task overlay in overlay mode.
+   * @param status The status of the task to be added.
+   */
   addNewTaskOverlay(status: string) {
     this.sharedService.isPageViewMedia
       ? this.router.navigate(['/add-task', status])
       : this.overlayService.setOverlayData('newTaskOverlay', status);
   }
 
+  /**
+   * Retrieves tasks based on their status.
+   * If a search input is active, it filters the tasks from the filteredTasks list.
+   * Otherwise, it filters from the complete list of tasks.
+   *
+   * @param status The status of the tasks to be retrieved.
+   * @returns A list of tasks matching the given status.
+   */
   getTaskStatus(status: string) {
     if (this.updateSearchInput()) {
       return this.firebaseService
@@ -69,6 +94,13 @@ export class BoardComponent {
     }
   }
 
+  /**
+   * Updates the status of a task in both the complete and filtered lists
+   * of tasks when it is dropped.
+   *
+   * @param id The id of the task to be updated.
+   * @param status The new status of the task.
+   */
   handleItemDropped(id: string, status: string): void {
     const index = this.firebaseService.allTasks.findIndex(
       (task) => task.id === id
@@ -85,12 +117,23 @@ export class BoardComponent {
     }
   }
 
+  /**
+   * Clears the search input by resetting the search input flag and the search value, and
+   * then calling searchTask() to update the list of tasks.
+   */
   clearInput() {
     this.searchInput = false;
     this.searchValue = '';
     this.searchTask();
   }
 
+  /**
+   * Updates the search input flag and the search value by stripping any XSS
+   * characters from the search value, and then setting the search input flag
+   * to true if the search value is not empty, and false otherwise.
+   *
+   * @returns The updated search input flag.
+   */
   updateSearchInput() {
     this.searchValue = this.sharedService.replaceXSSChars(this.searchValue);
     if (this.searchValue) {
@@ -101,6 +144,14 @@ export class BoardComponent {
     return this.searchInput;
   }
 
+  /**
+   * Filters the list of tasks based on the current search value.
+   *
+   * It first calls updateSearchInput() to update the search input flag and the search value.
+   * Then it sets the filteredTasks property of the FirebaseService to the result of calling
+   * filter() on the list of all tasks, where the filter condition is that any of the
+   * task's title, description, or category includes the search value (case-insensitive).
+   */
   searchTask(): void {
     this.updateSearchInput();
     this.firebaseService.filteredTasks = this.firebaseService
diff --git a/src/app/components/board/task/task-menu/task-menu.component.ts b/src/app/components/board/task/task-menu/task-menu.component.ts
index b7b3a7f..0fc34ad 100644
--- a/src/app/components/board/task/task-menu/task-menu.component.ts
+++ b/src/app/components/board/task/task-menu/task-menu.component.ts
@@ -14,6 +14,16 @@ export class TaskMenuComponent {
 
   constructor(private firebaseService: FirebaseService) {}
 
+  /**
+   * Moves the task to a specified status.
+   *
+   * This function updates the status of the task identified by `taskId`
+   * in both `allTasks` and `filteredTasks` lists to the new status
+   * specified by `moveTo`. It also updates the task status in the
+   * Firestore database.
+   *
+   * @param moveTo - The new status to move the task to.
+   */
   moveTask(moveTo: string) {
     const index = this.firebaseService.allTasks.findIndex(
       (task) => task.id === this.taskId
diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts
index c5d7b5e..1198625 100644
--- a/src/app/components/board/task/task.component.ts
+++ b/src/app/components/board/task/task.component.ts
@@ -35,6 +35,14 @@ export class TaskComponent {
     private router: Router
   ) {}
 
+  /**
+   * Handles the button click event on a task in the board
+   * @param event the MouseEvent
+   * @param taskId the id of the task
+   *
+   * If the event target is a menu button or menu img, toggle the task menu
+   * If the event target is anything else, open the task details overlay
+   */
   handleMenuButtonClick(event: MouseEvent, taskId: string) {
     event.stopPropagation();
     const targetElement = event.target as HTMLElement;
@@ -44,10 +52,21 @@ export class TaskComponent {
       : this.openTaskDetailsOverlay(taskId);
   }
 
+  /**
+   * Toggle the task menu for the current task
+   */
   toggleTaskMenu() {
     this.isMenuOpen = !this.isMenuOpen;
   }
 
+  /**
+   * Open the task details overlay for the given task id
+   * @param taskId the id of the task
+   *
+   * If the task menu is open, close it
+   * If the page is in the media view, navigate to the task details page
+   * If the page is not in the media view, open the task overlay
+   */
   openTaskDetailsOverlay(taskId: string) {
     if (this.isMenuOpen) {
       this.toggleTaskMenu();
@@ -58,6 +77,11 @@ export class TaskComponent {
   }
 
   @HostListener('document:click', ['$event'])
+  /**
+   * If the target element of the event is not a task menu button,
+   * task menu img, or the task menu itself, close the task menu
+   * @param event the MouseEvent
+   */
   checkToggleTaskMenu(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
     const menuSelectors = ['.menu-btn', '.menu-img', 'app-task-menu'];
@@ -72,27 +96,47 @@ export class TaskComponent {
 
   // User Dialog
 
+  /**
+   * Opens the user dialog for the given user id at the position of the mouse click
+   * @param userId the id of the user
+   * @param event the MouseEvent that triggered the dialog
+   */
   openDialog(userId: any, event: MouseEvent) {
     this.AssignedDialogId = userId;
     this.updateDialogPosition(event);
   }
 
+  /**
+   * Updates the position of the user dialog based on the MouseEvent
+   * @param event the MouseEvent that triggered the dialog
+   */
   updateDialogPosition(event: MouseEvent) {
     this.dialogX = event.clientX + 25;
     this.dialogY = event.clientY + 10;
   }
 
+  /**
+   * Closes the user dialog
+   */
   closeDialog() {
     this.AssignedDialogId = '';
   }
 
   // Subtasks
 
+  /**
+   * Returns the number of completed subtasks of the task
+   * @returns the number of completed subtasks
+   */
   completedSubtasks(): number {
     return this.task.subtasksDone.filter((subtask: boolean) => subtask === true)
       .length;
   }
 
+  /**
+   * Calculates the percentage of completed subtasks
+   * @returns the percentage of completed subtasks as a number
+   */
   completedSubtasksPercent(): number {
     const subtasks = this.task.subtasksDone;
     const completedSubtasksCount = subtasks.filter(
@@ -104,6 +148,11 @@ export class TaskComponent {
 
   // Assigned
 
+  /**
+   * Returns the initials of the user
+   * @param id the id of the user
+   * @returns the initials of the user as a string
+   */
   userBadged(id: string) {
     const userId = String(id);
     const user = this.firebaseService
@@ -122,6 +171,11 @@ export class TaskComponent {
     }
   }
 
+  /**
+   * Returns the color of the user with the given id
+   * @param id the id of the user
+   * @returns the color of the user as a string
+   */
   userBadgedColor(id: string) {
     const userId = String(id);
     const user = this.firebaseService