diff --git a/apps/calendar/apps/web/src/lib/i18n/index.ts b/apps/calendar/apps/web/src/lib/i18n/index.ts
index 00626549b..4928d3441 100644
--- a/apps/calendar/apps/web/src/lib/i18n/index.ts
+++ b/apps/calendar/apps/web/src/lib/i18n/index.ts
@@ -35,11 +35,17 @@ function getInitialLocale(): SupportedLocale {
 }
 
 // Initialize i18n at module scope (required for SSR)
+// Always set initialLocale to ensure it's never undefined
 init({
 	fallbackLocale: defaultLocale,
-	initialLocale: getInitialLocale(),
+	initialLocale: browser ? getInitialLocale() : defaultLocale,
 });
 
+// On browser, also explicitly set locale to ensure it's loaded
+if (browser) {
+	locale.set(getInitialLocale());
+}
+
 // Set locale and persist to localStorage
 export function setLocale(newLocale: SupportedLocale) {
 	locale.set(newLocale);
diff --git a/apps/calendar/apps/web/src/routes/+layout.svelte b/apps/calendar/apps/web/src/routes/+layout.svelte
index bf247f9cb..e0ed75e76 100644
--- a/apps/calendar/apps/web/src/routes/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import '../app.css';
+	// Initialize i18n early - must be imported before any component that uses $_
+	import { waitLocale } from '$lib/i18n';
 	import { onMount } from 'svelte';
 	import { theme } from '$lib/stores/theme';
 	import { authStore } from '$lib/stores/auth.svelte';
@@ -11,6 +13,9 @@
 	let loading = $state(true);
 
 	onMount(async () => {
+		// Wait for i18n locale to be loaded
+		await waitLocale();
+
 		// Initialize theme
 		theme.initialize();