diff --git a/src/app/app.html b/src/app/app.html
index c065c67..524c63f 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,7 +1,11 @@
 <div class="app-container">
   <header class="app-header">
     <h1>Common Cents</h1>
-    <h2>The common sense expense tracker.</h2>
+    <div class="app-navigation">
+      @for (link of navLinks(); track link) {
+        <a matButton [href]="link.href">{{ link.text }}</a>
+      }
+    </div>
     <app-divider />
   </header>
 
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 5a89bba..a891794 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,6 +1,8 @@
 import { Routes } from '@angular/router';
 import { ExpensePage } from './pages/expenses/expense-page.component';
 import { HomePage } from './pages/home/home-page.component';
+import { MetadataPageComponent } from './pages/metadata/metadata-page.component';
+import { SettingsPageComponent } from './pages/settings/settings-page.component';
 
 export const routes: Routes = [
   {
@@ -10,5 +12,13 @@ export const routes: Routes = [
   {
     path: 'expenses',
     component: ExpensePage
+  },
+  {
+    path: 'metadata',
+    component: MetadataPageComponent
+  },
+  {
+    path: 'settings',
+    component: SettingsPageComponent
   }
 ];
diff --git a/src/app/app.scss b/src/app/app.scss
index 46d0307..330ac4b 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -14,19 +14,13 @@
 }
 
 h1 {
-  font-size: 3.125rem;
+  font-size: 2.5rem;
   line-height: 100%;
   letter-spacing: -0.125rem;
-  font-weight: 500;
+  font-weight: 400;
   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;
+.app-navigation {
+  display: flex;
 }
diff --git a/src/app/app.ts b/src/app/app.ts
index 68f4f4a..a9619ac 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,11 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { Divider } from './components/divider/divider';
+import { DividerComponent } from './components/divider/divider.component';
+import { MatButton } from '@angular/material/button';
+
+interface NavLink {
+  text: string;
+  href: string;
+}
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Divider],
+  imports: [RouterOutlet, DividerComponent, MatButton],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App { }
+export class App {
+  public navLinks = signal<NavLink[]>([
+    {
+      text: 'Home',
+      href: '/'
+    },
+    {
+      text: 'Expenses',
+      href: '/expenses'
+    },
+    {
+      text: 'Metadata',
+      href: '/metadata'
+    },
+    {
+      text: 'Settings',
+      href: '/settings'
+    }
+  ]);
+}
diff --git a/src/app/components/divider/divider.html b/src/app/components/divider/divider.component.html
similarity index 100%
rename from src/app/components/divider/divider.html
rename to src/app/components/divider/divider.component.html
diff --git a/src/app/components/divider/divider.scss b/src/app/components/divider/divider.component.scss
similarity index 100%
rename from src/app/components/divider/divider.scss
rename to src/app/components/divider/divider.component.scss
diff --git a/src/app/components/divider/divider.component.ts b/src/app/components/divider/divider.component.ts
new file mode 100644
index 0000000..1c18680
--- /dev/null
+++ b/src/app/components/divider/divider.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-divider',
+  imports: [],
+  templateUrl: './divider.component.html',
+  styleUrl: './divider.component.scss'
+})
+export class DividerComponent { }
diff --git a/src/app/components/divider/divider.ts b/src/app/components/divider/divider.ts
deleted file mode 100644
index fb197c5..0000000
--- a/src/app/components/divider/divider.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-divider',
-  imports: [],
-  templateUrl: './divider.html',
-  styleUrl: './divider.scss'
-})
-export class Divider { }
diff --git a/src/app/components/expense-list/expense-list.component.scss b/src/app/components/expense-list/expense-list.component.scss
index 1b125f4..f6d8b5f 100644
--- a/src/app/components/expense-list/expense-list.component.scss
+++ b/src/app/components/expense-list/expense-list.component.scss
@@ -12,9 +12,8 @@
   p {
     font-size: 1.8rem;
     line-height: 100%;
-    font-weight: 200;
+    font-weight: 400;
     margin: 0;
-    font-family: sans-serif;
   }
 
   app-divider {
diff --git a/src/app/components/expense-list/expense-list.component.ts b/src/app/components/expense-list/expense-list.component.ts
index 532559e..017435a 100644
--- a/src/app/components/expense-list/expense-list.component.ts
+++ b/src/app/components/expense-list/expense-list.component.ts
@@ -3,11 +3,11 @@ import { ExpenseService } from '../../services/expense.service';
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
 import { ExpenseComponent } from '../expense/expense.component';
-import {Divider} from '../divider/divider';
+import { DividerComponent } from '../divider/divider.component';
 
 @Component({
   selector: 'app-expense-list',
-  imports: [MatTableModule, MatCardModule, ExpenseComponent, Divider],
+  imports: [MatTableModule, MatCardModule, ExpenseComponent, DividerComponent],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss'
 })
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 94c5c02..326f0d3 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,7 +1,3 @@
 <div class="home-container">
-  <ul>
-    <li>
-      <a routerLink="expenses">ExpenseService</a>
-    </li>
-  </ul>
+  <h2>The common sense expense tracker.</h2>
 </div>
diff --git a/src/app/pages/home/home-page.component.scss b/src/app/pages/home/home-page.component.scss
index e69de29..0fcfa03 100644
--- a/src/app/pages/home/home-page.component.scss
+++ b/src/app/pages/home/home-page.component.scss
@@ -0,0 +1,7 @@
+h2 {
+  font-size: 1.3rem;
+  line-height: 100%;
+  font-weight: 500;
+  margin: 0;
+  font-family: sans-serif;
+}
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 724172f..012cfae 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -1,12 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-home',
-  imports: [
-    RouterLink
-  ],
+  imports: [],
   templateUrl: './home-page.component.html',
-  styleUrl: './home-page.component.scss',
+  styleUrl: './home-page.component.scss'
 })
 export class HomePage { }
