From 150169e9b717ee0d53e186a91275a9ae587ae05e Mon Sep 17 00:00:00 2001
From: Cypress Reed <cypress@fyralabs.com>
Date: Fri, 24 Jul 2026 17:15:02 -0600
Subject: [PATCH 1/3] fix missing page titles and add checks

---
 apps/dashboard/package.json                   |  2 +-
 apps/dashboard/scripts/check-svelte-head.js   | 82 +++++++++++++++++++
 .../src/lib/components/PageTitle.svelte       |  7 ++
 apps/dashboard/src/routes/(app)/+error.svelte |  1 +
 apps/dashboard/src/routes/(app)/+page.svelte  |  5 +-
 .../routes/(app)/admin/emails/+page.svelte    |  5 +-
 .../routes/(app)/admin/features/+page.svelte  |  3 +
 .../routes/(app)/admin/images/+page.svelte    |  3 +
 .../src/routes/(app)/admin/ipam/+page.svelte  |  3 +
 .../(app)/admin/projects/[[id]]/+page.svelte  |  5 +-
 .../(app)/admin/users/[[id]]/+page.svelte     |  5 +-
 .../routes/(app)/admin/vm-types/+page.svelte  |  3 +
 .../(app)/admin/vms/[[id]]/+page.svelte       |  5 +-
 .../(app)/projects/[projectid]/+page.svelte   |  6 ++
 .../projects/[projectid]/billing/+page.svelte |  7 +-
 .../[projectid]/colocation/[id]/+page.svelte  |  3 +
 .../colocation/[id]/images/+page.svelte       |  3 +
 .../colocation/[id]/ipmi/+page.svelte         |  3 +
 .../colocation/[id]/networking/+page.svelte   |  3 +
 .../colocation/[id]/sensors/+page.svelte      |  3 +
 .../colocation/[id]/settings/+page.svelte     |  3 +
 .../[projectid]/firewall/+page.svelte         |  3 +
 .../projects/[projectid]/images/+page.svelte  |  3 +
 .../projects/[projectid]/logs/+page.svelte    |  3 +
 .../[projectid]/networking/+page.svelte       |  3 +
 .../[projectid]/servers/+layout.svelte        |  6 ++
 .../projects/[projectid]/servers/+page.svelte |  3 +
 .../[projectid]/servers/[id]/+page.svelte     |  3 +
 .../servers/[id]/backups/+page.svelte         |  3 +
 .../servers/[id]/console/+page.svelte         |  3 +
 .../servers/[id]/images/+page.svelte          |  3 +
 .../servers/[id]/logs/+page.svelte            |  3 +
 .../servers/[id]/networking/+page.svelte      |  3 +
 .../servers/[id]/rebuild/+page.svelte         |  3 +
 .../servers/[id]/rescue/+page.svelte          |  3 +
 .../servers/[id]/resize/+page.svelte          |  3 +
 .../servers/[id]/settings/+page.svelte        |  3 +
 .../servers/[id]/snapshots/+page.svelte       |  3 +
 .../[projectid]/servers/create/+page.svelte   |  5 +-
 .../[projectid]/settings/+page.svelte         |  5 +-
 .../projects/[projectid]/volumes/+page.svelte |  3 +
 .../[invitationId]/+page.svelte               |  5 +-
 .../src/routes/forgot-password/+page.svelte   |  5 +-
 apps/dashboard/src/routes/login/+page.svelte  |  5 +-
 .../login/two-factor/passkey/+page.svelte     |  5 +-
 .../routes/login/two-factor/totp/+page.svelte |  5 +-
 .../src/routes/register/+page.svelte          |  5 +-
 .../src/routes/reset-password/+page.svelte    |  5 +-
 48 files changed, 215 insertions(+), 47 deletions(-)
 create mode 100644 apps/dashboard/scripts/check-svelte-head.js
 create mode 100644 apps/dashboard/src/lib/components/PageTitle.svelte

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index e6c97a3..35eae44 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -15,7 +15,7 @@
 		"cf:deploy:preview": "pnpm run build && wrangler deploy --env preview",
 		"email:dev": "bse dev -c src/routes/layout.css",
 		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --tsgo-experimental-api",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --tsgo-experimental-api && node scripts/check-svelte-head.js",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check .",
 		"format": "prettier --write .",
