diff --git a/apps/nutriphi/apps/web/src/routes/+layout.svelte b/apps/nutriphi/apps/web/src/routes/+layout.svelte
index 9660c3bf1..3bcb1587f 100644
--- a/apps/nutriphi/apps/web/src/routes/+layout.svelte
+++ b/apps/nutriphi/apps/web/src/routes/+layout.svelte
@@ -3,22 +3,33 @@
 	import '$lib/i18n';
 	import { isLoading as i18nLoading, _ as t } from 'svelte-i18n';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
 
-	// Initialize auth on mount
-	$effect(() => {
-		authStore.initialize();
+	let loading = $state(true);
+	let appReady = $derived(!loading && !$i18nLoading);
+
+	onMount(() => {
+		authStore.initialize().then(() => {
+			loading = false;
+		});
 	});
 </script>
 
 <svelte:head>
-	<title>{$t('app.name')} - {$t('app.tagline')}</title>
+	{#if appReady}
+		<title>{$t('app.name')} - {$t('app.tagline')}</title>
+	{:else}
+		<title>NutriPhi</title>
+	{/if}
 </svelte:head>
 
-{#if $i18nLoading}
-	<div class="flex min-h-screen items-center justify-center">
-		<p>{$t('app.loading')}</p>
+{#if !appReady}
+	<div class="flex min-h-screen items-center justify-center bg-background">
+		<div
+			class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+		></div>
 	</div>
 {:else}
 	{@render children()}