diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
new file mode 100644
index 0000000..a9e5079
--- /dev/null
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -0,0 +1,3 @@
+<div class="categories-container">
+  Categories Component
+</div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
new file mode 100644
index 0000000..4450a3e
--- /dev/null
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-categories',
+  imports: [],
+  templateUrl: './categories.component.html',
+  styleUrl: './categories.component.scss'
+})
+export class CategoriesComponent { }
diff --git a/src/app/components/metadata/merchants/merchants.component.html b/src/app/components/metadata/merchants/merchants.component.html
new file mode 100644
index 0000000..c956486
--- /dev/null
+++ b/src/app/components/metadata/merchants/merchants.component.html
@@ -0,0 +1,3 @@
+<div class="merchants-container">
+  Merchants Component
+</div>
diff --git a/src/app/components/metadata/merchants/merchants.component.scss b/src/app/components/metadata/merchants/merchants.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/metadata/merchants/merchants.component.ts b/src/app/components/metadata/merchants/merchants.component.ts
new file mode 100644
index 0000000..b987ac5
--- /dev/null
+++ b/src/app/components/metadata/merchants/merchants.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-merchants',
+  imports: [],
+  templateUrl: './merchants.component.html',
+  styleUrl: './merchants.component.scss'
+})
+export class MerchantsComponent { }
diff --git a/src/app/components/metadata/metadata.component.html b/src/app/components/metadata/metadata.component.html
new file mode 100644
index 0000000..889039c
--- /dev/null
+++ b/src/app/components/metadata/metadata.component.html
@@ -0,0 +1,36 @@
+<div class="metadata-container">
+  <mat-tab-group>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="metadata-tab">
+          <p>Categories</p>
+          <mat-icon class="example-tab-icon">ballot</mat-icon>
+        </div>
+      </ng-template>
+
+      <app-categories />
+    </mat-tab>
+
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="metadata-tab">
+          <p>Merchants</p>
+          <mat-icon class="example-tab-icon">shopping_cart</mat-icon>
+        </div>
+      </ng-template>
+
+      <app-merchants />
+    </mat-tab>
+
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="metadata-tab">
+          <p>Tags</p>
+          <mat-icon class="example-tab-icon">label</mat-icon>
+        </div>
+      </ng-template>
+
+      <app-tags />
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/src/app/components/metadata/metadata.component.scss b/src/app/components/metadata/metadata.component.scss
new file mode 100644
index 0000000..9258375
--- /dev/null
+++ b/src/app/components/metadata/metadata.component.scss
@@ -0,0 +1,5 @@
+.metadata-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
diff --git a/src/app/components/metadata/metadata.component.ts b/src/app/components/metadata/metadata.component.ts
new file mode 100644
index 0000000..59471c5
--- /dev/null
+++ b/src/app/components/metadata/metadata.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { MatTab, MatTabGroup, MatTabLabel } from '@angular/material/tabs';
+import { MatIcon } from '@angular/material/icon';
+import { TagsComponent } from './tags/tags.component';
+import { MerchantsComponent } from './merchants/merchants.component';
+import { CategoriesComponent } from './categories/categories.component';
+
+@Component({
+  selector: 'app-metadata',
+  imports: [
+    MatTabGroup,
+    MatTab,
+    MatIcon,
+    MatTabLabel,
+    TagsComponent,
+    MerchantsComponent,
+    CategoriesComponent
+  ],
+  templateUrl: './metadata.component.html',
+  styleUrl: './metadata.component.scss'
+})
+export class MetadataComponent { }
diff --git a/src/app/components/metadata/tags/tags.component.html b/src/app/components/metadata/tags/tags.component.html
new file mode 100644
index 0000000..73248d6
--- /dev/null
+++ b/src/app/components/metadata/tags/tags.component.html
@@ -0,0 +1,3 @@
+<div class="tags-container">
+  Tags Component
+</div>
diff --git a/src/app/components/metadata/tags/tags.component.scss b/src/app/components/metadata/tags/tags.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/metadata/tags/tags.component.ts b/src/app/components/metadata/tags/tags.component.ts
new file mode 100644
index 0000000..f1d7557
--- /dev/null
+++ b/src/app/components/metadata/tags/tags.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tags',
+  imports: [],
+  templateUrl: './tags.component.html',
+  styleUrl: './tags.component.scss'
+})
+export class TagsComponent { }
diff --git a/src/app/pages/expenses/expense-page.component.html b/src/app/pages/expenses/expense-page.component.html
index 2add09d..de00fc6 100644
--- a/src/app/pages/expenses/expense-page.component.html
+++ b/src/app/pages/expenses/expense-page.component.html
@@ -1,4 +1,4 @@
-<div class="expenses-container">
+<div class="expenses-page-container">
   <app-expense />
   <app-expense-list />
 </div>
