diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 9388b7f..ece53f6 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -50,8 +50,8 @@ export const handle: Handle = async ({ event, resolve }) => {
 			"worker-src 'self' blob:; " +
 			"style-src 'self' 'unsafe-inline' fonts.googleapis.com; " +
 			"font-src 'self' fonts.gstatic.com; " +
-			"img-src 'self' data: blob: *.openstreetmap.org *.tile.openstreetmap.org *.r2.cloudflarestorage.com; " +
-			"media-src 'self' *.r2.cloudflarestorage.com; " +
+			"img-src 'self' data: blob: *.openstreetmap.org *.tile.openstreetmap.org *.r2.cloudflarestorage.com *.r2.dev; " +
+			"media-src 'self' *.r2.cloudflarestorage.com *.r2.dev; " +
 			"connect-src 'self' *.openstreetmap.org; " +
 			"frame-ancestors 'none'; " +
 			"base-uri 'self'; " +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a0ffc26..fc0a232 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,11 +6,20 @@
 	import { Toaster } from '$lib/components/sonner/index.js';
 	import { Skeleton } from '$lib/components/skeleton';
 	import LocationManager from '$lib/components/LocationManager.svelte';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	let { children, data } = $props();
 	let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
 	let showHeader = $derived(!isLoginRoute && data?.user);
-	let isLoading = $derived(!isLoginRoute && !data?.user && data !== null);
+	let isLoading = $state(false);
+
+	// Handle loading state only on client to prevent hydration mismatch
+	onMount(() => {
+		if (browser) {
+			isLoading = !isLoginRoute && !data?.user && data !== null;
+		}
+	});
 </script>
 
 <svelte:head>