diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
index 5484449..31cd8f6 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
@@ -4,6 +4,11 @@
       <ion-title *ngIf="isAddMode">Create Goal</ion-title>
       <ion-title *ngIf="!isAddMode && goalId != 0">Edit Goal</ion-title>
       <ion-title *ngIf="!isAddMode && goalId == 0">Edit Allowance</ion-title>
+      <button
+        *ngIf="!isAddMode && goalId !=0"
+        class="remove-button"
+        (click)="deleteAllowance()"
+      >Delete Goal</button>
     </div>
   </ion-toolbar>
 </ion-header>
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
index db17f38..56eb60e 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
@@ -2,6 +2,13 @@
     display: flex;
 }
 
+.remove-button {
+    background-color: var(--ion-color-primary);
+    margin-right: 15px;
+    width: 100px;
+    margin-bottom: 0;
+}
+
 form {
     height: 100%;
 }
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
index a47e7a3..4fd4112 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
@@ -93,4 +93,9 @@ export class EditAllowancePage implements OnInit {
 
     this.router.navigate(['/tabs/allowance', this.userId]);
   }
+
+  deleteAllowance() {
+    this.allowanceService.deleteAllowance(this.goalId, this.userId);
+    this.router.navigate(['/tabs/allowance', this.userId]);
+  }
 }
diff --git a/frontend/allowance-planner-v2/src/app/services/allowance.service.ts b/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
index 75c8ce3..2e84126 100644
--- a/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
+++ b/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
@@ -26,4 +26,8 @@ export class AllowanceService {
     updateAllowance(allowance: Partial<Allowance>, allowanceId: number, userId: number) {
         this.http.put(`${this.url}/user/${userId}/allowance/${allowanceId}`, allowance).subscribe();
     }
+
+    deleteAllowance(allowanceId: number, userId: number) {
+        this.http.delete(`${this.url}/user/${userId}/allowance/${allowanceId}`).subscribe();
+    }
 }
\ No newline at end of file