diff --git a/apps/dashboard/scripts/check-svelte-head.js b/apps/dashboard/scripts/check-svelte-head.js
new file mode 100644
index 0000000..66d60dc
--- /dev/null
+++ b/apps/dashboard/scripts/check-svelte-head.js
@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+import { readdir, readFile } from 'node:fs/promises';
+import { join, relative } from 'node:path';
+
+const ROUTES_DIR = new URL('../src/routes', import.meta.url).pathname;
+const OPT_OUT_COMMENT = 'check:allow-missing-head';
+const HARD_EXCLUDES = ['src/routes/+layout.svelte'];
+const strict = process.argv.includes('--strict');
+
+async function* walk(dir) {
+	const entries = await readdir(dir, { withFileTypes: true });
+	for (const entry of entries) {
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			yield* walk(path);
+		} else if (entry.isFile()) {
+			yield path;
+		}
+	}
+}
+
+async function main() {
+	const missing = [];
+
+	for await (const filePath of walk(ROUTES_DIR)) {
+		const fileName = filePath.split('/').pop();
+		const projectRelative = relative(join(ROUTES_DIR, '..', '..'), filePath);
+
+		if (HARD_EXCLUDES.some((ex) => projectRelative.endsWith(ex))) {
+			continue;
+		}
+
+		let shouldCheck = false;
+		if (fileName === '+page.svelte' || fileName === '+error.svelte') {
+			shouldCheck = true;
+		}
+
+		if (!shouldCheck) {
+			continue;
+		}
+
+		const content = await readFile(filePath, 'utf-8');
+		if (content.includes('<svelte:head>')) {
+			continue;
+		}
+		if (content.includes('<PageTitle')) {
+			continue;
+		}
+		if (content.includes(OPT_OUT_COMMENT)) {
+			continue;
+		}
+
+		missing.push(projectRelative);
+	}
+
+	if (missing.length === 0) {
+		console.log(
+			'✓ All routes have a <PageTitle> component, a <svelte:head> section, or an opt-out comment.'
+		);
+		process.exit(0);
+	}
+
+	console.error('✗ Missing <PageTitle> or <svelte:head> in the following route files:\n');
+	for (const file of missing) {
+		console.error(`  - ${file}`);
+	}
+	console.error(
+		'\nAdd a <PageTitle> component to each file, or add <!-- check:allow-missing-head --> to opt out.'
+	);
+
+	if (strict) {
+		process.exit(1);
+	} else {
+		console.error('\n(passing because --strict was not set)');
+		process.exit(0);
+	}
+}
+
+main().catch((err) => {
+	console.error(err);
+	process.exit(1);
+});
diff --git a/apps/dashboard/src/lib/components/PageTitle.svelte b/apps/dashboard/src/lib/components/PageTitle.svelte
new file mode 100644
index 0000000..8bc19cd
--- /dev/null
+++ b/apps/dashboard/src/lib/components/PageTitle.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { title }: { title: string } = $props();
+</script>
+
+<svelte:head>
+	<title>{title} / Stack</title>
+</svelte:head>
diff --git a/apps/dashboard/src/routes/(app)/+error.svelte b/apps/dashboard/src/routes/(app)/+error.svelte
index e0a0731..ae1d16f 100644
--- a/apps/dashboard/src/routes/(app)/+error.svelte
+++ b/apps/dashboard/src/routes/(app)/+error.svelte
@@ -3,6 +3,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	const isNotFound = $derived(page.status === 404);
 	const isServerError = $derived(page.status >= 500);
diff --git a/apps/dashboard/src/routes/(app)/+page.svelte b/apps/dashboard/src/routes/(app)/+page.svelte
index 4fcbeca..24eca31 100644
--- a/apps/dashboard/src/routes/(app)/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto, invalidate } from '$app/navigation';
 	import { authClient } from '$lib/auth-client';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { Button } from '$lib/components/ui/button';
@@ -108,9 +109,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Projects / Stack</title>
-</svelte:head>
+<PageTitle title="Projects" />
 
 <div class="flex min-h-0 flex-1 flex-col overflow-auto bg-background/30">
 	<div class="mx-auto flex w-full max-w-7xl flex-1 flex-col px-6 py-8 sm:px-8 lg:px-10">
diff --git a/apps/dashboard/src/routes/(app)/admin/emails/+page.svelte b/apps/dashboard/src/routes/(app)/admin/emails/+page.svelte
index f065097..5c835e3 100644
--- a/apps/dashboard/src/routes/(app)/admin/emails/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/emails/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
@@ -336,9 +337,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Emails</title>
-</svelte:head>
+<PageTitle title="Emails" />
 
 <div class="flex-1 overflow-auto">
 	<div class="mx-auto flex w-full max-w-3xl flex-col gap-6 p-5">
diff --git a/apps/dashboard/src/routes/(app)/admin/features/+page.svelte b/apps/dashboard/src/routes/(app)/admin/features/+page.svelte
index 122812a..372bcee 100644
--- a/apps/dashboard/src/routes/(app)/admin/features/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/features/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import {
 		featureFlagKeys,
 		featureFlagLabels,
@@ -68,6 +69,8 @@
 	}
 </script>
 
+<PageTitle title="Features" />
+
 <div class="flex-1 overflow-auto">
 	<div class="flex flex-col gap-5 p-5">
 		{#if admin.featureFlagError}
diff --git a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
index 0eafee9..d883081 100644
--- a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Input } from '$lib/components/ui/input';
@@ -79,6 +80,8 @@
 	);
 </script>
 
+<PageTitle title="Images" />
+
 <div class="flex-1 overflow-auto">
 	<div class="flex items-center justify-end gap-2 border-b border-border/60 px-5 py-2">
 		<Button
diff --git a/apps/dashboard/src/routes/(app)/admin/ipam/+page.svelte b/apps/dashboard/src/routes/(app)/admin/ipam/+page.svelte
index e21f2e9..4951d2b 100644
--- a/apps/dashboard/src/routes/(app)/admin/ipam/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/ipam/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { invalidate } from '$app/navigation';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
@@ -157,6 +158,8 @@
 	}
 </script>
 
+<PageTitle title="IPAM" />
+
 <div class="flex-1 overflow-auto">
 	<div class="flex items-center gap-4 border-b border-border/60 px-5 py-3">
 		<div class="flex items-center gap-2 text-xs text-muted-foreground">
