diff --git a/frontend/allowance-planner-v2/src/app/models/allowance.ts b/frontend/allowance-planner-v2/src/app/models/allowance.ts
new file mode 100644
index 0000000..689e9f5
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/models/allowance.ts
@@ -0,0 +1,9 @@
+export interface Allowance {
+    id: number;
+    name: string;
+    target: number;
+    // Current allowance value
+    progress: number;
+    // Can be any positive number (backend checks for number relative to each other)
+    weight: number;
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts
index 075b3f8..9d39197 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts
@@ -5,6 +5,8 @@ import { FormsModule } from '@angular/forms';
 import { AllowancePage } from './allowance.page';
 
 import { AllowancePageRoutingModule } from './allowance-routing.module';
+import { AllowanceService } from 'src/app/services/allowance.service';
+import { provideHttpClient } from '@angular/common/http';
 
 @NgModule({
   imports: [
@@ -13,6 +15,10 @@ import { AllowancePageRoutingModule } from './allowance-routing.module';
     FormsModule,
     AllowancePageRoutingModule
   ],
-  declarations: [AllowancePage]
+  declarations: [AllowancePage],
+  providers: [
+    provideHttpClient(),
+    AllowanceService
+  ]
 })
 export class AllowancePageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
index f389801..7748313 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
@@ -7,4 +7,21 @@
 </ion-header>
 
 <ion-content>
+  <div class="content">
+    <div class="bar"></div>
+    <div
+      class="goal"
+      [ngClass]="{'main-color': goal.id ===0, 'other-color': goal.id !== 0 }"
+      *ngFor="let goal of allowance$ | async"
+    >
+      <div class="main" *ngIf="goal.id === 0; else other_goal">
+        <div class="name">Main Goal</div>
+      </div>
+      <ng-template #other_goal>
+        <div class="color">
+          <div class="name">Other goal: {{ goal.name }}</div>
+        </div>
+      </ng-template>
+    </div>
+  </div>
 </ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
index e69de29..6bb918f 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
@@ -0,0 +1,19 @@
+.goal {
+    border: 1px solid var(--used-color);
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+
+.bar {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.main-color {
+    --used-color: #7DCB7D;
+}
+
+.other-color {
+    --used-color: rgb(85, 26, 56);
+}
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
index cce237c..7b6f82a 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { Allowance } from 'src/app/models/allowance';
+import { AllowanceService } from 'src/app/services/allowance.service';
 import { UserService } from 'src/app/services/user.service';
 
 @Component({
@@ -8,7 +12,24 @@ import { UserService } from 'src/app/services/user.service';
   standalone: false,
 })
 export class AllowancePage {
+  private id: number;
+  private possibleColors: Array<string> = [];
+  public allowance$: BehaviorSubject<Array<Allowance>> = new BehaviorSubject<Array<Allowance>>([]);
 
-  constructor(private userService: UserService) {}
+  constructor(
+    private route: ActivatedRoute,
+    private allowanceService: AllowanceService
+  ) {
+    this.id = this.route.snapshot.params['id'];
+    this.getAllowance();
+  }
 
+  getAllowance() {
+    setTimeout(() => {
+      this.allowanceService.getAllowanceList(this.id).subscribe(allowance => {
+        console.log('Allowance list: ', allowance);
+        this.allowance$.next(allowance);
+      })
+    }, 10);
+  }
 }
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
index 5670744..52eb693 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
@@ -18,7 +18,7 @@
     <input id="name" type="text" formControlName="name"/>
 
     <label>Reward</label>
-    <input id="name" type="number" formControlName="reward"/>
+    <input id="name" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="reward"/>
 
     <label>Assigned</label>
     <select formControlName="assigned">
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts
index ce2f1b3..6b0396f 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.ts
@@ -30,7 +30,7 @@ export class EditTaskPage implements OnInit {
 
     this.form = this.formBuilder.group({
       name: ['', Validators.required],
-      reward: ['', [Validators.required, Validators.pattern("^[0-9]*$")]],
+      reward: ['', Validators.required],
       assigned: [0, Validators.required]
     });
   }
diff --git a/frontend/allowance-planner-v2/src/app/services/allowance.service.ts b/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
new file mode 100644
index 0000000..a32538a
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Allowance } from '../models/allowance';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AllowanceService {
+    private url = 'http://localhost:8080/api';
+
+    constructor(private http: HttpClient) {}
+
+    getAllowanceList(userId: number): Observable<Array<Allowance>> {
+        return this.http.get<Allowance[]>(`${this.url}/user/${userId}/allowance`);
+    }
+}
\ No newline at end of file