diff --git a/apps/svelte.dev/README.md b/apps/svelte.dev/README.md
index bf6c3c6ff7..9cfdd92815 100644
--- a/apps/svelte.dev/README.md
+++ b/apps/svelte.dev/README.md
@@ -15,9 +15,7 @@ Cross-Origin-Embedder-Policy: require-corp
 Cross-Origin-Opener-Policy: same-origin
 ```
 
-Because we're doing soft navigation between pages, these headers need to be set for all responses, not just the ones from `/tutorial`.
-
-The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute (or the experimental-only-working-in-chrome `credentialless` for iframes) to the elements that load those URLs.
+The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute (or the experimental-only-working-in-chrome `credentialless` for iframes) to the elements that load those URLs. For this reason, navigations between the SvelteKit tutorial and other pages (and vice versa) are full page navigations so the headers don't interfere with the rest of the page.
 
 When writing content for the tutorial, you need to be aware of the differences of loading content:
 
diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
index 28bd34375d..085d6de94f 100644
--- a/apps/svelte.dev/src/routes/+layout.svelte
+++ b/apps/svelte.dev/src/routes/+layout.svelte
@@ -1,15 +1,30 @@
-<script>
+<script lang="ts">
 	import '@sveltejs/site-kit/styles/index.css';
-
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
-	import { Icon, Shell, Banners } from '@sveltejs/site-kit/components';
-	import { Nav, Separator } from '@sveltejs/site-kit/nav';
+	import { Shell, Banners } from '@sveltejs/site-kit/components';
+	import { Nav } from '@sveltejs/site-kit/nav';
 	import { Search, SearchBox } from '@sveltejs/site-kit/search';
 	import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
+	import { beforeNavigate } from '$app/navigation';
 
 	injectSpeedInsights();
 
+	// Make all navigations between SvelteKit-tutorial and non-SvelteKit-tutorial pages (and vice versa)
+	// a full page navigation to ensure webcontainers get the correct origin restriction headers while
+	// ensuring those headers don't interfere with the rest of the page. These headers would have bad
+	// consequences on how we have to handle integration of images etc from other domains for example.
+	beforeNavigate(({ from, to, cancel }) => {
+		if (!from || !to) return;
+
+		if (
+			from.url.pathname.startsWith('/tutorial/kit/') !== to.url.pathname.startsWith('/tutorial/kit')
+		) {
+			cancel();
+			location.href = to.url.href;
+		}
+	});
+
 	let { data, children: layout_children } = $props();
 </script>
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 680e62ae73..5805f64800 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -19,7 +19,7 @@
 		selected_name,
 		solution
 	} from './state.js';
-	import { text_files } from './shared';
+	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
 	import { page } from '$app/stores';
 
@@ -317,10 +317,10 @@
 					</section>
 
 					<section slot="b" class="preview">
-						{#if /svelte$/.test($page.data.exercise.part.slug)}
-							<OutputRollup />
-						{:else}
+						{#if needs_webcontainers($page.data.exercise)}
 							<Output exercise={data.exercise} {paused} />
+						{:else}
+							<OutputRollup />
 						{/if}
 					</section>
 				</SplitPane>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
index 0a86794fb4..b192b96d29 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts
@@ -3,6 +3,7 @@ import { page } from '$app/stores';
 import type { state as WCState } from '$lib/tutorial/adapters/webcontainer/index.svelte';
 import type { state as RollupState } from '$lib/tutorial/adapters/rollup/index.svelte';
 import type { Adapter, FileStub, Stub } from '$lib/tutorial';
+import { needs_webcontainers } from './shared';
 
 let initial_load = true;
 let use_rollup = $state(true);
@@ -35,9 +36,9 @@ export const adapter_state = new (class {
 
 if (browser) {
 	page.subscribe(($page) => {
-		const slug = $page.data?.exercise?.part?.slug;
-		if (slug) {
-			use_rollup = /svelte$/.test(slug);
+		const exercise = $page.data?.exercise;
+		if (exercise) {
+			use_rollup = !needs_webcontainers(exercise);
 
 			if (use_rollup) {
 				load_rollup();
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/shared.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/shared.ts
index 4d8905ec30..f15df53c9f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/shared.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/shared.ts
@@ -1,3 +1,5 @@
+import type { Exercise } from '$lib/tutorial';
+
 export const text_files = new Set([
 	'.svelte',
 	'.txt',
@@ -10,3 +12,8 @@ export const text_files = new Set([
 	'.md',
 	'.env'
 ]);
+
+/** The SvelteKit tutorial needs web container technology */
+export function needs_webcontainers(exercise: Exercise | undefined) {
+	return !!exercise && /sveltekit$/.test(exercise.part?.slug);
+}