diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 8bfd036de4..9f9a4127ef 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -37,6 +37,7 @@
 		min-height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
 		max-width: var(--sk-page-main-width);
+		box-sizing: content-box;
 		margin: 0 auto;
 		text-wrap: balance;
 	}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 1d656f7adc..57a7917000 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -45,8 +45,9 @@
 
 <style>
 	.post {
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
 		max-width: var(--sk-page-main-width);
+		box-sizing: content-box;
 		margin: 0 auto;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 14aabaa9a0..874a88f2ff 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -57,37 +57,87 @@
 </script>
 
 <div class="page">
-	<div>
-		<h2>Svelte</h2>
-		<p>Svelte is a compiler-based framework for creating fast and efficient UIs.</p>
-		<a href="/docs/svelte">read the docs</a>
-	</div>
-	<div>
-		<h2>SvelteKit</h2>
-		<p>
-			SvelteKit is a framework for rapidly developing robust, performant web applications using
-			Svelte
-		</p>
-		<a href="/docs/kit">read the docs</a>
+	<h1>Documentation</h1>
+	<p>
+		Head to the <a href="/docs/svelte">Svelte</a> or <a href="/docs/kit">SvelteKit</a> reference docs,
+		or choose your adventure:
+	</p>
+
+	<div class="options">
+		<a href="/tutorial">
+			<h2>I&rsquo;m brand new here</h2>
+			<p>
+				We recommend starting with the interactive tutorial, which will teach you how to use Svelte
+				right here in your browser.
+			</p>
+		</a>
+
+		<a href="/docs/svelte/migrating">
+			<h2>I&rsquo;m migrating an app from Svelte 4</h2>
+			<p>
+				If you&rsquo;re already experienced with an older version of Svelte, the migration guide
+				will bring you up to speed on the changes in Svelte 5.
+			</p>
+		</a>
+
+		<a href="/playground">
+			<h2>I just want to try it out</h2>
+			<p>
+				Head over to the playground to see examples, create your own Svelte apps in the browser, and
+				share them with other people.
+			</p>
+		</a>
+
+		<a href="/chat" class="external">
+			<h2>Help! I'm stuck</h2>
+			<p>
+				Join our Discord server where you can hang out with fellow Svelte users and ask them
+				questions. It's like an LLM but with people.
+			</p>
+		</a>
 	</div>
 </div>
 
 <style>
 	.page {
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-		justify-items: center;
-		max-width: 100rem;
+		max-width: var(--sk-page-main-width);
+		box-sizing: content-box;
 		margin: auto;
+		text-wrap: balance;
+	}
+
+	.options a {
+		display: block;
+		color: var(--sk-text-2);
+		margin: 1em -2em;
+		padding: 2em;
+		background-color: var(--sk-back-1);
+		border-radius: var(--sk-border-radius);
 
-		& > div {
-			padding: 2rem;
-			max-width: 50rem;
+		&:hover {
+			background-color: var(--sk-back-2);
+			filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
+			text-decoration: none;
+
+			h2 {
+				text-decoration: underline;
+			}
 		}
-	}
 
-	a {
-		font-size: var(--sk-font-size-body-small);
+		h2 {
+			padding-right: 4rem;
+			background: url(./arrow-right.svg) no-repeat 100% 50%;
+			background-size: 3rem;
+
+			.external & {
+				background-image: url(./external-link.svg);
+				background-size: 3rem;
+			}
+		}
+
+		p:last-child {
+			margin-bottom: 0;
+		}
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/docs/arrow-right.svg b/apps/svelte.dev/src/routes/docs/arrow-right.svg
new file mode 100644
index 0000000000..1e020ac881
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><g stroke="hsl(12 93 48)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" clip-path="url(#a)"><path d="M18 12.004H6M12 6l6 6-6 6"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
diff --git a/apps/svelte.dev/src/routes/docs/external-link.svg b/apps/svelte.dev/src/routes/docs/external-link.svg
new file mode 100644
index 0000000000..6770bf94e2
--- /dev/null
+++ b/apps/svelte.dev/src/routes/docs/external-link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:hsl(12 93 48)}</style></defs><g id="Layer_1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M15 3h6v6M12 12l9-9M18 11.6v4.8c0 .9-.7 1.6-1.6 1.6H7.6c-.9 0-1.6-.7-1.6-1.6V7.6C6 6.7 6.7 6 7.6 6h4.8" class="cls-1"/></g></svg>
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 416af9baf2..dd8acb34bd 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -18,7 +18,7 @@
 	--sk-page-padding-side: 2.4rem;
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;
-	--sk-page-main-width: 80rem;
+	--sk-page-main-width: 84rem;
 	--sk-banner-bottom-height: 0px;
 
 	/* typography */
@@ -37,7 +37,7 @@
 	--sk-font-size-ui-large: 3rem; /* TODO add regular/small */
 	--sk-font-size-code: 1.4rem;
 
-	--sk-line-max-width: 84rem;
+	--sk-line-max-width: 84rem; /* TODO can this be merged with --sk-page-main-width?
 
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;