diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 9dd1ad8127..9f3799f5a9 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -189,8 +189,8 @@
 <style>
 	.repl-outer {
 		position: relative;
-		height: calc(100% - var(--sk-nav-height) - var(--sk-banner-bottom-height));
-		height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
+		height: calc(100% - var(--sk-nav-height) - var(--sk-banner-height));
+		height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-height));
 		overflow: hidden;
 		background-color: var(--sk-back-1);
 		box-sizing: border-box;
diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts
index 7c8f9cf344..14a93383c4 100644
--- a/apps/svelte.dev/src/routes/+layout.server.ts
+++ b/apps/svelte.dev/src/routes/+layout.server.ts
@@ -1,6 +1,5 @@
 import { docs, index } from '$lib/server/content';
-import { fetchBanner } from '@sveltejs/site-kit/components';
-import type { NavigationLink } from '@sveltejs/site-kit';
+import type { BannerData, NavigationLink } from '@sveltejs/site-kit';
 
 const nav_links: NavigationLink[] = [
 	{
@@ -52,8 +51,19 @@ const sections: Record<string, string> = {
 	search: 'Search'
 };
 
+const banner: BannerData = {
+	id: 'sveltehack2024',
+	start: new Date('22 Oct, 2024 00:00:00 UTC'),
+	end: new Date('15 December, 2024 23:59:59 UTC'),
+	arrow: true,
+	content: {
+		lg: 'Cast runes, win prizes: SvelteHack 2024',
+		sm: 'SvelteHack 2024'
+	},
+	href: 'https://hack.sveltesociety.dev/2024'
+};
+
 export const load = async ({ url, fetch }) => {
-	const banner = await fetchBanner('svelte.dev', fetch);
 	const nav_title = sections[url.pathname.split('/')[1]!] ?? '';
 
 	return {
diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
index d8f6ef1cfe..943c97961d 100644
--- a/apps/svelte.dev/src/routes/+layout.svelte
+++ b/apps/svelte.dev/src/routes/+layout.svelte
@@ -2,9 +2,9 @@
 	import '@sveltejs/site-kit/styles/index.css';
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
-	import { Shell, Banners } from '@sveltejs/site-kit/components';
+	import { Shell, Banner } from '@sveltejs/site-kit/components';
 	import { Nav } from '@sveltejs/site-kit/nav';
-	import { Search, SearchBox } from '@sveltejs/site-kit/search';
+	import { SearchBox } from '@sveltejs/site-kit/search';
 	import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
 	import { beforeNavigate } from '$app/navigation';
 
@@ -45,8 +45,10 @@
 		{@render layout_children()}
 	{/snippet}
 
-	{#snippet banner_bottom()}
-		<Banners data={data.banner} />
+	{#snippet banner()}
+		{#if data.banner}
+			<Banner banner={data.banner} />
+		{/if}
 	{/snippet}
 </Shell>
 
diff --git a/apps/svelte.dev/src/routes/banner.json/+server.js b/apps/svelte.dev/src/routes/banner.json/+server.js
deleted file mode 100644
index ffe27fd996..0000000000
--- a/apps/svelte.dev/src/routes/banner.json/+server.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { json } from '@sveltejs/kit';
-import { defineBanner } from '@sveltejs/site-kit/components';
-
-export const prerender = true;
-
-// This server route is used by all Svelte sites to load info about which banner to show.
-// site-kit contains components/helpers to make fetching+displaying them easier.
-export const GET = async () => {
-	return json(
-		defineBanner([
-			{
-				id: 'advent2023',
-				start: new Date('1 Dec, 2023 00:00:00 UTC'),
-				end: new Date('24 Dec, 2023 23:59:59 UTC'),
-				arrow: true,
-				content: {
-					lg: 'Advent of Svelte 2023 is here!',
-					sm: 'Advent of Svelte'
-				},
-				href: 'https://advent.sveltesociety.dev/'
-			},
-
-			// This one skips the blog post and just changes the link
-			{
-				id: 'advent2023-finished',
-				start: new Date('25 Dec, 2023 00:00:00 UTC'),
-				end: new Date('1 Jan, 2024 00:00:00 UTC'),
-				arrow: true,
-				content: {
-					lg: 'Advent of Svelte 2023 is over. See you next year!',
-					sm: 'Advent of Svelte 2023 is over!'
-				},
-				href: 'https://advent.sveltesociety.dev/'
-				// scope: ['svelte.dev, kit.svelte.dev'] // Dont show on learn.svelte.dev by not adding it to the array
-			}
-		])
-	);
-};
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index d33977d047..fbf33ff853 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -48,7 +48,7 @@
 		.toc-container {
 			display: block;
 			width: var(--sidebar-width);
-			height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
+			height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-height));
 			position: fixed;
 			left: 0;
 			top: var(--sk-nav-height);
diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
index bcdfc1f159..e7e041eba9 100644
--- a/packages/site-kit/src/lib/components/Banner.svelte
+++ b/packages/site-kit/src/lib/components/Banner.svelte
@@ -1,138 +1,120 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { quintOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
+	import { persisted } from 'svelte-persisted-store';
 	import Icon from './Icon.svelte';
+	import type { BannerData } from '../types';
+	import { browser } from '$app/environment';
 
-	interface Props {
-		/** Whether to show an arrow at the end */
-		arrow?: boolean;
-		/** Link to the event. It must be an absolute path (https://svelte.dev/blog/runes instead of /blog/runes) */
-		href: string;
-		content: {
-			lg?: string;
-			sm?: string;
-		};
-		close?: () => void;
-	}
+	let { banner }: { banner: BannerData } = $props();
+
+	const hidden = persisted<Record<string, boolean>>('svelte:hidden-banners', {});
+	const time = +new Date();
 
-	let { arrow = false, href, content }: Props = $props();
+	let visible = $derived(
+		browser && !$hidden[banner.id] && time > +banner.start && time < +banner.end
+	);
 
-	let show = $state(false);
-	onMount(() => {
-		setTimeout(() => {
-			show = true;
-		}, 300);
+	$effect(() => {
+		document.documentElement.style.setProperty('--sk-banner-height', visible ? '4.2rem' : '0px');
 	});
 </script>
 
-{#if show}
-	<div class="banner-bottom" transition:fade={{ duration: 400, easing: quintOut }}>
-		<div class="main-area">
-			<a {href}>
-				{#if content.lg}
-					<span class="lg">{content.lg}</span>
-				{/if}
+{#if visible}
+	<div class="banner" transition:fade={{ duration: 400, easing: quintOut }}>
+		<a href={banner.href}>
+			{#if banner.content.lg}
+				<span class="large">{banner.content.lg}</span>
+			{/if}
 
-				{#if content.sm}
-					<span class="sm">{content.sm}</span>
-				{/if}
-			</a>
+			{#if banner.content.sm}
+				<span class="small">{banner.content.sm}</span>
+			{/if}
 
-			{#if arrow}
+			{#if banner.arrow}
 				<Icon name="arrow-right" size="1.2em" />
 			{/if}
-		</div>
-
-		<button class="close-button" onclick={() => close?.()}>
+		</a>
+
+		<button
+			aria-label="Dismiss"
+			class="raised primary"
+			onclick={() => {
+				$hidden[banner.id] = true;
+			}}
+		>
 			<Icon name="close" />
 		</button>
 	</div>
 {/if}
 
 <style>
-	.banner-bottom {
+	.banner {
 		position: fixed;
-		bottom: 0;
+		top: 0;
 		left: 0;
 		right: 0;
 		z-index: 80;
-
 		display: flex;
 		justify-content: center;
 		align-items: center;
-
+		font: var(--sk-font-ui-medium);
 		overflow-y: auto;
-
 		width: 100%;
-		height: max-content;
-	}
-
-	.banner-bottom {
-		text-align: center;
+		height: var(--sk-banner-height);
 		background: var(--sk-theme-1-variant);
 		color: white;
-		padding: 8px;
-	}
-
-	.banner-bottom :global(a) {
-		color: hsl(0, 0%, 99%);
+		padding: 0 4rem;
 	}
 
 	button {
 		position: absolute;
-		top: 0;
-		right: 1rem;
-
-		display: flex;
-		align-items: center;
-
+		right: var(--sk-page-padding-side);
 		height: 100%;
+		width: 3.2rem;
+		height: 3.2rem;
 	}
 
-	.main-area {
-		display: flex;
-		align-items: center;
-		gap: 0.6rem;
-	}
-
-	.main-area :global(svg) {
-		transition: transform 0.2s var(--quint-out);
+	a {
+		position: relative;
+		color: inherit;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: pre;
+		text-align: center;
+		line-height: 1;
 	}
 
-	.main-area:hover :global(svg) {
-		transform: translateX(40%);
+	span {
+		position: relative;
+		top: 0.05em;
 	}
 
-	div :global(a[href]) {
-		text-decoration: none;
-		padding: 0;
+	.large {
+		display: none;
 	}
 
-	a .lg {
+	.small {
 		display: initial;
 	}
 
-	a .sm {
-		display: none;
-	}
-
-	@media screen and (max-width: 799px) {
-		.banner-bottom {
-			bottom: initial;
-			top: 0;
+	@media (min-width: 800px) {
+		.banner {
+			top: initial;
+			bottom: 0;
 		}
 
-		.main-area :global(svg) {
-			display: none;
+		button {
+			right: 1rem;
 		}
 
-		a .lg {
-			display: none;
+		.large {
+			display: initial;
 		}
 
-		a .sm {
-			display: initial;
+		.small {
+			display: none;
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Banners.svelte b/packages/site-kit/src/lib/components/Banners.svelte
deleted file mode 100644
index 9a9b1110df..0000000000
--- a/packages/site-kit/src/lib/components/Banners.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script module>
-	type BannerScope = 'svelte.dev' | 'kit.svelte.dev' | 'learn.svelte.dev';
-	interface BannerData {
-		id: string;
-		start: number;
-		end: number;
-		arrow: boolean;
-		href: string;
-		content: {
-			lg?: string;
-			sm?: string;
-		};
-		scope?: BannerScope[];
-	}
-	type BannerDataInput = Array<Omit<BannerData, 'start' | 'end'> & { start: Date; end?: Date }>;
-
-	/**
-	 * Only to be used on non svelte.dev sites. Shouldn't be used inside svelte.dev codebase itself
-	 */
-	export async function fetchBanner(
-		scope: BannerScope = 'svelte.dev',
-		fetch: RequestEvent['fetch']
-	): Promise<BannerData[]> {
-		if (scope === 'svelte.dev') {
-			const data = (await fetch('/banner.json').then((r) => r.json())) as BannerData[];
-
-			// Find out if any time overlap will happen in any banner.
-			// If so, throw an error.
-			// This is to prevent showing 2 banners at once at any point of time.
-			for (const banner of data) {
-				for (const other of data) {
-					if (banner.id === other.id) continue;
-					if (banner.start < other.end && banner.end > other.start) {
-						throw new Error(
-							`svelte.dev/banner.json: Banner with ID ${banner.id} and ${other.id} are overlapping.`
-						);
-					}
-				}
-			}
-
-			return data;
-		}
-
-		const req = await fetch('https://svelte.dev/banner.json');
-		if (!req.ok) {
-			console.warn('There was an error fetching the banner data. Check svelte.dev/banner.json');
-			return [];
-		}
-
-		return ((await req.json()) as BannerData[]).filter(
-			(banner) => !banner.scope || banner.scope?.includes(scope)
-		);
-	}
-
-	export function defineBanner(data: BannerDataInput): BannerData[] {
-		return data.map((v) => ({
-			...v,
-			start: +v.start,
-			end: v.end ? +v.end : +new Date('2023-12-01')
-		}));
-	}
-</script>
-
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { persisted } from 'svelte-persisted-store';
-	import Banner from './Banner.svelte';
-	import type { RequestEvent } from '@sveltejs/kit';
-
-	let { data }: { data: BannerData[] } = $props();
-
-	const preferences = persisted<Record<string, boolean>>('svelte:banner-preferences', {});
-	const time = +new Date();
-
-	let showing = $derived(
-		data.filter(({ id, start, end }) => $preferences[id] && time > start && time < end)
-	);
-
-	$effect(() => {
-		document.documentElement.style.setProperty(
-			'--sk-banner-bottom-height',
-			showing.length ? '41.9px' : '0px'
-		);
-	});
-
-	onMount(() => {
-		for (const { id } of data) {
-			$preferences[id] ??= true;
-		}
-	});
-</script>
-
-{#each showing as { content, href, id, arrow }}
-	<Banner {arrow} {href} on:close={() => ($preferences[id] = false)} {content} />
-{/each}
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
index e4a04af3b5..5ad0a960ea 100644
--- a/packages/site-kit/src/lib/components/Shell.svelte
+++ b/packages/site-kit/src/lib/components/Shell.svelte
@@ -16,12 +16,12 @@ The main shell of the application. It provides a slot for the top navigation, th
 		nav_visible = true,
 		top_nav,
 		children,
-		banner_bottom
+		banner
 	}: {
 		nav_visible?: boolean;
 		top_nav?: Snippet;
 		children?: Snippet;
-		banner_bottom?: Snippet;
+		banner?: Snippet;
 	} = $props();
 </script>
 
@@ -45,22 +45,20 @@ The main shell of the application. It provides a slot for the top navigation, th
 	{@render children?.()}
 </main>
 
-<div class="banner-bottom">
-	{@render banner_bottom?.()}
-</div>
+{@render banner?.()}
 
 <style>
 	main {
 		position: relative;
 		margin: 0 auto;
 		padding-top: var(--sk-nav-height);
-		padding-bottom: var(--sk-banner-bottom-height);
+		padding-bottom: var(--sk-banner-height);
 		height: 100%;
 	}
 
 	@media (max-width: 799px) {
 		main {
-			padding-top: var(--sk-banner-bottom-height);
+			padding-top: var(--sk-banner-height);
 			padding-bottom: 0;
 		}
 	}
diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts
index 8f1340eae3..ff63bdeda3 100644
--- a/packages/site-kit/src/lib/components/index.ts
+++ b/packages/site-kit/src/lib/components/index.ts
@@ -1,4 +1,4 @@
-export { default as Banners, defineBanner, fetchBanner } from './Banners.svelte';
+export { default as Banner } from './Banner.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Dropdown } from './Dropdown.svelte';
 export { default as HoverMenu } from './HoverMenu.svelte';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 35ff58a2da..158172f057 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -20,7 +20,7 @@
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;
 	--sk-page-content-width: 84rem;
-	--sk-banner-bottom-height: 0px;
+	--sk-banner-height: 0px;
 	--sk-pane-controls-height: 4.2rem;
 
 	/* typography (prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
@@ -73,7 +73,7 @@
 	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
 
 	/* same in light mode, different in dark mode */
-	--sk-theme-1-variant: hsl(15, 100%, 50%);
+	--sk-theme-1-variant: var(--sk-theme-1);
 
 	--sk-code-base: var(--sk-text-2);
 	--sk-code-comment: var(--sk-text-4);
@@ -152,7 +152,7 @@
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);
 		--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
 
-		--sk-theme-1-variant: hsl(15, 100%, 40%);
+		--sk-theme-1-variant: hsl(15, 100%, 35%);
 
 		--sk-text-warning-hsl: 32, 67%, 56%;
 
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index b9f742ed21..84f73e5173 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -10,8 +10,16 @@
 			hsla(12, 93%, 70%);
 		--sk-raised-active-color: hsla(12, 93%, 30%) hsla(12, 93%, 70%) hsla(12, 93%, 70%)
 			hsla(12, 93%, 30%);
-		background: var(--sk-theme-1);
+		background: var(--sk-theme-1-variant);
 		color: white;
+
+		:root.dark & {
+			--sk-raised-color: hsla(12, 93%, 60%) hsla(12, 93%, 30%) hsla(12, 93%, 30%) hsla(12, 93%, 60%);
+			--sk-raised-hover-color: hsla(12, 93%, 65%) hsla(12, 93%, 27%) hsla(12, 93%, 27%)
+				hsla(12, 93%, 65%);
+			--sk-raised-active-color: hsla(12, 93%, 25%) hsla(12, 93%, 70%) hsla(12, 93%, 70%)
+				hsla(12, 93%, 25%);
+		}
 	}
 
 	&:hover {
diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts
index 73bf62bbd7..b980161cc1 100644
--- a/packages/site-kit/src/lib/types.d.ts
+++ b/packages/site-kit/src/lib/types.d.ts
@@ -36,3 +36,15 @@ export interface Section {
 	slug: string;
 	title: string;
 }
+
+export interface BannerData {
+	id: string;
+	start: Date;
+	end: Date;
+	arrow: boolean;
+	href: string;
+	content: {
+		lg?: string;
+		sm?: string;
+	};
+}