diff --git a/src/app/pages/expenses/expense-page.component.scss b/src/app/pages/expenses/expense-page.component.scss
index b35508b..30bf02c 100644
--- a/src/app/pages/expenses/expense-page.component.scss
+++ b/src/app/pages/expenses/expense-page.component.scss
@@ -1,4 +1,4 @@
-.expenses-container {
+.expenses-page-container {
   display: flex;
   flex-direction: column;
   gap: 1rem;
diff --git a/src/app/pages/expenses/expense-page.component.ts b/src/app/pages/expenses/expense-page.component.ts
index 18f24e0..542a3fc 100644
--- a/src/app/pages/expenses/expense-page.component.ts
+++ b/src/app/pages/expenses/expense-page.component.ts
@@ -3,7 +3,7 @@ import { ExpenseListComponent } from '../../components/expense-list/expense-list
 import { ExpenseComponent } from '../../components/expense/expense.component';
 
 @Component({
-  selector: 'app-expenses',
+  selector: 'app-expenses-page',
   imports: [
     ExpenseListComponent,
     ExpenseComponent
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 326f0d3..19cf282 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,3 +1,3 @@
-<div class="home-container">
+<div class="home-page-container">
   <h2>The common sense expense tracker.</h2>
 </div>
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 012cfae..e9a654d 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-home',
+  selector: 'app-home-page',
   imports: [],
   templateUrl: './home-page.component.html',
   styleUrl: './home-page.component.scss'
diff --git a/src/app/pages/metadata/metadata-page.component.html b/src/app/pages/metadata/metadata-page.component.html
index 49ebd46..61dae30 100644
--- a/src/app/pages/metadata/metadata-page.component.html
+++ b/src/app/pages/metadata/metadata-page.component.html
@@ -1,3 +1,3 @@
-<div class="metadata-container">
-  Metadata page
+<div class="metadata-page-container">
+  <app-metadata />
 </div>
diff --git a/src/app/pages/metadata/metadata-page.component.ts b/src/app/pages/metadata/metadata-page.component.ts
index 778d92d..418c735 100644
--- a/src/app/pages/metadata/metadata-page.component.ts
+++ b/src/app/pages/metadata/metadata-page.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { MetadataComponent } from '../../components/metadata/metadata.component';
 
 @Component({
-  selector: 'app-metadata',
-  imports: [],
+  selector: 'app-metadata-page',
+  imports: [
+    MetadataComponent
+  ],
   templateUrl: './metadata-page.component.html',
   styleUrl: './metadata-page.component.scss'
 })
diff --git a/src/app/pages/settings/settings-page.component.html b/src/app/pages/settings/settings-page.component.html
index 9603e7f..4119953 100644
--- a/src/app/pages/settings/settings-page.component.html
+++ b/src/app/pages/settings/settings-page.component.html
@@ -1,3 +1,3 @@
-<div class="settings-container">
+<div class="settings-page-container">
   Settings page
 </div>
diff --git a/src/app/pages/settings/settings-page.component.ts b/src/app/pages/settings/settings-page.component.ts
index 817e995..dc4e2f1 100644
--- a/src/app/pages/settings/settings-page.component.ts
+++ b/src/app/pages/settings/settings-page.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-settings',
+  selector: 'app-settings-page',
   imports: [],
   templateUrl: './settings-page.component.html',
   styleUrl: './settings-page.component.scss'