diff --git a/src/app/app.html b/src/app/app.html
index d09c248..9ad329b 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,5 +1,14 @@
-<main>
-  <h1>Hello, {{ title() }}</h1>
-</main>
+<div class="app-container">
+  <header class="app-header">
+    <h1>Common Cents</h1>
+    <h2>The common sense expense tracker.</h2>
+  </header>
 
-<router-outlet />
+  <main class="app-content">
+    <router-outlet />
+  </main>
+
+  <footer class="app-footer">
+
+  </footer>
+</div>
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..a24f70e 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,14 @@
 import { Routes } from '@angular/router';
+import { Expenses } from './pages/expenses/expenses';
+import { Home } from './pages/home/home';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: Home
+  },
+  {
+    path: 'expenses',
+    component: Expenses
+  }
+];
diff --git a/src/app/app.scss b/src/app/app.scss
index 4a6f818..a31827e 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -6,3 +6,12 @@ h1 {
   margin: 0;
   font-family: sans-serif;
 }
+
+h2 {
+  font-size: 1.2rem;
+  line-height: 100%;
+  font-weight: 500;
+  margin: 0;
+  font-family: sans-serif;
+  font-style: italic;
+}
diff --git a/src/app/app.ts b/src/app/app.ts
index 1791b36..aaf9e67 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
@@ -7,6 +7,4 @@ import { RouterOutlet } from '@angular/router';
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App {
-  protected readonly title = signal('common-cents');
-}
+export class App { }
diff --git a/src/app/components/expense-list/expense-list.html b/src/app/components/expense-list/expense-list.html
new file mode 100644
index 0000000..d316863
--- /dev/null
+++ b/src/app/components/expense-list/expense-list.html
@@ -0,0 +1,3 @@
+<div class="expense-list-container">
+  <p>expense-list works!</p>
+</div>
diff --git a/src/app/components/expense-list/expense-list.scss b/src/app/components/expense-list/expense-list.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/expense-list/expense-list.ts b/src/app/components/expense-list/expense-list.ts
new file mode 100644
index 0000000..05427fb
--- /dev/null
+++ b/src/app/components/expense-list/expense-list.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Expenses } from '../../services/expenses';
+
+@Component({
+  selector: 'app-expense-list',
+  imports: [],
+  templateUrl: './expense-list.html',
+  styleUrl: './expense-list.scss',
+})
+export class ExpenseList implements OnInit {
+  public constructor(private readonly expenses: Expenses) { }
+
+  public ngOnInit() {
+    void this.expenses.getExpenses();
+  }
+}
diff --git a/src/app/pages/expenses/expenses.html b/src/app/pages/expenses/expenses.html
new file mode 100644
index 0000000..477a0ef
--- /dev/null
+++ b/src/app/pages/expenses/expenses.html
@@ -0,0 +1,3 @@
+<div class="expenses-container">
+  <app-expense-list />
+</div>
diff --git a/src/app/pages/expenses/expenses.scss b/src/app/pages/expenses/expenses.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/expenses/expenses.ts b/src/app/pages/expenses/expenses.ts
new file mode 100644
index 0000000..1fefb3e
--- /dev/null
+++ b/src/app/pages/expenses/expenses.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { ExpenseList } from '../../components/expense-list/expense-list';
+
+@Component({
+  selector: 'app-expenses',
+  imports: [
+    ExpenseList
+  ],
+  templateUrl: './expenses.html',
+  styleUrl: './expenses.scss'
+})
+export class Expenses { }
diff --git a/src/app/pages/home/home.html b/src/app/pages/home/home.html
new file mode 100644
index 0000000..e74d430
--- /dev/null
+++ b/src/app/pages/home/home.html
@@ -0,0 +1,7 @@
+<div class="home-container">
+  <ul>
+    <li>
+      <a routerLink="expenses">Expenses</a>
+    </li>
+  </ul>
+</div>
diff --git a/src/app/pages/home/home.scss b/src/app/pages/home/home.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/home/home.ts b/src/app/pages/home/home.ts
new file mode 100644
index 0000000..7c1a5e2
--- /dev/null
+++ b/src/app/pages/home/home.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './home.html',
+  styleUrl: './home.scss',
+})
+export class Home { }
diff --git a/src/app/services/expenses.ts b/src/app/services/expenses.ts
new file mode 100644
index 0000000..5c51b87
--- /dev/null
+++ b/src/app/services/expenses.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Expenses {
+  public static readonly BASE_URL = 'http://localhost:3000/common-cents/expenses';
+
+  public async getExpenses(): Promise<void> {
+    console.log('getExpenses called');
+  }
+}