diff --git a/frontend/src/lib/common/framework/ui/ErrorPage.svelte b/frontend/src/lib/common/framework/ui/ErrorPage.svelte
new file mode 100644
index 0000000..e097286
--- /dev/null
+++ b/frontend/src/lib/common/framework/ui/ErrorPage.svelte
@@ -0,0 +1,14 @@
+<div
+	class="min-h-content-height mx-auto flex max-w-screen-xl flex-col items-center justify-center px-4 md:px-6"
+>
+	<div class="flex flex-row items-end gap-x-4 md:gap-x-6">
+		<h1 class="text-5xl font-extrabold text-gray-800 underline md:text-7xl">404</h1>
+		<h2 class="flex flex-row items-center gap-x-2 text-2xl font-bold md:gap-x-2.5 md:text-3xl">
+			<div class="h-7 w-1.5 bg-gray-800 md:h-9 md:w-2"></div>
+			<div class="rounded-md bg-blue-600 px-1 py-px md:px-1.5 md:py-0.5">
+				<span class="text-white">Not</span>
+			</div>
+			<span class="text-gray-800">Found.</span>
+		</h2>
+	</div>
+</div>
diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte
index 5881914..4d78c58 100644
--- a/frontend/src/routes/+error.svelte
+++ b/frontend/src/routes/+error.svelte
@@ -1,14 +1,5 @@
-<div
-	class="mx-auto flex min-h-content-height max-w-screen-xl flex-col items-center justify-center px-4 md:px-6"
->
-	<div class="flex flex-row items-end gap-x-4 md:gap-x-6">
-		<h1 class="text-5xl font-extrabold text-gray-800 underline md:text-7xl">404</h1>
-		<h2 class="flex flex-row items-center gap-x-2 text-2xl font-bold md:gap-x-2.5 md:text-3xl">
-			<div class="h-7 w-1.5 bg-gray-800 md:h-9 md:w-2"></div>
-			<div class="rounded-md bg-blue-600 px-1 py-px md:px-1.5 md:py-0.5">
-				<span class="text-white">Not</span>
-			</div>
-			<span class="text-gray-800">Found.</span>
-		</h2>
-	</div>
-</div>
+<script>
+	import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
+</script>
+
+<ErrorPage />
diff --git a/frontend/src/routes/dashboard/+layout.svelte b/frontend/src/routes/dashboard/+layout.svelte
index 296fef2..5c2313c 100644
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@@ -8,6 +8,7 @@
 	import { onMount, setContext } from 'svelte';
 	import type { LayoutProps } from './$types';
 	import { StatusType } from '$lib/common/adapter/presenter/asyncState';
+	import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
 
 	const { children }: LayoutProps = $props();
 
@@ -18,10 +19,12 @@
 
 	setContext(AuthBloc.name, authBloc);
 
-	const authState = $derived($authBloc);
-
 	onMount(() => authBloc.dispatch({ event: AuthEventType.CurrentUserLoadedEvent }));
 
+	const authState = $derived($authBloc);
+	const isLoading = $derived.by(
+		() => authState.status === StatusType.Loading || authState.status === StatusType.Idle
+	);
 	const hasError = $derived.by(() => {
 		if (authState.status === StatusType.Error) {
 			return true;
@@ -33,8 +36,10 @@
 	});
 </script>
 
-{#if hasError}
-	<div>Error</div>
+{#if isLoading}
+	<div></div>
+{:else if hasError}
+	<ErrorPage />
 {:else}
 	{@render children()}
 {/if}