diff --git a/app.vue b/app.vue
index 2b58b3e7..a96702d9 100644
--- a/app.vue
+++ b/app.vue
@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+useHead({
+  titleTemplate: (titleChunk) =>
+    titleChunk ? `${titleChunk} - Cathedral` : 'Cathedral'
+})
+
 const preAlphaDialogVisible = ref(
   JSON.parse(localStorage.getItem('preAlphaDialogVisible') || 'true')
 );
diff --git a/components/TopNavigation.vue b/components/TopNavigation.vue
index 9aea1d7e..d6673e53 100644
--- a/components/TopNavigation.vue
+++ b/components/TopNavigation.vue
@@ -1,20 +1,21 @@
 <script lang="ts" setup>
+import deSlugify from '~/lib/deSlugify';
+
 const router = useRouter()
 
 let getCrumbs = () => {
     const route = router.currentRoute.value,
         crumbs = route.path.split('/').filter((crumb) => crumb !== '');
 
-    return [{ label: 'Home', route: '/' }].concat(
-        crumbs.map((crumb, index) => {
-            const crumbRoute = router.resolve({ path: '/' + crumbs.slice(0, index + 1).join('/') });
-
+    return [
+        { label: 'Home', route: '/' },
+        ...crumbs.map((crumb, index) => {
             return {
-                label: (crumbRoute.name ?? '{Untitled}').toString(),
+                label: deSlugify(crumb),
                 route: '/' + crumbs.slice(0, index + 1).join('/')
             };
         })
-    )
+    ];
 };
 
 const crumbs = ref(getCrumbs());
diff --git a/lib/deSlugify.ts b/lib/deSlugify.ts
new file mode 100644
index 00000000..5228fefb
--- /dev/null
+++ b/lib/deSlugify.ts
@@ -0,0 +1,7 @@
+/**
+ * deslugify the provided string by replacing hyphens with spaces and converting to Title Case
+ */
+export default (str: string) => {
+    return str.replace(/-/g, ' ')
+        .replace(/\b\w/g, char => char.toUpperCase());
+}
\ No newline at end of file
diff --git a/lib/slugify.ts b/lib/slugify.ts
index 9b633bda..665728f0 100644
--- a/lib/slugify.ts
+++ b/lib/slugify.ts
@@ -1,3 +1,7 @@
+/**
+ * Slugify a string by converting it to lowercase, removing whitespace, 
+ * and replacing non-word characters with hyphens.
+ */
 export default (str: string) =>
     str.toLowerCase().trim()
         .replace(/\s/g, '-')
diff --git a/modules/environment/ui/pages/Assumptions.vue b/modules/environment/ui/pages/Assumptions.vue
index 69ae58ce..a047b16d 100644
--- a/modules/environment/ui/pages/Assumptions.vue
+++ b/modules/environment/ui/pages/Assumptions.vue
@@ -12,6 +12,10 @@ import type Assumption from '../../domain/Assumption';
 import { FilterMatchMode } from 'primevue/api';
 import { emptyUuid, type Uuid } from '~/domain/Uuid';
 
+useHead({
+    title: 'Assumptions'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/environment/ui/pages/Components.vue b/modules/environment/ui/pages/Components.vue
index d730ce93..6be25f2e 100644
--- a/modules/environment/ui/pages/Components.vue
+++ b/modules/environment/ui/pages/Components.vue
@@ -12,6 +12,10 @@ import UpdateComponentUseCase from '../../application/UpdateComponentUseCase';
 import DeleteComponentUseCase from '../../application/DeleteComponentUseCase';
 import type Component from '~/domain/Component';
 
+useHead({
+    title: 'Components'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/environment/ui/pages/Constraints.vue b/modules/environment/ui/pages/Constraints.vue
index d54c0c47..796b9ba1 100644
--- a/modules/environment/ui/pages/Constraints.vue
+++ b/modules/environment/ui/pages/Constraints.vue
@@ -13,6 +13,10 @@ import DeleteConstraintUseCase from '../../application/DeleteConstraintUseCase';
 import type Constraint from '../../domain/Constraint';
 import { ConstraintCategory } from '../../domain/Constraint';
 
+useHead({
+    title: 'Constraints'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/environment/ui/pages/Effects.vue b/modules/environment/ui/pages/Effects.vue
index 13cf5143..79df41b3 100644
--- a/modules/environment/ui/pages/Effects.vue
+++ b/modules/environment/ui/pages/Effects.vue
@@ -13,6 +13,10 @@ import UpdateEffectUseCase from '../../application/UpdateEffectUseCase';
 import DeleteEffectUseCase from '../../application/DeleteEffectUseCase';
 import type Effect from '../../domain/Effect';
 
+useHead({
+    title: 'Effects'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/environment/ui/pages/Glossary.vue b/modules/environment/ui/pages/Glossary.vue
index 46db6377..6de3d82e 100644
--- a/modules/environment/ui/pages/Glossary.vue
+++ b/modules/environment/ui/pages/Glossary.vue
@@ -12,6 +12,10 @@ import type GlossaryTerm from '../../domain/GlossaryTerm';
 import { FilterMatchMode } from 'primevue/api';
 import { emptyUuid, type Uuid } from '~/domain/Uuid';
 
+useHead({
+    title: 'Glossary'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/environment/ui/pages/Index.vue b/modules/environment/ui/pages/Index.vue
index 6541dd40..47c04e96 100644
--- a/modules/environment/ui/pages/Index.vue
+++ b/modules/environment/ui/pages/Index.vue
@@ -5,6 +5,10 @@ import EnvironmentRepository from '../../data/EnvironmentRepository';
 import GetEnvironmentBySolutionIdUseCase from '../../application/GetEnvironmentBySolutionIdUseCase';
 import CreateEnvironmentUseCase from '../../application/CreateEnvironmentUseCase';
 
+useHead({
+    title: 'Environment'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/environment/ui/pages/Invariants.vue b/modules/environment/ui/pages/Invariants.vue
index 3195f519..4aeb1b4f 100644
--- a/modules/environment/ui/pages/Invariants.vue
+++ b/modules/environment/ui/pages/Invariants.vue
@@ -12,6 +12,10 @@ import UpdateInvariantUseCase from '../../application/UpdateInvariantUseCase';
 import DeleteInvariantUseCase from '../../application/DeleteInvariantUseCase';
 import type Invariant from '../../domain/Invariant';
 
+useHead({
+    title: 'Invariants'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/goals/ui/pages/Index.vue b/modules/goals/ui/pages/Index.vue
index 26595426..f5bcd9d9 100644
--- a/modules/goals/ui/pages/Index.vue
+++ b/modules/goals/ui/pages/Index.vue
@@ -5,6 +5,10 @@ import GetGoalsBySolutionIdUseCase from '../../application/GetGoalsBySolutionIdU
 import GetSolutionBySlugUseCase from '~/modules/solution/application/GetSolutionBySlugUseCase';
 import CreateGoalsUseCase from '../../application/CreateGoalsUseCase';
 
+useHead({
+    title: 'Goals'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/goals/ui/pages/Limitations.vue b/modules/goals/ui/pages/Limitations.vue
index ad1cc9be..2d32f028 100644
--- a/modules/goals/ui/pages/Limitations.vue
+++ b/modules/goals/ui/pages/Limitations.vue
@@ -11,7 +11,10 @@ import CreateLimitUseCase from '../../application/CreateLimitUseCase';
 import UpdateLimitUseCase from '../../application/UpdateLimitUseCase';
 import DeleteLimitUseCase from '../../application/DeleteLimitUseCase';
 import { emptyUuid, type Uuid } from '~/domain/Uuid';
-import type Button from 'primevue/button';
+
+useHead({
+    title: 'Limitations'
+})
 
 const router = useRouter(),
     route = useRoute(),
diff --git a/modules/goals/ui/pages/Obstacles.vue b/modules/goals/ui/pages/Obstacles.vue
index 08b972f2..a69170f6 100644
--- a/modules/goals/ui/pages/Obstacles.vue
+++ b/modules/goals/ui/pages/Obstacles.vue
@@ -12,6 +12,10 @@ import UpdateObstacleUseCase from '../../application/UpdateObstacleUseCase';
 import DeleteObstacleUseCase from '../../application/DeleteObstacleUseCase';
 import { emptyUuid, type Uuid } from '~/domain/Uuid';
 
+useHead({
+    title: 'Obstacles'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
@@ -73,7 +77,6 @@ const onDelete = async (id: Uuid) => {
 
     obstacles.value = await getObstaclesUseCase.execute(goals!.id) ?? []
 }
-
 </script>
 
 <template>
diff --git a/modules/goals/ui/pages/Outcomes.vue b/modules/goals/ui/pages/Outcomes.vue
index 553eca40..19adcf0d 100644
--- a/modules/goals/ui/pages/Outcomes.vue
+++ b/modules/goals/ui/pages/Outcomes.vue
@@ -12,6 +12,10 @@ import UpdateOutcomeUseCase from '../../application/UpdateOutcomeUseCase';
 import DeleteOutcomeUseCase from '../../application/DeleteOutcomeUseCase';
 import { emptyUuid, type Uuid } from '~/domain/Uuid';
 
+useHead({
+    title: 'Outcomes'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/goals/ui/pages/Rationale.vue b/modules/goals/ui/pages/Rationale.vue
index 0f05d01b..2efcddc9 100644
--- a/modules/goals/ui/pages/Rationale.vue
+++ b/modules/goals/ui/pages/Rationale.vue
@@ -7,6 +7,10 @@ import GetGoalsBySolutionIdUseCase from '../../application/GetGoalsBySolutionIdU
 import GetRationaleUseCase from '../../application/GetRationaleUseCase';
 import UpdateRationaleUseCase from '../../application/UpdateRationaleUseCase';
 
+useHead({
+    title: 'Rationale'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/goals/ui/pages/Stakeholders.vue b/modules/goals/ui/pages/Stakeholders.vue
index e45065ef..7fe50eb4 100644
--- a/modules/goals/ui/pages/Stakeholders.vue
+++ b/modules/goals/ui/pages/Stakeholders.vue
@@ -14,6 +14,10 @@ import mermaid from 'mermaid';
 import { emptyUuid, type Uuid } from '~/domain/Uuid';
 import GetStakeHolderByIdUseCase from '../../application/GetStakeHolderByIdUseCase';
 
+useHead({
+    title: 'Stakeholders'
+})
+
 const router = useRouter(),
     route = useRoute(),
     config = useAppConfig(),
diff --git a/modules/goals/ui/pages/UseCases.vue b/modules/goals/ui/pages/UseCases.vue
index c7d61d0d..7d08f989 100644
--- a/modules/goals/ui/pages/UseCases.vue
+++ b/modules/goals/ui/pages/UseCases.vue
@@ -15,6 +15,10 @@ import GetStakeHoldersUseCase from '../../application/GetStakeHoldersUseCase';
 import UpdateUseCaseUseCase from '../../application/UpdateUseCaseUseCase';
 import Stakeholder from '../../domain/Stakeholder';
 
+useHead({
+    title: 'Use Cases'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/project/ui/pages/ProjectIndex.vue b/modules/project/ui/pages/ProjectIndex.vue
index 9699fb6d..43fb8915 100644
--- a/modules/project/ui/pages/ProjectIndex.vue
+++ b/modules/project/ui/pages/ProjectIndex.vue
@@ -1,3 +1,8 @@
+<script lang="ts" setup>
+useHead({
+    title: 'Project'
+})
+</script>
 <template>
     <h1>Project</h1>
 </template>
\ No newline at end of file
diff --git a/modules/solution/ui/pages/solution/[solutionSlug].vue b/modules/solution/ui/pages/solution/[solutionSlug].vue
index 0ec634a2..39a5b878 100644
--- a/modules/solution/ui/pages/solution/[solutionSlug].vue
+++ b/modules/solution/ui/pages/solution/[solutionSlug].vue
@@ -2,6 +2,10 @@
 import GetSolutionBySlugUseCase from '~/modules/solution/application/GetSolutionBySlugUseCase';
 import SolutionRepository from '~/modules/solution/data/SolutionRepository';
 
+useHead({
+    title: 'Solution'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/solution/ui/pages/solution/edit-entry.vue b/modules/solution/ui/pages/solution/edit-entry.vue
index 78104fbe..af735956 100644
--- a/modules/solution/ui/pages/solution/edit-entry.vue
+++ b/modules/solution/ui/pages/solution/edit-entry.vue
@@ -5,6 +5,10 @@ import UpdateSolutionUseCase from '~/modules/solution/application/UpdateSolution
 import SolutionRepository from '~/modules/solution/data/SolutionRepository';
 import Solution from '../solution.vue';
 
+useHead({
+    title: 'Edit Solution'
+})
+
 const router = useRouter(),
     route = useRoute(),
     slug = route.params.solutionSlug as string,
diff --git a/modules/solution/ui/pages/solution/index.vue b/modules/solution/ui/pages/solution/index.vue
index dafad4c3..435d5f52 100644
--- a/modules/solution/ui/pages/solution/index.vue
+++ b/modules/solution/ui/pages/solution/index.vue
@@ -4,6 +4,10 @@ import SolutionRepository from '../../../data/SolutionRepository';
 import type Solution from '../../../domain/Solution';
 import DeleteSolutionUseCase from '~/modules/solution/application/DeleteSolutionUseCase';
 
+useHead({
+    title: 'Solutions'
+})
+
 const router = useRouter(),
     solutionRepo = new SolutionRepository(),
     getAllSolutionsUseCase = new GetAllSolutionsUseCase(solutionRepo),
diff --git a/modules/solution/ui/pages/solution/new-entry.vue b/modules/solution/ui/pages/solution/new-entry.vue
index 26661371..a8e65490 100644
--- a/modules/solution/ui/pages/solution/new-entry.vue
+++ b/modules/solution/ui/pages/solution/new-entry.vue
@@ -5,6 +5,10 @@ import Solution from '../../../domain/Solution';
 import CreateSolutionUseCase from '../../../application/CreateSolutionUseCase';
 import GetSolutionByIdUseCase from '../../../application/GetSolutionByIdUseCase';
 
+useHead({
+    title: 'New Solution'
+})
+
 const router = useRouter(),
     repo = new SolutionRepository(),
     createSolutionUseCase = new CreateSolutionUseCase(repo),
diff --git a/pages/settings.vue b/pages/settings.vue
index f5eb7a2e..9232f2b4 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,3 +1,8 @@
+<script lang="ts" setup>
+useHead({
+    title: 'Settings'
+})
+</script>
 <template>
     <h1>Settings</h1>
 </template>
\ No newline at end of file