diff --git a/.changeset/pre.json b/.changeset/pre.json
index f8940cfe..4b90eb27 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -1,5 +1,5 @@
 {
-  "mode": "pre",
+  "mode": "exit",
   "tag": "next",
   "initialVersions": {
     "@sveltejs/site-kit": "3.4.0"
diff --git a/.changeset/warm-maps-drop.md b/.changeset/warm-maps-drop.md
new file mode 100644
index 00000000..4cfd20f0
--- /dev/null
+++ b/.changeset/warm-maps-drop.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': patch
+---
+
+Minor fixes to style
diff --git a/packages/site-kit/src/lib/branding/svelte-logo.svg b/packages/site-kit/src/lib/branding/svelte-logo.svg
new file mode 100644
index 00000000..1bd561c1
--- /dev/null
+++ b/packages/site-kit/src/lib/branding/svelte-logo.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 358.464 235.952">
+	<defs>
+		<style>.a{fill:#ff3e00;}.b{fill:#fff;}.c{fill:#1273ff;}.d{fill:#ffd815;}</style>
+		<symbol id="a" viewBox="0 0 93.224 112">
+			<path class="a" d="M87.269,14.819C76.869-.066,56.328-4.478,41.477,4.984L15.4,21.608A29.921,29.921,0,0,0,1.876,41.651,31.514,31.514,0,0,0,4.984,61.882,30.006,30.006,0,0,0,.507,73.065,31.892,31.892,0,0,0,5.955,97.181c10.4,14.887,30.942,19.3,45.791,9.835L77.829,90.392A29.915,29.915,0,0,0,91.347,70.349a31.522,31.522,0,0,0-3.1-20.232,30.019,30.019,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116"/>
+			<path class="b" d="M38.929,98.582a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968A5.844,5.844,0,0,0,28,83.122a6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L62.382,68.281a5.43,5.43,0,0,0,2.451-3.631,5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.755,5.755,0,0,0-1.6.7l-9.953,6.345a19.06,19.06,0,0,1-5.3,2.326,20.719,20.719,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,22.915,32.37L49,15.747a19.03,19.03,0,0,1,5.3-2.329,20.72,20.72,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5,18.453,18.453,0,0,1-.624,2.435l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.241,6.241,0,0,0-6.7-2.485,5.748,5.748,0,0,0-1.6.7L30.842,43.719a5.421,5.421,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328,20.718,20.718,0,0,1,22.236,8.243,19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L44.229,96.253a19.017,19.017,0,0,1-5.3,2.329"/>
+		</symbol>
+	</defs>
+	<use width="93.224" height="112" transform="translate(34.228 29.267) scale(1.584)" xlink:href="#a"/>
+</svg>
diff --git a/packages/site-kit/src/lib/components/Nav.svelte b/packages/site-kit/src/lib/components/Nav.svelte
index 6cfc1ed9..74467efa 100644
--- a/packages/site-kit/src/lib/components/Nav.svelte
+++ b/packages/site-kit/src/lib/components/Nav.svelte
@@ -7,9 +7,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import Icon from './Icon.svelte';
 	import Separator from './Separator.svelte';
 
-	/** @type {string} */
-	export let logo;
-	export let home = 'Home';
 	export let home_title = 'Homepage';
 
 	let open = false;
@@ -62,8 +59,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 {/if}
 
 <nav class:visible={visible || open} class:open bind:this={nav} aria-label="Primary">
-	<a href="/" class="nav-spot home" title={home_title} style="background-image: url({logo})">
-		{home}
+	<a href="/" class="nav-spot home" title={home_title}>
+		<slot name="home" />
 	</a>
 
 	<button
@@ -86,7 +83,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		<Separator />
 
 		<div class="appearance">
-			<span class="caption">Color Scheme</span>
+			<span class="caption">Theme</span>
 			<ThemeToggle />
 		</div>
 	</ul>
@@ -154,15 +151,28 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	ul :global(a) {
 		color: var(--sk-text-2);
+		line-height: 1;
 	}
 
 	.home {
 		height: var(--sk-nav-height);
 		display: flex;
-		text-indent: -9999px;
+		background-image: url(../branding/svelte-logo.svg);
 		background-position: calc(var(--sk-page-padding-side) - 1rem) 50%;
 		background-repeat: no-repeat;
 		background-size: auto 70%;
+		align-items: center;
+		padding-left: calc(var(--sk-page-padding-side) + 4rem);
+		text-decoration: none;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		font-size: 1.8rem;
+		color: var(--sk-text-4);
+	}
+
+	.home :global(strong) {
+		color: var(--sk-text-1);
+		font-weight: inherit;
 	}
 
 	button {
@@ -177,7 +187,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: 100%;
 		align-items: center;
 		margin-left: 0.75rem;
-		transform: translateY(2px);
+		/* transform: translateY(2px); */
 	}
 
 	.appearance .caption {
@@ -187,7 +197,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		margin-right: 0.5rem;
 	}
 
-	@media (max-width: 800px) {
+	@media (max-width: 799px) {
 		ul {
 			position: relative;
 			display: none;
@@ -228,14 +238,18 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			justify-content: space-between;
 			align-items: center;
 			margin: 10px 0 0;
-			padding: 1rem 0.75rem;
+			padding: 1rem 1.25rem;
 			background: var(--sk-back-3);
-			border-radius: 0.5rem;
+			border-radius: 3.5rem;
 		}
 
 		.appearance .caption {
 			display: block;
 		}
+
+		.home :global(span :not(strong)) {
+			display: none;
+		}
 	}
 
 	@media (min-width: 800px) {
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 0c48eb68..391acf29 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -30,6 +30,8 @@
 
 @media only screen and (prefers-color-scheme: dark) {
 	:root {
+		color-scheme: dark;
+
 		--sk-back-3-hsl: 0, 0%, 14%;
 		--sk-back-1: hsl(0, 0%, 10%);
 		--sk-back-2: hsl(0, 0%, 18%);
@@ -43,6 +45,7 @@
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);
+		--sk-text-4: hsl(0, 0%, 45%);
 		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);
 
@@ -68,6 +71,8 @@
 	}
 
 	body.light {
+		color-scheme: light;
+
 		--sk-back-3-hsl: 206, 64%, 98%;
 		--sk-back-1: hsl(0, 0%, 100%);
 		--sk-back-2: hsl(0, 0%, 100%); /* same as sk-back-1 in light mode, different in dark mode */
@@ -80,6 +85,7 @@
 		--sk-text-1: hsl(0, 0%, 13%);
 		--sk-text-2: hsl(0, 0%, 27%);
 		--sk-text-3: var(--sk-theme-2);
+		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 
 		/* same in light mode, different in dark mode */
@@ -125,6 +131,8 @@
 
 @media screen and (prefers-color-scheme: light) {
 	:root {
+		color-scheme: light;
+
 		--sk-back-3-hsl: 206, 64%, 98%;
 		--sk-back-1: hsl(0, 0%, 100%);
 		--sk-back-2: hsl(0, 0%, 100%); /* same as sk-back-1 in light mode, different in dark mode */
@@ -137,6 +145,7 @@
 		--sk-text-1: hsl(0, 0%, 13%);
 		--sk-text-2: hsl(0, 0%, 27%);
 		--sk-text-3: var(--sk-theme-2);
+		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 
 		/* same in light mode, different in dark mode */
@@ -165,6 +174,8 @@
 	}
 
 	body.dark {
+		color-scheme: dark;
+
 		--sk-back-3-hsl: 0, 0%, 14%;
 		--sk-back-1: hsl(0, 0%, 10%);
 		--sk-back-2: hsl(0, 0%, 18%);
@@ -178,6 +189,7 @@
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);
+		--sk-text-4: hsl(0, 0%, 45%);
 		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);