diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.html b/frontend/allowance-planner-v2/src/app/allowance/allowance.page.html
deleted file mode 100644
index 40f9bd8..0000000
--- a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Allowance
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Allowance</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/app-routing.module.ts b/frontend/allowance-planner-v2/src/app/app-routing.module.ts
index 48fc28d..1cc1595 100644
--- a/frontend/allowance-planner-v2/src/app/app-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/app-routing.module.ts
@@ -1,15 +1,21 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  }
+    loadChildren: () => import('./pages/user-login/user-login.module').then( m => m.UserLoginPageModule)
+  },
+  {
+    path: 'allowance-app',
+    loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
+  },
 ];
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+    CommonModule
   ],
   exports: [RouterModule]
 })
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.html b/frontend/allowance-planner-v2/src/app/history/history.page.html
deleted file mode 100644
index 14d369d..0000000
--- a/frontend/allowance-planner-v2/src/app/history/history.page.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      History
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">History</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/models/user.ts b/frontend/allowance-planner-v2/src/app/models/user.ts
new file mode 100644
index 0000000..6700d79
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/models/user.ts
@@ -0,0 +1,5 @@
+export interface User {
+    id: number;
+    name: string;
+    allowance?: number
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.module.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts
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
new file mode 100644
index 0000000..1f9e973
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
@@ -0,0 +1,10 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Allowance
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.page.scss
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
similarity index 66%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
index c8027e6..cce237c 100644
--- a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-allowance',
@@ -8,6 +9,6 @@ import { Component } from '@angular/core';
 })
 export class AllowancePage {
 
-  constructor() {}
+  constructor(private userService: UserService) {}
 
 }
diff --git a/frontend/allowance-planner-v2/src/app/history/history-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/history/history-routing.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history-routing.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/history/history.module.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.page.html b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
new file mode 100644
index 0000000..6df4ad8
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
@@ -0,0 +1,11 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      History
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.scss b/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.page.scss
rename to frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.page.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history.page.ts
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
similarity index 95%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
index 30903cf..52d6683 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
@@ -34,6 +34,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [RouterModule.forChild(routes),],
 })
 export class TabsPageRoutingModule {}
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.module.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.module.ts
similarity index 70%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.module.ts
index 0bb2a0d..6414b8b 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.module.ts
@@ -7,6 +7,8 @@ import {MatIconModule} from '@angular/material/icon';
 import { TabsPageRoutingModule } from './tabs-routing.module';
 
 import { TabsPage } from './tabs.page';
+import { provideHttpClient } from '@angular/common/http';
+import { UserService } from 'src/app/services/user.service';
 
 @NgModule({
   imports: [
@@ -16,6 +18,10 @@ import { TabsPage } from './tabs.page';
     TabsPageRoutingModule,
     MatIconModule,
   ],
-  declarations: [TabsPage]
+  declarations: [TabsPage],
+  providers: [
+    provideHttpClient(),
+    UserService
+  ]
 })
 export class TabsPageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.html b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
similarity index 99%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.page.html
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
index f67fa7d..e20054d 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
@@ -1,17 +1,13 @@
 <ion-tabs>
-
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="history" href="/tabs/history">
       <mat-icon>history</mat-icon>
     </ion-tab-button>
-
     <ion-tab-button tab="allowance" href="/tabs/allowance">
       <mat-icon>savings</mat-icon>
     </ion-tab-button>
-
     <ion-tab-button tab="tasks" href="/tabs/tasks">
       <mat-icon>task_alt</mat-icon>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>
