diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
index 6db0fb9..78f4352 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
@@ -15,13 +15,15 @@
       <mat-icon>filter_alt</mat-icon>
     </div>
     <div class="list">
-      <div class="task" (click)="updateTask(task.id)" *ngFor="let task of tasks$ | async">
-        <button>Done</button>
-        <div class="name">{{ task.name }}</div>
-        <div
-          class="reward"
-          [ngClass]="{ 'negative': task.reward < 0 }"
-        >{{ task.reward.toFixed(2) }} SP</div>
+      <div class="task" *ngFor="let task of tasks$ | async">
+        <button (click)="completeTask(task.id)">Done</button>
+        <div (click)="updateTask(task.id)" class="item">
+          <div class="name">{{ task.name }}</div>
+          <div
+            class="reward"
+            [ngClass]="{ 'negative': task.reward < 0 }"
+          >{{ task.reward.toFixed(2) }} SP</div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
index 999a793..40ff5dc 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
@@ -33,6 +33,13 @@ mat-icon {
     padding: 5px;
 }
 
+.item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
 .name {
     margin-left: 10px;
     color: var(--font-color);
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
index da2c1d4..0527d00 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
@@ -28,9 +28,11 @@ export class TasksPage implements ViewWillEnter {
   }
 
   getTasks() {
-    this.taskService.getTaskList().subscribe(tasks => {
-      this.tasks$.next(tasks);
-    });
+    setTimeout(() => {
+      this.taskService.getTaskList().subscribe(tasks => {
+        this.tasks$.next(tasks);
+      });
+    }, 1)
   }
 
   createTask() {
@@ -40,4 +42,9 @@ export class TasksPage implements ViewWillEnter {
   updateTask(id: number) {
     this.router.navigate(['edit', id], { relativeTo: this.route });
   }
+
+  completeTask(id: number) {
+    this.taskService.completeTask(id);
+    this.getTasks();
+  }
 }
diff --git a/frontend/allowance-planner-v2/src/app/services/task.service.ts b/frontend/allowance-planner-v2/src/app/services/task.service.ts
index a4c74bf..af38fa7 100644
--- a/frontend/allowance-planner-v2/src/app/services/task.service.ts
+++ b/frontend/allowance-planner-v2/src/app/services/task.service.ts
@@ -26,4 +26,8 @@ export class TaskService {
     updateTask(id: number, task: Partial<Task>) {
         this.http.put(`${this.url}/task/${id}`, task).subscribe();
     }
+
+    completeTask(id: number) {
+        this.http.post(`${this.url}/task/${id}/complete`, {}).subscribe();
+    }
 }
\ No newline at end of file