diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index d7ab07488c..eb8dba565e 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -1,12 +1,13 @@
 <script>
-	import { Blurb } from '@sveltejs/site-kit/components';
+	import { Blurb, theme } from '@sveltejs/site-kit/components';
 	import Demo from './_components/Demo.svelte';
 	import Hero from './_components/Hero.svelte';
 	import Image from './_components/Image.svelte';
 	import Supporters from './_components/Supporters/index.svelte';
 	import Try from './_components/Try.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
-	import Balls from './svelte-balls.png?w=640;1280;2560;3800&format=avif;webp;png&as=picture';
+	import BallsLight from './svelte-collective-light.png?w=640;1280;2560;3800&format=avif;webp;png&as=picture';
+	import BallsDark from './svelte-collective-dark.png?w=640;1280;2560;3800&format=avif;webp;png&as=picture';
 </script>
 
 <svelte:head>
@@ -61,7 +62,13 @@
 
 <Supporters />
 
-<Image src={Balls} alt="The Svelte logo in a ball pit" />
+<div style="aspect-ratio: 4490 / 990;">
+	{#if $theme.current === 'light'}
+		<Image src={BallsLight} alt="The Svelte logo in a ball pit" />
+	{:else}
+		<Image src={BallsDark} alt="The Svelte logo in a ball pit" />
+	{/if}
+</div>
 
 <footer>
 	<a href="/tutorial">Tutorial</a>
diff --git a/sites/svelte.dev/src/routes/_components/svelte-machine.png b/sites/svelte.dev/src/routes/_components/svelte-machine.png
index ddfa0af924..fae8c70b0b 100644
Binary files a/sites/svelte.dev/src/routes/_components/svelte-machine.png and b/sites/svelte.dev/src/routes/_components/svelte-machine.png differ
diff --git a/sites/svelte.dev/src/routes/svelte-balls.png b/sites/svelte.dev/src/routes/svelte-balls.png
deleted file mode 100644
index d37ce71a2f..0000000000
Binary files a/sites/svelte.dev/src/routes/svelte-balls.png and /dev/null differ
diff --git a/sites/svelte.dev/src/routes/svelte-collective-dark.png b/sites/svelte.dev/src/routes/svelte-collective-dark.png
new file mode 100755
index 0000000000..32a6b9e7a6
Binary files /dev/null and b/sites/svelte.dev/src/routes/svelte-collective-dark.png differ
diff --git a/sites/svelte.dev/src/routes/svelte-collective-light.png b/sites/svelte.dev/src/routes/svelte-collective-light.png
new file mode 100755
index 0000000000..fcf5d99dfd
Binary files /dev/null and b/sites/svelte.dev/src/routes/svelte-collective-light.png differ