diff --git a/apps/dashboard/src/routes/(app)/admin/projects/[[id]]/+page.svelte b/apps/dashboard/src/routes/(app)/admin/projects/[[id]]/+page.svelte
index 0a59809..aba64e6 100644
--- a/apps/dashboard/src/routes/(app)/admin/projects/[[id]]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/projects/[[id]]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { goto, invalidate } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
@@ -438,9 +439,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Projects</title>
-</svelte:head>
+<PageTitle title="Projects" />
 
 {#snippet projectDetail(project: AdminProject)}
 	{@const vmsForProject = projectVms(project.id)}
diff --git a/apps/dashboard/src/routes/(app)/admin/users/[[id]]/+page.svelte b/apps/dashboard/src/routes/(app)/admin/users/[[id]]/+page.svelte
index 7bfc141..3398455 100644
--- a/apps/dashboard/src/routes/(app)/admin/users/[[id]]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/users/[[id]]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
@@ -281,9 +282,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Users</title>
-</svelte:head>
+<PageTitle title="Users" />
 
 <div class="flex-1 overflow-auto">
 	<div class="flex flex-col gap-5 p-5">
diff --git a/apps/dashboard/src/routes/(app)/admin/vm-types/+page.svelte b/apps/dashboard/src/routes/(app)/admin/vm-types/+page.svelte
index 3e01c51..2eab902 100644
--- a/apps/dashboard/src/routes/(app)/admin/vm-types/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/vm-types/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Input } from '$lib/components/ui/input';
@@ -60,6 +61,8 @@
 	}
 </script>
 
+<PageTitle title="VM Types" />
+
 <div class="flex-1 overflow-auto">
 	<div class="flex items-center justify-end border-b border-border/60 px-5 py-2">
 		<Button size="sm" class="h-7 gap-1.5 text-xs" onclick={() => admin.vtOpenCreate()}>
diff --git a/apps/dashboard/src/routes/(app)/admin/vms/[[id]]/+page.svelte b/apps/dashboard/src/routes/(app)/admin/vms/[[id]]/+page.svelte
index 35558a4..cb1c037 100644
--- a/apps/dashboard/src/routes/(app)/admin/vms/[[id]]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/vms/[[id]]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { Button } from '$lib/components/ui/button';
@@ -184,9 +185,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>VMs</title>
-</svelte:head>
+<PageTitle title="VMs" />
 
 <div class="flex-1 overflow-auto">
 	<div class="flex flex-col gap-5 p-5">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/+page.svelte
index 0210221..2de7c45 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/+page.svelte
@@ -1,3 +1,9 @@
+<script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
+</script>
+
+<PageTitle title="Dashboard" />
+
 <div class="flex h-full items-center justify-center">
 	<p class="text-sm text-muted-foreground">Redirecting to servers...</p>
 </div>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/billing/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/billing/+page.svelte
index bc75e9f..65fee53 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/billing/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/billing/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import BillingSetupDialog from '$lib/components/billing-setup-dialog.svelte';
 	import { openBillingPortal } from '$lib/remote/billing.remote';
 	import { getErrorMessage } from '$lib/utils';
@@ -133,11 +134,9 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Billing / Stack</title>
-</svelte:head>
+<PageTitle title="Billing" />
 
-<div class="flex flex-1 flex-col overflow-hidden">
+<div class="flex flex-1 flex-col overflow-auto">
 	<BillingSetupDialog
 		bind:open={billingSetupOpen}
 		{projectId}
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/+page.svelte
index e04c9f4..8317c5a 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { getColocationContext } from '../colocation-context.svelte';
 
 	const colo = getColocationContext();
@@ -67,6 +68,8 @@
 	});
 </script>
 
+<PageTitle title="Colocation" />
+
 {#if colo.selectedUnit}
 	<div class="flex min-h-0 flex-1 flex-col overflow-auto">
 		<div class="shrink-0">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/images/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/images/+page.svelte
index 2709fe7..34402dd 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/images/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import Icon from '$lib/components/icon.svelte';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
@@ -184,6 +185,8 @@
 	}
 </script>
 
+<PageTitle title="Colocation Images" />
+
 {#if colo.selectedUnit}
 	<div class="flex flex-1 flex-col overflow-hidden">
 		{#if mountedImage}
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/ipmi/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/ipmi/+page.svelte
index 62feea0..6d1226c 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/ipmi/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/ipmi/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import Check from '~icons/lucide/check';
 	import Copy from '~icons/nucleo/copy';
@@ -67,6 +68,8 @@
 	}
 </script>
 
+<PageTitle title="IPMI" />
+
 {#if colo.selectedUnit}
 	<div class="flex-1 overflow-auto">
 		<div class="divide-y divide-border/50">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/networking/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/networking/+page.svelte
index da5b2e4..9368d23 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/networking/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/networking/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
@@ -71,6 +72,8 @@
 	}
 </script>
 
+<PageTitle title="Colocation Networking" />
+
 {#if colo.selectedUnit}
 	<div class="flex-1 overflow-auto">
 		<div class="divide-y divide-border/50">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/sensors/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/sensors/+page.svelte
index d63c0f2..a6353cc 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/sensors/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/sensors/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import Activity from '~icons/nucleo/activity';
 	import Cpu from '~icons/nucleo/cpu';
 	import Fan from '~icons/nucleo/wind';
@@ -35,6 +36,8 @@
 	});
 </script>
 
+<PageTitle title="Sensors" />
+
 {#if colo.selectedUnit}
 	<div class="flex-1 overflow-auto">
 		{#if sensorData}
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/settings/+page.svelte
index cf7a2aa..d987ec2 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/settings/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/colocation/[id]/settings/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import Check from '~icons/lucide/check';
@@ -22,6 +23,8 @@
 	}
 </script>
 
+<PageTitle title="Colocation Settings" />
+
 {#if colo.selectedUnit}
 	<div class="flex-1 overflow-auto">
 		<div class="divide-y divide-border/50">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/firewall/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/firewall/+page.svelte
index 8da4571..6e4b630 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/firewall/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/firewall/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Input } from '$lib/components/ui/input';
@@ -180,6 +181,8 @@
 	}
 </script>
 
