diff --git a/src/error.html b/src/error.html
new file mode 100644
index 0000000..946d4db
--- /dev/null
+++ b/src/error.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="pt-BR">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>%sveltekit.status% • %sveltekit.error.message%</title>
+		<meta name="robots" content="noindex" />
+		<style>
+			:root {
+				--page-bg: #eef3ff;
+				--text-strong: #0f1f3a;
+				--text: #2b3a55;
+				--text-muted: #60708a;
+				--accent-blue: #1f4a86;
+			}
+
+			html,
+			body {
+				height: 100%;
+			}
+
+			body {
+				margin: 0;
+				font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+				color: var(--text);
+				background:
+					radial-gradient(1000px 500px at 10% 0%, rgba(31, 74, 134, 0.14), transparent 60%),
+					radial-gradient(900px 480px at 90% 10%, rgba(244, 208, 29, 0.16), transparent 55%),
+					radial-gradient(800px 420px at 30% 100%, rgba(43, 179, 74, 0.12), transparent 55%),
+					var(--page-bg);
+			}
+
+			.wrap {
+				max-width: 56rem;
+				margin: 0 auto;
+				padding: 3.5rem 1rem;
+			}
+
+			.card {
+				background: rgba(255, 255, 255, 0.85);
+				border: 1px solid rgba(15, 31, 58, 0.08);
+				border-radius: 24px;
+				box-shadow: 0 1px 0 rgba(15, 31, 58, 0.04);
+				padding: 2rem;
+			}
+
+			.kicker {
+				font-size: 0.75rem;
+				font-weight: 700;
+				letter-spacing: 0.12em;
+				text-transform: uppercase;
+				color: var(--text-muted);
+			}
+
+			h1 {
+				margin: 0.5rem 0 0;
+				font-size: 1.5rem;
+				line-height: 1.2;
+				letter-spacing: -0.02em;
+				color: var(--text-strong);
+			}
+
+			p {
+				margin: 0.75rem 0 0;
+				line-height: 1.55;
+			}
+
+			.actions {
+				margin-top: 1.75rem;
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.75rem;
+			}
+
+			.primary {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				padding: 0.75rem 1rem;
+				border-radius: 14px;
+				background: var(--accent-blue);
+				color: white;
+				text-decoration: none;
+				font-weight: 700;
+			}
+
+			.secondary {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				padding: 0.75rem 1rem;
+				border-radius: 14px;
+				background: rgba(255, 255, 255, 0.85);
+				color: var(--text-strong);
+				text-decoration: none;
+				font-weight: 700;
+				border: 1px solid rgba(15, 31, 58, 0.1);
+			}
+		</style>
+	</head>
+	<body>
+		<div class="wrap">
+			<div class="card">
+				<div class="kicker">Erro %sveltekit.status%</div>
+				<h1>%sveltekit.error.message%</h1>
+				<p>
+					Se o problema persistir, volte para a página inicial e tente novamente mais tarde.
+				</p>
+				<div class="actions">
+					<a class="primary" href="/">Ir para a página inicial</a>
+					<button class="secondary" type="button" onclick="location.reload()">Recarregar</button>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
+
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..e2427ca
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	const isNotFound = $derived(page.status === 404);
+	const isServerError = $derived(page.status >= 500);
+
+	const title = $derived(isNotFound ? 'Página não encontrada' : 'Não foi possível carregar esta página');
+	const description = $derived(
+		isNotFound
+			? 'O endereço pode estar incorreto, ou a página foi movida/removida.'
+			: 'Ocorreu um erro ao processar sua solicitação. Tente novamente em alguns instantes.'
+	);
+
+	// Evita expor detalhes quando o erro é inesperado (SvelteKit usa "Internal Error").
+	const safeDetails = $derived(
+		!isNotFound && page.error?.message && page.error.message !== 'Internal Error' ? page.error.message : null
+	);
+
+	function goBack() {
+		if (typeof history !== 'undefined') history.back();
+	}
+
+	function reload() {
+		if (typeof location !== 'undefined') location.reload();
+	}
+</script>
+
+<svelte:head>
+	<title>{page.status} • {title} • Secretaria de Esportes de Pernambuco</title>
+	<meta name="robots" content="noindex" />
+</svelte:head>
+
+<div class="min-h-dvh bg-(--page-bg)">
+	<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
+		<section class="overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
+			<div class="px-6 py-10 sm:px-10 sm:py-12">
+				<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
+					Erro {page.status}
+				</p>
+				<h1 class="mt-2 text-2xl font-extrabold tracking-tight text-(--text-strong) sm:text-3xl">
+					{title}
+				</h1>
+				<p class="mt-3 max-w-2xl text-sm leading-relaxed text-(--text)">
+					{description}
+				</p>
+
+				{#if safeDetails}
+					<div class="mt-5 rounded-2xl bg-white/70 p-4 ring-1 ring-black/5">
+						<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Detalhes</p>
+						<p class="mt-2 text-sm text-(--text)">{safeDetails}</p>
+					</div>
+				{/if}
+
+				<div class="mt-8 flex flex-wrap items-center gap-3">
+					<a
+						href="/"
+						class="inline-flex items-center justify-center rounded-xl bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+					>
+						Ir para a página inicial
+					</a>
+
+					<button
+						type="button"
+						onclick={goBack}
+						class="inline-flex items-center justify-center rounded-xl bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+					>
+						Voltar
+					</button>
+
+					{#if isServerError}
+						<button
+							type="button"
+							onclick={reload}
+							class="inline-flex items-center justify-center rounded-xl bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+						>
+							Tentar novamente
+						</button>
+					{/if}
+				</div>
+
+				<div class="mt-8 rounded-2xl bg-white/70 p-5 ring-1 ring-black/5">
+					<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Dica</p>
+					<p class="mt-2 text-sm text-(--text)">
+						Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa no card
+						correspondente.
+					</p>
+				</div>
+			</div>
+		</section>
+	</main>
+</div>
+