diff --git a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.scss b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.scss
new file mode 100644
index 0000000..188e38f
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.scss
@@ -0,0 +1,3 @@
+.tab-selected {
+    background-color: var(--ion-color-secondary);
+}
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
similarity index 99%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
index 7ea8134..8dc4123 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
   standalone: false,
 })
 export class TabsPage {
-
   constructor() {}
 
 }
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.module.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts
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
new file mode 100644
index 0000000..522b12c
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
@@ -0,0 +1,10 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Tasks
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.scss b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.page.scss
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login-routing.module.ts
new file mode 100644
index 0000000..d80c901
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UserLoginPage } from './user-login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UserLoginPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserLoginPageRoutingModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.module.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.module.ts
new file mode 100644
index 0000000..07b36c8
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { UserLoginPageRoutingModule } from './user-login-routing.module';
+
+import { UserLoginPage } from './user-login.page';
+import { provideHttpClient } from '@angular/common/http';
+import { UserService } from 'src/app/services/user.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    UserLoginPageRoutingModule,
+  ],
+  declarations: [UserLoginPage],
+  providers: [
+    provideHttpClient(),
+    UserService
+  ]
+})
+export class UserLoginPageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html
new file mode 100644
index 0000000..c97e99a
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html
@@ -0,0 +1,6 @@
+<ion-content>
+  <div class="title">Who are you?</div>
+  <div class="selection">
+    
+  </div>
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss
new file mode 100644
index 0000000..42765e5
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss
@@ -0,0 +1,11 @@
+.title,
+.selection {
+    display: flex;
+    justify-content: center;
+}
+
+.title {
+    margin-top: 40%;
+    color: var(--ion-color-primary);
+    font-size: 40px;
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.spec.ts
new file mode 100644
index 0000000..72b4a6f
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UserLoginPage } from './user-login.page';
+
+describe('UserLoginPage', () => {
+  let component: UserLoginPage;
+  let fixture: ComponentFixture<UserLoginPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserLoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts
new file mode 100644
index 0000000..a1f2c2d
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { UserService } from 'src/app/services/user.service';
+
+@Component({
+  selector: 'app-user-login',
+  templateUrl: './user-login.page.html',
+  styleUrls: ['./user-login.page.scss'],
+  standalone: false,
+})
+export class UserLoginPage implements OnInit {
+
+  constructor(private userService: UserService) { }
+
+  ngOnInit() {
+    this.userService.getUserList().subscribe(users => console.log('Users: ', users));
+  }
+
+}
diff --git a/frontend/allowance-planner-v2/src/app/services/user.service.ts b/frontend/allowance-planner-v2/src/app/services/user.service.ts
new file mode 100644
index 0000000..c010ce1
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/services/user.service.ts
@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { User } from '../models/user';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserService {
+    private url = 'localhost:59772/api';
+    constructor(private http: HttpClient) {}
+
+    getUserList(): Observable<Array<User>> {
+        return this.http.get<User[]>(`${this.url}/users`);
+    }
+
+    getUserById(id: number): Observable<User> {
+        return this.http.get<User>(`${this.url}/user/${id}`);
+    }
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.scss b/frontend/allowance-planner-v2/src/app/tabs/tabs.page.scss
deleted file mode 100644
index 8b13789..0000000
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/tasks/tasks.page.html
deleted file mode 100644
index bf00797..0000000
--- a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tasks
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tasks</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
diff --git a/frontend/allowance-planner-v2/src/assets/font/Jaro-Regular.ttf b/frontend/allowance-planner-v2/src/assets/font/Jaro-Regular.ttf
new file mode 100644
index 0000000..012baf5
Binary files /dev/null and b/frontend/allowance-planner-v2/src/assets/font/Jaro-Regular.ttf differ
diff --git a/frontend/allowance-planner-v2/src/global.scss b/frontend/allowance-planner-v2/src/global.scss
index 8b13789..840c6c6 100644
--- a/frontend/allowance-planner-v2/src/global.scss
+++ b/frontend/allowance-planner-v2/src/global.scss
@@ -1 +1,37 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
 
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/display.css";
+
+/* Optional CSS utils that can be commented out */
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import "@ionic/angular/css/palettes/dark.always.css"; */
+/* @import "@ionic/angular/css/palettes/dark.class.css"; */
+@import "@ionic/angular/css/palettes/dark.system.css";
diff --git a/frontend/allowance-planner-v2/src/theme/variables.scss b/frontend/allowance-planner-v2/src/theme/variables.scss
index 6146c39..a349613 100644
--- a/frontend/allowance-planner-v2/src/theme/variables.scss
+++ b/frontend/allowance-planner-v2/src/theme/variables.scss
@@ -1,2 +1,14 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+:root {
+    --ion-color-primary: #9C4BE4;
+    --ion-color-secondary: #F5E9FF;
+    --ion-background-color: #F3F3F3;
+
+    --ion-font-family: 'Myfont';
+}
+
+@font-face {
+    font-family: 'MyFont';
+    src: url('../assets/font/Jaro-Regular.ttf');
+}