+<PageTitle title="Firewall" />
+
 <div class="flex flex-1 flex-col overflow-hidden">
 	<div class="border-b border-border bg-background/40 px-5 py-2 text-xs text-muted-foreground">
 		Preview: firewall isn't live yet. Changes here aren't saved.
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/images/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/images/+page.svelte
index 4ff8ffc..8ae4f44 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/images/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Badge } from '$lib/components/ui/badge';
 	import * as Sheet from '$lib/components/ui/sheet';
 	import { imageTypeColors } from '$lib/data/images';
@@ -98,6 +99,8 @@
 	}
 </script>
 
+<PageTitle title="Images" />
+
 <div class="flex flex-1 flex-col overflow-hidden">
 	<div class="flex h-10 shrink-0 items-center justify-between border-b border-border px-5">
 		<div class="flex items-center gap-2">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/logs/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/logs/+page.svelte
index d51c1b6..a5bd0d8 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/logs/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/logs/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Input } from '$lib/components/ui/input';
@@ -191,6 +192,8 @@
 	];
 </script>
 
+<PageTitle title="Logs" />
+
 <div class="flex flex-1 flex-col overflow-hidden lg:flex-row">
 	<!-- Server selector panel -->
 	<div
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/networking/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/networking/+page.svelte
index d9cfdd3..f447837 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/networking/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/networking/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Input } from '$lib/components/ui/input';
@@ -110,6 +111,8 @@
 	}
 </script>
 
+<PageTitle title="Networking" />
+
 <div class="flex flex-1 flex-col overflow-hidden">
 	<!-- Header -->
 	<div class="flex h-10 shrink-0 items-center gap-2 border-b border-border px-5">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+layout.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+layout.svelte
index 6f6cd2b..8c4991e 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+layout.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { untrack } from 'svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
@@ -222,8 +223,13 @@
 				? currentPath.split('/').pop()
 				: null
 	);
+	const selectedServer = $derived(
+		selectedServerId ? serversState.servers.find((s) => s.id === selectedServerId) : null
+	);
 </script>
 
+<PageTitle title={selectedServer?.name ?? 'Machines'} />
+
 <div class="flex h-full w-full flex-col overflow-hidden lg:flex-row">
 	<div
 		class="flex w-full shrink-0 flex-col border-b border-border lg:max-h-none lg:w-64 lg:border-r lg:border-b-0 {listOpen
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+page.svelte
index 6949a70..a7e7a63 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/+page.svelte
@@ -6,6 +6,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import { serversState } from '$lib/state/servers.svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	const shouldShowEmptyState = $derived(
 		!serversState.loading &&
@@ -14,6 +15,8 @@
 	);
 </script>
 
+<PageTitle title="Machines" />
+
 {#if shouldShowEmptyState}
 	<div class="flex h-full flex-col items-center justify-center text-muted-foreground">
 		<div class="flex w-full flex-col items-center px-4 text-center">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
index 245e3a8..2b1d04d 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
@@ -8,6 +8,7 @@
 	import Terminal from '~icons/nucleo/terminal';
 	import Trash2 from '~icons/nucleo/trash';
 	import { getServerWithFallback, serversState } from '$lib/state/servers.svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -198,6 +199,8 @@
 	}
 </script>
 
+<PageTitle title="Overview" />
+
 <h1 class="sr-only">Server Overview</h1>
 
 <div class="grid shrink-0 grid-cols-2 gap-px border-b border-border bg-muted lg:grid-cols-4">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
index a19e313..394edd8 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Badge } from '$lib/components/ui/badge';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -11,6 +12,8 @@
 	];
 </script>
 
+<PageTitle title="Backups" />
+
 <div class="overflow-auto">
 	<div class="px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Backups</span
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
index 6182f7f..4f350f3 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import Terminal from '~icons/nucleo/terminal';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
 </script>
 
+<PageTitle title="Console" />
+
 <div class="flex min-h-0 flex-1 flex-col items-center justify-center bg-background p-8 text-center">
 	<Terminal class="mb-3 h-8 w-8 text-muted-foreground" />
 	<p class="text-sm text-muted-foreground">Web console isn't available yet</p>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
index d6964db..8e62a45 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
@@ -18,6 +18,7 @@
 	import Search from '~icons/nucleo/search';
 	import Trash2 from '~icons/nucleo/trash';
 	import Upload from '~icons/nucleo/upload';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -94,6 +95,8 @@
 	}
 </script>
 
+<PageTitle title="Images" />
+
 <div class="flex flex-1 flex-col overflow-hidden">
 	{#if mountedImage}
 		<div class="flex items-center justify-between border-b border-border bg-muted/20 px-5 py-2.5">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
index fb9e038..52cc5b2 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
@@ -7,6 +7,7 @@
 	import AlertTriangle from '~icons/nucleo/alert-triangle';
 	import Search from '~icons/nucleo/search';
 	import Trash2 from '~icons/nucleo/trash';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -72,6 +73,8 @@
 	}
 </script>
 
+<PageTitle title="Logs" />
+
 <div class="flex h-8 shrink-0 items-center justify-between border-b border-border px-4">
 	<div class="flex items-center gap-2">
 		<span class="text-xs font-medium text-muted-foreground">{selectedServer.name}</span>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