diff --git a/src/app/pages/metadata/metadata-page.component.html b/src/app/pages/metadata/metadata-page.component.html
new file mode 100644
index 0000000..49ebd46
--- /dev/null
+++ b/src/app/pages/metadata/metadata-page.component.html
@@ -0,0 +1,3 @@
+<div class="metadata-container">
+  Metadata page
+</div>
diff --git a/src/app/pages/metadata/metadata-page.component.scss b/src/app/pages/metadata/metadata-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/metadata/metadata-page.component.ts b/src/app/pages/metadata/metadata-page.component.ts
new file mode 100644
index 0000000..778d92d
--- /dev/null
+++ b/src/app/pages/metadata/metadata-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-metadata',
+  imports: [],
+  templateUrl: './metadata-page.component.html',
+  styleUrl: './metadata-page.component.scss'
+})
+export class MetadataPageComponent { }
diff --git a/src/app/pages/settings/settings-page.component.html b/src/app/pages/settings/settings-page.component.html
new file mode 100644
index 0000000..9603e7f
--- /dev/null
+++ b/src/app/pages/settings/settings-page.component.html
@@ -0,0 +1,3 @@
+<div class="settings-container">
+  Settings page
+</div>
diff --git a/src/app/pages/settings/settings-page.component.scss b/src/app/pages/settings/settings-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/settings/settings-page.component.ts b/src/app/pages/settings/settings-page.component.ts
new file mode 100644
index 0000000..817e995
--- /dev/null
+++ b/src/app/pages/settings/settings-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  imports: [],
+  templateUrl: './settings-page.component.html',
+  styleUrl: './settings-page.component.scss'
+})
+export class SettingsPageComponent { }
diff --git a/src/styles.scss b/src/styles.scss
index ac47f6e..fe32d0a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,7 +10,7 @@ html {
   height: 100%;
   @include mat.theme((
     color: (
-      primary: mat.$cyan-palette,
+      primary: mat.$azure-palette,
       tertiary: mat.$orange-palette,
     ),
     typography: Roboto,