diff --git a/apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md
deleted file mode 100644
index 2bbb2d4639..0000000000
--- a/apps/svelte.dev/content/blog/2017-08-07-the-easiest-way-to-get-started.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: The easiest way to get started with Svelte
-description: This'll only take a minute.
-author: Rich Harris
-authorURL: https://twitter.com/Rich_Harris
----
-
-Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a `<script src='svelte.js'>` tag on the page, or bringing it into your app with `import` or `require`, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.
-
-Because of that, getting started with it can be a little bit confusing at first. How, you might reasonably ask, do you make a Svelte app?
-
-## 1. Use the REPL
-
-The [Svelte REPL](/repl) (Read-Eval-Print Loop) is the easiest way to begin. This is an interactive environment that allows you to modify code and instantly see the result.
-
-You can choose from a list of [examples](/examples/), click the [REPL](/repl) link, and then tweak them until they do what you want.
-
-<aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></aside>
-
-At some point, your app will outgrow the REPL. Click the **download** button to save a `svelte-app.zip` file to your computer and uncompress it.
-
-Open a terminal window and set the project up...
-
-```bash
-cd /path/to/svelte-app
-npm install
-```
-
-...then start up a development server:
-
-```bash
-npm run dev
-```
-
-This will serve your app on [localhost:8080](http://localhost:8080) and rebuild it with [Rollup](https://rollupjs.org) every time you make a change to the files in `svelte-app/src`.
-
-## 2. Use degit
-
-When you download from the REPL, you're getting a customised version of the [sveltejs/template](https://github.com/sveltejs/template) repo. You can skip messing around with zip files by using [degit](https://github.com/Rich-Harris/degit), a project scaffolding tool.
-
-In the terminal, you can instantly create a new project like so:
-
-```bash
-npx degit sveltejs/template my-svelte-project
-cd my-svelte-project
-# to use TypeScript run:
-# node scripts/setupTypeScript.js
-
-npm install
-npm run dev
-```
-
-This will create a new project in the `my-svelte-project` directory, install its dependencies, and start a server on http://localhost:8080.
-
-You can find more information about using TypeScript [here](/blog/svelte-and-typescript).
-
-Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
-
-```bash
-npx degit your-name/template my-new-project
-```
-
-And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Vercel](https://vercel.com) or [Surge](http://surge.sh/).
-
-You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](https://svelte.dev/chat), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!
diff --git a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
index b20b3a43d4..88be4d0e31 100644
--- a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
+++ b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md
@@ -101,7 +101,7 @@ Here's an equivalent component in Vue:
 ```
 
 <aside>
-	<p>I'm counting by copying the source code to the clipboard and running `pbpaste | wc -c` in my terminal</p>
+	<p>I'm counting by copying the source code to the clipboard and running <code>pbpaste | wc -c</code> in my terminal</p>
 </aside>
 
 In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!
diff --git a/apps/svelte.dev/content/blog/2024-04-30-svelte-5-release-candidate.md b/apps/svelte.dev/content/blog/2024-04-30-svelte-5-release-candidate.md
index e88c8eb99a..681393881d 100644
--- a/apps/svelte.dev/content/blog/2024-04-30-svelte-5-release-candidate.md
+++ b/apps/svelte.dev/content/blog/2024-04-30-svelte-5-release-candidate.md
@@ -28,7 +28,7 @@ For the last several months, we've been hard at work rewriting Svelte from the g
 You can learn more about the new features from the [preview documentation](https://svelte-5-preview.vercel.app/docs), and by watching the presentation from the most recent [Svelte Summit](https://www.sveltesummit.com/):
 
 <div class="max">
-<figure style="max-width: 960px; margin: 0 auto">
+<figure style="max-width: 1040px; margin: 0 auto">
 <div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
 	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
diff --git a/apps/svelte.dev/src/routes/blog/+page.server.js b/apps/svelte.dev/src/routes/blog/+page.server.js
index 37de117f70..a6b721c5de 100644
--- a/apps/svelte.dev/src/routes/blog/+page.server.js
+++ b/apps/svelte.dev/src/routes/blog/+page.server.js
@@ -3,11 +3,17 @@ import { blog_posts } from '$lib/server/content';
 export const prerender = true;
 
 export async function load() {
-	return {
-		posts: blog_posts.map((document) => ({
+	const posts = blog_posts
+		.map((document) => ({
 			metadata: document.metadata,
 			date: document.date,
+			date_formatted: document.date_formatted,
+			authors: document.authors,
 			slug: document.slug
 		}))
+		.filter((document) => !document.metadata.draft);
+
+	return {
+		posts
 	};
 }
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 44474755a1..c85cfbcd3c 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -1,5 +1,11 @@
-<script>
-	export let data;
+<script lang="ts">
+	import Byline from './Byline.svelte';
+
+	let { data } = $props();
+
+	const featured = data.posts.filter((post) => !post.metadata.title.startsWith('What’s new'));
+	const whats_new = data.posts.filter((post) => post.metadata.title.startsWith('What’s new'));
+	const top = data.posts[0];
 </script>
 
 <svelte:head>
@@ -17,29 +23,53 @@
 </svelte:head>
 
 <h1 class="visually-hidden">Blog</h1>
-<div class="posts stretch">
-	{#each data.posts as post}
-		{#if !post.metadata.draft}
-			<article class="post" data-pubdate={post.date}>
-				<a href="/{post.slug}" title="Read the article »">
-					<h2>{post.metadata.title}</h2>
-					<p>{post.metadata.description}</p>
-				</a>
-			</article>
-		{/if}
-	{/each}
+
+<div class="container">
+	<article class="top" data-pubdate={top.date}>
+		<a href="/{top.slug}" title="Read the article »">
+			<h2>{top.metadata.title}</h2>
+			<p>{top.metadata.description}</p>
+		</a>
+
+		<Byline post={top} />
+	</article>
+
+	<div class="grid">
+		<div class="featured posts">
+			{#each data.posts.slice(1) as post}
+				<article
+					class:feature={!post.metadata.title.startsWith('What’s new')}
+					data-pubdate={post.date}
+				>
+					<a href="/{post.slug}" title="Read the article »">
+						<h2>{post.metadata.title}</h2>
+						<p>{post.metadata.description}</p>
+					</a>
+
+					<Byline {post} />
+				</article>
+			{/each}
+		</div>
+
+		<ul class="feed">
+			{#each whats_new as post}
+				<li>
+					<a href="/{post.slug}" title="Read the article »">
+						{post.metadata.title.replace('What’s new in Svelte: ', '')}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
 </div>
 
 <style>
-	.posts {
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 1em;
-		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);
+	.container {
 		max-width: var(--sk-page-content-width);
 		box-sizing: content-box;
 		margin: 0 auto;
 		text-wrap: balance;
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
 	}
 
 	h2 {
@@ -48,22 +78,11 @@
 		font-size: var(--sk-font-size-h3);
 	}
 
-	.post {
+	article {
 		margin: 2em 0;
 
-		&:where(:first-child, :nth-child(2))::before {
-			content: 'Latest post • ' attr(data-pubdate);
-			color: var(--sk-text-4);
-			font-family: var(--sk-font-ui);
-			font-size: var(--sk-font-size-ui-small);
-			text-transform: uppercase;
-		}
-
-		&:nth-child(2)::before {
-			content: 'Older posts';
-		}
-
-		&:first-child {
+		/* we need to use :global because snippets don't currently cause a deopt */
+		&.top {
 			margin: 0 0 2rem 0;
 			padding: 0 0 4rem 0;
 
@@ -76,6 +95,8 @@
 		a {
 			display: block;
 			text-decoration: none;
+			color: var(--sk-text-2);
+			font-size: var(--sk-font-size-body);
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -85,7 +106,67 @@
 		p {
 			font-size: var(--sk-font-size-body-small);
 			color: var(--sk-text-3);
+			margin: 0 0 0.5em 0;
+		}
+	}
+
+	.feed {
+		display: none;
+	}
+
+	@media (min-width: 800px) {
+		.grid {
+			display: grid;
+			grid-template-columns: 3fr 1fr;
+			gap: 3em;
+		}
+
+		.featured {
+			display: block;
+
+			&::before {
+				content: 'Featured posts';
+				font-family: var(--sk-font-ui);
+				font-size: var(--sk-font-size-ui-medium);
+				text-transform: uppercase;
+				color: var(--sk-text-4);
+			}
+
+			article {
+				&:not(.feature) {
+					display: none;
+				}
+
+				h2 {
+					font-size: var(--sk-font-size-h2);
+				}
+			}
+		}
+
+		.feed {
+			position: relative;
+			display: block;
+			padding: 2em 0;
 			margin: 0;
+			list-style: none;
+
+			&::before {
+				content: 'Monthly updates';
+				position: absolute;
+				top: 0;
+				font-family: var(--sk-font-ui);
+				font-size: var(--sk-font-size-ui-medium);
+				text-transform: uppercase;
+				color: var(--sk-text-4);
+			}
+
+			a {
+				display: block;
+				font-family: var(--sk-font-body);
+				font-weight: 400;
+				font-size: var(--sk-font-size-body);
+				color: var(--sk-text-2);
+			}
 		}
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/Byline.svelte b/apps/svelte.dev/src/routes/blog/Byline.svelte
new file mode 100644
index 0000000000..a2c06f8ea6
--- /dev/null
+++ b/apps/svelte.dev/src/routes/blog/Byline.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface PostStub {
+		authors: Array<{ name: string; url: string }>;
+		date: string;
+		date_formatted: string;
+	}
+
+	let { post }: { post: PostStub } = $props();
+</script>
+
+<p class="byline">
+	{#each post.authors as author, i}
+		{@const show_comma = post.authors.length > 2 && i < post.authors.length - 1}
+		{@const show_and = i === post.authors.length - 2}
+		<svelte:element this={author.url ? 'a' : 'span'} href={author.url}>{author.name}</svelte:element
+		>{#if show_comma},&nbsp;{/if}
+		{#if show_and}and&nbsp;{/if}
+	{/each}
+	<time datetime={post.date}>{post.date_formatted}</time>
+</p>
+
+<style>
+	.byline {
+		margin: 0 0 4rem 0;
+		padding: 1rem 0 0 0;
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-small);
+		text-transform: uppercase;
+	}
+</style>
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 88565531ac..cdcb4173ad 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { Text } from '@sveltejs/site-kit/components';
 	import { setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import Byline from '../Byline.svelte';
 
 	let { data } = $props();
 
@@ -25,17 +26,7 @@
 		<h1>{data.metadata.title}</h1>
 		<p class="standfirst">{data.metadata.description}</p>
 
-		<p class="byline">
-			{#each data.authors as author, i}
-				{@const show_comma = data.authors.length > 2 && i < data.authors.length - 1}
-				{@const show_and = i === data.authors.length - 2}
-				<svelte:element this={author.url ? 'a' : 'span'} href={author.url}
-					>{author.name}</svelte:element
-				>{#if show_comma},&nbsp;{/if}
-				{#if show_and}and&nbsp;{/if}
-			{/each}
-			<time datetime={data.date}>{data.date_formatted}</time>
-		</p>
+		<Byline post={data} />
 
 		<Text>
 			{@html data.body}
@@ -49,6 +40,74 @@
 		max-width: var(--sk-page-content-width);
 		box-sizing: content-box;
 		margin: 0 auto;
+
+		:global {
+			figure {
+				margin: 1.6rem 0 3.2rem 0;
+
+				img {
+					max-width: 100%;
+				}
+
+				figcaption {
+					color: var(--sk-text-4);
+					text-align: left;
+					font-size: var(--sk-font-size-body-small);
+				}
+			}
+
+			video {
+				width: 100%;
+			}
+
+			aside {
+				float: right;
+				margin: 0 0 1em 1em;
+				width: 16rem;
+				z-index: 2;
+
+				p {
+					color: var(--sk-text-4);
+					font-family: var(--sk-font-body);
+					font-size: var(--sk-font-size-body-small);
+
+					&:first-child {
+						margin-top: 0;
+					}
+
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
+			}
+
+			.max {
+				width: 100%;
+			}
+
+			iframe {
+				width: 100%;
+				height: 420px;
+				margin: 2em 0;
+				border-radius: var(--sk-border-radius);
+				border: 0.8rem solid var(--sk-theme-4);
+			}
+
+			blockquote {
+				background: none;
+
+				&::before {
+					content: '“';
+					position: absolute;
+					font-size: 6.4em;
+					line-height: 1;
+					left: 0;
+					top: 0;
+					font-family: var(--sk-font-heading);
+					color: var(--sk-text-4);
+				}
+			}
+		}
 	}
 
 	h1 {
@@ -61,67 +120,25 @@
 		margin: 0 0 1em 0;
 	}
 
-	.byline {
-		margin: 0 0 4rem 0;
-		padding: 1rem 0 0 0;
-		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
-		text-transform: uppercase;
-	}
-
-	.post :global(figure) {
-		margin: 1.6rem 0 3.2rem 0;
-	}
-
-	.post :global(figure) :global(img) {
-		max-width: 100%;
-	}
-
-	.post :global(figcaption) {
-		color: var(--sk-text-4);
-		text-align: left;
-	}
-
-	.post :global(video) {
-		width: 100%;
-	}
-
-	.post :global(aside) {
-		float: right;
-		margin: 0 0 1em 1em;
-		width: 16rem;
-		color: var(--sk-text-4);
-		z-index: 2;
-	}
-
-	.post :global(.max) {
-		width: 100%;
-	}
-
-	.post :global(iframe) {
-		width: 100%;
-		height: 420px;
-		margin: 2em 0;
-		border-radius: var(--sk-border-radius);
-		border: 0.8rem solid var(--sk-theme-4);
-	}
-
-	@media (min-width: 910px) {
-		.post :global(.max) {
-			width: calc(100vw - 2 * var(--sk-page-padding-side));
-			margin: 0 calc(var(--sk-page-content-width) / 2 - 50vw);
-			text-align: center;
-		}
-
-		.post :global(.max) > :global(*) {
-			width: 100%;
-			max-width: 1200px;
-		}
-
-		.post :global(iframe) {
-			width: 100%;
-			max-width: 1100px;
-			margin: 2em auto;
+	@media (min-width: 960px) {
+		.post :global {
+			.max {
+				width: 100vw;
+				/* padding: 0 var(--sk-page-padding-side); */
+				margin-left: calc(var(--sk-page-content-width) / 2 - 50vw);
+				text-align: center;
+
+				& > * {
+					width: 100%;
+					max-width: 1200px;
+				}
+			}
+
+			iframe {
+				width: 100%;
+				max-width: 1100px;
+				margin: 2em auto;
+			}
 		}
 	}
 </style>
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 01f8be6517..63bf61f45d 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -26,7 +26,6 @@
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
 		"@fontsource/fira-sans": "^5.1.0",
-		"@fontsource/yantramanav": "^5.1.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
 		"svelte-persisted-store": "^0.9.2"
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index eccd3eebb5..a2e1b442d8 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -378,6 +378,7 @@
 			color: var(--sk-text-1);
 			padding: 0 0 0 4.5rem;
 			font-style: italic;
+			background: url($lib/icons/lightbulb.svg) no-repeat 0.5rem 0 / 3rem;
 
 			&:first-child {
 				margin-top: 0;
@@ -387,17 +388,6 @@
 				margin-bottom: 0;
 			}
 
-			&::before {
-				content: '';
-				display: block;
-				width: 3rem;
-				height: 3rem;
-				position: absolute;
-				left: 0.5rem;
-				top: 0;
-				background: url($lib/icons/lightbulb.svg) no-repeat 50% 50% / contain;
-			}
-
 			&.deprecated {
 				--primary-hsl: var(--sk-text-warning-hsl);
 				--color: var(--primary-hsl);
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index bfaf88c2ae..e6f828830a 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -190,12 +190,13 @@ table :where(code, span) {
 }
 
 /*	helper styles -------------------------- */
+/* TODO this shoudl be moved */
 figcaption,
 .post aside {
-	max-width: none;
+	/* max-width: none;
 	margin: 0 auto;
 	padding: 1.6rem 0 0 0.8rem;
-	font: 1.2rem/1.6 var(--sk-font-mono);
+	font: 1.2rem/1.6 var(--sk-font-mono); */
 }
 
 /* visually hidden, but accessible to assistive tech */
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index f45a8cdd34..a907fb48cf 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -1,10 +1,10 @@
-@import '@fontsource/eb-garamond';
+@import '@fontsource/eb-garamond/400.css';
 @import '@fontsource/eb-garamond/500.css';
 @import '@fontsource/eb-garamond/400-italic.css';
-@import '@fontsource/dm-serif-display';
-@import '@fontsource/yantramanav/400.css';
-@import '@fontsource/fira-mono';
-@import '@fontsource/fira-sans';
+@import '@fontsource/dm-serif-display/400.css';
+@import '@fontsource/dm-serif-display/400-italic.css';
+@import '@fontsource/fira-mono/400.css';
+@import '@fontsource/fira-sans/400.css';
 
 @import './tokens.css';
 @import './base.css';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 920d5d8306..f1e1954fa0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -358,9 +358,6 @@ importers:
       '@fontsource/fira-sans':
         specifier: ^5.1.0
         version: 5.1.0
-      '@fontsource/yantramanav':
-        specifier: ^5.1.0
-        version: 5.1.0
       esm-env:
         specifier: ^1.0.0
         version: 1.0.0
@@ -811,9 +808,6 @@ packages:
   '@fontsource/fira-sans@5.1.0':
     resolution: {integrity: sha512-qfAjF5WcrL6qQh9eIWLK7lOh9wbCgCnVWh2Nu2gozrTgsUgYBLR8sbCGYwlK1K0yZoQsR2i9VSiQ16wwPCBkSw==}
 
-  '@fontsource/yantramanav@5.1.0':
-    resolution: {integrity: sha512-wSmYmoGhFbYF4XUXouudROqTn6GREe0HTV/HqcnRLYbQJNa3kmqbcebIm9PxPDQ0l3y2speJAlbOoDGM2DN9dg==}
-
   '@img/sharp-darwin-arm64@0.33.4':
     resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==}
     engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
@@ -3233,8 +3227,6 @@ snapshots:
 
   '@fontsource/fira-sans@5.1.0': {}
 
-  '@fontsource/yantramanav@5.1.0': {}
-
   '@img/sharp-darwin-arm64@0.33.4':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.2