index 0a91985..d57304a 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
@@ -11,6 +11,7 @@
 	import Copy from '~icons/nucleo/copy';
 	import Pencil from '~icons/nucleo/pencil';
 	import Trash2 from '~icons/nucleo/trash';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -29,6 +30,8 @@
 	}
 </script>
 
+<PageTitle title="Networking" />
+
 <div class="flex-1 divide-y divide-border/50 overflow-auto">
 	<div class="px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
index 4761233..8ff5cbc 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
@@ -4,6 +4,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -17,6 +18,8 @@
 	];
 </script>
 
+<PageTitle title="Rebuild" />
+
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Rebuild Server</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
index 56e5225..a79dd65 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
@@ -2,11 +2,14 @@
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Switch } from '$lib/components/ui/switch';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
 </script>
 
+<PageTitle title="Rescue" />
+
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Rescue Mode</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
index fe1e8eb..5b11621 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -12,6 +13,8 @@
 	];
 </script>
 
+<PageTitle title="Resize" />
+
 <div class="space-y-4 p-5">
 	<p class="border border-border bg-background/40 px-3 py-2 text-xs text-muted-foreground">
 		Resizing isn't available yet.
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
index 3b347b7..3390873 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
@@ -10,6 +10,7 @@
 	import ComingSoon from '$lib/components/coming-soon.svelte';
 	import { confirmDestructive } from '$lib/confirm.svelte';
 	import { deleteVm } from '$lib/remote/vms.remote';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -41,6 +42,8 @@
 	}
 </script>
 
+<PageTitle title="Server Settings" />
+
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Server Settings</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
index 631200b..1dc4fd6 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
@@ -4,6 +4,7 @@
 	import ComingSoon from '$lib/components/coming-soon.svelte';
 	import Camera from '~icons/nucleo/camera';
 	import Trash2 from '~icons/nucleo/trash';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -13,6 +14,8 @@
 	]);
 </script>
 
+<PageTitle title="Snapshots" />
+
 <div class="overflow-auto">
 	<div class="flex items-center justify-between px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/create/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/create/+page.svelte
index 011fd99..4855de6 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/create/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/create/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { goto, invalidate } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { Button } from '$lib/components/ui/button';
@@ -378,9 +379,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Create Server / Stack</title>
-</svelte:head>
+<PageTitle title="Create Server" />
 
 <div class="flex h-full flex-col overflow-hidden">
 	<BillingSetupDialog
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/settings/+page.svelte
index 7e5aaef..96d951c 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/settings/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/settings/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto, invalidate } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { resolve } from '$app/paths';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
@@ -179,9 +180,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Project Settings / Stack</title>
-</svelte:head>
+<PageTitle title="Project Settings" />
 
 <div class="flex h-full w-full flex-col overflow-hidden">
 	<div class="flex-1 overflow-auto">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/volumes/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/volumes/+page.svelte
index 053ef3a..c421a2a 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/volumes/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/volumes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { page } from '$app/state';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
@@ -232,6 +233,8 @@
 	}
 </script>
 
+<PageTitle title="Volumes" />
+
 <div class="flex flex-1 flex-col overflow-hidden">
 	<!-- Header -->
 	<div class="flex h-10 shrink-0 items-center justify-between border-b border-border px-5">
diff --git a/apps/dashboard/src/routes/accept-invitation/[invitationId]/+page.svelte b/apps/dashboard/src/routes/accept-invitation/[invitationId]/+page.svelte
index 55f012c..05aa2ef 100644
--- a/apps/dashboard/src/routes/accept-invitation/[invitationId]/+page.svelte
+++ b/apps/dashboard/src/routes/accept-invitation/[invitationId]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { authClient } from '$lib/auth-client';
 	import AlertCircle from '~icons/nucleo/alert-circle';
@@ -49,9 +50,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Invitation / Stack</title>
-</svelte:head>
+<PageTitle title="Invitation" />
 
 <div class="flex min-h-screen items-center justify-center bg-background px-4">
 	<div class="w-full max-w-xs">
diff --git a/apps/dashboard/src/routes/forgot-password/+page.svelte b/apps/dashboard/src/routes/forgot-password/+page.svelte
index a7c2347..69b7332 100644
--- a/apps/dashboard/src/routes/forgot-password/+page.svelte
+++ b/apps/dashboard/src/routes/forgot-password/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Input } from '$lib/components/ui/input';
 	import { authClient } from '$lib/auth-client';
 	import Loader2 from '~icons/lucide/loader-2';
@@ -32,9 +33,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Forgot password / Stack</title>
-</svelte:head>
+<PageTitle title="Forgot password" />
 
 <main class="flex min-h-screen items-center justify-center bg-background px-4">
 	<div class="w-full max-w-xs">
diff --git a/apps/dashboard/src/routes/login/+page.svelte b/apps/dashboard/src/routes/login/+page.svelte
index 7ffdd3c..56a14fc 100644
--- a/apps/dashboard/src/routes/login/+page.svelte
+++ b/apps/dashboard/src/routes/login/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { authClient } from '$lib/auth-client';
@@ -102,9 +103,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Sign in / Stack</title>
-</svelte:head>
+<PageTitle title="Sign in" />
 
 <main class="flex min-h-screen items-center justify-center bg-background px-4">
 	<div class="w-full max-w-xs">
