diff --git a/app/routes/(auth)/download-recovery-key.tsx b/app/routes/(auth)/download-recovery-key.tsx
index 961fa271..0e5f598d 100644
--- a/app/routes/(auth)/download-recovery-key.tsx
+++ b/app/routes/(auth)/download-recovery-key.tsx
@@ -3,6 +3,7 @@ import { DownloadRecoveryKeyPage } from "~/client/modules/auth/routes/download-r
 
 export const Route = createFileRoute("/(auth)/download-recovery-key")({
 	component: DownloadRecoveryKeyPage,
+	errorComponent: () => <div>Failed to load recovery key</div>,
 	head: () => ({
 		meta: [
 			{ title: "Zerobyte - Download Recovery Key" },
diff --git a/app/routes/(auth)/login.error.tsx b/app/routes/(auth)/login.error.tsx
index 1ba4f47d..36f3b2d8 100644
--- a/app/routes/(auth)/login.error.tsx
+++ b/app/routes/(auth)/login.error.tsx
@@ -4,6 +4,7 @@ import { LoginPage } from "~/client/modules/auth/routes/login";
 
 export const Route = createFileRoute("/(auth)/login/error")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load login error</div>,
 	validateSearch: type({ error: "string?" }),
 	head: () => ({
 		meta: [
diff --git a/app/routes/(auth)/login.tsx b/app/routes/(auth)/login.tsx
index 303cc4ea..d3a0259c 100644
--- a/app/routes/(auth)/login.tsx
+++ b/app/routes/(auth)/login.tsx
@@ -4,6 +4,7 @@ import { LoginPage } from "~/client/modules/auth/routes/login";
 
 export const Route = createFileRoute("/(auth)/login")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load login</div>,
 	validateSearch: type({ error: "string?" }),
 	head: () => ({
 		meta: [
diff --git a/app/routes/(auth)/onboarding.tsx b/app/routes/(auth)/onboarding.tsx
index 3883bc63..a23f5160 100644
--- a/app/routes/(auth)/onboarding.tsx
+++ b/app/routes/(auth)/onboarding.tsx
@@ -3,6 +3,7 @@ import { OnboardingPage } from "~/client/modules/auth/routes/onboarding";
 
 export const Route = createFileRoute("/(auth)/onboarding")({
 	component: OnboardingPage,
+	errorComponent: () => <div>Failed to load onboarding</div>,
 	head: () => ({
 		meta: [
 			{ title: "Zerobyte - Onboarding" },
diff --git a/app/routes/(auth)/route.tsx b/app/routes/(auth)/route.tsx
index e62aea49..5c4a6ceb 100644
--- a/app/routes/(auth)/route.tsx
+++ b/app/routes/(auth)/route.tsx
@@ -3,6 +3,7 @@ import { authMiddleware } from "~/middleware/auth";
 
 export const Route = createFileRoute("/(auth)")({
 	component: () => <Outlet />,
+	errorComponent: () => <div>Failed to load auth</div>,
 	server: {
 		middleware: [authMiddleware],
 	},
diff --git a/app/routes/(dashboard)/admin/index.tsx b/app/routes/(dashboard)/admin/index.tsx
index 17c78f53..ff953ba4 100644
--- a/app/routes/(dashboard)/admin/index.tsx
+++ b/app/routes/(dashboard)/admin/index.tsx
@@ -8,6 +8,7 @@ import { getAdminUsersOptions, getRegistrationStatusOptions } from "~/client/api
 export const Route = createFileRoute("/(dashboard)/admin/")({
 	validateSearch: type({ tab: "string?" }),
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load admin</div>,
 	loader: async ({ context }) => {
 		const authContext = await fetchUser();
 
diff --git a/app/routes/(dashboard)/backups/$backupId/$snapshotId.restore.tsx b/app/routes/(dashboard)/backups/$backupId/$snapshotId.restore.tsx
index 54f22d4b..e9f80b4f 100644
--- a/app/routes/(dashboard)/backups/$backupId/$snapshotId.restore.tsx
+++ b/app/routes/(dashboard)/backups/$backupId/$snapshotId.restore.tsx
@@ -6,6 +6,7 @@ import { getVolumeMountPath } from "~/client/lib/volume-path";
 
 export const Route = createFileRoute("/(dashboard)/backups/$backupId/$snapshotId/restore")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load restore</div>,
 	loader: async ({ params, context }) => {
 		const schedule = await getBackupSchedule({ path: { shortId: params.backupId } });
 
diff --git a/app/routes/(dashboard)/backups/$backupId/index.tsx b/app/routes/(dashboard)/backups/$backupId/index.tsx
index 7a9215f7..84f2a9ad 100644
--- a/app/routes/(dashboard)/backups/$backupId/index.tsx
+++ b/app/routes/(dashboard)/backups/$backupId/index.tsx
@@ -13,6 +13,7 @@ import { prefetchOrSkip } from "~/utils/prefetch";
 
 export const Route = createFileRoute("/(dashboard)/backups/$backupId/")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load backup</div>,
 	validateSearch: type({ snapshot: "string?" }),
 	loader: async ({ params, context }) => {
 		const { backupId } = params;
diff --git a/app/routes/(dashboard)/backups/create.tsx b/app/routes/(dashboard)/backups/create.tsx
index 95a9a368..01d33f97 100644
--- a/app/routes/(dashboard)/backups/create.tsx
+++ b/app/routes/(dashboard)/backups/create.tsx
@@ -3,6 +3,7 @@ import { listRepositoriesOptions, listVolumesOptions } from "~/client/api-client
 import { CreateBackupPage } from "~/client/modules/backups/routes/create-backup";
 
 export const Route = createFileRoute("/(dashboard)/backups/create")({
+	errorComponent: () => <div>Failed to load backup creation</div>,
 	loader: async ({ context }) => {
 		await Promise.all([
 			context.queryClient.ensureQueryData({ ...listVolumesOptions() }),
diff --git a/app/routes/(dashboard)/backups/index.tsx b/app/routes/(dashboard)/backups/index.tsx
index c4cba64a..f799562e 100644
--- a/app/routes/(dashboard)/backups/index.tsx
+++ b/app/routes/(dashboard)/backups/index.tsx
@@ -4,6 +4,7 @@ import { BackupsPage } from "~/client/modules/backups/routes/backups";
 
 export const Route = createFileRoute("/(dashboard)/backups/")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load backups</div>,
 	loader: async ({ context }) => {
 		await context.queryClient.ensureQueryData({
 			...listBackupSchedulesOptions(),
diff --git a/app/routes/(dashboard)/notifications/$notificationId.tsx b/app/routes/(dashboard)/notifications/$notificationId.tsx
index 91f34911..ceab9f70 100644
--- a/app/routes/(dashboard)/notifications/$notificationId.tsx
+++ b/app/routes/(dashboard)/notifications/$notificationId.tsx
@@ -4,6 +4,7 @@ import { NotificationDetailsPage } from "~/client/modules/notifications/routes/n
 
 export const Route = createFileRoute("/(dashboard)/notifications/$notificationId")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load notification</div>,
 	loader: async ({ params, context }) => {
 		const res = await context.queryClient.ensureQueryData({
 			...getNotificationDestinationOptions({ path: { id: params.notificationId } }),
diff --git a/app/routes/(dashboard)/notifications/create.tsx b/app/routes/(dashboard)/notifications/create.tsx
index b69b0800..c621303a 100644
--- a/app/routes/(dashboard)/notifications/create.tsx
+++ b/app/routes/(dashboard)/notifications/create.tsx
@@ -3,11 +3,9 @@ import { CreateNotificationPage } from "~/client/modules/notifications/routes/cr
 
 export const Route = createFileRoute("/(dashboard)/notifications/create")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load notification creation</div>,
 	staticData: {
-		breadcrumb: () => [
-			{ label: "Notifications", href: "/notifications" },
-			{ label: "Create" },
-		],
+		breadcrumb: () => [{ label: "Notifications", href: "/notifications" }, { label: "Create" }],
 	},
 	head: () => ({
 		meta: [
diff --git a/app/routes/(dashboard)/notifications/index.tsx b/app/routes/(dashboard)/notifications/index.tsx
index 2761f22d..b7df7c53 100644
--- a/app/routes/(dashboard)/notifications/index.tsx
+++ b/app/routes/(dashboard)/notifications/index.tsx
@@ -4,6 +4,7 @@ import { NotificationsPage } from "~/client/modules/notifications/routes/notific
 
 export const Route = createFileRoute("/(dashboard)/notifications/")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load notifications</div>,
 	loader: async ({ context }) => {
 		await context.queryClient.ensureQueryData({ ...listNotificationDestinationsOptions() });
 	},
diff --git a/app/routes/(dashboard)/repositories/create.tsx b/app/routes/(dashboard)/repositories/create.tsx
index 32d88460..a6abc051 100644
--- a/app/routes/(dashboard)/repositories/create.tsx
+++ b/app/routes/(dashboard)/repositories/create.tsx
@@ -3,11 +3,9 @@ import { CreateRepositoryPage } from "~/client/modules/repositories/routes/creat
 
 export const Route = createFileRoute("/(dashboard)/repositories/create")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load repository creation</div>,
 	staticData: {
-		breadcrumb: () => [
-			{ label: "Repositories", href: "/repositories" },
-			{ label: "Create" },
-		],
+		breadcrumb: () => [{ label: "Repositories", href: "/repositories" }, { label: "Create" }],
 	},
 	head: () => ({
 		meta: [
diff --git a/app/routes/(dashboard)/settings/index.tsx b/app/routes/(dashboard)/settings/index.tsx
index 1297d6ad..f3adff3c 100644
--- a/app/routes/(dashboard)/settings/index.tsx
+++ b/app/routes/(dashboard)/settings/index.tsx
@@ -10,6 +10,7 @@ import { getOrganizationContext } from "~/server/lib/functions/organization-cont
 export const Route = createFileRoute("/(dashboard)/settings/")({
 	component: RouteComponent,
 	validateSearch: type({ tab: "string?" }),
+	errorComponent: () => <div>Failed to load settings</div>,
 	loader: async ({ context }) => {
 		const authContext = await fetchUser();
 		const orgContext = await getOrganizationContext();
diff --git a/app/routes/(dashboard)/settings/sso/new.tsx b/app/routes/(dashboard)/settings/sso/new.tsx
index 49a3debb..69bbca75 100644
--- a/app/routes/(dashboard)/settings/sso/new.tsx
+++ b/app/routes/(dashboard)/settings/sso/new.tsx
@@ -4,6 +4,7 @@ import { getOrganizationContext } from "~/server/lib/functions/organization-cont
 
 export const Route = createFileRoute("/(dashboard)/settings/sso/new")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load SSO registration</div>,
 	loader: async () => {
 		const orgContext = await getOrganizationContext();
 		const role = orgContext.activeMember?.role;
diff --git a/app/routes/(dashboard)/volumes/create.tsx b/app/routes/(dashboard)/volumes/create.tsx
index 80f58942..c01b6b80 100644
--- a/app/routes/(dashboard)/volumes/create.tsx
+++ b/app/routes/(dashboard)/volumes/create.tsx
@@ -3,6 +3,7 @@ import { CreateVolumePage } from "~/client/modules/volumes/routes/create-volume"
 
 export const Route = createFileRoute("/(dashboard)/volumes/create")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load volume creation</div>,
 	staticData: {
 		breadcrumb: () => [{ label: "Volumes", href: "/volumes" }, { label: "Create" }],
 	},
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 1d8acb38..4b93f506 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -10,6 +10,7 @@ export const Route = createFileRoute("/")({
 			},
 		],
 	}),
+	errorComponent: () => <div>Failed to load page</div>,
 	beforeLoad: () => {
 		throw redirect({ to: "/volumes" });
 	},