diff --git a/apps/dashboard/src/routes/login/two-factor/passkey/+page.svelte b/apps/dashboard/src/routes/login/two-factor/passkey/+page.svelte
index a7fd586..f04ba1f 100644
--- a/apps/dashboard/src/routes/login/two-factor/passkey/+page.svelte
+++ b/apps/dashboard/src/routes/login/two-factor/passkey/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { authClient } from '$lib/auth-client';
 	import { Button } from '$lib/components/ui/button';
 	import Loader2 from '~icons/lucide/loader-2';
@@ -43,9 +44,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Verify with Passkey / Stack</title>
-</svelte:head>
+<PageTitle title="Verify with Passkey" />
 
 <div class="flex min-h-screen items-center justify-center bg-background px-4">
 	<div class="w-full max-w-xs">
diff --git a/apps/dashboard/src/routes/login/two-factor/totp/+page.svelte b/apps/dashboard/src/routes/login/two-factor/totp/+page.svelte
index ba57e57..059ad9f 100644
--- a/apps/dashboard/src/routes/login/two-factor/totp/+page.svelte
+++ b/apps/dashboard/src/routes/login/two-factor/totp/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { authClient } from '$lib/auth-client';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
@@ -36,9 +37,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Two-Factor Authentication / Stack</title>
-</svelte:head>
+<PageTitle title="Two-Factor Authentication" />
 
 <div class="flex min-h-screen items-center justify-center bg-background px-4">
 	<div class="w-full max-w-xs">
diff --git a/apps/dashboard/src/routes/register/+page.svelte b/apps/dashboard/src/routes/register/+page.svelte
index df0d094..d395bed 100644
--- a/apps/dashboard/src/routes/register/+page.svelte
+++ b/apps/dashboard/src/routes/register/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Input } from '$lib/components/ui/input';
 	import { authClient } from '$lib/auth-client';
 	import Loader2 from '~icons/lucide/loader-2';
@@ -77,9 +78,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Register / Stack</title>
-</svelte:head>
+<PageTitle title="Register" />
 
 <main class="flex min-h-screen items-center justify-center bg-background px-4">
 	<div class="w-full max-w-xs">
diff --git a/apps/dashboard/src/routes/reset-password/+page.svelte b/apps/dashboard/src/routes/reset-password/+page.svelte
index c37d2ca..44b2a44 100644
--- a/apps/dashboard/src/routes/reset-password/+page.svelte
+++ b/apps/dashboard/src/routes/reset-password/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { authClient } from '$lib/auth-client';
@@ -43,9 +44,7 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Reset password / Stack</title>
-</svelte:head>
+<PageTitle title="Reset password" />
 
 <main class="flex min-h-screen items-center justify-center bg-background px-4">
 	<div class="w-full max-w-xs">

From a993d477822bcfbd969c5304aa7c71bcabca71f7 Mon Sep 17 00:00:00 2001
From: Cypress Reed <cypress@fyralabs.com>
Date: Fri, 24 Jul 2026 17:28:43 -0600
Subject: [PATCH 2/3] fix vm titles and limit their length

---
 apps/dashboard/src/lib/components/PageTitle.svelte           | 5 ++++-
 .../(app)/projects/[projectid]/servers/[id]/+page.svelte     | 4 +---
 .../projects/[projectid]/servers/[id]/backups/+page.svelte   | 4 +---
 .../projects/[projectid]/servers/[id]/console/+page.svelte   | 4 +---
 .../projects/[projectid]/servers/[id]/images/+page.svelte    | 4 +---
 .../projects/[projectid]/servers/[id]/logs/+page.svelte      | 4 +---
 .../[projectid]/servers/[id]/networking/+page.svelte         | 4 +---
 .../projects/[projectid]/servers/[id]/rebuild/+page.svelte   | 4 +---
 .../projects/[projectid]/servers/[id]/rescue/+page.svelte    | 4 +---
 .../projects/[projectid]/servers/[id]/resize/+page.svelte    | 4 +---
 .../projects/[projectid]/servers/[id]/settings/+page.svelte  | 4 +---
 .../projects/[projectid]/servers/[id]/snapshots/+page.svelte | 4 +---
 12 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/apps/dashboard/src/lib/components/PageTitle.svelte b/apps/dashboard/src/lib/components/PageTitle.svelte
index 8bc19cd..b411c84 100644
--- a/apps/dashboard/src/lib/components/PageTitle.svelte
+++ b/apps/dashboard/src/lib/components/PageTitle.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	let { title }: { title: string } = $props();
+
+	const MAX_LEN = 40;
+	const formatted = $derived(title.length > MAX_LEN ? title.slice(0, MAX_LEN - 1) + '…' : title);
 </script>
 
 <svelte:head>
-	<title>{title} / Stack</title>
+	<title>{formatted} / Stack</title>
 </svelte:head>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
index 2b1d04d..3ac11d8 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
@@ -1,3 +1,4 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import type { PageProps } from './$types';
 	import { Button } from '$lib/components/ui/button';
@@ -8,7 +9,6 @@
 	import Terminal from '~icons/nucleo/terminal';
 	import Trash2 from '~icons/nucleo/trash';
 	import { getServerWithFallback, serversState } from '$lib/state/servers.svelte';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -199,8 +199,6 @@
 	}
 </script>
 
-<PageTitle title="Overview" />
-
 <h1 class="sr-only">Server Overview</h1>
 
 <div class="grid shrink-0 grid-cols-2 gap-px border-b border-border bg-muted lg:grid-cols-4">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
index 394edd8..d5cdcf1 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
@@ -1,7 +1,7 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Badge } from '$lib/components/ui/badge';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -12,8 +12,6 @@
 	];
 </script>
 
-<PageTitle title="Backups" />
-
 <div class="overflow-auto">
 	<div class="px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Backups</span
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
index 4f350f3..3c050dd 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
@@ -1,14 +1,12 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import Terminal from '~icons/nucleo/terminal';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
 </script>
 
-<PageTitle title="Console" />
-
 <div class="flex min-h-0 flex-1 flex-col items-center justify-center bg-background p-8 text-center">
 	<Terminal class="mb-3 h-8 w-8 text-muted-foreground" />
 	<p class="text-sm text-muted-foreground">Web console isn't available yet</p>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
index 8e62a45..2faea15 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
@@ -1,3 +1,4 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
@@ -18,7 +19,6 @@
 	import Search from '~icons/nucleo/search';
 	import Trash2 from '~icons/nucleo/trash';
 	import Upload from '~icons/nucleo/upload';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -95,8 +95,6 @@
 	}
 </script>
 
-<PageTitle title="Images" />
-
 <div class="flex flex-1 flex-col overflow-hidden">
 	{#if mountedImage}
 		<div class="flex items-center justify-between border-b border-border bg-muted/20 px-5 py-2.5">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
index 52cc5b2..8e96fab 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
@@ -1,3 +1,4 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import type { PageProps } from './$types';
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
@@ -7,7 +8,6 @@
 	import AlertTriangle from '~icons/nucleo/alert-triangle';
 	import Search from '~icons/nucleo/search';
 	import Trash2 from '~icons/nucleo/trash';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -73,8 +73,6 @@
 	}
 </script>
 
-<PageTitle title="Logs" />
-
 <div class="flex h-8 shrink-0 items-center justify-between border-b border-border px-4">
 	<div class="flex items-center gap-2">
 		<span class="text-xs font-medium text-muted-foreground">{selectedServer.name}</span>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
index d57304a..44e8dac 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
@@ -1,3 +1,4 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import type { PageProps } from './$types';
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
@@ -11,7 +12,6 @@
 	import Copy from '~icons/nucleo/copy';
 	import Pencil from '~icons/nucleo/pencil';
 	import Trash2 from '~icons/nucleo/trash';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -30,8 +30,6 @@
 	}
 </script>
 
-<PageTitle title="Networking" />
-
 <div class="flex-1 divide-y divide-border/50 overflow-auto">
 	<div class="px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
index 8ff5cbc..9691530 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
@@ -1,10 +1,10 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import type { PageProps } from './$types';
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -18,8 +18,6 @@
 	];
 </script>
 
-<PageTitle title="Rebuild" />
-
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Rebuild Server</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
index a79dd65..a73cf5e 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
@@ -1,15 +1,13 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Switch } from '$lib/components/ui/switch';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
 </script>
 
-<PageTitle title="Rescue" />
-
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Rescue Mode</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
index 5b11621..d5eac6a 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
@@ -1,7 +1,7 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -13,8 +13,6 @@
 	];
 </script>
 
-<PageTitle title="Resize" />
-
 <div class="space-y-4 p-5">
 	<p class="border border-border bg-background/40 px-3 py-2 text-xs text-muted-foreground">
 		Resizing isn't available yet.
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
index 3390873..e550369 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
@@ -1,3 +1,4 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import type { PageProps } from './$types';
 	import { goto, invalidate } from '$app/navigation';
@@ -10,7 +11,6 @@
 	import ComingSoon from '$lib/components/coming-soon.svelte';
 	import { confirmDestructive } from '$lib/confirm.svelte';
 	import { deleteVm } from '$lib/remote/vms.remote';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -42,8 +42,6 @@
 	}
 </script>
 
-<PageTitle title="Server Settings" />
-
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Server Settings</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
index 1dc4fd6..7ea4591 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
@@ -1,10 +1,10 @@
+<!-- check:allow-missing-head -->
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import ComingSoon from '$lib/components/coming-soon.svelte';
 	import Camera from '~icons/nucleo/camera';
 	import Trash2 from '~icons/nucleo/trash';
-	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -14,8 +14,6 @@
 	]);
 </script>
 
-<PageTitle title="Snapshots" />
-
 <div class="overflow-auto">
 	<div class="flex items-center justify-between px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"

From 73f30dab327ca1f28bef3d1cb45ee99362c6fca7 Mon Sep 17 00:00:00 2001
From: Cypress Reed <cypress@fyralabs.com>
Date: Fri, 24 Jul 2026 17:15:02 -0600
Subject: [PATCH 3/3] fix missing page titles and add checks

---
 .../(app)/projects/[projectid]/servers/[id]/+page.svelte       | 3 +++
 .../projects/[projectid]/servers/[id]/backups/+page.svelte     | 3 +++
 .../projects/[projectid]/servers/[id]/console/+page.svelte     | 3 +++
 .../projects/[projectid]/servers/[id]/images/+page.svelte      | 3 +++
 .../(app)/projects/[projectid]/servers/[id]/logs/+page.svelte  | 3 +++
 .../projects/[projectid]/servers/[id]/networking/+page.svelte  | 3 +++
 .../projects/[projectid]/servers/[id]/rebuild/+page.svelte     | 3 +++
 .../projects/[projectid]/servers/[id]/rescue/+page.svelte      | 3 +++
 .../projects/[projectid]/servers/[id]/resize/+page.svelte      | 3 +++
 .../projects/[projectid]/servers/[id]/settings/+page.svelte    | 3 +++
 .../projects/[projectid]/servers/[id]/snapshots/+page.svelte   | 3 +++
 11 files changed, 33 insertions(+)

diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
index 3ac11d8..c577733 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/+page.svelte
@@ -9,6 +9,7 @@
 	import Terminal from '~icons/nucleo/terminal';
 	import Trash2 from '~icons/nucleo/trash';
 	import { getServerWithFallback, serversState } from '$lib/state/servers.svelte';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -199,6 +200,8 @@
 	}
 </script>
 
+<PageTitle title="Overview" />
+
 <h1 class="sr-only">Server Overview</h1>
 
 <div class="grid shrink-0 grid-cols-2 gap-px border-b border-border bg-muted lg:grid-cols-4">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
index d5cdcf1..4e97e79 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/backups/+page.svelte
@@ -2,6 +2,7 @@
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Badge } from '$lib/components/ui/badge';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -12,6 +13,8 @@
 	];
 </script>
 
+<PageTitle title="Backups" />
+
 <div class="overflow-auto">
 	<div class="px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Backups</span
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
index 3c050dd..e6c24c3 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/console/+page.svelte
@@ -2,11 +2,14 @@
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import Terminal from '~icons/nucleo/terminal';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
 </script>
 
+<PageTitle title="Console" />
+
 <div class="flex min-h-0 flex-1 flex-col items-center justify-center bg-background p-8 text-center">
 	<Terminal class="mb-3 h-8 w-8 text-muted-foreground" />
 	<p class="text-sm text-muted-foreground">Web console isn't available yet</p>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
index 2faea15..80fe20f 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/images/+page.svelte
@@ -19,6 +19,7 @@
 	import Search from '~icons/nucleo/search';
 	import Trash2 from '~icons/nucleo/trash';
 	import Upload from '~icons/nucleo/upload';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -95,6 +96,8 @@
 	}
 </script>
 
+<PageTitle title="Images" />
+
 <div class="flex flex-1 flex-col overflow-hidden">
 	{#if mountedImage}
 		<div class="flex items-center justify-between border-b border-border bg-muted/20 px-5 py-2.5">
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
index 8e96fab..205a725 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/logs/+page.svelte
@@ -8,6 +8,7 @@
 	import AlertTriangle from '~icons/nucleo/alert-triangle';
 	import Search from '~icons/nucleo/search';
 	import Trash2 from '~icons/nucleo/trash';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -73,6 +74,8 @@
 	}
 </script>
 
+<PageTitle title="Logs" />
+
 <div class="flex h-8 shrink-0 items-center justify-between border-b border-border px-4">
 	<div class="flex items-center gap-2">
 		<span class="text-xs font-medium text-muted-foreground">{selectedServer.name}</span>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
index 44e8dac..f542ebc 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/networking/+page.svelte
@@ -12,6 +12,7 @@
 	import Copy from '~icons/nucleo/copy';
 	import Pencil from '~icons/nucleo/pencil';
 	import Trash2 from '~icons/nucleo/trash';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -30,6 +31,8 @@
 	}
 </script>
 
+<PageTitle title="Networking" />
+
 <div class="flex-1 divide-y divide-border/50 overflow-auto">
 	<div class="px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
index 9691530..a60b823 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rebuild/+page.svelte
@@ -5,6 +5,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -18,6 +19,8 @@
 	];
 </script>
 
+<PageTitle title="Rebuild" />
+
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Rebuild Server</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
index a73cf5e..b15f2bf 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/rescue/+page.svelte
@@ -3,11 +3,14 @@
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Switch } from '$lib/components/ui/switch';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
 </script>
 
+<PageTitle title="Rescue" />
+
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Rescue Mode</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
index d5eac6a..390363f 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/resize/+page.svelte
@@ -2,6 +2,7 @@
 <script lang="ts">
 	import { getServerWithFallback } from '$lib/state/servers.svelte';
 	import { Button } from '$lib/components/ui/button';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -13,6 +14,8 @@
 	];
 </script>
 
+<PageTitle title="Resize" />
+
 <div class="space-y-4 p-5">
 	<p class="border border-border bg-background/40 px-3 py-2 text-xs text-muted-foreground">
 		Resizing isn't available yet.
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
index e550369..d3a0f62 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/settings/+page.svelte
@@ -11,6 +11,7 @@
 	import ComingSoon from '$lib/components/coming-soon.svelte';
 	import { confirmDestructive } from '$lib/confirm.svelte';
 	import { deleteVm } from '$lib/remote/vms.remote';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data }: PageProps = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -42,6 +43,8 @@
 	}
 </script>
 
+<PageTitle title="Server Settings" />
+
 <div class="max-w-xl space-y-5 p-5">
 	<div>
 		<h2 class="text-sm font-semibold text-foreground">Server Settings</h2>
diff --git a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
index 7ea4591..d5567ad 100644
--- a/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/projects/[projectid]/servers/[id]/snapshots/+page.svelte
@@ -5,6 +5,7 @@
 	import ComingSoon from '$lib/components/coming-soon.svelte';
 	import Camera from '~icons/nucleo/camera';
 	import Trash2 from '~icons/nucleo/trash';
+	import PageTitle from '$lib/components/PageTitle.svelte';
 
 	let { data } = $props();
 	let selectedServer = $derived(getServerWithFallback(data.serverId, data.server));
@@ -14,6 +15,8 @@
 	]);
 </script>
 
+<PageTitle title="Snapshots" />
+
 <div class="overflow-auto">
 	<div class="flex items-center justify-between px-5 py-3">
 		<span class="text-xs font-semibold tracking-wider text-muted-foreground uppercase"